Js文件异步加载

Posted WindrunnerMax

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Js文件异步加载相关的知识,希望对你有一定的参考价值。

Js文件异步加载

浏览器中渲染引擎与Js脚本引擎是互斥的,在浏览器开始渲染页面时,如果遇到<script>标签,会停止渲染当前页面,也就是说在脚本加载与执行的过程中会阻塞页面的渲染,在网速较差的环境下可能会出现浏览器页面假死的情况,这也就是尽量将<script>文件放置于<body>后的原因,Js文件异步加载就是使浏览器加载外部Js脚本文件时不阻塞渲染线程,这称为非阻塞模式加载,当然加载完成之后解析执行Js脚本时必须与渲染引擎互斥,解析执行Js脚本的时机取决于异步加载Js的方式。

defer

defer是早期IE支持的属性,目前主流浏览器都已经支持,该属性会使浏览器开启一个线程去加载Js并且会在DOM结构解析完成之后再执行。

  • defer只适用于外联脚本。
  • 如果有多个声明了defer的脚本,则会按顺序下载和执行。
  • defer脚本会在onDOMContentLoaded之前执行,当然同样也就在onload事件之前执行。
<!-- 兼容性 https://caniuse.com/#feat=script-defer -->
<script type="text/javascript" defer="defer" src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js" ></script>

async

html5<script>元素定义了async属性,目前主流浏览器都已经支持,该属性会使浏览器开启一个线程去加载Js并且会在下载完后立即执行。

  • async只适用于外联脚本。
  • 如果有多个声明了async的脚本,其下载和执行也是异步的,不能确保彼此的先后顺序。
  • async会在onload事件之前执行,但并不能确保与DOMContentLoaded的执行先后顺序。
<!-- 兼容性 https://caniuse.com/#feat=script-async -->
<script type="text/javascript" async="async" src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js" ></script>

Script DOM Element

Script DOM Element的方式即动态插入一个<script>标签来加载外部Js脚本文件,将其作为onload事件的回调函数,即在页面加载完成后再执行,这样就不会阻塞渲染线程。

window.onload = function(){
    var script= document.createElement(\'script\'); 
    script.type = \'text/javascript\'; 
    script.src ="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"; 
    var body= document.getElementsByTagName(\'body\')[0]; 
    body.appendChild(script);
}

每日一题

https://github.com/WindrunnerMax/EveryDay

参考

https://segmentfault.com/a/1190000006778717
https://www.cnblogs.com/jiasm/p/7683930.html
https://blog.csdn.net/zyj0209/article/details/79698430
https://blog.csdn.net/qq_41245969/article/details/82428464

以上是关于Js文件异步加载的主要内容,如果未能解决你的问题,请参考以下文章

如何延迟或异步此 WordPress javascript 片段以最后加载以加快页面加载时间?

require.ensure的用法;异步加载-代码分割;

当片段视图加载是异步任务的一部分时,如何在片段加载之前显示进度条?

webpack性能优化:分隔/分包/异步加载+组件与路由懒加载

javascript 异步加载

从片段中调用分离的异步任务类