移动端页面性能优化指引

性能指标

  • 首次有效渲染 英文缩写为FMP，是指主要内容出现在页面上所需的时间，最好在1s以内
  • 英雄渲染时间 页面最重要部分渲染完成所需的时间
  • 可交互时间 英文缩写为TTI，是指页面布局已经稳定，关键的页面字体已经可见，主进程可以足够的处理用户的输入
  • 页面帧率 英文缩写为FPS，60FPS及以上为佳

网络资源加载

  1. 网络资源加载方面，主要的优化思路是减少资源体积，提高加载效率，移动H5前端性能优化指南开篇总结的很详细

  2. 另外，随着https项目改造，http2.0已经在ieg全面使用，http2.0为我们带来了很多新的优化手段：

  3. 图片优化也是一个很热门的优化手段，特别是对于有很多图片需要展示的站点。我们内部在蜘蛛平台上已经开始使用webp和sharpp技术来优化图片。web前端优化之图片优化这篇文章讲的比较细。
  4. 对于用到特殊字体的页面，字体文件对于网络加载来说也是一个很大的开销。FSP工具可以减少中文字体文件的大小

存储及缓存

  1. 常见存储方式
    1. cookie
    2. localStorage
    3. sessionStorage
    4. cacheStorage
    5. web SQL/indexDB
  2. 常见缓存
    1. 浏览器缓存，即响应头（response header）中带的缓存指令，可以看看这篇文章
    2. 使用serviceworker缓存或离线页面。对于serviceworker不了解的同学，可以看看这篇文章。MDN上的Using Service Workers手把手教你如何使用serviceworker
    3. 客户端缓存，即内嵌在客户端里的页面，可以通过客户端的能力缓存部分资源文件甚至整个页面

页面渲染

性能调试及分析

chrome devtools的timeline就是最好的性能调试工具，看完如何使用 Timeline 工具这篇官方文档就能掌握用法了

另有一些常用的搜集和分析性能数据的方法：

性能监控

性能监控工具很多，公司内也有一些前端页面的性能监控平台，强烈推荐Lighthouse：

results matching ""

    No results matching ""