Js文件异步加载
Js文件异步加载
浏览器中渲染引擎与Js脚本引擎是互斥的，在浏览器开始渲染页面时，如果遇到<script>标签，会停止渲染当前页面，也就是说在脚本加载与执行的过程中会阻塞页面的渲染，在网速较差的环境下可能会出现浏览器页面假死的情况，这也就是尽量将<script>文件放置于<body>后的原因，Js文件异步加载就是使浏览器加载外部Js脚本文件时不阻塞渲染线程，这称为非阻塞模式加载，当然加载完成之后解析执行Js脚本时必须与渲染引擎互斥，解析执行Js脚本的时机取决于异步加载Js的方式。
defer
defer是早期IE支持的属性，目前主流浏览器都已经支持。
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属性，目前主流浏览器都已经支持。
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/qq_41245969/article/details/82428464本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020-06-07 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
