哪一个更快？是Flutter web还是使用HTML、CSS和JS的标准网络技术？
为了找出答案，我在本网站的主页上创建了一个 Flutter web 克隆，并进行了一些性能基准测试来比较两者。
在这里，我将分享我通过使用PageSpeed Insights和WebPageTest.org测试两个版本所收集的所有数据。
而且我还会对Flutter网站的感觉进行评论。
- 它慢吗？
- 滚动是否流畅或不流畅？
首先，我将揭示PageSpeed Insights和WebPageTest.org的所有数字。
然后，我将列出我的网站和Flutter网页克隆之间的差异，并将这些数字纳入视野。
本基准使用的Flutter网页构建是在2.5.3稳定版上编译的。我收集了HTML和CanvasKit渲染器的测试结果。参见。网络渲染器｜选择使用哪种选项。
性能比较
为了比较这两个网站，我同时使用了WebPageTest.org和PageSpeed Insights（它基于Chrome Lighthouse）。
这两个网站都可以分析任何给定的网站URL，并产生一个包含大量有趣数据的报告。
默认情况下，这两个网站都会运行3次测试，并在最后报告平均结果。此外。
- WebPageTest提供高级设置，如连接速度、屏幕尺寸（桌面和移动），以及更多。
- PageSpeed Insights也可以同时模拟移动和桌面，但可定制性较差。
以下是这些网站使用PageSpeed Insights的表现
PageSpeed Insights - 移动测试
移动基准测试比较慢，因为它们是用缓慢的4G连接来模拟的。PageSpeed Insights使用了这些参数。
- 连接。150毫秒的TCP RTT，1,638.4 Kbps的吞吐量（模拟的）
- 设备。仿真的Moto G4，使用Lighthouse 9.0.0，CPU节流。4倍慢速
以下是结果:
codewithandrea.com
PageSpeed Insights报告（codewithandrea.com，移动）。
Flutter web - CanvasKit 渲染器
PageSpeed Insights 报告 (Flutter web - CanvasKit 渲染器，移动)
Flutter web - HTML 渲染器
PageSpeed Insights 报告 (Flutter web - HTML 渲染器, 移动)
PageSpeed Insights - 桌面测试
桌面基准测试更快，因为它们模拟了更快的连接。PageSpeed Insights 使用了这些参数。
- 连接。40 ms TCP RTT, 10,240 Kbps 吞吐量 (模拟)
- 设备。使用Lighthouse 9.0.0的模拟桌面，CPU节流。1倍慢速
以下是结果:
codewithandrea.com
PageSpeed Insights 报告（codewithandrea.com，桌面）。
Flutter web - CanvasKit 渲染器
PageSpeed Insights 报告 (Flutter web - CanvasKit 渲染器，桌面)
Flutter web - HTML 渲染器
页速洞察报告（Flutter web - HTML 渲染器，桌面版）
PageSpeed Insights 分析
以下是所有测试的性能得分总结。
- 主网站。移动端为 93分，桌面端为 97 分
- 带有 CanvasKit 渲染器的 Flutter 网页：在移动端和桌面端出现错误
- 使用 HTML 渲染器的 Flutter 网络：在移动端上为 25，在桌面上为 55
最值得注意的是，Flutter web上的速度指数、交互时间和总阻塞时间都远远高于主站点。
WebPage测试
让我们转到WebPageTest，看看我们在那里得到了什么数据。
这个基准测试是在默认设置下运行的。
- 连接：电缆，5/1 Mbps，28ms RTT
- 设备：桌面，1366x768分辨率
- 测试地点。弗吉尼亚州，EC2
- 浏览器。浏览器：Chrome
如果你想的话，可以用不同的设置来运行这个。
codewithandrea.com
WebPageTest报告 (codewithandrea.com)
相关指标（越低越好）。
- 第一个字节：0.387秒
- 开始渲染。0.800s
- 第一次内容绘画：0.770s
- 速度指数。0.816s
- 最大的内容绘制：0.769s
- 累计布局转移：0.004s
- 总阻塞时间: > 0.0s
- 完全加载时间:1.520s
- 字节数323 KB
- 成本：美元
Flutter web - CanvasKit 渲染器
WebPageTest 报告 (Flutter web - CanvasKit Renderer)
相关指标（越低越好）。
- 第一个字节：0.337s
- 开始渲染。13.000s
- 第一次内容绘制：12.906s
- 速度指数。13.005s
- 最大的内容绘制：未报告 - 错误
- 累计布局转移: 0.0s
- 总阻塞时间: > 0.105s
- 完全加载时间:14.554s
- 字节数4.425 KB
- 成本：$$$$
WebPageTest (Flutter web - HTML Renderer)
WebPageTest 报告 (Flutter web - HTML Renderer)
相关指标（越低越好）。
- 第一个字节：0.292s
- 开始渲染。6.600s
- 第一次内容绘制：6.561s
- 速度指数。6.616s
- 最大的内容绘制：7.279秒
- 累计布局转移：0.001s
- 总阻塞时间: > 0.421s
- 完全加载时间：10.422s
- 字节数。531 KB
- 成本：$$$
WebPageTest 分析
一个非常重要的数据点是**"字节数"**：它告诉我们为特定页面下载了多少数据。
这表明，使用 CanvasKit 渲染器编译的Flutter 应用程序比主网站重了近 14 倍。
不足为奇的是，其他重要的指标，如First Contentful Paint、Speed Index和Fully Loaded，对于Flutter版本来说都慢了10倍到15倍。
一句话：Flutter网页版下载的数据比主网站多10倍，加载速度比主网站慢10倍。
另一方面，用HTML渲染器编译的Flutter应用程序在大小上与主网站相当（531KB对323KB）。而速度指数和其他指标是CanvasKit构建的两倍，约为6.6秒。
但这些性能指标如何转化为网站的 "外观和感觉"？
Flutter网页：外观和感觉
为了找出答案，我在我的英特尔27 "iMac和我的iPhone XR上测试了Flutter web克隆版。
在这两种情况下，第一页的加载需要很长的时间（尤其是在4G上），但在随后的页面重新加载时刷新很快。
在Flutter CanvasKit构建中，我没有注意到在这两台设备上滚动时有任何滞后或卡顿，尽管我没有在低端设备上进行测试。
但在Flutter HTML构建中，该网站非常不稳定，我注意到SVG图像有一些渲染伪影。
相比之下，主网站很迅捷，即使在慢速连接上也能快速加载。
欢迎在你的浏览器上直接测试Flutter的网页克隆。你可以在我的网站旁边并排预览，以获得更好的比较。
接下来，我想列出Flutter网页应用和主网站之间的主要差异，因为许多因素会影响性能。
Flutter网页与主网站：差异
我分析了这7个不同的因素，它们促成了上述的性能数字。
工程努力
-
主站点。我花费了大量的工程努力，以确保这个网站运行速度快，因为我在世界各地的所有读者都值得我这样做!🚀
-
Flutter克隆：这是我在短短10个小时内建立的一个原型。我只做了一些基本的性能优化（WebP图像，使用分片，删除材料和cupertino图标），但仅此而已。
主机
- 主网站：这是由Vercel托管的，它提供了从全球所有地点的出色速度。
- Flutter克隆：由Firebase托管，它的速度也非常快。我没有任何硬数据来比较这两者。
范围
- 主网站：这包括近150页的内容（尽管我只在主页上进行了上述测试）。
- Flutter克隆：单页应用程序（仅主页）。
主题设计
- 主网站：同时支持黑暗和光明模式（尽管支持多个主题对性能的影响可以忽略不计）。
- Flutter克隆版：只支持暗色模式。
字体
- 主站点：在运行时从 Google CDN 加载，使用woff2格式，该格式更小，性能更强。
- Flutter克隆：字体包含在应用程序捆绑包中，使用更大的ttf格式（Flutter还不支持woff2）。
图片
- 主网站。默认使用WebP，PNG作为后备，加上一些SVG图标。
- Flutter的克隆。只有WebP（没有回退），加上一些SVG图标。
渲染引擎
- 主网站：标准HTML、CSS、JS，由浏览器渲染。
- Flutter克隆版：canvaskit和html渲染器都可以使用。我还测试了使用自动选项的构建，该选项针对移动浏览器的下载大小和桌面浏览器的性能进行了优化。
要明确的是：Flutter的渲染引擎在屏幕上绘制每一个像素，这与浏览器渲染普通网页的方式（使用HTML标记）有很大不同。这解释了性能上的巨大差异，高于所有其他因素。出于同样的原因，某些操作如文本选择在Flutter中很难做到（而我们在网络上认为这是理所当然的）。
特别是，canvaskit渲染器会对性能和像素完美的一致性进行优化，但有一个相当大的捆绑尺寸。在使用标准网络技术时，没有这样的权衡。
Flutter Web克隆 - 源代码
在我们总结之前，我还有一些东西要分享。 😀
那就是，我在GitHub上免费提供了Flutter的网络克隆版。
请随意查看代码，因为在这一过程中，我解决了一些有趣的UI问题。
结论 Flutter web并不适合内容繁杂的网站
虽然Flutter web可能是一个很好的解决方案，适用于重度UI的网络应用，但它不太适合像我这样的博客或网站。
Tim Sneath（Flutter的产品经理）自己这样说。
Flutter是一个应用框架，而不是一个网站框架。
建设一个内容繁杂的网站？不要使用Flutter。拜托了。⛔️建立
一个互动的应用程序？就用Flutter吧!🎉- Tim Sneath（@timsneath）2021年11月16日
而这一点甚至在官方文档中也有明确说明。
目前，并不是每个HTML场景都非常适合Flutter。例如，文字丰富、基于流程的静态内容，如博客文章，受益于以文档为中心的模式，而不是Flutter这样的UI框架所能提供的以应用为中心的服务。
目前的情况是，Flutter开发者在针对网络时，必须在尺寸和性能之间做出权衡。
除了纯粹的性能之外，Flutter web在支持基于文档的功能（文本编辑、选择、跨多个段落的复制和粘贴操作）方面仍不成熟，而我们在网络上认为这是理所当然的。
相反，对于内容繁杂的网站，你最好使用React、Vue或Svelte等网络框架。
编码愉快!
