Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

【性能优化指南】带你全面掌握前端性能优化 🚀 #32

Open
alienzhou opened this issue Aug 15, 2019 · 0 comments
Open

Comments

@alienzhou
Copy link
Owner

✨仓库地址:fe-performance-journey

前端需要性能优化么?

性能优化一直以来都是前端工程领域中的一个重要部分。很多资料[1][2][3]表明,网站应用的性能优化对于提高用户留存、转化率等都有积极影响。可以理解为,提升你的网站性能,就是提升你的业务数据(甚至是业务收入)。

性能优化广义上包含前端优化和后端优化。后端优化的关注点更多的时候是在增加资源利用率、降低资源成本以及提高稳定性上。相较于后端,前端的性能优化会更直接与用户的体验挂钩。从用户体验侧来说,前端服务 5s 的加载时间优化缩减 80%(1s) 与后端服务 50ms 的响应优化缩减 80%(10ms) 相比,用户的体验提升会更大。因此很多时候,与体验相关的性能的瓶颈会出现在前端。

如何学习前端性能优化?

作为前端工程师,大家其实都具备一定的性能优化意识,同时也有自己的优化“武器库”,例如懒加载、资源合并、避免 reflow 等等。虽然大家对性能优化都有自己的思路,不过大多是分散在某几个点,较难形成一个完整的体系。业界也有很多优质的资料,例如雅虎的性能优化 35 条[4],但是 性能优化作为一个系统性工程,大家想要系统性地去学习并不容易。

从用户开始访问你的网站应用,到最终它在上面浏览信息、操作交互,其间经历了非常多的环节,每个环节都有可能出现性能问题,同时也是我们实现性能提升机会。所以,前端性能优化会要求你从整体维度来分析系统,甚至是业务。

那么如何能够更有效地梳理与理解性能优化呢?回想到每每面试都会被问到:“从地址栏输入XXX到访问之间经历了什么?”其实我们也可以从这个视角来看待性能优化。

从访问开始,用户可能会经历类似「查询缓存 -> 发送请求 -> 等待响应 -> 页面解析 -> 下载并处理各类静态资源 -> 运行时 -> 预加载(等待后续的请求)」这样一个不断往复的“旅程” —— 也就是我们的「性能优化之旅」。Web 应用在其中每一站都可能遇到性能问题,当然也会有对应的优化手段。

所以在这次的「性能优化之旅」会沿着这条路径具体介绍每个环节中常见的性能问题以及优化技术。通过与 Web 应用的访问流程相结合,帮助大家全面理解与掌握前端的性能优化。

下面是整体的大纲:

如果准备好了,咱们就可以出发了 ——

旅途的行程路线👇

目前内容已全部更新至 ✨ fe-performance-journey ✨ 仓库中,陆续会将内容同步。如果希望尽快阅读相关内容,可以直接去该仓库中浏览文章。喜欢的朋友可以去仓库 star 一下。

  • 第一站 - 缓存
  • 第二站 - 发送请求
  • 第三站 - 服务端处理
  • 第四站 - 下载与解析页面
  • 第五站 - 页面静态资源
    • JavaScript
    • CSS
    • 图片
    • 字体
    • 视频
  • 第六站 - 运行时
  • 第七站 - 预加载
  • 尾声
  • TODO:
    • 性能指标
    • 性能监控

参考资料

  1. Driving user growth with performance improvements
  2. How Fast Should A Website Load in 2019?
  3. How long will you wait for a shopping website to load?
  4. Best Practices for Speeding Up Your Web Site (Yahoo)
  5. 17 Things People Absolutely Hate About Your Website
  6. Why Performance Matters
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant