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請(qǐng)求

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

減少HTTP請(qǐng)求的主要手段是:

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

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

（2）使用瀏覽器緩存

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

（3）啟用壓縮

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

（4）CSS放在頁(yè)面最上面，JavaScript放在頁(yè)面最下面

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

（5）減少Cookie傳輸

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

2.CDN加速

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

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

3.反向代理

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

除了安全功能，代理服務(wù)器也可以通過配置緩存功能加速Web請(qǐng)求，當(dāng)用戶第一次訪問靜態(tài)內(nèi)容的時(shí)候，靜態(tài)內(nèi)容就被緩存在反向代理服務(wù)器上，這樣當(dāng)其他用戶訪問該靜態(tài)內(nèi)容的時(shí)候，就可以直接從反向代理服務(wù)器返回，加速Web請(qǐng)求響應(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ì)是一個(gè)內(nèi)存Hash表，網(wǎng)站應(yīng)用中，數(shù)據(jù)緩存以一對(duì)Key,Value的形式存儲(chǔ)在內(nèi)存Hash表中。緩存主要用來(lái)存放那些讀寫比很高、很少變化的數(shù)據(jù)。

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

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

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

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

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

緩存可用性。?業(yè)務(wù)發(fā)展到一定階段時(shí)，緩存會(huì)承擔(dān)大部分?jǐn)?shù)據(jù)訪問的壓力，數(shù)據(jù)庫(kù)已經(jīng)習(xí)慣了有緩存的日子，所以當(dāng)緩存服務(wù)器崩潰時(shí)，數(shù)據(jù)庫(kù)會(huì)因?yàn)橥耆荒艹惺苋绱舜蟮膲毫Χ礄C(jī)，進(jìn)而導(dǎo)致整個(gè)網(wǎng)站不可用。這種情況被稱作緩存雪崩，發(fā)生這種故障，甚至不能簡(jiǎn)單地重啟緩存服務(wù)器和數(shù)據(jù)庫(kù)服務(wù)器來(lái)恢復(fù)網(wǎng)站訪問。 解決方式：1、緩存熱備（當(dāng)某臺(tái)服務(wù)器宕機(jī)時(shí)，將緩存訪問切換到熱備服務(wù)器上。）；2、緩存服務(wù)器集群。

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

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

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

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

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

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

2.應(yīng)盡量避免在 where 子句中對(duì)字段進(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 來(lái)連接條件，如果一個(gè)字段有索引，一個(gè)字段沒有索引，將導(dǎo)致引擎放棄使用索引而進(jìn)行全表掃描。

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

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

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

select id from t where num between 1 and 3

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

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

8.盡量使用數(shù)字型字段，若只含數(shù)值信息的字段盡量不要設(shè)計(jì)為字符型，這會(huì)降低查詢和連接的性能，并會(huì)增加存儲(chǔ)開銷。這是因?yàn)橐嬖谔幚聿樵兒瓦B 接時(shí)會(huì)逐個(gè)比較字符串中每一個(gè)字符，而對(duì)于數(shù)字型而言只需要比較一次就夠了。

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

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

你可能也喜歡:

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

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

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

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

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

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

---

總結(jié)

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

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