重学前端
程劭非(winter)
前手机淘宝前端负责人
立即订阅
32637 人已学习
课程目录
已完结 58 讲
0/4登录后,你可以任选4讲全文学习。
开篇词+学习路线+架构图 (3讲)
开篇词 | 从今天起,重新理解前端
免费
明确你的前端学习路线与方法
列一份前端知识架构图
模块一:JavaScript (12讲)
JavaScript对象:我们真的需要模拟类吗?
JavaScript对象:你知道全部的对象分类吗?
JavaScript执行(一):Promise里的代码为什么比setTimeout先执行?
JavaScript执行(二):闭包和执行上下文到底是怎么回事?
JavaScript执行(三):你知道现在有多少种函数吗?
JavaScript执行(四):try里面放return,finally还会执行吗?
(小实验)理解编译原理:一个四则运算的解释器
JavaScript语法(预备篇):到底要不要写分号呢?
JavaScript语法(一):在script标签写export为什么会抛错?
JavaScript语法(二):你知道哪些JavaScript语句?
JavaScript语法(三):什么是表达式语句?
JavaScript语法(四):新加入的**运算符,哪里有些不一样呢?
模块二:HTML和CSS (11讲)
CSS语法:除了属性和选择器,你还需要知道这些带@的规则
HTML元信息类标签:你知道head里一共能写哪几种标签吗?
CSS 选择器:如何选中svg里的a元素?
HTML替换型元素:为什么link一个CSS要用href,而引入js要用src呢?
HTML小实验:用代码分析HTML标准
CSS Flex排版:为什么垂直居中这么难?
CSS动画与交互:为什么动画要用贝塞尔曲线这么奇怪的东西?
HTML语言:DTD到底是什么?
CSS渲染:CSS是如何绘制颜色的?
CSS小实验:动手做,用代码挖掘CSS属性
HTML·ARIA:可访问性是只给盲人用的特性么?
模块三:浏览器实现原理与API (6讲)
浏览器:一个浏览器是如何工作的?(阶段一)
浏览器:一个浏览器是如何工作的?(阶段二)
浏览器:一个浏览器是如何工作的?(阶段四)
浏览器:一个浏览器是如何工作的?(阶段五)
浏览器事件:为什么会有捕获过程和冒泡过程?
浏览器API(小实验):动手整理全部API
模块四:前端综合应用 (5讲)
性能:前端的性能到底对业务数据有多大的影响?
工具链:什么样的工具链才能提升团队效率?
持续集成:几十个前端一起工作,如何保证工作质量?
搭建系统:大量的低价值需求应该如何应对?
前端架构:前端架构有哪些核心问题?
特别加餐 (8讲)
新年彩蛋 | 2019,有哪些前端技术值得关注?
用户故事 | 那些你与“重学前端”的不解之缘
期中答疑 | name(){}与name: function() {},两种写法有什么区别吗?
答疑加餐 | 学了这么多前端的“小众”知识,到底对我有什么帮助?
加餐 | 前端与图形学
加餐 | 前端交互基础设施的建设
期末答疑(一):前端代码单元测试怎么做?
期末答疑(二):前端架构中,每个逻辑页面如何可以做到独立发布呢?
尾声 (0讲)
该章节暂未更新内容,敬请期待
重学前端
登录|注册

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

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

性能总论

while 循环快还是 for 循环快?
|0 是不是比 Math.floor 性能好?
网上随处可以见到一类对性能的讨论。一些新人也非常热衷此类讨论。但是实际上,它们除了让你写代码的时候纠结之外,毫无意义。
为什么这样讲呢?我想讲一个小故事。
从前有个工程师,特别注重代码细节,有一天他发现系统中的一段代码写的性能很差,因此,他用汇编重写了整段代码,执行效率足足提升了三倍。但是最后,大家发现,用户反馈性能丝毫没有提高,因为他优化的那个进程名字叫“System Idle”。
所以你看,性能优化不能只着眼于局部的代码。这里,我要提出一个我的观点:一切没有 profiling 的性能都是耍流氓。凡是真正有价值的性能优化,必定是从端到端的业务场景建立体系来考虑的。
在我的认识中,性能体系的建立可以分成以下几部分:
现状评估和建立指标;
技术方案;
执行;
结果评估和监控。
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《重学前端》,如需阅读全部文章,
请订阅文章所属专栏。
立即订阅
登录 后留言

精选留言(9)

  • 让时间说真话
    Winter老师,关于线上监控的数据采集和数据显示您有好的插件或者方案推荐?
    2019-05-19
    8
  • rh
    winter老师好,看了这篇文章,受益良多。我对文中提到的 “页面性能打分系统“ 非常的感兴趣,非常想进一步了解它是怎么设计的,以及针对页面性能的诸多问题点又是如何逐个解决的?

    2019-05-10
    3
  • 罗祥
    这篇文章不错,之前自己也是特别想给项目做性能方面的监控,一直找不到好的方案,这篇文章给了一个很好的实施方向,感谢🙏
    2019-05-09
    3
  • Geek_883b55
    Winter老师您好,本篇文章看完之后给我的感觉是给了一个大概的方向,但是比如说监控工具具体怎么实施还不够清楚,希望老师能稍微具体的讲解一下,让我们学习一下大厂的技术和方案

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

    2019-07-02
    2
  • 梦演绎奢华
    公司前端还没有工程化
    2019-05-23
    1
  • ctw
    winter老师好,关于性能优化,我有一点疑问,如果把js,css都打包到html里面,会不会带来两个问题:
    1. 请求数变少了,但是html变大了,请求html返回时间会变慢
    2. html一般不设置缓存,这样很大的html每次刷新都会重新请求

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

    2019-06-21
  • 靠人品去赢
    说一下我目前做的小程序方面的前端优化措施:
    (1)请求处理:尽量减少请求数,减少的无谓的请求,能用一个请求数据解决就用一个请求。异步请求其实也是提高的一部分(注意情况的分类以及callback)
    (2)利用缓存,有些东西可以放在缓存了,先去缓存中拿这些数据,拿不到在进一步处理。
    (3)有的图片太大,还是要压缩一下的,最简单的体积小加载的自然也就快。

    问题:之前我也拿过矢量svg图片来替代小程序的png图片,但是效果不好,可能你看svg图片没什么不一样,替代后你会发现矢量svg图片会出现错位的问题,和你拿看图工具看的不一样,什么原因导致的?怎么解?svg图片一定就会比常见的图片格式加载快吗?原理是什么?
    2019-06-13
    1
  • 南墙的树
    最近一直在研究前端性能优化和线上错误收集,收效甚微,老师可以讲解一下大厂是怎么处理的吗?
    2019-05-21
  • Jurieo
    winter老师你好,我们公司的前端是nodejs写的,如何做性能监控呢,如何做页面加载优化呢,我对您的页面性能打分系统很感兴趣,能详细讲一讲吗?谢谢了
    2019-05-12
收起评论
9
返回
顶部