大前端性能体系建设，记住这几条tips

最新推荐文章于 2024-08-02 21:06:55 发布

傲娇的koala

最新推荐文章于 2024-08-02 21:06:55 发布

阅读量233

点赞数

文章标签：编程语言 java python 人工智能面试

原文链接：https://mp.weixin.qq.com/s?__biz=MzUxNzk1MjQ0Ng==&mid=2247505121&idx=1&sn=f7f41a7bacfafcc422273e7d7b209cb7&chksm=f992d230cee55b260a83adf42948792edbff1b49ae3de305f264c35ebef0f7ce2102d3acec9b&scene=126&&sessionid=0

版权

前端是离用户最近的战场，而前端性能直接影响了用户体验。可以说，性能优化是初、中级工程师向高级工程师进阶的必学知识点，以及核心技能。

性能优化的商业价值

对于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性能社区目前已经和前端早早聊社区建立战略合作，赋能更多前端开发者。

这次带给大家的是由HeapDump性能社区出品的【大前端性能优化训练营】，本课程带你从实际应用角度出发，结合【理论+实践】讲讲你最关心的前端性能优化问题！

历时11天，3位专家，5节直播课程，带你免费玩转大前端性能优化。

训练营亮点

高质量直播与讲师面对面实时互动、加深理解；还提供相关作业练习、巩固你的学习成果。