发表更新12 分钟读完 (大约1835个字)0次访问

杂记

前端事件循环机制是前端开发中一个重要的概念，也是面试中经常会涉及的话题。以下是一些与前端事件循环机制相关的常见面试题

1.请解释什么是Event Loop（事件循环）？它在JavaScript中的作用是什么？

Event Loop（事件循环）是JavaScript中用来处理异步操作的机制。它负责监听调用栈和任务队列，将任务队列中的任务按照一定规则推入调用栈中执行，从而实现异步编程。

2.请描述JavaScript中的任务队列（Task Queue）和微任务队列（Microtask Queue）之间的区别，并举例说明它们的执行顺序。

任务队列（Task Queue）是存放宏任务（Macro Task）的队列，而微任务队列（Microtask Queue）是存放微任务（Micro Task）的队列。它们之间的区别在于微任务队列的优先级高于任务队列，微任务会在当前宏任务执行完毕后立即执行。

3.什么是宏任务（Macro Task）和微任务（Micro Task）？它们在事件循环中是如何被处理的？

宏任务（Macro Task）是指由浏览器发起的任务，如setTimeout、setInterval等；而微任务（Micro Task）是指由JavaScript引擎发起的任务，如Promise、process.nextTick等。在事件循环中，每个宏任务执行完毕后会先清空微任务队列，然后再执行下一个宏任务。

4.请解释setTimeout和setImmediate之间的区别，它们在事件循环中的执行顺序是怎样的？

setTimeout和setImmediate都用于在事件循环中添加宏任务，它们之间的主要区别在于执行时机。setTimeout会将回调函数推入任务队列，在下一个宏任务执行时被执行；而setImmediate会将回调函数推入检查阶段，在当前宏任务执行完毕后立即执行。

5.在一个包含Promise、setTimeout和DOM事件的代码片段中，这些任务的执行顺序是怎样的？请说明原因。

在一个包含Promise、setTimeout和DOM事件的代码片段中，Promise的回调函数会被放入微任务队列，DOM事件会被放入任务队列，而setTimeout中的回调函数会被放入任务队列。执行顺序为：首先执行微任务队列中的Promise回调函数，然后执行DOM事件，最后执行setTimeout中的回调函数。

webpack热更新原理

通过webpack-dev-server创建两个服务器：
提供静态资源的服务（express）负责提供打包后的资源给浏览器请求和解析、Socket服务提供websocket长连接，
socket server监听到对应的模块发生变化生成manifest.json和chunk.js，通过长连接主动发送给客户端浏览器，
浏览器拿到文件通过HMR runtime机制加载这两个文件并针对修改的模块进行更新。

进程和线程的区别

  1. 进程和线程都是操作系统进行任务管理和调度的基本单位
  2. 一个进程可包含多个线程，多个线程可以共享同一个进程的资源，如内存空间、文件等
  3. 线程间的切换比进程间的切换开销更小，因为线程共享相同的地址空间

如何避免前端请求明文传输，提高数据传输的安全性

1.使用https协议：通过https协议，可以对前后端通信进行加密，确保数据在传输过程中是加密的而不是明文形式传输
2.对敏感数据进行加密：前端将敏感数据传输到后端之前对数据进行加密处理，即使在传输过程中被截获也无法轻易被解读内容
3.使用安全的认证和授权机制：确保客户端的身份验证和授权，只允许经过授权的用户获取敏感绝书，避免敏感数据被未授权的用户访问

performance计算白屏和首屏时间

使用performance的timing对象

白屏时间：whiteScreenTime = performance.timing.responseStart - performance.timing.navigationStart

首屏渲染时间： firstScreenTime = performance.timing.domContentLoadedEventEnd - performance.timing.navigationStart

其他：

重定向耗时 = redirectEnd - redirectStart;

DNS查询耗时 = domainLookupEnd - domainLookupStart;

TCP链接耗时 = connectEnd - connectStart;

HTTP请求耗时 = responseEnd - responseStart;

解析dom树耗时 = domComplete - domInteractive;

白屏时间 = responseStart - navigationStart;

DOMready时间/首屏渲染时间 = domContentLoadedEventEnd - navigationStart;

onload时间 = loadEventEnd - navigationStart;

了解 React 中的 ErrorBoundary 吗，它有那些使用场景？

  1. 捕获子组件中的错误
  • ErrorBoundary可以包裹组件树中的特定部分，以捕获子组件抛出的错误，防止错误影响到整个程序
  1. 展示备用UI
  • 当ErrorBoundary捕获到错误时，可以渲染备用的UI，如错误消息、回退组件活自定义的错误页面，提供更好的用户体验
  1. 记录和报告错误
  • ErrorBoundary可以再捕获到错误时，将错误信息记录到日志系统或者上报到错误监控平台，方便开发人员进行调试
  1. 处理组件异步加载的错误
  • 当使用动态导入或者代码分割时，如果异步加载的组件抛出错误可以被ErrorBoundary捕获并处理这些错误
  1. 捕获第三方库的错误

ErrorBoundary不能捕获哪些错误？

  1. 异步代码中的错误
  • ErrorBoundary只能捕获同步代码的javascript错误，无法捕获在异步代码如Promise、setTimeout等抛出的错误
  1. 事件处理程序中的错误
  • 无法捕获如onClick、onChange中的错误

  1. 服务端渲染SSR中的错误

  2. 错误发生在ErrorBoundary自身中的错误，需要使用全局错误处理机制

  3. 初始渲染期间的错误，因为此时尚未挂在ErrorBoundary

  4. hook中发生的错误，需要通过try…catch或全局错误处理程序

网页各种距离

  • e.pageY: 鼠标距离文档顶部的距离

  • e.clientY: 鼠标距离可是区域顶部的距离

  • e.offsetY: 鼠标距离出发事件元素顶部的距离

  • e.screenY: 鼠标距离屏幕顶部的距离

  • window.scrollY: 页面滚动的距离，也叫window.pageYOffset，等同于document.documentElement.scrollTop

  • element.scrollTop: 元素滚动距离

  • element.clientTop: 上边框高度

  • element.offsetTop: 相对有position的父元素的内容顶部距离

  • clientHeight: 内容高度，不包括边框

  • offsetHeight: 包含边框的高度

  • scrollHeight: 滚动区域的高度，不包括边框

  • window.innerHeight: 窗口的高度

  • element.getBoundingClientRect：拿到 width、height、top、left 属性，其中 top、left 是元素距离可视区域的距离，width、height 绝大多数情况下等同 offsetHeight、offsetWidth，但旋转之后就不一样了，拿到的是包围盒的宽高

  • react的合成事件没有offsetY属性，可以通过pageY - clientY - top计算

评论

×