浅析我对JS延迟异步脚本的思考


Posted in Javascript onOctober 12, 2020

关于对延迟脚本的思考

asyncdefer属性的脚本,相信大家都听说过,但是他的真正执行细节是什么样子的?很少有文章认真研究它,可能不太有人注重细节,但其实真正有技术含量的工作和项目,对于性能要求极高,那么细节就很重要了.需要不断的实验自我尝试

最近几个月,我一直在研究一些技术,例如linux,操作系统,算法等,预计要持续学习到今年年底。红宝书第四版出来后,我也是花了很多时间去看。对于延迟脚本,自己也是做了一个实验,写下了这篇总结

什么是延迟脚本?

script标签,带async和defer属性等,通过document.createElement('script')创建并且没有指定script.async=false的脚本默认为异步延迟脚本(必须为非内联脚本),如下所示:

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>

<body>

</body>
<script src="./async1.js" async></script>
<script src="./async2.js" async></script>
<script src="./defer1.js" defer></script>
<script src="./defer2.js" defer></script>
<script src="./common1.js"></script>
<script src="./common2.js"></script>
<script src="./common3.js"></script>

</html>

以上7个脚本文件,其中common开头为非异步延迟脚本,其余的都指定了延迟脚本的模式,分为async和defer两种

通过document.createElement创建的标签插入默认为async模式

开始实验

浅析我对JS延迟异步脚本的思考

我一共写了2个async和2个defer标签,其它的都是普通标签.其中async1.js里面有4000行代码,其它都是一个console.log而已

第一次实验结果:

浅析我对JS延迟异步脚本的思考

再次刷新页面(注意我已经禁用了浏览器缓存),结果为:

浅析我对JS延迟异步脚本的思考

再次刷新,发现async执行时机和顺序不确定,但是能确定defer肯定在async之后执行。

浅析我对JS延迟异步脚本的思考

原因在于:async是告诉浏览器,可以不必等到它下载解析完后再加载页面,也不用等它执行完后再执行其他脚本,俗称异步执行脚本

看下载执行时机和打印结果的对比

打印结果:

浅析我对JS延迟异步脚本的思考

对应的下载执行时机

浅析我对JS延迟异步脚本的思考

从上面看,下载时机async和普通模式都是同样并行下载,只有defer是最后才下载(http1.1有并发数量限制,可是这里并不是并发限制,当我删除common的引用后,我发现defer永远都是最后下载的)

浅析我对JS延迟异步脚本的思考

asyncdefer两种模式,区别在于:

  • async是告诉浏览器,它不会操作dom,可以不必等到它下载解析完后再加载页面,也不用等它执行完后再执行其他脚本,俗称异步执行脚本, 多个async无法保证他们的执行顺序,例如async1和async2无法按顺序执行
  • defer是在解析到结束到</html>标签后才会执行,俗称推迟执行脚本,多个defer可以按顺序执行,例如defer1和defer2可以按顺序执行(实际上也不保证顺序执行)
  • 解析到script标签后,async是直接下载
  • 解析到script标签后,defer是最后下载

相同点:

  • 多个async或者defer标签实际上都不能保证顺序执行
  • 都不会阻塞解析其他script标签内容的解析和页面渲染
  • 他们都会在浏览器load事件前执行,但是不保证是在DomContentLoad事件前还是后执行

影响多个异步脚本的执行顺序因素

  • 脚本文件大小
  • 网络传输因素

特殊情况

当所有的脚本文件都很小很小的时候,结果会在很大概率稳定在

浅析我对JS延迟异步脚本的思考

使用的注意点

  • 异步推迟脚本的执行顺序并不稳定,所有尽量只有一个
  • 使用异步推迟脚本时,应该考虑什么场景才使用,而不是滥用它

写在最后

