仓库地址: fe-performance-journey
image.PNG
前端需要性能优化么?
性能优化一直以来都是前端工程领域中的一个重要部分. 很多资料 [1][2][3] 表明, 网站应用的性能优化对于提高用户留存, 转化率等都有积极影响. 可以理解为, 提升你的网站性能, 就是提升你的业务数据(甚至是业务收入).
性能优化广义上包含前端优化和后端优化. 后端优化的关注点更多的时候是在增加资源利用率, 降低资源成本以及提高稳定性上. 相较于后端, 前端的性能优化会更直接与用户的体验挂钩. 从用户体验侧来说, 前端服务 5s 的加载时间优化缩减 80%(1s) 与后端服务 50ms 的响应优化缩减 80%(10ms) 相比, 用户的体验提升会更大. 因此很多时候, 与体验相关的性能的瓶颈会出现在前端.
image.PNG
如何学习前端性能优化?
作为前端工程师, 大家其实都具备一定的性能优化意识, 同时也有自己的优化 "武器库", 例如懒加载, 资源合并, 避免 reflow 等等. 虽然大家对性能优化都有自己的思路, 不过大多是分散在某几个点, 较难形成一个完整的体系. 业界也有很多优质的资料, 例如雅虎的性能优化 35 条[4], 但是 性能优化作为一个系统性工程, 大家想要系统性地去学习并不容易.
从用户开始访问你的网站应用, 到最终它在上面浏览信息, 操作交互, 其间经历了非常多的环节, 每个环节都有可能出现性能问题, 同时也是我们实现性能提升机会. 所以, 前端性能优化会要求你从整体维度来分析系统, 甚至是业务.
那么如何能够更有效地梳理与理解性能优化呢? 回想到每每面试都会被问到:"从地址栏输入 XXX 到访问之间经历了什么?" 其实我们也可以从这个视角来看待性能优化.
从访问开始, 用户可能会经历类似「查询缓存 -> 发送请求 -> 等待响应 -> 页面解析 -> 下载并处理各类静态资源 -> 运行时 -> 预加载(等待后续的请求)」这样一个不断往复的 "旅程" -- 也就是我们的「性能优化之旅」.web 应用在其中每一站都可能遇到性能问题, 当然也会有对应的优化手段.
所以在这次的「性能优化之旅」会沿着这条路径具体介绍每个环节中常见的性能问题以及优化技术. 通过与 Web 应用的访问流程相结合, 帮助大家全面理解与掌握前端的性能优化.
下面是整体的大纲:
image.PNG
如果准备好了, 咱们就可以出发了 --
旅途的行程路线
目前内容已全部更新至 fe-performance-journey 仓库中, 陆续会将内容同步. 如果希望尽快阅读相关内容, 可以直接去该仓库中浏览文章.
喜欢的朋友可以 star 一下, 后续也会继续更新更多性能优化相关的内容.
第一站 - 缓存
第二站 - 发送请求
第三站 - 服务端处理
第四站 - 下载与解析页面
第五站 - 页面静态资源
JavaScript
图片
字体
视频
第六站 - 运行时
第七站 - 预加载
尾声
TODO:
性能指标
性能监控
参考资料
- Driving user growth with performance improvements
- How Fast Should A Website Load in 2019?
- How long will you wait for a shopping website to load?
- Best Practices for Speeding Up Your Web Site (Yahoo)
- 17 Things People Absolutely Hate About Your Website
- Why Performance Matters
来源: http://www.jianshu.com/p/68d9ba2a310b