程序员经验分享-hwhale

如何衡量浏览器布局性能

2023-11-29

我正在对大型网络应用程序中的性能回归进行故障排除。我最近做了一些更改，删除了 IFRAME 并将内容直接放入原始 DOM 中，以提高性能。确实，初始加载时间更好，但我发现了一个奇怪的问题。

通过删除 iframe，各种布局（动画和滚动）更改似乎要慢得多。我已经缩小了范围，知道它不是 javascript。

我已经删除了在计时器和事件上运行的所有 JavaScript。

当简单地在具有 1 秒 CSS 过渡的元素上设置类名时，我可以看到性能缓慢，这会更改其 style.top 和 style.left。 （已经绝对定位了）。这个元素动画到新位置的速度非常慢..看起来大约是 5-10 FPS，而使用 IFRAME 时它是 40+ FPS。

所以 - 我想知道是否有某种方法可以测量实际的浏览器布局性能。我在 Safari、IE、Firefox 和 Chrome 上都看到了这个问题——所以任何这些都可以使用（尽管我更喜欢 Firefox，因为问题似乎在那里最明显）。


一个好的起点 -速度追踪器 and 页面速度。他们将向您展示许多有用的信息，了解您的布局如何影响性能以及您可以采取哪些措施来改进性能。尽管 Speed Tracer 是 Chrome 扩展程序，但其数据也将反映其他浏览器中的性能。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

performance

Layout

