這篇文章將為大家詳細講解有關CSS中影響首次加載時的白屏時間怎么辦，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領域值得信任、有價值的長期合作伙伴，公司提供的服務項目有：域名注冊、虛擬空間、營銷軟件、網(wǎng)站建設、信陽網(wǎng)站維護、網(wǎng)站推廣。

css的全稱是什么

css的全稱是Cascading Style Sheets（層疊樣式表），它是一種用來表現(xiàn)HTML或XML等文件樣式的計算機語言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進行格式化。

含有外部 css 文件的渲染流水線

 

上圖中，請求 HTML 數(shù)據(jù)和構(gòu)建 DOM 中間有一段空閑時間，這段時間可能成為頁面渲染的瓶頸。DOM 構(gòu)建結(jié)束后，css 文件還未下載完成這段時間內(nèi)，渲染流水線一直在等待，因為下一步是合成布局樹。合成布局樹需要 CSSOM 和 DOM，所以需要等待 CSS 加載結(jié)束并解析為 CSSOM。這種情況下，CSS 沒有阻塞 DOM 的生成。

CSSOM 的作用

• 提供給 JS 操作樣式表的能力

• 為布局樹合成提供基礎的樣式信息

含有內(nèi)聯(lián) JS 和 外部 CSS 頁面的渲染流水線

從上圖中可以看到，構(gòu)建 DOM 過程中遇到 JS 會停止構(gòu)建，去解析執(zhí)行 JS，因為 JS 可能會修改當前 DOM。

在執(zhí)行 JS 腳本之前，若頁面中包含外部 css 或內(nèi)聯(lián)的 css，渲染引擎需要將他們提前轉(zhuǎn)為 CSSOM，因為 JS 有修改 CSSOM 的能力，所以在 JS 執(zhí)行前，還要依賴 CSSOM。這意味著 CSS 在部分情況下也會阻塞 DOM 生成。

含有外部 JS 和 CSS 頁面的渲染流水線

請求到的 HTML 數(shù)據(jù)在預解析過程中，檢測到有外部 JS、CSS 文件需要下載，同時發(fā)起兩個文件的下載請求，下載時間不是重疊的，是按照最久的那個來算。

不管 CSS，JS 誰先到達，都要先等到 CSS 文件下載并生成 CSSOM，然后執(zhí)行 JS 腳本，最后構(gòu)建 DOM、布局樹、繪制頁面。

影響頁面展示因素及優(yōu)化策略

從輸入 URL 到頁面首次展示的三階段：

1. 請求發(fā)出去后，到提交數(shù)據(jù)階段，此時頁面展示的還是之前頁面的內(nèi)容。

2. 提交數(shù)據(jù)后，渲染進程會創(chuàng)建一個空白頁面，這段時間稱為解析白屏 ，等待 CSS 和 JS 文件的加載完成，生成 CSSOM 和 DOM，然后合成布局樹、XXX 等步驟準備首次渲染。

3. 首次渲染完成后，就開始進入完整頁面的生成階段，頁面會一點點被繪制出來。

最影響用戶體驗的就是第二階段，包括解析 HTML、下載 CSS、下載 JavaScript、生成布局樹、繪制頁面等操作。

優(yōu)化策略

1. 內(nèi)聯(lián) CSS、JS，等到 HTML 下載好后便可直接開始渲染。

2. 盡量減少文件大小，webpack 移除注釋、壓縮文件。

3. 將一些不需要在解析 HTML 階段使用的 JS 標上 async 或 defer。

4. 對于大的 CSS 文件，可以通過媒體查詢，將其拆分為不同用途的 CSS 文件，只在特定場景下加載。

關于“CSS中影響首次加載時的白屏時間怎么辦”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

網(wǎng)站標題：CSS中影響首次加載時的白屏時間怎么辦-創(chuàng)新互聯(lián)
地址分享：http://chinadenli.net/article46/ddgieg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供微信公眾號、企業(yè)建站、搜索引擎優(yōu)化、網(wǎng)站制作、定制開發(fā)、電子商務

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)