简述网页的渲染机制

网页=HTML（网页元素内容）+css（控制网页样式）+JavaScript（操作网页内容），实现功能或者效果。
浏览器渲染：
先说一下用到的几个概念：

• DOM ：document object Model，浏览器将HTML解析成数据结构，简称DOM。
• cssOM ：浏览器将css解析成树形的数据结构，简称CSSOM.
• renderTree:DOM和CSSOM 合并后生产renderTree。
• Layout：计算出Render Tree 每个节点的具体位置。
• Painting：通过显卡，将layout 后的节点内容分别呈现在屏幕上。

当浏览器通过utl，从后台获得html后，会自上而下的加载，并在加载的过程中，进行解析和渲染。
第一步，解析HTML标签，构建DOM树。
第二步解析CSS标签，构建CSSOM树，在解析的过程中，如果遇到外部的css文件和图片，浏览器你会发出一个请求，来获取css文件和相应的图片。这个请求是异步的，不影响后面html内容的加载。
第三步，把DOM和cssOM组合成渲染书，html和css都解析完后，再渲染树 的基础上进行布局，
第四步painting 计算每个节点的几何结构，把每个节点绘制到屏幕上。
在加载的过程中，如果遇到javascript，html文件会挂起渲染的线程，等JavaScript加载完毕后，html文件在继续渲染。JavaScript要放在body的最后，原因是要先画页面，在操作页面。对于图片盒css在加载时候，会 并发进行，加载js会禁用并发，并且组织其他内容的下载。所以如果把js放到顶部，也会出现白屏的问题。