《高性能JavaScript》第一章加载和执行

最新推荐文章于 2024-08-09 20:47:31 发布

Python之眼

最新推荐文章于 2024-08-09 20:47:31 发布

阅读量98

点赞数

分类专栏： JavaScript 文章标签：程序员 JavaScript 新手入门

本文链接：https://blog.csdn.net/weixin_42625143/article/details/95615870

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1.1 脚本位置

描述

将所有

原因

UI渲染和JavaScript运行共用一个线程，

反例

--------------------------------------------------------------------
注：如果你对python感兴趣，我这有个学习Python基地，里面有很多学习资料，感兴趣的+Q群：895817687
--------------------------------------------------------------------

<html>
    <head>
        <title>脚本位置</title>
        <script type="text/javascript" src="file.js"></script> <!--Bad，不推荐-->
    </head>
    <body>
        <!--其他代码-->
    </body>
</html>

正例

<html>
    <head>
        <title>脚本位置</title>
    </head>
    <body>
        <!--其他代码-->
        <script type="text/javascript" src="file.js"></script> <!--Good，推荐-->
    </body>
</html>

1.2 组织脚本

描述

若需要引用多个

原因

每个

提示：把一段内嵌脚本放在引用外链样式表的标签之后会导致页面阻塞去等待样式表的下载，这样做是为了确保内嵌脚本在执行时能获得最精确的样式信息。因此，建议永远不要把内嵌脚本紧跟在标签后面。

反例

<html>
    <head>
        <title>组织脚本</title>
        <link rel="stylesheet" type="text/css" href="styles.css"></link>
        <script type="text/javascript" src="file.js"></script> <!--Bad，不推荐-->
    </head>
    <body>
        <!--其他代码-->
        <script type="text/javascript" src="file1.js"></script> <!--Bad，不推荐-->
        <script type="text/javascript" src="file2.js"></script> <!--Bad，不推荐-->
    </body>
</html>

正例

<html>
    <head>
        <title>组织脚本</title>
    </head>
    <body>
        <!--其他代码-->
        <script type="text/javascript" src="files.js"></script> <!--Good，推荐-->
    </body>
</html>

1.3 无阻塞的脚本

1.3.1 延迟的脚本

描述

HTML4为

原因

Defer属性指明本元素所含脚本不会修改DOM，因此代码能安全地延迟执行。页面解析到带有defer属性的

注意：HTML5规范中引入了async属性，用于异步加载脚本。async与defer的相同点都是采用并行下载，在下载过程中不会产生阻塞。区别在于执行时机，async加载完成之后自动执行，defer需要等待页面完成后执行。

反例

<html>
    <head>
        <title>延迟的脚本</title>
    </head>
    <body>
        <!--其他代码-->
        <script type="text/javascript" src="file.js"></script> <!--Bad，不推荐-->
    </body>
</html>

正例

<html>
    <head>
        <title>延迟的脚本</title>
    </head>
    <body>
        <!--其他代码-->
        <script type="text/javascript" src="file.js" defer></script> <!--Good，推荐-->
    </body>
</html>

1.3.2 动态脚本元素

描述

使用DOM创建

原因

DOM允许JavaScript创建HTML中的几乎所有内容。

提示：用这种方式创建的

正例

// 用此方法加载file.js文件即可
function loadScript(url,callback){
    var script = 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{ // 其他浏览器
        script.onload = function(){
            callback();
        };
    }
    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
}

1.3.3 XHR脚本注入

描述

使用XML HttpRequest对象获取脚本并注入页面。

原因

通过XHR发送GET请求获取脚本文件，再通过创建动态

优点：1、可以加载JavaScript代码但不立即执行。由于是在

局限：JavaScript文件必须与所有请求页面处于相同的域，这就意味着JavaScript文件不能从CDN下载。因此，大型应用通常不会采用XHR脚本注入技术。

正例

var xhr = new XMLHttpRequest();
xhr.open("get","file.js",true);
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
        if(xhr.status >= 200 || xhr.status < 300 || xhr.status == 304){ // 304表示从缓存中读取
            var script = document.createElement("script");
            script.type = "text/javascript";
            script.text = xhr.responseText;
            document.body.appendChild(script);
        }
    }
}
xhr.send(null);

1.3.4 推荐的无阻塞模式

描述

1、先添加动态加载所需的代码；2、然后加载初始化页面所需的剩下的代码。

原因

因为第一部分代码尽量精简，甚至可能只包含loadScript()函数，它下载执行都很快，所以不会对页面有太多影响。一旦初始化代码就位，就用它来加载剩余的JavaScript。

正例

<html>
    <head>
        <title>推荐的无阻塞模式</title>
    </head>
    <body>
        <!--其他代码-->
        <script type="text/javascript" src="loader.js"></script> <!--提供loadScript方法-->
        <script type="text/javascript">
            loadScript("file.js",function(){
                Application.init();
            };
        </script> <!--Good，推荐-->
    </body>
</html>

Python之眼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《高性能JavaScript》第一章加载和执行

1.1 脚本位置描述将所有原因UI渲染和JavaScript运行共用一个线程，反例--------------------------------------------------------------------注：如果你对python感兴趣，我这有个学习Python基地，里面有很多学习资料，感兴趣的+Q群：895817687---------------------...
复制链接

扫一扫