• 0

  • 571

(超详细)从输入url到页面展示发生了什么?

黑猫

我不是黑客

1星期前

看到很多面试题里都有这个问题,便拿出来深入研究了一下。如有错误,欢迎指正。
最近刚刚搭好的个人博客!

浏览器的多进程架构

从浏览器输入 URL 到页面渲染的整个过程都是由 浏览器架构中的各个进程之间的配合完成。

  1. 浏览器主进程: 管理子进程、提供服务功能
  2. 渲染进程:将HTML、CSS、JS渲染成界面,js引擎v8和排版引擎Blink就在上面,他会为每一个tab页面创建一个渲染进程
  3. GPU进程:本来是负责处理3Dcss的,后来慢慢的UI界面也交给GPU来绘制
  4. 网络进程:就是负责网络请求,网络资源加载的进程
  5. 插件进程:负责插件的运行的,因为插件很容易崩溃,把它放到独立的进程里不要让它影响别人

过程

从用户输入信息到页面展示的不同阶段,是不同的进程在发挥作用,示意图如下:

从图中可以看出,整个过程是需要各个进程之间相互配合完成的,过程大致可以描述为:

  1. 用户输入url,处理输入信息,主进程开始导航,交给网络进程干活

  2. 网络进程发起网络请求,其中有可能会发生重定向

  3. 服务器响应URL之后,主进程就要通知渲染进程,你要开始干活了

  4. 渲染进程准备好了,要想渲染进程提交数据,这个时间叫做提交文档

  5. 渲染进程接受到数据,完成页面渲染。

具体过程

1.输入url

用户输入url,处理输入信息:

如果为非url结构的字符串,交给浏览器默认引擎去搜索改字符串;

若为url结构的字符串,浏览器主进程会交给 网络进程 ,开始干活。

2.1查找浏览器缓存

网络进程会先看看是否存在本地缓存,如果有就直接返回资源给浏览器进程,无则下一步 DNS-> IP -> TCP

2.2DNS解析

网络进程拿到url后,先会进行DNS域名解析得到IP地址。如果请求协议是HTTPS,那么还需要建立TLS连接。

2.3建立TCP连接,三次握手

接下来就是利用IP地址和服务器建立TCP连接。连接建立之后,向服务器发送请求。

3服务器响应

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

网络进程解析响应行和响应头信息的过程:

3.1重定向

如果响应行状态码为301(永久重定向)和302(临时),那么说明需要重定向到其他url。这时候网络进程会从响应头中的Location字段里读取重定向的地址,并重新发起网络请求。

3.2 响应数据处理

导航会通过请求头的Content-type字段判断响应体数据的类型。浏览器通过这个来决定如何显示响应体的内容。

比如:若为application/octet-stream,则会按照下载类型来处理这个请求,导航结束。

若为text/html,这就告诉浏览器服务器返回的是html格式,浏览器会通知渲染进程,你要干活了。

4 准备渲染进程

默认情况,每个页面一个渲染进程。但若处于同一站点(同根域名+协议),那么渲染进程就会复用。

5提交文档

渲染进程准备好后,浏览器进程发出“提交文档的消息”,渲染进程接受了消息之后,会跟网络进程简历传输数据的管道。

等数据传输完成了,渲染进程会告诉浏览器进程,确认文档提交,这时候浏览器会更新页面,安全状态,url,前进后退的历史。

到这里导航结束,进入渲染阶段。

注:当浏览器刚开始加载一个地址之后,标签页上的图标便进入了加载状态。但此时图中页面显示的依然是之前打开的页面内容,并没立即替换为百度首页的页面。因为需要等待提交文档阶段,页面内容才会被替换。

浏览器的渲染过程

参考地址

img
  1. 浏览器无法直接读取html,需要先构建Dom树。

  2. 把读取到的css,变成浏览器可以理解的cssom树。

    转换样式表中的属性值,使其标准化。2em 被解析成了 32px,red 被解析成了 rgb(255,0,0),bold 被解析成了 700……

    计算出 DOM 树中每个节点的具体样式。利用css继承、css优先级、css层叠规则等计算出来。

  3. 浏览器会先从DOM树的根节点开始遍历每个可见节点,并把这些节点添加到渲染树中。不可见的节点不会添加到渲染树,比如css设置了display为none 属性的节点。

  4. 根据生成的渲染树,进行布局(也可以叫做回流),得到各个节点在页面中的确切位置和大小。(自动重排)。布局阶段的输出是一个盒子模型,它会精确地捕获每个元素在屏幕内的确切位置与大小,所有相对的测量值也都会被转换为屏幕内的绝对像素值(重绘)。

  5. 生成分层树,页面都是一层一层叠加在一起形成的。比如一些复杂的css动画,z-index等,渲染引擎会为他们生成专用的图层,并生成对应的图层树

  6. 构建完图层之后,渲染引擎会对图层树中的每个元素进行绘制。合成线程会把分层树的图层变成图块

  7. GPU的栅格化把视窗附近的图块变成位图,然后保存在GPU的进程中。(因为一个页面可能很大,而用户只能看到视口中页面的一部分,如果全部绘制开销会很大,所以合成线程会按照视口附近的图块来优先生成位图)

  8. 栅格化完成之后,浏览器进去GPU进程里取出页面内容显示在屏幕上,这就完成了渲染阶段

回流和重绘

回流

回流发生在浏览器渲染页面的过程里,由DOM树和样式计算出布局树的过程就叫做回流,这个步骤需要计算出每个元素的大小和位置(忽略display:none的元素)

重绘

我们将布局树和样式转换为屏幕上的实际像素,这个阶段就叫做重绘节点。所以,回流必定导致重绘,重绘却不一定回流,且回流的代价比重绘高。

当render tree中的一些元素需要更新属性,而这些属性只是影响元素的外观,风格,而不会影响布局的,比如background-color。

何时发生回流和重绘

  1. 浏览器窗口尺寸变化(因为回流是根据视口的大小来计算元素的大小和位置的)
  2. 页面一开始渲染的时候
  3. 添加或者删除dom
  4. 修改元素位置或者尺寸

优化

浏览器的性能优化机制

  • 浏览器自身有优化,它会维持一个待更新队列,类似批处理的方式来优化,只有当队列中的任务或者时间间隔达到一个阈值,浏览器就会将队列清空,这样可以把多次回流和重绘变成一次。但是如果触发了同步布局事件,浏览器就会强制flush这个队列(立即清空队列)。所以我们要避免触发同步布局事件,我们熟悉的有如下:

getBoundingClientRect、getComputedStyle()、offsetTop、scrollWidth、clientWidth

如何减少回流和重绘

  • 最小化重排重绘
    1. 使用el.style.cssText
    2. 直接添加类名
  • 避免频繁操作DOM结构,如果需要可以先把他们display:none(因为这些元素不会出现不会触发回流重绘),等待dom操作结束后在把他们放出来
  • 具有复杂动画操作的元素使用绝对定位,使其脱离文档流减少父节点和后续节点的频繁回流
  • css3硬件加速 / GPU加速,就是使用一些css开启CUP加速 ,如transform、opacity、filters,这些动画不会引起回流重绘
免责声明:文章版权归原作者所有,其内容与观点不代表Unitimes立场,亦不构成任何投资意见或建议。

信息安全

571

相关文章推荐

未登录头像

暂无评论