由script标签引发了我对setTimeout异步的思考

eternalshallow 发布于2019-08-23 14:25 / 2976人阅读

摘要：我们都知道在中是异步执行机制的像这样如果在这条语句后面还有很多的同步任务，它必须要等这些同步任务完成才会执行里面的内容不好意思，我要等循环的同步任务完成才能执行这里的任务完成了，才会执行的内容那么我所发现的这个问题如下如代码所示在中插入两个

我们都知道在JS中setTimeout是异步执行机制的 像setTimeout(function(){},0)这样

如果在这条语句后面还有很多的同步任务，
它必须要等这些同步任务完成才会执行setTimeout里面的内容

setTimeout(function(){
    不好意思，我要等for循环的同步任务完成才能执行
},0)
for(var i = 0; i < 99999999999; i++){
    这里的任务完成了，才会执行setTimeout的内容
}

那么我所发现的这个问题如下：
如代码所示：在body中插入两个script标签

这里所用的测试字符串是中文
这里需要做3个实验，分为A、B、C

实验A：用比较短的字符串，(有5个中文字体)来测试，执行的弹窗结果是：
fir-script -> sec-script -> "测试字符串" -> setTime

实验B：用较长的字符串，(有45000个中文字体)来测试，结果发现了变化 执行的弹窗结果是： 
fir-script ->setTime -> sec-script -> "测试字符串"

实验C：减少部分字符串，(有43000个中文字体)来测试，执行的弹窗结果是： 
fir-script -> sec-script -> "测试字符串" -> setTime

在其他条件没有变化的情况下(注意：三次测试setTiemout的时间都是0)
程序执行的顺序似乎和字符串的长度有关
(那其实可以说是和script里面的内容大小有关，那也可以进一步理解为和解析script内容的时间有关)

为了验证上述结论(执行顺序和解析script内容的时间有关)
在实验B的基础上，对setTiemout的时间进行更改，其他保持不变
如B(5)为5ms后执行，即setTimeout(()=>{alert("setTime");},5);
下面我们看一下结果：

B(0):  fir-script -> setTime -> sec-script -> "测试字符串"  
B(5): fir-script -> setTime -> sec-script -> "测试字符串"  
B(10): fir-script ->sec-script -> "测试字符串" -> setTime  
B(15): fir-script -> sec-script ->"测试字符串" -> setTime

从上面几个实验我们可以在侧面看出一个现象
setTime 不会出现在 sec-script 和 "测试字符串" 之间，
这也反映了JS是单线程执行的,而且在同步任务里，不受其他script标签的影响

通过这个案例，发现了一些问题，总结如下：

如有其他外部脚本(即使这些脚本都是同步任务)，像setTiemout这些异步任务，不会等待所有同步任务执行完成
只有在同一个script标签里，异步任务要等待该标签的所有同步任务完成才会执行 
因为需要去解析脚本，而解析脚本与执行另外的脚本不冲突

最后的最后，如果你在尝试过程中发现与本文的结果不相同，请把测试用的案例”加强“，如把字符串加到10W，这是因为setTimeout的不确定性
欢迎大家一起来探讨

超融合服务器混合云人工智能的思考对人工智能的思考人工智能由谁提出的由汇编语言写的程序

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100565.html

「今日头条」前端面试题和思路解析

摘要：一篇文章和一道面试题最近，有篇名为张图帮你一步步看清和的执行顺序的文章引起了我的关注。作者用一道年今日头条的前端面试题为引子，分步讲解了最终结果的执行原因。从字面意思理解，让我们等等。当前的最新版本，在这里的执行顺序上，的确存在有问题。一篇文章和一道面试题最近，有篇名为《8张图帮你一步步看清 async/await 和 promise 的执行顺序》的文章引起了我的关注。作者用...

宠来也 2019-08-23 14:14 评论0 收藏0
一道面试题引发的思考 --- Event Loop

摘要：想必面试题刷的多的同学对下面这道题目不陌生，能够立即回答出输出个，可是你真的懂为什么吗为什么是输出为什么是输出个这两个问题在我脑边萦绕。同步任务都好理解，一个执行完执行下一个。本文只是我对这道面试题的一点思考，有误的地方望批评指正。想必面试题刷的多的同学对下面这道题目不陌生，能够立即回答出输出10个10，可是你真的懂为什么吗？为什么是输出10？为什么是输出10个10？这两个问题在我脑...

betacat 2019-08-23 14:13 评论0 收藏0
一道setTimeout async promise执行顺序的笔试题引发的思考

摘要：如果你要问他和谁当进去的快，要从下面两个方面考虑结束时。至于什么，查了很多的资料，了解到一个浏览器环境只能有一个事件循环，而一个事件循环可以有多个任务队列。 ====据说这是今日头条去年的一道笔试题，主要考察的是setTimeout async promise执行顺序～先双手奉上这道题目～ async function async1() { consol...

soasme 2019-08-23 13:53 评论0 收藏0
try catch引发的性能优化深度思考

摘要：进一步最终定位发现如果为的时候，效率骤降，如果为合法的字符串的时候，效率是正常值。每次执行该子句都会发生这种情况，将捕获的异常对象分配给一个变量。尽可能将它们与其他代码隔离，以免影响其性能。关键代码拆解成如下图所示（无关部分已省略）：起初我认为可能是这个 getRowDataItemNumberFormat 函数里面某些方法执行太慢，从 formatData.replace 到 unesca...

番茄西红柿 2021-11-29 10:50 评论0 收藏2637
前端面试--浏览器

摘要：打开一个网页，看到服务器返回给客户端浏览器的各种文件类型图片构建浏览器会遵守一套步骤将文件转换为树。因为浏览器有渲染线程与引擎线程，为了防止渲染出现不可预期的结果，这两个线程是互斥的关系。 1. 浏览器架构用户界面主进程内核渲染引擎 JS 引擎执行栈事件触发线程消息队列微任务宏任务网络异步线程定时器线程 2. 从输入 url 到页面展示...

bigdevil_s 2019-08-23 17:20 评论0 收藏0