用 Fiddler 监控,在 IE6 下,资源下载顺序为:

一 CSS 和 JS 在网页中的放置顺序是怎样的?

  • css 样式放在 head 中

  • js 放在 body 标签内的最后,script 标签内。外链接用
    <script src=""></script>,内部的用 <script></script>

很明显,下载顺序从上到下,文档流中先出现的资源先下载。在 IE8, Safari,
Chrome 等浏览器下也类似。

二 解释白屏和 FOUC

1.白屏

  • 对IE来说,把样式放在底部时,在某些场景下(如打开新窗口/刷新页面等)页面会出现白屏,而不是内容逐步展现。

  • 如果使用@import标签,即使将 CSS
    写入外部样式表由link引入并放在头部,也可能出现白屏。

  • 把 js 文件放入页面顶部而未使用 defer 或 async
    延迟或异步加载js文件,从而阻塞 html 与 css 的加载也会导致白屏。

  • 另外:Chrome会同时加载html和css分别构建DOM树和CSSOM树,等到二者都构建完成后再绘制渲染树,然后显示出页面,当外部css样式表设置了延时或者加载的时间比较久时就会显示出白屏,与浏览器的渲染机制有关。

  1. FOUC
  • Flash of unsettled
    content:无样式内容闪烁。对IE来说,把样式放在底部时,在某些场景下(如点击链接、输入URL、使用书签进入等)页面会出现FOUC现象,具体表现为逐步加载无样式的内容,等CSS加载完成后页面突然展现样式。

  • 对Firefox来说会先显示已加载的html内容,再逐步加载无样式内容,等css全部加载完成后页面突然展现样式,所以Firefox会一直表现出FOUC。

Firefox 对下载顺序做了优化:Firefox 会将 js, css
提前下载,而将图片等资源延迟到后面下载。

三 async和defer的作用是什么?有什么区别

  • 没有 defer 或
    async,浏览器会立即加载并执行指定的脚本,“立即”指的是在渲染该 script
    标签之下的文档元素之前,也就是说不等待后续载入的文档元素,读到就加载并执行。

  • 有 async,加载和渲染后续文档元素的过程将和 script.js
    的加载与执行并行进行(异步)。

  • 有 defer,加载后续文档元素的过程将和 script.js
    的加载并行进行(异步),但 script.js
    的执行要在所有元素解析完成之后,DOMContentLoaded 事件触发之前完成。

图片 1

image.png

上图的意思是:浏览器在解析HTML文件时,遇上没有设置defer或async属性的脚本,浏览器读到该脚本就加载并执行,脚本会阻塞其后内容的执行;
遇上设有async属性的脚本,会在HTML解析过程中下载该脚本,并在完成下载后暂停HTML的解析来执行这个异步脚本,直到执行完成后再继续HTML的解析;
遇上设有defer属性的脚本,会在HTML解析过程中下载该脚本,在HTML解析完成后才执行该文件。延迟脚本按照它们在文档中出现的顺序执行。

对于渲染,利用 Fiddler 将网速调慢,可以看到 css
下载后会马上渲染到页面,渲染和下载同步进行。js 的解析和运行,也类似。

四 简述网页的渲染机制

  1. Grome 等浏览器

图片 2

image.png

  • 解析 HTML 标签,构建 DOM 树

  • 解析 CSS 标签,构建 CSSOM 树

  • 把 DOM 和 CSSOM 组合成渲染树 (render tree)

  • 在渲染树的基础上进行布局,计算每个节点的几何结构

  • 把每个节点绘制到屏幕上(painting)

2 Firefox 等浏览器

图片 3

image.png

  • 解析 HTML 标签到 Content Sink

  • 这时,先加载Content Sink 里面的内容,页面上会显示一个无样式的内容

  • 循环加载 CSS 样式,每次加载一部分 CSS 样式后,会重新渲染页面

对于 js 运行,以及页面加载相关事件的触发,特别做了测试。在 Firefox
下,打开测试页面:

五 从上面4个题目中随机选择一题写成博客,投递到饥人谷技术博客6(可选题目)

[22:13:32.947] HTML Start[22:13:32.947] normal inline script run time[22:13:34.904] normal external script run time[22:13:35.775] [body] normal external script run time[22:13:35.789] [body end] normal external script run time[22:13:35.789] HTML End[22:13:35.791] deferred inline script run time[22:13:35.791] deferred external script run time[22:13:35.793] DOMContentLoaded[22:13:38.144] images[0] onload[22:13:38.328] images[1] onload[22:13:39.105] images[2] onload[22:13:39.105] images[3] onload[22:13:39.106] window.onload

很明显,JS 的运行严格按照文档流中的顺序进行。其中 deferred
的脚本会在最后运行(注:Firefox 3.5 开始支持 defer,而且支持得很完美)。

再来看下 IE8,结果如下:

[22:33:56.806] HTML Start[22:33:56.826] normal inline script run time[22:33:57.786] normal external script run time[22:33:57.812] deferred inline script run time[22:33:57.816] document.readyState = interactive[22:33:57.934] [body] normal external script run time[22:33:58.310] [body end] normal external script run time[22:33:58.310] HTML End[22:33:58.346] deferred external script run time[22:33:58.346] images[0].readyState = loading[22:33:58.346] images[0].readyState = complete[22:33:58.346] images[0] onload[22:33:58.361] doScroll[22:33:58.451] images[1].readyState = loading[22:33:58.479] images[1].readyState = complete[22:33:58.479] images[1] onload[22:33:58.794] images[2].readyState = loading[22:33:58.854] images[2].readyState = complete[22:33:58.854] images[2] onload[22:33:58.876] images[3].readyState = loading[22:33:58.876] images[3].readyState = complete[22:33:58.876] images[3] onload[22:33:58.887] document.readyState = complete[22:33:58.888] window.onload

可以看出,IE8 下,defer 只对 external 脚本有效,对 inline
脚本无效。另,与 DOMContentLoaded 最接近的是 doScroll. 这是 doScroll
被广泛用来模拟 DOMContentLoaded
的原因。小心:仅仅是模拟,细节上并不等价。

还可以得到一个有点意外的结果:放在 body
结束前的脚本,执行时,依旧最好放在 domready 事件中。无论在 Firefox 还是
IE 下,解析到 HTML End 时,并不代表 DOM
可以安全操作,特别是页面比较复杂时。

从上面数据中,也可以看出 YSlow
性能优化法则里,建议将样式置顶和脚本置底的根据。

有兴趣的可以进一步测试动态添加样式和脚本的情形,会稍有不同,但没有特别
surprise.

最后总结下

页面资源的下载顺序是从上到下的,文档流中先出现的资源先下载(注:存在并发,具体请参考
UA
Profiler)。当某一样式下载完成时,会立刻渲染到页面。当某一脚本下载完成时,也会立刻解析和运行。脚本的运行严格按照文档流中的顺序进行,deferred
的脚本会在正常脚本运行之后运行。

特别需要留意:脚本运行时,会暂停该脚本之下所有资源的下载(因为脚本可能改变文档流,甚至跳转页面,浏览器的暂停策略是合理的)。要小心内联脚本,经常会阻塞后续下载。

好了,废话不多说。以上结果,建议各位亲自测试,反复测试,疯狂测试,一直到眼花缭乱稀里糊涂恍然大悟继续糊涂为止……

相关文章