document.write 小记

document.write() 一个已被chrome提示避免使用的api，今天看到饿了么一篇博客提到，加上工作中也有小伙伴们遇见，于是决定记录一下。

document.write MDN

document.write 会直接写入文档流，所以在关闭(已加载)的文档上调用 document.write 会自动调用 document.open，这将清除该文档。

as document.write writes to the document stream, calling document.write on a closed (loaded) document automatically calls document.open, which will clear the document.

具体表现，有下面几种

(1) 异步事件中会清除现有document

在异步事件里调用document.write 会清除现有html内容
例如放在button的点击事件里（window的onload事件中也是一样）

点击后将会清除HTML内内容，仅剩结构如下

HTML被清除

(2) 同步解析中不会清除

页面生成结构如下

同步

当前文档流是由浏览器所创建，并且document.wirte()执行此函数的时候文档流并没有被关闭，这个时候不会调用document.open()函数创建新文档流，所以也就不会被覆盖了。浏览器创建的文档流无法通过document.close()关闭

(3) 异步脚本中的document.write将被忽略

把上面的例子稍作修改，6.js添加defer属性（async一样）：


  
  
  
  
  
  


// 6.js中的内容如下
console.log(6);
document.write('Sina<\/a>');

HTML和log如下

async脚本中的document.write被忽略

把6.js的引入方式改为appendChild也是一样

  

  

// Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.

这其实是浏览器自动做了检测，防止文档被错误的关闭，这种用法是不被支持的。
如果任性，非要这么做，明白承担的后果，那么其实也是可行的

// 6.js内容改写如下
document.open();
document.write('Sina<\/a>');
document.close();

结果是write写入了，但别的内容没有了，和本文第一张图所示一样。

(4) document.write影响浏览器的预解析

如今的浏览器并不是线性的执行了，在遇到第一个 script 标签后，主线程中的解析器暂停解析，但浏览器会开启一个新的线程去于预解析后面的 HTML 源码，同时预加载遇到的CSS、JS、图片等资源文件。

但浏览器能做的仅仅是预解析和预加载，脚本的执行和 DOM 树的构建仍然必须是线性的，从而页面的渲染也必须是线性的。脚本必须顺序执行这很好理解，比如 2.js 很可能用到 1.js 里的变量；DOM 树不能提前构建的原因也能想到，js里很可能去查询DOM数，在head里的js查询body必须查询不到。

document.write可以解释上面两个优化不能做的原因，甚至也能让预解析和预加载这两个已经做了的优化失效的东西。document.write 可以在当前执行的 script 标签之后插入任意的 HTML 源码，如果你插入一个 "

foo

" 那还好，但如果插入一个未闭合的开标签呢，比如：

生成页面结构：

页面结构

网络请求和console：

网络请求和console

当第 4 个 script 标签执行完毕后，浏览器就会发现，因为 document.write 输出了一个未闭合的开标签，所以刚才做的预解析成果得全部扔掉，重新解析一次，第二次解析后 script 标签都被注释掉了，因此预加载的 JS 资源都白加载了。但这种情况毕竟是少数，预解析的利远远大于弊，所以浏览器们才做了这个优化，MDN 上有一篇文章列举了一些会让浏览器做的预解析优化失失效的代码。

(5) document.write和appendChild代码执行顺序

使用document.write和appendChild，插入的脚本都被插入到了当前标签之后。但是执行顺序上（不考虑defer和async），document.write插入的会被提前执行，appendChild插入的在最后执行。
例如：
1~6.js都是简单的console.log()输出对应的序号
使用document.write

输出

document.write提前执行

使用 appendChild的输出

appendChild

因为document.write会导致重新解析一遍文档流，所以6.js的位置被认为是在4.js之前。

Chrome对document.write优化

由于document.write的种种拙劣表现，Chrome决定对其有一波强制的优化，全部符合以下6点的，通过document.write()加载的