稍微有点经验的开发人员都知道,浏览器加载js文件时页面处于阻塞状态,对用户体验极不友好,因为如果把js包含在head标签内,页面必须等到所有的head文件加载完成后才开始渲染,在此之前用户看到的是一片空白,如果超过3秒种还不出来,90%以上的用户会直接选择关闭页面。因此建议尽可能的减少在head里面放过多的js文件,特别是比较大的文件,我们可以把他们放到body后面,这样页面就能快速响应,js让它稍后加载,形成一种过渡效果,提升用户体验。
当然,放在body后的js文件可以直接写,也可以后面动态添加,如果不是很重要的js文件建议采用动态添加。
动态添加一个js文件到body
var s = document.createElement('script')
s.type = "text/javascript"
s.src = "https://cdn.somesite.com/ajax/libs/some.js"
document.body.append(s)
很简单,就这几句话
s.onload = s.onreadystatechange = function(){
if(!this.readyState||this.readyState=='loaded'||this.readyState=='complete'){
//do something here!
}
s.onload = s.onreadystatechange=null
}
完了,就这样