本系列来源于笔者阅读《高性能JavaScript》一书的总结心得，以及笔者的看法，如果不正确的地方欢迎指出~
在开始讲之前先来一波灵魂提问，我们带着问题去学习这样才能收获满满呀~
- <script>标签的加载会给浏览器带来哪些影响？
- 浏览器对此做出了什么优化？为什么它仍然是一个问题？
- 怎么样放置&let;script>标签才是最优的方式位置？
script标签的加载
script执行时会发生什么？
script标签每次加载时都会霸道的导致整个浏览器的所有下载和渲染都停下来，因为script脚本的执行很有可能会影响DOM，所以浏览器为了保险只能停下来。
这种情况会给我们带来什么问题？
- script脚本执行时用户操作和页面渲染等都会被停下来，如果执行时间过长就会导致延迟的效果，
那么我们现在知道了script加载会导致整个页面的渲染和下载都停止，如果我们把script和link一样放在head中加载会怎么样？
由于读取道head时还没有读取body所以整个页面都是白的，通称：白屏问题。我们都知道现在这个页面白屏2-3秒就以为网速不行的时代，如果我们加载的script过多那么对我们的网站造成的影响是巨大的，很有可能很多用户就是因为白屏时间过长导致用户流失
浏览器厂商们做出了什么优化？
因为下载是通过浏览器去进行的，所以浏览器厂商们都纷纷实现了并行下载来提高下载速度，但是script导致整个页面的下载和渲染停止的影响依然存在，也就是说他这个优化并不能解决我们白屏的问题。在雅虎特别小组的JavaScript性能研究下他们他研究出了script标签最好的放置位置应该是body标签的最底下，尽管他和css一样都属于资源。因为将script放在了body的最底下也就说明了当我们页面停止渲染和下载时我们的页面整体都已经出来了，给用户的感觉就是已经加载出来东西了，嗯！这个网站很快
雅虎特别性能小组提出的优化JavaScript的首要规则：将脚本放在底部
注意：首要规则说明还不止一个性能优化规则
你是不是以为这篇文章很水？讲了这么久就讲了一个是个人都知道的script标签放在body的对下面？当然不止这不重磅思考就来了！
我们为什么要使用构建工具将众多js打包成一个js文件？为什么webpack要分模块？
我们还记得js下载时也会导致停止吧？于是我们就要减少下载需求量，让浏览器快速获取到js执行。为什么webpack要分模块？因为我们要更加可控且直观的把控我们的项目所以分模块分类是我们人类最常用的解决方案于是webpack中万物皆模块
小彩蛋🥚：如果vue不讲script放在最下面加载我们就无法使用模板的特性在#app中解决白屏显示问题
路漫漫其修远兮，吾将上下而求索🛩?
|