web前端優(yōu)化

2024-04-27 15:17:59

字體：大中小

供稿：網(wǎng)友

前面講了很多關(guān)于緩存清理和編碼設(shè)置的整合，今天我們說說web性能優(yōu)化Web性能優(yōu)化分為服務(wù)器端和瀏覽器端兩個(gè)方面。一、瀏覽器端，關(guān)于瀏覽器端優(yōu)化，分很多個(gè)方面1、壓縮源碼和圖片javaScript文件源代碼可以采用混淆壓縮的方式，CSS文件源代碼進(jìn)行普通壓縮，JPG圖片可以根據(jù)具體質(zhì)量來壓縮為50%到70%，PNG可以使用一些開源壓縮軟件來壓縮，比如24色變成8色、去掉一些PNG格式信息等。2、選擇合適的圖片格式如果圖片顏色數(shù)較多就使用JPG格式，如果圖片顏色數(shù)較少就使用PNG格式，如果能夠通過服務(wù)器端判斷瀏覽器支持WebP，那么就使用WebP格式和SVG格式。3、合并靜態(tài)資源包括CSS、Javascript和小圖片，減少HTTP請求。有很大一部分用戶訪問會(huì)因?yàn)檫@一條而取得最大受益4、開啟服務(wù)器端的Gzip壓縮這對文本資源非常有效，對圖片資源則沒那么大的壓縮比率。5、使用CDN或者一些公開庫使用第三方提供的靜態(tài)資源地址（比如jQuery、normalize.css）。一方面增加并發(fā)下載量，另一方面能夠和其他網(wǎng)站共享緩存。6、延長靜態(tài)資源緩存時(shí)間這樣，頻繁訪問網(wǎng)站的訪客就能夠更快地訪問。不過，這里要通過修改文件名的方式，確保在資源更新的時(shí)候，用戶會(huì)拉取到最新的內(nèi)容。7、把CSS放在頁面頭部，把JavaScript放在頁面底部這樣就不會(huì)阻塞頁面渲染，讓頁面出現(xiàn)長時(shí)間的空白。具體參考：野馬程序員：web性能優(yōu)化另，其他具體詳解：1、Web 前端優(yōu)化最佳實(shí)踐之內(nèi)容篇2、Web 前端優(yōu)化最佳實(shí)踐之 Server 篇3、Web 前端優(yōu)化最佳實(shí)踐之 Cookie 篇4、Web 前端優(yōu)化最佳實(shí)踐之 CSS 篇5、Web 前端優(yōu)化最佳實(shí)踐之 JavaScript 篇6、Web 前端優(yōu)化最佳實(shí)踐之圖象篇7、Web 前端優(yōu)化最佳實(shí)踐之 Mobile(iPhone) 篇如何提高網(wǎng)頁效率的14條建議如何提高網(wǎng)頁的效率（下篇）——Use YSlow to know why your web Slow二、服務(wù)器端優(yōu)化這里就不詳解了，直接看專欄吧Web項(xiàng)目開發(fā)性能優(yōu)化解決方案——服務(wù)端

上一篇：如何上傳base64圖片到七牛云存儲(chǔ)，然后返回圖片url呢？？

下一篇：（11）AngularJS 1.X 之自定義服務(wù)