浏览器加载、渲染和解析过程黑箱简析
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了浏览器加载、渲染和解析过程黑箱简析，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3251字，纯文字阅读大概需要5分钟。
内容图文
用 Fiddler 监控，在 IE6 下，资源下载顺序为：
很明显，下载顺序从上到下，文档流中先出现的资源先下载。在 IE8, Safari, Chrome 等浏览器下也类似。
Firefox 对下载顺序做了优化：
Firefox 会将 js, css 提前下载，而将图片等资源延迟到后面下载。
对于渲染，利用 Fiddler 将网速调慢，可以看到 css 下载后会马上渲染到页面，渲染和下载同步进行。js 的解析和运行，也类似。
对于 js 运行，以及页面加载相关事件的触发，特别做了测试。在 Firefox 下，打开测试页面：
[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 的脚本会在正常脚本运行之后运行（Firefox 和 IE 下）。
特别需要留意：脚本运行时，会暂停该脚本之下所有资源的下载（因为脚本可能改变文档流，甚至跳转页面，浏览器的暂停策略是合理的）。要小心内联脚本，经常会阻塞后续下载。
好了，废话不多说。以上结果，建议各位亲自测试，反复测试，疯狂测试，一直到眼花缭乱稀里糊涂恍然大悟继续糊涂为止……
内容总结
以上是互联网集市为您收集整理的浏览器加载、渲染和解析过程黑箱简析全部内容，希望文章能够帮你解决浏览器加载、渲染和解析过程黑箱简析所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。