JS代码的加载

时间 2019-12-13

原文原文链接

HTML页面中JS的加载原理：在加载HTML页面的时候，当浏览器遇到内嵌的JS代码时会中止处理页面，先执行JS代码，而后再继续解析和渲染页面。一样的状况也发生在外链的JS文件中，浏览器必须先花时间下载外链文件中的代码，而后解析并执行它，在这个过程当中，页面的渲染和用户互交彻底被阻塞。因为现代浏览器都容许并行下载JS文件，所以<script>标签在下载外部资源时不会阻塞其余的<script>标签。遗憾的是JS下载过程仍然会阻塞其余资源的下载。javascript

加载JS代码优化：java

(1)因为脚本阻塞页面其余资源的下载，所以推荐将全部<script>标签尽量放到<body>标签底部，以尽可能减小对整个页面下载的影响。浏览器

(2)减小页面包含的<script>标签数量有助于减小HTTP请求数量，下载单个100KB的JS文件比下载5个20KB的JS文件更快。网络

(3)经过无阻塞的方法来加载JS脚本。app

无阻塞加载JS脚本：优化

(1)当动态建立script标签加载时，内嵌到标签内的代码一般当即执行(除了Firefox和Opera，它们将等待此前的全部动态脚本节点执行完毕)。url

案例：动态加载JS文件(兼容IE和其余浏览器)。spa

function loadScript(url, callback){对象

var script = document.createElement ("script")ip

script.type = "text/javascript";

if (script.readyState){ //IE浏览器

script.onreadystatechange = function(){

if (script.readyState == "loaded" || script.readyState == "complete"){

script.onreadystatechange = null;

callback();

}

};

} else { //其它浏览器

script.onload = function(){ callback() };

}

script.src = url;

document.getElementsByTagName("head")[0].appendChild(script);

}

//按顺序动态加载多个JS脚本

loadScript("script1.js", function(){

loadScript("script2.js", function(){ alert("All files are loaded!") });

});

(2)建立一个XHR(XMLHttpRequest)对象用于下载JS文件，接着建立一个script标签将JS代码注入这个标签内。该方法优势是，你能够下载不当即执行的JS代码，因为代码返回在<script>标签以外，全部下载后不会自动执行，并且全部现代浏览器中都不会引起异常。限制是JS文件必须与页面放置在同一个域内，不能从CDN【CDN指“内容投递网络”】下载。

案例：经过XHR对象加载JS脚本

//url必须是js文件路径

function getJS(url){

var xhr = new XMLHttpRequest();

xhr.open("GET", url, true);

xhr.send(null);

xhr.onreadystatechange = function(){

if (xhr.readyState == 4){

if (xhr.status == 200){

var script = document.createElement ("script");

script.type = "text/javascript";

script.text = xhr.responseText;

document.body.appendChild(script);

}

};

}

getJS('scripts/my.js');