javascript 框架

There is no faster (pun intended) way to slow down a site than to use a bunch of JavaScript.

没有比使用一堆JavaScript更快的方法(双关语)来减慢网站速度。

The thing about JavaScript is you end up paying a performance tax no less than four times:

关于JavaScript的事情是，您最终要缴纳不少于四次的性能税：

1. The cost of downloading the file on the network在网络上下载文件的成本
2. The cost of parsing and compiling the uncompressed file once downloaded下载后解析和编译未压缩文件的成本
3. The cost of executing the JavaScript执行JavaScript的成本
4. The memory cost内存成本

The combination is very expensive.

这种组合非常昂贵 。

And we are shipping an increasingly high amount. We’re making the core functionality of our sites increasingly dependant on JavaScript as organizations move towards sites driven by frameworks like React, Vue.js, and friends.

而且我们的出货量越来越高。 随着组织逐渐转向由React，Vue.js和friends之类的框架驱动的网站，我们使网站的核心功能越来越依赖JavaScript。

I see a lot of very heavy sites using them, but then, my perspective is very biased as the companies that I work with work with me precisely because they are facing performance challenges. I was curious just how common the situation is and just how much of a penalty we’re paying when we make these frameworks the default starting point.

我看到很多非常繁琐的网站都在使用它们，但是，由于与我合作的公司与我合作的原因恰恰是因为它们正面临性能挑战，所以我的观点非常有偏见。 我很好奇的情况是多么常见的是和到底有多少我们要付罚款的，当我们做这些框架的默认起点。

Thanks to HTTP Archive, we can figure that out.

感谢HTTP Archive ，我们可以弄清楚这一点。

数据 (The data)

In total, HTTP Archive tracks 4,308,655 desktop URLs, and 5,484,239 mobile URLs. Among the many data points HTTP Archive reports for those URLs is a list of the detected technologies for a given site. That means we can pick out the thousands of sites that use various frameworks and see how much code they’re shipping, and what that costs the CPU.

HTTP存档总共跟踪4,308,655个桌面URL和5,484,239个移动URL。 在这些URL的许多HTTP存档报告中，有一个针对给定站点的检测到的技术列表。 这意味着我们可以挑选出使用各种框架的数千个站点，并查看它们要交付多少代码，以及花费多少CPU。

I ran all the queries against March of 2020, the most recent run at the time.

我针对2020年3月(当时的最新运行)进行了所有查询。

I decided to compare the aggregate HTTP Archive data for all sites recorded against sites with React, Vue.js, and Angular detected¹.

我决定将记录的所有站点的汇总HTTP存档数据与使用React，Vue.js和Angular检测到^1的站点进行比较。

For fun, I also added jQuery—it’s still massively popular, and it also represents a bit of a different approach to building with JavaScript than the single-page application (SPA) approach provided by React, Vue.js and Angular.

为了娱乐，我还添加了jQuery(它仍然非常流行)，并且它表示与JavaScript相比，它与React，Vue.js和Angular提供的单页应用程序( SPA )方法有点不同。

希望和梦想 (Hopes and dreams)

Before we dig in, here’s what I would hope.

在我们深入研究之前，这就是我希望的。

In an ideal world, I believe a framework should go beyond developer experience value and provide concrete value for the people using our sites. Performance is just one part of that—accessibility and security both come to mind as well—but it’s an essential part.

在理想的世界中，我认为框架应该超越开发人员的经验价值，并为使用我们网站的人们提供具体的价值。 性能只是其中的一部分-可访问性和安全性也都在我的脑海中-但它是必不可少的部分。

So in an ideal world, a framework makes it easier to perform well by either providing a better starting point or providing constraints and characteristics that make it hard to build something that doesn’t perform well.

因此，在理想的世界中，框架可以通过提供更好的起点或提供一些约束和特征(使其很难构建性能不佳的东西)来使性能更容易实现。

