針對(duì)現(xiàn)在的網(wǎng)民來(lái)說(shuō)，時(shí)間就是金錢(qián)，你的網(wǎng)頁(yè)慢“對(duì)不起，我換一個(gè)，網(wǎng)站那么多總有一個(gè)快的”。
相信有很多用網(wǎng)頁(yè)看盜版小說(shuō)的小伙伴就深有體會(huì)，“打開(kāi)一個(gè)小說(shuō)頁(yè)面老半天，看個(gè)小說(shuō)都費(fèi)勁，不好意思，pass掉，換個(gè)反應(yīng)快的網(wǎng)站繼續(xù)看“。
針對(duì)搜索引擎來(lái)說(shuō)，“既然網(wǎng)民不喜歡你，我也不喜歡你，對(duì)不起，首頁(yè)不適合你呆，下去吧，讓別人來(lái)，別站著茅坑不拉屎”，特別是百度要求移動(dòng)端網(wǎng)頁(yè)打開(kāi)要小于3秒，最好1.5秒。
于是乎，不知不覺(jué)間，你不知排名莫名的掉了多少，你不知流失了多少流量，你不知流失了多少客戶(hù)，流失了多少金錢(qián)，對(duì)于大型網(wǎng)站尤為致命。所以我們必須要知道網(wǎng)站加載速度為何慢，前面福州SEO印秀團(tuán)隊(duì)也更新過(guò)有一篇‘’網(wǎng)頁(yè)打開(kāi)速度慢怎么辦‘’的文章，大家可以綜合來(lái)看，這里再和大家深度剖析一下。
首先我們要明白網(wǎng)頁(yè)加載原理，從url到網(wǎng)頁(yè)形成，中間經(jīng)歷了些什么，才知道怎么處理，怎么提速。域名解析過(guò)程這里就不說(shuō)了，我們說(shuō)說(shuō)頁(yè)面加載過(guò)程。
html網(wǎng)頁(yè)加載流程（瀏覽器渲染過(guò)程）
1、用戶(hù)輸入網(wǎng)址（假設(shè)該網(wǎng)址第一次在該瀏覽器打開(kāi)，沒(méi)有緩存），瀏覽器向服務(wù)器發(fā)出請(qǐng)求，服務(wù)器返回html文件。
2、瀏覽器載入html文件，開(kāi)始解析，從上往下開(kāi)始解析。
3、解析過(guò)程中，瀏覽器發(fā)現(xiàn)標(biāo)簽內(nèi)有一個(gè)外部引用的css文件，然后瀏覽器向服務(wù)器發(fā)出請(qǐng)求，服務(wù)器返回css文件，瀏覽器開(kāi)始下載。
4、瀏覽器繼續(xù)載入下面的代碼，而后下載好了css，并開(kāi)始渲染頁(yè)面，形成DOM樹(shù)。
5、瀏覽器繼續(xù)載入網(wǎng)頁(yè)代碼，又發(fā)現(xiàn)內(nèi)一個(gè)js引用文件，然后瀏覽器開(kāi)始發(fā)出請(qǐng)求，服務(wù)器返回js文件，并阻塞并行的文件下載和解析，直到執(zhí)行完畢。
6、瀏覽器繼續(xù)載入網(wǎng)頁(yè)代碼，發(fā)現(xiàn)有js腳本，則會(huì)立即執(zhí)行，并阻塞后續(xù)資源下載與執(zhí)行，直到執(zhí)行完畢。
7、瀏覽器繼續(xù)載入，發(fā)現(xiàn)中標(biāo)簽引用了一張圖片，會(huì)向服務(wù)器發(fā)出請(qǐng)求下載圖片，瀏覽器在下載圖片的同時(shí)會(huì)繼續(xù)渲染后面的代碼。
8、圖片下載完成，但由于圖片占了一定的頁(yè)面體積，影響了后面的布局，此時(shí)瀏覽器會(huì)重新渲染這段代碼。
9、瀏覽器繼續(xù)載入代碼，發(fā)現(xiàn)中的js，如果是內(nèi)置腳本（引用js需要請(qǐng)求下載）則直接執(zhí)行，暫停后續(xù)載入，直至執(zhí)行完成，而后繼續(xù)載入后續(xù)代碼，再進(jìn)行頁(yè)面渲染，如js改變了頁(yè)面樣式，瀏覽器還會(huì)重新渲染這部分代碼。
10、直到最后全部代碼執(zhí)行完畢，頁(yè)面渲染完成，展現(xiàn)出來(lái)。
網(wǎng)頁(yè)加載速度慢的原因
1、js文件請(qǐng)求過(guò)多，加長(zhǎng)了頁(yè)面渲染時(shí)間。
2、重復(fù)渲染次數(shù)過(guò)多，浪費(fèi)時(shí)間。
3、圖片、視頻資源過(guò)大，加載慢。
提高網(wǎng)頁(yè)加載速度的方法
1、css分塊
一般情況下，js的執(zhí)行很依賴(lài)于前面的css樣式，都是等css渲染完畢后開(kāi)始執(zhí)行，否則找不到元素；所以可以將css分成幾塊，首頁(yè)的css 單獨(dú)放一塊進(jìn)行執(zhí)行，減少首次加載網(wǎng)頁(yè)的白屏?xí)r間。
2、js執(zhí)行順序
（1）js中有defer=”true”、async=”true”兩個(gè)屬性值，前者表示要等到DOM加載完成后，再按順序執(zhí)行指定腳本，后者表示異步執(zhí)行且不會(huì)依賴(lài)于任何js和css，下載完成就會(huì)立即執(zhí)行（執(zhí)行時(shí)會(huì)暫停渲染），不會(huì)阻斷當(dāng)前頁(yè)面的渲染。
所以當(dāng)我們的js滿(mǎn)足這兩個(gè)標(biāo)簽時(shí)，可以使用讓其最后執(zhí)行或異步執(zhí)行，減少頁(yè)面渲染時(shí)間。
（2）我們也可以將js放到body最后等頁(yè)面渲染完成再執(zhí)行。
3、網(wǎng)頁(yè)減肥
（1）刪除網(wǎng)頁(yè)中多余的空格、沒(méi)用的注釋。
（2）將內(nèi)置js，css移動(dòng)到外部文件，免得多次渲染。
（3）將一些可用css寫(xiě)出來(lái)的問(wèn)題代替圖片。
（4）可以用一些壓縮工具把代碼壓縮一下。
4、減少文件，減少請(qǐng)求
網(wǎng)頁(yè)中若有很多個(gè)js或css，最好將其合并為一個(gè)js或css文件，減少請(qǐng)求次數(shù)。
5、重復(fù)數(shù)據(jù)存入緩存
對(duì)重復(fù)使用的數(shù)據(jù)進(jìn)行緩存，提高二次加載速度。
6、指定圖片、表格大小
內(nèi)置樣式，指定圖片，表格的大小，以免重復(fù)渲染，讓瀏覽器直接執(zhí)行。
7、關(guān)于cdn加速
這個(gè)沒(méi)啥好說(shuō)的，選擇優(yōu)質(zhì)的dns服務(wù)商就可以了。至于服務(wù)器這里就不提了，一個(gè)字“好”就行，推薦阿里云，阿里云的服務(wù)器技術(shù)確實(shí)沒(méi)得說(shuō)，就是快。
小貼士：關(guān)于圖片和視頻等大資源的話(huà)，大家可以使用阿里云對(duì)象存儲(chǔ)技術(shù)（Object Storage Service,簡(jiǎn)稱(chēng)OSS），會(huì)提高加載速度，大家自個(gè)兒研究吧。