让浏览器非阻塞加载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 相关文章推荐
Open and Print a Word Document
Jun 15 Javascript
jQuery插件原来如此简单 jQuery插件的机制及实战
Feb 07 Javascript
js带按钮的提示框可供选择示例代码
Sep 17 Javascript
jquery实现更改表格行顺序示例
Apr 30 Javascript
原生和jQuery的ajax用法详解
Jan 23 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
Apr 25 Javascript
Vue Cli与BootStrap结合实现表格分页功能
Aug 18 Javascript
基于vue实现可搜索下拉框定制组件
Mar 26 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
Aug 24 Javascript
Vue 样式绑定的实现方法
Jan 15 Javascript
[jQuery] 事件和动画详解
Mar 05 jQuery
JS实现吸顶特效
Jan 08 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 中文处理函数集合
2008/08/27 PHP
PHP配置把错误日志以邮件方式发送方法(Windows系统)
2015/06/23 PHP
Jvascript学习实践案例(开发常用)
2012/06/25 Javascript
jQuery中map()方法用法实例
2015/01/06 Javascript
jQuery Validate验证框架经典大全
2015/09/23 Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
2016/02/06 Javascript
原生JavaScript制作微博发布面板效果
2016/03/11 Javascript
使用jQuery制作基础的Web图片轮播效果
2016/04/22 Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
2016/06/08 Javascript
浅析Javascript ES6中的原生Promise
2016/08/25 Javascript
如何使用CSS3+JQuery实现悬浮墙式菜单
2019/06/18 jQuery
layui--select使用以及下拉框实现键盘选择的例子
2019/09/24 Javascript
webpack 处理CSS资源的实现
2019/09/27 Javascript
Vue 实现从小到大的横向滑动效果详解
2019/10/16 Javascript
[07:03]显微镜下的DOTA2第九期——430圣堂刺客杀戮秀
2014/06/20 DOTA
[30:37]【全国守擂赛】第三周擂主赛 Dark Knight vs. Leopard Gaming
2020/05/04 DOTA
[47:42]完美世界DOTA2联赛PWL S2 GXR vs Ink 第一场 11.19
2020/11/20 DOTA
go语言计算两个时间的时间差方法
2015/03/13 Python
编写Python脚本来获取mp3文件tag信息的教程
2015/05/04 Python
Python简单生成8位随机密码的方法
2017/05/24 Python
python基础教程项目五之虚拟茶话会
2018/04/02 Python
把JSON数据格式转换为Python的类对象方法详解(两种方法)
2019/06/04 Python
Python 3.6打包成EXE可执行程序的实现
2019/10/18 Python
Numpy中对向量、矩阵的使用详解
2019/10/29 Python
HTML5 图片预加载的示例代码
2020/03/25 HTML / CSS
锐步美国官方网站:Reebok美国
2018/01/10 全球购物
包装类的功能、种类、常用方法
2012/01/27 面试题
劳资人员岗位职责
2013/12/19 职场文书
班组长安全职责
2014/01/05 职场文书
执行总经理岗位职责
2014/02/03 职场文书
专题组织生活会方案
2014/06/15 职场文书
乔迁之喜答谢词
2015/01/05 职场文书
求职信格式范文
2015/03/19 职场文书
2016开学第一课心得体会
2016/01/23 职场文书
2016年第二十五次全国助残日活动总结
2016/04/01 职场文书
【超详细】八大排序算法的各项比较以及各自特点
2021/03/31 Python