影響頁(yè)面加載速度的因素主要就是資源的大小，以及程序級(jí)服務(wù)器的性能，今天從網(wǎng)頁(yè)的css和js文件來(lái)兩下如何提升網(wǎng)頁(yè)的加載速度。

渲染阻塞

大家在使用SEO診斷工具的時(shí)候，會(huì)發(fā)現(xiàn)如果網(wǎng)站存在多個(gè)js或者css文件的時(shí)候會(huì)降低評(píng)分，會(huì)建議你合并這些文件。但是其實(shí)只對(duì)了部分，并不全對(duì)。

要搞明白這個(gè)原理首先大家需要先了解下網(wǎng)頁(yè)dom樹(shù)的構(gòu)建原理。簡(jiǎn)單的給大家講一下吧，首先瀏覽器解析網(wǎng)頁(yè)的時(shí)候是通過(guò)dom樹(shù)的渲染來(lái)實(shí)現(xiàn)的，而dom的構(gòu)建是一行行代碼逐漸開(kāi)始的。最先構(gòu)建的head標(biāo)簽，然后是body，大多數(shù)站點(diǎn)的會(huì)把網(wǎng)站的js和css文件放在head里。

但是css和js是會(huì)阻塞dom的構(gòu)建，意思就是瀏覽器執(zhí)行到head標(biāo)簽的時(shí)候會(huì)停止網(wǎng)下執(zhí)行，知道js和css文件加載完畢，才會(huì)繼續(xù)。如果這個(gè)時(shí)候js加載失敗或者加載速度慢，會(huì)導(dǎo)致網(wǎng)頁(yè)空白不現(xiàn)實(shí)任何內(nèi)容，相信這種情況大家經(jīng)?？吹桨?。

這個(gè)時(shí)候大聰明來(lái)了把css和網(wǎng)頁(yè)放到網(wǎng)頁(yè)代碼底部，讓它們最后加載就不會(huì)影響前面的dom樹(shù)的構(gòu)建。但是要知道js和css本身就是dom結(jié)構(gòu)的一部分，就算放在尾部如果加載沒(méi)有完成，dom樹(shù)就無(wú)法完成構(gòu)建。

dom樹(shù)構(gòu)建不完成，就不會(huì)開(kāi)始渲染，未開(kāi)始渲染就意味著瀏覽器還是白屏不顯示任何內(nèi)容。

如何解決阻塞

先將js和css下載到本地，千萬(wàn)不要去通過(guò)網(wǎng)絡(luò)調(diào)用外部資源。盡可能合并js和css但是非要強(qiáng)制合并為一個(gè)文件，前后詳細(xì)講。

壓縮js和css文件，優(yōu)化和壓縮資源來(lái)最大限度地減小總下載大小，來(lái)提高網(wǎng)頁(yè)加載速度。開(kāi)發(fā)者可以考慮通過(guò)簡(jiǎn)化編碼來(lái)優(yōu)化主文檔大小，同時(shí)可以采用chunk編碼，服務(wù)器分chunk輸出，以及通過(guò)GZIP來(lái)壓縮主文檔資源。

文件合并分割原則

上面講到了需要盡可能合并css和js文件，這樣可以降低請(qǐng)求的數(shù)量，雖然說(shuō)文件放在服務(wù)器本地不會(huì)有網(wǎng)絡(luò)延遲，但是文件儲(chǔ)存于硬盤(pán)，任何一個(gè)文件的讀取即使機(jī)器性能再好也得需要一定的時(shí)間。

更加關(guān)聯(lián)的是對(duì)于用戶體驗(yàn)來(lái)說(shuō)，最關(guān)鍵的是首屏的加載渲染，所以不建議大家把所有的css和js合并，正確的分割才是明智的選擇。把首屏幕加載依賴的css和js單獨(dú)切割放在head標(biāo)簽中，剩余的放在最后加載。

分割css的選擇，最小化選擇，很多站點(diǎn)開(kāi)發(fā)用到了前端框架，里面其實(shí)包含了很多用不到的樣式，如果對(duì)于速度性能有著極致的追求，要么去閹割下要么就不去使用。

最小化原則，當(dāng)前頁(yè)面加載的css只包含當(dāng)前頁(yè)面所需的樣式。然后head標(biāo)簽只放首屏元素的樣式。

js的優(yōu)化就比css更加復(fù)雜，首先一樣的最小化原則，能不用第三方庫(kù)的就不用，自己寫(xiě)執(zhí)行效率更高。

渲染和功能分割

對(duì)于js代碼可以分為兩類：負(fù)責(zé)頁(yè)面渲染的js代碼；負(fù)責(zé)頁(yè)面功能的js代碼，比如點(diǎn)擊事件等功能，此類js不會(huì)影響頁(yè)面的展示的，此類js可以全部合并到一個(gè)文檔，異步執(zhí)行，文件位置head還是底部隨意，因?yàn)槭钱惒讲粫?huì)阻塞頁(yè)面渲染。

渲染js分割

參與頁(yè)面渲染的js的分割，head標(biāo)簽中的js文件只放一些核心必須執(zhí)行代碼，以及參與首屏渲染的。剩余參與渲染的js代碼單獨(dú)一個(gè)文件，在底部引用。

所以，js和css優(yōu)化并不是如診斷工具上建議的不加思考的合并。趕快收藏分享給IT小伙伴，給網(wǎng)站加速加速吧。