浏览器被阻止,工作人员来救援?

发布于 2024-08-26 11:00:21 字数 439 浏览 2 评论 0原文

我使用 JavaScript 渲染 20 个表,每个表 100 行。 每个表的数据由控制器以 JSON 形式提供。 每个表都分为具有“总计”和一些其他 JavaScript 逻辑代码的部分。有些总数超出了表格本身。

结果,JavaScript 会阻塞浏览器几秒钟(尤其是在 IE6 中):(

我正在考虑使用 http://code.google.com/p/jsworker/, 然而,Google Gears Workers(我猜是一般的工人)不允许我在工人代码中对 DOM 进行更改,而且在我看来,我不能在 jsworker 工人代码中使用 jQuery。 (也许我错了?)。

这个问题似乎是 JavaScript 编码实践的基础,您能与我分享一下您的想法吗?

I use JavaScript for rendering 20 tables of 100 rows each.
The data for each table is provided by controller as JSON.
Each table is split into section that have "totals" and have some other JavaScript logic code. Some totals are outside of the table itself.

As a result JavaScript blocks browser for a couple of seconds (especially in IE6) :(

I was consideting to use http://code.google.com/p/jsworker/,
however Google Gears Workers (I guess workers in general) will not allow me to make changes to DOM at the worker code, and also it seems to me that I can not use jQuery inside jsworker worker code. (Maybe I am wrong here?).

This issue seems to be fundamental to the JavaScript coding practice, can you share with me your thoughts how to approach it?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

绿光 2024-09-02 11:00:21

Worker 只能通过传递消息与页面的执行进行通信。他们无法直接与页面交互,因为这会带来巨大的困难。

您需要优化 DOM 操作代码以加快处理时间。值得咨询谷歌以获得良好的做法。

加快执行速度的一种方法是在 DOM 外部构建表格,并仅在完成后将其插入到文档中。这使得浏览器不必在每次插入时重新绘制,而这正是花费大量时间的地方。

Workers can only communicate with the page's execution by passing messages. They are unable to interact directly with the page because this would introduce enormous difficulties.

You will need to optimise your DOM manipulation code to speed up the processing time. It's worth consulting google for good practices.

One way to speed up execution is to build the table outside of the DOM and insert it into the document only when it is completed. This stops the browser having to re-draw on every insertion, which is where a lot of the time is spent.

去了角落 2024-09-02 11:00:21

一般来说,您不应该更改后台工作者中的 UI。您应该始终向主线程发出信号,告知工作人员已完成,并将结果返回给主线程,然后主线程可以处理该结果。

HTML5 包含标签的异步属性,从那里写入 UI 会导致一个空白页面,其中只包含您想要写入的内容。

所以你需要另一种方法。
我不是 JS 大师,所以我无法帮助你实现,但至少你现在有了这个概念:)

You are not supposed to change the UI in a backgroundworker in general. You should always signal the main thread that the worker is finished, and return a result to the main thread whom then can process that.

HTML5 includes an async property for tags, and writing to your UI from there causes a blank page with just the stuff you wanted to write.

So you need another approach there.
I am not a JS guru, so I can't help you with an implementation, but at least you now have the concept :)

放飞的风筝 2024-09-02 11:00:21

如果您想深入了解浏览器性能的世界,高性能网站博客 提供了大量内容很棒的信息——包括 javascript 何时阻止页面渲染,以及避免此类问题的最佳实践。

If you want to dig into the world of browser performance, the High Performance Web Sites blog has heaps of great info — including when javascripts block page rendering, and best practice to avoid such issues.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文