JIA's blog

温故而知新

Home Archives Tags About

如何实现异步加载js

2023-10-18 2 min read
  1. 将script标签放到body底部
    保证优先加载DOM。严格来说，这种方式不算异步加载，但是这个是最常见的通过改变js加载方式来提升页面性能的方式。
  2. defer属性
    通过给script标签设置defer属性，将脚本文件的加载设置为延迟加载，当浏览器遇到带有defer属性的script标签时，会再开启一个线程去下载js文件，同时继续解析HTML文档。

等到HTML解析完毕，DOM加载完成后再去执行加载好的js

这种方法只适合用于引入外部js的script标签，可以保证多个js的加载和执行顺序就是页面中写的顺序。

需要注意，用了defer属性的js中不应该使用document.write方法

  1. async属性
    async属性和defer属性类似，都是会单独开启一个线程去下载js文件。

和defer不同的是，async会下载之后立即执行，而不是等到DOM加载完成之后再去执行，所以还有可能会造成阻塞。

对于所有带有async属性的script标签，不能像defer一样保证执行顺序，他是哪个文件先加载完就先执行。

async也是执只用于引入外部js文件的script标签，同样也不能使用document.write方法。

当脚本之间有依赖关系时，使用defer，这样可以保证执行的顺序；没有依赖的话使用async

  1. 动态创建script标签
(function(){
  var scriptEle = document.createElement("script");
  scriptEle.type = "text/javascript";
  scriptEle.async = true;
  scriptEle.arc = "http://xxxx.xxx.xxx/xx.js"

  var x = document.getElementsByTagName('head')[0]
  x.insertBefore(scriptEle, x.firstChild)
})()
AzhA RSS