Typekit ::異步加載是值得的，或者最好不要使用它？

Question

試圖讓頁面加載時間縮短。

我跟着第三個例子概述了here來異步加載TypeKit的javascript。

爲了使它工作，您必須爲使用該字體的每個元素添加.wf-loading #some-element {visibility: hidden;}，並且在1）加載後或2）在設置的時間（1秒）之後，字體變爲可見。

事情是，我正在使用的CSS具有分配給大約200個元素的字體，所以這200個元素.wf-loading{ }（注意：我沒有寫這個CSS）。

我覺得這會減慢加載時間，而不僅僅是讓它定期加載，DOM遍歷那些東西。如果是這種情況，我會完全打開Typekit並使用常規字體。

是否有任何工具可用於對此類內容執行性能測試？或者有人測試過這些東西嗎？

Answer 1

你實際上並沒有用這種方法修改多個DOM元素（根）。這意味着我們的現代瀏覽器將依靠它們的快速CSS引擎，因此涉及的元素數量對頁面加載沒有明顯的影響。

就頁面加載和閃爍而言，網絡延遲通常比DOM操作差一個數量級。在瀏覽器等待字體下載時，第一個（非底稿）頁面加載總會有一些閃爍。只要確保您的字體被緩存以供重用，並儘量保持它的文件大小盡可能小。

幾年前我跟着Cufon走了這條路。最後，我選擇了性能可以接受的最簡單的路線，並在那裏停了下來。很容易陷入優化頁面加載，但可能有更多有希望的改進領域 - 功能，錯誤，重構等。

Answer 2

問題是，正如他們在blog中提到的那樣，罕見的場合（但它絕對確實發生了 - 對我來說肯定不止一次），當Typekit CDN完全失敗時，用戶只能看到一個空白頁面。這是你希望你使用異步加載的時候。