问题标签 [web-performance]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
527 浏览

angularjs - 使用 ng-repeat 角度指令重绘和重排

我是angular js的新手。 ng-repeat指令迭代模型,一旦模型发生变化(添加/删除值),ng-repeat指令就会自行更新。

如果这是真的,那么它将强制在浏览器中对模型对象中的所有值进行重绘和重排操作,从性能的角度来看,这是一个代价高昂的操作。

0 投票
1 回答
133 浏览

javascript - 建站时,如何将多张小图组合成一张大图?

从谷歌首页下载的图片

你好,当我在 chrome 开发者工具中打开谷歌首页时,我发现他们已经将多个图标捆绑到一个大的 png 文件中,然后将它们一起下载(如上)。我认为这是加速页面加载的一种常见方法。有人可以指出我该怎么做吗?更好的是有一个库来处理捆绑/解包吗?

(我花了很长时间在网上搜索这个但找不到我需要的东西。任何帮助将不胜感激!)

0 投票
1 回答
4481 浏览

google-chrome-devtools - Chrome 开发工具网络选项卡中启动器列中的 VM 前缀是什么?

在 Chrome 开发者工具网络选项卡启动器列中,有时脚本有一个启动器,它以虚拟机为前缀。

我的第一个想法是这代表虚拟机,但数字代表什么?

如果我点击查看源代码,我仍然不清楚这个脚本的来源是什么?

Chrome 网络工具的屏幕截图

0 投票
1 回答
100 浏览

google-chrome-devtools - Chrome 网络工具中的大小/内容列显示 Amplience CDN 的结果不一致

随附的是同一网站的 Google Chrome 网络工具的三个屏幕截图。

它们被过滤以显示来自 Amplience CDN 的图像

大小/内容列中显示的结果各不相同,我试图了解原因。

每个屏幕截图都是从返回用户的角度拍摄的。因此图像应该来自缓存。

屏幕截图 1 - 显示磁盘大小和传输大小之间的巨大差异。屏幕截图 2 - 显示其中一张图像现在未缓存 屏幕截图 3 - 现在显示术语(来自缓存)。

我的问题是:

  1. 在屏幕截图 1 中,为什么不显示(来自缓存)?屏幕截图 3 中没有发生的少量传输大小发生了什么?

  2. 为什么突然没有缓存一张图片?

    屏幕截图 1 - 磁盘大小和传输大小之间的巨大差异 屏幕截图 2 - 现在未缓存其中一张图像 屏幕截图 3 - 现在显示术语(来自缓存)

0 投票
1 回答
1931 浏览

google-chrome - 如何判断脚本/资产是由 Chrome 网络工具中的异步加载还是延迟加载

有什么方法可以判断脚本/资产是异步加载还是从 Google Chrome 浏览器网络工具选项卡延迟加载?

0 投票
6 回答
7608 浏览

google-chrome - 如何在 Chrome 开发者工具中延迟脚本/资产加载

有什么方法可以通过 Chrome 开发者工具在 Google Chrome 浏览器中加载脚本/资产的时间延迟?或者完全阻止脚本加载?

我想这样做的原因是查看当脚本/资产遭受延迟加载或加载失败时站点的执行情况。

0 投票
1 回答
2734 浏览

c# - 如何在 Web 性能测试中提取 X-XSRF_TOKEN

我已经编写了一个 Web 性能测试,它之前运行良好。开发人员现在添加了 CSRF 令牌验证(以防止对网站的 CSRF 攻击)。在此之后,测试开始失败(错误,错误请求)。我对其进行了深入研究,发现服务器在登录请求中生成了一个 XSRF-TOKEN,之后必须在每个请求中传递该 XSRF-TOKEN。现在要提取令牌,我们需要解析对登录请求的响应。我们该怎么做?

我的编码测试如下所示:

0 投票
1 回答
34 浏览

html - DOM API 如何影响 HTML 解析?

在阅读如何创建 DOM 树的过程中HTML5 规范:8.2.1 解析模型概述,我想到了一个问题,但我找不到答案。

根据规范,使用document.write是不好的,除了其他问题外,它会暂停解析并将新字符提供到标记器输入中。

问题是当一个人使用 DOM API 时会是什么样子,例如。appendChild. 什么时候执行?

据我了解,这将添加已经创建Node的,因此不需要解析和标记化。但是,新节点是立即附加还是在构建“第一个/原始”DOM 树之后附加?

0 投票
0 回答
73 浏览

javascript - Webpack + ReactJS performance issue

I've created a small ReactJs application which is bundled using Webpack. Backend is done using Java (Spring Boot) and I'm running the app in my laptop (new Macbook Pro). I've tested it in Chrome and noticed that it takes considerably amount of time before REST API call (find_all) is invoked from the bundle file (positions_bundle.js), see the screenshot below. Does this look like normal performance using these technologies? I've run the front end using both Spring Boot and Webpack dev server and between those there isn't any significant difference.

enter image description here

EDIT. This is my React class which creates REST API call:

#xA;
0 投票
1 回答
141 浏览

azure - 在 Azure 应用程序洞察中创建多步测试时出错 多步测试

我打开了 Visual Studio 2015 并创建了一个 Web 性能和负载测试项目。我开始录制并粘贴了我网站的链接,然后单击了一个按钮。我停止了录音。我保存了文件并进行了运行测试。网页没有打开,但我得到一个绿色勾号,表示已通过。我上传了 .webtest 文件,但出现以下错误。