六个月前，谷歌推出了其电子邮件服务的更新版本。 尽管许多用户对重新设计不满意，包括在Habré上 ，但现在这是用户的主要界面。
除其他缺点外，人们还抱怨新版本的性能下降，尤其是在性能较差的计算机上。 让我们看看为什么会发生这种情况，以及在邮件界面中可能遇到的困难。 在本文中，我们将使用Google Chrome浏览器中的开发者工具，因此本文还将提醒您那里提供了哪些机会。
源数据
首先，您需要了解我们正在处理的内容。 Google Chrome Devtools具有内置的Lighthouse工具，可为您的网站生成简单明了的性能报告。 在其中，Gmail可降低性能（满分为100分！）
老实说，这不是您期望从Google产品获得的结果。 尽管如此，让我们更详细地研究这种情况。 关闭缓存，并在启用了devtools的情况下加载Gmail界面。 “网络”标签将显示所有下载此页面的请求。 原来是6.9 Mb。 考虑到即使是最近更新的另一项服务Youtube也仅加载2 MB的资源，这是一个令人印象深刻的规模。
在这里值得注意的是，包括Gmail在内的现代服务都使用Service Workers来改善资源缓存。 因此，为了准确测量冷启动，仅关闭缓存是不够的；您还需要重置同时拥有资源的Service Workers 。 只有在此之后，从头开始的下载编号才是真实的。
现在，让我们尝试以慢动作查看页面加载。 Google Chrome文档说明了如何执行此操作。 我们从页面加载的不同阶段获得了一组屏幕截图：
在这里您可以看到页面在第9秒或多或少被加载。
通过在使用缓存时重新加载，情况会更好。 该页面仅发出250 Kb的请求，但这并不能使其更快，我们仍然可以看到启动屏幕近10秒钟。 重点显然不是请求的数量，其他原因会使页面变慢。
我们阻止资源
现在查看可下载脚本的列表：
也许其中一些对于接口的正常运行不是必需的？ 让我们尝试将它们一个接一个地关闭，并在没有它们的情况下测试页面。 使用devtools内置功能可以轻松完成此操作。
根据经验，事实证明，对https://mail.google.com/_/scs/*请求对于界面正常工作至关重要，但可以阻止以下请求：
www.gstatic.com/og/* API客户端库 ，用于请求Google服务的库ssl.gstatic.com/inputtools/* 输入工具 -屏幕键盘小部件hangouts.google.com负责讲义小部件
除了这些请求之外，我的AdBlock还安装了已经阻止的对https://play.google.com/log请求，我们没有考虑到它们，因为即使在开始进行锁实验之前也没有做出这些请求。
我们将这些脚本添加到黑名单中，并看到页面在4秒内开始加载，但是您仍然可以读写字母。
我们在探查器中查看
因此，我们尽可能地减少了资源加载，但是页面加载仍然需要很长时间。 我们需要查看在这4秒钟内发生了什么。 在这里， Chrome内置的探查器将为我们提供帮助。 他给我们看了这张照片：
在这里，您可以看到在这段时间内浏览器一直在忙于执行Javascript。 有趣的是，此代码中发生了如此重要而又困难的事情。 幸运的是，JavaScript几乎未更改地加载到浏览器中并且可以读取。
考虑剩下的代码
让我们阅读可用的Javascript代码。 这是格式化缩小代码以使其更具可读性的机会。
根据查看结果，发现以下内容：
- 该代码非常混乱。 最有可能在高级模式下使用了Google Closure编译器。 也就是说，Gmail开发人员已充分利用了现代缩小技术的优势。
- 性能度量是在代码中收集的，因此开发人员应注意用户界面的加载速度。
- 源包含Promise，Map，Set和其他现代API可能未在现代浏览器中加载的polyfill。
- 用Google Closure Libary编写的Gmail代码
最后一点是值得详细介绍的。 Closure库是2009年出现的一个接口开发框架，此后没有太大变化。 例如，仍然通过ActiveXObject支持Ajax ：仅IE6和更低版本需要它，尽管当前的Gmail 正式仅支持 IE 10+。
此外，Closure UI基于“最佳” GWT传统中的类层次结构 -这种方法具有许多冗长的抽象，显然会影响渲染性能。 现代的UI框架（例如React或Vue）提供了更轻量级的抽象-组件-渲染起来便宜得多。
因此需要进行长时间的初始化：在实际开始向我们呈现Gmail界面之前，在代码中创建了数千个类，并初始化了许多抽象。
因此，尽管外观有所更新，Gmail还是借鉴了旧技术，但其严重性无法隐藏在外壳后面。
结论
希望通过这次审核，您可以更清楚地了解Gmail速度下降的原因。 不幸的是，我们无法使Google加快其服务速度，但是您至少可以为您的应用程序学习一些经验教训：
- 旧版项目通常会遇到不必要的代码，例如针对旧版浏览器的黑客攻击。 查看您的资源并摆脱那些无关紧要的事情。
- 抽象不是免费的。 如果要使用优雅的架构模式解决问题，请首先考虑它是否过于繁重，也许有一个更简单的选择。
- 不要将辅助元素本地上传到页面。 在这种情况下，环聊窗口小部件在呈现主要功能后，可能不会阻止频道，从而不会干扰主要Gmail资源的加载，而是会在后台加载。
- 不要忽视现代技术。 它们可能包含从根本上为您的任务提供的新解决方案，更加高效和便捷。 奇怪的是，在2018年，谷歌重新设计了一项服务，该服务不使用Web组件 ，而Google 在会议上如此活跃地淹没了它 。
- 好吧，不要忘记关注项目的性能度量 。 为此，现在有许多方便的工具，既基于浏览器又可以在CI中启动 。