html console 查看dom,html生成DOM方法

常用方法

创建一个元素 div=document.createElement('div');div.innerHTML=html

document.createDocumentFragment() or document.createRange().createContextualFragment(html)

DOMParser domParser=new DOMParser();domParser.parseFromString.(html,'text/html')

新建个 Document 对象 document.implementation.createHTMLElement

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

比较

1. 方法 ①

优点：处理快速，代码简单

缺点：浏览器会先遍历执行一遍。因为是在浏览器的 dom 对象里生成的，因此浏览器会遍历一遍，里面的图片都会预加载(即使当前页无用)或者 script 标签会执行。(当然如果所加载的图片都是当前页需要的，比如项目里的全部数据加载。那由于图片预加载一遍之后路径相同，就不会再加载了)

···

这里插入一个关于图片预加载问题

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

img 图片预加载触发点：在 img 的 src 赋值时浏览器就会开始预加载了

image.png

图片在浏览器中的加载时机：在解析 html 构建 dom 树时，遇到 img 就开始加载

而display：none只会影响渲染树的隐藏和显示，因此设置了display：none也依然会加载。

总结：标签只要存在在 dom 里就会加载，阻止他被浏览器遍历从而加载的方式就是不让他出现在window.document里。

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

样式表中的背景图片加载时机：构建渲染树时

遍历到了，就会加载了

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

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

2. 使用domparser api/document.implementation.createHTMLelement

好处：

防止 html 里的 img 图片自动加载

防止

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

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

3. 文档片段方法

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

4. 试验(项目里打console.time和console.timeEnd)

//1.DOMParser----->用时大概75ms

const parser = new DOMParser()

const dom = parser.parseFromString(html, 'text/html')

return dom && dom.documentElement ? dom.documentElement.innerHTML.replace(/
|

---

/g, '') : ''

//2.createHTMLDocument----->用时大概60ms

const dom = document.implementation.createHTMLDocument(html)

dom.documentElement.innerHTML = html

return dom && dom.documentElement ? dom.documentElement.innerHTML.replace(/
|

---

/g, '') : ''

//3.new div----->用时大概36ms

const htmlWrapDiv = document.createElement('div')

htmlWrapDiv.innerHTML = html

return htmlWrapDiv.innerHTML.replace(/
|

---

/g, '')

应用

去除 html 里多余的无用的标签或者注释等，省去用正则表达式，因为可能存在

---

等不好筛选

常规法：遍历，根据 tagname 剔除

//如下代码是删除有相对地址的img的src属性

function traverseParent(root: any) {

if (root.nodeName === 'IMG' && !(/src=.*http/g).test(root.innerHTML)) {

root.removeAttribute('src')

}

const children = root.children

traverseChild(children)

}

function traverseChild(node: any) {

for (var i of node) {

i.children && traverseParent(i)

}

}

const dom = document.implementation.createHTMLDocument('')

dom.documentElement.innerHTML = html

if (html && (/img/).test(html) && !(/img.*src=.*http.*(png|jpg)$/g).test(html)) {

traverseParent(dom.body)

}

快速剔除法：innerHMTL 赋值法

const parser = new DOMParser()

const dom = parser.parseFromString(html, 'text/html')

return dom && dom.documentElement ? dom.documentElement.innerHTML.replace(/
|

---

/g, '') : ''

参考