The best of frameworks would do both: provide a better starting point and help to restrict how out of hands things can get.

最好的框架可以做到这两者：提供一个更好的起点，并帮助限制事情变得一发不可收拾。

Looking at the median for our data isn’t going to tell us that, and in fact leaves a ton of information out. Instead, for each stat, I pulled the following percentiles: the 10th, 25th, 50th (the median), 75th, and 90th.

查看我们的数据的中位数并不能告诉我们， 实际上遗漏了大量信息 。 取而代之的是，对于每个统计信息，我拉出以下百分位：第10、25、50(中位数)，75和90。

The 10th and 90th percentiles are particularly interesting to me. The 10th percentile represents the best of class (or at least, reasonably close to the best of class) for a given framework. In other words, only 10% of all sites using a given framework reach that mark or better. The 90th percentile, on the other hand, is the opposite of the spectrum—it shows us how bad things can get. The 90th percentile represents the long-tail—that last 10% of sites with the highest number of bytes or largest amount of main thread time.

第10和第90个百分位数对我来说特别有趣。 对于给定的框架，第10个百分位数代表同类最佳(或至少合理地接近同类最佳)。 换句话说，在使用给定框架的所有网站中，只有10％达到或超过此标记。 另一方面，第90个百分位与频谱相反-它向我们展示了糟糕的情况会变得怎样。 第90个百分位代表长尾，即字节数最多或主线程时间最多的站点的最后10％。

JavaScript字节 (JavaScript Bytes)

For the starting point, it makes sense to look at the amount of JavaScript passed over the network.

首先，看一下通过网络传递JavaScript数量是有意义的。

For the sheer payload size, the 10th percentile turns out pretty much as you would expect: if one of these frameworks are in use, there’s more JavaScript even in the most ideal of situations. That’s not surprising—you can’t add a JavaScript framework as a default starting point and expect to ship less JavaScript out of the box.

对于巨大的有效负载大小，第10个百分位数的结果几乎与您期望的一样：如果使用这些框架之一，即使在最理想的情况下，也会有更多JavaScript。 这不足为奇-您无法添加JavaScript框架作为默认起点，并且期望开箱即用地交付更少JavaScript。

What is notable is that some frameworks correlate to better starting points than others. Sites with jQuery are the best of the bunch, starting with about 15% more JavaScript on desktop devices and about 18% more on mobile. (There’s admittedly a little bit of bias here. jQuery is found on a lot of sites, so naturally, it’s going to have a tighter relationship to the overall numbers than others. Still, that doesn’t change the way the raw numbers appear for each framework.)

什么是值得注意的是，一些框架关联到比别人更好的起点。 拥有jQuery的网站是最好的网站，首先是台式机设备上JavaScript增加约15％，移动设备上JavaScript增加约18％。 (这里确实存在一些偏见。在许多站点上都可以找到jQuery，因此自然而然地，它与整体数的关系将比其他人更紧密。但是，这不会改变原始数的出现方式每个框架。)

While even a 15-18% increase is notable, comparing that to the opposite end of the spectrum makes the jQuery tax feel very low. Sites with Angular ship 344% more JavaScript on desktop at the 10th percentile, and 377% more on mobile. Sites with React, the next heaviest, ship 193% more JavaScript on desktop and 270% more on mobile devices.

尽管值得注意的是增加了15-18％，但与频谱的另一端进行比较会使jQuery税非常低。 使用Angular的网站在台式机上JavaScript排名高出10％，增加344％，而在移动平台上，则提高了377％。 排名第二的React网站在台式机上JavaScript增长了193％，在移动设备上JavaScript增长了270％。

I mentioned earlier that even if the starting point is a little off, I would hope that a framework could still provide value by limiting the upper bound in some way.

前面我提到过，即使起点有点差，我希望框架仍可以通过某种方式限制上限来提供价值。

