加载JavaScript文件的方式
-
普通加载，这个加载因为script放的位置不同，也会有不同的性能。
<head> <script type="text/javascript" src="script.js"></script> </head>- 放在head，将script放在head会发生什么？
浏览器的解析顺序是从上到下的，再解析到body之前不会渲染任何页面的部分，如果js文件很大，加载时间很长，那么就会造成堵塞。
<body> <div class="page" id="root"> </div> <script type="text/javascript" src="script.js"></script> </body>- 放在end，script写在end会发生什么？
按照顺序先解析渲染了HTML再加载script文件（尽管脚本依然会互相阻塞,但是页面的大部分初始内容已经展示给了用户,这会让页面不会显得太慢.）
-
延迟加载，es6出现了两种延迟加载JavaScript文件的方式，分别是defer和async
<script async type="text/javascript" src="script.js"></script> <script defer type="text/javascript" src="script.js"></script>当一个带
defer或async的<script>标签开始下载时,他不会阻塞浏览器的任何其他进程,因此这类文件可以和其他资源并行下载。defer和async的区别在于：- 带
defer的<script>标签会在等待dom加载完成后（HTML解析完成）被触发,而async则是下载完后立刻执行。 - 带
defer的<script>标签的script会按顺序执行,而async的script不按顺序执行。
- 带
-
DomContentLoaded事件触发时机
当初始的 HTML 文档被完全加载和解析完成之后，
DOMContentLoaded事件被触发，而无需等待样式表、图像和子框架的完全加载。
- 在async关键字下，
DOMContentLoaded等待全部HTML解析完成之后就会被触发，这跟正常加载JavaScript文件触发的时机相同，如下图
- 在defer关键字下，
DOMContentLoaded会在script执行后触发，如下图：
