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

渲染阻塞

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

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

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

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

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

如何解決阻塞

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

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

文件合并分割原則

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

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

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

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

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

渲染和功能分割

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

渲染js分割

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

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