HTML渲染过程

过程"/>

HTML渲染过程

整个渲染过程：

将 URL 对应的各种资源，通过浏览器渲染引擎的解析，输出可视化的图像。

基本概念：

HTML 解释器：解析html语言、将html文本翻译成dom树；

CSS 解释器：解析css语言，给dom树增加样式内容，为布局提供依据；

布局：将dom元素与css样式进行结合，计算出大小和位置；

JavaScript 引擎：js可以修改网页的内容、css信息，目的是将代码的逻辑对应到dom元素和css中，形成新的布局，改变渲染的结果；

基础流程：

1，解析html文件，生成dom树：

2，解析CSS文件，形成CSS对象模型：

3，将CSS与Dom元素进行对应，构建渲染树（Render tree）：

4，布局和绘制Render tree：

存在问题：

1，将多次改变样式的行为合并成一次；

2，将需要多次触发重排的样式操作，改成绝对定位和固定定位，这样可以脱离文档流，它的改变不会改变其他元素的重排，比如动画操作时，设置成绝对定位；

3，设置成display为none的元素，不会进入渲染树，对于那种具备复杂逻辑的元素，可以优先隐藏它，等它计算完成后再显示，这样可以减少重排的次数，只在显示和隐藏的两个点进行重排，只会有两次；