Script的加载方法小结


Posted in Javascript onJanuary 12, 2011

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

 Script的加载方法小结
但部分浏览器并不支持该属性。所以它不是个很好的跨浏览器解决方案。

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标签的表现是不一样的

Script的加载方法小结

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

Script的加载方法小结 Script的加载方法小结

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

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

业界优秀的延迟加载库

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

Javascript 相关文章推荐
URL编码转换,escape() encodeURI() encodeURIComponent()
Dec 27 Javascript
javascript 常用方法总结
Jun 03 Javascript
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
Feb 03 Javascript
js插件dropload上拉下滑加载数据实例解析
Jul 27 Javascript
利用Javascript实现BMI计算器
Aug 16 Javascript
JavaScript实现的CRC32函数示例
Nov 23 Javascript
canvas实现刮刮卡效果
Mar 14 Javascript
JS原生数据双向绑定实现代码
Aug 14 Javascript
Vue.js框架路由使用方法实例详解
Aug 25 Javascript
vue中created和mounted的区别浅析
Aug 13 Javascript
关于layui toolbar和template的结合使用方法
Sep 19 Javascript
压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
Feb 03 Javascript
javascrip客户端验证文件大小及文件类型并重置上传
Jan 12 #Javascript
javascript smipleChart 简单图标类
Jan 12 #Javascript
javascript Window及document对象详细整理
Jan 12 #Javascript
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
Jan 12 #Javascript
奉献给JavaScript初学者的编写开发的七个细节
Jan 11 #Javascript
从盛大通行证上摘下来的身份证验证js代码
Jan 11 #Javascript
javascript 设为首页与加入收藏兼容多浏览器代码
Jan 11 #Javascript
You might like
人族 Terran 基本策略
2020/03/14 星际争霸
德生PL330测评
2021/03/02 无线电
PHP设计模式之装饰者模式
2012/02/29 PHP
PHP设计模式之解释器模式的深入解析
2013/06/13 PHP
使用PHP接收POST数据,解析json数据
2013/06/28 PHP
PHP比较运算符的详细介绍
2015/09/29 PHP
用js实现的仿sohu博客更换页面风格(简单版)
2007/03/22 Javascript
flash 得到自身url参数的代码
2009/11/15 Javascript
jQuery中die()方法用法实例
2015/01/19 Javascript
使用jquery操作session方法分享
2015/01/22 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
2015/05/11 Javascript
JS控制表单提交的方法
2015/07/09 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
2015/12/16 Javascript
JavaScript代码因逗号不规范导致IE不兼容的问题
2016/02/25 Javascript
AngularJS入门教程引导程序
2016/08/18 Javascript
AngularJs bootstrap详解及示例代码
2016/09/01 Javascript
vuex actions传递多参数的处理方法
2018/09/18 Javascript
vue 实现Web端的定位功能 获取经纬度
2019/08/08 Javascript
Vue如何使用混合Mixins和插件开发详解
2020/02/05 Javascript
redux处理异步action解决方案
2020/03/22 Javascript
详解Vue的mixin策略
2020/11/19 Vue.js
[08:54]DOTA2-DPC中国联赛 正赛 Aster vs LBZS 选手采访
2021/03/11 DOTA
python中lambda函数 list comprehension 和 zip函数使用指南
2014/09/28 Python
Python之用户输入的实例
2018/06/22 Python
总结Python图形用户界面和游戏开发知识点
2019/05/22 Python
python logging模块的使用总结
2019/07/09 Python
使用python客户端访问impala的操作方式
2020/03/28 Python
jupyter 添加不同内核的操作
2021/02/06 Python
HTML5拖放功能_动力节点Java学院整理
2017/07/13 HTML / CSS
New Balance俄罗斯官方网上商店:购买运动鞋
2020/03/02 全球购物
网吧最新创业计划书范文
2014/03/27 职场文书
幼儿园春季开学寄语
2014/04/03 职场文书
医院党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
《秋天的雨》教学反思
2016/02/19 职场文书
node快速搭建后台的实现步骤
2022/02/18 NodeJs
微信小程序纯CSS实现无限弹幕滚动效果
2022/09/23 HTML / CSS