Presencial | Registro de preguntas de entrevista de front-end en marzo y abril

个人情况：Graduado en 2021.6, esta entrevista es un reclutamiento social, ubicado en Beijing; la pila de tecnología es principalmente Vue, por lo que hay más preguntas sobre Vue, pero muy poco React;

Registre las preguntas de la entrevista que haya encontrado recientemente y clasifíquelas según el tipo de preguntas de la entrevista:

Relacionado con CSS:

La prioridad de varios selectores, vea el código para decir el resultado de estilo final
¿Cómo activar la aceleración de animación, cuál es el principio subyacente?

JS relacionado:

Se han pedido conceptos básicos como cadena prototipo, cadena alcance, cierre, izaje variable, etc.
esto apunta a, cadena de prototipo, macro tarea micro tarea, mire el código y diga salida, el código específico no se guarda :(
¿Por qué la longitud de la matriz puede cambiar arbitrariamente?
El atributo de nombre de la función, mire la salida del código, ¿se puede modificar manualmente el atributo de nombre?

function a(){} 
a.name // "a"
const a = function(){} 
a.name // ES5中为"", ES6 中为 "a" 
window.a = function(){}
a.name // ES5中为"a", ES6 中为 "" 
const a = function b(){} 
a.name // "b" 
window.a = function b(){} 
a.name // "b" 
// 修改
a.name = '1111' 
a.name // 不变，还是"b"
复制代码

Lo que sucedió en el proceso de nuevo, implemente un nuevo simple, preste atención al orden
ES6 habilita la optimización de recursión de cola de forma predeterminada.¿Cuál es el principio y por qué se puede optimizar?
Implementando const:defineProperty con ES5
Implementar una función de sondeo con efecto de estrangulamiento
Implemente una clase cuyas instancias se puedan encadenar y llamar, tiene un método de suspensión, que se puede llamar después de la suspensión por un período de tiempo

const boy = new PlayBoy('Tom') 
boy.sayHi().sleep(1000).play('王者').sleep(2000).play('跳一跳') 
// 输出 
// 大家好我是Tom 
// 1s 之后 
// 我在玩王者 
// 2s 之后 
// 我在玩跳一跳
复制代码

Cómo detectar errores asíncronos/en espera
Implementar Promise.all y Promise.race
Implemente una función que pueda ejecutar con éxito el siguiente middleware: función curring

/**
 * 实现一个组合compose的方法，使其可以正确调用每个中间件
 *
 * 规定中间件写法：
 * function(val, next) {
 *    // 前置操作
 *    next(val + 1); // 触发下一个中间件
 *    // 后续操作
 * }
 */
function compose(...middlewares) {

}

function add1(x, next) {
  console.log('add1 before');
  next(x + 1);
  console.log('add1 after');
}

function add2(x, next) {
  console.log('add2 before');
  next(x + 2);
  console.log('add2 after');
}

function output(x){
    console.log('output:', x)
}

const input = 0;
compose(add1, add2, (output) => {
  console.log('output:', output);
})(input);

/**
 * 输出:
 *
 * add1 before
 * add2 before
 * output: 3
 * add2 after
 * add1 after
 */
复制代码

Marco relacionado:

Los beneficios del DOM virtual: patrón de programación funcional, renderizado de múltiples lados
Mecanismo de complemento de Vue, ¿cuál es el principio subyacente?
La diferencia entre la implementación receptiva de Vue2 y Vue3, ¿por qué debería cambiarse?
Escriba un componente de cuadro de entrada de Vue, con función anti-vibración, y maneje la transferencia de parámetros de componente padre-hijo
Los elementos básicos de Vuex, la diferencia entre acciones y mutaciones, ¿las acciones modifican directamente el estado?
Ganchos y escenarios de uso de los protectores de enrutamiento del enrutador Vue
El uso y el principio de implementación subyacente de Vue nextTick
¿Cuáles son los puntos de optimización de Vue3?
Vue3 eliminó el modificador de eventos .native, ¿cómo escribimos eventos nativos?
Motivación del diseño e implementación subyacente de computado en Vue
Cómo se compilan las plantillas de Vue
El principio subyacente del enrutador Vue, la diferencia entre los diferentes modos, las razones y las soluciones para la página de actualización de enrutamiento de historial 404
Diseño de capa de modelo en proyecto Vue
Vuex 中的变量打包之后存在哪里？和全局作用域中的变量有什么区别
Vue 中 CSS scoped 的原理
Vue 中 keep-alive 的实现原理，内部使用的缓存算法是什么，缓存的是什么
$set 的使用场景

打包工具相关：

webpack tree shaking 原理
webpack babel 配置：语法层面的和 API 层面的
webpack loader 和 plugin 实现原理
webpack 生命周期，让你实现一系列的生命周期怎么实现
webpack 打包过程
webpack 有哪些可优化的地方（构建速度和包体积），具体怎么优化

网络相关：

经典面试题：输入 URL 之后发生了什么，HTML 文件中 CSS 文件和 JS 文件的加载顺序，会阻塞页面渲染吗
DNS 查询过程
websocket 的好处，怎么建立连接，心跳机制怎么做，错误怎么处理
webRTC 和 WebAssembly 了解吗
websocket 和轮询的区别
postMessage 使用场景
cookie 的有效时间设置为 0 会怎么样
PUT 方法的优点，什么时候用 PUT
HTTP2 的改进点
HTTP3 使用的传输层协议是什么，怎么保证可靠性
HTTPS 为什么安全

算法题：

二叉树层级遍历
给一个目标值，输出该目标值在二叉树中的路径
有效括号
合并两个有序列表/有序数组