DOM 插入:某些标签类型插入 DOM 时速度是否更快?

发布于 2024-08-17 21:34:05 字数 193 浏览 8 评论 0原文

我有一个网页,它使用客户端模板根据通过 ajax 调用获得的 json 来更新部分页面。

目前,我正在使用一个无序列表,其中每个 Li 内都有标记来显示有关产品的信息。

我很想知道,某些标签插入 DOM 时是否比其他标签更快?也就是说,我是否应该将 ul 更改为其他标签,或者更改 Li 内的标签?

谢谢

b

I have a web page that used client side templating to update part of the page based on json obtained via an ajax call.

At the moment I'm using an unordered list where inside each Li I have markup to display information about a product.

I'm interested to know, are some tags faster when inserting into the DOM than others? That is to say should I look to either change my ul into some other tag or maybe change the tags inside the Li s?

thanks

b

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

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

发布评论

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

评论(2

聆听风音 2024-08-24 21:34:05

最快的方法是将 HTML 构造为文本并设置一次 innerHTML 属性。

另一种方法是创建一个 文档片段 并在完成后将其放入 DOM 中。

一个标签或另一个标签的插入速度可能会有所不同,但这种差异是微乎其微的,并且在浏览器之间有所不同。

问题是,接触 DOM 是一项非常昂贵的操作 - 如果您追求的是速度 - 请将其最小化。

查看Stoyan Stefanov 的性能技巧

The fastest way is to construct HTML as text and set the innerHTML property once.

Another approach is to create a document fragment and once done put it into the DOM.

There might be a difference in the speed of insertion of one tag or another, but it will be marginal and different between browsers.

The thing is that touching the DOM is a very expensive operation - if speed is what you are after - minimize that.

Have a look at Stoyan Stefanov's performance tips.

说好的呢 2024-08-24 21:34:05

首先,这完全取决于浏览器。

话虽这么说,不同标签的渲染时间之间的差异应该可以忽略不计。使用提供最佳语义的标签。不用担心不同标签的渲染时间。

First off, that is completely dependent on the browser.

That being said, the difference between the rendering time of different tags should be negligible. Use the tag which provides the best semantic meaning. Don't worry about render times of different tags.

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