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

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

css的全稱是什么

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

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

 

上圖中，請求 HTML 數(shù)據(jù)和構(gòu)建 DOM 中間有一段空閑時間，這段時間可能成為頁面渲染的瓶頸。DOM 構(gòu)建結(jié)束后，css 文件還未下載完成這段時間內(nèi)，渲染流水線一直在等待，因?yàn)橄乱徊绞呛铣刹季謽洹：铣刹季謽湫枰?CSSOM 和 DOM，所以需要等待 CSS 加載結(jié)束并解析為 CSSOM。這種情況下，CSS 沒有阻塞 DOM 的生成。

CSSOM 的作用

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

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

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

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

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

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

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

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

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

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

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

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

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

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

優(yōu)化策略

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

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

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

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

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

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

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

廣告

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