简述网页的渲染机制

网页的基本组成结构

网页 = HTML + CSS + JavaScript
HTML：网页元素内容
CSS： 控制网页样式
Javascript： 操作网页内容，实现功能或效果

基本概念：

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

Paste_Image.png

过程

浏览器获得html文件后，会自上而下的加载，并在加载过程中进行解析和渲染。 如果在加载的过程中，遇到外部css文件和图片，浏览器会另外发出一个请求，来获取css文件和相应的图片，这个请求是异步的，并不会影响html文件。

js会阻塞后面内容的呈现和其后组件的下载。
html如果遇到JavaScript文件，html文件会将等待javascript加载完毕后，html文件再继续渲染*。
对于图片和CSS, 在加载时会并发加载(如一个域名下同时加载两个文件). 但在加载 JavaScript 时,会禁用并发,并且阻止其他内容的下载. 所以把 JavaScript 放入页面顶部也会导致 白屏 现象.