这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
对动态加载脚本,需要重点关注的一个问题是,所动态加载的 JS 脚本的接口依赖问题。
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 type="text/javascript">
- var js = document.createElement("script");
- js.src = '**.js';
- document.getElementsByTagName("head")[0].appendChild(js);
- </script>
这段代码创建了 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/
来源: http://www.phperz.com/article/17/0724/283568.html