html生成DOM方法

发布网友发布时间：2022-10-20 06:49

共1个回答

热心网友时间：2024-10-09 02:39

注意：方法 ① ② 相当于在当前 window.document 上 createElement ，创建的 div 是要被浏览器遍历的，而方法 ③④ 是新创建一个 document 与浏览器里的不是一个，和浏览器没关系，浏览器也不会遍历。这种区别可以在有 <img> 标签的 html 中有所体现。

【1】问题：设置 display：none 的 img 还会加载吗？会的

而 display：none 只会影响渲染树的隐藏和显示，因此设置了 display：none 也依然会加载。
总结： <img> 标签只要存在在 dom 里就会加载，阻止他被浏览器遍历从而加载的方式就是不让他出现在 window.document 里。

【2】问题：样式表中的背景图片设置了 display：none 还会加载吗？会的

【3】问题：样式表中的背景图片的父元素设置了 display：none 还会加载吗？不会

构建渲染树时父元素设为 none，则默认子元素也不渲染，也就遍历不到了，因此不会渲染。

好处：

缺点：domparser api 的性能最差可参考：性能对比

所以有快速生成的需求时，尽量不要用 DOMParser

好处是，性能最优，因为文档片段存在于内存中，子元素插入到问的文档片段时不会引起回流，有较好的性能。

去除 html 里多余的无用的标签或者注释等，省去用正则表达式，因为可能存在 <br/><hr/> 等不好筛选

DOMParser WEB API
web 图片资源加载与渲染时机