資訊專欄INFORMATION COLUMN
摘要：二目前最先進(jìn)的加載方法在上面的代碼中，通過一些內(nèi)聯(lián)樣式我們可以加速初始渲染，同時隱藏起還沒有加載完樣式的組件，并通過異步地完成加載。
Chrome 瀏覽器有意改變的加載方式，當(dāng)其出現(xiàn)在中時，這一變化將更加明顯。筆者決定在本文中進(jìn)行詳細(xì)說明這種改變可能帶來影響與好處。
…content…
CSS 會阻礙渲染，因此在all-of-my-styles.css全部加載完之前，用戶就只能面對一片空白的屏幕。
通常，我們將某個站點(diǎn)的所有 CSS 樣式合并為一到兩個資源，這意味著用戶會下載一堆當(dāng)前頁面根本就用不上的規(guī)則。這是因?yàn)榫W(wǎng)站可能包含許多不同類型的頁面，每個頁面都有自己的「組件」；而在組件級別傳遞 CSS 的話，會降低 HTTP/1 的性能。
然而，對 SPDY 和 HTTP/2 來說，事實(shí)卻并非如此。在這些協(xié)議中，許多小資源只需要很小的代價就能完成遞送，并且被獨(dú)立緩存。
…content…
這樣一來就解決了冗余問題，但也意味著你需要知道輸出時頁面將包含的內(nèi)容，從而防止 streaming。與此同時，瀏覽器還是只能等待所有 CSS 樣式加載完畢，才能開始渲染。如果加載 /site-footer.css的速度不夠快，就會耽誤所有頁面的渲染。
在上面的代碼中，通過一些內(nèi)聯(lián)樣式我們可以加速初始渲染，同時隱藏起還沒有加載完樣式的組件，并通過 JavaScript 異步地完成加載。剩余的 CSS 加載完后會重寫.main-article中的display:none。
這個方法受到性能專家的推崇,他們認(rèn)為這是快速完成初始渲染的好方法，并且經(jīng)過實(shí)地測量確實(shí)在加載的時候快了不少。
但也存在一些不足之處。。。。。。
「1.它需要一個（小的）JavaScript 庫」
這是由 WebKit 的實(shí)現(xiàn)方式造成的。一旦頁面中添加了，即使樣式表是由 JavaScript 加載的，WebKit 還是會在加載完成之前阻礙渲染。
在 Firefox 和 IE/Edge 瀏覽器中，通過 JS 加載樣式表是完全異步進(jìn)行的。穩(wěn)定版本的 Chrome 瀏覽器是通過 WebKit 的方式加載的，但在 Canary 版本中，仍然是使用 Firefox/Edge 加載方式。
「2.必須經(jīng)歷兩個加載階段」
在上述模式中，內(nèi)聯(lián)的 CSS 通過display:none隱藏了沒有加載完樣式的內(nèi)容，直到異步加載完剩余的 CSS 樣式。如果你將這些樣式分派到兩個或多個 CSS 文件中，這些文件有可能不按照順序加載，導(dǎo)致加載過程中出現(xiàn)內(nèi)容錯亂：
內(nèi)容錯亂，就好比彈出廣告一樣，會導(dǎo)致用戶體驗(yàn)挫敗，必須全力消滅。
既然有兩個加載階段，你就必須決定渲染的先后順序。你當(dāng)然會想首先渲染「位置顯要」的內(nèi)容。但是，所謂的「位置」是根據(jù)窗口大小來決定的。因此，問題來了，你得找出一把「萬能」鑰匙。
… … … …
計(jì)劃是這樣的：針對每個，加載樣式表時我們阻止渲染它的后續(xù)內(nèi)容，但是允許渲染它之前的內(nèi)容。樣式表是并行加載的，但是按照一定的順序顯示。這使得的效用與相近。
假設(shè)網(wǎng)站 header、正文和 footer 的 CSS 已經(jīng)加載完畢，但其余內(nèi)容仍在等待，那么頁面會是這樣的：
Header：已渲染
正文：已渲染
評論部分：未渲染，它前面的 CSS 還未被加載（/comment.css）。
關(guān)于本站：未渲染。它前面的 CSS 還未被加載（/comment.css）。
Footer：未渲染。盡管它本身的 CSS 已加載完成，但它前面的 CSS 還未被加載（/comment.css）。
這是一個按順序渲染的頁面。你不需要決定哪部分內(nèi)容在「顯要位置」，只要在頁面組件第一次實(shí)例化之前引入該組件的 CSS 即可。它完全兼容 Streaming，因?yàn)槌悄阈枰?，否則不必要輸出。
當(dāng)使用內(nèi)容決定布局的布局系統(tǒng)時（例如表格和 flexbox），要注意避免加載時出現(xiàn)內(nèi)容錯位。這不是什么新問題了，但是分步渲染會使得它出現(xiàn)得更為頻繁。你可以通過 hack flexbox 來解決，但對整體頁面布局來說，使用 CSS grid 工具效果更佳（不過對小一些的組件來說，flexbox 還是很棒的）。
HTML 規(guī)范并沒有規(guī)定 CSS 應(yīng)當(dāng)怎樣阻止頁面渲染，它不鼓勵在 body 中使用，但是所有的瀏覽器都允許使用。當(dāng)然了，瀏覽器們在處理 body 中的 link 時都有自己的方法：
Chrome和Safari：一旦發(fā)現(xiàn) 就停止渲染，并且在已發(fā)現(xiàn)的樣式表全部完成加載之前不會開始渲染。這會導(dǎo)致 前未被渲染的內(nèi)容也被阻塞。
Firefox： head中的會阻塞渲染，直至所有已發(fā)現(xiàn)的樣式表加載完畢，body中的并不阻塞任何渲染，除非某個 head 中的樣式表已經(jīng)阻塞了渲染，這會導(dǎo)致無樣式的內(nèi)容出現(xiàn)閃爍（FOUC）。
IE/Edge： 阻塞解析器直到樣式表加載完畢，但是允許渲染之前的內(nèi)容。
在 Chrome 團(tuán)隊(duì)，我們喜歡 IE/Edge 的方式，所以打算跟它看齊。這就允許上文描述的漸進(jìn)式 CSS 渲染方式。我們正在努力把它變成標(biāo)準(zhǔn)，從允許中的開始。
目前 Chrome/Safari 采用的方式是向下兼容的，帶來的問題是阻塞渲染的時間比實(shí)際需要的長。Firefox 的方式稍微復(fù)雜一些，但有個解決的方法：
「Firefixing！」
因?yàn)?Firefox 并不總是為了中的阻塞渲染，我們得為這個多花點(diǎn)功夫來避免 FOUC。謝天謝地這很容易，因?yàn)?b>
此處的
筆者之前做過前端優(yōu)化的工作，國內(nèi)外的前端性能優(yōu)化工具也使用了不少，現(xiàn)階段可以較好實(shí)現(xiàn)這個定位頁面慢加載因素的工具有：
OneAPM Browser Insight、AppDynamics、Ruxit，大家有興趣的話可以去嘗試下。
注：本文原文作者為 Jake Archibald，由 OneAPM 運(yùn)營人員翻譯整理
原文地址：https://jakearchibald.com/2016/link-in-b...
Browser Insight 是一個基于真實(shí)用戶的 Web 前端性能監(jiān)控平臺，能夠幫大家定位網(wǎng)站性能瓶頸，網(wǎng)站加速效果可視化；支持瀏覽器、微信、App 瀏覽 HTML 和 HTML5 頁面。想閱讀更多技術(shù)文章，請?jiān)L問 OneAPM 官方技術(shù)博客。
本文轉(zhuǎn)自 OneAPM 官方博客
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/115195.html
摘要：可構(gòu)造樣式表是一種使用進(jìn)行創(chuàng)建和分發(fā)可重用樣式的新方法。它甚至可以直接用于瀏覽器解析器直接的接口，無需將他們注入到就可以很輕易的加載樣式表。構(gòu)建一個樣式表與引入一個新不同，可構(gòu)造樣式表規(guī)范使得其可以通過調(diào)用構(gòu)造函數(shù)來強(qiáng)制創(chuàng)建樣式表。 可構(gòu)造樣式表是一種使用Shadow DOM進(jìn)行創(chuàng)建和分發(fā)可重用樣式的新方法。 使用Javascript來創(chuàng)建樣式表是可能的。然而，這個過程在歷史上一直是使...
摘要：但有時候我們希望關(guān)閉輸入框的自動完成功能，例如當(dāng)用戶輸入內(nèi)容的時候，我們希望使用技術(shù)從數(shù)據(jù)庫搜索并列舉而不是在用戶的歷史記錄中搜索。 以下是我整理的一些HTML的基礎(chǔ)面試體，并自己整理了答案。 1 DOCTYPE有什么作用？標(biāo)準(zhǔn)模式與混雜模式如何區(qū)分？它們有何意義? 告訴瀏覽器使用哪個版本的HTML規(guī)范來渲染文檔。DOCTYPE不存在或形式不正確會導(dǎo)致HTML文檔以混雜模式呈現(xiàn)。標(biāo)準(zhǔn)模...
摘要：標(biāo)準(zhǔn)模式的排版和運(yùn)作模式都是以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行。使用之前需要考慮這兩個缺點(diǎn)。數(shù)據(jù)的有效期不同。在設(shè)置的過期時間之前一直有效，即使窗口或者瀏覽器關(guān)閉。僅在瀏覽器窗口關(guān)閉之前有效。 一、HTML常見題目01、Doctype作用？嚴(yán)格模式與混雜模式如何區(qū)分？它們有何意義？02、 HTML5 為什么只需要寫 !DOCTYPE HTML？03、行內(nèi)元素有哪些？塊級元素有哪些？空(voi...
摘要：標(biāo)準(zhǔn)模式的排版和運(yùn)作模式都是以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行。使用之前需要考慮這兩個缺點(diǎn)。數(shù)據(jù)的有效期不同。在設(shè)置的過期時間之前一直有效，即使窗口或者瀏覽器關(guān)閉。僅在瀏覽器窗口關(guān)閉之前有效。 一、HTML常見題目01、Doctype作用？嚴(yán)格模式與混雜模式如何區(qū)分？它們有何意義？02、 HTML5 為什么只需要寫 !DOCTYPE HTML？03、行內(nèi)元素有哪些？塊級元素有哪些？空(voi...
閱讀 2420·2021-10-14 09:43
閱讀 2451·2021-09-09 09:34
閱讀 1611·2019-08-30 12:57
閱讀 1212·2019-08-29 14:16
閱讀 732·2019-08-26 12:13
閱讀 3210·2019-08-26 11:45
閱讀 2296·2019-08-23 16:18
閱讀 2674·2019-08-23 15:27
