網站性能分析（下）-讓網站並行加載但順序執行JS

如果網站不支持JavaScript，復雜的功能將無法正常工作。在開發當中通常有幾個腳本會寫在HTML文件的頭部。你嵌入的越多，網站的速度潛在的變得越慢。因此提高並行加載速度變得非常有必要，在前面的文章當中我已經提供了2種提高網站響應速度的方法，今天分享第三種方法，讓讓網站並行加載但順序執行JS

你是否也在尋找

經驗分享-延緩執行 JavaScript 提升網頁加載速度
使用jquery動態加載javascript以減少服務器壓力
web開發經驗推薦-新網站項目中的8個有用片段

在這種情況下我們可以使用Head.js來解決這樣的事情，head.js是一個JavaScript調用自身的腳本。他能夠並行加載JS，但是執行的時候卻按順序執行，來提高網站速度

如何嵌入和使用Head.js

HTML文件的頭部。嵌入head.js配置變量head_conf的必需的一些特殊功能，你可以設置幾個選項：

<script>
  var head_conf = { ... }
</script>
 
<script src="/js/head.min.js"></script>

在head.js當中一次性加載多個JavaScript

Head.js的主要功能是同一時間並行加載多個腳本。相反的，你不必單獨提取每個腳本，Head.js工作流程如下：

head.js("file1.js", "file2.js", "file3.js");

雖然上面的腳本文件是排序寫下來的，Head.js並不是先加載在前的，然后緊接着加載第二個，他是並行加載的然后順序執行。這個很容易可以想象，這樣加載的好處是樣式表和圖片的加載速度更快，使得確保整個頁面感覺要快得多。

對瀏覽器的CSS功能

特別提出的是head.JS對CSS3支持也是沒有問題的，因為不是所有的瀏覽器中都支持原生標准的。Head.js帶有各個瀏覽器的樣式特殊的類的定義：

.webkit p {
  color: red;
}

上面的例子在Webkit的瀏覽器所有p標記為紅色。你可以明確地定義瀏覽器支持特定的CSS3屬性或您的瀏覽器不支持某些屬性：

.borderimage div {
  border-image: url("border.png") 25% repeat;
}
 
-no-borderimage div {
  border: 1px solid green;
}

在這個例子中，我們定義的iv元素在支持border的瀏覽器當中定義一個類，在不支持border的瀏覽器當中定義另外一個類來區分顯示

 

如何使用Head.js讓CSS3在不同的瀏覽器上面顯示不同分辨率

Head.js的另一個特點是可以定義樣式表對應不同的分辨率，下面的例子：

.lt-1024 p {
  font-size: 10px;
}

如果分辨率是1024以下的像素，字體大小被設置為10點。head_conf當中設置：

var head_conf = { screens: [800, 1024] };

對舊版本的IE瀏覽器中的HTML5支持

舊版本的瀏覽器  - 忽略HTML5元素的支持，但是Head.js可以確保即使是舊的瀏覽器當中這些元素也能正確加載。

下載head.js

本文鏈接：網站性能分析（下）-讓網站並行加載但順序執行JS

 更多詳情閱讀：網站性能分析（下）-讓網站並行加載但順序執行JS

 

123