前端面试题

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第1天

国庆找了我的一位小伙伴为我模拟面试一次，查缺补漏，发现了很多的问题。

Part One：HTML

对HTML语义化的理解 ✅
script标签中defer和async的区别 ✅
e.target 和 e.currentTarget 的区别 ❌

e.target 是触发事件的元素｜ e.currentTarget 是绑定事件的元素

参考链接

对 web worker 的理解 ❌

Web Worker 可以使脚本运行在新的线程中，它们独立于主线程，可以进行大量的计算活动，而不会影响主线程的 UI 渲染。当计算结束之后，它们可以把结果发送给主线程，从而形成了高效、良好的用户体验。

参考链接

Part Two: CSS

CSS选择器及其优先级 ✅

相邻兄弟选择器子选择器后代选择器通配符选择器最低

![截屏2022-10-02 上午8.36.04](/Users/fengcaizhi/Library/Application Support/typora-user-images/截屏2022-10-02 上午8.36.04.png)

盒模型有哪些？有哪些使用场景？ ✅
怎么防止重绘和回流 ✅
清除浮动 ❌ 「答的不全，只答出来了 BFC 的方法」

注意：清除浮动不是不用浮动，清除浮动产生的父容器高度塌陷。

(1) 给父元素添加高度「扩展性不好」

(2) clear:both;

在父元素中的子元素最后添加一个块级元素，设置 style="clear: both"。「必须是一个块级元素，否则没法撑开父元素高度」

(3) 伪元素清除浮动

使用 :after 设置一个 block 级别的元素

配合 hasLayout 使用

(4) 使用 BFC 布局

添加 overflow: hidden

(5) 使用 br 标签

<br clear="all" />

参考文章

Part Three: JavaScript

JavaScript有哪些数据类型 ✅
== 操作符的强制类型转换规则 ❌

以下为执行顺序

查看是否是 undefined 和 null 比较
- ✅ 返回 true
- ⬇️ 如果不是继续下一条规则
是否在比较 string 和 number
- ✅ 如果是，那么将 string 转为 number 并回到最初重新比较 ♻️
- ⬇️ 如果不是继续下一条规则
查看我们比较的项中是否有 boolean
- ✅ 如果有，那么将 boolean 转为 number 并回到最初重新比较 ♻️
- ⬇️ 如果不是继续下一条规则
查看是否有一项是 object
- ✅ 如果有，那么将 object 转为其原始值 primitive 并回到最初重新比较 ♻️
- ❌ 如果还不是，只能返回 false 了
🍒 图解 == 操作符规则和不同类型间转换规则

什么是尾调用，使用尾调用有什么好处 ❌ 「完全不知道（」

尾调用：在某个函数的最后一步是调用另一个函数

异步编程的实现方式 ✅
并发与并行的区别 ❌

并发的关键是你有处理多个任务的能力，不一定要同时。「能够交替进行」

并行的关键是你有同时处理多个任务的能力。「同时进行」

Part Four： Vue

Object.deinepropety和Proxy ✅
Vue2怎么强制更新？ ❌ 「不知道这个 API」

法1: $forceUpdate

法2: $set

参考链接

Vue Scoped CSS 是做什么的，怎么实现的，如果让你自己实现有什么思路 ✅
v-model原理 ✅
Vue3相对于Vue2的优化 ❌ 「答的不全」

参考链接

Part Five：手写题

反转Dom ❌ 不熟悉API（

let element = document.getElementById('a')
function reverserChildren(element) {
  let l = element.childNotes.length
  while(l--) {
    element.appendChild(element.childNodes[l])
  }
}

防抖 ❌ （在提示之后写出来了）

function debounce(fn, wait) {
  let timer;
  return function() {
    let _this = this
    let args = arguments
    if(timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(function() {
      fn.apply(_this, args)
    }, wait)
  }
}

面试题「前端」