注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

星期五

明天不上班

 
 
 

日志

 
 
关于我

一个特立独行的Java程序员,比较宅,上上网,写博客,听音乐,看电影。

网易考拉推荐

(转载)浏览器加载、渲染和解析过程的黑箱分析  

2011-01-22 14:23:00|  分类: Javascript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

http://lifesinger.org/blog/2009/08/browser-load-render-parse-process/

射雕哥的这篇文章 我很是喜欢,感谢雕哥!!!

 

页面资源的下载顺序是从上到下的,文档流中先出现的资源先下载。

当某一样式下载完成时,会立刻渲染到页面。

当某一脚本下载完成时,也会立刻解析和运行。

脚本的运行严格按照文档流中的顺序进行,deferred 的脚本会在正常脚本运行之后运行(Firefox 和 IE 下)。

脚本运行时,会暂停该脚本之下所有资源的下载(因为脚本可能改变文档流,甚至跳转页面,浏览器的暂停策略是合理的)。

要小心内联脚本,经常会阻塞后续下载。

以上这些我都可以理解。

 

但是,浏览器都只是顺序加载吗?

如果不是的话,那它如何并行加载?

这个我在老田的博客中找到了答案!!!

来自yongbin

基本上是这几个要点:
1. 对于外部资源css, image, iframe,浏览器可以并行下载,但有同域最大连接数限制(IE为2,FF默认为6)。
2. JavaScript不管是行内的还是外部的,下载和执行,都会阻塞浏览器下载后续资源。因此对于行内js,提倡放到底部,或者用异步调用的方式来执行。
3. 用document.write来生成script标签,可以实现多个js文件的并行下载(仅IE),但仍会阻塞其他资源。

你可以用Cuzillion去做测试,用Firebug自己去看。

 

另外试了雕哥测试页面

Firefox 3.6

[13:10:16.655] HTML Start
[13:10:16.655] deferred inline script run time
[13:10:16.656] normal inline script run time
[13:10:17.198] normal external script run time
[13:10:17.241] [body] normal external script run time
[13:10:17.244] [body end] normal external script run time
[13:10:17.245] HTML End
[13:10:17.246] deferred external script run time
[13:10:17.249] DOMContentLoaded
[13:10:17.575] images[0] onload
[13:10:17.595] images[2] onload
[13:10:17.615] images[3] onload
[13:10:17.615] window.onload

[590] htmlLoadTime (HTML End - HTML Start)
[594] domContentLoadedTime (DOMContentLoaded - HTML Start)
[370] #section LoadTime (#section maxImgLoadTime - HTML End)
[960] windowLoadTime (window.onload - HTML Start)

 

IE8

[13:11:18.945] HTML Start
[13:11:18.945] normal inline script run time
[13:11:18.946] deferred inline script run time
[13:11:19.750] normal external script run time
[13:11:20.345] [body] normal external script run time
[13:11:20.349] [body end] normal external script run time
[13:11:20.349] HTML End
[13:11:20.354] deferred external script run time
[13:11:20.356] doScroll
[13:11:20.393] images[1].readyState = loading
[13:11:20.455] images[0].readyState = loading
[13:11:20.700] images[1].readyState = complete
[13:11:20.700] images[1] onload
[13:11:20.717] images[0].readyState = complete
[13:11:20.717] images[0] onload
[13:11:20.875] images[2].readyState = loading
[13:11:20.949] images[3].readyState = loading
[13:11:21.75] images[3].readyState = complete
[13:11:21.75] images[3] onload
[13:11:21.92] images[2].readyState = complete
[13:11:21.92] images[2] onload
[13:11:21.96] document.readyState = complete
[13:11:21.98] window.onload

[1404] htmlLoadTime (HTML End - HTML Start)
[1411] doScrollTime (doScroll - HTML Start)
[2151] documentCompleteTime (documentReadyStateTime_complete - HTML Start)
[743] #section LoadTime (#section maxImgLoadTime - HTML End)

[2153] windowLoadTime (window.onload - HTML Start)

 

1.IE8在 document.readyState = complete之后才执行 window.onload

2.IE用doScroll来模拟DOMContentLoaded的原因

 

根据上面分析,我们来看看框架中如何实现DOMReady事件

 http://www.popo4j.com/qianduan/js_framework_domready_impl.html

 

  评论这张
 
阅读(125)| 评论(0)
推荐

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017