V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
MRwaite
V2EX  ›  程序员

[译] 前端 2017 性能优化清单

  •  2
     
  •   MRwaite · 2016-12-23 23:44:26 +08:00 · 2887 次点击
    这是一个创建于 2893 天前的主题,其中的信息可能已经有所发展或是发生改变。

    这两天翻译的一篇,讲 2017 年网页性能进行优化指南的文章. 完整版的译文: github 或者 个人博客

    初次翻译,翻译不好的地方,请予以指正. 以下是文章中具体 33 个优化点:

    1. 比你的最快的竞争对手快 20% 。
    2. 100 毫秒的响应时间,每秒 60 帧。
    3. First meaningful paint 时间小于 1.25 秒, SpeedIndex 小于 1000
    4. 选择和设置构建工具
    5. 渐进增强
    6. Angular , React , Ember 和 co
    7. AMP or Instant Articles
    8. 选择 CDN
    9. 设置资源优先级
    10. 使用 “ cutting-the-mustard ” 技术
    11. 考虑微优化和渐进式启动
    12. 正确设置 HTTP cache 头部
    13. 限制第三方库和异步加载的 JavaScript
    14. 正确的图片优化
    15. 让图像优化提高到下一个水平
    16. web fonts 优化
    17. 快速推送 critical CSS 样式
    18. 使用 tree-shaking 和 code-splitting 减少有效负载
    19. 提高渲染性能
    20. 通过预热连接加速传输
    21. 准备好迎接 HTTP/2
    22. 正确部署 HTTP/2
    23. 确保服务的安全性
    24. 服务和 CNDs 支持 HTTP/2 ?
    25. Brotli or Zopfli compression
    26. 启用了 OCSP stapling 吗?
    27. 你已经采用 IPv6 了?
    28. 启用了 HPACK 压缩?
    29. 为缓存和网络降级启用 service workers 了?
    30. 监控混合内容的警告
    31. 在 DevTools 中优化了你的开发工作流吗?
    32. 你在代理浏览器和旧版浏览器中测试过吗?
    33. 建立了持续的监控?
    5 条回复    2016-12-25 14:57:24 +08:00
    yfgeek
        1
    yfgeek  
       2016-12-24 05:13:08 +08:00
    imxieke
        2
    imxieke  
       2016-12-24 08:54:50 +08:00 via Android
    国内支持 ipv6 就景安一家貌似 少的可怜。
    isCyan
        3
    isCyan  
       2016-12-24 14:46:21 +08:00
    博客主题很好看,文章也赞
    MRwaite
        4
    MRwaite  
    OP
       2016-12-25 14:53:32 +08:00
    @isCyan 感谢。博客主题是 hexo-theme-apollo ,初次翻译很多翻译不到位的见谅。
    MRwaite
        5
    MRwaite  
    OP
       2016-12-25 14:57:24 +08:00
    @imxieke 这篇文章只是作为 2017 年性能优化指南性的文章嘛,还有有一定超前性的( AMP , RAIL performance model , HTTP/2 都是未来的趋势啊),作者在最后也这么说了。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1051 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 18:38 · PVG 02:38 · LAX 10:38 · JFK 13:38
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.