让浏览器非阻塞加载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 相关文章推荐
基于jQuery的动态表格插件
Mar 28 Javascript
读jQuery之十四 (触发事件核心方法)
Aug 23 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
Sep 09 Javascript
基于javascript实现动态显示当前系统时间
Jan 28 Javascript
jquery实现列表上下移动功能
Feb 25 Javascript
Javascript中级语法快速入手
Jul 30 Javascript
vue事件修饰符和按键修饰符用法总结
Jul 25 Javascript
Vue.js 利用v-for中的index值实现隔行变色
Aug 01 Javascript
Bootstrap实现模态框效果
Sep 30 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
Feb 03 Javascript
javaScript实现一个队列的方法
Jul 14 Javascript
JS前后端实现身份证号验证代码解析
Jul 23 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
百事可乐也出咖啡了 双倍咖啡因双倍快乐
2021/03/03 咖啡文化
探讨:parse url解析URL,返回其组成部分
2013/06/14 PHP
php递归json类实例
2014/12/02 PHP
php使用pdo连接并查询sql数据库的方法
2014/12/24 PHP
php简单统计字符串单词数量的方法
2015/06/19 PHP
Yii rules常用规则示例
2016/03/15 PHP
php+js实现百度地图多点标注的方法
2016/11/30 PHP
PhpSpreadsheet设置单元格常用操作汇总
2020/11/13 PHP
基于jquery的$.ajax async使用
2011/10/19 Javascript
jquery 如何动态添加、删除class样式方法介绍
2012/11/07 Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
2012/11/11 Javascript
jquery ui对话框实例代码
2013/05/10 Javascript
JavaScript里实用的原生API汇总
2015/05/14 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
2015/09/10 Javascript
微信小程序 常用工具类详解及实例
2017/02/15 Javascript
删除table表格行的实例讲解
2017/09/21 Javascript
React Native中导航组件react-navigation跨tab路由处理详解
2017/10/31 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
2019/01/16 Javascript
Echarts实现多条折线可拖拽效果
2019/12/19 Javascript
js利用拖放实现添加删除
2020/08/27 Javascript
vue3.0实现点击切换验证码(组件)及校验
2020/11/18 Vue.js
[38:38]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.17
2020/12/18 DOTA
python 文件和路径操作函数小结
2009/11/23 Python
python正则表达式match和search用法实例
2015/03/26 Python
Python中return语句用法实例分析
2015/08/04 Python
python 调用c语言函数的方法
2017/09/29 Python
pytorch使用指定GPU训练的实例
2019/08/19 Python
python中从for循环延申到推导式的具体使用
2019/11/29 Python
Python实现在Windows平台修改文件属性
2020/03/05 Python
Python reversed函数及使用方法解析
2020/03/17 Python
python 如何上传包到pypi
2020/12/24 Python
美国时尚配饰品牌:Dooney & Bourke
2017/11/14 全球购物
vue 中 get / delete 传递数组参数方法
2021/03/23 Vue.js
《荷花》教学反思
2014/04/16 职场文书
自荐信格式范文
2015/03/04 职场文书
工程技术负责人岗位职责
2015/04/13 职场文书