優(yōu)化網(wǎng)站訪問(wèn)速度的方法

信搭建網(wǎng)站的用戶都是看重網(wǎng)站速度，希望搭建的網(wǎng)站訪問(wèn)速度良好，這樣才能保障網(wǎng)站業(yè)務(wù)的運(yùn)行，所以今天小編就來(lái)介紹一下，優(yōu)化網(wǎng)站訪問(wèn)速度的方法。

　　用戶想要優(yōu)化網(wǎng)站訪問(wèn)速度，或者說(shuō)網(wǎng)站訪問(wèn)速度出現(xiàn)問(wèn)題，可以先檢測(cè)下網(wǎng)站速度。網(wǎng)站速度可以使用IIS7網(wǎng)站監(jiān)控，先進(jìn)行檢測(cè)，查看搭建的網(wǎng)站是否被劫持、網(wǎng)站域名是否被墻、DNS污染檢測(cè)、網(wǎng)站打開速度檢測(cè)等信息

　　如果正常情況下，那么可以通過(guò)以下幾種方法來(lái)優(yōu)化網(wǎng)頁(yè)用戶的訪問(wèn)速度：

　　1、進(jìn)行網(wǎng)站代碼優(yōu)化，刪除冗余的代碼，比如無(wú)用的空格、換行符、注釋，不需要加載的JS等，將JS代碼和CSS樣式合并，減少請(qǐng)求次數(shù)，可以有效提高網(wǎng)頁(yè)加載速度。

　　2、減少頁(yè)面上不必要的元素，瀏覽網(wǎng)頁(yè)實(shí)際上是將主機(jī)上的內(nèi)容下載到本地硬盤，再使用瀏覽器查看，所以說(shuō)網(wǎng)頁(yè)本身所占空間越小，網(wǎng)頁(yè)瀏覽速度就越快。盡量不要使用flash動(dòng)畫、大量的圖片或多媒體資源，如視頻、音頻等。

　　3、盡量使用靜態(tài)頁(yè)面，靜態(tài)頁(yè)面可以直接運(yùn)行在客戶端，無(wú)需主機(jī)編輯便可以直接在瀏覽器上顯示，在訪問(wèn)速度上比較快。而動(dòng)態(tài)頁(yè)面雖然交互性好，但這類程序需要由服務(wù)器執(zhí)行處理，生成HTML頁(yè)面，然后通過(guò)瀏覽器瀏覽，網(wǎng)頁(yè)顯示速度較慢。

　　4、簡(jiǎn)化頁(yè)面結(jié)構(gòu)，在設(shè)計(jì)網(wǎng)頁(yè)時(shí)，不少站長(zhǎng)為了追求頁(yè)面的對(duì)齊，將整個(gè)頁(yè)面內(nèi)容塞進(jìn)一個(gè)Table中，然后由單元格劃分各個(gè)區(qū)塊，這會(huì)讓網(wǎng)頁(yè)顯示速度變慢。因?yàn)門able需要等所有的內(nèi)容加載好再分級(jí)顯示，如果某些內(nèi)容難以加載出來(lái)，整個(gè)頁(yè)面也就無(wú)法顯示出來(lái)。正確的做法應(yīng)該使用DIV+CSS的頁(yè)面結(jié)構(gòu)，它可以實(shí)現(xiàn)頁(yè)面的逐步加載。

　　5、使用CDN加速網(wǎng)絡(luò)，CDN即內(nèi)容分發(fā)網(wǎng)絡(luò)，它可以實(shí)時(shí)的根據(jù)網(wǎng)絡(luò)流量和各節(jié)點(diǎn)的鏈接、負(fù)載狀況以及用戶的距離和響應(yīng)時(shí)間等信息將用戶的請(qǐng)求重新導(dǎo)向到離用戶最近的服務(wù)節(jié)點(diǎn)。這能讓用戶就近取得所需內(nèi)容，提高網(wǎng)頁(yè)響應(yīng)速度。

　　6、大圖使用懶加載Lazy Load，圖片懶加載又稱圖片延時(shí)加載、惰性加載，即在用戶需要使用圖片的時(shí)候加載，這樣可以減少請(qǐng)求、減輕服務(wù)器壓力，提高頁(yè)面加載速度。

