JavaScript基础教程高性能JavaScript-职坐标

JavaScript基础教程高性能JavaScript

沉沙 2018-10-31 来源：阅读 916 评论 0

摘要：本篇教程介绍了JavaScript基础教程高性能JavaScript，希望阅读本篇文章以后大家有所收获，帮助大家对JavaScript的理解更加深入。

本篇教程介绍了JavaScript基础教程高性能JavaScript，希望阅读本篇文章以后大家有所收获，帮助大家对JavaScript的理解更加深入。

当 JavaScript 运行时其他的事情不能被浏览器处理

页面生命周期

<script>标签的出现使整个页面的下载和解析因脚本解析、运行而出现等待，即无论javascript代码是如何引入的

<html>
<head>
    <title>Script Example</title>
</head>
<body>
<p>
    <script type="text/javascript">
        document.write("The date is " + (new Date()).toDateString());
    </script>
</p>
<div> 　　<script src="1.js"></script> </div>
</body>
</html>

分析：浏览器解析页面  =>  遇到p  =>  浏览器停下来，运行js代码  =>  浏览器继续解析div  => 遇到js 、 src属性下载js  、运行js代码

在下载解析和运行js代码的过程中、页面解析和用户交互是被完全阻塞的。

<html>
<head>
    <title>Script Example</title>
    <-- Example of inefficient script positioning -->
    <script type="text/javascript" src="file1.js"></script>
    <script type="text/javascript" src="file2.js"></script>
    <script type="text/javascript" src="file3.js"></script>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p>Hello world!</p></body>
</html>

浏览器在遇到<body>标签之前,不会渲染页面的任何部分 ,
图解：原先的浏览器不支持并行下载js文件

虽然ie8以上的较先的浏览器支持并行下载，即一个<script>标签不必阻塞<script>标签，但是JavaScript 的下载仍然要阻塞其他资源的下载过程,例如图片。并且同样需要所有的js代码下载执行完毕以后才会继续解析页面

改进一：将脚本放在底部。这样就可以在下载执行解析js代码之前就可以让页面显示传在用户面前

<html>
<head>
    <title>Script Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p>Hello world!</p>
<-- Example of recommended script positioning -->
<script type="text/javascript" src="file1.js"></script>
<script type="text/javascript" src="file2.js"></script>
<script type="text/javascript" src="file3.js"></script>
</body>
</html>

HTTP请求：下载一个100k的文件比下载四个25k的文件要快，YUI库的联合句柄

<html>
<head>
    <title>Script Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p>Hello world!</p>
<-- Example of recommended script positioning -->
<script type="text/javascript" src="//yui.yahooapis.com/combo?2.7.0/build/yahoo/yahoo-min.js&2.7.0/build/event/event-min.js"></script>
</body>
</html>

非阻塞方式一：

尽管下载一个大 JavaScript 文件只产生一次 HTTP 请求,却会锁定浏览器一大段时间。

非阻塞脚本的秘密在于,等页面完成加载之后,再加载 JavaScript 源码。从技术角度讲,这意味着在 window 的 load 事件发出之后开始下载代码。有几种方法可以实现这种效果。
指定defer属性的<script>立即启动下载，但是代码不会立即执行，直到dom 加载完毕

<html>
<head>
    <title>Script Defer Example</title>
</head>
<body>
<script defer>
    alert("defer");
</script>
<script>
    alert("script");
</script>
<script>
    window.onload = function () {
        alert("load");
    };
</script>
</body>
</html>

支持defer的浏览器输出的顺序： “script”,“defer”和“load”。

不支持defer的浏览器的输出顺序：“defer”,“script”和“load”

动态脚本元素（即使用dom的方法创建script）

    var script = document.createElement ("script");
    script.type = "text/javascript";
    script.src = "file1.js";
    document.getElementsByTagName("head")[0].appendChild(script);

技术的重点在于: 无论在何处启动下载,文件的下载和运行都不会阻塞其他页面处理过程。
ff/opera/chrome的load事件：

    var script = document.createElement("script");
    script.type = "text/javascript";
    //Firefox, Opera, Chrome, Safari 3+
    script.onload = function () {
        alert("Script loaded!");
    };
    script.src = "file1.js";
    document.getElementsByTagName_r("head")[0].appendChild(script);

ie中readystatechange事件状态：（5种取值）：
略
兼容版本：

    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 { //Others
            script.onload = function () {
                callback();
            };
        }
        script.src = url;
        document.getElementsByTagName_r("head")[0].appendChild(script);
    }

但要注意,浏览器不保证文件加载的顺序，但是你可以使用下面的方式保证按序加载：

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

如果多个文件的次序十分重要，最好的办法还是将这些文件按照正确的次序合并成一个文件

非阻塞方式二：XHR 脚本注入

    var xhr = new XMLHttpRequest();
    xhr.open("get", "file1.js", true);
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if (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);
            }
        }
    };
    xhr.send(null);

两个优点：
1、你可以下载不立即执行的 JavaScript 代码。由于代码返回在<script>标签之外(换句话说不受<script>标签约束),它下载后不会自动执行,这使得你可以推迟执行,直到一切都准备好了。
2、同样的代码在所有现代浏览器中都不会引发异常。

此方法最主要的限制是:JavaScript 文件必须与页面放置在同一个域内。

推荐的非阻塞模式：
第一种方式：包含动态加载 JavaScript 所需的代码（如loadScript）, 然后加载页面初始化所需的除 JavaScript 之外的部分。例如:

<script type = "text/javascript" src = "loader.js" ></script>
<script type="text/javascript">
    loadScript("the-rest.js", function () {
        Application.init();
    });
</script>

将此代码放置在 body 的关闭标签</body>之前。这样做有几点好处:
首先,确保 JavaScript 运行不会影响页面其他部分显示。
其次,避免使用额外的事件处理(例如 window.onload) 来得知页面是否已经准备好了。
第二种方式：