現(xiàn)在前端不僅要能做出一個(gè)網(wǎng)站頁(yè)面挎狸，還要把這個(gè)頁(yè)面做的炫酷搂根，那需要很大程度的優(yōu)化，那么怎么優(yōu)化才更好呢响委？小猿圈總結(jié)了一下自己優(yōu)化的方案新思，感興趣的朋友可以看一下。
一般網(wǎng)站優(yōu)化都是優(yōu)化后臺(tái)赘风，如接口的響應(yīng)時(shí)間夹囚、SQL優(yōu)化、后臺(tái)代碼性能優(yōu)化邀窃、服務(wù)器優(yōu)化等荸哟。高并發(fā)情況下，對(duì)前端web優(yōu)化也是非常重要的瞬捕。
下面說(shuō)說(shuō)幾種常見(jiàn)的優(yōu)化措施鞍历。
1、HTML CSS JS位置
一般需要將CSS放頁(yè)面最上面肪虎，即HEAD部分劣砍，而將JS代碼放頁(yè)面底部。因?yàn)轫?yè)面需要加載為CSS才進(jìn)行渲染扇救，而JS如果不是在頁(yè)面加載之前就要執(zhí)行就要放到頁(yè)面最底部刑枝，以免在頁(yè)面展示之前因JS過(guò)多加載而影響頁(yè)面渲染速度香嗓。
2、引用文件位置
有一些插件需要引用到遠(yuǎn)程的圖片装畅、CSS靠娱、JS、圖標(biāo)等洁灵，如果遠(yuǎn)程的資源連接網(wǎng)速不佳饱岸，如國(guó)外的某些資源，會(huì)造成網(wǎng)頁(yè)阻塞徽千，同樣也會(huì)造成頁(yè)面展示問(wèn)題苫费，盡量能把引用遠(yuǎn)程的資源能本地化。
3双抽、減少后臺(tái)請(qǐng)求
每個(gè)請(qǐng)求都是耗費(fèi)資源影響系統(tǒng)性能的百框，所以，能減少后臺(tái)請(qǐng)求就減少牍汹。如铐维，盡量的將同一個(gè)資源（圖片、JS慎菲、CSS等）合并成一個(gè)文件嫁蛇，頁(yè)面只要請(qǐng)求一次即可，這樣就節(jié)省了很多http連接的開(kāi)銷及往返的時(shí)間損耗露该。
另外一方面睬棚，如果是關(guān)于抽獎(jiǎng)、搖一搖解幼、秒殺等功能抑党，可以限制發(fā)往后臺(tái)的頻率，如前端操作10次才往后端發(fā)一次請(qǐng)求撵摆，這樣從前端就做到了后臺(tái)的流量控制底靠，把流量控制到訪問(wèn)的最外層是最好的，盡量不要讓請(qǐng)求落到底層特铝。
4暑中、壓縮傳輸
http壓縮可以對(duì)純文本可以壓縮至原內(nèi)容的40%, 從而節(jié)省了60%的數(shù)據(jù)傳輸，GZIP是一種常用的壓縮編碼鲫剿。因此痒芝，對(duì)文本類型的資源如CSS、JS牵素、HTML啟用GZIP壓縮加速http傳輸速度。
5澄者、減少cookie傳輸
cookie會(huì)包含在每次請(qǐng)求和響應(yīng)中笆呆，如果cookie過(guò)多會(huì)影響http響應(yīng)速度请琳，所以高并發(fā)情況下盡量控制cookie的傳輸量，nginx對(duì)cookie傳輸默認(rèn)是做了限制的赠幕。另外俄精，像CSS、JS榕堰、圖片等靜態(tài)資源可以啟用單獨(dú)域名竖慧，禁用cookie對(duì)靜態(tài)資源的傳輸，這樣就能大大提高效率逆屡。
6圾旨、瀏覽器緩存
高并發(fā)情況下，可以將一些不怎么變動(dòng)的東西緩存到瀏覽器cache中魏蔗，或者一些活動(dòng)內(nèi)容可以提前將內(nèi)容在客戶端緩存起來(lái)砍的，以免活動(dòng)開(kāi)始大量請(qǐng)求涌入服務(wù)器。
7莺治、CDN
之前的文章有講過(guò)CDN的概念廓鞠，它就是一個(gè)靜態(tài)內(nèi)容分發(fā)網(wǎng)絡(luò)，本質(zhì)就是靜態(tài)資源的緩存谣旁，可以將靜態(tài)資源放到CDN上床佳，這樣，用戶就能離自己最近的地方獲取到資源榄审，大大提高了用戶訪問(wèn)速度砌们。
8、反向代理
常用的反向代理nginx除了負(fù)載均衡功能瘟判，它也可以通過(guò)配置緩存功能來(lái)加速請(qǐng)求響應(yīng)速度怨绣，當(dāng)用戶第一次訪問(wèn)的時(shí)候靜態(tài)資源就可以被緩存到反向代理服務(wù)器上，這樣其他用戶的請(qǐng)求就能直接從反向代理服務(wù)器直接獲取返回拷获，這樣也就直到了靜態(tài)資源緩存的作用篮撑。
以上是小猿圈web前端講師對(duì)于網(wǎng)站性能優(yōu)化方案的介紹，大家學(xué)到了嗎匆瓜？當(dāng)然大家可以在學(xué)習(xí)過(guò)程中加一點(diǎn)自己工作的經(jīng)驗(yàn)赢笨，估計(jì)會(huì)有更好的優(yōu)化方案，希望大家能做出更酷的頁(yè)面驮吱。