　　7、如果是大量圖片的網(wǎng)站，那么可以對(duì)網(wǎng)站的圖片進(jìn)行壓縮之后，再使用到網(wǎng)頁(yè)上面，避免因?yàn)閳D片占用太多緩存而導(dǎo)致網(wǎng)頁(yè)訪問(wèn)緩慢。

　　以上就是優(yōu)化網(wǎng)站訪問(wèn)速度的方法，希望能幫助到有需要的用戶。

家好，我是 Echa。

今天來(lái)分享 12 個(gè)優(yōu)化 CSS 代碼小技巧！

1. 避免高消耗屬性

分析表明，一些CSS屬性的渲染速度比其他屬性慢，因此應(yīng)該謹(jǐn)慎使用。包括以下屬性：

box-shadow
border-radius
position: fixed
transform
:nth-child
filter

上述屬性都是對(duì)性能要求比較高的。如果這些屬性使用較少，那這就不是問(wèn)題。但是如果一個(gè)頁(yè)面出現(xiàn)幾百次，那么整體的CSS可能會(huì)受到影響，所以要謹(jǐn)慎使用。

2. 使用 <link> 代替 @import

@import 規(guī)則主要用于導(dǎo)入資源或者CSS文件。它會(huì)阻止其他文件并行下載，并可能會(huì)導(dǎo)致網(wǎng)站速度變慢。

? 不要在CSS中這樣操作：

@import url("header.css");
@import url("slider.css");
@import url("content.css");
@import url("footer.css");

可以使用多個(gè)HTML 中的<link>標(biāo)簽來(lái)代替@import，它將并行加載CSS文件，可以在一定程度上提高應(yīng)用的加載的速度。

? 可以在HTML這樣操作：

<link rel="stylesheet" href="header.css">
<link rel="stylesheet" href="slider.css">
<link rel="stylesheet" href="content.css">
<link rel="stylesheet" href="footer.css">

3. 簡(jiǎn)化選擇器

我們知道，有很多方法可以對(duì) HTML 元素進(jìn)行樣式設(shè)置，而最復(fù)雜的 CSS 選擇器可能需要幾毫秒的時(shí)間來(lái)解析。降低選擇器的復(fù)雜性就可以減少瀏覽器的負(fù)載并保持代碼簡(jiǎn)潔明了。

? 避免這么寫：

.container > div.links-container ul li .link {

}

? 可以這么寫：

.container .link {

}

4. 避免使用 !Important

在一些時(shí)候，可以使用!Important 來(lái)提高樣式的優(yōu)先級(jí)，以使樣式生效。除非沒有別的辦法，否則不要使用!Important。

添加 !Important CSS聲明將覆蓋掉其他對(duì)應(yīng)的樣式聲明，如果CSS的規(guī)則中 !Important 太多，瀏覽器就必須對(duì)代碼進(jìn)行額外的檢查，這可能會(huì)降低頁(yè)面的加載速度。所以，盡量避免使用!Important。在很多情況下我們是可以通過(guò)選擇器來(lái)實(shí)現(xiàn)樣式重寫的，除非是想要對(duì)第三方庫(kù)的CSS進(jìn)行重寫。

5. CSS實(shí)現(xiàn)特效和SVG代替圖片

頁(yè)面中加載圖像很可能需要很長(zhǎng)的時(shí)間，尤其是在圖像未針對(duì)web進(jìn)行優(yōu)化的情況下。在實(shí)現(xiàn)背景圖、漸變、幾何圖形時(shí)，盡量少使用圖片，而是使用CSS代碼實(shí)現(xiàn)。使用 CSS 代碼實(shí)現(xiàn)就會(huì)比圖片加載速度更快。

還可以使用SVG來(lái)代替PNG或者JPG圖片：

可以給圖片添加效果；
圖像加載速度更快；
圖像自動(dòng)適應(yīng)用戶屏幕。

6. 壓縮 CSS

我們可以通過(guò)壓縮CSS文件來(lái)刪除文件中所有的空白和不必要的代碼來(lái)減少文件的大小。CSS文件變小了，加載的時(shí)間自然就變少了，頁(yè)面的加載速度就會(huì)變。

