问题标签 [web-performance]

最近我遇到了 PerformanceObserver，（https://developers.google.com/web/updates/2016/06/performance-observer https://developer.mozilla.org/en-US/docs/Web/API/PerformanceObserver )

它提供了跟踪longtask的选项，我在我的代码中添加了一些longtask，结果看起来像这样

没有关于它发生在哪里以及是什么触发它的信息。请帮助我了解什么是长期任务以及如何解决它。

谢谢

虽然从开发工具获取时间很容易firstPaint，但有没有办法从 JS 获取时间？

我有一个 Web 应用程序，它仅在几个页面上使用 Web Worker 来对主线程进行一些数字运算。我navigator.hardwareConcurrency用来确定要初始化多少个工人。 每个工作人员需要使用该importScripts功能导入约 20 个脚本文件。

尽管该功能运行良好，但我在 Chrome 开发工具中注意到浏览器正在通过网络为每个工作线程请求每个脚本。脚本确实包含缓存控制标头，因此后续加载速度很快，但较慢连接上的第一次加载速度非常慢。

例如，在我的机器上navigator.hardwareConcurrency返回 8，所以我最终加载了 8 x 20 = 160 个 JS 资源......

随着 CPU 的并发性越来越高，我认为随着时间的推移，这个问题会变得更糟。我刚刚检查了我朋友的 AMD Ryzen CPU 返回 16，总共下载了 320 个脚本！我想找到一种方法，为所有工作人员只加载一次这些脚本，而不管有多少工作人员正在初始化。

我正在使用 Visual Studio 2013 对 Web 应用程序进行 Web 性能测试，我想从 JSON 响应中获取一个值以在另一个请求中使用它。下面是 JSON 结果 \B

我想获取ID字段的值，我试过这个正则表达式\"ID\":\".*?" 但它给了我整个“ID”：“83f65759-a442-4dbf-8772-550e5dec7933”，但我只需要 Guid 部分

你好！

我正在开发一个 Web 应用程序，该应用程序显示类似于 facebook 新闻源的内容，并且在新闻源中的每次更新往往包含至少一个图像。因此，当用户向下滚动到新更新时，这些更新中的图像会被渲染。

我一直在探索提高滚动性能的方法，因此也在寻找改进图像渲染的方法。我阅读了一些关于transform: translateZ(0)CSS 属性的信息，该属性指示浏览器将处理推送到 GPU。而且这似乎会带来更好的性能，因为 GPU 的计算能力更强。

我的问题是我们是否可以使用这个技巧来渲染纯图像，而不需要任何动画/转换？它是否会导致 GPU 处理图像的渲染，从而通过让 CPU 可用于其他工作而在图像繁重的网站上产生更好的滚动性能？

非常感谢任何投入！

大家好，我目前正在使用 Bluehost 来托管我的网站，但问题仅在桌面上，因为当您在移动设备上查看网站时，我会隐藏视频并仅使用图像来帮助解决加载问题和页面大小。无论如何，我们目前将视频嵌入 YouTube，但是所有者不想使用 YouTube，因为它加载速度更快等。当我们使用自己的共享服务器与 BlueHost 自己托管视频时，视频加载速度非常慢。

我想向 SO 上的其他成员请教一些关于我们可以做些什么来帮助制作视频的一般指示。是否有任何其他我们可以托管的第三方网站不会在视频上显示横幅或其他任何内容。我们目前有 BlueHost 的专业服务，如果有人想检查一下，看看你可以在这里访问什么规格。该视频的大小约为 3 或 4 Mb，我很确定这是视频的大小以及 BlueHost 的共享托管服务器正在减慢它的速度。

任何其他想法将不胜感激，无论它们是第三方建议或 BlueHost 服务器上的建议，甚至是代码等中的任何其他方式，以帮助解决桌面视图上视频的性能问题，因为我们再次隐藏视频并使用图像移动版本。谢谢大家。

问题：从我的客户端运行负载测试时，在第二台机器上使用远程控制器，在第三台机器上使用远程代理，我收到以下错误

错误 2017 年 8 月 28 日上午 6 点 59 分 18 秒无法将测试运行排队“”：不知道这样的主机。

• 我的客户端上有 Visual Studio 2017。在运行 Windows Server 2016 的第二台机器上安装和配置 2017 测试控制器。在运行 Windows Server 2016 的第三台机器上安装和配置 2017 测试代理。测试数据库位于第二台机器上的 SQL Express 上，与测试控制器。

