移动端性能优化

小布丁13
496 阅读4分钟

性能优化

概述

  1. PC优化手段在Mobile侧同样适用
  2. 在Mobile侧我们提出三秒种渲染完成首屏指标
  3. 基于第二点，首屏加载3秒完成或使用Loading
  4. 基于联通3G网络平均338KB/s(2.71Mb/s），所以首屏资源不应超过1014KB
  5. Mobile侧因手机配置原因，除加载外渲染速度也是优化重点
  6. 基于第五点，要合理处理代码减少渲染损耗
  7. 基于第二、第五点，所有影响首屏加载和渲染的代码应在处理逻辑中后置
  8. 加载完成后用户交互使用时也需注意性能

什么是RAIL?

  • Response响应
    1. 响应：处理事件应在50ms以内完成
  • Animation动画
    1. 每10ms一帧
  • Idle空闲
    1. 尽可能增加空闲时间
  • Load加载
    1. 在5s内完成内容加载并可以交互

减少重绘的方案

  • 利用DevTools识别paint的瓶颈
  • 利用will-change创建新的图层
    1. transform
    2. opacity

代码优化

  • Code splitting(代码拆分，按需加载)
  • Tree shaking 代码减重
  • 避免长任务
  • 避免超过1kb的行间脚本
  • 使用requestAnimationFram和requestIdleCallback 进行时间调度
  • 可见不可交互vs最小可交互资源集

V8优化机制

  • 脚本流
  • 字节码缓存
  • 懒解析

HTML优化

  • 避免节点深层级嵌套
  • 避免table布局
  • 压缩空白符
  • 删除注释
  • css&javascript尽量外链
  • 删除默认属性

资源的压缩与合并

  • HTML压缩
    1. 使用在线工具进行压缩
    2. 使用html-minifier
  • css压缩
  • js压缩

图片加载优化

  • 图片懒加载(lazy-loading)
  • 使用渐进式加载
  • 使用响应式图片
    1. Srcset属性的使用
    2. Sizes属性的使用
    3. picture使用

webpack优化构建

  • 不用于生产环境
    1. 自动更新
    2. 热更新
    3. DllPlugin
    • 避免打包时对不变的库重复构建
    • 提高构建速度
  • webpack性能优化-产出代码
    1. 体积小
    2. 合理分包，不重复加载
      1. splitChunks提取公有代码，拆分业务代码与第三方库
      2. 动态加载
    3. 速度更快，内存使用更少
    4. 小图片base64编码
    5. bundle加hash
    6. 懒加载
    7. 提取公共代码
    8. ingorePlugin
    9. 使用CDN加速
    10. 使用production
    • 自动开启代码压缩(terser-webpack-plugin)
    • vue和react 自动删除调试代码
    • 启动tree-shaking(ES6 Module才能让Tree-shaking生效)
    1. Scope Hosting(作用域提升)
      • 代码体积减小
      • 提升执行效率
    2. Tree-shaking
    3. babel7优化配置
    • 在需要的地方引入polyfill
    • 辅助函数的按需引入
    • 根据目标浏览器按需转换代码
    1. noParse（lodash）
    • 提高构建速度
    • 直接通知webpack忽略较大的库
    • 被忽略的库不能有import,require,define的引入方式
    • 上下文未用到的代码(dead code)
    • 基于Es6 import export
    • package.json里配置 sideEffects
    • webpack对资源进行缓存
      1. 每个打包的资源文件有唯一的hash值
      2. 充分利用浏览器缓存
    • 传输资源的压缩
      1. Gzip: 对传输资源进行体积压缩，可高达90%
      2. 如果配置Nginx启用Gzip

什么是首屏加载？怎么优化？

  • 资源体积过大？
    1. 资源压缩，传输压缩，代码拆分，Tree-shaking,HTTP/2,缓存
  • 首页内容太多
    1. 路由/组件/内容Lazy-loading,预渲染/ss, inlinecss;
  • 加载顺序 prefetch,preload

性能优化

  • 减少HTTP请求 原因：HTTP请求需要经历DNS查找，Tcp握手，浏览器发送Http请求,服务器处理请求并发回响应，浏览器接收响应。

  • 使用HTTP2 解析速度快;多路复用，首部压缩;优先级;服务器推送

  • 服务端渲染

  • 静态资源使用CDN

  • 将css放在文件头部，javascript文件放到尾部。

  • 使用字体图标 iconfont 代替图片图标

  • 善用缓存，不重复去加载相同资源

  • 压缩文件 accept-Encoding:gzip 启用压缩文件。

  • 图片优化

    1. 图片延迟加载
    2. 响应式图片
        <picture> <source srcset="banner_w1000.jpg" media="(min-width: 801px)"> <source srcset="banner_w800.jpg" media="(max-width: 800px)"> <img src="banner_w800.jpg" alt=""> </picture>
    1. 尽量使用css效果替换

  • 通过webpack 按需加载代码，提取第三方代码

  • 减少重排重绘

  • 使用 transform 和 opacity 属性更改来实现动画

avatar
文章
阅读
粉丝