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

渲染阻塞

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

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

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

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

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

如何解決阻塞

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

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

文件合并分割原則

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

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

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

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

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

渲染和功能分割

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

渲染js分割

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

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