获得徽章 12
![[无辜呆]](http://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/jj_emoji_96.4fb9d71.png)
Ah yes, You don't need Lodash/Underscore, use native methods instead. #前端知识
评论
点赞
#前端小知识#
Avoid doucument.write()
Avoid doucument.write()
Avoid doucument.write()
表象的原因：阻塞运行，影响性能
深层的原因：
知识点一：Preload Scanner是从浏览器主解析器中分离出来的，主要负责所有含有src和href属性资源的加载工作，她与主解析器几乎同时工作。因此，文档流里头部的script标签会阻塞运行，而body里面的script不会存在阻塞。
知识点二：使得scripts（考虑同步script）变慢的因素有两个部分，文件同步下载和文件执行。
```js
<script>
document.write('<script src=file.js><\/script>')
</script>
```
基于知识点一，浏览器在document.write执行以后得到script标签才会通过Preload Scanner加载script，因为方法内的字符串本身对Preload Scanner是隐藏的，没办法发挥提前加载的优势，因此这会阻塞DOM构造，同时脚本内容本身的加载和执行也会命中知识点二。
结论：
1、尽量用script标签替代document.write，在解析成本上会减少一些
2、body里面更要禁止用document.write，要尽量发挥Preload Scanner的优势
Avoid doucument.write()
Avoid doucument.write()
Avoid doucument.write()
表象的原因：阻塞运行，影响性能
深层的原因：
知识点一：Preload Scanner是从浏览器主解析器中分离出来的，主要负责所有含有src和href属性资源的加载工作，她与主解析器几乎同时工作。因此，文档流里头部的script标签会阻塞运行，而body里面的script不会存在阻塞。
知识点二：使得scripts（考虑同步script）变慢的因素有两个部分，文件同步下载和文件执行。
```js
<script>
document.write('<script src=file.js><\/script>')
</script>
```
基于知识点一，浏览器在document.write执行以后得到script标签才会通过Preload Scanner加载script，因为方法内的字符串本身对Preload Scanner是隐藏的，没办法发挥提前加载的优势，因此这会阻塞DOM构造，同时脚本内容本身的加载和执行也会命中知识点二。
结论：
1、尽量用script标签替代document.write，在解析成本上会减少一些
2、body里面更要禁止用document.write，要尽量发挥Preload Scanner的优势
展开
评论
点赞
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章