前端性能优化之加载与执行

Posted 2020-06-18

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端性能优化之加载与执行相关的知识，希望对你有一定的参考价值。

学习了一阵的前端的优化，是时候终结一下了，接下来会陆续从各个方面终结前端的优化方案。
-----------------------------------------------------------------------------------

由于脚本会阻塞页面其他资源的下载，因此推荐将所有的<script>标签尽可能放<body>标签的底部，以尽量减少对整个页面下载的影响。（ie8、FF3.5、Safari4、Chrome2都允许并行下载JS文件）
一段内嵌脚本放在引用外链样式表的<link>标签之后会导致页面阻塞去等待样式表的下载。
无阻塞的脚本：延迟脚本，动态脚本
延迟脚本：<script type=”text/javascript” defer> defer属性指明本元素包含的脚本不会修改DOM，带有这个元素的js文件下载时不会被执行，无论内嵌还是外链，这类文件可以与页面的其他资源并行下载。任何带有defer属性的script元素在加载DOM完成之前都不会被执行。该属性只有IE4+和ff3.5+支持，其他的会忽略，已默认的方式加载。
动态脚本（最通用的方案）：

var script=document.createElement(“script”);
script.type=”text/javascript” ;
script.src=”file.js”;
document.getElmentByTagName（“head”）[0].appendChild(script);

无论何时下载，文件的下载执行过程都不会阻塞页面其他过程。文件下载完成后马上执行，如果当代码中含共页面其他脚本调用的接口时，就会有问题，这是需要跟踪脚本下载完成且准备就绪。
Ff,Safari3+,Opera,Chrome以上版本script元素接受完成时触发一个load事件

var script=document.createElement(“script”);
script.type=”text/javascript” ;
script.onload=function(){
//....................
}
script.src=”file.js”;
document.getElmentByTagName（“head”）[0].appendChild(script);

IE会触发一个readyStateChange事件，script提供一个readySate属性，有五个属性值：uninitialized，loading，loaded，intera，complete，实际运用中最有用的是complete和loaded，IE在表示最终状态的readySate值时不一致，有时<script>到达loaded状态而不会到达complete，有时<script>不经过loaded状态就到达了complete状态，因此同时检测两种状态最靠谱。

var script=document.createElement(“script”);
script.type=”text/javascript” ;
script.onreadystatechange=function(){
    if(script.readyStae==”loaded”||script.readyStae==”complete”);{
        script.onreadystatechange=null;
        //............
    }
}
script.src=”file.js”;
document.getElmentByTagName（“head”）[0].appendChild(script);

兼容版：

function loadScript(url,callback){
    var script=document.createElement(“script”);
    script.type=”text/javascript” ;
    if(script.readyState){
    　　script.onreadystatechange=function(){
           if(script.readyStae==”loaded”||script.readyStae==”complete”);{
        　　　　script.onreadystatechange=null;
        　　　　callback();
　　　　　　 }
　　　　}
　　}else{
    　　script.onload=function(){
    　　callback();
　　}
　　script.src=url;
　　document.getElmentByTagName（“head”）[0].appendChild(script);
}

//加载多个文件：
loadScript(“file1.js”,function(){
　　loadScript(“file2.js”,function(){
　　　　loadScript(“file3.js”,function(){
　　　　});
　　});
});

还可以通过XMLHttpReques脚本注入，由于同源策略，这种方法有很多局限性，比如JS文件无法从CDN下载，在大型的应用开发中通常不会采用这种方法。

以上是关于前端性能优化之加载与执行的主要内容，如果未能解决你的问题，请参考以下文章

前端性能优化之按需加载(React-router+webpack)

前端性能优化-异步加载