DOM 插入:某些标签类型插入 DOM 时速度是否更快?
我有一个网页,它使用客户端模板根据通过 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
最快的方法是将 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.
首先,这完全取决于浏览器。
话虽这么说,不同标签的渲染时间之间的差异应该可以忽略不计。使用提供最佳语义的标签。不用担心不同标签的渲染时间。
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.