Interestingly, jQuery driven sites follow this pattern. While they’re a bit heftier (15-18%) at the 10th percentile, they’re slightly smaller than the aggregate at the 90th percentile—about 3% on both desktop and mobile. Neither of those numbers is super significant, but at least sites with jQuery don’t seem to have a dramatically worse long-tail in terms of JavaScript bytes shipped.

有趣的是，jQuery驱动的网站遵循这种模式。 尽管它们在第10个百分位数上略高一些(15-18％)，但比第90个百分位数的总数略小-在台式机和移动设备上约为3％。 这些数字都不是非常重要，但是至少就jQuery而言，就所发送JavaScript字节而言，长尾似乎没有更糟糕的长尾。

The same can’t be said of the other frameworks.

其他框架不能这么说。

Just as with the 10th percentile, Angular and React driven sites tend to distance themselves from others at the 90th percentile, and not in a very flattering way.

就像第10个百分位一样，Angular和React驱动的站点往往以第90个百分位与其他站点保持距离，而不是很讨人喜欢。

At the 90th percentile, Angular sites ship 141% more bytes on mobile and 159% more bytes on desktop. Sites with React ship 73% more bytes on desktop and 58% more on mobile. With a 90th percentile weight of 2,197.8kb, React sites ship 322.9kb more bytes of JavaScript to mobile users than Vue.js, the next closest. The desktop gap between Angular and React and the rest of the crowd is even higher—React-driven sites ship 554.7kb more JavaScript than Vue.js-driven sites.

在第90个百分位数上，Angular站点在移动设备上交付的字节增加了141％，在桌面设备上交付的字节增加了159％。 使用React的网站在台式机上的字节数增加了73％，在移动设备上的字节数增加了58％。 React站点的第90个百分位数为2,197.8kb，比下一个最接近的Vue.js向移动用户发送JavaScript字节多了322.9kb。 Angular和React以及其他人群之间的桌面差距甚至更大—与Vue.js驱动的网站相比，React驱动的网站提供JavaScript多了554.7kb。

JavaScript主线程时间 (JavaScript Main Thread Time)

It’s clear from the data that sites with these frameworks in place tend to pay a large penalty in terms of bytes. But of course, that’s just one part of the equation.

从数据中可以清楚地看出，具有这些框架的站点在字节方面往往会付出巨大的代价。 但是，当然，这只是等式的一部分。

Once that JavaScript arrives, it has to get to work. Any work that occurs on the main thread of the browser is particularly troubling. The main thread is responsible for handling user input, during style calculation, layout and painting. If we’re clogging it up with a lot of JavaScript work, the main thread has no chance to do those things in a timely manner, leading to lag and jank.

一旦JavaScript到达，就必须开始工作。 浏览器主线程上发生的任何工作都特别麻烦。 主线程负责在样式计算，布局和绘画期间处理用户输入。 如果我们用大量JavaScript工作来阻塞它，那么主线程将没有机会及时执行这些操作，从而导致滞后和混乱。

HTTP Archive records V8 main thread time, so we can query to see just how much time that main thread is working on all that JavaScript.

HTTP Archive记录V8主线程的时间，因此我们可以查询以了解该主线程在所有JavaScript上工作​​的时间。

There are some very familiar themes here.

这里有一些非常熟悉的主题。

First, sites with jQuery detected spend much less time on JavaScript work on the main thread than the other three analyzed. At the 10th percentile, there’s a 61% increase in JavaScript main thread work being done on mobile devices and 37% more on desktop. At the 90th percentile, jQuery sites are gain pretty darn close to the aggregate, spending 1.3% less time on the main thread for mobile devices and ..7% less time on desktop machines.

首先，检测到jQuery的网站在主线程上JavaScript工作时间要比其他三个要少得多。 在第10个百分点，在移动设备上完成JavaScript主线程工作量增加了61％，在台式机上增加了37％。 在第90个百分位上，jQuery网站获得的收益几乎接近总数，在移动设备主线程上的时间减少了1.3％，在台式机上的时间减少了0.7％。

