让浏览器非阻塞加载javascript的几种方法小结
在页面的加载过程中如果可以做到内容的逐步呈现，对于良好的用户体验来说是非常重要的。通常我们也会在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计算值然后把值嵌入到html中的实现方法
下面小编就为大家带来一篇JavaScript计算值然后把值嵌入到html中的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
javascript中的作用域(scope)和上下文(context)是这门语言的独到之处，这部分归功于他们带来的灵活性。本文给大家介绍JavaScript中的作用域和上下文，感兴趣的朋友一起学习2016-03-03
今天小编就为大家分享一篇js实现数字从零慢慢增加到指定数字示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
现在有一段12行的JavaScript代码，可以让firefox、chrome、safari浏览器崩溃，而且还能让iphone重启、安卓闪退，本文作者对于该12行代码进行了分析解读并且提出了相应的防御办法，欢迎大家一同探讨。有需要的朋友们可以参考借鉴。2016-10-10
微信小程序可以通过直接写 data-index="1" 进行数据的绑定 ,利用 bindtap 点击事件执行函数从而获取到参数信息,本文给大家介绍微信小程序通过点击事件传参(data-)的操作,感兴趣的朋友一起看看吧2023-12-12
js-FCC算法-No repeats please字符串的全排列(详解)
下面小编就为大家带来一篇js-FCC算法-No repeats please字符串的全排列(详解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
这篇文章主要介绍了微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能,涉及微信小程序事件响应、页面元素属性动态操作实现滑动与蒙层功能相关技巧与注意事项,需要的朋友可以参考下2018-12-12
在昨天的工作中遇到了一个微信小程序上传代码过大的情况,在这里总结一下具体的解决步骤,首先介绍一下,技术栈是使用uniapp框架+HBuilderX的开发环境,需要的朋友可以参考下2023-09-09
下面小编就为大家带来一篇JavaScript进阶练习及简单实例分析。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
这篇文章主要给大家介绍了关于微信小程序实现导航功能的操作步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
最新评论