回炉重造-页面优化-js加载和执行1

橘子Coder
386 阅读3分钟

最近回顾梳理毕业几年以来的知识储备，打算从最原始的方式来一步步的回顾至目前流行的三个框架知识，话不多说撸起袖子干。

在阅读之前我们需要知道在页面加载过程中脚本和样式文件的下载过程。假如我们页面有以下代码:

<html>
    <script  type="text/javascript" src="file1.js"/>
    <script  type="text/javascript" src="file2.js"/>
    <script  type="text/javascript" src="file3.js"/>
    <link rel="stylesheet" type="text/css" href="styke.css"/>
</html>

那么我们的页面加载过程中的顺序将会如下图所示（现在的部分浏览器支持异步下载咱不讨论）：

从图中我们可以看到第一个js开始下载到执行然后再到第二个下载执行以此类推，当我们的外链资源比较多时用户打开页面的时候就会白屏，给客户一种不好的感知。由于脚本的下载执行会阻塞页面的加载所以在前期开发工程的优化中，我们一般会这样引入资源文件

<html>
    <link rel="stylesheet" type="text/css" href="styke.css"/>
    <body>
    .....省略页面内容
    <script  type="text/javascript" src="file1.js"/>
    <script  type="text/javascript" src="file2.js"/>
    <script  type="text/javascript" src="file3.js"/>
    </body>
</html>

但是在以往的项目开发过程中，我们经常会引入很多个外链js文件来让页面交互性更强，所以很早以前我们主要是这么做： 1：减少http请求次数 将多个js文件压缩合并成一个js文件下载 2：减少外链js文件的引用 3：根据页面需求逐步加载所需的js文件（ps：部分浏览器可以通过defer属性来延迟加载本文主要从动态脚本方式来回顾知识）

那么在以往的开发中我们是怎么延迟逐步加载脚本文件的呢？ 我们都知道在页面在加载过程中遇到script标签时会停下加载标签中的内容所以我们可以考虑以下代码：

<!---->
scriptSrc 文件的资源路径 onloadedCallBack 加载文件完毕之后的回调
function dymicLoadScript(scriptSrc,onloadedCallback){
    var script = document.createElement("script");
    script.type = "text/javascript";
    <!---->兼容IE
    if(script.readyState){
        script.onreadystatechange = function(){
            if(script.readystate=="loaded" || script=="complete"){
                <!---->回收监听函数
                script.onreadystatechange=null;
                onloadedCallback();
            }
        }
    }else{
        script.onload = function(){
            callback()
        }
    }
    script1.src="file1.js;
    document.getElementBytagName("head")[0].append(script1)
}
<!--这样我们就可以简便的动态加载页面所需的js文件-->
 dymicLoadScript(file1.js,function(){
     console.log("----")
 })

在此之外我们还可以使用XMLHttpRequest对象来无阻赛加载我们的js代码，简单代码如下

<!---->
scriptSrc 文件的资源路径 onloadedCallBack 加载文件完毕之后的回调
function dymicLoadScript(scriptSrc,onloadedCallback){
    var xhr = new XMLHttpRequest();
    <!---->异步方式加载js文件
    xhr.open("get",scriptSrc,true):
    xhr.onreadyStatechange=function(){
        if(xhr.readyState==4 && (xhr.status>=200 && xhr.status<300 || xhr.status == 304) ){
               var script = document.createElement("script");
                script.type = "text/javascript"; 
                script.text = xhr.responseText;
                ....回调函数同上类似省略...
                document.body.appendChild(script);
                
        }
    }
    
}
<!--这样我们就可以简便的动态加载页面所需的js文件-->
 dymicLoadScript(file1.js,function(){
     console.log("----")
 })

然后这就是在很早开发过程中经常使用的页面性能优化所用到的知识，下一篇聊聊重绘和回流。记录一下。

avatar
文章
阅读
粉丝