让浏览器非阻塞加载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 相关文章推荐
图片完美缩放
Sep 07 Javascript
JavaScript的面向对象(一)
Nov 09 Javascript
Extjs gridpanel 出现横向滚动条问题的解决方法
Jul 04 Javascript
JS调用CS里的带参方法实例
Aug 01 Javascript
js 加密压缩出现bug解决方案
Nov 25 Javascript
JS如何实现文本框随文本的长度而增长
Jul 30 Javascript
JS结合bootstrap实现基本的增删改查功能
Jul 22 Javascript
TypeScript学习之强制类型的转换
Dec 27 Javascript
详解vue之页面缓存问题(基于2.0)
Jan 10 Javascript
Ionic+AngularJS实现登录和注册带验证功能
Feb 09 Javascript
史上最全JavaScript常用的简写技巧(推荐)
Aug 17 Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
Sep 05 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 stristr() 函数(不区分大小写的字符串查找)
2010/06/03 PHP
PHPEXCEL 使用小记
2013/01/06 PHP
PHP之APC缓存详细介绍 apc模块安装
2014/01/13 PHP
PHP计算加权平均数的方法
2015/07/16 PHP
php封装单文件上传到数据库(路径)
2017/10/15 PHP
精解window.setTimeout()&window.setInterval()使用方式与参数传递问题!
2007/11/23 Javascript
javascript之典型高阶函数应用介绍二
2013/01/10 Javascript
js模拟点击以提交表单为例兼容主流浏览器
2013/11/29 Javascript
jquery使用slideDown实现模块缓慢拉出效果的方法
2015/03/27 Javascript
浅谈javascript中基本包装类型
2015/06/03 Javascript
使用JavaScript制作一个简单的计数器的方法
2015/07/07 Javascript
纯javascript制作日历控件
2015/07/17 Javascript
JS时间特效最常用的三款
2015/08/19 Javascript
Vue在页面右上角实现可悬浮/隐藏的系统菜单
2018/05/04 Javascript
vue template中slot-scope/scope的使用方法
2018/09/06 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
2019/06/10 Javascript
Promise扫盲贴
2019/06/24 Javascript
JavaScript实现简易聊天对话框(加滚动条)
2020/02/10 Javascript
在nuxt中使用路由重定向的实例
2020/11/06 Javascript
[01:36:19]Secret vs NB 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python中第三方库Requests库的高级用法详解
2017/03/12 Python
用生成器来改写直接返回列表的函数方法
2017/05/25 Python
python实现图片处理和特征提取详解
2017/11/13 Python
利用python实现微信头像加红色数字功能
2018/03/26 Python
python每5分钟从kafka中提取数据的例子
2019/12/23 Python
Python如何爬取qq音乐歌词到本地
2020/06/01 Python
python thrift 实现 单端口多服务的过程
2020/06/08 Python
党支部承诺书范文
2014/03/28 职场文书
村干部培训方案
2014/05/02 职场文书
2014年销售内勤工作总结
2014/12/01 职场文书
监考失职检讨书
2015/01/26 职场文书
有关花店创业的计划书模板
2019/08/27 职场文书
pytorch通过训练结果的复现设置随机种子
2021/06/01 Python
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
2022/04/11 Vue.js
聊聊mysql都有哪几种分区方式
2022/04/13 MySQL
TypeScript 内置高级类型编程示例
2022/09/23 Javascript