Web性能优化

1 Web性能优化
Web网站的性能细线在几个方面：
网站首页加载速度

动画的流畅度

通过分析浏览器的渲染原理、资源对渲染的影响，得出优化网站性能的办法。
2 查看性能的工具
Chrome的 Timeline
面板录制网页加载的过程，分析记录浏览器渲染过程中每个过程的耗时。
2.1 录制时注意事项
禁用浏览器缓存： Network Tab
下的 disable cache

关闭Chrome扩展或者启用隐身模式

根据使用场景，模拟真实的网络加载情况： Network Tab
下的 throttling
下拉按钮

2.2 Timeline
工具的各个组成
在 Main Thread
中可以看到页面渲染的整个过程及耗时

3 浏览器渲染原理

3.1 DOM树构建
DOM树的构建过程
根据HTML文档的内容，根据标签进行分词 Token

根据 Token
生产对应的节点 Node

将节点根据嵌套关系组合为一棵对象节点树 DOM

浏览器解析文档对象模型 DOM
是 增量进行 的，无需等待整个HTML文档加载完毕，便可以开始解析 DOM

CSSOM
解析会阻塞 HTML Parser
；JavaScript脚本文件执行会阻塞HTML解析； CSS、JavaScript、Images和Font等静态资源的异步加载的，渲染页面与CSS解析与JavaScript执行会有相互的依赖

3.2 CSSOM树的构建
CSSOM
的解析依赖于 选择器 ，选择器的匹配是从内到外的。所以选择器嵌套层次越深，匹配的时间会越长。
CSSOM
只解析可视部分 body
标签中的内容，将所有匹配的元素共同构建一个 CSSOM
树， 从根节点一次向下，所有节点的属性向下继承

3.3 RenderTree树的构建
利用DOM和CSSOM组合构建生成RenderTree，对应 Recaculate Style

RenderTree中包含所有渲染网页必须的节点
无需渲染的节点不会被添加到RenderTree中，如 head
和 display:none;
的节点
visibility: hidden;
的节点会添加到RenderTree中

3.4 Layout
Layout
利用渲染树的信息，计算渲染树中所有节点在页面上的 位置和大小 。
类似绘画中各个元素位置摆放及尺寸规划
会引起页面重新Layout的操作： 所有改变节点位置和大小的操作
屏幕旋转

浏览器视窗改变

与大小、位置相关的CSS属性

增加与删除DOM元素

Layout操作比较耗时，对于动画中频繁引起Layout的操作（元素位置移动），最好使用transform代替，可以使用GPU进行动画处理（将Layout重绘在GPU完成）

viewport

如果页面 body
元素设置的宽度为 100%
，并且根元素 html
没有明确设置宽度绝对值， **此时body
元素的宽度等于 viewport
的宽度 vw
**
使用 meta
标签可以设置浏览器 viewport
的尺寸。

device-width
为浏览器的理想视口（屏幕的物理分辨率）

在移动端，如果不设置 device-width
，默认 viewport
宽度为980px， 导致文字很小，需要放大

viewport
相当于可视内容布局的容器
3.5 Paint
填充Layout中的具体内容和样式，将Layout生成的区域填充为最终显示在屏幕上的像素
3.6 总结
浏览器通过 GET
请求获取网页HTML，同时将增量解析HTML文档，生成 DOM
树

解析 DOM
节点树时，对于需要加载的资源全部执行异步加载，但是 CSS
的解析、 JavaScript
的执行与 font
文件的下载会阻塞HTML Parser

局部 DOM
树与 CSSOM
树构建完成后，立即组装 RenderTree
进行渲染

4 资源对渲染的影响
页面中加载的资源主要包括： css
、 js
脚本文件和 font
字体与 images
静态资源，不同资源类型对渲染的影响不同。
4.1 浏览器渲染页面的时机
增量解析解析 DOM
树，并且完成相应 CSSOM
解析后（RenderTree依赖于 DOM
树， CSSOM
树），开始直接渲染页面。
4.2 CSS加载会阻塞初次渲染

4.3 非关键资源
对于首页无关的样式，需要使用适当的方式避免其阻塞初次渲染：
document.write()
会阻塞页面初次渲染

使用 media=print
媒体查询，虽然加载样式表，但只针对打印时才应用该样式，不会阻塞初次渲染。

通过 DOM
API引入CSS，可以避免阻塞。

CSS中
。

4.4 JS文件

输出：先输出 Hello
，10s之后再输出 World
。JS脚本执行会阻塞 HTML Parser
，但是 HTML Parser
是增量解析的， 并且CSS样式的解析会阻塞JS脚本执行 ，当解析完 Hello
时，生成对应 DOM
节点，并且完成其 CSSOM
，直接开始渲染 Hello
节点。

脚本执行完成后再解析后续的 World

JS脚本执行会阻塞HTML Parser；
CSS解析会阻塞JS脚本执行：js可能会读、写CSSOM
虽然JS会阻塞HTML Parser解析；但是浏览器的资源异步加载机制 Preload
会异步加载 head
标签内的资源