html生成DOM方法

常用方法

1. 创建一个元素 div=document.createElement('div');div.innerHTML=html
2. document.createDocumentFragment() or document.createRange().createContextualFragment(html)
3. DOMParser domParser=new DOMParser();domParser.parseFromString.(html,'text/html')
4. 新建个 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 图片自动加载
• 防止