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事件中也是一样）

<body>
  <button class="j_test">clickMe</button>
  <script>
    document.querySelector('.j_test').addEventListener('click', function(){
      document.write('<a href="https://sina.cn">Sina<\/a>')
    })
  </script>
</body>

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

HTML被清除

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

<body>
  <script src="1.js"></script>
  <script src="2.js"></script>
  <script src="3.js"></script>
  <script>
    document.write('<a href="https://sina.cn">Sina<\/a>');
    document.write('<script  src="4.js"><\/script>');
  </script>
  <script src="5.js"></script>
  <script src="6.js"></script>
</body>

页面生成结构如下

同步

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

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

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

<body>
  <script src="1.js"></script>
  <script src="2.js"></script>
  <script src="3.js"></script>
  <script>
    // document.write('<a href="https://sina.cn">Sina<\/a>');
    document.write('<script  src="4.js"><\/script>');
  </script>
  <script src="5.js"></script>
  <script defer src="6.js"></script>
</body>

// 6.js中的内容如下
console.log(6);
document.write('<a href="https://sina.cn">Sina<\/a>');

HTML和log如下

async脚本中的document.write被忽略

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

  <!-- <script async src="6.js"></script> -->

  <script>
    let newDom = document.createElement('script');
    newDom.src='6.js';
    document.body.appendChild(newDom);
  </script>

// 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('<a href="https://sina.cn">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 源码，如果你插入一个 "<div>foo</div>" 那还好，但如果插入一个未闭合的开标签呢，比如：

<body>
  <script src="1.js"></script>
  <script src="2.js"></script>
  <script src="3.js"></script>
  <script>
    document.write('<!-- ');
  </script>
  <script src="5.js"></script>
  <script src="6.js"></script>
  <script src="7.js"></script>
  <script src="8.js"></script>
  <script src="9.js"></script>
  <script src="10.js"></script>
</body>

生成页面结构：

页面结构

网络请求和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

<body>
  <script src="1.js"></script>
  <script src="2.js"></script>  
  <script src="3.js"></script>
  <script>
    document.write('<script src="6.js"><\/script>');
    // let newDom = document.createElement('script');
    // newDom.src='6.js';
    // document.body.appendChild(newDom);
  </script>
  <script src="4.js"></script>
  <script src="5.js"></script>
</body>

输出

document.write提前执行

使用appendChild的输出

appendChild

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

Chrome对document.write优化

由于document.write的种种拙劣表现，Chrome决定对其有一波强制的优化，全部符合以下6点的，通过document.write()加载的<script>将不会被执行。
本着用户体验至上的原则，Chrome 的工程师们准备进行一个大胆的尝试，那就是屏蔽掉这种脚本，具体的屏蔽规则是，符合下面所有这些条件的 script 标签对应的脚本不会再被 Chrome 执行：

弱网，特别是2G（以后可能会提升为slow 3G 或 slow WiFi）。
所在页面是顶层的（self === top），而不是 iframe。因为iframe中并不影响主页面的渲染。
同步加载的，也就是不带有 asyc 或 defer 属性的。因为即便写在 document.write 里，异步的 script 标签也不会阻塞后面脚本的执行以及后面 HTML 源码的解析。
跨站的（注意不是跨域）。Chrome will not intervene for scripts with a matching eTLD+1 （例如：script 域名为 js.example.org ，插入到www.example.org中，Chrome不会干涉）。（eTLD： effective top-level domain）
未被缓存的。因为已被缓存的不会引起加载速度的问题。
所在页面的此次加载不是通过刷新操作触发的。虽然说第三方脚本影响页面主体内容和功能的可能性不大，但仍然有这个可能，假如页面主体内容收到影响了，用户必然会点刷新，所以刷新的时候，这个屏蔽逻辑得关掉

参考链接

去掉你代码里的 document.write
document.write 的痛
 Intervening against document.write()