前端基础面试题

[hangzz]

Debounce 和 Throttle 防抖 节流

HTML5、CSS3、ES6(es2015)新特性总结

https://zhuanlan.zhihu.com/p/78661051

es2020(ES11)新特性

• String.prototype.matchAll
• 提出import()
• BigInt 任意精度整数
• Promise.allSettled
• globalThis
• for-in 机制
• 可选链
• 空值合并运算符
• export * as ns from “mod”

小知识点

• 营销页面上加上圣诞雪花效果 pointer-events: none
•  css动画如何GPU加速，优化性能 transform：translateZ(0)
• 精确获取元素相对页面位置的方式 getBoundingClientRect

  那就是使用getBoundingClientRect()方法。它返回一个对象，其中包含了left、right、top、bottom四个属性，分别对应了该元素的左上角和右下角相对于浏览器窗口（viewport）左上角的距离。
  var X= this.getBoundingClientRect().left;
  var Y =this.getBoundingClientRect().top;
  //再加上滚动距离，就可以得到绝对位置
  var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
  var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;

react fiber react hook

JS 异步解决方案的发展历程以及优缺点

https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/11

1. 回调函数（callback）

2. Promise

3. Generator

4 Async/await

浏览器 多进程 多线程 js单线程

JavaScript是单线程的，但是JavaScript的执行环境不是单线程的，如浏览器、nodejs

event loop至少包含两个队列，macrotask队列和microtask队列

Macrotask

• Macrotasks 包含了解析 HTML、生成 DOM、执行主线程 JS 代码和其他事件如 页面加载、输入、网络事件、定时器事件等。从浏览器的角度，Macrotask 代表的是一些离散的独立的工作。

• 常见应用 
setTimeout, setInterval, setImmediate, requestAnimationFrame, I/O, UI rendering

Microtasks

• Microtasks 则是为了完成一些更新应用程序状态的较小的任务，如处理 Promise 的回调和 DOM 的修改，以便让这些任务在浏览器重新渲染之前执行。Microtask 应该以异步的方式尽快执行，所以它们的开销比 Macrotask 要小，并且可以使我们在 UI 重新渲染之前执行，避免了不必要的 UI 渲染。

• 常见应用 
process.nextTick, Promises, Object.observe, MutationObserver

  Ajax请求 和 web worker 同样是开了额外线程 ，区别呢

• Ajax也是系统单独开了一个线程去执行的网络请求 浏览器虽然会在一个单独的线程去进行网络请求，但是我们是通过传递一个回调的方式去处理数据，浏览器在网络请求成功后，然后会切换回js线程来执行我们的回调，也就是说我们所有的js代码都是在js线程中运行的。所以javascript确实是在一个单线程中

• 而web worker不同，我们的js代码可以运行在js主线程之外，这也是为什么不能在web worker里面直接共享js主线程中定义的变量，不能操作ui (dom树)的原因，因为根本不在一个线程

总体的执行顺序为：常规代码 -> promises -> events 和 setTimeout 等