摘要：表格底部的减速几何平均是一项总的性能指标，从左至右，依次表明了各个框架的评级。最左端是，表示无框架的实现，做为一个参考点。和都是显著偏慢的框架，两者给出的性能数据也相差无几。
文章系国内领先的 ITOM 管理平台供应商 OneAPM 编译呈现。
网页性能是一个丰富且又复杂的话题。在本帖中，我们会将讨论的范围局限在前端 JavaScript 框架上，探究相对于另外一种框架而言，使用当前的框架会如何影响您的应用程序的性能。我们会特别关注两点：
(1)某种框架要使用多长的时间来更新用户界面
(2)为了让框架正常工作，下载和解析所需要的软件包所花费的时间
在过去几年中，我所使用的这些数据一直来源于 Stefan Krause 的 js-framework-benchmark。资源很好，但也有点复杂了。仅关注部分结果应该会更简单一些，而本文中我们也正是这样做的。建议您看看 Stefan 所构建的工具，自己先深入了解一下这些数据，尤其是如果下面的图片中没有你最钟意的框架的话。这些资源可以从 Stefan 的网站上获取(他已测试过 40 多个框架)。
另外需要注意的是：
这些只是初步的统计结果，使用时需谨慎(比如，它们可能来自不同的浏览器版本)。
请留意这个问题。
窥探数字
第一组要关注的结果是每一种框架需要多长的时间在一个大型表格上进行各种操作，例如创建行，删除行等等。重要的一点是，这些是有键框架的数据结果。以下是来自 Stefan 站点的解释：
有键的实现通过设定键值在域数据和 dom 元素之间创建了某种关联。如果数据变更了，与该键关联的 dom 元素也会被更新。因此，往数据列表里增添或删除元素会导致 dom 发生相应的变化。
在下图中，越大的数字表示框架执行任务越慢。表格底部的“减速几何平均“是一项总的性能指标，从左至右，依次表明了各个框架的评级。最左端是 vanillajs ，表示无框架的实现，做为一个参考点。
如您所见，这里我囊括了大部分流行的前端框架，以及一些不太有名，但是非常有趣的框架。 Preact (一个非常流行的框架)和 Inferno 具有与 React 非常类似的应用编程接口(API)，所 以我也将他们包含了进来。如果你的团队正在使用 React 搭建对性能要求很高的应用，那他们或许是不错的选择。另外要注意的是，有键框架得出的结果通常会比较慢一些，因为框架要完成更多的任务。
在这些最流行的框架中，Vue 看起来相当出色。Angular 和 React 都是显著偏慢的框架，两者给出的性能数据也相差无几。Inferno 的库是其中的佼佼者。作为题外话，Inferno 的作者 Dominic Gannaway 新近被 Facebook 聘用，参与到 React 团队中。
现在来看一些无键框架的统计结果：
需要注意几点。首先，这里列出的框架数量要少一些，因为并非每一种框架都有无键的结果。最快的要数 Svelte，这种框架很有趣，采用不同的方式实现，你也应该对其一探究竟。
在开始后续的话题之前，如果不提一提高居榜首的 Surplus (由 Adam Haile 开发)，那未免显得有些失职。它在有键和无键的测试结果中都脱颖而出。另外，还有其他一些表现优异的框架包括 petit-dom 和 dio ，我没有将它们列在上面是因为我想用更多的篇幅讨论最受欢迎的那些库和框架。如果你查看结果统计表，你很快会被这庞大的统计数据搞得沉重不堪。因此对其做一些修正，让事情变得可控，以更好地达到我们的目的。
启动指标
之前的结果关注完全加载页面以及在大型表格上执行操作时框架的执行速度。下面的一组数据则是从另一个不同的视角来衡量框架的性能——下载，解析和编译所耗费的时间。
这些统计值可以告诉我们，用户需要等待多长的时间后加载的页面才能开始正常工作。通常来讲，要下载的 JavaScript 越多，浏览器需要解析和编译的代码量越大，所需要的时间就越长。
同样的，这些统计结果也是分为有键的和无键的。我们先来看看有键的统计结果：
这些用于评级的指标值并不能很方便地说明问题，但通常而言，绿色代表较好，红色代表逊色。同样地， Inferno 表现优异，Svelte 和 Preact 也相当出色。在这些最受欢迎的框架中，Vue 表现最好，而 Ember 则垫底榜单，落后于其他的对手。
现在来看看无键的统计结果：
在这一组中，Svelte 表现得非常快速且轻量级。其 total byte weight 值甚至比纯 vanilla JavaScript 还低。我告诉过你，这是一种非常有趣的框架，没错吧!
后续思考
一个月前，在读了 Addy Osmani 所著的 The Cost of JavaScript 一书后，我脑海里便萌生了撰写该文的念头。他分享的一张图表给了我启示。该图展示了在不同的移动设备上，一个 250KB 用 gzip 压缩的(未解压缩时为 1MB ) JavaScript 包需要花费多长时间完成解析。图中特别标出了平均设备的统计值，如下所示：
前端的 JavaScript 框架是一项引人关注的工程技术。它们很复杂，且不容易做好。针对特定的项目使用哪一种框架常常也很难抉择，其中有许多需要权衡的因素。例如，像 React 这样的框架具有一个大型的生态系统，通过提供许多第三方的库和丰富的培训资料，以及其他一些优势，可以加速你的项目进度。但如果你的项目是针对 2G 网络用户的，React 还会是最佳的选择吗?答案也许是否定的。
判断哪一种框架会工作得最好最终都取决于项目需求，以及构建项目的团队。希望本文所展示的结果能够给读者的思考带来一些源泉。
Browser Insight 是一个基于真实用户的 Web 前端性能监控平台，能够帮大家定位网站性能瓶颈，网站加速效果可视化；支持浏览器、微信、App 浏览 HTML 和 HTML5 页面。想阅读更多技术文章，请访问 OneAPM 官方技术博客。
http://blog.oneapm.com/apm-te...
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/92778.html
摘要：技巧评估局部变量主要针对而言，由于局部变量的查找是从最特定作用域到最大作用域，且可以通过多个域层级，所以这种查找会导致查询到通用的结果。 文章系国内领先的 ITOM 管理平台供应商 OneAPM 编译呈现。 您是网站管理员还是网页开发人员?想创建超快速的网站吗? 今天我们来看看 JavaScript，这项神奇而又复杂的技术。它使网站内容更加丰富，但常常出现的运行性能问题又降低了用户的体...
摘要：启动性能瓶颈分析与解决方案翻译自的，从属于笔者的前端入门与工程实践。我们必须要清醒地认识到全面评测以挖掘出真正性能瓶颈的重要性。这可能是最佳的方式了，类似于这样的模式鼓励基于路由的分组，目前被与广泛使用。 JavaScript 启动性能瓶颈分析与解决方案 翻译自 Addy Osmani 的 JavaScript Start-up Performance，从属于笔者的Web 前端入门与工...
摘要：对异常的的收集，其性能影响要比单纯捕获并抛出异常高出倍。但我们应该对代码中抛出的异常数量进行跟踪，它们可能导致显著的性能影响。 在对我们的客户做技术支持时，我们常常会看到很多客户根本没意识到的异常。在消除了这些异常之后，代码运行速度与以前相比大幅提升。这让我们产生一种猜测，就是在代码里面使用异常会带来显著的性能开销。因为异常是错误情况处理的重要组成部分，摒弃是不太可能的,所以我们需要衡...
摘要：最受欢迎的个库连续两年，二度成为中最受欢迎的库。此外，谷歌的开源项目来势汹汹，勇夺第三名，该库包含了一系列谷歌内含的核心库。在本次最受欢迎的个库中，个库与相关。 【编者按】本文作者为 Henn Idan，主要介绍基于 GitHub 中的数据分析，得出的2016年度最受欢迎的100个 Java 库。本文系国内 ITOM 管理平台 OneAPM 编译呈现。 谁拔得头筹？谁又落于人后？我们分...
摘要：谷歌，，，雅虎和最近因世界杯获得庞大观众数量的都在使用。因此，数据库服务器的能力是毋庸置疑的。微软的服务器，服务器以及未来的更新价格昂贵。更依赖于微软数量有限的开发者做出的改进和更新。 【编者按】本文主要针对开源 PHP 和非开源的 ASP.NET 在性能、成本、可扩展性，技术支持和复杂性等方面进行比较。 在网上论坛，总是有成百上千的文章和帖子在讨论 PHP 和 ASP.NET，究竟谁...
阅读 1192·2021-11-24 09:39
阅读 4734·2021-11-23 09:51
阅读 1172·2021-11-04 16:12
阅读 2482·2021-09-24 09:47
阅读 3156·2021-09-01 10:50
阅读 1277·2019-08-30 15:55
阅读 1308·2019-08-30 15:43
阅读 498·2019-08-30 11:08
