前端是离用户最近的战场，而前端性能直接影响了用户体验。可以说，性能优化是初、中级工程师向高级工程师进阶的必学知识点，以及核心技能。
性能优化的商业价值
- 对于mbify而言，主页加载的速度每提高100ms，转化率就会增加1.11%，平均年收入就会增加380000美元；
- Pinterest重建了他们的页面以实现性能，使感知等待时间减少了40％，从而将搜索引擎流量和注册量提高了15％；
- 通过将平均页面加载时间减少850毫秒，COOK发现他们能够将转化率提高7％，将跳出率降低7％，并将每个页面的页面数量增加10％；
可见前端性能优化对我们的影响和收入直接挂钩，高性能的网站比表现不佳的网站更好地吸引和留住用户。
“50%的用户会放弃访问加载超过3秒的网站”
如果高性能是一种资产，那么表现不佳就是一种负担。性能优化是一个项目发展到一定时期之后绕不开的话题，也是每个工程师心中永远在撩拨的刺，产品的好坏决定着客户的体验，那么一款产品的好坏有很多因素，其中性能是决定因素。
- 当用户能够在 2 秒以内得到响应时，会感觉系统的响应很快；
- 当用户在 2-5 秒之间得到响应时，会感觉系统的响应速度还可以；
- 当用户在 5-8 秒以内得到响应时，会感觉系统的响应速度很慢，但是还可以接受；
- 而当用户在超过 8 秒后仍然无法得到响应时，会感觉系统糟透了，或者认为系统已经失去响应，而选择离开这个 Web 站点，或者发起第二次请求。
一个网站的性能好坏是留住用户和实现变现的基础，也是我们前端工程师每天都要关注的问题。
两个方向全解前端性能优化
性能优化的点非常的多，有的小伙伴觉得记起来非常的麻烦，大家可以根据这两个方向来记忆：
- 加载时优化：预加载、缓存、网络层、页面解析、静态资源、
- 运行时优化：避免强制同步布局、长列表优化、避免js执行时间过长、并行计算-service worker、Composite分层绘制、滚动事件性能优化、Passive event listeners、动画
加载时优化
从用户体验上面来讲，如何让别人觉得你的网站性能不错，即使是一个这只是一个假象，那就是白屏时间和首屏时间：
- 白屏时间是指浏览器从响应用户输入网址地址，到浏览器开始显示内容的时间。
- 首屏时间是指浏览器从响应用户输入网络地址，到首屏内容渲染完成的时间。
- 影响白屏时间的因素：网络，服务端性能，前端页面结构设计。
- 影响首屏时间的因素：白屏时间，资源下载执行时间。
所以我们可以优先加载首屏资源，非首屏资源按需加载或懒加载，以加快首屏渲染速度。
我们可以从这个过程来挖掘优化点：交给DNS域名解析 -> 找到对应的IP地址 -> 然后进行TCP连接 -> 浏览器发送HTTP请求 -> 服务器接收请求 -> 服务器处理请求并返回HTTP报文 -> 以及浏览器接收并解析渲染页面通过缩短请求时间，从而去加快网站的访问速度，提升性能。
这个过程中可以提升性能的优化的点：
- DNS解析优化，浏览器访问DNS的时间就可以缩短
- 使用HTTP2
- 减少HTTP请求数量
- 减少http请求大小
- 服务器端渲染
- 静态资源使用CDN
- 资源缓存，不重复加载相同的资源
运行时性能优化
另一方面我们可以从运行时的性能来优化，运行时性能是指页面运行时的性能表现，而不是页面加载时的性能。可以通过chrome开发者工具中的 Performance 面板来分析页面的运行时性能。
- 减少重绘与重排
- 避免页面卡顿
- 长列表优化
- 滚动事件性能优化
- 使用 Web Workers
- 写代码时的优化点
性能领域专家带你玩转前端性能优化
Donald Knuth 有一句名言：「过早优化乃万恶之源」。目前我们学习和解决前端性能优化问题，往往是在网上的一些教程，再或者就是看一些陈旧的教程文章，这样学来的知识不但不系统，而且没有很好的方法论总结。前端性能优化没有标准答案，想要面面俱到罗列出来，并非易事，它针对方方面面的资源都有不同的方式。
HeapDump性能社区是国内首个专注性能领域的垂直技术社区,十几万开发者在这里讨论和分享性能知识，作为性能领域最重要的一大板块——大前端性能性能优化，HeapDump性能社区目前已经和前端早早聊社区建立战略合作，赋能更多前端开发者。
