国庆怎么玩？国庆去面试！

面试题「前端」

Part One：HTML

1.对HTML语义化的理解 ✅

2.script标签中defer和async的区别 ✅

3.e.target 和 e.currentTarget 的区别 ❌

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

• 参考链接

4.对 web worker 的理解 ❌

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

• 参考链接

Part Two: CSS

1.CSS选择器及其优先级 ✅

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

2.盒模型有哪些？有哪些使用场景？ ✅

3.怎么防止重绘和回流 ✅

4.清除浮动 ❌ 「答的不全，只答出来了 BFC 的方法」

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

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

(2) clear:both;

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

(3) 伪元素清除浮动

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

配合 hasLayout 使用

(4) 使用 BFC 布局

添加 overflow: hidden

(5) 使用 br 标签

<br clear="all" />

• 参考文章

Part Three: JavaScript

1.JavaScript有哪些数据类型 ✅

2.== 操作符的强制类型转换规则 ❌

以下为执行顺序

• 查看是否是 undefined 和 null 比较

  • ✅ 返回 true

  • ⬇️ 如果不是继续下一条规则

• 是否在比较 string 和 number

  • ✅ 如果是，那么将 string 转为 number 并回到最初重新比较 ♻️

  • ⬇️ 如果不是继续下一条规则

• 查看我们比较的项中是否有 boolean

  • ✅ 如果有，那么将 boolean 转为 number 并回到最初重新比较 ♻️

  • ⬇️ 如果不是继续下一条规则

• 查看是否有一项是 object

  • ✅ 如果有，那么将 object 转为其原始值 primitive 并回到最初重新比较 ♻️

  • ❌ 如果还不是，只能返回 false 了

• 🍒 图解 == 操作符规则和不同类型间转换规则

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

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

• 关于尾调用优化那些事
• 内存的清道夫——函数的尾调用

4. 异步编程的实现方式 ✅

5. 并发与并行的区别 ❌

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

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

Part Four： Vue

1. Object.deinepropety和Proxy ✅

2. Vue2怎么强制更新？ ❌ 「不知道这个 API」

法1: $forceUpdate

法2: $set

• 参考链接

3. Vue Scoped CSS 是做什么的，怎么实现的，如果让你自己实现有什么思路 ✅

4. v-model原理 ✅

5. Vue3相对于Vue2的优化 ❌ 「答的不全」

• 参考链接

Part Five：手写题

1. 反转Dom ❌ 不熟悉API（

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

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

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)
  }
}