深入剖析从输入URL到页面显示过程原理

目录
  • 前言
  • 1. 用户输入
  • 2. URL 请求过程
  • 3. 准备渲染进程
  • 4. 提交文档
  • 5. 渲染阶段
  • 最后

前言

说说从输入 URL 到页面显示的过程，这是一个在面试中经常会被问到的问题，此问题能比较全面地考察应聘者知识的掌握程度。其中涉及到了网络、操作系统、Web 等一系列的知识。

以 Chrome 浏览器为例，目前的 Chrome 浏览器有以下几个进程：

浏览器进程。主要负责界面显示、用户交互、子进程管理，同时提供存储等功能。

渲染进程。主要职责是把从网络下载的 HTML、JavaScript、CSS、图片等资源解析为可以显示和交互的页面。

GPU 进程。其实，Chrome 刚开始发布的时候是没有 GPU 进程的。而 GPU 的使用初衷是为了实现 3D CSS 的效果，只是随后网页、Chrome 的 UI 界面都选择采用 GPU 来绘制，这使得 GPU 成为浏览器普遍的需求。

网络进程。主要负责页面的网络资源加载，之前是作为一个模块运行在浏览器进程里面的，后面才独立出来，成为一个单独的进程。

插件进程。主要是负责插件的运行，因插件易崩溃，所以需要通过插件进程来隔离，以保证插件进程崩溃不会对浏览器和页面造成影响。

在了解了浏览器有哪些进程，以及它们各自的职责之后，结合这些进程，我们再来分析从输入 URL 到页面显示的过程。

1. 用户输入

如果输入的是内容，地址栏会使用浏览器默认的搜索引擎，来合成新的带搜索关键字的 URL。

如果输入的是 URL，那么地址栏会根据规则，把这段内容加上协议，合成为完整的 URL。

2. URL 请求过程

浏览器进程会通过进程间通信（IPC）把 URL 请求发送至网络进程，网络进程接收到 URL 请求后，会在这里发起真正的 URL 请求流程。那具体流程是怎样的呢？

网络进程会查找本地缓存是否缓存了该资源。如果有缓存资源，那么直接返回资源给浏览器进程；如果在缓存中没有查找到资源，那么直接进入网络请求流程。这请求前的第一步是要进行 DNS 解析，以获取请求域名的服务器 IP 地址。如果请求协议是 HTTPS，那么还需要建立 TLS 连接。

接下来就是利用 IP 地址和服务器建立 TCP 连接 (三次握手)。连接建立之后，浏览器端会构建请求行、请求头等信息，并把和该域名相关的 cookie 等数据附加到请求头中，然后向服务器发送构建的请求信息。

服务器接收到请求信息后，会根据请求信息生成响应数据（包括响应行、响应头和响应体等信息），并发给网络进程。等网络进程接收了响应行和响应头之后，就开始解析响应头的内容了。

Content-Type 是 HTTP 头中一个非常重要的字段， 它告诉浏览器服务器返回的响应体数据是什么类型，然后浏览器会根据 Content-Type 的值来决定如何显示响应体的内容。

如果 Content-Type 字段的值被浏览器判断为下载类型，那么该请求会被提交给浏览器的下载管理器，同时该 URL 请求的导航流程就此结束。但如果是 HTML，那么浏览器则会继续进行导航流程。

3. 准备渲染进程

如果协议和根域名相同，则属于同一站点。

但如果从一个页面打开了另一个新页面，而新页面和当前页面属于同一站点的话，那么新页面会复用父页面的渲染进程。

渲染进程准备好之后，还不能立即进入文档解析状态，因为此时的文档数据还在网络进程中，并没有提交给渲染进程，所以下一步就进入了提交文档阶段。

4. 提交文档

所谓提交文档，就是指浏览器进程将网络进程接收到的 HTML 数据提交给渲染进程，具体流程是这样的：

首先当浏览器进程接收到网络进程的响应头数据之后，便向渲染进程发起“提交文档”的消息。

渲染进程接收到“提交文档”的消息后，会和网络进程建立传输数据的“管道”。

等文档数据传输完成之后，渲染进程会返回“确认提交”的消息给浏览器进程。

