javascript - 使用 Modernizr 加載 HTML5 Shiv 的效能

我的網站使用 Modernizr，並且需要搭配 PrintShiv 的 HTML5Shiv。若不使用 Modernizr 來載入這些 shiv，而是透過 IE 條件式載入，是否有任何效能上的好處？顯然使用 Modernizr 會比較整潔，但我專注於效能。

答案＃1

我自己也很好奇，所以我設置了一些測試頁面來看看。

如果您的網站只需要來自 modernizr 的 HTML5Shiv 與 PrintShiv，那麼僅使用 IE 條件載入 html5shiv-printshiv.js 對於其他瀏覽器（IE 9 以下）將比始終載入 modernizr 表現更好。所以在您的情況下，您可能應該停止使用 modernizr，而只在條件中使用 shiv。

對於需要使用 shivs 的 IE 瀏覽器而言，使用 modernizr 與單獨使用 html5shiv 在加載/性能上是相同的。僅使用 html5shiv 的性能提升則是在較新的 IE 瀏覽器（IE9 和 IE10）上可見。

測試頁面：

• 僅限 html5shiv-printshiv: http://jsbin.com/upozar/1
• 自訂 modernizr: http://jsbin.com/erodog/1

使用 IE9/有線的測試報告：

• 僅限 html5shiv-printshiv: http://www.webpagetest.org/result/130131_PG_11S8/
• 自訂 Modernizr：http://www.webpagetest.org/result/130131_JG_11SE/

比較那些測試，完全加載後，我們使用 html5shiv-printshiv.js 節省了 1.677 秒

Modernizr 更新：在 Modernizr 的 GitHub 專案中的一個議題票證中，草擬中的《效能注意事項》文檔可供參考更多細節。

答案＃2

現代化版本的 Modernizr 可以自訂，只包含您需要的功能。如果您擔心效能，這可能是可行的方法。

Modernizr 核心在性能方面並不是非常昂貴；費用主要在於它所進行的所有測試。如果你自定義它，只進行你需要的測試，你將節省大部分負載，但你仍然會有 Modernizr 核心和你所需的部分。