1、脚本加载
直接使用script脚本，html会按照顺序来加载并且执行脚本，在脚本加载和执行的过程中，会阻塞后续DOM渲染（html解析渲染） script提供async和defer两个属性来解决DOM渲染阻塞的问题
2、脚本位置
按照惯例，所有script元素都应该放在页面的head元素中。这种做法的目的就是把所有外部文件(CSS文件和JavaScript文件)的引用都放在相同的地方。
可是，在文档的head元素中包含所有JavaScript文件，意味着必须等到全部JavaScript代码都被下载、解析和执行完成以后，才能开始呈现页面的内容(浏览器在遇到body标签时才开始呈现内容)。 对于那些需要很多JavaScript代码的页面来说，这无疑会导致浏览器在呈现页面时出现明显的延迟，而延迟期间的浏览器窗口中将是一片空白。
为了避免这个问题，现在Web应用程序一般都全部JavaScript引用放在body元素中页面的内容后面。这样一来，在解析包含的JavaScript代码之前，页面的内容将完全呈现在浏览器中。而用户也会因为浏览器窗口显示空白页面的时间缩短而感到打开页面的速度加快了。
3、顺序加载
没有defer和async，浏览器会立即执行并加载指定脚本，“立即”指的是在渲染该script标签之下的文档元素之前，不等待后续的元素，读到就加载并执行。
<script src="script.js"></script>
4、defer(先加载后执行-顺序)
有defer，加载和渲染后续文档的过程中将和script.js的加载并行执行，但是script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。（按照顺序执行）
<script defer src="script.js"></script>
5、async（加载完就执行-乱序）
有async，加载和渲染后续文档的过程中将和script.js的加载与执行并行执行（乱序执行）
<script async src="script.js"></script>
6、图示
7、动态创建DOM方式
可以监听文档的加载事件，当文件加载完成后在动态的创建script标签来引入js脚本
8、设置setTimeout
设置定时器来延迟加载js脚本
