登录  /  注册
博主信息
博文 94
粉丝 0
评论 0
访问量 44709
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
【JS】异步原理
可乐随笔
原创
392人浏览过

异步原理

1. 线程与进程

  1. 进程: 程序实例,CPU->进程,除非切换上下文或多核
  2. 线程: 进程的某个任务,共享进程资源
  3. 单线程: JS 存在大量互斥操作,注定单线程(DOM)

2. 单线程

  1. 概念: 同一时刻,只能执行一个任务
  2. 优点: 按用户要求顺序执行,结果可控
  3. 缺点: 如果有耗时任务,必然阻塞整个线程
  4. 方案: 耗时任务异步执行,其它同步执行

3. 同步与异步

  1. 同步: 顺序,静态可控,但耗时阻塞
  2. 异步: 乱序,动态,不阻塞但不可控
  3. 同步任务: 在主线程(函数栈)中执行
  4. 异步任务: 脱离主线程执行(浏览器/Node)

4. 异步任务

  1. 定时任务: setTimeout(),setInterval()
  2. 事件监听: addEventListener()
  3. 网络请求: ajax,promise,fetch
  4. IO 操作: 文件,数据库…

5. 事件循环

  1. 前提: JS 所有任务必须在主线程(函数栈)中执行
  2. 任务队列: 异步任务准备就绪后在此排队等待
  3. 事件循环: 将任务队列中就绪异步任务调入主线程执行
  4. 调用栈空: 主线程所有任务(同步/异步)执行完毕

只有同步任务才进入主线程执行,所以此时异步任务已转换成同步任务

异步原理HTML示范:

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>异步任务演示</title>
  8. </head>
  9. <body>
  10. <script>
  11. // 1. 三个同步任务
  12. console.log(1);
  13. console.log(2);
  14. console.log(3);
  15. console.log('--------');
  16. // 2. 2个同步任务,1个异步任务
  17. console.log(1);
  18. setTimeout(() => console.log(2), 1000);
  19. console.log(3);
  20. console.log('---------');
  21. </script>
  22. <!-- DOM渲染是同步,还是异步? 同步-->
  23. <!-- keyup: 抬起时触发 -->
  24. <input type="text" onkeyup="console.log(this.value)" placeholder="keyup" />
  25. <!--
  26. keyup: 实现输入与控制台输出同步实时显示
  27. 1. 当抬起时,输入框中内容已渲染完成,同步任务结束
  28. 2. 异步任务开始: keyup已获取到输入框内容,显示正确
  29. -->
  30. <br />
  31. <!-- keydown: 按下时触发 -->
  32. <input type="text" onkeydown="setTimeout(()=>console.log(this.value),0)" placeholder="keydown" />
  33. <br />
  34. <!--
  35. setTimeout加上后,你按下某个键之后,keydown也会立即执行,但执行的是一个异步任务
  36. 而这个异步任务并不会马上执行,而是要待当前同步任务完成(当前同步任务是DOM渲染)
  37. 待主线程同步任务执行完毕,setTimeout()最低延迟立即执行,从而成功的跳过了空字符
  38. 实现了和keyup一样的实时同步显示效果
  39. -->
  40. <input type="text" oninput="console.log(this.value)" placeholder="input" />
  41. <!-- input === keyup === setTimeout(()=>keydown) 实际上完全不同 -->
  42. <!-- keyup,keydown: 键盘事件
  43. input: 文本事件 -->
  44. <!-- 思考: 当输入内容时, keyup,keydown,input 的顺序是什么? -->
  45. <!-- keydown -> input -> keyup -->
  46. </body>
  47. </html>
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学