The opposite end—the frameworks that correlate to the most time spent on the main thread—is once again made up of Angular and React. The only difference is that while Angular sites shipped more JavaScript than React sites, they actually spend less time on the CPU—much less time.

另一端(与在主线程上花费最多时间相关的框架)再次由Angular和React组成。 唯一的区别是，尽管Angular站点比React站点交付了更多JavaScript，但实际上它们在CPU上花费的时间更少，而时间却少得多 。

At the 10th percentile, Angular sites spend 230% more time on the CPU for JavaScript related work on desktop devices, and 313% more on mobile devices. React sites bring up the tail end, spending 248% more time on desktop devices and 658% more time on mobile devices. No, 658% is not a typo. At the 10th percentile, sites with React spend 2.7s on the main thread dealing with all the JavaScript sent down.

在第10个百分点，Angular网站在CPU上花费的时间增加了230％，用于台式机设备上与JavaScript相关的工作，而在移动设备上的花费则增加了313％。 React网站带来了新的增长，在台式设备上花费了248％的时间，在移动设备上花费了658％的时间。 不，658％不是错字。 在第10个百分点，使用React的网站在主线程上花费2.7s来处理所有向下发送JavaScript。

Compared to those big numbers, the situation at the 90th percentile at least looks a little better. The main thread of Angular sites spends 29% more time on JavaScript for desktop devices and 27% more time on mobile devices. React sites spend 130% more time on desktop and 98% more time on mobile devices.

与这些大数字相比，第90个百分位的情况看起来至少好一些。 Angular网站的主线程在台式机设备JavaScript上花费的时间增加了29％，在移动设备上的时间花费了27％。 React网站在台式机上的时间增加了130％，在移动设备上的时间增加了98％。

Those percentages look much better than at the 10th percentile, but keep in mind that the bulk numbers are pretty scary: that’s 20.8s of main thread work for sites built with React at the 90th percentile on mobile devices. (What, exactly, is happening during that time is a topic for a follow-up post, I think.)

这些百分比看起来比第10个百分点要好得多，但请记住，数量非常令人恐惧：在移动设备上使用React在第90个百分点构建的站点，这是20.8s的主线程工作量。 (我认为那段时间发生的事情恰恰是后续帖子的主题。)

There’s one potential gotcha (thanks Jeremy for making sure I double-checked the stats from this angle)—many sites will pull in multiple libraries. In particular, I see a lot of sites pulling jQuery in alongside React or Vue.js as they’re migrating to that architecture. So, I re-ran the queries, only this time I only included URLs that included only React, jQuery, Angular or Vue.js not some combination of them.

有一个潜在的陷阱(感谢Jeremy确保我从这个角度仔细检查了统计数据)—许多站点将引入多个库。 特别是，在迁移到该架构时，我看到许多站点将jQuery与React或Vue.js并入。 因此，我重新运行了查询，只是这次只包含了仅包含React，jQuery，Angular或Vue.js 而不包含它们的某些组合的 URL。

First, the unsurprising bit: when only one framework is used, performance improves far more often than not. The numbers for every framework look better at the 10th and 25th percentile. That makes sense. A site that is built well with one framework should perform better than a site that is built well with two or more.

首先，不足为奇：当只使用一个框架时，性能提高的频率往往没有。 每个框架的数字在第10位和第25位时看起来更好。 这就说得通了。 用一个框架构建良好的网站应该比用两个或多个框架构建良好的网站更好。

In fact, the numbers for every framework look better at each percentile with one curious exception. What surprised me, and the reason I ended up including this data, is that at the 50th percentile and beyond, sites using React perform worse when React is the only framework in use.

实际上，每个框架的数字在每个百分位处看起来都更好，只有一个奇怪的例外。 令我感到惊讶的是，我之所以最终包括了这些数据，是因为在第50个百分点及以后，使用React的网站是唯一使用的框架，因此使用React的网站的效果更差 。

