屏幕resize事件触发时document.write不生效的原因求解

document.write的执行逻辑和页面加载周期存在冲突，具体触发过程如下：

• 初始页面加载阶段，文档处于可写入的开放状态，此时第一次调用detectDevice执行document.write，内容可以正常写入文档流，输出符合预期，绑定resize事件的代码也能正常执行，事件监听生效。
• 页面完成初始加载后，浏览器会自动关闭文档流。后续触发resize事件调用detectDevice时，再执行document.write会触发浏览器的隐式操作：
  1. 先调用document.open()创建全新的空白文档流，这一步会清空当前页面所有已有的DOM内容、所有已绑定的事件监听器（包括你之前绑定的resize监听）、以及已加载的JS运行上下文
  2. 把document.write传入的内容写入到新的文档流中
  3. 隐式调用document.close()完成写入
• 第一次resize触发完成后，原本绑定的resize事件监听器已经被清空，后续再调整窗口大小不会再触发detectDevice，表现出来就是resize时调用document.write不生效。

不要使用document.write做动态内容更新，改为操作指定DOM节点更新内容即可，示例代码如下：

<!-- 提前在页面中放入内容容器 -->
<div id="deviceTip"></div>
<script>
const deviceTip = document.getElementById('deviceTip')
const detectDevice = () => {
    let ww = window.innerWidth;
    if(ww>500) {
        deviceTip.textContent = "Its Large Device";
    }
    else {
        deviceTip.textContent = "Its Small Device";
    }
}
detectDevice();
window.addEventListener("resize", detectDevice);
</script>

内容的提问来源于stack exchange，提问作者Ren Jitsm