移动端h5之性能优化

背景

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'
                      }
               ]
           })
       },

webpack包过大原因

• 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

---

待更新