7. 使用0而不是0px

當(dāng)一個(gè)屬性的值為0時(shí)，我們可以不添加任何單位。即不要這么寫：0rem，0em，0px等。

當(dāng)然，這么寫是沒有錯(cuò)的，但是這些單位是沒有用的，當(dāng)處理一個(gè)巨大的CSS文件時(shí)，沒有單位會(huì)比有單位時(shí)文件小一點(diǎn)。

8. 使用十六進(jìn)制而不是顏色名稱

當(dāng)我們將顏色設(shè)置為顏色名稱時(shí)，瀏覽器就會(huì)花費(fèi)更多時(shí)間來(lái)找出顏色的十六進(jìn)制值。假如想使用紅色，那設(shè)置為color:red之后，不同的瀏覽器顯示效果可能是不一樣的，作為開發(fā)人員，我們不能讓瀏覽器來(lái)決定網(wǎng)頁(yè)將如何顯示。

因此，盡量使用使用十六進(jìn)制（例如紅色#ff0000）來(lái)定義顏色，就能確保在所有瀏覽器中以相同的色調(diào)準(zhǔn)確得顯示想要的顏色。

9. 避免過(guò)多 font-family

為每個(gè)選擇器去定義字體并不是一個(gè)好的辦法，它會(huì)導(dǎo)致代碼很難維護(hù)，假如以后想要更改字體，就不得不在每個(gè)選擇器中更改它。

因此不要像下面這樣來(lái)定義字體：

h1 {
  font-family: Arial, Helvetica, sans-serif;
}

p {
  font-family: Arial, Helvetica, sans-serif;
}

.selection {
  font-family: Arial, Helvetica, sans-serif;
}

.footer {
  font-family: "Times New Roman", Times, serif;
}

可以在正文中定義要使用的字體，如果想要在其他選擇器中覆蓋該字體，就可以通過(guò)在該選擇器中使用所需的字體來(lái)實(shí)現(xiàn)：

body{
  font-family: Arial, Helvetica, sans-serif;
}

footer{
  font-family: "Times New Roman", Times, serif";
}

如果頁(yè)面中很多部分的字體都不盡相同，就可以將字體定義在 class 中，然后在需要的HTML標(biāo)簽上使用該class即可：

.font-helvetica {
  font-family: Arial, Helvetica, sans-serif;
}

.font-times {
  font-family: "Times New Roman", Times, serif";
}

10. 使用備用字體

有些情況下，應(yīng)用中使用的字體可能在用戶設(shè)備上不可用。在這種情況下，可以指定使用其他備用字體：

p{
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}

這樣，瀏覽器就會(huì)按順序進(jìn)行解析，直到解析到第一個(gè)可用的字體，如果都不可用，就會(huì)使用瀏覽器的默認(rèn)字體。

11. 使用 CSS 重置

每個(gè)瀏覽器都有自己的 HTML 元素默認(rèn)樣式。假如有一個(gè)沒有任何樣式的 H1 元素，那么在默認(rèn)情況下，在Firefox中，會(huì)給它一個(gè)上下為21.433px，左右為 0 的margin值。而在Safari中，會(huì)給它一個(gè)上下為21px，左右為 0 的margin值。

因此，重置CSS樣式，一個(gè)很好的做法就是從頭開始定義樣式。很多開發(fā)人員會(huì)使用通用選擇器（*）來(lái)執(zhí)行基本重置：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

在使用通用選擇器 (*) 進(jìn)行重置有時(shí)會(huì)導(dǎo)致性能問(wèn)題，因?yàn)樗鼤?huì)針對(duì)每個(gè)標(biāo)簽去設(shè)置其樣式。

可以使用一些常用的CSS重置代碼庫(kù)，比如normalize。也可以參考一些CSS重置的最佳實(shí)踐。

12. 減少重復(fù)代碼

當(dāng)兩個(gè)元素或選擇器具有相同的 CSS 屬性時(shí)，可以使用逗號(hào)來(lái)組合這些選擇器，而不是重復(fù)聲明樣式，這樣它們將共享 CSS 樣式。

? 避免這樣寫：

.header {
  background-color: #fefefe;
  padding: 20px 0;
}

