首页 > 代码库 > 高性能javascript

高性能javascript

2024-07-21 07:53:20   224人阅读

当 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="http://www.mamicode.com/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="http://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 = "http://www.mamicode.com/loader.js" ></script><script type="text/javascript">    loadScript("the-rest.js", function () {        Application.init();    });</script>

将此代码放置在 body 的关闭标签</body>之前。这样做有几点好处:

首先,确保 JavaScript 运行不会影响页面其他部分显示。

其次,避免使用额外的事件处理(例如 window.onload) 来得知页面是否已经准备好了。 

第二种方式：

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

高性能javascript


联系
我们