240226Note：阿里-前端

1. 项目难点

Web移动端调取摄像头，录制内容实时渲染在界面上，可以拖拽和隐藏，

• 调取摄像头：video标签，js里用navigator.mediaDevices.getUserMedia({video: true})，video.srbObject = stream;
• 拖拽
  • 添加mousemove和mouseup事件，获取clientX、offsetLeft和clientY和offsetTop
  • 隐藏用display属性
• 自定义视频播放器事件，完成课前人脸识别打卡，课中暂停随堂检测，通过Websocket实时记录时长
  • 自定义视频播放器事件：包括paly,ended,pause
  • 通过Websocket实时记录时长，通过new 一个Websocket对象
• 自定义axios网络请求拦截，完成token注入和刷新，权限验证
  • 通过interceptors.request.use和interceptors.response.use

CSS

1. CSS 盒模型
2. 定位 Position
3. 水平/垂直居中

   1. 水平居中

      1. 行内元素水平居中（文本、内联元素等）

         1. text-align: center;

      2.  块级元素水平居中（有固定宽度）

         1. width: 300px; /* 设置容器宽度 / margin: 0 auto; / 将左右外边距设为 auto */

      3.  Flexbox 水平居中

         1. display: flex; justify-content: center;

   2. 垂直居中

      1.  单行文本垂直居中

         1. height: 100px; /* 设置容器高度 / line-height: 100px; / 与容器高度相同 */

      2. 多行文本垂直居中

         1. 可以使用 Flexbox 或者 CSS Grid 来实现垂直居中。
            1. display: flex; align-items: center;
            2. display: grid; place-items: center;

      3. 绝对定位垂直居中

4. 继承/非继承属性

继承属性

继承属性是指当一个元素没有指定某些属性值时，它会从父元素那里继承这些属性值。这意味着如果父元素设置了某个属性，子元素会继承该属性值，除非子元素显式地重写了这些属性。

常见的继承属性包括：

• font-family: 字体系列
• font-size: 字体大小
• font-weight: 字体粗细
• font-style: 字体样式
• color: 文本颜色
• line-height: 行高
• text-align: 文本水平对齐方式
• visibility: 元素可见性

非继承属性

非继承属性是指当一个元素没有指定某些属性值时，它不会从父元素那里继承这些属性值，而是采用浏览器或者用户代理的默认值。

常见的非继承属性包括：

• width: 元素宽度
• height: 元素高度
• margin: 外边距
• padding: 内边距
• border: 边框
• background: 背景
• position: 定位属性
• display: 显示方式
• float: 浮动
• clear: 清除浮动
• z-index: 层叠顺序

1. 选择器优先级
   1. !important
   2. 内联样式
   3. ID 选择器
   4. 类选择器、属性选择器、伪类
   5. 标签选择器
   6. 通用选择器、子选择器、相邻选择器
   7. 继承
      如果有多个规则应用于同一个元素，并且具有相同的优先级，则最后定义的样式将被应用，因为 CSS 遵循“后定义优先”的原则。

JS

1. 事件循环机制（扩展：JS 单线程）

事件循环的主要组成部分包括：

1. 执行栈（Call Stack）：

2. 消息队列（Message Queue）：

3. 事件循环（Event Loop）：

4. 微任务队列（Microtask Queue）：

5. 执行全局同步代码，将同步任务推入执行栈中执行。

6. 执行完同步任务后，检查微任务队列是否有任务，如果有则依次执行微任务队列中的任务。

7. 如果微任务队列为空，则从宏任务队列中取出一个任务，并将其对应的回调函数推入执行栈中执行。

8. 执行完当前宏任务后，重复步骤 2 和步骤 3。

微任务（Microtask）：

• 微任务是指那些需要在当前任务执行结束后立即执行的任务。
• 典型的微任务包括 Promise 的回调函数（then、catch、finally）、process.nextTick 等。
• 微任务通常用于执行一些需要尽快完成、对页面渲染影响较小的任务。
• 微任务队列的执行优先级高于宏任务队列。

宏任务（Macrotask）：

• 宏任务是指那些需要在当前任务执行结束后，在下一个事件循环周期执行的任务。
• 典型的宏任务包括 setTimeout、setInterval、setImmediate、I/O 操作等。
• 宏任务通常用于执行一些耗时较长、对页面渲染影响较大的任务。

在事件循环中，当一个宏任务执行结束后，会检查微任务队列是否有任务，如果有的话，会依次执行微任务队列中的所有任务，直到微任务队列为空。然后，再执行下一个宏任务。

JavaScript 是一门单线程语言，这意味着在同一时间内，只能执行一个任务，也就是说，代码的执行是按照顺序逐行进行的。这与一些其他编程语言不同，它们可能支持多线程并行执行。

在 JavaScript 中，单线程的主要线程被称为主线程（main thread）。所有的代码都是在这个主线程上执行的，包括事件处理、定时器、HTTP 请求等异步操作。这种单线程的执行模型在语言设计上简化了很多并发和同步的问题。

虽然 JavaScript 是单线程的，但通过使用异步编程，它可以处理大量并发的操作，而不会阻塞主线程。这是通过事件循环（event loop）机制实现的，它允许将异步任务放入队列，等到主线程空闲时再执行这些任务，而不是立即执行。这使得 JavaScript 能够更好地处理异步操作，如处理用户输入、网络请求等，而不会造成页面的冻结或卡顿。

5. 跨域（扩展：原理、JSONP 安全性）
   简单来说，如果两个资源的域名、协议、端口号中有任何一个不同，就认为它们之间存在跨域。
   解决办法：
6. JSONP
7. CORS
8. 代理服务器
9. iframe

Vue

1. Vue3 相比 Vue2 的升级（扩展：源码、架构）
   1. 重写虚拟DOM，性能提升
   2. CompositionAPI是一种基于函数的API，使得组件更加组织和复用
   3. 更好的typescript支持
2. Vue 的 key 的作用（扩展：Diff 源码、v-if 中使用）
   1. 提高渲染效率： 识别唯一性，避免不必要的组件销毁和重新创建
   2. 位置组件状态，确保组件的状态被保留
   3. 确保复用组件