web前端性能優(yōu)化

Web前端指網(wǎng)站業(yè)務(wù)邏輯之前的部分，包括：

1.瀏覽器加載

2.網(wǎng)站視圖模型

3.圖片服務(wù)

4.CDN服務(wù)等

主要優(yōu)化手段有優(yōu)化瀏覽器訪問，使用反向代理，CDN等。

1.瀏覽器訪問優(yōu)化

（1）減少http請求

HTTP協(xié)議是無狀態(tài)的應(yīng)用層協(xié)議，意味著每次HTTP請求都需要簡歷通信鏈路，進(jìn)行數(shù)據(jù)傳輸，而在服務(wù)器端，每個HTTP都需要啟動獨立的線程去處理，這些通信和服務(wù)的開銷都很昂貴，減少HTTP請求的數(shù)目可有效提高訪問性能。

減少HTTP請求的主要手段是:

• 合并CSS，以及壓縮CSS大小
• 合并JavaScript，以及壓縮JS大小
• 合并圖片

將瀏覽器一次訪問需要的JavaScript,CSS合并成一個文件，這樣瀏覽器就只需要一次請求。多張圖片合并成一張，如果每張圖片都有不同的超鏈接，可通過CSS偏移響應(yīng)鼠標(biāo)點擊操作，構(gòu)造不同的URL。

（2）使用瀏覽器緩存

對一個網(wǎng)站而言，CSS,JavaScript,Logo,圖標(biāo)等這些靜態(tài)資源文件更新的頻率都比較低，而這些文件又幾乎是每次HTTP請求都需要的，如果將這些文件緩存在瀏覽器中，可以極好地改善性能。通過設(shè)置HTTP頭中Cache-Control和Expires屬性，可設(shè)定瀏覽器緩存，緩存時間可以是數(shù)天甚至是幾個月。有時候，靜態(tài)資源文件變化需要及時應(yīng)用到客戶端瀏覽器，這種情況可以通過改變文件名實現(xiàn)，比如一般會在JavaScript后面加上一個版本號，使瀏覽器刷新修改的文件。

（3）啟用壓縮

在服務(wù)器端對文件進(jìn)行壓縮，在瀏覽器端對文件解壓縮，可有效較少通信傳輸?shù)臄?shù)據(jù)量。文本文件的壓縮效率科大80%以上。

（4）CSS放在頁面最上面，JavaScript放在頁面最下面

瀏覽器會在下載完全部CSS之后對整個頁面進(jìn)行渲染，因此最好的做法是將CSS放在頁面最上面，讓瀏覽器盡快下載CSS。JS則想法，瀏覽器在加載JS后立即執(zhí)行，有可能會阻塞整個頁面，造成頁面顯示緩慢，因此JS最好放在頁面最下面。

（5）減少Cookie傳輸

一方面，Cookie包含在每次請求和響應(yīng)中，太大的Cookie會嚴(yán)重影響數(shù)據(jù)傳輸，因此哪些數(shù)據(jù)需要寫入Cookie需要慎重考慮，盡量減少Cookie中傳輸?shù)臄?shù)據(jù)量。另一方面，對于某些靜態(tài)資源的訪問，如CSS,JS等，發(fā)送Cookie沒有意義，可以考慮靜態(tài)資源使用獨立域名訪問，避免請求靜態(tài)資源時發(fā)送Cookie，減少Cookie傳輸?shù)拇螖?shù)。

2.CDN加速

CDN（Content Distribute Network,內(nèi)存分發(fā)網(wǎng)絡(luò)）的本質(zhì)上仍然是一個緩存，而且將數(shù)據(jù)緩存在離用戶最近的地方，是用戶以最快速度獲取數(shù)據(jù)，即所謂網(wǎng)絡(luò)訪問第一跳。

CDN一般緩存的是靜態(tài)資源，如圖片，文件，CSS，Script腳本，靜態(tài)網(wǎng)頁等，但是這些文件訪問頻率很高，將其緩存在CDN可極大改善網(wǎng)頁的打開速度。

3.反向代理

