浏览器渲染机制

参考 ： 中高级前端面试宝典之浏览器篇_浏览器渲染机制面试-CSDN博客

                浏览器渲染机制-CSDN博客

 

浏览器的渲染机制主要包括以下几个步骤：

1. 解析HTML：浏览器首先会将HTML代码解析成DOM树，DOM树是由节点和对象组成的树形结构，表示HTML文档的结构和内容。

2. 解析CSS：浏览器会将CSS代码解析成CSSOM树，CSSOM树是由样式规则和对象组成的树形结构，表示HTML文档的样式信息。

3. 构建渲染树：浏览器会将DOM树和CSSOM树合并成渲染树，渲染树只包含需要显示的节点和样式信息，不包含隐藏的节点和不可见的样式信息。

4. 布局：浏览器会根据渲染树的信息计算每个节点的位置和大小，生成布局。

5. 绘制：浏览器会将布局转换成像素，然后绘制到屏幕上。

6. 重绘和回流：当页面发生变化时，浏览器会进行重绘和回流。重绘是指重新绘制已经显示的元素，而回流是指重新计算元素的位置和大小。回流比重绘的代价更高，因为回流会涉及到整个渲染树的重新计算和布局。

浏览器渲染进程内部又是多线程的：

1. GUI渲染线程：负责渲染浏览器页面，解析和构建DOM、CSSOM和渲染树，绘制页面。重绘和回流也会执行。
2. JS引擎线程：JS内核，解析和运行javascrpit脚本，一个标签页只有一个JS线程。JS线程跟GUI线程是互斥的。
3. 事件触发线程：监听和触发事件，处理事件循环（event loop）。比如我们的click事件，JS引擎解析完click事件中的代码，会将该任务放入事件触发线程，等到事件被触发时，事件触发线程会将对应的任务放入待处理队列的队尾，等待JS引擎空闲时处理。
4. 定时器触发线程：setTimeOut和setTimeInterval所在的线程。用来计时并触发事件，时间到了以后将事件放入待处理队列的队尾等待执行。所以定时器中的代码并不是准时准点执行的。
5. 异步http请求线程：XMLHttpRequest链接后，浏览器新开一个线程来处理。如果状态变更，将回调函数放入待处理队列
6. 运行机制是：宏任务 -> 微任务 -> 调度 GUI 渲染线程 -> 宏任务……

说完渲染流程不可避免会提到重绘和回流：

重绘和回流都是以图层为单位

• 分图层的条件：有3D的CSS属性、video标签、canvas标签、css3动画
• 回流（重排）一定会触发重绘，布局改变、节点增加减少、窗口变大变小等都会回流
• 重绘，如果图层某个元素要重绘，则整个图层都要重绘

阻塞渲染的情况

1. 阻塞解析：阻塞点后面的标签不会被解析，阻塞解析不一定会阻塞其他外部资源的加载
2. 阻塞渲染：阻塞点后面的标签会继续被解析，img，link等会继续发送请求获取外部资源，但不会触发页面渲染（白屏 ），也不会执行 JavaScript 代码

1. 阻塞渲染的情况：JS
①　阻塞DOM解析–因为JS有可能对DOM做操作
②　阻塞页面渲染–同上
③　阻塞后续js的执行
④　js执行和CSS渲染是互斥的
2.  CSS
①　style标签中：由html解析器进行解析，不阻塞浏览器渲染，不阻塞DOM解析
②　link引入的，由CSS解析器进行解析，阻塞浏览器渲染，阻塞后面JS执行，不阻塞DOM解析
以上阻塞都不会阻塞浏览器加载外部资源。

二、浏览器缓存机制
浏览器缓存机制其实就是HTTP缓存，由HTTP报文的缓存标识决定

缓存位置有四种，优先级如下：

 Service Worker
一个服务器与浏览器之间的中间人角色，如果网站注册了service worker，就可以拦截当前网站所有的请求，然后进行判断。
需要使用HTTPS协议保障安全，且可以自由控制缓存文件、匹配方式以及如何读取，缓存是持续的
是基于web worker的。
可以访问cache和indexDB
Memory Cache
内存中的缓存，主要包含当前页面中的资源如：样式、脚本、图片
缓存持续性很短，会随着进程的释放而是放
Disk Cache
存在硬盘中，读取速度较内存更慢，容量和时效更大
Push Cache
推送缓存，是HTTP2支持
只存在于session，缓存时间很短，chrome中仅仅5分钟左右
并非严格执行HTTP头中的缓存指令
以上四种缓存都没有命中的时候，才会向服务器发送请求。
服务器接收到请求以后，会根据响应报文中的HTTP请求头的缓存标识来决定是否缓存。

强制缓存
向浏览器缓存中查找请求结果，然后根据该结果的缓存规则来决定是否使用该缓存结果的过程。

强缓存的设置通过两种HTTP Header：Expires 和 Cache-Control， HTTP1.1以后不再使用Expires

强制缓存的情况主要由三种：

1. 不存在缓存结果和缓存标识，强制缓存失效，就直接向服务器发送请求
2. 存在缓存结果和缓存标识，但是结果失效，则协商缓存
3. 存在缓存结果和缓存标识，且结果没有失效，强制缓存生效，从缓存中读取数据，http Code为200，size显示form disk cache或者form memory cache

Cache-Control
主要用于控制网页缓存，有很多值：

1. public 标识响应可以被客户端、代理服务器缓存
2. private 只有客户端缓存（默认取值）
3. max-age 缓存秒数
4. no-store 任何内容都不缓存
5. no-cache 被缓存但下次请求时，需要验证是否过期（协商缓存）

协商缓存
协商缓存生效时，服务器返回304和not Modified，意思是该资源无更新，直接从浏览器缓存中读取
协商缓存设置header头：Last-Modified 和 ETag

Last-Modified是服务器返回资源的同时，添加在response header中的，值是资源在服务器上最后的修改时间
If-Modified-Since 是浏览器第二次请求的时候加在header头中的，值是Last-Modified的值ETag是服务器返回的当前资源的唯一标识，只要资源变化，就重新生成ETag
浏览器发送请求的时候就会将ETag的值放在If-None-Match中