如何衡量浏览器布局性能 的相关文章

  • Phonegap（应用程序错误...发生网络错误）

    我已经使用phonegap 创建了一个版本 在index html 文件中 我编写了一个简单的iframe 用于加载网站 当我从phonegap获取本地url时它就起作用了 但如果我将整个构建作为 zip 文件上传到 PhoneGap 中

  • CSS：仅背景不透明度，而不是内部文本[重复]

    这个问题在这里已经有答案了 我有这个注册表框 我真的很喜欢背景如何变得不透明 透明为 25 85 但后来我注意到文本和表单元素也变暗了一点 所以我想知道如何做到这一点只有边框和背景而不是盒子里面的东西 regForm z index 11

  • FPDF - 内嵌粗体文本

    我正在尝试从 PHP 创建 PDF 出于法律原因 我们需要将免责声明的一部分设为粗体 并且需要概述免责声明 我当前的代码使用 if isset POST optout POST optout yes pdf gt Ln 5 pdf gt S

  • 给定 url，如何加载图像，然后将其转换为 Javascript 中的 tf.tensor 数据？

    我是前端和 javascript 新手 现在我正在编写一个基于 CNN 的 Web 应用程序 要从给定的 url 加载图像 然后将图像输入 CNN 我尝试编写以下代码 async function getImage var img new

  • WHERE 子句或 ON 子句中的 INNER JOIN 条件？

    我今天输错了一个查询 但它仍然有效并给出了预期的结果 我的意思是运行这个查询 SELECT e id FROM employees e JOIN users u ON u email e email WHERE u id 139840 但我

  • 在 HTML TextArea 中设置（或读取）光标/插入符的值

    我正在尝试 但失败了 在 HTML 文本区域中实现拖放机制 使用 jQuery 或 Scriptaculous 我们都使用 拖放机制相对容易 因此我愿意接受使用这两者之一的答案 问题是 我似乎找不到读取或设置插入点的方法 我最终想要做的是确

  • 在活动启动期间优雅地处理屏幕方向变化

    我正在尝试找到一种方法来正确处理设置活动 其中活动的方向是根据启动它的意图中的数据确定的 这是一款用户可以选择关卡的游戏 其中一些是纵向的 一些是横向的 我面临的问题是setRequestedOrientation ActivityInfo

  • Django 未在 404 页面上应用应用程序中的 CSS 文件

    姜戈3 0 8 Python 3 7 x 我有一个包含一些应用程序的 Django 项目 我正在尝试为 400 403 404 500 错误制作一些 默认 错误页面 我已经这样做了 并显示了适当的模板 但没有任何样式或 JS 在 404 错

  • 等待动态加载脚本

    在我的页面正文中 我需要插入以下代码作为 AJAX 调用的结果 p Loading jQuery p p Using jQuery p 我不能使用 load 由于文档已经加载 因此该事件不会触发 这安全吗 如果没有 我如何确保在执行自定义生

  • 有没有一种方法可以使页面布局在 100% 缩放下完美契合，同时又尊重更大的缩放系数？

    有多种方法可以布局网页 使其适合浏览器视口 DOMwindow 当我说 适合 时 我包括更改所用字体的大小 更改 DIV IMG 和其他渲染元素的宽度和高度 以及允许元素 流畅 移动 目标是使页面在所有显示设备 从小型手机到大桌面屏幕 上看

  • 下拉菜单导致滚动条

    我用过这个W3C 的示例 http www w3schools com bootstrap bootstrap dropdowns asp div class dropdown div

  • 自定义字体有时在 IE8 / IE7 中以斜体呈现

    在 IE7 和 IE8 中 当使用自定义 Web 字体时 文本有时会以斜体呈现 即使我明确设置font style normal 这个问题是偶发的 它会渲染几次 然后我刷新 一切都是斜体 然后我刷新 它恢复正常 我正在用这个 font fa

  • Jquery 关注下一个带有类的元素

    我正在尝试创建一个函数 当按下 Enter 键时 会选择带有类的下一个输入 我已经设法 focus 同一行中的下一个元素 但是 如果我需要选择下一行的下一个输入 它将无法继续 下一行中的第一个 quantity 文本框需要获得焦点 控制台没

  • 将压缩的json数据存储在本地存储中

    我想将 JSON 数据存储在本地存储中 有时存储的数据可能超过 5MB 每个域的浏览器允许的最大阈值 无论如何 我可以压缩或压缩数据并将其存储在本地存储中吗 如果对大数据进行每个 JS 函数的压缩和解压 会增加多少延迟 我正在使用这个 js

  • 适用于 HTML5 混合应用程序的 CORS

    我读过很多关于 CORS 的文章 以及允许 Access Control Allow Origin 如何成为 Web 服务器的安全漏洞 但没有一篇文章解释了如何允许 HTML5 混合应用程序访问某些不允许使用通配符 的域上托管的 Web 服

  • 创建响应式眼睛焦点图标

    我一直在尝试制作响应式彩色眼睛焦点图标 但到目前为止我所尝试的一切均不成功 我试图在某种程度上复制真眼的颜色 我使用边框 框阴影来获取颜色 但该部分没有缩放 也尝试过轮廓 但也失败了 那个甚至不是圆的 div 的高度当前是静态的 但我希望它

  • Bootstrap下拉菜单文本颜色

    所以我第一次使用 Twitter 的 Bootstrap 我试图在下拉菜单折叠后更改其文本的颜色 如果有道理的话 I used 当您压缩网页以显示折叠菜单并转到下拉列表时 您会看到蓝色背景转移到下拉菜单项 但字体颜色为黑色 使其很难阅读 我

  • 使用js获取选择选项的onclick事件

    我有一个非常令人沮丧的问题 我有这个代码 它过滤掉我的结果并将它们输入到选择框中 var syn

  • HTML 布局：向现有网站添加侧边栏

    我有一个网站 其正文如下所示 div div div div div div 这些中没有使用绝对 相对定位技巧divs 但是有很多floats clears margins and padding这些风格divs 及其内部元素 所有这些都会

  • 使用带有箭头的 MaterializeCSS 轮播 - 如何使用普通 javascript 进行初始化

    我正在尝试使用 MaterializeCSS 创建带有箭头的轮播 我正在尝试使用这个代码笔 https codepen io Paco Cervantes pen ZLxKpj取得有限的成功 我想使用普通的 javascript 而不是 j

