浏览器渲染引擎

浏览器渲染原理

一、将html文档构建成一棵DOM树

---

1.可以借助开发者工具里面的TimeLine录制浏览器的工作过程，TimeLine的组成部分

• 控制条：开始记录，停止记录，配置记录期间捕获的信息
• 总览：页面性能高级汇总
• 火焰图(Main Thread)：CPU堆叠追踪的可视化
• 详情(Summary)：每个CPU任务的详情报告

2.录制时需要注意的是

• 禁用缓存,以便测试首次浏览性能(在Network选项卡中勾选Disabled cache)
• 关闭chrome扩展或使用隐身模式
• 模拟真实网络情况 (在Network选项卡中选择offline自定义模拟网络)
• chrome canary

二、对CSS文档解析生成CSS对象模型（CSSOM）

CSS选择器越详细，匹配工作越多

三、结合DOM和CSSOM生成渲染树（RenderTree），渲染树包括了需要渲染的节点

1.RanderTree只包含渲染网页所需要的节点

2.无需渲染的节点不会被添加到RanderTree中，比如、display:none的节点

3.visibility:hidden的元素会被添加到RenderTree中，因为它虽然不可见，但是占有位置

四、Layout，画出页面轮廓，计算渲染树中节点的位置和大小

1、节点位置和大小是基于viewport计算的

2、在移动端通常将viewport设为浏览器推荐的理想窗口，以保证字体显示大小易于阅读。

3、 触发Layout的场景：

• 屏幕旋转（会改变viewport）
• 浏览器视窗改变
• 与大小位置相关的CSS 属性改变

五、Paint，填充。在Layout画出的轮廓里填充像素

根据background，border，box-shadow等样式，将Layout生成的区域填充为最终将显示在屏幕上的像素

资源对渲染的影响

一、CSS

1.CSS阻塞初次渲染

• 通过style和link两种方式定义的CSS，均会阻塞初次渲染
• 浏览器会在解析完CSS后，再进行渲染。这是为了防止样式突变带来的抖动
• 不管CSS出现在文档中的哪个位置，都会阻塞整个文档的初次渲染
• 通过link标签引入的CSS阻塞时间可能更长，因为加载它需要一个网络来回时间

2.可以针对不同媒体环境拆分CSS文件，并为link标签添加媒体查询(media=”“)，当媒体查询不匹配时，不会阻塞初次渲染。

3.通过DOM API动态插入HTMLLinkElement对象，不会阻塞初次渲染。

二、JS

1.通过inline js和external js引入js均会阻塞HTML parse（解析器），因而会阻塞出现在脚本后面的HTML标记的渲染

2.外部script阻塞的时间一般更长，因为可能包含了一个网络来回的时间。

3.JS可以通过document.write修改HTML文档流，因此在执行JS时，浏览器会暂停解析HTML文档流。

4.由于javascript可能会读取或修改CSSOM，因此需等待CSSOM构造完成后，它们才能执行。

5.将JS脚本放到body底部，延迟JS执行

6.使用defer延迟脚本执行<script src="index.js" defer></script>

• 当script标签拥有defer属性时，该脚本会被推迟到整个HTML文档解析完后，再开始执行
• 被defer的脚本，在执行时会严格按照HTML文档中出现的顺序执行

7.使用async异步加载脚本<script src="index.js" async></script>

• 当script标签拥有async属性时，该脚本不会再阻塞HTML parse，且不会被CSS阻塞。
• 脚本只要加载完成，便可开始执行
• 被async的脚本，在执行时不会严格按照在HTML文档中出现的顺序执行
• async适用于无依赖的独立资源

三、font

1、font阻塞内容渲染

• 浏览器为了避免FOUT(flash of unstyled text)，会尽量等待字体加载完成后，再显示应用了该字体的内容
• 只有当字体超过一段时间仍未加载成功时，浏览器才会降低使用系统字体，每个浏览器都规定了自己的超时时间
• 但这也带来了FOIT(flash of invisible text)问题，内容无法尽快的被展示，导致空白。

2、异步加载CSS文件，即可避免字体阻塞渲染<link href="index.css" rel="preload">

四、img

图片资源不会阻塞首次渲染

优化关键渲染路径

1、优化目标
将一下指标压缩到最低：

• 关键资源数
• 关键资源体积
• 关键资源网络来回数

2、关键呈现路径优化思路

• 延迟或异步加载资源、从而减少关键资源数量
• 减少资源大小
• 针对关键资源，减少网络请求时间

3、减少关键资源数金额关键资源网络来回数

• 当前页面没有CSS和JS文件时，页面的渲染过程

• 页面中只有CSS文件时

优化方法：使用inline css或者添加media=”print”,改进之后为：

• 当页面中有CSS和JS文件时

优化方法：添加async，异步加载JS脚本，优化之后为：

4、减少内容大小

• 避免返回无用内容
• 针对特定语言的源码压缩（压缩CSS和JS文件）
• 通用文本压缩（使用gzip等）
• 图片压缩

5、减少请求来回时间

• 服务器优化
  -chunked encoding
  -尽早返回数据
  -服务端渲染
• 合理利用缓存
  -catch control
  -ETag
  -localStorage
  -Service worker
• 优化网络
  -HTTP2.0
  -CDN
  -域名分割
  -减少重定向
  resource-hint