Windows10资源管理器全新UI来了！

由于渲染机制过于复杂，渲染模块在在执行过程中划分了很多阶段，通过《浏览器工作原理与实践》-渲染流程上分：构建DOM树，样式计算，布局阶段;渲染流程下分：分层，图层绘制，栅格化(raster)操作，合成和显示。

整个渲染流程，从HTML到DOM、样式计算、布局、图层、绘制、光栅化、合成和显示。

面试一问：为什么要构建DOM树?

答：因为浏览器不能直接理解和使用HTML，so，需要将HTML转换为浏览器能够理解的结构，即是DOM树(树结构一般都了解了的)。

为了了解完整的DOM树结构，可以打开Chrome的“开发者工具”，或按F12，如图下：
 

那么要问了，为什么要了解浏览器渲染页面机制呢?

了解渲染机制，主要还是为了性能的优化：

了解浏览器如何进行加载，引用外部样式文件，JS文件时，将它们放到合适的位置，是浏览器最快的速度让文件加载完毕;了解浏览器如何进行解析，选择最优的写法，构建DOM结构，组织CSS选择器的时候，是为了提高浏览器的解析速率;了解浏览器如何进行渲染，是可以减少“重绘”，“重新布局”的消耗。

那么上面一直说了解渲染机制，出现的几个基本概念，这里先弄明白：

• DOM: Document Object Model，浏览器将HTML解析成树形的数据结构
• CSSOM: CSS Object Model，浏览器将CSS解析成树形的数据结构
• Render Tree: DOM和CSSOM合并生成Render Tree
• Layout: 计算出Render Tree每个节点的具体位置
• Painting: 通过显卡，将Layout后的节点内容分别呈现到屏幕上

当浏览器获取HTML文件后，会自上而下加载并在加载过程中进行解析和渲染;加载就是获取资源的过程;如果在加载过程中遇到外部的css文件和图片，浏览器会另外发送一个请求，去获取css文件和图片，这个请求是异步的，并不会影响HTML文件的加载;但如果遇到JavaScript文件，HTML文件会挂起渲染的进程，等待JavaScript文件加载完毕后，再继续进行渲染。

为什么需要等待JavaScript呢?

因为JavaScript可能会修改dom，导致后面的HTML资源白白加载，需要等待JavaScript文件加载完成后，再继续渲染，so，JavaScript文件一般写在底部body标签前的原因。

说说浏览器页面渲染：

• 第一步：在CSS资源还没有请求回来之前，先生成DOM树;
• 第二步：当所有的CSS请求回来之后，浏览器按照CSS的导入顺序，依次进行渲染，最后生成CSSOM树;
• 第三步：把DOM树和CSSOM树结合在一起，生成有样式，有结构的RENDER TREE渲染树;
• 最后一步：浏览器按照渲染树，在页面中进行渲染和解析

（编辑：威海站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!