浏览器加载和渲染HTML的顺序以及Gzip的问题

这个小节里，我们谈谈浏览器加载和渲染HTML的一些相关问题，比如顺序，比如gzip等。

浏览器打开网页的过程

用户第一次访问网址，浏览器向服务器发出请求，服务器返回html文件；

浏览器开始载入html代码，发现 head 标签内有一个 link 标签引用外部CSS或JS文件；

浏览器又发出CSS及JS文件的请求，服务器返回这个CSS，JS文件；

浏览器继续载入html中 body 部分的代码，并且CSS，JS文件已经拿到手了，可以开始渲染页面了；

浏览器在代码中发现一个 img 标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码；

服务器返回图片文件，由于图片占用了一定面积，影响了页面布局，因此浏览器需要回过头来重新渲染这部分代码；

浏览器发现了一个包含一行Javascript代码的 script 标签，赶快执行它；

Javascript脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个 div （style.display=”none”）。杯具啊，突然就少了这么一个元素，浏览器不得不重新渲染这部分代码；

终于等到了 html 的到来，浏览器泪流满面……

浏览器加载和渲染html的顺序

IE浏览器下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行的。

在渲染到页面的某一部分时，其上面的所有部分都已经下载完成（并不是说所有相关联的元素都已经下载完）

如果遇到语义解释性的标签嵌入文件（JS脚本，CSS样式），那么此时IE的下载过程会启用单独连接进行下载。

并且在下载后进行解析，解析过程中，停止页面所有往下元素的下载，阻塞加载。

样式表在下载完成后，将和以前下载的所有样式表一起进行解析，解析完成后，将对此前所有元素（含以前已经渲染的）重新进行渲染。

JS、CSS中如有重定义，后定义函数将覆盖前定义函数。

JS的加载

不能并行下载和解析（阻塞下载）

当引用了JS的时候，浏览器发送一个js request就会一直等待该request的返回。因为浏览器需要一个稳定的DOM树结构，而JS中很有可能有代码直接改变了DOM树结构，比如使用 document.write 或 appendChild，甚至是直接使用的location.href进行跳转，浏览器为了防止出现JS修改DOM树，需要重新构建DOM树的情况，所以 就会阻塞其他的下载和呈现。

Html解析与Gzip

Gzip是流式的压缩格式，可以做到边下载边解压。有个概念的问题，不是说html是gzip压缩后的格式，而是HTTP协议可以使用gzip压缩的方式来传输html文件。另外从显示效果上看是边下载边解析的，如果不是的话，停止下载的时候要么显示全部要么一点不显示。

浏览器先下载html，然后在内存中把html代码转化成Dom Tree，然后浏览器根据Dom Tree上的Node分析css（sandbox modle ）和Images【所以css和images是并行下载】，当文档下载遇到js时，js独立下载（因为在js中很可能存在有影响Dom Tree结构的代码，如document.write,所以浏览器设计js为独立进程，另：行间js将阻塞所有html代码的下载），最后浏览器完成页面渲染，形成最终的“呈现树”（Render Tree或Frame Tree）。