让浏览器非阻塞加载javascript的几种方法小结


Posted in Javascript onApril 25, 2011

浏览器为了确保正确执行脚本和呈现布局在浏览器加载和执行完成它之前会完全阻塞页面后续内容的呈现和其他资源的加载。

    在页面的加载过程中如果可以做到内容的逐步呈现,对于良好的用户体验来说是非常重要的。通常我们也会在wondow对象的onload事件处理函数中做一些事情,但由于脚本阻塞加载和呈现的特性这一方面增加了页面载入时间推迟了onload事件的触发,另一方面也延迟了用户所期待的反馈。这就需要我们使用一些方法来让浏览器以非阻塞的方式加载外部脚本。

一  使用XMLHttpRequest对象异步方式加载外部脚本。

    这种方式好处是触发较少的浏览器忙指示器,能够被所有现代浏览器的所支持。不足的之处在于由于浏览器的跨域安全机制所以只能允许加载同域下外部脚本。另外如果多个脚本之间存在依赖关系的话,需要使用编写相关的队列管理脚本来控制多个脚本的执行顺序。

二  使用Javascript来动态创建外部脚本的SCRIPT元素

   这种方式是我认为跨域并行加载外部脚本情况下的最佳方案,实现方法是使用Javascript来动态的创建在HTML中引用外部脚本所需要srcript元素并给创建的srcript元素的src属性设置相应的外部脚本的URL来实现和其他资源并行加载。

四  使用iframe加载外部脚本

    这种方式我们需要使用一个新HTML页面把外部脚本转换成到该HTML页面的行内脚本,然后在主页面中使用iframe加载这个包含脚本的HTML页面,使用这种方式需要重构部分代码来访问主页面中DOM元素。而且IFRAM是开销相对较大DOM元素,同样也有跨域限制。

五 使用Script标签的 derfer 属性

    这种方式是实现非阻塞并行加载外部脚本的最简单的方式,只需要在引用外部脚本的是常规方式上给SCRIPT标签应用defer属性即可。但是使用这种方式加载外部脚本缺点是它只在部门浏览器中实现并行加载因此兼容性欠缺。

六 docuument.write script tag

    这种方式实现起来也比较简单,就是直接使用是javascript的document.write方法来输出在HTML中引用外部脚本的script标记的字符串。不足之处和方法五一样兼容性欠缺。

总结

   上述几种方式需要根据具体需求,如是否需要跨域?是否需要确保脚本按顺序执行?是否需要触发更多或更少的浏览器的忙指示器?以及兼容性,支持的代码量来确定来综合考虑那种方式才是追合适的。

Javascript 相关文章推荐
js类 from qq
Nov 13 Javascript
jQuery DOM操作小结与实例
Jan 07 Javascript
javascript中全局对象的isNaN()方法使用介绍
Dec 19 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
Dec 28 Javascript
通过遮罩层实现浮层DIV登录的js代码
Feb 07 Javascript
深入浅析JavaScript面向对象和原型函数
Feb 06 Javascript
JavaScript 冒泡排序和选择排序的实现代码
Sep 03 Javascript
JavaScript实现按键精灵的原理分析
Feb 21 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
Feb 28 Javascript
快速解决vue在ios端下点击响应延时的问题
Aug 27 Javascript
Node.js npm命令运行node.js脚本的方法
Oct 10 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
May 01 Javascript
jQuery 版元素拖拽原型代码
Apr 25 #Javascript
30个最好的jQuery 灯箱插件分享
Apr 25 #Javascript
分享27个jQuery 表单插件集合推荐
Apr 25 #Javascript
分享14个很酷的jQuery导航菜单插件
Apr 25 #Javascript
23个超流行的jQuery相册插件整理分享
Apr 25 #Javascript
基于jquery的二级联动菜单实现代码
Apr 25 #Javascript
jQuery判断元素是否是隐藏的代码
Apr 24 #Javascript
You might like
关于php fread()使用技巧
2010/01/22 PHP
腾讯QQ php程序员面试题目整理
2010/06/08 PHP
js cookies实现简单统计访问次数
2009/11/24 Javascript
jQuery AjaxQueue改进步骤
2011/10/06 Javascript
JavaScript中的toDateString()方法使用详解
2015/06/12 Javascript
ExtJs动态生成treepanel的Json格式
2015/07/19 Javascript
js实现无限级树形导航列表效果代码
2015/09/23 Javascript
JS响应鼠标点击实现两个滑块区间拖动效果
2015/10/26 Javascript
Bootstrap实现默认导航栏效果
2020/09/21 Javascript
下雪了 javascript实现雪花飞舞
2020/08/02 Javascript
用AngularJS来实现监察表单按钮的禁用效果
2016/11/02 Javascript
EasyUI 结合JS导出Excel文件的实现方法
2016/11/10 Javascript
JS 对java返回的json格式的数据处理方法
2016/12/05 Javascript
详解nodejs微信公众号开发——3.封装消息响应模块
2017/04/10 NodeJs
Vue.js更改调试地址端口号的实例
2018/09/19 Javascript
微信小程序swiper实现滑动放大缩小效果
2018/11/15 Javascript
React.js组件实现拖拽排序组件功能过程解析
2020/04/27 Javascript
vue实现简单计算商品价格
2020/09/14 Javascript
vue3 watch和watchEffect的使用以及有哪些区别
2021/01/26 Vue.js
python分割文件的常用方法
2014/11/01 Python
Django中使用locals()函数的技巧
2015/07/16 Python
Tensorflow环境搭建的方法步骤
2018/02/07 Python
JSON文件及Python对JSON文件的读写操作
2018/10/07 Python
用python生成(动态彩色)二维码的方法(使用myqr库实现)
2019/06/24 Python
python yield关键词案例测试
2019/10/15 Python
tensorflow的计算图总结
2020/01/12 Python
tensorflow求导和梯度计算实例
2020/01/23 Python
用python实现一个简单的验证码
2020/12/09 Python
香港交友网站:be2香港
2018/07/22 全球购物
营销总监岗位职责范本
2014/02/26 职场文书
股东授权委托书范本
2014/09/13 职场文书
"9.18"国耻日演讲稿范文
2014/09/14 职场文书
2014年医院个人工作总结
2014/12/09 职场文书
停电放假通知
2015/04/14 职场文书
傲慢与偏见读书笔记
2015/06/29 职场文书
朋友聚会祝酒词
2015/08/10 职场文书