傳統(tǒng)代理服務(wù)器位于瀏覽器一側(cè)，代理瀏覽器將HTTP請求發(fā)送到互聯(lián)網(wǎng)上，而反向代理服務(wù)器位于網(wǎng)站機(jī)房一側(cè)，代理網(wǎng)站W(wǎng)eb服務(wù)器接收HTTP請求。和傳統(tǒng)代理服務(wù)器可以保護(hù)瀏覽器安全一樣，反向代理服務(wù)器也具有保護(hù)網(wǎng)站安全的作用，來自互聯(lián)網(wǎng)的訪問請求必須經(jīng)過代理服務(wù)器，相當(dāng)于在Web服務(wù)器和可能的網(wǎng)絡(luò)攻擊之間建立了一個屏障。

除了安全功能，代理服務(wù)器也可以通過配置緩存功能加速Web請求，當(dāng)用戶第一次訪問靜態(tài)內(nèi)容的時候，靜態(tài)內(nèi)容就被緩存在反向代理服務(wù)器上，這樣當(dāng)其他用戶訪問該靜態(tài)內(nèi)容的時候，就可以直接從反向代理服務(wù)器返回，加速Web請求響應(yīng)速度，減輕服務(wù)器負(fù)載要。

應(yīng)用服務(wù)器性能優(yōu)化

應(yīng)用服務(wù)器就是處理網(wǎng)站業(yè)務(wù)的服務(wù)器，網(wǎng)站的業(yè)務(wù)代碼都部署在這里，是網(wǎng)站開發(fā)最復(fù)雜，變化最多的地方，優(yōu)化手段主要有緩存、集群和異步等。

網(wǎng)站性能優(yōu)化第一定律：優(yōu)先考慮使用緩存優(yōu)化性能。

緩存的本質(zhì)是一個內(nèi)存Hash表，網(wǎng)站應(yīng)用中，數(shù)據(jù)緩存以一對Key,Value的形式存儲在內(nèi)存Hash表中。緩存主要用來存放那些讀寫比很高、很少變化的數(shù)據(jù)。

二八定律：80%的訪問落在20%的數(shù)據(jù)上

使用緩存需要注意的問題：

把頻繁修改的數(shù)據(jù)放入緩存。容易出現(xiàn)數(shù)據(jù)寫入緩存后，應(yīng)用還來不及讀取緩存，數(shù)據(jù)就已經(jīng)失效的情形，徒增系統(tǒng)負(fù)擔(dān)。一般來說，數(shù)據(jù)的讀寫比在2:1以上，緩存才有意義。

沒有熱點的訪問。?緩存使用的內(nèi)存資源非常寶貴，只能將最新訪問的數(shù)據(jù)緩存起來，而把歷史數(shù)據(jù)清理出緩存。即緩存資源應(yīng)該留給20%的熱點數(shù)據(jù)。

數(shù)據(jù)不一致與臟讀。?一般會對緩存設(shè)置失效時間，超過失效時間，就要從數(shù)據(jù)庫重新加載。因此應(yīng)用要忍受一定時間的數(shù)據(jù)不一致。另一種策略是數(shù)據(jù)更新時立即更新緩存，不過這也會帶來更多的系統(tǒng)開銷和事務(wù)一致性的問題。

緩存可用性。?業(yè)務(wù)發(fā)展到一定階段時，緩存會承擔(dān)大部分?jǐn)?shù)據(jù)訪問的壓力，數(shù)據(jù)庫已經(jīng)習(xí)慣了有緩存的日子，所以當(dāng)緩存服務(wù)器崩潰時，數(shù)據(jù)庫會因為完全不能承受如此大的壓力而宕機(jī)，進(jìn)而導(dǎo)致整個網(wǎng)站不可用。這種情況被稱作緩存雪崩，發(fā)生這種故障，甚至不能簡單地重啟緩存服務(wù)器和數(shù)據(jù)庫服務(wù)器來恢復(fù)網(wǎng)站訪問。 解決方式：1、緩存熱備（當(dāng)某臺服務(wù)器宕機(jī)時，將緩存訪問切換到熱備服務(wù)器上。）；2、緩存服務(wù)器集群。

緩存預(yù)熱。?緩存中存放的是熱點數(shù)據(jù)，熱點數(shù)據(jù)是緩存系統(tǒng)用LRU對不斷訪問的數(shù)據(jù)篩選出來的，這個過程需要較長的時間。新啟動的緩存系統(tǒng)沒有任何數(shù)據(jù)，此時系統(tǒng)的性能和數(shù)據(jù)庫負(fù)載都不太好。因此可以選擇在啟動緩存是就把熱點數(shù)據(jù)預(yù)加載好。

