重操JS旧业第一弹：Script与JS加载

Posted 2020-08-08 bing

 

不管js被包装成什么样子，最终交给浏览器执行的js都是原生的，都离不开原生js的原理。

Script标签纸html中用来加载js的标签，我们知道js可以是来自外部，本地，或者内部一段代码，在这里只讨论来自外部的加载，对于一个随时进行网络数据交换的浏览器而言，网络请求必然是异步执行的，自然的js文件一般来说异步执行比较好，不容易造成UI卡顿，但是Script标签默认加载js是同步，阻塞式的，也就是说默认情况下浏览器按照从上至下，从左自右的方式解释执行脚本，对于同步请求js文件会造成js文件下载完成才真正渲染UI，这点道理非常容易理解。提高Web用户体验？

1 异步下载js文件，这里可以在script标签内部使用async，表示异步下载该文件：<script src="xxx.js" async>

2 延迟加载，这里使用defer关键字，表示整个文档html元素加载完成才开始下载js文件，但这并不意味着一定在文档load事件之前或者之后发生，<script src="xxx.js"  defer>，如果有多个这样的js延迟加载他们的

顺序也不确定，所以一般来说defer使用得较少

3 ui加载完成开始加载js，这里很简单，直接将<script src="xxx.js">放到文档末尾就可以了

 

知识点：同步，异步