本文展示了一種技術(shù)，它能通過異步下載樣式表，以阻止它們的下載阻塞頁面的渲染，從而盡可能快的讓訪問者獲取到信息內(nèi)容。

警告! 我發(fā)這篇帖子全是好意，但是它并不負責讓讀它的人意識到下面將會遇到的問題. 社區(qū)很快地給了我許多的反饋 (有些反饋我很感激) ，而越來越明顯的是這項技術(shù)并不如我所希望的那樣穩(wěn)定. 不像我那樣的成功地對它進行了測試和利用，許多開發(fā)者在 IE 和 Firefox 中都遇到了問題( F F測試版中直接崩潰) 而其他人則報告在 Chrome 和 Safari 中是成功的。我現(xiàn)在的建議是: 不要將其用于產(chǎn)品。我計劃處理好這些反饋，并結(jié)合任何有關(guān)的信息對本文進行更新。

這些技術(shù)背后的原理不是新的。例如燈絲（Filament）技術(shù)組已經(jīng)發(fā)布了大量有關(guān) 加載CSS 和字體的內(nèi)容. 我寫就本文以記錄我對加載非阻塞資源的想法和觀點。

觸發(fā)異步樣式下載的訣竅是使用一個 <link> 元素，并 為media 屬性設(shè)置一個不可用的值 (我用的是 media="none", 不過其它的任何值也是可以的)。當一個媒體查詢的結(jié)果值計算出來是 false 的時候，瀏覽器仍然會下載樣式表，但是不會在渲染頁面之前等待樣式表的資源可用。
 

發(fā)表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發(fā)表