• 所有项目的配置都运行良好（测试控制器、测试代理等），没有任何问题或错误。

• 我在测试控制器机器上安装了 VS 2017，并且能够毫无问题地运行测试。

• 我可以毫无问题地从我的客户端进行调试，但是当我尝试运行测试时，它会指出上面的错误。

• 我可以“管理测试控制器”并看到我的控制器以及列出的测试代理都处于“就绪状态”。此外，设置 LoadTest DB 在设置时会显示“测试连接成功”消息。

• 我当前的 .testsettings 文件设置为让与我的测试控制器关联的所有代理都用于运行测试。它被设置为活动测试设置。

• 我已将 FQDN 放入所有设置中，并将所有关联的机器添加到每个盒子上的主机文件中。

• 每个盒子上的防火墙都被禁用了，尝试这样做无济于事。网络共享已打开，打印机共享已打开，端口已打开。使用端口扫描器验证了这一点，检查服务器上的设置，我可以相互 ping 和 NSLookUp 每个框。

• 我尝试记录全新的测试并运行现有的测试（如果我在测试控制器上运行 VS2017 的测试）无济于事。

在这一点上，我真的不确定还可以做什么或尝试什么，也不确定要提供什么其他信息。当我阅读了所有关于网络权限、本地权限等的故障排除文档时，我傻眼了。我唯一没有做的就是为所涉及的机器创建一个 AD 组并将它们添加到本地管理员组。

如果有人可以提供帮助，请随时提出问题，我会尽力提供信息。

我想查看image-rendering: -webkit-optimize-contrast为复杂网页中的图像设置样式的性能成本。

我知道 Google Developer Tools 的 Performance 选项卡很强大……但是文档非常笼统，很难提炼出一种方法来回答这个特定问题。

虽然这主要是关于 Dev 的问题。工具，我将接受任何解释如何在复杂页面的上下文中查看设置此样式的性能影响的答案。比较仅包含图像和不同样式的两个页面的加载时间很简单，但这可能无法准确回答样式如何影响生产网页的问题。

更新：

按照 jburtondev 的建议，在一个简单的页面中单独加载图像并对其进行分析，我发现该样式在图像渲染中花费了大约 200% 的时间。

使用开发工具的“6 倍减速”CPU 节流，我加载了一个页面，其中仅包含图像五次，五次没有样式。我发现“渲染”时间约为 10 毫秒，没有样式则约为 5 毫秒。我认为即使在移动设备上也可以忽略不计，并假设生产页面中的成本相似。

我有一个显示数据列表（用户个人资料卡）的反应父组件。每条数据都是一个子组件，由十几个子组件（渲染的配置文件卡）组成。

我在排序和过滤此列表时遇到性能问题。

在父组件中，我维护排序/过滤的数据列表，并在 render() 方法期间将其映射到子组件：

排序/过滤时，我更新这个列表，触发每个孩子的更新。当有数十或数百个孩子时，这很慢。

我怎样才能提高这个应用程序的性能？

注意：我已经排除了应用程序以下部分的速度：

• 排序/过滤本身。我使用 lunr.js，它的速度已经足够快了
• 更新/重新渲染页面的其余部分（它们与 ProfileCardController 更新相形见绌）。

一个想法是保持所有 ProfileCardControllers 呈现，但使用类似 display: none 来隐藏与当前过滤器不匹配的那些。我还必须对列表进行排序，以便匹配项以正确的顺序显示在顶部。这看起来很混乱，但也许这是要走的路？

与原生 HTML 元素相比，Web 组件是否提供更好的性能。因为每个元素只有在附加到 DOM 时才会发生变异。因此，元素回调中昂贵的操作会导致性能不佳。

我在 connectedCallback 句柄中编写了一个带有一些昂贵实现的示例 Web 组件，当我尝试渲染组件时，每个组件都按连续顺序花费时间。

我在 Web 组件上看不到任何与参考相关的性能指标。

更新 1

我创建了一个带有 Native 和 Web Component 实现的小页面，似乎 Web Components 页面需要 4 毫秒才能完成，但 Native 只需要 1 毫秒。请参阅我的性能屏幕。在 Web 组件中，脚本需要更多时间。

本机 HTML 示例：

Web 组件示例：