首先需要提到几个基本概念：
DOM：Document Object Model，浏览器将HTML解析成树形的数据结构，简称DOM。
CSSOM：CSS Object Model，浏览器将CSS解析成树形的数据结构，简称CSSOM。
Render Tree: DOM和CSSOM合并后生成Render Tree，如下图：
xuanrantu.jpg
Layout: 计算出Render Tree每个节点的具体位置。
Painting:通过显卡，将Layout后的节点内容分别呈现到屏幕上。
下面我们来说说具体的流程。 如何通过url获取对应的html文件的过程我就不详细介绍了，不熟悉的同学可以看看从 URL 输入到页面展现发生了什么
当我们的浏览器获得html文件后，会自上而下的加载，并在加载过程中进行解析和渲染。 加载说的就是获取资源文件的过程，如果在加载的过程中，遇到外部css文件和图片，浏览器会另外发出一个请求，来获取css文件和相应的图片，这个请求是异步的，并不会影响html文件。 但是如果遇到javascript文件，html文件会挂起渲染的线程，等待javascript加载完毕后，html文件再继续渲染。
因为javascript可能会修改DOM，导致后续的html资源白白加载，所以html必须等待javascript文件加载完毕后，再继续渲染。这也就是为什么javascript文件要写在底部body标签前的原因。
html的渲染过程就是将html代码按照深度优先遍历来生成DOM树。 css文件下载完后也会进行渲染，生成相应的CSSOM。 当所有的css文件下载完且所有的CSSOM构建结束后，就会和DOM一起生成Render Tree。 接下来，浏览器就会进入Layout环节，将所有的节点位置计算出来。 最后，通过Painting环节将所有的节点内容呈现到屏幕上。
当然，每个浏览器对于渲染的实现机制都不相同，比如说chrome会在一开始就将不影响DOM结构的javascript也异步加载从而进一步提高性能等。
网友评论