背景
H5移動前端的產品中，頁面上的功能無疑很重要，但是性能同樣是用戶體驗中不可或缺的一環。不管是在各瀏覽器還是webview中的H5，都有渲染性能不及nativeApp的缺陷，如果不把性能優化做起來，非常影響影響用戶使用產品的積極性
加載優化
- CSS放在頁面最上部，javascript放在頁面最下面
瀏覽器會在下載完成全部CSS之后才對整個頁面進行渲染，因此最好的做法是將CSS放在頁面最上面，讓瀏覽器盡快下載CSS。如果將 CSS放在其他地方比如 BODY中，則瀏覽器有可能還未下載和解析到 CSS就已經開始渲染頁面了，這就導致頁面由無 CSS狀態跳轉到 CSS狀態，用戶體驗比較糟糕，所以可以考慮將CSS放在HEAD中 - 合并壓縮css，js
減少資源請求的次數，利用gulp或者webpack等前端構建工具進行合并壓縮
gulp
壓縮js gulp-uglify
壓縮css gulp-clean-css
webpack
壓縮js uglifyjsplugin
壓縮css,沒找到好例子，用個自己的，需要插件extract-text-webpack-plugin
{
test: /\.css|scss$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use:[
{
loader: 'css-loader',
options: {
minimize: true //css壓縮
}
},
{
loader: 'postcss-loader'
},
{
loader: 'sass-loader'
}
]
})
},
- CDN加速
部署CDN服務器，或者使用第三方的CDN加速服務，優化不同地域接入網站的帶寬速度。但是使用第三方的也要考慮具體使用情況，有些第三方真的很慢。。
- 預加載loading
頁面可使用增加Loading的方法，資源加載完成后再顯示頁面，增加一個緩沖頁面，也可以防止上一個頁面未加載完用戶對頁面進行操作引起不必要的錯誤。但Loading時間過長，會造成用戶流失
圖片優化
- 圖片壓縮
轉換成base64原理
webpack中轉換成base64
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 8192,//8192以下的壓縮變成base64
name: './img/[hash].[ext]'//不壓縮生成圖片路徑
}
}
gulp
gulp-imagemin
- 圖片懶加載
使用lazyload
lazyload詳解
服務端優化
- 接口合并
如果頁面需要請求兩部分以上的數據接口，建議將其合并，否則會增加一次http請求。 - 減少接口數據量
有的時候，服務端會把一些無關緊要的數據返回回來，尤其是類似于更新時間、狀態等信息，如果在客戶端不影響內容的邏輯展示，不妨在接口返回的數據中直接去掉這些內容。 - 緩存
緩存接口數據，在一些數據新舊敏感性不高的場景下很有作用，在非首次加載數據時候優先使用上次請求來的緩存數據，可以讓頁面更加快速地渲染出來，而不用等待一個新的http請求結束之后再渲染。若有數據變化也可做二次渲染 - gzip
開啟gzip更大力度的壓縮
nginx-gzip
待更新
