共计 3945 个字符，预计需要花费 10 分钟才能阅读完成。
如果你喜爱我的文章，心愿点赞👍 珍藏 📁 评论 💬 三连反对一下，谢谢你，这对我真的很重要！
吐槽工夫
不晓得从什么时候开始，前端开始卷一些“高端常识”，动不动就 浏览器底层原理，V8 是如何运行的，倒不是说这些没啥用，只是来势汹汹如同不懂这些就不能糊页面一样。
我工作中和内核团队与虚拟机团队也单干过并征询过他们这些相干问题，大家的态度也很明确，面对这种千万行代码的大型工程项目，他们作为专业人士也不是啥都懂，万一遇到个真的啥都懂的，人家必然也不会去做前端，这就显得一些面试官和求职者的八股攻防战可笑了起来。
那么如果真的遇到一些场景须要学习相干常识，或者就是单纯的集体感兴趣想理解一下原理和细节，最好的方法是什么呢？很简略，间接看 相干团队的 Blog 或外围开发人员的 Blog & 演讲，这都是除去源码的第一手音讯，程度比那些二道贩子不晓得高到哪里去了。
The Cost Of JavaScript
明天的题目是 The Cost Of JavaScript，是作者 Addy Osmani 的系列 Blog 主题目，到往年为止一共写了 4 篇，从 开发者 / 内核 / 框架 等角度摸索如何优化 JS 执行老本。
Addy Osmani 何许人也？Google 工作 11 年，Chrome Developer Experience organization（Chrome DX 部门）的技术主管，这个 Title 很够重量了。
I am the engineering lead for Google Chrome’s Developer Experience organization. Our projects include Chrome DevTools, Lighthouse, PageSpeed Insights and Chrome User Experience Report, Aurora and WordPress Performance. We recently shipped User Flows for DevTools and Lighthouse!
— https://addyosmani.com/
不多说了，上面我间接介绍他的这个 Blog 系列大略讲了些啥。
2017
Blog 链接：https://medium.com/dev-channel/the-cost-of-javascript-84009f5…
这篇文章是 The Cost Of JavaScript 系列的第一篇文章，次要是抛出了一个概念，揭发 JavaScript 在浏览器上的 parse + compile + evaluate 老本还是很高的（这部分对于前端开发者来说最直观的就是 long task），开发者须要关怀并优化这个耗时。
这篇 Blog 有个案例十分有意思，就是比照同体积的 JS Script 和 Img 的解析工夫。因为体积雷同，所以对 network 来说耗时是一样的，然而一张 jpg 的解析和光栅化工夫加起来不到 0.1s，对人眼来说基本上是没有感知的；然而 JS 代码的 Parse + Compile + evaluate 工夫加起来是 3.5s，几十倍的差距，比照十分的显著。
放大 JS 解析运行老本的形式也很简略，就是 preload/tree shaking/minify/code split。站在 2023 这个节点看，这些计划现如今都有比拟成熟的解决方案了，各个新兴或老牌框架也在这些能力上做了相干的摸索，我就不开展说了。
2018
Blog 链接：https://medium.com/@addyosmani/the-cost-of-javascript-in-2018…
本篇文章可是说是 齐全面向前端开发者的 JS 优化指南，前半部分都是各种列数据说 JS 多了有多影响用户体验，后半局部就是介绍了一些 JS 优化伎俩，在我看来都是被国内抄烂了的一些优化：
- minify/compression/cache
- tree shaking/code split/lazy load/code coverage
- preload/web worker/serive worker
- ……
具体细节看原文吧，不开展说了。
2019
Blog 链接：https://v8.dev/blog/cost-of-javascript-2019
这篇文章相对来说会深刻一些，从 Blog 公布网站就能看出，这个是从 内核 /V8 的角度做的优化，对前端工程师来说可操作性会小一些，然而对了解原理（比如说看懂各种性能火焰图）还是有些帮忙的，上面咱们就蜻蜓点水的看一下他们做的工作。
1.Script Streaming
第一个优化是 Script Streaming，从性能上翻译（非直译）应该叫“流式加载编译”。
首先来些前置常识。出于 UI 零碎的个性，UI 更新的逻辑都必须在 main thread（UI thread）上执行，也就是 script evaluate，然而前置的 parse + compile 能够多线程并行执行的。所以浏览器很早就有一种优化：对于标识了 defer or async 的 script 文件，浏览器都能够开启多线程编译能力，优化 UI thread 被阻塞的工夫。
Chrome 基于这个优化背景，又做了一些优化，那就是流式编译。最终的成果就是 network streaming 间接对接 streaming parser，效率大大增加。
这个怎么了解呢，这个就有些像要从屋里把水接到院里：
- 一开始就是在屋里接满一桶水，而后运到院里，而且你只有一个桶运水（JS 代码的 parse + compile + evaluate 都在 UI thread 执行）
- 起初多买了几个桶，能够一次并行运水（基于多线程能力做 parse + compile，最初对立给 UI thread 生产）
- 一桶一桶的接水，还要搬来搬去，太麻烦了，间接买了几根长水管，接好间接把水传到院子里（Chrome 做的优化，network streaming 间接对接 streaming parser，充分利用 CPU 工夫）
最初的实际效果就如下图，让后盾编译线程等待时间大大降低，加强性能：
2.JSON Parse
JSON 解析要比 object 快（这个是显然易见的，JSON 语法要比 object 简略多了，解析老本要低很多），Google 倡议大于 10KB 的 JSON 能够尝试这种优化：
const data = {foo: 42, bar: 1337}; // 🐌
const data = JSON.parse('{"foo":42,"bar":1337}'); // 🚀其实从 Google 倡议也能够看出，大部分状况下都没必要抠搜这部分性能。node 后端场景可能会遇到，前端较大的数据管理库可能会遇到（比如说很大的一个 redux 状态对象），其余场景没必要因为这点儿性能升高代码维护性。
3.Code Caching
这部分内容说的是 Chrome 的 Code Caching。它实质上也是 cache 的一种，比如说咱们最常接触到的缓存就是基于 HTTP Cache Head 的网络资源缓存，即 memory cache 和 disk cache，这两个缓存的次要是 http response，命中后能够节约网络申请的耗时。
code caching 从大类上分其实是 disk caching 的一种，然而它缓存的不是 http response，而是 javascript 文件 parse + compile 后的 bytecode，所以如果命中 code caching，network + parse + compile 的工夫就全省了，间接 evaluate 就行。
不过 code caching 的命中条件会绝对刻薄一些，同一个资源须要前 72h 命中两次，之后 第 3 次申请 才会命中 code caching，这部分更具体的常识倡议间接看 V8 对 code caching 的系列 Blog。
2023
YouTube 链接：https://www.youtube.com/watch?v=ZKH3DLT4BKw&t=0s
可能因为疫情起因，这个系列的演讲中断了 3 年，不过往年又续上了。
演讲前段说的还是一些数据统计，中段说的通用优化，和 2018 的内容差不多。后段介绍了一些这两年较火的框架和新技术，来我给你报一下菜名：
- Astro/Qwik
- Route & Component Based Code Spliting/Import On Visibility
- Islands Architecture
- Partial Hydration/Progressive Hydration/Resumabilty Hydration/Selective Hydration
- React Server Components
- Streaming Server Rendering
我就问你怕不怕 doge)。这些技术内容总体上都是化整为零，缩小浏览器端 JS 的 long task。例如最原始的 Hydration 就是全量执行，导致 TTI 高居不下，所以框架层这两年搞了一堆 Hydration 计划来优化。
这些内容在原视频里也就介绍了 10 分钟，然而想搞懂每个货色的含意，不读十几篇相干 Blog 是搞不懂的，大家感兴趣的话还是须要本人收集材料理解。
Summary
通体看下来，这 4 篇 Blog 料还是挺足的，以这个系列为引进行发散，其实能够收集到不少好货色，对事实开发和眼界晋升都是很好的内容。
Web 因为 JavaScript 晋升了天花板，但开发者又需晋升 UX 去缩小 JavaScript 的执行，这一来一回，工作不就来了嘛，所以谢谢 JavaScript 赏饭吃 🙏。
Blog 举荐
本篇文章次要举荐的就是 Addy Osmani 的集体网站 addyosmani.com，有意思的内容很多，大家能够开掘一下；另一个有意思的内容就是 V8 的 Blog：v8.dev/blog，别看国内那些被嚼了好几遍的性能优化文章了，间接看一手信息多好。
如果你喜爱我的文章，心愿点赞👍 珍藏 📁 评论 💬 三连反对一下，谢谢你，这对我真的很重要！
