每当聊起前端性能优化的时候,我们都会要聊些什么

背景

在前端的整个学习生涯中,我们总是能一次次听到“性能”和“体验”这两个词。前端性能优化不仅是前端工程师工作中时刻需要关注的现实问题,也是前端面试中屡屡被问到的点。面试官之所以爱问,是因为偷懒。只需问这一个问题,就能在一定程度考察面试者的知识广度、知识深度、总结能力、表达能力,还能沿着这条线继续问其他问题。


当被突然问到性能这个问题时,大部分人会突然一愣。总觉得有很多要说的东西,但又感觉杂乱无章一下子不知从何说起。经过一番思索,脑子里慢慢翻出早年面试刷题时看到的“雅虎性能优化N条军规”,抓耳挠腮说上七八条。面试官面无表情的问了句“还有吗?”,此刻又不得不把脑仁像挤海绵一样疯狂压榨,再多滴出两三条似是而非的油水。心里面满是苦恼,抱怨自己的记忆力不够好。

其实就算是全背下来一口气说个几十条,面试官也不见得多满意。原因之一是条目太多没有主次听着容易让人烦,面试官自己都记不住你说了什么。二是这种方式的回答明显给人一种死记硬背做题家的感觉。(面试官真欠抽)

我们会要聊什么

回答性能问题有两个思路。顺着这两个思路,不需要过多记忆就能自然而然的并且“很有见地”的回答十几条甚至几十条优化方案,当然前提是这些优化方案你平时真的用过。

思路一、从日常接触到的前端性能场景出发

性能瓶颈主要出现在三个场景

1.在开发时每次修改代码打包需要几分钟,太慢( 开发构建阶段
2.打开网站,等了几十秒才看到页面,太慢( 资源加载页面渲染 阶段)
3.页面展现后,页面上动画不流畅。滚动页面或者拖拽元素卡顿感严重,甚至页面会崩溃( 操作体验 阶段)

** 一、开发构建阶段** (常见问题:如何让Webpack打包更快)

  • 并发:使用多进程打包
  • 缓存:打包时利用缓存
  • 打包量要小:缩小文件搜索范围,减小不必要的编译工作

二、资源加载阶段

核心思路是:传输量要小、距离要近、并行传输、资源复用。

传输量要小

  • 构建时HTML压缩
  • 构建时CSS压缩合并
  • 构建时JavaScript压缩合并
  • 构建时图片的压缩
  • 使用SVG sprite 或者字体图标代替图片ICON
  • 服务端开启Gzip,数据在传输之前再次压缩
  • 构建时是使用TreeShaking,减少不必要的代码引入
  • 单页应用路由懒加载,减少首次加载的资源体积
  • 组件懒加载,减少首次加载的资源体积
  • 图片懒加载,减少首次加载的资源体积

距离要近

  • 静态资源部署到CDN

并行传输

  • 升级到 HTTP2.0 (常见问题:HTTP2.0相比HTTP1.x做了哪些升级?多路复用;二进制分帧;服务端推送;数据流优先级;头部压缩)

资源复用

  • 服务端配置静态资源缓存(常见问题:HTTP缓存策略?Cache-Control?keep-alive?304?ETag?)
  • 打包时分包复用

三、页面渲染阶段

  • CSS在上、JS在下
  • 加载CSS推荐用 link 少用 @import
  • 不重要的外置引入的JS使用defer或者async属性异步加载

** 四、操作体验阶段**

  • 动画流畅
    • ​ 尽量使用 transition 和 animation来实现CSS动画 , 而不是JS实现动画(运行在主线程对动画的流畅度有影响)
    • 动画尽量多用transfrom 和 opacity (无需重绘和回流,性能最好)
    • translateZ/translate3d 开启硬件加速
    • JS动画使用requestAnimationFrame少用setInterval
  • 滚动/移动/操作流畅
    • ​ ​DOM增删操作要少(虚拟长列表、DOM Diff)
    • 高频操作使用防抖和节流
  • 密集型计算
    • 计算密集型操作可以交给​WebWorker并发处理


思路二、从生活角度聊前端性能

假设你是公司的CTO,现在有一个产品需要在尽可能短的时间内上线,在现有团队不加班不996的前提下如何做?方案无外乎是:

1.压缩需求,迭代开发——压缩
2.多用旧轮子(代码、方案、架构)少造新轮子——缓存
3.增加人手——并发

和前端性能优化做对应

  • 压缩需求,迭代开发:静态资源的压缩合并、Gzip、各种懒加载、开发打包时的缩小文件搜索范围
  • 多用旧轮子(代码、方案、架构)少造新轮子:资源请求时HTTP缓存、开发打包时配置使用缓存、打包时配置分包复用
  • 增加人手:资源请求时使用HTTP2实现并发请求、开发打包时配置使用并发能力、WebWorker

从以上两个思路入手,对于有经验的你来说自然才思泉涌,轻轻松松让自己和面试官兴奋起来,甚至能在一定程度上左右后续的提问。

提到性能,大脑里需要浮现6字箴言: 压缩缓存并发 。后面的都交给小脑自由发挥吧。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342