It’s a bit odd, but here’s my best guess.

有点奇怪，但这是我最好的猜测。

If you have React and jQuery running alongside each other, you’re more likely to be in the midst of a migration to React, or a mixed codebase. Since we have already seen that sites with jQuery spend less time on the main thread than sites with React, it makes sense that having some functionality still driven by jQuery would bring the numbers down a bit.

如果您将React和jQuery并排运行，那么您很可能正在迁移到React或混合代码库中。 既然我们已经看到使用jQuery的网站在主线程上花费的时间比使用React的网站少，所以有意义的是，仍由jQuery驱动的某些功能会使数字下降。

As you move away from jQuery and focus more on React exclusively, though, that changes. If the site is built really well and you’re using React sparingly, you’re fine. But for the average site, more work inside of React means the main thread receives an increasing amount of strain.

但是，当您离开jQuery而将注意力更多地集中在React上时，那会改变。 如果该站点构建得非常好，并且您很少使用React，那很好。 但是对于一般站点，React内部更多的工作意味着主线程承受的应力越来越大。

移动/桌面差距 (The mobile/desktop gap)

Another angle that’s worth looking at is just how large the gap is between that mobile experience and the desktop experience. Looking at it from a bytes perspective, nothing too scary jumps out. Sure, I’d love to see fewer bytes passed along, but neither mobile nor desktop devices receive significantly more bytes than the other.

另一个值得关注的角度是，移动体验和桌面体验之间的差距有多大。 从字节的角度来看，没有什么太吓人的。 当然，我希望看到传递的字节更少，但是移动设备和台式设备都没有收到比其他设备更多的字节。

But once you look at the processing time, the gap is significant.

但是，一旦您查看处理时间，差距就会很大。

While some variance is expected between a phone and a laptop, seeing numbers this high tells me that the current crop of frameworks isn’t doing enough to prioritize less powerful devices and help to close that gap. Even at the 10th percentile, React sites spend 431.5% more time on the main thread on mobile devices as they do on desktop devices. jQuery has the lowest gap of all frameworks, but even there, it equates to 188.2% more time on mobile devices. When we make the CPU work harder—and increasingly we are—folks with less powerful devices end up holding the bill.

尽管预计手机和笔记本电脑之间会有一些差异，但是看到如此高的数字告诉我，当前的框架不足以区分功能较弱的设备并不足以弥补这一差距。 即使在第10个百分位，React站点在移动设备上的主线程上花费的时间也要比在台式设备上多花费431.5％。 jQuery是所有框架中差距最小的，但是即使在那，它在移动设备上的时间也要增加188.2％。 当我们使CPU的工作变得更加努力(而且越来越多)时，那些功能不强的设备的人们最终会负担不起。

大图 (The big picture)

Good frameworks should provide a better starting point on the essentials (security, accessibility, performance) or have built-in constraints that make it harder to ship something that violates those.

好的框架应该在本质(安全性，可访问性，性能)上提供一个更好的起点，或者具有内置的约束条件，这些约束条件使得难以运送违反这些要求的东西变得更加困难。

That doesn’t appear to be happening with performance (nor with accessibility, apparently).

这似乎与性能无关 (显然也与可访问性无关 )。

It’s worth noting that because sites with React or Angular spend more time on the CPU than others, that isn’t necessarily the same as saying React is more expensive on the CPU than Vue.js. In fact, it says very little about the performance of the core frameworks in play and much more about the approach to development these frameworks may encourage (whether intentionally or not) through documentation, ecosystem, and general coding practices.

值得注意的是，因为使用React或Angular的网站在CPU上的时间要比其他网站多，所以这与说React在Vue.js上的CPU成本并不一定相同。 实际上，它很少谈论核心框架的性能，而更多地讨论了通过文档，生态系统和通用编码实践来鼓励(无论有意还是无意)这些框架的开发方法。