緩存穿透。?因為不恰當(dāng)?shù)臉I(yè)務(wù)或惡意攻擊，持續(xù)高并發(fā)地訪問某一個不存在的數(shù)據(jù)，如果緩存不保存該數(shù)據(jù)，就會有大量的請求壓力落在數(shù)據(jù)庫上。簡單的解決方式是把請求的不存在的數(shù)據(jù)也放進(jìn)緩存，其value是null。

對應(yīng)可以考慮的分布式緩存有memcached、redis，降低對數(shù)據(jù)庫的讀操作。

數(shù)據(jù)庫SQL性能優(yōu)化

最后就是考慮數(shù)據(jù)庫端的性能優(yōu)化，如果訪問量巨大，除了sql優(yōu)化外，還會涉及到分庫分表、讀寫分離、利用數(shù)據(jù)庫中間件來解決（下面架構(gòu)師系列有講），這里就不再重復(fù)。

1.對查詢進(jìn)行優(yōu)化，要盡量避免全表掃描，首先應(yīng)考慮在 where 及 order by 涉及的列上建立索引。

2.應(yīng)盡量避免在 where 子句中對字段進(jìn)行 null 值判斷，否則將導(dǎo)致引擎放棄使用索引而進(jìn)行全表掃描，如：

select id from t where num is null

3.應(yīng)盡量避免在 where 子句中使用 != 或 <> 操作符，否則將引擎放棄使用索引而進(jìn)行全表掃描。

4.應(yīng)盡量避免在 where 子句中使用 or 來連接條件，如果一個字段有索引，一個字段沒有索引，將導(dǎo)致引擎放棄使用索引而進(jìn)行全表掃描。

5.in和 not in 也要慎用，否則會導(dǎo)致全表掃描，如：

select id from t where num in（1,2,3）

對于連續(xù)的數(shù)值，能用 between就不要用 in 了：

select id from t where num between 1 and 3

6.對于多張大數(shù)據(jù)量（這里幾百條就算大了）的表JOIN，要先分頁再JOIN，否則邏輯讀會很高。

7.索引并不是越多越好，索引固然可以提高相應(yīng)的 select 的效率，但同時也降低了 insert 及 update 的效率，因為 insert 或 update 時有可能會重建索引，所以怎樣建索引需要慎重考慮，視具體情況而定。一個表的索引數(shù)最好不要超過6個，若太多則應(yīng)考慮一些不常使用到的列上建的索引是否有 必要。

8.盡量使用數(shù)字型字段，若只含數(shù)值信息的字段盡量不要設(shè)計為字符型，這會降低查詢和連接的性能，并會增加存儲開銷。這是因為引擎在處理查詢和連 接時會逐個比較字符串中每一個字符，而對于數(shù)字型而言只需要比較一次就夠了。

9.盡量避免向客戶端返回大數(shù)據(jù)量，若數(shù)據(jù)量過大，應(yīng)該考慮相應(yīng)需求是否合理。

10.盡量避免大事務(wù)操作，提高系統(tǒng)并發(fā)能力。

你可能也喜歡:

阿里P8架構(gòu)師談：數(shù)據(jù)庫分庫分表、讀寫分離的原理實現(xiàn)，使用場景

阿里P8架構(gòu)師談：數(shù)據(jù)庫、JVM、緩存、SQL等性能調(diào)優(yōu)方法和原則

阿里P8架構(gòu)師談：多線程、架構(gòu)、異步消息、Redis等性能優(yōu)化策略

阿里P8架構(gòu)師談：流量高峰時期的性能瓶頸有哪些、以及如何來解決

阿里P8架構(gòu)師談：MySQL數(shù)據(jù)庫的索引原理、與慢SQL優(yōu)化的5大原則

阿里P8架構(gòu)師談：應(yīng)用后端+移動端的性能優(yōu)化指標(biāo)，以及性能優(yōu)化方法

---

總結(jié)

以上是生活随笔為你收集整理的阿里P8架构师谈：Web前端、应用服务器、数据库SQL等性能优化总结的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。