重学前端
程劭非(winter)
前手机淘宝前端负责人
105348 人已学习
新⼈⾸单¥59
登录后,你可以任选4讲全文学习
课程目录
已完结/共 57 讲
开篇词+学习路线+架构图 (3讲)
重学前端
15
15
1.0x
00:00/00:00
登录|注册

性能:前端的性能到底对业务数据有多大的影响?

结果评估和监控
执行
技术方案
现状评估和建立指标
性能总论
性能优化

该思维导图由 AI 生成,仅供参考

你好,我是 winter。
从今天开始,我们就从前端知识学习的部分,过渡到了实践部分。这节课我来谈谈性能。
性能是个特别有意思的话题,在我之前的工作中,从入门的初级工程师到高级别的技术专家,大家都很喜欢谈性能,我以前参与晋升评审,每年总能听到很多关于性能的晋升述职。
那么,今天我就来谈谈我眼中的性能。

性能总论

while 循环快还是 for 循环快?
|0 是不是比 Math.floor 性能好?
网上随处可以见到一类对性能的讨论。一些新人也非常热衷此类讨论。但是实际上,它们除了让你写代码的时候纠结之外,毫无意义。
为什么这样讲呢?我想讲一个小故事。
从前有个工程师,特别注重代码细节,有一天他发现系统中的一段代码写的性能很差,因此,他用汇编重写了整段代码,执行效率足足提升了三倍。但是最后,大家发现,用户反馈性能丝毫没有提高,因为他优化的那个进程名字叫“System Idle”。
所以你看,性能优化不能只着眼于局部的代码。这里,我要提出一个我的观点:一切没有 profiling 的性能都是耍流氓凡是真正有价值的性能优化,必定是从端到端的业务场景建立体系来考虑的。
在我的认识中,性能体系的建立可以分成以下几部分:
现状评估和建立指标;
技术方案;
执行;
结果评估和监控。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

本文深入探讨了前端性能优化对业务数据的重要影响,并提出了一套完整的性能工程体系。作者强调性能优化需要从业务和用户体验需求出发,而非仅仅局限于技术层面。在现状评估和建立指标阶段,作者强调了从业务角度考量指标的重要性,并提出了秒开率作为性能指标的设计。在技术方案设计部分,文章介绍了基于Profiling结果分析的整体技术方案设计。在执行阶段,作者提出了纯管理、制度化和自动化三种工程实施方式,并强调了自动化执行方式的重要性。最后,文章强调了结果评估和监控的重要性,指出性能优化需要持续进行,并介绍了数据采集和展现的重要性。整体而言,本文通过实际案例和经验分享,深入浅出地介绍了前端性能优化的重要性和实施步骤,对于前端开发人员和技术团队具有一定的指导意义。

仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《重学前端》
新⼈⾸单¥59
立即购买
登录 后留言

全部留言(15)

  • 最新
  • 精选
  • ctw
    winter老师好,关于性能优化,我有一点疑问,如果把js,css都打包到html里面,会不会带来两个问题: 1. 请求数变少了,但是html变大了,请求html返回时间会变慢 2. html一般不设置缓存,这样很大的html每次刷新都会重新请求

    作者回复: 1.实践是检验真理的唯一标准,用你的业务实际测一测,不要纸上谈兵 2.所以需要html缓存来配合,不能做服务端渲染。

    2019-06-21
    5
  • Geek_883b55
    Winter老师您好,本篇文章看完之后给我的感觉是给了一个大概的方向,但是比如说监控工具具体怎么实施还不够清楚,希望老师能稍微具体的讲解一下,让我们学习一下大厂的技术和方案

    作者回复: 具体实施可以单独写一本书。

    2019-07-02
    3
    4
  • 让时间说真话
    Winter老师,关于线上监控的数据采集和数据显示您有好的插件或者方案推荐?
    2019-05-19
    3
    20
  • rh
    winter老师好,看了这篇文章,受益良多。我对文中提到的 “页面性能打分系统“ 非常的感兴趣,非常想进一步了解它是怎么设计的,以及针对页面性能的诸多问题点又是如何逐个解决的?
    2019-05-10
    13
  • 程序员二师兄
    这篇文章不错,之前自己也是特别想给项目做性能方面的监控,一直找不到好的方案,这篇文章给了一个很好的实施方向,感谢🙏
    2019-05-09
    8
  • 稚鸿同学
    有个苗头,通过performance API做数据采集和数据展现,具体还真的希望winter大大可以提供一些资料,可以落实到自己to G 的项目中
    2020-01-08
    2
    3
  • 梦演绎奢华
    公司前端还没有工程化
    2019-05-23
    1
    2
  • Jurieo
    winter老师你好,我们公司的前端是nodejs写的,如何做性能监控呢,如何做页面加载优化呢,我对您的页面性能打分系统很感兴趣,能详细讲一讲吗?谢谢了
    2019-05-12
    3
    1
  • 南城
    我的愚见,css和js合并来说会比较好,现在网速普遍不慢,减少握手损耗。当然,如果面向未来,http2的话,能减少头信息。
    2021-02-20
  • Geek_782401
    js和css打包到html中,怎么可以减少请求数?这一点不是很明白,老师能讲明白一点吗
    2020-12-21
    1
收起评论
显示
设置
留言
15
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部