w3ctech

性能优化の备忘录摘要(2017版)

  1. 把如何渐进式提升性能作为性能优化的指导思想
  2. 将assets(资源)分成三种类型:Core(核心型)、Enhancement(增强型)、Extras(其它)
  3. 页面加载时应首先载入Core,然后在DomContentLoaded事件触发时载入Enhancement,最后在Load事件触发时载入Extras
  4. 在对js文件进行模块化、合并、压缩等操作的情况下使用HTTP/2
  5. 在混合内容包含警告信息的情况下,实施监控
  6. 使用CDN(需要支持HTTP2,需要核实,请点击这里)
  7. 对消息头采用HPACK进行压缩传输
  8. 采用ZopfliBrotli等压缩算法对数据进行压缩
  9. 使用Service Worker
  10. 使用符合规范的CSS或者尽可能地使用HTTP2自带的服务器推送功能
  11. 在页面中载入Web font系列的字体子集
  12. 图片应做成响应式、(大尺寸图片建议)使用渐进式JPEG、使用mozJPEGtinyPNG等工具对图片进行压缩
  13. 针对React/Angular/Ember等框架的渲染机制来优化启动速度
  14. 单独使用Progressive Web AppAccelerated Mobile Pages或者结合使用Progressive Web AppAccelerated Mobile Pages
  15. 部署WebPageTest
  16. 在适当的时候,在项目中使用Grunt、Gulp以及Webpack等工具构建
  17. 针对资源优化的小技巧:
    • 使用dns-prefetch(<link rel="dns-prefetch" href="//fonts.googleapis.com")
    • 使用prefetch(<link rel="prefetch" href="http://daker.me/2013/05/hello-world.html"/>)
    • 使用prerender(<link rel="prerender" href="http://daker.me/2013/05/hello-world.html"/>)
    • 使用preload(<link rel="preload" as="script" href="map.js" media="(min-width: 601px)">)
  18. 提升对性能的感知能力(使用skeleton screen,使用懒加载的方式载入字体或者HTTP开销很大的JavaScript脚本。例如,视频、iframe、轮播图)
  19. 目标:启动渲染所花费的时间应控制在1s以内
  20. 目标:SpeedIndex ± 1000

如果你觉得还有一些比较重要的优化手段被我遗漏,请一定要告诉我,谢谢。

w3ctech微信

扫码关注w3ctech微信公众号

共收到0条回复

只有w3ctech成员才能发表和回复。
登录 或者 注册 后发表或回复!