JS三种加载方式

三种加载方式图解

1、script:同步模式，脚本的获取和执行是同步的。此过程中页面被阻塞，停止解析
2、defer = “defer”：延迟模式，脚本的获取是异步的，执行是同步的。脚本加载不阻塞页面的解析，脚本在获取完后并不立即执行，而是等到DOMready之后才开始执行
3、async = “async”：异步模式，脚本的获取是异步的，执行是同步的。
但是和defer = “defer”的不同点在于脚本获取后会立刻执行，***这就会造成脚本的执行顺序和页面上脚本的排放顺序不一致，可能造成脚本依赖的问题***。

三种加载方式的适用场合

• 同步模式，又称阻塞模式，会阻止浏览器的后续处理，停止后续的解析，只有当当前加载完成，才能进行下一步操作。所以默认同步执行才是安全的。但这样如果js中有输出document内容、修改dom、重定向等行为，就会造成页面堵塞。所以一般建议把script标签放在body结尾处，这样尽可能减少页面阻塞
• 延迟加载也称为惰性加载，即在长网页中延迟加载图像。用户滚动到它们之前，视口外的图像不会加载。这与图像预加载相反，在长网页上使用延迟加载将使网页加载更快。在某些情况下，它还可以帮助减少服务器负载。举个例子来说明，当打开淘宝首页的时候，只有在浏览器窗口里的图片才会被加载，当你滚动首页向下滑的时候，进入视口内的图片才会被加载，而其它从未进入视口的图像不会也不会加载
• 有些JS代码在某些情况才需要使用，并不是在页面初始化的时候就要用到。延迟加载就是为了解决这个问题，将JS切分成许多模块，页面初始化时只加载需要立即执行的JS，然后其它JS的加载延迟到第一次需要用到的时候再加载,类似图片的延迟加载。
• JS的加载分为两个部分：下载和执行。异步加载只是解决了下载的问题，但是代码在下载完成后就会立即执行，在执行过程中浏览器处于阻塞状态，响应不了任何需求。