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

你是否也在尋找

經(jīng)驗分享-延緩執(zhí)行 JavaScript 提升網(wǎng)頁加載速度

web開發(fā)經(jīng)驗推薦-新網(wǎng)站項目中的8個有用片段

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

如何嵌入和使用Head.js

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

1 <script> 2 var head_conf = { ... } 3 </script> 4 5 <script src="/js/head.min.js"></script>

在head.js當(dāng)中一次性加載多個JavaScript

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

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

雖然上面的腳本文件是排序?qū)懴聛淼?#xff0c;Head.js并不是先加載在前的，然后緊接著加載第二個，他是并行加載的然后順序執(zhí)行。這個很容易可以想象，這樣加載的好處是樣式表和圖片的加載速度更快，使得確保整個頁面感覺要快得多。

對瀏覽器的CSS功能

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

.webkit p {color: red; }

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

1 .borderimage div { 2 border-image: url("border.png") 25% repeat; 3 } 4 5 -no-borderimage div { 6 border: 1px solid green; 7 }

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

?

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

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

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

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

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

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

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

下載head.js

本文鏈接：網(wǎng)站性能分析（下）-讓網(wǎng)站并行加載但順序執(zhí)行JS

?更多詳情閱讀：網(wǎng)站性能分析（下）-讓網(wǎng)站并行加載但順序執(zhí)行JS

?

123

轉(zhuǎn)載于:https://www.cnblogs.com/58top/archive/2012/11/14/javascript-turbo-head-js-speeds-up-your-website.html

《新程序員》：云原生和全面數(shù)字化實踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的网站性能分析（下）-让网站并行加载但顺序执行JS的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。