.footer {
  background-color: #fefefe;
  padding: 20px 0;
}

? 建議這樣寫：

、首先說(shuō)說(shuō)瀏覽器的加載流程：

(1) 用戶在地址欄中打開一個(gè)URL，瀏覽器首先會(huì)尋找該URL所在服務(wù)器，通過(guò)DNS服務(wù)器查詢?yōu)g覽器會(huì)獲

得該URL所在網(wǎng)站的IP地址，然后向該地址發(fā)起請(qǐng)求，連接到服務(wù)器；

(2) 建立連接后，向服務(wù)器發(fā)送http請(qǐng)求，請(qǐng)求對(duì)應(yīng)的HTML文檔；

(3) 解析HTML文檔，目的是知道該頁(yè)面需要哪些資源以及生成DOM樹；生成DOM樹和獲取到相應(yīng)需要的

資源文件同時(shí)進(jìn)行；解析HTML文檔時(shí)，一旦發(fā)現(xiàn)一個(gè)標(biāo)簽，就會(huì)根據(jù)標(biāo)簽的要求分配對(duì)指定的資源進(jìn)行下載，當(dāng)DOM樹生成后，DOMContentLoaded事件被觸發(fā)；

理論上瀏覽器并行下載頁(yè)面所需要的資源會(huì)帶來(lái)更好的性能體驗(yàn)！

(4) Onload事件，當(dāng)解析完成后，生成了DOM樹，所有頁(yè)面需要的資源文件都已經(jīng)成功下載和執(zhí)行后，

瀏覽器會(huì)發(fā)出Onload事件并回調(diào)HTML文檔中的onload函數(shù)。

2、對(duì)于優(yōu)化頁(yè)面速度的必要性：

頁(yè)面的打開速度對(duì)于網(wǎng)站的優(yōu)化有極大的意義，如果打開一個(gè)頁(yè)面長(zhǎng)時(shí)間處于白屏狀態(tài)，如果超過(guò)5s，暴脾氣

的我是會(huì)直接關(guān)閉這個(gè)網(wǎng)頁(yè)；或者是頁(yè)面加載出來(lái)了，但是比較慢，頁(yè)面顯示不完整，標(biāo)簽一直在轉(zhuǎn)圈，頁(yè)面處于不可交互狀態(tài)，這也是一種很不好的體驗(yàn)；

一個(gè)頁(yè)面的打開速度快不快，可以用兩個(gè)指標(biāo)來(lái)描述，一個(gè)是ready時(shí)間，一個(gè)是load時(shí)間，chrome控制臺(tái)可以看到；

一共是加載了19.2KB，ready時(shí)間是133ms，load時(shí)間是147ms；

3、分點(diǎn)介紹優(yōu)化策略：

(1) 避免head標(biāo)簽js堵塞：

所有放在head標(biāo)簽里面的js和css都會(huì)堵塞渲染；如果這些css和js需要加載很久的話，那么頁(yè)面就空白了；

[html] view plain copy

<head>

</head>

用google的cdn加載一個(gè)jQuery文件是訪問(wèn)不了的，所以標(biāo)簽一直在轉(zhuǎn)圈，頁(yè)面沒有任何顯示；

有兩種解決辦法，第一種是把script放到body后面，這也是很多網(wǎng)站采取的方法。第二種是給script加defer或者async的屬性，一旦script是defer或者async延遲的，那么這個(gè)script將會(huì)異步加載，但不會(huì)馬上執(zhí)行，會(huì)在readystatechange變?yōu)镮nteractive后按順序依次執(zhí)行；

兩者相同點(diǎn)：

加載文件時(shí)不阻塞頁(yè)面渲染

對(duì)于inline的script無(wú)效

使用這兩個(gè)屬性的腳本中不能調(diào)用document.write方法

有腳本的onload的事件回調(diào)

兩者不同點(diǎn)：

async下，js一旦下載好了就會(huì)執(zhí)行，所以很有可能不是按照原本的順序來(lái)執(zhí)行的。如果js前后有依賴性，用async，就很有可能出錯(cuò)。

如果一個(gè)script加了defer屬性，即使放在head里面，它也會(huì)在html頁(yè)面解析完畢之后再去執(zhí)行，也就是類似于把這個(gè)script放在了頁(yè)面底部。

