问题标签 [web-performance]

我有一个带有动画的动态更新图表，可以在某些条件下在弱机器上产生卡顿。我想使用增强模式，但我不想放弃大多数客户端的动画。有什么方法可以确定出现卡顿或缺少客户端处理器时间的位置。一旦 Highcharts 获得此状态 -> 启用增强模式。

您如何使用Navigation Timing API或任何其他方法获取时间DomContentLoaded和时间？Load

基准测试接近如下所示的值（在 Firefox 的网络选项卡的控制台中）

我已经尝试过使用

window.performance.timing.domContentLoadedEventEnd - window.performance.timing.navigationStart 对于 DOMContentLoaded，以及

window.performance.timing.loadEnd - window.performance.timing.navigationStart对于加载时间，

但他们没有正确测量时间。

编辑：正如我发现的（并在下面回答），这是一个 Firefox 特定的问题 - Chrome 给出的误差范围约为 5-10 毫秒，这是合理的。

我有一个名为paintTiming.js的文件，它使用Paint Timing API来查找 Web 性能参数，例如 First Paint 和 First Contextual Paint。文件内容如下图所示：

如您所见，当 promise 被解决时，应该创建一个函数 abc()。

我的问题：我如何在承诺之外使用这个功能？

例如，考虑下面的示例（在 HTML 文件中使用）：

控制台显示该函数未定义。如果 JS 代码是内联的，它仍然不起作用。

PerformanceObserver [1]接口用于显示 Web 性能指标，例如First Paint (FP) 和First Contextual Paint (FCP)。目前处于“候选推荐状态”。

我正在阅读此 [2]链接，该链接显示了以下用于在控制台中显示 FP 和 FCP 的代码：

这里出现了问题——我对从控制台读取值或通过 Analytics 记录它们不感兴趣——我需要将它们存储在一个对象中以供进一步使用。

根据这个 [3]链接，一旦工作完成，PerformanceObserver 实例就会被隐式销毁。链接上的结尾评论显示该错误已修复，但绝对不是这种情况。

虽然这一行很有趣（在第三个链接中，开始评论） -

当前，如果性能观察者实例未在 JS 中显式保持活动状态（例如，通过附加到窗口或长寿命对象）

这意味着实例可以附加到窗口或任何长期存在的对象以扩展其范围/生命周期。这是怎么做到的？

在我们的项目中，我们有基本的 css 文件，其中包含大多数常见 css 属性的类（如.p10-> padding:10px，vam-> vertical-align:middle）。

如果我在单个 DOM 中使用这些类中的许多类，是否会对性能产生任何影响？

我正在使用 Visual Studio 创建负载测试脚本，但无法从 html 元素中提取值，如下所示：

HTML 隐藏元素示例

我想在输入标签中提取value属性的值，以便对其进行随机化处理。

我将不胜感激。:)

@font-face 渲染是否阻塞？换句话说，如果我在样式表的顶部使用@font-face，我的字体是异步加载的，还是浏览器会等待加载我的其余样式，直到字体加载完成？

谢谢大家！

基于这个问题：我如何知道 IntersectionObserver 滚动方向？

我试图在可观察的回调中重现一些布局/重排案例，但我做不到，所以我尝试简化用例并最终提出这个问题。

我正在阅读 Paul Irish what-forces-layout.md的要点，我的问题很简单。

在 body 元素上输入没有回调的情况肯定会触发布局，请参见下面的示例：

element.focus() 触发布局

但如果将focus事件包装在点击回调中，则不会触发布局/重排。

所以这就是我的问题，为什么不触发布局/回流？

我有一个简单的延迟问题，我认为应该可以解决，但我的想法已经不多了。任何帮助都感激不尽。

我有一个永远不会改变的页面，它托管在美国，但许多客户在日本，延迟非常可怕。

问题是页面中的 Javascript 代码需要从源传递的 ID。因此，我们将 id 放在查询参数中，这很有效，但是它破坏了缓存并且延迟很可怕。它应该在本地缓存。id 是一个不可预测的随机主键，但实际页面永远不会改变。

因此，问题在于页面永远不会被浏览器缓存，尽管内容永远不会改变。我可以看到浏览器只看到不同的 url 并绕过缓存，但现在我们做单页应用程序和花哨的 javascript，我认为我应该对此有更多的控制权。无论哪种方式，我似乎都找不到可接受的解决方案。

我们尝试使用 openWindow() 并稍后传递 id，但 openWindow 不能可靠地工作，因为许多浏览器会阻止弹出窗口。我们还尝试了一个将大型 Javascript 作为库引用的最小页面，但这仍然需要跨越太平洋。我可以访问可能的前端，它有一些配置可以忽略查询参数，但是需要事先知道参数的值......等等等等。

..我被困住了。请帮忙。

当我偶然发现 HTTP/2 时，我正在尝试找出提高 Web 应用程序性能的方法。在阅读有关它时，我知道它具有很多提高网站性能的功能。

谈到它的实现部分，我发现您只需将浏览器升级到最新版本即可使用。由于我的浏览器已经是最新版本，我看到我的所有资源——CSS、JS 和 HTML 文件都使用 HTTP/2 提供。但是，我使用 angularJS 进行的数据查询仍然使用 HTTP/1.1。这是我的问题。

1. 如何让我的数据查询使用 HTTP/2 协议？我是否必须在标题中添加额外的参数？

2. HTTP/2 会放开浏览器每个域的 6 个并发请求限制吗？我可以发出超过 6 个并行 ajax 请求吗？

我在客户端使用 angularJS。我的请求通过 Cloudflare 到达 Play Framework 提供的服务器。