网站服务器租用和自己搭建的区别,个人博客网站建设方案,广州网站推广建设,江油网站制作一.加载和执行1.推荐所有的script标签尽可能放到body标签的底部#xff0c;以尽量减少对整体页面下载速度的影响。2.组织脚本减少页面包含的scirpt标签数量#xff0c;可以把多个文件合并成一个。3.无阻塞脚本1#xff09;.延迟脚本defer:html解析完才加载#xff0c;执行顺…一.加载和执行1.推荐所有的script标签尽可能放到body标签的底部以尽量减少对整体页面下载速度的影响。2.组织脚本减少页面包含的scirpt标签数量可以把多个文件合并成一个。3.无阻塞脚本1.延迟脚本defer:html解析完才加载执行顺序和加载顺序有关。async:html加载完就执行执行顺序和加载顺序无关。2.动态脚本元素推荐文件在该元素被添加到页面时开始下载。这种技术的中i单在于无论在何时启动下载文件的下载和执行过程呢个不会阻塞页面其他进程。但是有兼容问题解决办法如下function loadScript(url, callback) {var script document.createElement_x_x(script);script.type text/javascript;if (script.readyState) {//IEscript.onreadystatechange function () {if (script.readyState loaded || script.readyState complete) {script.onreadystatechange null;callback();}};}else{//其他浏览器script.onloadfunction(){callback();}};script.scrurl;document.getElementsByTagName(head)[0].a(script);};loadScript(file.js,function(){console.log(file.js is loaded)});
loadScript(file.js,function(){loadScript(file2.js,function(){loadScript(file3.js,function(){console.log(all is load)})})});复制代码XMLHttpRequest脚本注入大型web不推荐var xhrnew XMLHttpRequest();xhr.open(get,file.js,true);xhr.onreadystatechangefunction(){if(xhr.readyState4){if(xhr.status200xhr.statusspan stylecolor: #b5cea8;300||xhr.status304){var scriptdocument.createElement_x_x(script);script.typetext/javascript;script.textxhr.responseText;document.body.a(script)}}};xhr.send(null);复制代码总结减少JavaScript对性能的影响。1./body闭合标签之前将所有的script标签放在页面底部。这样确保在脚本执行前页面已经完成了渲染。2.合并脚本页面中的script标签也少加载也就越快响应也就越快无论外链还是内嵌脚本都是如此。3.使用多种无阻塞的javascript方法3.1使用script的方法defer属性。3.2使用动态创建script元素来下载并执行代码。3.3使用XHR对象下载javascript代码并注入页面中
