无阻塞加载js,防止因js加载不了影响页面显示的问题
浏览器加载静态资源和js的方式都是线性加载,所以一般情况可以将js放到</body>前,防止UI线程的阻塞。
而某些时候我们既希望js在整个网页的头部就加载,又担心js阻塞导致网站加载缓慢,就可以用到无阻塞加载js技术。
DynamicScriptElements动态脚本元素
DOM允许我们使用Javascript动态创建HTML的几乎所有文档内容,一个新的<script>元素可以非常容易的通过标准DOM创建:
varscript=document.createElement("script"); script.type="text/javascript"; script.src="file1.js"; document.body.appendChild(script);
新的<script>元素加载file1.js源文件。此文件当元素添加到页面后立刻开始下载。此技术的重点在于:无论在何处启动下载,文件的下载和运行都不会阻塞其他页面处理过程。
当文件使用动态脚本节点下载时,返回的代码通常立即执行(除了Firefox和Opera,它们将等待此前的所有动态脚本节点执行完毕)。
大多数情况下,我们希望调用一个函数就可以实现Javascript文件的动态下载。下面的函数封装实现了标准实现和IE实现:
functionloadScript(url,callback){ varscript=document.createElement("script"); script.type="text/javascript"; if(script.readyState){//IE script.onreadystatechange=function(){ if(script.readyState=="loaded"||script.readyState=="complete"){ script.onreadystatechange=null; callback(); } }; } else{//Others script.onload=function(){callback(); }; } script.src=url; document.getElementsByTagName("head")[0].appendChild(script); } loadScript("file1.js",function(){//调用 alert("Fileisloaded!"); });
此函数接受两个参数:Javascript文件的Url和一个当Javascript接收完成时触发的回调函数。属性检查用于决定监视哪种事件。最后一步src属性,并将javascript文件添加到head。
动态脚本加载是非阻塞Javascript下载中最常用的模式,因为它可以跨浏览器,而且简单易用。
以上这篇无阻塞加载js,防止因js加载不了影响页面显示的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。