圖片相關
使用正確的圖片格式
JPEG
它由聯合圖像專家組(Joint Photographic Experts Group)開發，它用有損壓縮方式去除冗餘的圖像和彩色數據，在獲得極高的壓縮率的同時能展現十分豐富生動的圖像，即可以用較少的磁盤空間得到較好的圖片質量。
常用文件擴展名爲.jpg，.jpeg，.jpe
不適合：線條圖形和文字，圖標圖形。
非常適合：顏色豐富的照片，彩色圖大焦點圖，通欄banner；結構不規則的圖形。
PNG
便攜式網絡圖形(Portable Network Graphics)是一種無損壓縮的位圖片形格式。
特點：體積小，同時還支持真彩和灰度級圖像的Alpha通道透明度。
不適合：彩色圖像體積太大，不適合
適合：純色，透明，圖標
GIF
圖形交換格式(Graphics Interchange Format)是一種位圖圖形格式，以8位色（256種顏色）重現真彩色的圖像。
不適合：彩色圖片
適合：動畫，圖標
WebP
由於目前互聯網上傳輸的數據有65%都是圖片，WebP就是出於減少數據量、加速網絡傳輸的目的而開發的。WebP (發音"weppy")，是一種同時提供了有損壓縮與無損壓縮的圖片文件格式，派生自圖像編碼格式VP8 。
WebP格式圖像的體積要比JPEG格式圖像小40%。
不適合：彩色圖片
適合：圖形和半透明圖像
圖片壓縮
壓縮png
壓縮jpg
壓縮gif
圖片預加載
1.html標籤
<img src="xxxx" style="display:none" />
2.使用image對象
const image = new Image();
image.src="https://xxx.xxx.jpg";
3.使用preload,prefetch和preconnect
<link rel="preload" href="src/css/index.css" as="style" >
<link rel="prefetch" href="src/image/a.png" >
<link rel="dns-prefetch" href="https://xx.com">
<link rel="preconnect" href="https://xx.com" crossorigin>
圖片尺寸動態加載
- 不同網絡環境（wifi/3g/4g），加載不同的尺寸圖片，在url中加參數後綴動態加載。
eg: https://my.cdn.com/image/200_300/a.png - js綁定事件檢測窗口大小
- css媒體查詢
@media screen and(max-width:640px) {
this_image{ width:640px; }
}
- img標籤屬性
<img srcset="img-320.jpg,img-640w.jpg 2x, img-960w.jpg 3x" src="img-960w.jpg" alt="img" />
真的需要圖片嗎？
- Web Font代替圖片
- 使用Data URI代替圖片
- 使用雪碧圖
HTML
精簡代碼
- 減少HTML的嵌套
- 減少DOM節點數
- 減少無語意代碼
eg:<div> class="clear"></div>清除浮動 - 刪除多餘的
http或者https - 刪除多餘的空格，換行符，縮進以及不必要的註釋
- 使用相對路徑的URL
- 省略冗餘標籤和屬性
文件放在合適的位置
- css樣式文件鏈接儘量放在頁面頭部
CSS加載不會阻塞DOM Tree解析，但是會阻塞DOM Tree渲染，也會阻塞後面的js執行。 - JS引用放在HTML底部
防止JS的加載、解析、執行對阻塞頁面後續元素的正常渲染。
首屏資源加載
首屏僅加載必要的CSS和JS
CSS
提升CSS渲染性能
- 謹慎使用expensive屬性
eg::nth-child以及position:fixed定位等。 - 儘量減少樣式層級數
eg:div ul li span { color: red;} - 儘量避免使用佔用過多CPU的內存的屬性
eg:text-indnt: -99999px - 儘量避免使用耗電大的屬性
eg: css3 3d transforms、css3 transtitions、 opacity
適當的CSS選擇器的使用
- 儘量避免使用css表達式
eg:background-color:expression((new Date()).getHours()%2?'#fff':'#000'); - 儘量避免使用通配符選擇器
eg:body > a{font-size:32px} - 儘量避免類正則的屬性選擇器
eg:*= |= ^= $=
提升CSS文件加載性能
- 使用外鏈的CSS
- 儘量避免使用 @import
精簡CSS代碼
- 使用縮寫語句
- 減少不必要的0
- 刪除不必要的單位，px
- 刪除過多的分號
- 刪除空格和註釋
動畫相關
- 儘量避免同時動畫
- 延遲動畫的初始化
- 結合SVG
減少迴流重繪
- 避免過多樣式嵌套
- 避免使用CSS表達式
- 使用絕對定位，可以讓動畫元素脫離文檔流
- 避免使用table佈局
- 儘量不適用float佈局
- 圖片最好設置好width和height
- 避免頻繁設置樣式，最好把style屬性設置完成後，一次性更改
JS相關
JS變量和函數優化
- 儘量使用id選擇器
- 避免使用eval
- 使用事件節流函數
- 事件委託
js動畫優化
- 減少JS動畫，儘量使用css3動畫
- 儘量使用canvas動畫
- 合理使用raf動畫代替setTimeout、setInterval
合理使用緩存
- 緩存dom對象
- 緩存列表長度
- 使用可緩存的ajax
DOM編程優化
- 使用fragment合併dom操作
- 使用流行框架react、vue等VDom
靜態文件壓縮
- html–> html-minifier
- css–>clean-css
- js–>uglify-js
Webpack
建議使用新版本
其他
- 按需加載
- 資源接口上CDN
- 資源緩存
- 減少http請求數
- 減少不必要的cookie
- gzip