面试题 —— 前端精选(1)

文章目录

前言

[阐述 JS 的事件循环](#阐述 JS 的事件循环)

[JS 中的计时器能做到精确计时吗?为什么?](#JS 中的计时器能做到精确计时吗?为什么?)

[如何理解 JS 的异步?](#如何理解 JS 的异步?)


前言

本文章介绍三道围绕 JavaScript 的精选面试题


阐述 JS 的事件循环

事件循环⼜叫做消息循环,是浏览器渲染主线程的⼯作⽅式。 在 Chrome 的源码中,它开启⼀个不会结束的 for 循环,每次循环从消息 队列中取出第⼀个任务执⾏,⽽其他线程只需要在合适的时候将任务加⼊到 队列末尾即可。 过去把消息队列简单分为宏队列和微队列,这种说法⽬前已⽆法满⾜复杂的 浏览器环境,取⽽代之的是⼀种更加灵活多变的处理⽅式。 根据 W3C 官⽅的解释,每个任务有不同的类型,同类型的任务必须在同⼀ 个队列,不同的任务可以属于不同的队列。不同任务队列有不同的优先级, 在⼀次事件循环中,由浏览器⾃⾏决定取哪⼀个队列的任务。但浏览器必须 有⼀个微队列,微队列的任务⼀定具有最⾼的优先级,必须优先调度执⾏。


JS 中的计时器能做到精确计时吗?为什么?

不⾏,因为:

  1. 计算机硬件没有原⼦钟,⽆法做到精确计时

  2. 操作系统的计时函数本身就有少量偏差,由于 JS 的计时器最终调⽤的 是操作系统的函数,也就携带了这些偏差

  3. 按照 W3C 的标准,浏览器实现计时器时,如果嵌套层级超过 5 层, 则会带有 4 毫秒的最少时间,这样在计时时间少于 4 毫秒时⼜带来 了偏差

  4. 受事件循环的影响,计时器的回调函数只能在主线程空闲时运⾏,因此 ⼜带来了偏差


如何理解 JS 的异步?

JS是⼀⻔单线程的语⾔,这是因为它运⾏在浏览器的渲染主线程中,⽽渲染 主线程只有⼀个。

⽽渲染主线程承担着诸多的⼯作,渲染⻚⾯、执⾏ JS 都在其中运⾏。 如果使⽤同步的⽅式,就极有可能导致主线程产⽣阻塞,从⽽导致消息队列 中的很多其他任务⽆法得到执⾏。这样一来,⼀⽅⾯会导致繁忙的主线程⽩ ⽩的消耗时间,另⼀⽅⾯导致⻚⾯⽆法及时更新,给⽤户造成卡死现象。

所以浏览器采⽤异步的⽅式来避免。具体做法是当某些任务发⽣时,⽐如计 时器、⽹络、事件监听,主线程将任务交给其他线程去处理,⾃身⽴即结束 任务的执⾏,转⽽执⾏后续代码。当其他线程完成时,将事先传递的回调函 数包装成任务,加⼊到消息队列的末尾排队,等待主线程调度执⾏。 在这种异步模式下,浏览器永不阻塞,从⽽最⼤限度的保证了单线程的流畅运⾏。

相关推荐
lichenyang453几秒前
从 Express 老项目到 NestJS + Docker:一次车辆管理系统的渐进式重构
前端
竹林8181 小时前
用 wagmi v2 + viem 监听链上事件,我踩了三天坑终于搞懂了实时日志与历史补全
javascript
Momo__1 小时前
VueUse createReusableTemplate —— 单文件组件内的模板复用神器
前端·vue.js
只一1 小时前
😭从回调地狱到 async/await:一文打通 Ajax 与 JS 异步编程
javascript
程序员小富1 小时前
我开源了一个开发者专属的智能 JSON 工具,得到了媳妇高度认可
前端·vue.js·后端
小小小小宇1 小时前
程序员如何给 LLM 装工具以及看懂推理过程
前端
写代码的皮筏艇1 小时前
React中的forwardRef
前端·react.js·面试
槑有老呆1 小时前
花三个月工资请了个 AI 程序员,结果它连青岛啤酒股价都查不了
前端
风骏时光牛马2 小时前
Verilog开发常见问题汇总解析
前端
子兮曰2 小时前
AI Coding Method Map:一张图看懂 AI 编程的完整链路
前端·人工智能·后端