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

    浏览器打开网页的过程
    服务器君一共花费 16.325 ms 进行了 2 次数据库查询,努力地为您提供了这个页面。
    广告很萌的

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

    浏览器打开网页的过程

    1. 用户第一次访问网址,浏览器向服务器发出请求,服务器返回html文件;
    2. 浏览器开始载入html代码,发现 head 标签内有一个 link 标签引用外部CSS或JS文件;
    3. 浏览器又发出CSS及JS文件的请求,服务器返回这个CSS,JS文件;
    4. 浏览器继续载入html中 body 部分的代码,并且CSS,JS文件已经拿到手了,可以开始渲染页面了;
    5. 浏览器在代码中发现一个 img 标签引用了一张图片,向服务器发出请求。此时浏览器不会等到图片下载完,而是继续渲染后面的代码;
    6. 服务器返回图片文件,由于图片占用了一定面积,影响了页面布局,因此浏览器需要回过头来重新渲染这部分代码;
    7. 浏览器发现了一个包含一行Javascript代码的 script 标签,赶快执行它;
    8. Javascript脚本执行了这条语句,它命令浏览器隐藏掉代码中的某个 div (style.display=”none”)。杯具啊,突然就少了这么一个元素,浏览器不得不重新渲染这部分代码;
    9. 终于等到了 html 的到来,浏览器泪流满面……

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

    1. IE浏览器下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的。
    2. 在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都已经下载完)
    3. 如果遇到语义解释性的标签嵌入文件(JS脚本,CSS样式),那么此时IE的下载过程会启用单独连接进行下载。
    4. 并且在下载后进行解析,解析过程中,停止页面所有往下元素的下载,阻塞加载。
    5. 样式表在下载完成后,将和以前下载的所有样式表一起进行解析,解析完成后,将对此前所有元素(含以前已经渲染的)重新进行渲染。
    6. 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)。

更多 推荐条目

Welcome to NowaMagic Academy!

现代魔法 推荐于 2013-02-27 10:23   

本章最新发布
随机专题
  1. [JavaScript程序设计] jQuery与表单操作 2 个条目
  2. [移动开发] ListView 使用相关问题集 1 个条目
  3. [软件工程与项目管理] 呈现树的构建 13 个条目
  4. [PHP程序设计] 声明式编程范式 12 个条目
  5. [PHP程序设计] fsockopen,curl与file_get_contents 12 个条目
  6. [PHP程序设计] PHP数组的遍历 7 个条目
  7. [PHP程序设计] PHP数组探索 4 个条目
  8. [智力开发与知识管理] 整体性学习策略 9 个条目
  9. [PHP程序设计] PHP里的引用 5 个条目
  10. [Python程序设计] 标准库:urllib/urllib2 14 个条目
  11. [运维管理] 路由器与交换机 4 个条目
  12. [PHP程序设计] PHP中的Hash算法 3 个条目
窗口 -- [八点]