資訊專欄INFORMATION COLUMN
摘要：載入流程被限制在兩個(gè)階段根據(jù)上面的模式，內(nèi)嵌透過(guò)隱藏尚未套用樣式的內(nèi)容，然後非同步得載入之後呈現(xiàn)內(nèi)容。樣式表本身的載入機(jī)制是平行的，但是套用樣式卻是要照順序的。我們需要一點(diǎn)小技巧來(lái)避免。
這週閱讀到這篇有意思的文章，於是便動(dòng)手寫下簡(jiǎn)單的翻譯，如果有理解錯(cuò)誤的地方歡迎指教。
Chrome 正在試圖改變當(dāng) 寫在 的行為，從blink-dev 的文章並不能很清楚的知道其優(yōu)點(diǎn)。所以這篇文章想要深入的介紹這點(diǎn)。
目前的 CSS 載入機(jī)制blink 是 Chrome 和 Opera 渲染引擎，而 blink-dev 是其開發(fā)社群
…content…
當(dāng) CSS 段落在渲染時(shí)，會(huì)讓使用者瞪著白白的頁(yè)面直到 all-of-my-styles.css 完全下載完畢。
通常我們會(huì)把站內(nèi)所有的 CSS 封裝成較少，可能只有一兩個(gè)資源檔，但這同時(shí)也意味著使用者需要下載大量的樣式設(shè)定(CSS Rules)卻沒(méi)有在該頁(yè)面使用。因?yàn)橐粋€(gè)網(wǎng)站包含著各種不同的頁(yè)面與元件，而這些東西需要套用不同的樣式規(guī)則，如果因此分拆成許多檔案而產(chǎn)生大量的請(qǐng)求 request 這在 HTTP/1 是非常耗效能的。
不過(guò)在 SPDY 和 HTTP/2 卻不是這樣，傳輸許多分散的小資源只會(huì)增加一點(diǎn)點(diǎn)的開銷，並且這些東西可以個(gè)別暫存(cached)。
content
這樣一來(lái)就解決了許多問(wèn)題，我們可以拆成很多小檔案?jìng)€(gè)別載入，不過(guò)也意味著當(dāng)我們?cè)? 下 時(shí)，得要知道這些頁(yè)面各自需要哪些資源。
另外，瀏覽器在開始輸出之前，仍然得下載所有的 CSS。如果出現(xiàn)一個(gè)下載比較慢的 CSS 例如 /site-footer.css 將會(huì)造成渲染的東西延遲。請(qǐng)觀察範(fàn)例。
上面程式碼，我們有一些內(nèi)嵌的樣式(inline style)來(lái)讓我們可以快速的渲染初始化的樣式，接著把那些還沒(méi)取得樣式的部分隱藏起來(lái)，然後開始透過(guò) Javascript 非同步下載剩餘的樣式。這些剩餘的 CSS會(huì)覆寫掉在 .main-article 和其他選擇器內(nèi)的 display: none。
這種第一次先快速的初始化渲染，然後持續(xù)匯入的方法是許多效能專家所推薦的。
為 CSS 傳送進(jìn)行最佳化處理
How we make RWD sites load fast as heck
Optimizing the Critical Rendering Path
看看範(fàn)例
原作者實(shí)作了wiki-offline並將狀況紀(jì)錄如下圖
上面這張圖片是在 3G 的環(huán)境下測(cè)試。不過(guò)這樣的方法還是有些不足的地方:
需要一個(gè)輕量的 Javascript 函式庫(kù)不幸的，因?yàn)?WebKit 的實(shí)作。當(dāng) 一被加到頁(yè)面時(shí)，WebKit 會(huì)阻塞渲染(render)，直到樣式都被載入，即使這個(gè)樣式是透過(guò) Javascript 加入的。
在 Firefox 和 IE/Edge，透過(guò) JS 加入的樣式完全是非同步載入。Chrome 當(dāng)前穩(wěn)定版本然仍是遵循 WebKit 的行為，不過(guò)在 Canary 已經(jīng)跟 Firefox/Edge 一樣了。
載入流程被限制在兩個(gè)階段(Inline css and A css file)根據(jù)上面的模式，內(nèi)嵌 CSS(inline CSS) 透過(guò) display: none 隱藏尚未套用樣式的內(nèi)容，然後非同步得載入 CSS 之後呈現(xiàn)內(nèi)容。如果您需要增加多個(gè) CSS 檔案那麼結(jié)果可能就是內(nèi)容不按順序出現(xiàn)
檢視範(fàn)例
如果內(nèi)容還在異動(dòng)的過(guò)程結(jié)果周圍的廣告就先出現(xiàn)這通常會(huì)讓使用者覺得不開心就關(guān)閉你的網(wǎng)站了。
因此被限制在只有兩個(gè)載入階段，你必須要決定哪些是第一次渲染時(shí)就要出現(xiàn)，哪些是比較晚的。當(dāng)然，你希望上方的區(qū)塊越快顯示越好，不過(guò)所謂"上方的區(qū)塊"取決於 viewport 可視區(qū)域的大小。最後你可能決定定義一個(gè)尺寸範(fàn)圍套用在所有人身上。
如果你想讓事情更加複雜，當(dāng)然你可以選擇客製 CSS 相依屬性來(lái)建立 CSS 之間渲染的相依性
更簡(jiǎn)單，更好的方式… … … …
這個(gè)概念是透過(guò)每一個(gè) 在其下載樣式時(shí)去阻塞跟在後面的內(nèi)容，但允許前面的內(nèi)容先開始渲染。樣式表(CSS)本身的載入機(jī)制是平行的，但是套用樣式卻是要照順序的。這讓 的行為類似為
這個(gè)標(biāo)籤不能完全沒(méi)有內(nèi)容，所以我們需要留一個(gè)"空白"。
實(shí)際執(zhí)行的結(jié)果查閱範(fàn)例
Firefox 和 Edge/IE 將會(huì)循序的載入輸出，而 Chrome 和 Safari 則是先看到空白的頁(yè)面一陣子直到 CSS 全部載完。目前 Chrome/Safari 的行為比起把樣式連結(jié)放在 也沒(méi)有差到哪去，所以現(xiàn)在就可以開始使用這個(gè)方式，很快的 Chrome 將會(huì)往 Edge 的機(jī)制修正，這麼一來(lái)渲染會(huì)更加迅速。
以上就是一個(gè)簡(jiǎn)單的技巧協(xié)助我們加快速度並逐步載入 CSS
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115060.html
摘要：現(xiàn)在，我們可以開始探討介面的設(shè)計(jì)模式了。匯出命名空間一個(gè)簡(jiǎn)單且常用的設(shè)計(jì)模式就是匯出一個(gè)包含數(shù)個(gè)屬性的物件，這些屬性具體的內(nèi)容主要是函式，但並不限於函式。如此，我們就能夠透過(guò)匯入該模組來(lái)取得這個(gè)命名空間下一系列相關(guān)的功能。 前言 這篇文章試著要整理，翻譯Export This: Interface Design Patterns for Node.js Modules這篇非常值得一讀的...
摘要：的架構(gòu)設(shè)計(jì)促使第三方開發(fā)者讓核心發(fā)揮出無(wú)限的潛力。當(dāng)然建置比起開發(fā)是較進(jìn)階的議題，因?yàn)槲覀儽仨氁斫鈨?nèi)部的一些事件。這個(gè)編譯結(jié)果包含的訊息包含模組的狀態(tài)，編譯後的資源檔，發(fā)生異動(dòng)的檔案，被觀察的相依套件等。 本文將對(duì) webpack 周邊的 middleware 與 plugin 套件等作些介紹，若您對(duì)於 webpack 還不了解可以參考這篇彙整的翻譯。 webpack dev ser...
摘要：目錄許多開發(fā)者會(huì)把的目錄命名為但這並不強(qiáng)迫。所有的檔案都會(huì)使用從被編譯成。同時(shí)有個(gè)小小的重點(diǎn)那就是我們可已觀察編譯後的檔案大小。在專案目錄下執(zhí)行可以觀察截至目前為止的結(jié)果。我們的目標(biāo)是要把編譯封裝到我們的中。 在今時(shí)今日，webpack 已經(jīng)成為前端開發(fā)非常重要的工具之一。本質(zhì)上它是一個(gè) Javascript 模組封裝工具，但透過(guò) loaders 和 plugins 它也可以轉(zhuǎn)換封裝其...
摘要：接下來(lái)我們將會(huì)更具體的說(shuō)明是什麼東西和這傢伙會(huì)怎麼解決這些問(wèn)題，並且列出目前開發(fā)中一些令人興奮的功能。這個(gè)功能甚至還沒(méi)有一個(gè)瀏覽器支援。完整的清單請(qǐng)查閱目前還未被寫入規(guī)範(fàn)，意思是這邊提到任何內(nèi)容極有可能會(huì)改變。 譯者：其實(shí)...我想說(shuō)這可能是最令我感到興奮..但又害怕頭痛的功能... 附上原文連結(jié) 你曾經(jīng)想要使用某個(gè) CSS 的新功能，但是最後卻因?yàn)檫@個(gè)功能瀏覽器還未全面支援而放棄了嗎...
摘要：確切位置因平臺(tái)而異。如果以編程方式使用，這個(gè)頁(yè)面也是一個(gè)強(qiáng)大的調(diào)試工具，能看到所有原始的協(xié)議命令通過(guò)連線，於瀏覽器進(jìn)行通信。警告協(xié)議可以做很多有趣的事，但作為入門選項(xiàng)他令人沮喪。目前，提供了比協(xié)議高級(jí)別的。 本文翻譯自：Getting Started with Headless Chrome原文更新時(shí)間：July 28,2017作者：Eric Bidelman（Engineer @ G...
閱讀 1978·2021-11-23 09:51
閱讀 889·2021-11-19 09:40
閱讀 838·2021-10-27 14:20
閱讀 5033·2021-10-09 09:52
閱讀 3309·2021-10-09 09:44
閱讀 1739·2021-10-08 10:05
閱讀 5109·2021-09-09 11:47
閱讀 3488·2019-08-30 12:47
