js之页面渲染

今天给大家总结一下浏览器渲染的机制，页面渲染就是浏览器的渲染引擎将html代码根据CSS定义的规则显示在浏览器窗口中的过程。

大致工作原理如下：

• 用户输入网址，浏览器向服务器发出请求，服务器返回html文件；

• 渲染引擎开始载入html代码，并将HTML中的标签转化为DOM节点，生成DOM树；

• 如果引用了外部css文件，则发出css文件请求，服务器返回该文件；

• 如果引用了外部js文件，则发出js文件请求，服务器返回该文件后开始运行；

• 渲染引擎继续载入html中的部分的代码，并开始解析前面返回的css文件，然后根据css选择器计算出节点的样式，创建渲染树；

• 从根节点递归调用，计算每一个元素的大小、位置等，给每个节点所应该出现在屏幕上的精确坐标；

• 如果body中的引用了图片资源，则立即向服务器发出请求，此时渲染引擎不会等待图片下载完毕，而是继续渲染后面的代码；

• 服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排版，因此引擎需要回过头来重新渲染这部分代码；

• 如果此时js脚本中运行了style.display=”none”, 布局被改变，引擎也需要重新渲染这部分代码；

• 直到页面渲染完毕。