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 相关文章推荐
腾讯UED 漂亮的提示信息效果代码
Sep 12 Javascript
select、radio表单回显功能实现避免使用jquery载入赋值
Jun 08 Javascript
JavaScript弹出窗口方法汇总
Aug 12 Javascript
原生javascript实现简单的datagrid数据表格
Jan 02 Javascript
深入理解JS正则表达式---分组
Jul 18 Javascript
AngularJS中的API(接口)简单实现
Jul 28 Javascript
Vue.js动态添加、删除选题的实例代码
Sep 30 Javascript
原生js实现日期计算器功能
Feb 17 Javascript
Angular 2父子组件数据传递之局部变量获取子组件其他成员
Jul 04 Javascript
vue实现商品加减计算总价的实例代码
Aug 12 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
Oct 19 Javascript
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
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
DISCUZ 论坛管理员密码忘记的解决方法
2009/05/14 PHP
php如何连接sql server
2015/10/16 PHP
jQuery实现菜单感应鼠标滑动动画效果的方法
2015/02/28 Javascript
TypeScript 中接口详解
2015/06/19 Javascript
JavaScript中的继承之类继承
2016/05/01 Javascript
Yarn的安装与使用详细介绍
2016/10/25 Javascript
使用JS和canvas实现gif动图的停止和播放代码
2017/09/01 Javascript
Angular2学习笔记之数据绑定的示例代码
2018/01/03 Javascript
vue实现密码显示隐藏切换功能
2018/02/23 Javascript
JavaScript继承定义与用法实践分析
2018/05/28 Javascript
Vue 获取数组键名的方法
2018/06/21 Javascript
webpack4.0 入门实践教程
2018/10/08 Javascript
javascript中call,apply,callee,caller用法实例分析
2019/07/24 Javascript
layer设置maxWidth及maxHeight解决方案
2019/07/26 Javascript
python中关于日期时间处理的问答集锦
2013/03/08 Python
Python SQLite3数据库操作类分享
2014/06/10 Python
Apache如何部署django项目
2017/05/21 Python
matplotlib设置legend图例代码示例
2017/12/19 Python
解决python写入带有中文的字符到文件错误的问题
2019/01/31 Python
解决Python中定时任务线程无法自动退出的问题
2019/02/18 Python
python读取txt文件并取其某一列数据的示例
2019/02/19 Python
python中seaborn包常用图形使用详解
2019/11/25 Python
Python中import导入不同目录的模块方法详解
2020/02/18 Python
python中tab键是什么意思
2020/06/18 Python
Python reversed反转序列并生成可迭代对象
2020/10/22 Python
详解Python中如何将数据存储为json格式的文件
2020/11/18 Python
HTML5新增的标签和属性归纳总结
2018/05/02 HTML / CSS
HTML5 CSS3打造相册效果附源码下载
2014/06/16 HTML / CSS
香港钟表珠宝首饰商城:OneMallTime网摩间
2016/10/14 全球购物
Happy Socks英国官网:购买五颜六色的袜子
2020/11/03 全球购物
汉语言文学毕业生求职信
2013/10/01 职场文书
租房协议书怎么写
2014/04/10 职场文书
民事赔偿协议书
2014/11/02 职场文书
2015年宣传部部长竞选演讲稿
2014/11/28 职场文书
教师工作决心书
2015/02/04 职场文书
解除租赁合同协议书
2016/03/21 职场文书