浏览器进程在收到“确认提交”的消息后，会更新浏览器界面状态，包括了安全状态、地址栏的 URL、前进后退的历史状态，并更新 Web 页面。

5. 渲染阶段

一旦文档被提交，渲染进程便开始页面解析和子资源加载。

渲染进程将 HTML 内容转换为能够读懂的 DOM 树结构。

渲染引擎将 CSS 样式表转化为浏览器可以理解的 styleSheets，计算出 DOM 节点的样式。

创建布局树，并计算元素的布局信息。

对布局树进行分层，并生成分层树。

为每个图层生成绘制列表，并将其提交到合成线程。

合成线程将图层分成图块，并在光栅化线程池中将图块转换成位图。

合成线程发送绘制图块命令 DrawQuad 给浏览器进程。

浏览器进程根据 DrawQuad 消息生成页面，并显示到显示器上。

最后

以上就是笔者对这一常考面试题的一些总结，对于其中的一些具体过程并没有详细地列举出来，更多关于输入URL到页面显示过程的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • js获取url页面id，也就是最后的数字文件名

    第一种方法:正则匹配 <script> var strUrl = "//www.jb51.net/article/825.htm"; url = strUrl.match(/\/(\d*)\.(html|htm|shtm|shtml)/); document.write(url[1]); </script> 实际应用代码 <script> var strUrl = location.href; url = strUrl.match(/\/(\d*)\

  • 详解uniapp页面跳转URL传参大坑

    案例 展示电影详情,传递电影的id.从search.vue传递到movie.vue methods: { showMovie(e){ var trailerid = e.currentTarget.dataset.trailerid; // console.log(trailerid); uni.navigateTo({ url: '../movie/movie?trailerId='+trailerid, success: res => {}, fail: () => {}, complet

  • vue如何给页面增加url前缀

    目录 vue页面增加url前缀 vue路径上设置指定的前缀 解决 总结 vue页面增加url前缀 在main.js中找到这段代码 const createRouter = () => new Router({   mode: 'history', // require service support   scrollBehavior: () => ({ y: 0 }),   routes: constantRoutes }) 加上 base: 'web', //页面路由前缀 修改后代码: co

  • Python爬虫获取页面所有URL链接过程详解

    如何获取一个页面内所有URL链接?在Python中可以使用urllib对网页进行爬取,然后利用Beautiful Soup对爬取的页面进行解析,提取出所有的URL. 什么是Beautiful Soup? Beautiful Soup提供一些简单的.python式的函数用来处理导航.搜索.修改分析树等功能.它是一个工具箱,通过解析文档为用户提供需要抓取的数据,因为简单,所以不需要多少代码就可以写出一个完整的应用程序. Beautiful Soup自动将输入文档转换为Unicode编码,输出文档转换

  • JavaScript数据在不同页面的传递（URL参数获取）

    JavaScript数据在不同页面的传递（URL参数获取）

            网页中,我们常常遇到这种情况,当我们在某个页面输入信息的时候,会跳转到另一个页面,并且会将我们输入的信息传递到另一个页面中,怎样操作呢? 今天,我们就来实战一下,比如,现在有两个页面,当我们在一个页面输入用户信息的时候,就会跳转到另一个页面并显示,xx欢迎登录的界面. 先来看看设计思路: 第一个登录页面,里面有提交表单, action 提交到index.html页面 第二个页面,可以使用第一个页面的参数,这样实现了一个数据不同页面之间的传递效果 第二个页面之所以可以使用第一个页面

  • 深入剖析从输入URL到页面显示过程原理

    目录 前言 1. 用户输入 2. URL 请求过程 3. 准备渲染进程 4. 提交文档 5. 渲染阶段 最后 前言 说说从输入 URL 到页面显示的过程,这是一个在面试中经常会被问到的问题,此问题能比较全面地考察应聘者知识的掌握程度.其中涉及到了网络.操作系统.Web 等一系列的知识. 以 Chrome 浏览器为例,目前的 Chrome 浏览器有以下几个进程: 浏览器进程.主要负责界面显示.用户交互.子进程管理,同时提供存储等功能. 渲染进程.主要职责是把从网络下载的 HTML.JavaScri

  • 概述一个页面从输入URL到页面加载完的过程

    过程概述 浏览器查找域名对应的 IP 地址: 浏览器根据 IP 地址与服务器建立 socket 连接: 浏览器与服务器通信: 浏览器请求,服务器处理请求: 浏览器与服务器断开连接. 以下为详细解析: 根据域名查找 IP 地址 概念解释 IP 地址:IP 协议为互联网上的每一个网络和每一台主机分配的一个逻辑地址.IP 地址如同门牌号码,通过 IP 地址才能确定一台主机位置.服务器本质也是一台主机,想要访问某个服务器,必须先知道它的 IP 地址: 域名( DN ):IP 地址由四个数字组成,中间用点

  • 无阻塞加载js,防止因js加载不了影响页面显示的问题

    浏览器加载静态资源和js的方式都是线性加载,所以一般情况可以将js放到</body>前,防止UI线程的阻塞. 而某些时候我们既希望js在整个网页的头部就加载,又担心js阻塞导致网站加载缓慢,就可以用到无阻塞加载js技术. Dynamic Script Elements 动态脚本元素 DOM允许我们使用Javascript动态创建HTML的几乎所有文档内容,一个新的<script>元素可以非常容易的通过标准DOM创建: var script = document.createElem

  • 基于VUE选择上传图片并页面显示（图片可删除）

    基于VUE选择上传图片并页面显示（图片可删除）

    基于VUE选择上传图片并在页面显示,图片可删除,具体内容如下 demo例子: 依赖文件:jqueryform HTML文本内容: <template> <div id="accident"> <div class="wrapper"> <i class="icon-pic"></i>相关照片 <button type="button" @click="

  • 使用jquery DataTable和ajax向页面显示数据列表的方法

    首先在html页面定义好相关长度的行和列,假设table的id=data-table"" 使用jquery DataTable在js中这么写 $(function() { $('#data-table').DataTable( { order : [ [ 1, 'desc' ] ], ajax : { url : "/products", type : 'GET', dataSrc : "" }, columns : [ { data : &qu

  • json获取数据库的信息在前端页面显示方法

    ajax发送请求到controller,controller响应一个json格式的数据给页面, JSON.parse()再解析json字符串,用$.each遍历. @RequestMapping("/list") public @ResponseBody java.util.List<UserVO> List() throws Exception{ return service.get(); } <body> <div id="datatable

  • ASP.NET通过更改Url进行页面传值的实现代码

    这里,通过假数据,手动创建的一个类,然后创建的一个集合,放入下拉框,选好值以后,点确定 会在另一个页面产生对应的id 创建一个类: using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace WebApplication1 { public class Dept { public int Id { get; set; } public string DeptName

  • ThinkPHP打开验证码页面显示乱码的解决方法

    本文实例讲述了ThinkPHP打开验证码页面显示乱码的解决方法.分享给大家供大家参考.具体分析如下: 在用thinkphp开发的时候,有时会出现验证码乱码的问题,解决方法是把如下这个文件放在根目录,访问后就可以解决了,具体的PHP代码如下: 复制代码 代码如下: <?php if (isset($_GET['dir'])){ //设置文件目录   $basedir=$_GET['dir'];   }else{   $basedir = '.';   }   $auto = 1;   checkd

  • Javascript与PHP验证用户输入URL地址是否正确

    本文实例讲述了Javascript与PHP验证用户输入URL地址是否正确的方法,分享给大家供大家参考.具体方法如下: 1.javascript检测URL地址有效性: 复制代码 代码如下: <script type="text/javascript"> function checkUrl() {  var url = document.getElementById('url').value;  if (url==''){   alert('URL 地址不能为空');  ret

  • PHP utf-8编码问题,utf8编码,数据库乱码,页面显示输出乱码

    老声长谈,着是困惑很多人的问题,如果处理不好,都是乱码,说这些话并不是我对编码很精通,只是在这方面是得留神,自己总结了一点小经验(容易出现乱码的地方有php文件里面 ,数据库里面 存储 的编码 ,页面显示 ,数据传输 ): 1.在建数据库的时候,尤其是用phpMyAdmin与MYSQL打交道时候,一般都是utf-8,字段为 utf8_general_ci 数据库的设置: 在my.ini文件中查找:[mysql]default-character-set = utf8[mysqld]default

随机推荐