随机推荐

  • Swift 块值错误

    我不断收到快速完成块错误 错误是 无法调用非函数类型的值 Array Array gt 下面还有一个错误的图像 这是代码 var blockFinih selectedTags Array

  • 用于二进制输出的 ostream_iterator

    我希望能够使用ostream iterator流式传输到二进制文件 但是ostream iterator uses a 格式化输出功能所以它会写 ASCII 而不是二进制 std ostream iterator是一个单遍 OutputIt

  • Kubernetes 和 AAD 身份验证

    在配置的 AKS 上 有一个 docker 容器 其中包含使用 AAD 身份验证的应用程序 基于本文还有配置的入口 API 运行良好 当我添加带有 https 前缀的 Azure Active Directory 应用程序注册回复 URL

  • 如何从外部服务异步调用 google 上的操作？

    我正在尝试使用 actionssdk 将 Google Home 连接到外部聊天机器人 我有一个 API 它接受用户输入并使用 Webhook 将其发送到我的聊天机器人 但我的聊天机器人以异步方式调用 API 的另一个端点做出响应 并且我无

  • Python mysql 使用变量来选择某个字段

    python 和 mysql 有一个棘手的问题 为了简单起见 以下代码返回变量 field 中的所有内容 它是一个字符串 例如 用户名 或 密码 options field userID entries cursor execute sel

  • 实现 GCM 时如何从 Android 应用程序调用服务器应用程序 servlet 来注册设备

    我正在尝试从 Android 开发者网站了解 GCM 我已经按照以下说明实现了客户端 Android 应用程序http developer android com google gcm client html和 http 服务器应用程序 不

  • 如何使用QWebChannel从python接收数据到js？

    我试图让我的 PyQt 应用程序与 JS 进行通信 但无法从 python 获取值 我在 python 端有两个插槽来获取和打印数据 在示例中 一个 int 从 JS 传递给 python python 加 5 并将其传回 然后 JS 调用

  • iPhone - 将视频显示为启动画面

    我需要在我的 iPhone 应用程序中将视频显示为闪屏 我正在使用以下代码 void setupMovie NSString moviePath NSBundle mainBundle pathForResource iphone ofTy

  • 如何使 PhpStorm 显示用 @method 声明的方法抛出的异常（或从魔术方法 docblock 继承它们）？

    假设以下示例代码 method bool someMethod class MyClass throws MyClassException public function call method args if this gt someCh

  • 是否有用于共享列表或地图的一部分的 YAML 语法？

    所以 我知道我可以做这样的事情 sitelist sites www foo com www bar com anotherlist sites 并且有sitelist and anotherlist两者都包含www foo com and

  • 通过Web服务正确捕获特定异常

    我目前在我们的客户端程序中使用 C NET 服务 作为服务器设计的一部分 会抛出几个定制的异常来指示特定错误 就像在任何正常的桌面程序中一样 问题在于 Web 服务捕获这些错误并将它们序列化为FaultException 并将实际异常 如N

  • javafx简单的PathTransition动画

    我正在使用 JavaFX 构建纸牌游戏 但我很难添加简单的动画 我有一个 HBox 其中有多个 ImageView 每个图像的右边距为 80 以使图像彼此重叠 现在我想在添加卡片时为其添加动画 我想将其放置在屏幕上的某个位置 对手玩家的手

  • 如何获取与用于在 Windows 中启动关联应用程序的文件相关的完整资源管理器列表？

    为了解释 让我直接跳到一个例子 如果双击 jpeg 它应该会在 Windows 上打开照片查看器应用程序 到目前为止 这似乎是一个简单的文件关联 但是 使用箭头键您可以浏览同一文件夹中的其他图片 但这并不是基于从文件名中提取简单的路径 例如

  • 如何使用 CodeIgniter Active Record 方法添加 ORDER BY 子句？

    我有一个非常小的脚本来从数据库表中获取所有记录 代码如下 query this gt db gt get this gt table name return query gt result 使用这种语法 我将如何添加ORDER BY nam

  • pyqtgraph选择图形的2D区域作为阈值来重绘图形

    我希望添加功能 以便用户可以在选择的线条上绘制一个矩形 并且图形将刷新 以便矩形内的线条保持各自的颜色 而外部的任何线条都变成灰色 我的代码如下 当前在线条上缩放用户定义的矩形的绘图 对于 3 行 我的实际代码将绘制更多 from pyqt

  • 根据另一列中的值将多列设置为零[重复]

    这个问题在这里已经有答案了 我这里有一个示例数据集 在实际情况中 它有一个训练和测试数据集 它们都有大约 300 列和 800 行 我想根据一列中的某个值过滤掉所有这些行 然后从第 3 列设置该行中的所有值 例如到第 50 列到零 我该怎么

  • 使用 Jinja 过滤器创建内容片段

    我想为我的主页创建内容片段 示例帖子看起来像 p Your favorite Harry Potter characters enter the Game of Thrones universe and you ll never guess

  • 如何获取用户插入的下载文件名？

    在我的 JavaScript 中 我使用 a 带有 download 属性的标签让用户下载生成的文件 我可以为文件设置默认名称 但是用户可能会在将其保存到系统之前更改它 有没有办法获取用户在保存对话框中写入的名称 这样做的主要原因是 当用户

  • tty_flip_buffer_push() 将数据发送回自身

    我正在尝试在 LDD3 中运行tiny tty 当我使用 cat dev ttty0 读取它时 没有输出并且命令被阻止 检查跟踪 我注意到 tty insert flip char 和 tty flip buffer push 都被调用 然

  • 如何衡量浏览器布局性能

    我正在对大型网络应用程序中的性能回归进行故障排除 我最近做了一些更改 删除了 IFRAME 并将内容直接放入原始 DOM 中 以提高性能 确实 初始加载时间更好 但我发现了一个奇怪的问题 通过删除 iframe 各种布局 动画和滚动 更改似

热门标签