Javascript加載執行加速

時間 2019-11-10

原文原文鏈接

一：原始狀況
首先你們看看以下的代碼：
javascript

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JsLoad.Default" %>
php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
css
<html xmlns="http://www.w3.org/1999/xhtml">
html
<head id="head">
html5
<title></title>
java
<link href="Styles/Site.css" rel="stylesheet" type="text/css" />
jquery
<script src="jquery/jquery-1.4.1.js" type="text/javascript"></script>
程序員
<script src="js/hello.js" type="text/javascript"></script>
web
<script src="js/world.js" type="text/javascript"></script>
瀏覽器
</head>
<body>
<img src="1.jpg" width="200" height="300" />
</body>
</html>

估計90%的程序員都會把js文件放在head中，可是你們有沒有深究過呢？不少瀏覽器都會使用單一的線程來作「界面UI的更新」和「JS腳本的處理「，
也就是當執行引擎遇到」<script>「的時候，此時頁面的下載和渲染都必須等待<script>執行完畢。那麼對用戶而言就悲哀了，看着鎖住的頁面，
此時用戶極可能就會給你關掉。

從上面的瀑布圖中咱們能夠看出二點：
第一：
            三個js文件並行下載，可是按我上面的理論中js應該是一個接一個的執行。然而在IE8，Firefox3.5和Chrome2都實現了js的並行下載，
         這是至關不錯的，可是他仍是會阻礙一些其餘資源的下載，好比說圖片。
第二：
         圖片1.jpg的下載是在js執行完成後觸發的，這也驗證了上面所說的狀況，阻止了image的加載。

二：第一步優化
   既然js阻止了UI渲染，那麼咱們能夠考慮將js放在</body>前，這樣就可讓<script>前的html完美的呈現，不會讓用戶看到頁面空白等待
而苦惱的狀況，天然就提升了友好性。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JsLoad.Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="head">
<title></title>
<link href="Styles/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<img src="1.jpg" width="200" height="300" />
<script src="jquery/jquery-1.4.1.js" type="text/javascript"></script>
<script src="js/hello.js" type="text/javascript"></script>
<script src="js/world.js" type="text/javascript"></script>
</body>
</html>

下面的圖也展現了1.jpg和三個js幾乎並行下載和執行。時間由上面的「469ms+」縮小到「326ms」。

三：第二步優化
看上面的「瀑布圖」，估計你們也看出來了，三個js文件進行了三次「Get」請求，你們都知道Get請求是須要帶http頭的，
因此說須要耗費時間，那麼咱們採起的方案天然就是減小Get請求。一般有兩種方案。
第一：合併js文件，好比將上面的「hello.js"和「world.js「合併掉。
第二：利用第三方工具，好比php中的Minify。

關於第二種作法，taobao用的仍是比較多的，看一下其中的一個script，應用了三個js文件。由3個Get請求變爲了1個。

四：第三步優化
無論是把js文件放在腳尾，仍是三個合併一個，其本質都是」阻塞模式「，就是說鎖死瀏覽器，當web頁面愈來愈複雜，js文件愈來愈多，仍是
讓咱們頭疼的，此時咱們就提倡一種「無阻塞模式「加載js腳本，也就是頁面所有呈現完再追加js，也就對應着window.onload事件觸發後，咱們才
追加js，這就是所謂的「無阻塞「，可是其中有一個很是要注意的地方就是咱們對js的要求是否有嚴格的順序。

第一：無順序要求，好比我對」hello.js「和」world.js"沒有順序要求，那麼咱們徹底能夠用jquery來動態追加實現。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JsLoad.Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="head">
<title></title>
<link href="Styles/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<img src="1.jpg" width="200" height="300" />
<script src="jquery/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function () {
$("#head").append("<script src='js/hello.js' type='text/javascript'><\/script>")
$("#head").append("<script src='js/world.js' type='text/javascript'><\/script>");
}
</script>
</body>
</html>

從圖中能夠看出，"hello.js"和「world.js"出如今藍色線之後，也就說明這兩個js是在DomContentLoad結束後再進行觸發加載的，這樣就不會形成頁面的鎖定
等待。

第二：有順序要求
爲何必定要有順序要求這個概念呢？對於上面的那個動態追加的「兩個js」文件，在IE系列中，你不能保證hello.js必定會在world.js前執行，
他只會按照服務器端返回的順序執行代碼。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JsLoad.Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="head">
<title></title>
<link href="Styles/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<img src="1.jpg" width="200" height="300" />
<script type="text/javascript">
function loadScript(url, callback) {
var script = document.createElement("script");
script.type = "text/javascript";
//IE
if (script.readyState) {
script.onreadystatechange = function () {
if (script.readyState == "loaded" || script.readyState == "complete") {
script.onreadystatechange = null;
callback();
}
}
} else {
//非IE
script.onload = function () {
callback();
}
}
script.src = url;
document.getElementById("head").appendChild(script);
}
//第一步加載jquery類庫
loadScript("jquery/jquery-1.4.1.js", function () {
//第二步加載hello.js
loadScript("js/hello.js", function () {
//第三步加載world.js
loadScript("js/world.js", function () {
});
});
});
</script>
</body>
</html>

你們也能看到，頁面徹底Load的時間其實也就310ms左右，大大提升了網頁的下載呈現和友好型。

一樣也能夠看看騰訊網，他也是這麼幹的。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。