背景
H5移動前端的產(chǎn)品中，頁面上的功能無疑很重要揪罕，但是性能同樣是用戶體驗中不可或缺的一環(huán)。不管是在各瀏覽器還是webview中的H5耸序，都有渲染性能不及nativeApp的缺陷鲁猩，如果不把性能優(yōu)化做起來坎怪，非常影響影響用戶使用產(chǎn)品的積極性
加載優(yōu)化
- CSS放在頁面最上部廓握，javascript放在頁面最下面
瀏覽器會在下載完成全部CSS之后才對整個頁面進行渲染，因此最好的做法是將CSS放在頁面最上面隙券，讓瀏覽器盡快下載CSS。如果將 CSS放在其他地方比如 BODY中娱仔，則瀏覽器有可能還未下載和解析到 CSS就已經(jīng)開始渲染頁面了，這就導致頁面由無 CSS狀態(tài)跳轉(zhuǎn)到 CSS狀態(tài)耐朴，用戶體驗比較糟糕，所以可以考慮將CSS放在HEAD中 - 合并壓縮css筛峭，js
減少資源請求的次數(shù)，利用gulp或者webpack等前端構(gòu)建工具進行合并壓縮
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加速服務盼产，優(yōu)化不同地域接入網(wǎng)站的帶寬速度。但是使用第三方的也要考慮具體使用情況啦辐，有些第三方真的很慢。芹关。
- 預加載loading
頁面可使用增加Loading的方法，資源加載完成后再顯示頁面侥衬，增加一個緩沖頁面，也可以防止上一個頁面未加載完用戶對頁面進行操作引起不必要的錯誤轴总。但Loading時間過長博个，會造成用戶流失
圖片優(yōu)化
- 圖片壓縮
轉(zhuǎn)換成base64原理
webpack中轉(zhuǎn)換成base64
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 8192,//8192以下的壓縮變成base64
name: './img/[hash].[ext]'//不壓縮生成圖片路徑
}
}
gulp
gulp-imagemin
- 圖片懶加載
使用lazyload
lazyload詳解
服務端優(yōu)化
- 接口合并
如果頁面需要請求兩部分以上的數(shù)據(jù)接口，建議將其合并盆佣，否則會增加一次http請求。 - 減少接口數(shù)據(jù)量
有的時候共耍，服務端會把一些無關(guān)緊要的數(shù)據(jù)返回回來，尤其是類似于更新時間痹兜、狀態(tài)等信息，如果在客戶端不影響內(nèi)容的邏輯展示字旭，不妨在接口返回的數(shù)據(jù)中直接去掉這些內(nèi)容。 - 緩存
緩存接口數(shù)據(jù)谐算，在一些數(shù)據(jù)新舊敏感性不高的場景下很有作用，在非首次加載數(shù)據(jù)時候優(yōu)先使用上次請求來的緩存數(shù)據(jù)斤儿，可以讓頁面更加快速地渲染出來，而不用等待一個新的http請求結(jié)束之后再渲染往果。若有數(shù)據(jù)變化也可做二次渲染 - gzip
開啟gzip更大力度的壓縮
nginx-gzip
待更新
