sách gpt4 ai đã đi

javascript - 获取 scrollTop、获取 offsetHeight 和 getStyle 需要很长时间

In lại 作者:行者123 更新时间:2023-11-30 05:32:10 27 4
mua khóa gpt4 Nike

影响我性能的前三项操作是:

  • 获取滚动条
  • 获取偏移高度
  • Ext.getStyle

为了解释我的应用程序中发生了什么:我有一个网格,其中有一列在每个单元格中呈现网格。当我几乎对网格的内容做任何事情时,它运行很慢,比如添加行,或向嵌套网格添加行。

我不知道如何优化这 3 个调用,我已经为这个问题搜索了很多东西。谁能解释为什么获取样式如此昂贵?

nhập mô tả hình ảnh ở đây

1 Câu trả lời

一个应该有帮助的优化是只在浏览器重绘时获取值。简而言之,javascript 事件循环是这样工作的:当进入一个函数时,它会控制 CPU 直到函数结束。如果发生另一个事件(如窗口调整大小、ajax 请求完成或单击按钮),该事件将被推送到事件队列中。当一个函数完成并且 CPU 空闲时,事件队列就会从队列中弹出一个东西并将 CPU 交给它。

执行循环的一部分是“动画帧”部分。您可以设置一些代码在下一次重绘之前运行。这是一些文档:https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame

这对您有何帮助:

当用户执行缓慢的操作时,创建一个节流函数并将其放入 requestAnimationFrame 回调中。像这样:

var rafCallback = function() {
doComputationallyExpensiveThings();
rafCallbackEnabled = false;
};
var rafCallbackEnabled = false;
document.on('user does a thing', function() {
if (rafCallbackEnabled) return;
rafCallbackEnabled = true;
window.requestAnimationFrame(rafCallback);
});

这将使您的计算量大的代码在每个动画帧中最多运行一次。

关于javascript - 获取 scrollTop、获取 offsetHeight 和 getStyle 需要很长时间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26225678/

27 4 0
行者123
Hồ sơ cá nhân

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá Didi Taxi miễn phí
Mã giảm giá Didi Taxi
Giấy chứng nhận ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com