Script的加载方法小结
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
但部分浏览器并不支持该属性。所以它不是个很好的跨浏览器解决方案。
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/
相关文章
点击最大化按钮后，浏览器的内容填充满显示器，浏览器窗口的边框被挤出显示器。而该js的最大化效果是浏览器的边框在显示器内显示，具体实现如下，感兴趣的朋友可以参考下2013-08-08
再最近的一次实际项目开发中,又遇到了需要对两个数组内容进行比较的需求,索性整理下,这篇文章主要给大家介绍了关于js判断两个数组相等的5种方法,需要的朋友可以参考下2022-05-05
这篇文章主要介绍了js unicode 编码解析关于数据转换为中文的两种方法,需要的朋友可以参考下2014-04-04
情人节将至，程序员证明自己不是直男的时候到啦！小编为大家准备了十个通过JavaScript实现的爱心动画特效，快学起来，到时候给女朋友一个惊喜吧2022-02-02
这篇文章主要介绍了bootstrap轮播模板的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
这篇文章主要介绍了JavaScript数据结构与算法之栈详解,本文讲解了对栈的操作、对栈的实现实例等内容,需要的朋友可以参考下2015-03-03
这篇文章主要以实例的方式讲解多个js毫秒倒计时同时进行效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-01-01
这篇文章主要为大家介绍了JavaScript迭代器模式内部黑盒子解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
这篇文章主要介绍了使用原生javascript实现DIV拖拽并计算重复面积的方法及示例代码分享，效果十分漂亮,需要的朋友可以参考下2015-01-01
这篇文章主要给大家介绍了d3.js中强制异步文件读取同步的几种方法，文中给出了详细的介绍和解决方法，对大家具有一定的参考价值，需要的朋友们下面来一起学习学习吧。2017-02-02
最新评论