It’s also worth noting what we don’t have here: data about how much time the device spends on this JavaScript for subsequent views. The argument for the SPA architecture is that, once the SPA is in place, you theoretically get faster subsequent page loads. My own experience tells me that’s far from a given, but we don’t have concrete data here to make that case in either direction.

还值得注意的是我们这里没有的内容：有关设备在此JavaScript上花费多少时间用于后续视图的数据。 SPA体系结构的理由是，一旦SPA到位，理论上您将获得更快的后续页面加载速度。 我自己的经验告诉我，这还远未定，但是我们这里没有具体的数据来说明这两个方向。

What is clear: right now, if you’re using a framework to build your site, you’re making a trade-off in terms of initial performance—even in the best of scenarios.

清楚的是：现在，如果您正在使用框架来构建网站，则需要在初始性能(甚至是最佳方案)方面进行权衡。

Some trade-off may be acceptable in the right situations, but it’s important that we make that exchange consciously.

在正确的情况下，可以进行一些权衡取舍，但重要的是我们必须有意识地进行这种交换。

There’s reason for optimism. I’m encouraged by how closely the folks at Chrome have been working with some of these frameworks to help improve their performance.

有理由感到乐观。 Chrome团队的人们与这些框架中的一些紧密合作，以帮助改善其性能，这让我感到鼓舞。

But I’m also pragmatic. New architectures tend to create performance problems just as often as they solve them, and it takes time to right the ship. Just as we shouldn’t expect new networks to solve all our performance woes, we shouldn’t expect that the next version of our favorite framework is going to solve them all either.

但是我也很务实。 新的体系结构往往会像解决它们一样频繁地产生性能问题，并且花费时间来纠正问题。 正如我们不应该期望新的网络来解决我们所有的性能问题一样 ，我们也不应该期望我们喜欢的框架的下一个版本也可以解决所有这些问题。

If you are going to use one of these frameworks, then you have to take extra steps to make sure you don’t negatively impact performance in the meantime. Here are a few great starting considerations:

如果要使用这些框架之一，则必须采取额外的步骤来确保同时不会对性能产生负面影响。 以下是一些不错的开始注意事项：

• Do a sanity check: do you really need to use it? Vanilla JavaScript can do a lot today.

  做一个健全性检查：您真的需要使用它吗？ Vanilla JavaScript现在可以做很多事情。

• Is there a lighter alternative (Preact, Svelte, etc.) that gets you 90% of the way there?有没有更轻巧的替代品(Preact，Svelte等)，可以让您90％地达到目标？

• If you’re going with a framework, does anything exist that provides better, more opinionated defaults (ex: Nuxt.js instead of Vue.js, Next.js instead of React, etc.)?²

  如果您使用的是框架，是否存在提供更好，更自以为是的默认值的任何东西(例如：Nuxt.js代替Vue.js，Next.js代替React等)？ ²

• What’s your performance budget going to be for your JavaScript?

  您JavaScript的性能预算是多少？

• What friction can you introduce into the workflow that makes it harder to add any more JavaScript than absolutely necessary?

  您会在工作流程中引入什么摩擦，使得添加比绝对必要JavaScript更加困难的JavaScript ？

• If you’re using a framework for the developer ergonomics, do you need to ship it down to the client, or can you handle that all on the server?

  如果您正在使用开发人员人体工程学的框架，是否需要将其交付给客户端 ，或者可以在服务器上处理所有这些？

These are generally good things to consider regardless of your technology choice, but they’re particularly important if you’re starting with a performance deficit from the beginning.

不管您选择哪种技术，这些都是通常要考虑的好事情，但是如果您从一开始就开始出现性能缺陷，那么它们尤其重要。

翻译自: https://timkadlec.com/remembers/2020-04-21-the-cost-of-javascript-frameworks/

javascript 框架