Angular 2 应用程序仅在 Chrome DevTools 打开时反应非常缓慢
Angular 2 Application reacting very slowly only while Chrome DevTools is open
我的 Angular 2 应用程序对按键输入、按钮点击、跨输入的制表符等的响应速度很慢（1-5 秒）。只有 Chrome 开发人员工具已打开。 Material 2个动画也变得缓慢和断断续续。
我已经开发这个应用程序三个月了，并且每天都使用 Chrome DevTools。这个问题似乎是一夜之间出现的。
我知道的：
- 我隐藏了所有待处理的应用程序更改，以将我的应用程序恢复到这不是问题的时候。问题仍然存在。
- Chrome DevTools 似乎不会减慢同一浏览器会话中的任何其他应用程序（即 google 收件箱、google 地图）。
- 令人抓狂的是，当我 运行 DevTools 的时间轴 "Record" 试图了解问题时，问题消失了，页面再次以正常速度响应！ 我认为这是我掌握的最好的线索，但我对 DevTools 的内部工作原理还不够了解 "Timeline Record" 是如何改变的。
- 我已经重新启动 Chrome 并删除了所有缓存数据。
- 当我在 Firefox 或 IE 中打开开发人员工具时，没有发生任何此类事情。
任何有关下一步去哪里的建议都将不胜感激！
我已经解决了这个问题，但我永远不知道是什么原因造成的。可能是我不小心更改了设置。
我删除了Chrome应用程序并重新安装，一切恢复正常。我将保留这个问题，以防其他人遇到这个问题或想做出贡献。
在打开 Chrome 开发工具的情况下，每个网络应用 运行 缓慢是正常的。
特别是如果您打开了检查选项卡，这就像同时打开了一个新页面 + 在任何块渲染上都有动画。
最终答案：
删除所有断点
即使他们没有被击中，这也为我修复了它并使性能恢复正常。
如果您有记录断点，问题可能会更大 - 因此，如果您附加到断点，请先尝试删除这些断点。
以前的回答：
我想出了一个解决方法 - 虽然仍然没有真正弄清楚到底出了什么问题。
我还发现了一堆我什至不知道的工具，我以前跳过了它们 - 它们在 More tools.
下
首先打开 Performance Monitor。这为您的 Chrome 选项卡显示了一个很好的 CPU 图表 - Windows 任务管理器一如既往地无用。
这是我从 mat-calendar 中选择日期时得到的行为。没有其他逻辑 运行 - 只是选择一个日期。我删除了 app-component 中的所有内容，只放了一个 mat-calendar，更改日期花了十秒钟！
其他控件一般都没问题。我可以打开对话框，使用组合框等，而且又好又快。但是选择日期给了我这个废话：
我尝试清空本地存储、清除缓存等，然后更改了我网站的端口号。我只是将 dev.example.com:44300 更改为 dev.example.com:44301 - 换句话说 Chrome 现在认为这是一个不同的网站。
这是我切换端口号后的样子。
我使用 reverse proxy server 也得到了同样的效果 - 它将我的本地机器连接到互联网 - 所以我可以尝试从其他机器复制这个问题。我不能。
所以希望对某人有所帮助 - 仍然不知道该服务器的缓存中有什么对性能有如此巨大的影响。但可以肯定的是，这不仅仅是我的代码。
这里有一些其他的尝试：
使用 --aot 标志进行测试
这对我没有影响，但有助于缩小范围。
添加一些什么都不做的控件（作为控件）
这样您就可以找到是否是某些特定的操作或控制导致了速度下降。您当然应该能够立即切换这些。
只需打开和关闭它们，隐藏一些东西。
<mat-radio-group>
<mat-radio-button [value]="false">
bloop
</mat-radio-button>
<mat-radio-button [value]="false">
bloop bloop
</mat-radio-button>
</mat-radio-group>
启用渲染调试选项
确保您没有不断地重新呈现整个页面
上面的呈现选项会在一定程度上显示这一点，但我喜欢做的一件事就是添加一个随机文本框 - 在其中键入内容，如果文本随后消失，您就知道该控件已被重新呈现。
<!-- yes, just a standard text box -->
<input type="text"/>
用*ngIf="false"
隐藏东西
隐藏控件（您的和第三方的）并查看是否有任何问题。
对我来说，我目前怀疑 mat-calendar 导致了问题 - 但我仍然非常困惑为什么启用 'Record' 会使问题不存在。
我们今天在同事工作站遇到了这个问题。原来它是一个 chrome 扩展名（不记得了，名称中带有 "ghost" 的东西）。因此，也许尝试使用访客模式并检查问题是否仍然存在。如果没有，请依次重新激活扩展以查看是哪个扩展引起了问题。如果仍然出现，请遵循其他建议的方法。
我的 Angular 2 应用程序对按键输入、按钮点击、跨输入的制表符等的响应速度很慢（1-5 秒）。只有 Chrome 开发人员工具已打开。 Material 2个动画也变得缓慢和断断续续。
我已经开发这个应用程序三个月了，并且每天都使用 Chrome DevTools。这个问题似乎是一夜之间出现的。
我知道的：
- 我隐藏了所有待处理的应用程序更改，以将我的应用程序恢复到这不是问题的时候。问题仍然存在。
- Chrome DevTools 似乎不会减慢同一浏览器会话中的任何其他应用程序（即 google 收件箱、google 地图）。
- 令人抓狂的是，当我 运行 DevTools 的时间轴 "Record" 试图了解问题时，问题消失了，页面再次以正常速度响应！ 我认为这是我掌握的最好的线索，但我对 DevTools 的内部工作原理还不够了解 "Timeline Record" 是如何改变的。
- 我已经重新启动 Chrome 并删除了所有缓存数据。
- 当我在 Firefox 或 IE 中打开开发人员工具时，没有发生任何此类事情。
任何有关下一步去哪里的建议都将不胜感激！
我已经解决了这个问题，但我永远不知道是什么原因造成的。可能是我不小心更改了设置。
我删除了Chrome应用程序并重新安装，一切恢复正常。我将保留这个问题，以防其他人遇到这个问题或想做出贡献。
在打开 Chrome 开发工具的情况下，每个网络应用 运行 缓慢是正常的。
特别是如果您打开了检查选项卡，这就像同时打开了一个新页面 + 在任何块渲染上都有动画。
最终答案：
删除所有断点
即使他们没有被击中，这也为我修复了它并使性能恢复正常。
如果您有记录断点，问题可能会更大 - 因此，如果您附加到断点，请先尝试删除这些断点。
以前的回答：
我想出了一个解决方法 - 虽然仍然没有真正弄清楚到底出了什么问题。
我还发现了一堆我什至不知道的工具，我以前跳过了它们 - 它们在 More tools.
首先打开 Performance Monitor。这为您的 Chrome 选项卡显示了一个很好的 CPU 图表 - Windows 任务管理器一如既往地无用。
这是我从 mat-calendar 中选择日期时得到的行为。没有其他逻辑 运行 - 只是选择一个日期。我删除了 app-component 中的所有内容，只放了一个 mat-calendar，更改日期花了十秒钟！
其他控件一般都没问题。我可以打开对话框，使用组合框等，而且又好又快。但是选择日期给了我这个废话：
我尝试清空本地存储、清除缓存等，然后更改了我网站的端口号。我只是将 dev.example.com:44300 更改为 dev.example.com:44301 - 换句话说 Chrome 现在认为这是一个不同的网站。
这是我切换端口号后的样子。
我使用 reverse proxy server 也得到了同样的效果 - 它将我的本地机器连接到互联网 - 所以我可以尝试从其他机器复制这个问题。我不能。
所以希望对某人有所帮助 - 仍然不知道该服务器的缓存中有什么对性能有如此巨大的影响。但可以肯定的是，这不仅仅是我的代码。
这里有一些其他的尝试：
使用 --aot 标志进行测试
这对我没有影响，但有助于缩小范围。
添加一些什么都不做的控件（作为控件）
这样您就可以找到是否是某些特定的操作或控制导致了速度下降。您当然应该能够立即切换这些。
只需打开和关闭它们，隐藏一些东西。
<mat-radio-group>
<mat-radio-button [value]="false">
bloop
</mat-radio-button>
<mat-radio-button [value]="false">
bloop bloop
</mat-radio-button>
</mat-radio-group>
启用渲染调试选项
确保您没有不断地重新呈现整个页面
上面的呈现选项会在一定程度上显示这一点，但我喜欢做的一件事就是添加一个随机文本框 - 在其中键入内容，如果文本随后消失，您就知道该控件已被重新呈现。
<!-- yes, just a standard text box -->
<input type="text"/>
用*ngIf="false"
隐藏东西隐藏控件（您的和第三方的）并查看是否有任何问题。
对我来说，我目前怀疑 mat-calendar 导致了问题 - 但我仍然非常困惑为什么启用 'Record' 会使问题不存在。
我们今天在同事工作站遇到了这个问题。原来它是一个 chrome 扩展名（不记得了，名称中带有 "ghost" 的东西）。因此，也许尝试使用访客模式并检查问题是否仍然存在。如果没有，请依次重新激活扩展以查看是哪个扩展引起了问题。如果仍然出现，请遵循其他建议的方法。