浅析我对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 相关文章推荐
js清理Word格式示例代码
Feb 13 Javascript
JavaScript遍历table表格中的某行某列并打印其值
Jul 08 Javascript
jQuery实现右键菜单、遮罩等效果代码
Sep 27 Javascript
BootStrap按钮标签及基本样式
Nov 23 Javascript
JS实现简单的二元方程计算器功能示例
Jan 03 Javascript
js仿iphone秒表功能 计算平均数
Jan 11 Javascript
微信小程序开发之实现自定义Toast弹框
Jun 08 Javascript
bootstrap fileinput实现文件上传功能
Aug 23 Javascript
详解node服务器中打开html文件的两种方法
Sep 18 Javascript
vue实现点击关注后及时更新列表功能
Jun 26 Javascript
详解Vue.js iview实现树形权限表(可扩展表)
Sep 30 Javascript
vue的keep-alive用法技巧
Aug 15 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中的加密功能
2006/10/09 PHP
php面向对象全攻略 (十四) php5接口技术
2009/09/30 PHP
zend optimizer在wamp的基础上安装图文教程
2013/10/26 PHP
php实现读取手机客户端浏览器的类
2015/01/09 PHP
浅析PHP关键词替换的类(避免重复替换,保留与还原原始链接)
2015/09/22 PHP
PHP+MySQL实现无极限分类栏目的方法
2015/12/23 PHP
PHP中substr函数字符串截取用法分析
2016/01/07 PHP
PHP实现通过二维数组键值获取一维键名操作示例
2019/10/11 PHP
pjblog修改技巧汇总
2007/03/12 Javascript
js下将字符串当函数执行的方法
2011/07/13 Javascript
JS获取浏览器版本及名称实现函数
2013/04/02 Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
2015/03/18 Javascript
JavaScript获取网页中第一个图片id的方法
2015/04/03 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
2016/04/29 Javascript
js实现日历的简单算法
2017/01/24 Javascript
Javascript之图片的延迟加载的实例详解
2017/07/24 Javascript
详解vue-cli中模拟数据的两种方法
2018/07/03 Javascript
vue实现双向绑定和依赖收集遇到的坑
2018/11/29 Javascript
微信小程序--特定区域滚动到顶部时固定的方法
2019/04/28 Javascript
Vue-cli3多页面配置详解
2020/03/22 Javascript
JavaScript Array.flat()函数用法解析
2020/09/02 Javascript
Python中的__new__与__init__魔术方法理解笔记
2014/11/08 Python
Python使用PyCrypto实现AES加密功能示例
2017/05/22 Python
Python查询IP地址归属完整代码
2017/06/21 Python
关于Python中浮点数精度处理的技巧总结
2017/08/10 Python
python保留格式汇总各部门excel内容的实现思路
2020/06/01 Python
Django如何重置migration的几种情景
2021/02/24 Python
一个基于canvas的移动端图片编辑器的实现
2020/10/28 HTML / CSS
新加坡网上花店:FlowerAdvisor新加坡
2018/10/05 全球购物
波兰灯具、照明和LED购物网站:Lampy.pl
2019/03/11 全球购物
简述网络文件系统NFS,并说明其作用
2016/10/19 面试题
市级青年文明号申报材料
2014/05/26 职场文书
卫生院健康教育实施方案
2014/06/07 职场文书
学校党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
群众路线教育实践活动实施方案
2014/10/31 职场文书
邀请函模板
2015/02/02 职场文书