关于document.write

[yangsirgo]

1.代码的执行是严格按照html中script标签的位置执行的。 不废话，先看代码执行情况：

    <script src="./js/1.js"></script>
    <script src="./js/2.js"></script>
    <script>
        document.write('<!--');
    </script>
    <script src="./js/3.js"></script>
    <script src="./js/4.js"></script>

当页面出现多个script 时；浏览器会同时加载，但是执行这些js 是根据自上而下执行的，上面这个例子中虽然 4 个 js 文件都同时加载，但是由于中间被 script 插入了一行 html 注释，后面的 3、4 即便加载了也没有被执行。

那么如果插入的不是注释而是别的 js 文件呢？再看另一段代码

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

js 文件 4 是最后加载的，因为代码执行是严格遵循顺序的，需要按顺序加载，加载完1，2,3之后加载4，虽然5,6文件已经加载完成，但是需要等到4加载执行完毕后才能执行5,6，所以4文件阻断的后续js的加载。

2.一波 谷歌浏览器的优化。 从 55 版本以后，google浏览器对document.write 进行了优化，引用跨域脚本浏览器会提示警告。

在 2G 网络环境下，document.write 的这种使用姿势会被 Chrome 智能「优化」掉。 所以需要找替代方案。

3.替代方案 目前document.write 的使用 是带条件的文件加载，比如：

<script>
if (!window.Promise) {
  document.write('<script src="polyfill/promise.js"><\/script>');
}
if (!window.fetch) {
  document.write('<script src="polyfill/fetch.js"><\/script>');
}
</script>

还有一些平台考虑按需引入js，比如：

<script>
if(/MicroMessenger/i.test(navigator.userAgent)) {
  document.write('<script src="jweixin-1.2.0.js"><\/script>');
}
if(/AlipayClient/i.test(navigator.userAgent)) {
  document.write('<script src="alipayjsapi.min.js"><\/script>');
}
</script>

对于以上场景，替代方案是: 1.服务器端按客户端的版本，动态生成script标签。通过userAgent 判断。 2.用多入口解决多平台问题。前端根据UA判断使用哪个版本。