浏览器渲染及性能优化

JTangming commented 4 years ago

浏览器的渲染过程

webkit 内核渲染过程图：

webkit

gecko 内核渲染过程图：

gecko

不同的浏览器内核有着不一样的渲染过程，细节不一致但大致的浏览器渲染的流程如下：

HTML 解析文件，生成 DOM Tree，解析 CSS 文件生成 CSSOM Tree
将 DOM Tree和 CSSOM Tree 结合，生成 Render Tree(渲染树)
根据 Render Tree 渲染绘制，将屏幕上渲染像素点

css 加载会造成哪些阻塞

通过上面的流程则能很好的回答问题了。

DOM 解析和 CSS 解析是两个并行的进程，所以 CSS 加载不会阻塞 DOM 的解析
Render Tree 是依赖于 DOM Tree 和 CSSOM Tree 的，所以他必须等待到 CSSOM Tree 构建完成，所以，CSS 加载是会阻塞 DOM 的渲染的

而 JS 可能有调用相关 API 更新 DOM 节点和 CSS，在操作前必须等待这些元素渲染完毕，浏览器会维持 HTML 中 css 和 JS 的顺序，因此，样式表会在后面的 JS 执行前先加载执行完毕，所以，这也是阻碍的。

结论

css 加载不会阻塞 DOM 树的解析
css 加载会阻塞 DOM 树的渲染
css 加载会阻塞后面 js 语句的执行

渲染性能

60fps 与设备刷新率

目前大多数设备的屏幕刷新率为 60 次/秒。因此，如果在页面中有一个动画或渐变效果，或者用户正在滚动页面，那么浏览器渲染动画或页面的每一帧的速率也需要跟设备屏幕的刷新率保持一致。

其中每个帧的预算时间仅比 16 毫秒多一点 (1 秒/ 60 = 16.66 毫秒)。但实际上，浏览器有整理工作要做，因此您的所有工作需要在 10 毫秒内完成。如果无法符合此预算，帧率将下降，并且内容会在屏幕上抖动。此现象通常称为卡顿，会对用户体验产生负面影响。

像素管道

像素至屏幕管道中的关键点：像素管道

JavaScript 一般来说，使用 JavaScript 来实现一些视觉变化的效果。比如用 jQuery 的 animate 函数做一个动画、对一个数据集进行排序或者往页面里添加一些 DOM 元素等。当然，除了 JavaScript，还有其他一些常用方法也可以实现视觉变化效果，比如：CSS Animations、Transitions 和 Web Animation API。

Style 此过程是根据匹配选择器（例如 .headline 或 .nav > .nav__item）计算出哪些元素应用哪些 CSS 规则的过程。从中知道规则之后，将应用规则并计算每个元素的最终样式。

Layout 在知道对一个元素应用哪些规则之后，浏览器即可开始计算它要占据的空间大小及其在屏幕的位置。

网页的布局模式意味着一个元素可能影响其他元素，例如元素的宽度一般会影响其子元素的宽度以及树中各处的节点，因此对于浏览器来说，布局过程是经常发生的。

Paint 绘制是填充像素的过程。

它涉及绘出文本、颜色、图像、边框和阴影，基本上包括元素的每个可视部分。

绘制一般是在多个表面（通常称为层）上完成的。

Composite 由于页面的各部分可能被绘制到多层，由此它们需要按正确顺序绘制到屏幕上，以便正确渲染页面。

对于与另一元素重叠的元素来说，这点特别重要，因为一个错误可能使一个元素错误地出现在另一个元素的上层。

管道的每个部分都有机会产生卡顿，因此务必准确了解您的代码触发管道的哪些部分。 每一帧并不一定总是需要经过像素管道每个部分的处理。