靜態(tài)資源優(yōu)化
-
JPEG: 對(duì)彩色照片而廣泛使用的有損壓縮圖形格式
- 不適合: 線條圖形或者文字, 圖標(biāo)圖形, 因?yàn)閴嚎s算法不太適合這種類型, 并且不支持透明度
- 適合: 顏色豐富的圖片, 彩色圖大焦點(diǎn)圖, 通欄banner圖, 結(jié)構(gòu)不規(guī)則的圖形
-
PNG: 無(wú)損壓縮的位圖圖形格式, 支持索引, 灰度, RGB三種顏色以及Alpha通道特性
- 不適合: 無(wú)損壓縮所以彩色圖像體積圖像太大, 不太適合
- 適合: 純色, 透明, 線條繪圖, 圖標(biāo), 邊緣清晰, 有大塊相同顏色的區(qū)域, 顏色數(shù)少, 但需要透明
-
Gif: 以8位色重現(xiàn)真彩色的圖像, 僅僅支持完全透明和完全不透明, 如果需要比較通用的動(dòng)畫(huà), gif是唯一選擇
- 不適合: 每個(gè)像素只有8個(gè)比特位, 不適合存儲(chǔ)彩色圖片
- 適合: 動(dòng)畫(huà), 圖標(biāo)
-
webp現(xiàn)代圖像格式, 可為圖像提供無(wú)損壓縮和有損壓縮, 非常靈活
- 同時(shí)保證一定程序上圖像質(zhì)量和比較小的體積, 可以插入多幀, 實(shí)現(xiàn)動(dòng)畫(huà)效果; 可以設(shè)置透明度; 采用8位壓縮算法; 無(wú)損的webp比PNG小26%; 有損的webp比JPEG小25-34%; 比gif更好的動(dòng)畫(huà)
- 不適用: 最多處理256色, 不適合于彩色圖片
- 適合: 圖形和半透明圖形
-
用工具進(jìn)行圖片壓縮
- 壓縮png
- npm install -g node-pngquant-native jdf-png-native
- 跨平臺(tái), 壓縮比高, 壓縮png24非常好
- 壓縮jpg
- npm install -g jpegtran
- 跨平臺(tái)
- 壓縮gif
- Gifsicle: 通過(guò)改變每幀的比例, 減小gif文件大小, 同時(shí)可以使用透明來(lái)達(dá)到更小的文件大小
- 使用方式
- 優(yōu)化級(jí)別設(shè)置為不小于2, 1的話基本不壓縮 gifsicle --optimize=3 out.gif in.gif
- 將透明部分截去掉: gifsicle --optimize=3 --crop-transparency out.gif in.gif
- 壓縮png
-
圖片尺寸隨著網(wǎng)絡(luò)環(huán)境的變化
- 不同的網(wǎng)絡(luò)環(huán)境, 加載不同尺寸和像素的圖片, 通過(guò)在圖片url后綴加上不同的參數(shù)改變
-
響應(yīng)式圖片
- JavaScript綁定事件檢測(cè)窗口大小
- css媒體查詢
- img標(biāo)簽屬性 (srcset)
-
逐步加載圖像
- 統(tǒng)一占位符
- 使用LQIP
- 低質(zhì)量圖像占位符
- npm install lqip
- 使用SQIP
- 基于SVG的圖像占位符
- npm install sqip
-
更好的解決方案
- WebFont代替圖片(圖標(biāo), 切圖等)
- 使用Data URI代替圖片(Base64)
- 采用Image Spriting
-
圖片服務(wù)器自動(dòng)優(yōu)化解密
圖片服務(wù)器自動(dòng)優(yōu)化是可以在圖片url鏈接上增加愛(ài)不同特殊的參數(shù), 服務(wù)器自動(dòng)生成
不同格式, 大小, 質(zhì)量的圖片
-
處理方式:
- 圖片裁剪: 按照長(zhǎng)邊, 短邊, 天聰, 拉伸等縮放
- 圖片格式轉(zhuǎn)換: 支持png,gif,jpg,webp等不同圖片的壓縮率
- 圖片吹: 添加圖片水印, 高斯模糊, 重心處理, 裁剪變寬等
- AI能力: 鑒別黃以及智能摳圖, 智能排版,智能配色, 智能合成等AI
-
html優(yōu)化
精簡(jiǎn)代碼, 減少嵌套
減少dom節(jié)點(diǎn)數(shù)
減少無(wú)語(yǔ)義代碼
刪除http或http (URL與當(dāng)前協(xié)議頭一致的時(shí)候, 或者此url在多個(gè)協(xié)議頭都可以用的時(shí)候)
刪除多余空格, 換行, 縮進(jìn)
刪除冗余標(biāo)簽屬性
使用相對(duì)路徑url
-
css文件盡量放在頁(yè)面頭部
- css加載不會(huì)阻塞dom解析,但是會(huì)阻塞dom tree渲染, 也會(huì)阻塞后面js的執(zhí)行
- 任何body元素之前, 可以確保在部分中解析所有css樣式, 從而減少了瀏覽器重排文檔的次數(shù)
- 如果放置在頁(yè)面底部 那要等待嘴壺一個(gè)css文件下載完成, 此時(shí)出現(xiàn)白屏
-
JS引用放在HTML底部
- 放置js的加載, 解析, 執(zhí)行對(duì)阻塞頁(yè)面的元素正常渲染
-
增加用戶體驗(yàn)
- 設(shè)置favicon.ico
- 增加首屏必要的css和js (骨骼屏)
-
css優(yōu)化
- 提升CSS渲染性能
- 謹(jǐn)慎使用expensive屬性, 如:nth-child偽類, position:fixed;定位
- 盡量減少樣式層級(jí)數(shù), 如 div ul li span i {color: blue;}
- 盡量避免使用占用更多CPU和內(nèi)存的屬性, text-indent: -9999px;
- 盡量避免使用耗電量大的屬性, 比如CSS3 3D transforms css transitions, Opacity
- 合理使用css選擇器
- 盡量避免使用CSS表達(dá)式: background-color: expression(Math.random() > 0.5 ? 'red' : 'blue')
- 盡量避免使用通配符選擇器
- 盡量避免類正則的屬性選擇器
- 提升CSS加載文件的性能
- 使用外鏈的css
- 避免使用@import (阻塞css文件的加載和js文件)
- 精簡(jiǎn)css代碼
- 縮寫(xiě)語(yǔ)句
- 刪除不必要的0
- 刪除不必要的單位
- 刪除過(guò)多的分好, kongge,述職
- 減少樣式表的大小(壓縮)
- 合理使用webFonts
- 將字體部署到CDN上
- 將字體以BASE64的形式保存在css中, 通過(guò)localStorage進(jìn)行緩存
- Google字體因?yàn)槟承┎豢煽咕茉? 應(yīng)該使用國(guó)內(nèi)托管服務(wù)
- CSS動(dòng)畫(huà)優(yōu)化
- 盡量避免使用動(dòng)畫(huà)
- 延遲動(dòng)畫(huà)初始化
- 結(jié)合SVG
- 提升CSS渲染性能
-
提升JS文件加載性能
- 加載元素的順序 Js文件放在body
- js變量和函數(shù)優(yōu)化
- 盡量使用id選擇器
- 避免使用eval
- js函數(shù)保持簡(jiǎn)介
- 使用事件節(jié)流函數(shù)和事件委托
- JS動(dòng)畫(huà)優(yōu)化
- 避免使用大量JS動(dòng)畫(huà)
- 盡量使用CSS3動(dòng)畫(huà)
- 盡量使用Canvas動(dòng)畫(huà)
- 合理使用requestAnimationFrame動(dòng)畫(huà)代替setTimeout, setInterval
- 合理使用緩存
- 合理緩存DOM對(duì)象
- 緩存列表長(zhǎng)度
- 使用可緩存的Ajax
-
對(duì)Javascript進(jìn)行緩存
- 對(duì)Cookie設(shè)置有效時(shí)間
- sessionStorage 頁(yè)面與頁(yè)面之間的傳值
- indexDB 索引數(shù)據(jù) (沒(méi)有網(wǎng)絡(luò)的情況下可以使用, 石墨文檔等)
- localStorage 瀏覽器存儲(chǔ)值
- 緩存靜態(tài)文件內(nèi)容(JS/css)
- 緩存補(bǔ)償變更的API接口數(shù)據(jù)
- 存儲(chǔ)地理位置信息
- 瀏覽在頁(yè)面的具體位置
-
JS模塊化加載方案和選型
- commonjs
- amd
- cmd
- es6
