Script的加载方法小结

所属分类: 网络编程 / JavaScript 阅读数: 1504
收藏 0 赞 0 分享

1.静态加载
CSS,图片资源文件在页面渲染过程中可以并行下载,不会阻塞。在IE8,FF下,也可以支持JS的并行下载。尽管页面的JS下载加速了,但是JS对页面渲染的阻塞还是依然存在的,只有JS加载完毕了,页面的剩余部分才能继续渲染。放在Head部分的Script是最为恶劣的,因为对页面来说,Head部分是require的,是后部分所必须的,Head部分不加载完毕,Body部分不会开始解析,Body解析之前,页面是空白的。静态Script放到页面的哪部分来说都是阻塞,从浏览器实现的角度来说很好理解,因为JS代码中完全有可能修改页面元素影响Dom结构。因为浏览器对JS行为的不可预知,所以只好等前面的Script加载完毕后再继续渲染。所以最佳实践往往是说将Script放到页面底部</body>附近。
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

 defer
但部分浏览器并不支持该属性。所以它不是个很好的跨浏览器解决方案。

3.动态加载


复制代码 代码如下:

<script type="text/javascript">
var js = document.createElement("script");
js.src = '**.js';
document.getElementsByTagName("head")[0].appendChild(js);
</script>

这段代码创建了script标签,并插入这条标签到文档中。关键在于,这个脚本的加载时异步的,不会影响页面渲染的进程,不会阻塞页面内容的展示。这样的方式尽管不会阻塞页面资源的加载,但却可能会阻塞其他的script脚本,不同浏览器在这点上的表现是有非常大的差异的,参看这篇文章动态引入的外部 JS 文件在各浏览器中的加载顺序不一致
有两点非常突出,

1.同样的动态加载代码,不同浏览器对动态加载进来的js,是否阻塞下条Script标签的表现是不一样的

3

2.实现动态加载的那段代码顺序不同,对同一个浏览器来说,结果可能是非常迥异的,
如:

1 2

代码顺序的调换,IE的表现就不一样

所以,对动态加载脚本,需要重点关注的一个问题是,所动态加载的JS脚本的接口依赖问题。这个问题的解决方案也不复杂,既根据实现业务的需要跟踪所加载脚本的加载状态。加载状态的判断在IE下用readyState属性,非IE浏览器支持,脚本加载完成后的onload方法的调用。

业界优秀的延迟加载库

Ryan Grove 的LazeLoad https://github.com/rgrove/lazyload
Kyle Simpson 的 LABjs http://labjs.com/

更多精彩内容其他人还在看

jQuery LigerUI 使用教程表格篇(1)

ligerGrid是ligerui系列插件的核心控件,用户可以快速地创建一个美观,而且功能强大的表格,支持排序、分页、多表头、固定列等等
收藏 0 赞 0 分享

JavaScript中常用的运算符小结

JavaScript中常用的运算符小结,需要的朋友可以参考下。
收藏 0 赞 0 分享

深入理解JavaScript系列(13) This? Yes,this!

在这篇文章里,我们将讨论跟执行上下文直接相关的更多细节。讨论的主题就是this关键字。实践证明,这个主题很难,在不同执行上下文中this的确定经常会发生问题
收藏 0 赞 0 分享

javascript (用setTimeout而非setInterval)

javascript (用setTimeout而非setInterval)如果用setInterval 可能出现 下次调用会在前一次调用前调用
收藏 0 赞 0 分享

JavaScript中两个感叹号的作用说明

用两个感叹号的作用就在于,如果明确设置了o中flag的值(非null/undefined/0""/等值),自然test就会取跟o.flag一样的值;如果没有设置,test就会默认为false,而不是null或undefined
收藏 0 赞 0 分享

javascript写的简单的计算器,内容很多,方法实用,推荐

最近用javascript写了一个简单的计算器,自己测试感觉还好,代码都给了注释,非常不错,推荐大家学习。
收藏 0 赞 0 分享

js的表单操作 简单计算器

javascript写的简单的加减乘除计算器,里面涉及到一些方法还是很实用的哦,新手不要错过
收藏 0 赞 0 分享

Jquery中删除元素的实现代码

empty用来删除指定元素的子元素,remove用来删除元素,或者设定细化条件执行删除
收藏 0 赞 0 分享

javaScript 利用闭包模拟对象的私有属性

JavaScript缺少块级作用域,没有private修饰符,但它具有函数作用域。作用域的好处是内部函数可以访问它们的外部函数的参数和变量(除了this和argument
收藏 0 赞 0 分享

为JavaScript类型增加方法的实现代码(增加功能)

大家在js开发过程中有些功能已经满足不了我们的需求,或没有我们需要的功能,那么我们就可以自己扩展下,个性化js
收藏 0 赞 0 分享
查看更多