浏览器异步加载JS的方法


浏览器异步加载JS的方法

浏览器加载JS的方法

说到这个,最常见的就是内置JS和外联JS了

内置:

<script>
console.log('加载完成')
</script>

外联:

<script src="" type="application/javascript"></script>

而后,由于浏览器默认的脚本语言为JavaScript,因此type属性可以去掉。

<script src=""></script>

浏览器渲染规则

浏览器的渲染规则是,从上到下加载,正常情况下加载完马上就会执行。

CSS文件可以边加载边渲染,而JS文件必须等到加载完成才能渲染。

若在加载过程中遇到大体积的JS文件,则会等到JS加载完后才会继续渲染,对整个页面的加载造成阻塞。

浏览器的异步加载

而为了解决加载阻塞问题,浏览器提供了defer属性和async属性。

那么,defer和async有什么区别呢?

给script标签加上defer属性,其内部的JS会在整个页面加载完成后才执行。这个加载完包括整个页面的渲染和其他脚本的执行。存在多个defer时,会按照顺序执行。

而若是加上async属性,JS会在该script标签加载完后执行。这个加载完成后会中断渲染来执行。执行完成后再继续渲染。由于加载速度是不确定的,多个async脚本之间无法确保执行顺序。

浏览器ES6模块支持

在ES6中,添加了JS模块化的标准,在script标签上添加type="module"即可声明为ES6模块。

<script type="module" src=""></script>

对添加了type="module"的标签,浏览器默认会对其进行defer属性的处理,即等到整个页面加载完成后再执行,同时,也可以添加async标签,这样,该标签会在加载完成后执行。

<script type="module" src="" async></script>

同时,添加了type="module"的标签也可以直接内嵌,这样浏览器会按照默认的加载方式加载。

<script type="module">
    import moduleA from './moduleA.js'
	console.log('加载完成')
</script>

文章作者: hn-failte
文章链接: https://failte.cn
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 hn-failte !
评论
 上一篇
Windows命令控制台默认编码问题 Windows命令控制台默认编码问题
[TOC] Windows命令控制台默认编码问题 有遇到过在Windows命令行中乱码的问题吗?今天的主题就是这个。解决命令控制台默认编码问题。 1、默认编码 Windows在中国的默认编码为936,即gb2312 2、查看当前编码 chc
2020-05-07
下一篇 
窗口间的通信与iframe跨域 窗口间的通信与iframe跨域
窗口间的通信与 iframe 跨域 iframe 跨域场景 1、若需要通讯的两个窗口在同源域名下,则无需跨域。 2、若需要通讯的两个窗口在同一个顶级域名下,可以手动配置两个窗口的域名为该顶级域名,从而实现通讯。代码如下: document.
2020-04-21
  目录