JS执行机制
时间:2022-07-28
本文章向大家介绍JS执行机制,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1 . JS 是单线程
JavaScript语言的一大特点就是单线程,也就是说,同-个时间只能做一件事。 这是因为Javascript这门脚 本语言诞生的使命所致一JavaScript 是为处理页面中用户的交互,以吸操作DOM而诞生的。比如我们对 某个DOM元素进行添加和删除操作,不能同时进行。应该先进行添加,之后再删除。
单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。如果前一个任务耗时很长,后一个任务就不得不一直等着。
这样所导致的问题是: 如果 JS 执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉。
2. 同步任务和异步任务
单线程导致的问题就是后面的任务等待前面任务完成,如果前面任务很耗时(比如读取网络数据),后面任务不得不一直等待!!
为了解决这个问题,利用多核 CPU 的计算能力,HTML5 提出 Web Worker 标准,允许 JavaScript 脚本创建多个线程,但是子线程完全受主线程控制。于是,JS 中出现了同步任务和异步任务。
同步
前一个任务结束后再执行后一个任务,程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做法:我们要烧水煮饭,等水开了(10分钟之后),再去切菜,炒菜。
异步
你在做一件事情时,因为这件事情会花费很长时间,在做这件事的同时,你还可以去处理其他事情。比如做饭的异步做法,我们在烧水的同时,利用这10分钟,去切菜,炒菜。
JS中所有任务可以分成两种,一种是同步任务(synchronous),另一种是异步任务(asynchronous)。 同步任务指的是: 在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务; 异步任务指的是: 不进入主线程、而进入”任务队列”的任务,当主线程中的任务运行完了,才会从”任务队列”取出异步任务放入主线程执行。
3. JS执行机制(事件循环)
由于主线程不断的重复获得任务、执行任务、再获取任务、再执行,所以这种机制被称为事件循环( event loop) .
- 【52ABP实战教程】0.3-- 从GitHub推送代码回VSTS实现双向同步
- css绝对定位如何在不同分辨率下的电脑正常显示定位位置?
- nvm安装node和npm,个人踩坑记录
- clang_intprt_t类型探究
- 学习zepto.js(Hello World)
- JS中函数声明与函数表达式的异同
- [技巧]看我如何通过Weeman+Ettercap拿下路由器管理权限
- 一分钟理清Vue-cli 代码构建步骤。
- 点击图片放大至原始图片大小
- 替代jquery1.9版本以前的toggle事件函数(开关)
- 总结CSS3新特性(Animation篇)
- Scrapy爬虫入门
- 移动端页面按手机屏幕分辨率自动缩放的js
- PYTHON黑帽编程 4.1 SNIFFER(嗅探器)之数据捕获--补充
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- cURL-7.72.0(scheme杂项补充)
- sentinel实现服务限流降级
- 5个技巧让你更好的编写 JavaScript(ES6) 中条件语句
- cURL-7.72.0(scheme)
- cURL-7.72.0初体验(参数写法)
- 21道前端面试题,值得收藏~
- OpenCV4.4 CUDA编译与加速全解析
- JavaScript中的Event Loop机制详解(前端必看)
- HDFS集群缩容案例: Decommission DataNode
- 应用深度学习进行乳腺癌检测
- 为什么你的数据仓库项目推进不下去?
- 19个有趣的Linux 命令,最后一个?... 打死我都不敢尝试!
- SpringBoot 整合 Quartz 实现 JAVA 定时任务的动态配置
- 使用 IntelliJ IDEA 查看类图,内容极度舒适
- 精选10款谷歌浏览器插件武装你的浏览器