到此这篇关于浅析我对JS延迟异步脚本的思考的文章就介绍到这了,更多相关JS 延迟异步脚本内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
表单的一些基本用法与技巧
Jul 15 Javascript
css3元素简单的闪烁效果实现(html5 jquery)
Dec 28 Javascript
Js实现动态添加删除Table行示例
Apr 14 Javascript
JQuery Mobile实现导航栏和页脚
Mar 09 Javascript
AngularJS入门教程之ng-class 指令用法
Aug 01 Javascript
canvas绘图不清晰的解决方案
Feb 28 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
May 02 Javascript
JS实现按钮控制计时开始和停止功能
Jul 27 Javascript
微信小程序实战篇之购物车的实现代码示例
Nov 30 Javascript
微信小程序实现两边小中间大的轮播效果的示例代码
Dec 07 Javascript
微信小程序实现图片上传
May 23 Javascript
解决antd的Form组件setFieldsValue的警告问题
Oct 29 Javascript
Webpack5正式发布,有哪些新特性
Oct 12 #Javascript
如何利用 JS 脚本实现网页全自动秒杀抢购功能
Oct 12 #Javascript
移动端JS实现拖拽两种方法解析
Oct 12 #Javascript
JavaScript读取本地文件常用方法流程解析
Oct 12 #Javascript
vue实现移动端返回顶部
Oct 12 #Javascript
用JavaScript实现贪吃蛇游戏
Oct 23 #Javascript
手机浏览器唤起微信分享(JS)
Oct 11 #Javascript
You might like
PHP 最大运行时间 max_execution_time修改方法
2010/03/08 PHP
php header Content-Type类型小结
2011/07/03 PHP
学习php分页代码实例
2013/10/24 PHP
php生成xml时添加CDATA标签的方法
2014/10/17 PHP
php实现的简单检验登陆类
2015/06/18 PHP
PHP实现简单的计算器
2020/08/28 PHP
一步一步教你写一个jQuery的插件教程(Plugin)
2009/09/03 Javascript
jquery slibings选取同级其他元素的实现代码
2013/11/15 Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
2014/06/24 Javascript
JavaScript极简入门教程(一):基础篇
2014/10/25 Javascript
基于javascript html5实现3D翻书特效
2016/03/14 Javascript
jQuery调用WebMethod(PageMethod) NET2.0的方法
2016/04/15 Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
2016/12/17 Javascript
angular.fromJson与toJson方法用法示例
2017/05/17 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
2017/11/15 Javascript
vue 的 solt 子组件过滤过程解析
2019/09/07 Javascript
vue 实现模糊检索并根据其他字符的首字母顺序排列
2019/09/19 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
2019/10/11 Javascript
利用webpack理解CommonJS和ES Modules的差异区别
2020/06/16 Javascript
使用Python编写基于DHT协议的BT资源爬虫
2016/03/19 Python
python 上下文管理器使用方法小结
2017/10/10 Python
python 中的divmod数字处理函数浅析
2017/10/17 Python
python如何去除字符串中不想要的字符
2020/07/05 Python
python 将列表中的字符串连接成一个长路径的方法
2018/10/23 Python
Python selenium爬取微博数据代码实例
2020/05/22 Python
德国化妆品和天然化妆品网上商店:kosmetikfuchs.de
2017/06/09 全球购物
伦敦剧院及景点门票:Encore Tickets
2018/07/01 全球购物
应届医学毕业生求职信分享
2013/12/02 职场文书
安全生产检查通报
2014/01/29 职场文书
三好学生演讲稿范文
2014/04/26 职场文书
护理学院专科毕业生求职信
2014/06/28 职场文书
五星级酒店前台接待岗位职责
2015/04/02 职场文书
高三教师工作总结2015
2015/07/21 职场文书
PHP策略模式写法
2021/04/01 PHP
PHP实现创建以太坊钱包转账等功能
2021/04/21 PHP
Nginx location 和 proxy_pass路径配置问题小结
2021/09/04 Servers