(2) 減少head里面的css資源：

css必須放在head標(biāo)簽里面，如果放在body里面會(huì)造成對(duì)layout好的dom進(jìn)行重排造成頁(yè)面閃爍；但是一旦

放在head標(biāo)簽里面又會(huì)堵塞頁(yè)面渲染；所以要盡可能的減小css體積；

例：不要放太多base64在css里面，webpack構(gòu)建工具常常會(huì)配置圖片體積小于多少的直接轉(zhuǎn)換成base64加載，這

里是挺影響性能的，一個(gè)是不能用到緩存機(jī)制，另一個(gè)就是加大了css的體積；個(gè)人建議上線項(xiàng)目直接把圖片用cdn托

管；

在這里給大家推薦一個(gè)前端交流學(xué)習(xí)qun，想要學(xué)習(xí)的朋友可以加入進(jìn)來(lái)，免費(fèi)帶你入門。前面是554，中間是224，后面是926.

(3)延遲加載圖片：

對(duì)于很多網(wǎng)站來(lái)說(shuō)，圖片汪汪是占用最多流量和帶寬的資源；

[html] view plain copy

</body>

window.onload=function(){

$("#imgTest").attr("src",$("#imgTest").data("src"));

}

</script></span>

這里沒有直接給src路徑，而是在頁(yè)面加載完成后用js操作src，減少了頁(yè)面加載圖片的時(shí)間，首先把整個(gè)頁(yè)面結(jié)構(gòu)呈現(xiàn)給用戶；惰性加載圖片也是差不多；當(dāng)用戶滑動(dòng)頁(yè)面到一定高度時(shí)（監(jiān)聽scroll事件），再動(dòng)態(tài)的依次對(duì)圖片進(jìn)行處理；

(4) 壓縮和緩存：

壓縮就不說(shuō)了；緩存會(huì)在后續(xù)文章中具體寫一個(gè)demo，持續(xù)更新；

(5) DNS解析優(yōu)化：

DNS查詢需要花費(fèi)大量時(shí)間來(lái)返回一個(gè)主機(jī)名的IP地址；

在我們的網(wǎng)站中，可能會(huì)加載到很多個(gè)域的東西，比如引入了百度地圖啊之類的sdk和一些自己的子域名服務(wù)；第一次打開網(wǎng)站時(shí)要做很多次DNS查找；DNS預(yù)讀取能夠加快網(wǎng)頁(yè)打開時(shí)間；

[html] view plain copy

在head中寫上幾個(gè)link標(biāo)簽，對(duì)標(biāo)簽中的地址提前解析DNS，這個(gè)解析是并行發(fā)生的，不會(huì)堵塞頁(yè)面渲染；

還有非常多的頁(yè)面優(yōu)化技巧，html別嵌套太多層，加重頁(yè)面layout的壓力；css選擇器的合理運(yùn)用，減少匹配的計(jì)算量；js中別濫用閉包，會(huì)加深作用域鏈，增加變量查找時(shí)間；減少http請(qǐng)求之類的等等；

我是一名前端開發(fā)程序員，自己整理了一份2019最全面前端學(xué)習(xí)資料，從最基礎(chǔ)的HTML+CSS+JS到移動(dòng)端HTML5到各種框架都有整理，送給每一位前端小伙伴，這里是小白聚集地，歡迎初學(xué)和進(jìn)階中的小伙伴
前端資料獲取方式：
1.在你手機(jī)的右上角有【關(guān)注】選項(xiàng)，點(diǎn)擊關(guān)注！
2.關(guān)注后，手機(jī)客戶端點(diǎn)擊我的主頁(yè)面，右上角有私信，請(qǐng)私信回復(fù)：【學(xué)習(xí)】
電腦已經(jīng)設(shè)置好了關(guān)鍵詞自動(dòng)回復(fù)，所以回復(fù)的時(shí)候請(qǐng)注意關(guān)鍵詞喲~

在線咨詢

上一篇：來(lái)說(shuō)說(shuō)緩存穿透、緩存擊穿、緩存雪崩都是什么？怎么解決
下一篇：Spring Boot快速開發(fā)企業(yè)級(jí)Admin管理后