浏览器加载、渲染和解析过程黑箱简析


Posted in Javascript onNovember 29, 2012

用 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 下)。

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

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

Javascript 相关文章推荐
js文件中调用js的实现方法小结
Oct 23 Javascript
extjs3 combobox取value和text案例详解
Feb 06 Javascript
Node.js巧妙实现Web应用代码热更新
Oct 22 Javascript
jquery获取css的color值返回RGB的方法
Dec 18 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
Apr 05 Javascript
深入理解JavaScript中的对象复制(Object Clone)
May 18 Javascript
AngularJS ng-blur 指令详解及简单实例
Jul 30 Javascript
javascript 定时器工作原理分析
Dec 03 Javascript
使用prop解决一个checkbox选中后再次选中失效的问题
Jul 05 Javascript
ES6下子组件调用父组件的方法(推荐)
Feb 23 Javascript
微信小程序自定义tab实现多层tab嵌套功能
Jun 15 Javascript
详解如何更好的使用module vuex
Mar 27 Javascript
javascript控制swfObject应用介绍
Nov 29 #Javascript
javascript 保存文件到本地实现方法
Nov 29 #Javascript
jquery连缀语法如何实现
Nov 29 #Javascript
javascript 使td内容不换行不撑开
Nov 29 #Javascript
json原理分析及实例介绍
Nov 29 #Javascript
javascript全局变量封装模块实现代码
Nov 28 #Javascript
Javascript Request获取请求参数如何实现
Nov 28 #Javascript
You might like
PHP对文件进行加锁、解锁实例
2015/01/23 PHP
对PHP依赖注入的理解实例分析
2016/10/09 PHP
php操作redis命令及代码实例大全
2020/11/19 PHP
jquery 简短右键菜单 多浏览器兼容
2010/01/01 Javascript
javascript 鼠标拖动图标技术
2010/02/07 Javascript
基于jQuery实现仿淘宝套餐选择插件
2015/03/04 Javascript
Jquery使用val方法读写value值
2015/05/18 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
2015/12/03 Javascript
全面解析node 表单的图片上传
2016/11/21 Javascript
js制作简单的音乐播放器的示例代码
2017/08/28 Javascript
前端必备插件之纯原生JS的瀑布流插件Macy.js
2017/11/22 Javascript
tangram.js库实现js类的方式实例分析
2018/01/06 Javascript
Angular.JS读取数据库数据调用完整实例
2019/07/02 Javascript
使用Phantomjs和Node完成网页的截屏快照的方法
2019/07/16 Javascript
微信小程序实现禁止分享代码实例
2019/10/19 Javascript
JavaScript oncopy事件用法实例解析
2020/05/13 Javascript
详解Vue数据驱动原理
2020/11/17 Javascript
Python使用CMD模块更优雅的运行脚本
2015/05/11 Python
Python实现识别手写数字大纲
2018/01/29 Python
Python逐行读取文件中内容的简单方法
2019/02/26 Python
全面了解django的缓存机制及使用方法
2019/07/22 Python
Python如何获取Win7,Win10系统缩放大小
2020/01/10 Python
keras的ImageDataGenerator和flow()的用法说明
2020/07/03 Python
AmazeUI 折叠面板的实现代码
2020/08/17 HTML / CSS
中文系师范生自荐信
2013/10/01 职场文书
快递业务员岗位职责
2014/01/06 职场文书
黄河象教学反思
2014/02/10 职场文书
超市仓管员岗位职责
2014/04/07 职场文书
人事主管岗位职责说明书
2014/07/30 职场文书
个人四风问题对照检查材料思想汇报
2014/10/06 职场文书
2015年营业员工作总结
2015/04/23 职场文书
质量承诺书格式范文
2015/04/28 职场文书
2015年党支部书记工作总结
2015/05/21 职场文书
有关浪费资源的建议书
2015/09/14 职场文书
还在手动盖楼抽奖?教你用Python实现自动评论盖楼抽奖(一)
2021/06/07 Python
世界十大儿童漫画书排名,法国国宝漫画排第五,第二是轰动日本连环
2022/03/18 欧美动漫