让浏览器非阻塞加载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重建星际争霸
Dec 22 Javascript
原生js编写设为首页兼容ie、火狐和谷歌
Jun 05 Javascript
jQuery中remove()方法用法实例
Dec 25 Javascript
jQuery老黄历完整实现方法
Jan 16 Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
Sep 19 Javascript
JavaScript设计模式初探
Jan 07 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
Sep 02 Javascript
js原生之焦点图转换加定时器实例
Dec 12 Javascript
浅谈jQuery中的$.extend方法来扩展JSON对象
Feb 12 Javascript
完美解决axios跨域请求出错的问题
Feb 05 Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
Mar 17 Javascript
详解mpvue scroll-view自动回弹bug解决方案
Oct 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网站安装程序制作的原理、步骤、注意事项和示例代码
2010/08/01 PHP
了解PHP的返回引用和局部静态变量
2015/06/04 PHP
搭建Vim为自定义的PHP开发工具的一些技巧
2015/12/11 PHP
微信支付开发交易通知实例
2016/07/12 PHP
php如何比较两个浮点数是否相等详解
2019/02/12 PHP
laravel 框架结合关联查询 when()用法分析
2019/11/22 PHP
js静态作用域的功能。
2006/12/25 Javascript
jQuery Ajax请求状态管理器打包
2012/05/03 Javascript
关于JavaScript中原型继承中的一点思考
2012/07/25 Javascript
js 实现 input type="file" 文件上传示例代码
2013/08/07 Javascript
javascript中的document.open()方法使用介绍
2013/10/09 Javascript
JS和函数式语言的三特性
2014/03/05 Javascript
jquery 显示*天*时*分*秒实现时间计时器
2014/05/07 Javascript
JavaScript创建对象的方式小结(4种方式)
2015/12/17 Javascript
js获取新浪天气接口的实现代码
2016/06/06 Javascript
JS中input表单隐藏域及其使用方法
2017/02/13 Javascript
微信小程序的日期选择器的实例详解
2017/09/29 Javascript
vue中SPA单页面应用程序详解
2017/11/07 Javascript
webpack+vue2构建vue项目骨架的方法
2018/01/09 Javascript
浅谈JavaScript 代码整洁之道
2018/10/23 Javascript
[00:35]TI7不朽珍藏III——寒冰飞龙不朽展示
2017/07/15 DOTA
一步步解析Python斗牛游戏的概率
2016/02/12 Python
python安装oracle扩展及数据库连接方法
2017/02/21 Python
python实现发送邮件及附件功能
2021/03/02 Python
Python中pandas dataframe删除一行或一列:drop函数详解
2018/07/03 Python
python如何查看微信消息撤回
2018/11/27 Python
python使用pygame模块实现坦克大战游戏
2020/03/25 Python
python打开文件的方式有哪些
2020/06/29 Python
Python读写压缩文件的方法
2020/07/30 Python
蔻驰意大利官网:COACH意大利
2019/01/16 全球购物
个人能力自我鉴赏
2014/01/25 职场文书
副总经理岗位职责范本
2014/09/30 职场文书
2016年全国爱眼日宣传教育活动总结
2016/04/05 职场文书
python中print格式化输出的问题
2021/04/16 Python
高并发下Redis如何保持数据一致性(避免读后写)
2022/03/18 Redis
开发者首先否认《遗弃》被取消的传言
2022/04/11 其他游戏