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文件异步加载的更多相关文章
- js的异步加载你真的懂吗
面试高频之js的异步加载 讲这个问题之前, 我们从另一个面试高频问题来切入, 我们的web页面从开始解析到页面渲染完成都经历了什么 ? 1 , 创建document对象, 开始解析页面, ...
- 动态加载JS文件,并根据JS文件的加载状态来执行自己的回调函数
动态加载JS文件,并根据JS文件的加载状态来执行自己的回调函数, 在很多场景下,我们需要在动态加载JS文件的时候,根据加载的状态来进行后续的操作,需要在JS加载成功后,执行另一方法,这个方法是依托在加 ...
- js文件 与 css文件 异步加载
使用lazyload 异步加载css js 文件. 提升页面初始化的速度,减少卡顿时间 , 下面是 使用方法 与 lazyload.js 源码 (中文注释) 调用方法后. 会追加到 head 标签末尾 ...
- Vue中结合Flask与Node.JS的异步加载功能实现文章的分页效果
你好!欢迎阅读我的博文,你可以跳转到我的个人博客网站,会有更好的排版效果和功能. 此外,本篇博文为本人Pushy原创,如需转载请注明出处:http://blog.pushy.site/posts/15 ...
- 高性能js之js文件的加载与解析
随着网站的发展,现在的网页已经离不开js,经常一个页面会引入大量的js.那么该如何合理的加载这些js? head标签中引入js文件可能是最常见的一种方式,但是这样会造成一个问题.因为j可以说是浏览器中 ...
- js滚动异步加载数据的思路
<body> <div style="width:200px; height:1000px; border:1px solid red;" id="to ...
- 解决JS文件页面加载时的阻塞
关于页面加载时的时间消费,许多书中都做出了介绍,也提出了很多种方法.本文章就详细介绍XHR注入. 概述:JS分拆的方法 1.XHR注入:就是用ajax异步请求同域包含脚本的文件,然后将返回的字符串转化 ...
- frames的对象兼容性获取以及跨域实现数据交换(js文件的加载判断)
1.document.frames()与document.frames[]的区别 <html> <body> <iframe id="ifr_1" n ...
- welcome-file-list设置问题之css,js文件无法加载
web.xml里的welcome-file-list里设置默认访问页面为/html/index.html 但是在访问时,页面CSS都没加载. 正常输入网址却没问题.用/html/index.jsp也没 ...
- JS文件中加载jquery.js
原文链接:http://blog.csdn.net/whatday/article/details/39553451 最近有一个需求: 1.在一个html中只能引入一个JS文件 不能有JS代码和其他J ...
随机推荐
- restful-接口风格
- ASR6505是基于STM 8位MCU的无线通信芯片组
ASR6505是基于STM 8位MCU的无线通信芯片组 ASR6505是一种通用的LoRa无线通信芯片组,集成了LoRa无线电收发器.LoRa调制解调器和一个8位CISC MCU ASR6505是基于 ...
- OpenGauss 单机版安装
OpenGauss 单机版安装 银河麒麟的前置事项 yum -y install libaio-devel flex bison ncurses-devel glibc-devel patch rea ...
- [转帖]linux查看端口及端口详解
https://www.cnblogs.com/the-tops/p/6126941.html 今天现场查看了TCP端口的占用情况,如下图 红色部分是IP,现场那边问我是不是我的程序占用了tc ...
- [转帖]Tiup 常用运维操作命令干货
https://zhuanlan.zhihu.com/p/356031031 **导读**> 作者:杨漆> 16年关系型数据库管理,从oracle 9i .10g.11g.12c到Mysq ...
- [转帖]AMD Zen4 霄龙 9004 转战嵌入式:192 框框无敌!秒杀对手 80%
http://www.myzaker.com/article/64104f50b15ec02eb10eb659 其实,它就是把此前用于服务器.数据中心的霄龙 9004 系列的部分型号拿了过来,命名.规 ...
- [转帖]记录自己安装内存带宽测试工具——Stream过程
测试环境: CPU:Kunpeng 920 8Core MEM:16G Storage:200G OS:openEuler 20.03 (LTS-SP3) 1 服务器资源监控工具--Stream 1. ...
- locust+python性能测试库
一.简介 locust官网介绍:Locust 是一个用于 HTTP 和其他协议的开源性能/负载测试工具.其对开发人员友好的方法允许您在常规 Python 代码中定义测试.Locust测试可以从命令行运 ...
- pycharm提交代码到gitee
1.在pycharm中下载gitee插件,打开pycharm进入settings页面,查看当前页面version control下是否 有gitee,要是没有点击plugins,在搜索框中搜索gite ...
- MySQL 列操作记录
在 MySQL 中,你可以使用多种命令和语句来执行列操作,包括添加.修改.删除列等.以下是一些与列操作相关的常用 MySQL 命令和语句: 1. 添加列: 添加新列到表格中: ALTER TABLE ...