让浏览器非阻塞加载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 相关文章推荐
学习YUI.Ext第五日--做拖放Darg&Drop
Mar 10 Javascript
JavaScript省市联动实现代码
Feb 15 Javascript
js写的方法实现上传图片之后查看大图
Mar 05 Javascript
jQuery中map()方法用法实例
Jan 06 Javascript
Angular2 环境配置详细介绍
Sep 21 Javascript
JavaScript拖动层Div代码
Mar 01 Javascript
vue.js中mint-ui框架的使用方法
May 12 Javascript
vue.js中父组件调用子组件的内部方法示例
Oct 22 Javascript
不得不知的ES6小技巧
Jul 28 Javascript
微信小程序wepy框架笔记小结
Aug 08 Javascript
详解使用uni-app开发微信小程序之登录模块
May 09 Javascript
八种Vue组件间通讯方式合集(推荐)
Aug 18 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删除特定数组内容并且重建数组索引的方法.
2011/03/25 PHP
将博客园(cnblogs.com)数据导入到wordpress的代码
2013/01/06 PHP
php两种无限分类方法实例
2015/04/21 PHP
老生常谈PHP位运算的用途
2017/03/12 PHP
javascript一些不错的函数脚本代码
2008/09/10 Javascript
javascript 常用方法总结
2009/06/03 Javascript
select 控制网页内容隐藏于显示的实现代码
2010/05/25 Javascript
jquery ajax请求实例深入解析
2012/11/26 Javascript
jquery 淡入淡出效果的简单实现
2014/02/07 Javascript
javascript实现的一个随机点名功能
2014/08/26 Javascript
微信小程序 开发之快递查询功能的实现
2017/01/09 Javascript
微信小程序 扎金花简单实例
2017/02/21 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
2017/08/03 Javascript
关于jQuery里prev()的简单操作代码
2017/10/27 jQuery
React Native使用Modal自定义分享界面的示例代码
2017/10/31 Javascript
webpack+vue中使用别名路径引用静态图片地址
2017/11/20 Javascript
vue父组件点击触发子组件事件的实例讲解
2018/02/08 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
2018/05/15 Javascript
vue视图不更新情况详解
2019/05/16 Javascript
js图片查看器插件用法示例
2019/06/22 Javascript
浅谈Three.js截图并下载的大坑
2019/11/01 Javascript
vue分页插件的使用方法
2019/12/25 Javascript
Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现
2020/09/04 Javascript
JS如何生成动态列表
2020/09/22 Javascript
详解template标签用法(含vue中的用法总结)
2021/01/12 Vue.js
python进阶教程之词典、字典、dict
2014/08/29 Python
Python实现将一个正整数分解质因数的方法分析
2017/12/14 Python
详解用python实现简单的遗传算法
2018/01/02 Python
python实现俄罗斯方块游戏
2020/03/25 Python
python画一个玫瑰和一个爱心
2020/08/18 Python
解决pytorch下出现multi-target not supported at的一种可能原因
2021/02/06 Python
css图标制作教程制作云图标
2014/01/19 HTML / CSS
Famous Footwear加拿大:美国多品牌运动休闲鞋店
2018/12/05 全球购物
铁路个人事迹材料
2014/01/30 职场文书
大学毕业寄语大全
2014/04/10 职场文书
2015大学迎新标语
2015/07/16 职场文书