您好,欢迎访问一九零五行业门户网

Script的加载方法小结_javascript技巧

1.静态加载
css,图片资源文件在页面渲染过程中可以并行下载,不会阻塞。在ie8,ff下,也可以支持js的并行下载。尽管页面的js下载加速了,但是js对页面渲染的阻塞还是依然存在的,只有js加载完毕了,页面的剩余部分才能继续渲染。放在head部分的script是最为恶劣的,因为对页面来说,head部分是require的,是后部分所必须的,head部分不加载完毕,body部分不会开始解析,body解析之前,页面是空白的。静态script放到页面的哪部分来说都是阻塞,从浏览器实现的角度来说很好理解,因为js代码中完全有可能修改页面元素影响dom结构。因为浏览器对js行为的不可预知,所以只好等前面的script加载完毕后再继续渲染。所以最佳实践往往是说将script放到页面底部
附近。
js加载对前台性能的影响,雅虎优化原则之一是减少http请求数,压缩js,合并js,减少js数。
若是业务上有很多独立模块化的js需要加载,可以考虑在线打包的方案。
2。延迟加载
w3c标准html4.01给script标签定义了一个defer属性,指明该js不会改变dom的content,浏览器可继续解析和渲染,无需阻塞在该script。
http://www.w3.org/tr/1999/rec-html401-19991224/interact/scripts.html
但部分浏览器并不支持该属性。所以它不是个很好的跨浏览器解决方案。
3.动态加载
复制代码 代码如下:
这段代码创建了script标签,并插入这条标签到文档中。关键在于,这个脚本的加载时异步的,不会影响页面渲染的进程,不会阻塞页面内容的展示。这样的方式尽管不会阻塞页面资源的加载,但却可能会阻塞其他的script脚本,不同浏览器在这点上的表现是有非常大的差异的,参看这篇文章动态引入的外部 js 文件在各浏览器中的加载顺序不一致
有两点非常突出,
1.同样的动态加载代码,不同浏览器对动态加载进来的js,是否阻塞下条script标签的表现是不一样的
2.实现动态加载的那段代码顺序不同,对同一个浏览器来说,结果可能是非常迥异的,
如:
代码顺序的调换,ie的表现就不一样
所以,对动态加载脚本,需要重点关注的一个问题是,所动态加载的js脚本的接口依赖问题。这个问题的解决方案也不复杂,既根据实现业务的需要跟踪所加载脚本的加载状态。加载状态的判断在ie下用readystate属性,非ie浏览器支持,脚本加载完成后的onload方法的调用。
业界优秀的延迟加载库
ryan grove 的lazeload https://github.com/rgrove/lazyload
kyle simpson 的 labjs http://labjs.com/
其它类似信息

推荐信息