Insertar descripción de la imagen aquí

Directorio de artículos

Introducción
CSS
javascript
Mecanografiado
VUE2
VUE3
Reaccionar
red
Navegador

Introducción

¡Preguntas de la entrevista inicial de lectura obligada para los Oro, Nueve y Plata Diez de 2023!
Ya está aquí la época dorada de Golden Nine y Silver Ten. Amigos que quieran cambiar de trabajo, vengan a comprobarlo.

CSS

1. Explique qué es el modelo de caja CSS y describa sus componentes.

Responder: El modelo de caja de CSS es un concepto utilizado para diseñar y posicionar elementos. Consta de área de contenido, relleno, bordes y márgenes, que a su vez envuelven el elemento.

2. Explique los selectores y sus prioridades en CSS.

Responder: Los selectores CSS se utilizan para seleccionar elementos HTML a los que se deben aplicar estilos. Las reglas de prioridad de los selectores son: estilo en línea > selector de ID > selector de clase, selector de atributos, selector de pseudoclase > selector de elementos > selector universal. Al mismo tiempo, usar! Importante puede aumentar la prioridad del estilo.

3. Explique cómo funcionan los flotadores en CSS y proporcione un ejemplo.

Responder: Float es un elemento utilizado en CSS para flotar hacia la izquierda o hacia la derecha de un elemento, sacándolo del flujo del documento y envolviéndolo alrededor de él. Por ejemplo:

.float-example {
    
    
  float: left;
  width: 200px;
  height: 200px;
}

4. Explicar el atributo de posición en CSS y sus diferentes valores.

Respuesta: El atributo de posición se utiliza para controlar cómo se posiciona un elemento. Los valores comunes son: estático (predeterminado, posicionado según el flujo de documentos), relativo (posicionamiento relativo), absoluto (posicionamiento absoluto), fijo (posicionamiento fijo) y adhesivo (posicionamiento fijo).

5. Explique cómo funciona el índice z en CSS.

Respuesta: El orden de apilamiento (índice z) se utiliza para controlar el orden de apilamiento de los elementos en la dirección vertical. Los elementos con valores de orden de apilamiento más altos aparecerán encima de los elementos con valores de orden de apilamiento más bajos. De forma predeterminada, el valor del orden de apilamiento es automático.

6. Explique la diferencia entre pseudoclases y pseudoelementos en CSS y dé un ejemplo.

Respuesta: Las pseudoclases se utilizan para agregar estados especiales a los selectores, como :hover, :active, etc. Los pseudoelementos se utilizan para agregar elementos especiales a los selectores, como ::before, ::after, etc. Por ejemplo:

/* 伪类示例 */
a:hover {
    
    
  color: red;
}

/* 伪元素示例 */
p::before {
    
    
  content: "前缀";
}

7. Explique los dos modos del modelo de caja en CSS: modo estándar y modo extraño.

Respuesta: El modo estándar es un modo que analiza y representa páginas según los estándares del W3C. El modo extraño es un modo compatible con versiones anteriores de navegadores para analizar y representar páginas. Puede especificar qué modo utilizar mediante la declaración <!DOCTYPE>.

8. Explique qué es BFC en CSS y cuál es su función.

Respuesta: BFC (contexto de formato a nivel de bloque) es un modo de representación en CSS que crea un entorno de representación independiente en el que los elementos se disponen y posicionan de acuerdo con ciertas reglas. Las funciones de BFC incluyen: limpiar flotadores, evitar márgenes superpuestos, etc.

9. Explique qué es el diseño de flexbox en CSS y cuáles son sus ventajas.

Responder: El diseño Flexbox es un módulo CSS para crear diseños flexibles y responsivos. Logra potentes capacidades de diseño mediante la combinación de contenedores flexibles y elementos flexibles. Sus ventajas incluyen facilidad de uso, gran adaptabilidad y control flexible de alineación y distribución.

10.Explique qué es la consulta de medios en CSS y cuál es su función.

Respuesta: Las consultas de medios son una técnica en CSS que se utiliza para aplicar diferentes estilos según las características y propiedades del dispositivo. A través de consultas de medios, el diseño y el estilo de la página se pueden optimizar según el tamaño de la pantalla, el tipo de dispositivo, la resolución y otras condiciones.

javascript

1. Explique los tipos de datos de JavaScript y dé ejemplos de cada tipo.

Respuesta: JavaScript tiene siete tipos de datos: cadena, número, booleano, objeto, matriz, nulo e indefinido. Por ejemplo:

let str = "Hello";
let num = 10;
let bool = true;
let obj = {
    
     name: "John" };
let arr = [1, 2, 3];
let n = null;
let undef;

2. Explique qué es el levantamiento de variables en JavaScript.

Responder: El levantamiento de variables significa que en JavaScript, las declaraciones de variables y funciones se elevan a la parte superior del alcance antes de que se ejecute el código. Esto significa que se pueden utilizar variables y funciones antes de declararlas. Por ejemplo:

console.log(x); // 输出 undefined
var x = 5;

3. Explique qué es el cierre (Closure) en JavaScript y dé ejemplos.

Respuesta: Un cierre es cuando una función puede acceder y manipular variables fuera de su alcance léxico. Para ello, crea una función interna dentro de una función y devuelve esa función interna. Por ejemplo:

function outer() {
    
    
  let x = 10;
  function inner() {
    
    
    console.log(x);
  }
  return inner;
}

let closure = outer();
closure(); // 输出 10

4. Explique la propagación de eventos (Event Bubbling) y la captura de eventos (Event Capturing) en JavaScript.

Respuesta: La propagación de eventos significa que el evento se activa paso a paso desde el elemento más específico al elemento principal hasta que se activa al elemento raíz. La captura de eventos significa que los eventos comienzan desde el elemento raíz y se activan paso a paso hasta los elementos más específicos. Puede utilizar el tercer parámetro del método addEventListener para controlar si se utiliza la difusión de eventos o la captura de eventos.

5. Explique qué es la herencia de prototipos en JavaScript.

Responder: La herencia prototípica es un mecanismo en JavaScript que implementa relaciones de herencia entre objetos. Cada objeto tiene un objeto prototipo, que contiene propiedades y métodos compartidos. Al acceder a una propiedad o método de un objeto, si el objeto en sí no tiene ninguna, se buscará a lo largo de la cadena del prototipo. La herencia prototípica se puede implementar utilizando el método Object.create() o configurando el atributo __proto__ del objeto.

6. Explique la programación asincrónica en JavaScript y proporcione un ejemplo de una operación asincrónica.

Respuesta: La programación asincrónica se refiere a un método de programación que no bloquea la ejecución posterior del código durante la ejecución del código. Las operaciones asincrónicas comunes incluyen solicitudes de red, temporizadores, etc. Por ejemplo:

console.log("开始");
setTimeout(function() {
    
    
  console.log("异步操作");
}, 1000);
console.log("结束");

7. Explique qué es el cierre (Closure) en JavaScript y dé ejemplos.

function outer() {
    
    
  let x = 10;
  function inner() {
    
    
    console.log(x);
  }
  return inner;
}

let closure = outer();
closure(); // 输出 10

8. Explique la función y los escenarios de uso de esta palabra clave en JavaScript.

Respuesta: La palabra clave this representa el objeto del contexto de ejecución actual en JavaScript. Su valor específico depende de cómo se llama la función. En el ámbito global, esto apunta al objeto global (objeto de ventana en el entorno del navegador). En una función, el objetivo de esto depende de cómo se llama la función. El valor de esto se puede especificar explícitamente mediante métodos como llamar, aplicar y vincular.

9. Explique qué es la delegación de eventos (Delegación de eventos) en JavaScript y proporcione un ejemplo del uso de la delegación de eventos.

Respuesta: La delegación de eventos se refiere a vincular controladores de eventos al elemento principal en lugar de hacerlo directamente a cada elemento secundario. Cuando se activa un evento, el evento se propagará al elemento principal y luego se ejecutará la lógica de procesamiento correspondiente juzgando el objetivo del evento. Esto reduce la cantidad de controladores de eventos y mejora el rendimiento. Por ejemplo:

<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<script>
document.getElementById("list").addEventListener("click", function(event) {
    
    
  if (event.target.tagName === "LI") {
    
    
    console.log(event.target.textContent);
  }
});
</script>

10. Explique la programación modular en JavaScript y proporcione un ejemplo del uso de módulos.

Respuesta: La programación modular se refiere a dividir el código en módulos independientes, cada módulo es responsable de una función específica y realiza las dependencias entre módulos mediante la importación y exportación. ES6 introduce una sintaxis modular y puede utilizar las palabras clave de importación y exportación para importar y exportar módulos. Por ejemplo:

// module.js
export function sayHello() {
    
    
  console.log("Hello!");
}

// main.js
import {
    
     sayHello } from "./module.js";
sayHello(); // 输出 "Hello!"

11. Explique la propagación y captura de eventos en JavaScript.

Respuesta: La propagación de eventos significa que cuando se activa un evento en el árbol DOM, se propagará hacia afuera desde el elemento más interno al elemento más externo. La captura de eventos significa que cuando se activa un evento en el árbol DOM, se propagará hacia adentro desde el elemento más externo al elemento más interno.

12. ¿Qué es la cadena prototipo? ¿Cómo utilizar la cadena de prototipos para implementar la herencia?

Respuesta: La cadena de prototipos es la conexión entre objetos en JavaScript. Cada objeto tiene una referencia a su prototipo. A través de la cadena de prototipos, un objeto puede heredar las propiedades y métodos de su objeto prototipo. La herencia se puede implementar utilizando una cadena de prototipos, apuntando el prototipo de un objeto a otro objeto, de modo que el objeto pueda acceder a las propiedades y métodos del otro objeto.

13. Explique Antirrebote y Aceleración en JavaScript.

Respuesta: La eliminación de rebotes y la limitación son técnicas que se utilizan para controlar la frecuencia con la que se ejecuta una función. Anti-vibración se refiere a ejecutar solo la última llamada a función activada dentro de un cierto período de tiempo. La limitación se refiere a la ejecución de llamadas a funciones a intervalos fijos dentro de un cierto período de tiempo.

14. ¿Qué es el bucle de eventos? Explique el mecanismo de bucle de eventos en JavaScript.

Responder: El bucle de eventos es el mecanismo en JavaScript para manejar operaciones asincrónicas. El bucle de eventos toma continuamente tareas de la cola de tareas y las ejecuta hasta que la cola de tareas está vacía. El bucle de eventos consta del hilo principal y la cola de tareas. El hilo principal es responsable de ejecutar tareas sincrónicas. Las tareas asincrónicas se colocarán en la cola de tareas y esperarán a que se ejecute el hilo principal cuando esté inactivo.

15. Explique la copia profunda y la copia superficial en JavaScript.

Respuesta: Copia profunda significa crear un nuevo objeto y copiar todas las propiedades del objeto original y las propiedades del objeto anidado en el nuevo objeto. Copia superficial significa crear un nuevo objeto y copiar las propiedades del objeto original al nuevo objeto, pero las referencias a los objetos anidados aún se comparten.

16. ¿Qué es la programación asincrónica? Enumere varias formas de manejar operaciones asincrónicas.

Respuesta: La programación asincrónica es una forma de programación que maneja operaciones que pueden consumir mucho tiempo sin bloquear el hilo principal. Los métodos comunes para manejar operaciones asincrónicas incluyen funciones de devolución de llamada, Promise, async/await y escucha de eventos.

17. Explique Hoisting (promoción variable) en JavaScript.

Respuesta: El levantamiento de variables significa que en JavaScript, las declaraciones de variables y funciones se elevarán a la parte superior del alcance actual. Esto significa que las variables y funciones se pueden usar antes de declararlas, pero su asignación o definición seguirá en la ubicación original.

18. ¿Qué es el curry? Por favor, dé un ejemplo de curry.

Responder: Currying es el proceso de convertir una función que acepta múltiples parámetros en una nueva función que acepta un parámetro y devuelve una nueva función. Ejemplo:

function add(a) {
    
    
  return function(b) {
    
    
    return a + b;
  }
}

var add5 = add(5);
console.log(add5(3)); // 输出：8

19. Explique el modo estricto en JavaScript.

Respuesta: El modo estricto es un modo de ejecución de JavaScript que proporciona una sintaxis y una verificación de errores más estrictas. En modo estricto, se deshabilitarán algunas sintaxis inseguras o obsoletas y se introducirán algunas características nuevas, como que las variables deben declararse antes de que puedan usarse, prohibir el uso de esto para apuntar a objetos globales, etc.

Mecanografiado

1. Explique la relación entre TypeScript y JavaScript.

Responder: TypeScript es un superconjunto de JavaScript que agrega escritura estática y algunas otras características. El código TypeScript se puede compilar en código JavaScript y, por lo tanto, se puede ejecutar en cualquier entorno que admita JavaScript.

2. ¿Qué son las anotaciones de tipo en TypeScript? ¿Cómo utilizar anotaciones tipográficas?

Respuesta: Las anotaciones de tipo se refieren a declarar explícitamente información de tipo en variables, parámetros de función, valores de retorno de funciones, etc. Las anotaciones de tipo se pueden agregar usando dos puntos (:) seguidos del tipo. Por ejemplo:

let num: number = 10;

function add(a: number, b: number): number {
    
    
  return a + b;
}

3. ¿Qué es una interfaz en TypeScript? ¿Cómo definir y utilizar interfaces?

Respuesta: Una interfaz es una sintaxis para definir la estructura y el tipo de objetos. Las interfaces se pueden definir utilizando la palabra clave interface. Por ejemplo:

interface Person {
    
    
  name: string;
  age: number;
}

function greet(person: Person) {
    
    
  console.log(`Hello, ${
      
      person.name}!`);
}

let john: Person = {
    
     name: "John", age: 25 };
greet(john); // 输出 "Hello, John!"

4. ¿Qué son las clases en TypeScript? ¿Cómo definir y utilizar clases?

Respuesta: Una clase es un modelo para crear objetos, contiene propiedades y métodos. Las clases se pueden definir usando la palabra clave class. Por ejemplo:

class Person {
    
    
  name: string;
  age: number;

  constructor(name: string, age: number) {
    
    
    this.name = name;
    this.age = age;
  }

  greet() {
    
    
    console.log(`Hello, ${
      
      this.name}!`);
  }
}

let john = new Person("John", 25);
john.greet(); // 输出 "Hello, John!"

5. ¿Qué son los genéricos en TypeScript? ¿Cómo utilizar genéricos?

Respuesta: Generics es una herramienta para crear código reutilizable que permite el uso de tipos de marcadores de posición al definir funciones, clases o interfaces. Los tipos genéricos se pueden especificar utilizando corchetes angulares (<>). Por ejemplo:

function identity<T>(value: T): T {
    
    
  return value;
}

let result = identity<string>("Hello");
console.log(result); // 输出 "Hello"

6. ¿Qué son las enumeraciones en TypeScript? ¿Cómo definir y utilizar enumeraciones?

Responder: La enumeración es una sintaxis para definir una colección de constantes con nombre. Las enumeraciones se pueden definir utilizando la palabra clave enum. Por ejemplo:

enum Color {
    
    
  Red,
  Green,
  Blue,
}

let color: Color = Color.Green;
console.log(color); // 输出 1

7. ¿Qué son los módulos en TypeScript? ¿Cómo exportar e importar módulos?

Responder: Un módulo es una unidad utilizada para organizar y encapsular código. Puede utilizar la palabra clave export para exportar variables, funciones, clases, etc. en el módulo para que otros módulos puedan utilizarla. Puede utilizar la palabra clave import para importar exportaciones de otros módulos. Por ejemplo:

// module.ts
export function greet(name: string) {
    
    
  console.log(`Hello, ${
      
      name}!`);
}

// main.ts
import {
    
     greet } from "./module";
greet("John"); // 输出 "Hello, John!"

8. ¿Qué es la inferencia de tipos en TypeScript? ¿Cómo utilizar la inferencia de tipos?

Respuesta: La inferencia de tipos significa que TypeScript infiere automáticamente el tipo de variables según el contexto sin agregar explícitamente anotaciones de tipo. Por ejemplo:

let num = 10; // 推断为 number 类型
let str = "Hello"; // 推断为 string 类型

9. ¿Qué son los espacios de nombres en TypeScript? ¿Cómo definir y utilizar espacios de nombres?

Respuesta: El espacio de nombres es un mecanismo para organizar y encapsular código, lo que evita conflictos de nombres globales. Los espacios de nombres se pueden definir utilizando la palabra clave namespace. Por ejemplo:

namespace MyNamespace {
    
    
  export function greet(name: string) {
    
    
    console.log(`Hello, ${
      
      name}!`);
  }
}

MyNamespace.greet("John"); // 输出 "Hello, John!"

10. ¿Qué son los alias de tipos en TypeScript? ¿Cómo definir y utilizar alias de tipo?

Respuesta: Un alias de tipo consiste en darle un alias a un tipo para que se pueda hacer referencia a él más fácilmente en el código. Los alias de tipo se pueden definir utilizando la palabra clave tipo. Por ejemplo:

type Point = {
    
     x: number; y: number };

function printPoint(point: Point) {
    
    
  console.log(`(${
      
      point.x}, ${
      
      point.y})`);
}

let p: Point = {
    
     x: 1, y: 2 };
printPoint(p); // 输出 "(1, 2)"

VUE2

1. ¿Qué es Vue.js? ¿Cuáles son sus características?

Respuesta: Vue.js es un marco de JavaScript para crear interfaces de usuario. Tiene las siguientes características:

Enlace de datos responsivo: al utilizar la sintaxis de enlace de datos de Vue, se puede lograr la actualización automática de los datos.
Desarrollo de componentes: Vue permite dividir la página en componentes independientes, mejorando la mantenibilidad y reutilización del código.
DOM virtual: Vue utiliza un DOM virtual para rastrear los cambios en la página y actualizar el DOM real de manera eficiente.
Sistema de comando: Vue proporciona una gran cantidad de comandos integrados para manejar operaciones DOM comunes y control lógico.
Ecosistema: Vue tiene un ecosistema enorme, que incluye complementos, herramientas y bibliotecas de terceros, para satisfacer diversas necesidades de desarrollo.

2. ¿Cómo se implementa el enlace de datos bidireccional en Vue?

Respuesta: El enlace de datos bidireccional en Vue se implementa mediante la directiva v-model. v-model puede crear un enlace de datos bidireccional en elementos de formulario (como,,). Cuando la entrada del usuario cambia el valor del elemento del formulario, el modelo de datos se actualizará automáticamente; por el contrario, cuando el valor del modelo de datos cambia, el elemento del formulario también se actualizará automáticamente.

3. ¿Cuáles son los ganchos del ciclo de vida en Vue? ¿Cuál es el orden en que se ejecutan?

Respuesta: Los enlaces del ciclo de vida en Vue incluyen beforeCreate, creado, antes de Montar, montado, antes de Actualizar, actualizado, antes de Destroy y destruido. Su orden de ejecución es el siguiente:

beforeCreate
creado
beforeMount
montado
beforeUpdate
actualizado
beforeDestroy
destruido

4. ¿Cuál es la diferencia entre propiedades calculadas y oyentes en Vue?

Respuesta: Una propiedad calculada es una propiedad basada en dependencias que calcula dinámicamente un valor en función de los datos de los que depende. Las propiedades calculadas tienen un mecanismo de almacenamiento en caché y se recalculan sólo cuando cambian los datos dependientes. Los oyentes se utilizan para monitorear cambios en los datos y realizar las operaciones correspondientes. Cuando los datos cambian, el oyente ejecutará inmediatamente la función de devolución de llamada especificada.

5. ¿Cuáles son las formas de comunicación de componentes en Vue?

Respuesta: Los métodos de comunicación de componentes en Vue incluyen:

Comunicación del componente padre-hijo: pasa datos al componente hijo a través de accesorios, y el componente hijo envía mensajes al componente padre a través de eventos.
Comunicación entre los componentes hijo y padre: el componente hijo desencadena eventos a través de $emit, y el componente padre escucha los eventos y responde.
Comunicación de componentes hermanos: pasar datos a través de un componente principal compartido o comunicarse a través de un bus de eventos.
Comunicación de componentes entre niveles: proporcione datos en los componentes ancestros mediante proporcionar e inyectar, y luego utilizarlos en los componentes descendientes.

6. ¿Cómo se implementa el enrutamiento en Vue?

Respuesta: El enrutamiento en Vue se implementa a través de Vue Router. Vue Router es el administrador de enrutamiento proporcionado oficialmente por Vue.js, que permite a los desarrolladores implementar aplicaciones de página única (SPA) en aplicaciones Vue. Vue Router asocia rutas URL con componentes mediante la configuración de relaciones de mapeo de rutas y proporciona funciones de navegación para que los usuarios puedan cambiar de vista sin actualizar la página.

7. ¿Cuáles son las instrucciones en Vue? Dé ejemplos para ilustrar su uso.

Respuesta: Las instrucciones comúnmente utilizadas en Vue incluyen:

v-if: renderiza elementos condicionalmente según el valor de una expresión.
v-for: Representación en bucle basada en los datos de una matriz u objeto.
v-bind: se utiliza para vincular propiedades dinámicamente o actualizar propiedades de manera responsiva.
v-on: se utiliza para escuchar eventos DOM y ejecutar los métodos correspondientes.
v-model: se utiliza para implementar el enlace de datos bidireccional en elementos de formulario.
Por ejemplo:

<div v-if="show">显示内容</div>

<ul>
  <li v-for="item in items" :key="item.id">{
    
    {
    
     item.name }}</li>
</ul>

<img v-bind:src="imageUrl">

<button v-on:click="handleClick">点击按钮</button>

<input v-model="message">

8. ¿Cuál es la diferencia entre observar y calcular en Vue?

Respuesta: Tanto el reloj como el computado se pueden usar para monitorear cambios en los datos, pero su uso e implementación son ligeramente diferentes. Watch se utiliza para monitorear cambios de datos específicos y realizar las operaciones correspondientes cuando los datos cambian. calculado se utiliza para calcular dinámicamente un nuevo valor basado en datos dependientes, almacenar en caché el valor y recalcularlo solo cuando los datos dependientes cambian.

9. ¿Qué son los mixins en Vue? ¿Qué hace?

Responder: Los mixins son una forma de compartir código entre múltiples componentes. Los mixins pueden contener opciones de componentes (como datos, métodos, enlaces de ciclo de vida, etc.) y fusionarlos en el componente mediante el mixin. Esto puede lograr la reutilización del código y la expansión de los componentes, y reducir el trabajo de escribir códigos similares repetidamente.

10. ¿Qué es mantener vivo en Vue? ¿Qué hace?

Respuesta: Es un componente integrado en Vue, que se utiliza para almacenar en caché componentes dinámicos. Cuando un componente está envuelto en un , se conserva el estado del componente, incluida su instancia, estado y estructura DOM. Esto evita la creación y destrucción repetida de componentes al cambiar de componente, mejorando el rendimiento y la experiencia del usuario.

11. Explique qué es la inyección de dependencia en Vue.js. ¿Cuáles son sus escenarios de aplicación en Vue?

Responder: La inyección de dependencia es un patrón de diseño que se utiliza para pasar dependencias de un componente a otro. En Vue, la inyección de dependencia se implementa mediante las opciones de proporcionar e inyectar. El componente principal proporciona datos mediante proporcionar y luego el componente secundario inyecta estos datos mediante inyección. Es muy útil en la comunicación de componentes en múltiples niveles.

12. ¿Qué es la función de renderizado en Vue.js? ¿Cuál es la diferencia entre este y una plantilla?

Respuesta: Las funciones de renderizado son una forma de escribir componentes en código JavaScript que generan dinámicamente un DOM virtual. En comparación con las plantillas, las funciones de renderizado brindan mayor flexibilidad y control y pueden manejar necesidades de renderizado dinámico y de lógica más compleja.

13. ¿Qué es una ranura en Vue.js? Proporcione un ejemplo con espacios con nombre y espacios con alcance.

Respuesta: Las ranuras son un mecanismo para ampliar el contenido de un componente. Las ranuras con nombre permiten que un componente principal inserte contenido con un nombre específico en un componente secundario, mientras que las ranuras con alcance permiten que un componente secundario pase datos al componente principal. Ejemplo:

<!-- 父组件 -->
<template>
  <div>
    <slot name="header"></slot>
    <slot :data="data"></slot>
  </div>
</template>

<!-- 子组件 -->
<template>
  <div>
    <slot name="header">默认标题</slot>
    <slot :data="computedData">{
    
    {
    
     computedData }}</slot>
  </div>
</template>

14. ¿Cómo funciona el sistema de animación en Vue.js? Proporcione un ejemplo de animación simple.

Respuesta: El sistema de animación de Vue.js se implementa mediante clases de animación y transición CSS. Al agregar una clase de transición o una clase de animación a un elemento, puede activar el efecto de transición o el efecto de animación correspondiente. Ejemplo:

<transition name="fade">
  <div v-if="show">显示内容</div>
</transition>

<!-- CSS样式 -->
<style>
.fade-enter-active, .fade-leave-active {
    
    
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
    
    
  opacity: 0;
}
</style>

15. ¿Cuál es el mecanismo de manejo de errores en Vue.js? ¿Cómo detectar y manejar errores en los componentes de Vue?

Respuesta: Vue.js proporciona un mecanismo de manejo de errores global y un mecanismo de manejo de errores a nivel de componente. El manejo de errores globales puede capturar y manejar errores a través de la función de enlace errorCaptured. El manejo de errores a nivel de componente puede capturar y manejar errores a través de la función de enlace errorCaptured o la opción errorHandler.

16. ¿Qué es la representación del lado del servidor (SSR) en Vue.js? ¿Cuáles son sus ventajas y limitaciones?

Respuesta: La renderización del lado del servidor se refiere al proceso de generar contenido HTML en el servidor y enviarlo al navegador para su renderización. Vue.js puede realizar renderizado del lado del servidor, proporcionando un mejor rendimiento de carga a la primera y optimización SEO. Sin embargo, la renderización del lado del servidor también trae algunas limitaciones, como una mayor carga del servidor y complejidad del desarrollo.

17. ¿Cuáles son las limitaciones de las matrices reactivas en Vue.js? ¿Cómo solucionar estas limitaciones?

Respuesta: El sistema responsivo de Vue.js no puede rastrear los métodos de mutación de matrices (como push, pop, splice, etc.). Para resolver esta limitación, Vue proporciona algunos métodos especiales, como Vue.set, vm.$set y Array.prototype.splice. Estos métodos se pueden utilizar para actualizar matrices y seguir respondiendo.

18. ¿Cuáles son las técnicas comunes para la optimización del rendimiento en Vue.js?

Respuesta: Los consejos comunes para optimizar el rendimiento de Vue.js incluyen:

Tenga cuidado de evitar renderizaciones innecesarias cuando utilice v-if y v-for.
Utilice atributos calculados y observe a los oyentes de forma adecuada.
Utilice componentes Keep-Alive para almacenar en caché el estado de los componentes.
Utilice componentes asincrónicos para la carga bajo demanda.
Evite el uso de expresiones complejas en las plantillas.
Utilice el atributo clave para gestionar la reutilización de componentes y elementos.
Utilice la carga diferida y la división de código de forma inteligente.

19. ¿Cuáles son los guardias de navegación de ruta en Vue.js? ¿Cuál es el orden en que se ejecutan?

Respuesta: Los guardias de navegación de ruta en Vue.js incluyen guardias frontales globales, guardias de análisis global, guardias de puesto globales, guardias exclusivas de ruta y guardias en componentes. Su orden de ejecución es el siguiente:

Guardia frontal global (beforeEach)
Guardia exclusiva de ruta (beforeEnter)
Guardia de resolución (beforeResolve)
Guardia en componente (beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave)
Guardia de puesto global (afterEach)

20. ¿Cómo se realizan las pruebas unitarias en Vue.js? Proporcione un ejemplo de prueba unitaria simple.

Respuesta: Las pruebas unitarias de Vue.js se pueden realizar utilizando herramientas como Jest o Mocha. Ejemplo:

// 组件代码
// MyComponent.vue
<template>
  <div class="my-component">
    <span>{
    
    {
    
     message }}</span>
    <button @click="increment">增加</button>
  </div>
</template>

<script>
export default {
    
    
  data() {
    
    
    return {
    
    
      message: 'Hello',
      count: 0
    }
  },
  methods: {
    
    
    increment() {
    
    
      this.count++
    }
  }
}
</script>

// 单元测试代码
// MyComponent.spec.js
import {
    
     shallowMount } from '@vue/test-utils'
import MyComponent from './MyComponent.vue'

describe('MyComponent', () => {
    
    
  it('renders message correctly', () => {
    
    
    const wrapper = shallowMount(MyComponent)
    expect(wrapper.find('span').text()).toBe('Hello')
  })

  it('increments count when button is clicked', () => {
    
    
    const wrapper = shallowMount(MyComponent)
    wrapper.find('button').trigger('click')
    expect(wrapper.vm.count).toBe(1)
  })
})

VUE3

1. ¿Qué es la API de composición en Vue.js 3? ¿En qué se diferencia de la API de opciones?

Respuesta: La API de composición es una nueva forma de organizar la lógica de los componentes introducida en Vue.js 3. Permite a los desarrolladores organizar y reutilizar la lógica a través de funciones en lugar de objetos de opción. Por el contrario, la API de opciones es una forma comúnmente utilizada de organizar la lógica de los componentes en Vue.js 2. Los datos, métodos, etc. del componente se definen a través de las propiedades en el objeto de opciones.

2. ¿Qué es Teleport en Vue.js 3? Por favor dé un ejemplo de teletransporte.

Respuesta: Teleport es un mecanismo introducido en Vue.js 3 para representar el contenido de un componente en cualquier ubicación del árbol DOM. Ejemplo:

<template>
  <div>
    <button @click="showModal = true">打开模态框</button>
    <teleport to="body">
      <modal v-if="showModal" @close="showModal = false">模态框内容</modal>
    </teleport>
  </div>
</template>

3. ¿Cómo funciona el sistema reactivo en Vue.js 3? ¿En qué se diferencia del sistema reactivo en Vue.js 2?

Respuesta: El sistema reactivo en Vue.js 3 se implementa utilizando objetos Proxy. En comparación con el sistema reactivo en Vue.js 2, el sistema reactivo en Vue.js 3 tiene un mejor rendimiento y un seguimiento más detallado, puede detectar cambios de datos con mayor precisión y admite datos reactivos anidados.

4. ¿Qué es el suspenso en Vue.js 3? ¿Qué hace?

Responder: El suspenso es un mecanismo introducido en Vue.js 3 para manejar el estado de carga de componentes asincrónicos. Puede mostrar un marcador de posición antes de cargar el componente asíncrono y representar el contenido del componente asíncrono después de cargarlo. Esto puede manejar mejor el proceso de carga de componentes asincrónicos y proporcionar una mejor experiencia de usuario.

5. ¿Cuáles son las funciones de proporcionar e inyectar en Vue.js 3? Por favor dé un ejemplo de proporcionar e inyectar.

Respuesta: proporcionar e inyectar se utilizan para implementar la inyección de dependencia entre componentes. Proporcione datos utilizando provide en el componente principal y luego inyecte estos datos en el componente secundario utilizando inject. Ejemplo:

// 父组件
const Parent = {
    
    
  provide: {
    
    
    message: 'Hello'
  },
  // ...
}

// 子组件
const Child = {
    
    
  inject: ['message'],
  created() {
    
    
    console.log(this.message); // 输出：Hello
  },
  // ...
}

6. ¿Qué mejoras se han realizado en el sistema de animación en Vue.js 3? Enumere algunas mejoras.

Respuesta: El sistema de animación en Vue.js 3 tiene las siguientes mejoras en comparación con Vue.js 2:

Mejor rendimiento: el sistema de animación de Vue.js 3 utiliza un motor de animación más eficiente, lo que proporciona un mejor rendimiento.
Sintaxis más concisa: el sistema de animación de Vue.js 3 utiliza una sintaxis más concisa, lo que hace que la definición y el uso de la animación sean más intuitivos y convenientes.
Admite más funciones de animación: el sistema de animación de Vue.js 3 admite más funciones de animación, como animaciones interactivas y efectos de animación más complejos.
¿Qué es el levantamiento estático de árboles en Vue.js 3? ¿Cuáles son sus ventajas?
Respuesta: El levantamiento estático es una técnica de optimización en Vue.js 3 que reduce la sobrecarga del tiempo de ejecución al convertir nodos estáticos en constantes durante la fase de compilación. Esta tecnología de optimización puede mejorar el rendimiento de renderizado de los componentes y reducir el tamaño del código generado.

7. ¿Qué es Fragmento en Vue.js 3? ¿Qué hace?

Responder: Fragment es un mecanismo introducido en Vue.js 3 para devolver múltiples nodos raíz en un componente. En Vue.js 2, la plantilla de un componente solo puede tener una ¿
Cuál es la diferencia entre ref y reactivo en la API de composición en Vue.js 3? ¿Cuándo usar cuál?
Respuesta: ref se usa para crear un tipo de datos básico responsivo, mientras que reactivo se usa para crear un objeto responsivo. Cuando necesite crear datos reactivos simples, puede usar ref. Cuando necesite crear un objeto reactivo que contenga múltiples propiedades, puede usar reactivo.

8. ¿Cuál es la diferencia entre watchEffect y watch en Vue.js 3? ¿Cuándo usar cuál?

Respuesta: watchEffect se utiliza para monitorear cambios en los datos de respuesta y realizar las operaciones correspondientes en la función de devolución de llamada. Realiza un seguimiento automático de las dependencias y vuelve a ejecutar funciones de devolución de llamada cuando cambian las dependencias. Watch se utiliza para monitorear datos de respuesta específicos y realizar las operaciones correspondientes cuando cambian. Le permite especificar exactamente qué datos escuchar y proporciona más opciones de configuración. En términos generales, si solo necesita monitorear los cambios en los datos receptivos y realizar las operaciones correspondientes, puede usar watchEffect; si necesita un control más detallado, puede usar watch.

9. ¿Cuáles son las precauciones al utilizar la directiva v-model en Vue.js 3?

Respuesta: Al utilizar la directiva v-model, existen las siguientes consideraciones:

La directiva v-model debe usarse con un elemento de formulario, como,,, etc.
Cuando se utiliza un componente personalizado, el atributo modelValue y el evento update:modelValue deben implementarse dentro del componente para admitir el enlace bidireccional de v-model.
Puede utilizar el modificador .lazy para actualizar los datos cuando el cuadro de entrada pierde el foco.
Puede utilizar el modificador .trim para eliminar automáticamente los espacios iniciales y finales del contenido del cuadro de entrada.
Puede utilizar el modificador .number para convertir el valor del cuadro de entrada a un tipo numérico.

10. ¿Proporcionar e inyectar en Vue.js 3 admite datos reactivos?

Respuesta: De forma predeterminada, proporcionar e inyectar no admiten datos reactivos. Si necesita proporcionar datos receptivos en el proveedor, puede usar ref o reactivo para empaquetar los datos. Luego use toRefs o toRef en inyectar para deconstruir los datos y obtener referencias receptivas.

11. ¿Qué hace el método nextTick en Vue.js 3? ¿En qué situaciones se utiliza?

Respuesta: El método nextTick se utiliza para ejecutar la función de devolución de llamada después de que finaliza el siguiente ciclo de actualización de DOM. Se puede utilizar para garantizar que se realicen determinadas operaciones después de actualizar el DOM, como manipular el elemento DOM actualizado u obtener el valor de la propiedad calculada actualizada. NextTick generalmente se usa en situaciones en las que es necesario esperar a que se complete la actualización del DOM antes de continuar.

12. ¿Cuál es la diferencia entre los componentes y en Vue.js 3?

Responder: El componente se usa para representar el contenido del componente en cualquier ubicación del árbol DOM, mientras que el componente se usa para aplicar efectos de transición cuando el componente entra o sale del árbol DOM. Se utiliza principalmente para mover la posición de los componentes y para mostrar y ocultar transiciones de componentes.

13. ¿Cuál es la función del atributo clave en la directiva v-for en Vue.js 3? ¿Por qué usarlo?

Respuesta: El atributo clave de la directiva v-for se utiliza para establecer un identificador único para cada elemento de iteración. Su función es ayudar a Vue.js a realizar un seguimiento de la identidad de cada nodo para actualizar eficientemente el DOM cuando cambian los datos. El uso del atributo clave puede evitar problemas con actualizaciones incorrectas de nodos o reordenamiento.

Reaccionar

1. ¿Qué es reaccionar? ¿Cuál es su concepto central?

Respuesta: React es una biblioteca de JavaScript para crear interfaces de usuario. Sus conceptos centrales son la componenteización y la programación declarativa. React divide la interfaz de usuario en componentes reutilizables independientes y utiliza sintaxis declarativa para describir el estado de los componentes y la relación entre la UI, lo que facilita y mantiene la creación de UI complejas.

2. ¿Qué es JSX? ¿En qué se diferencia de HTML?

Responder: JSX es una extensión de sintaxis de JavaScript que se utiliza para describir la estructura de la interfaz de usuario en React. Es similar a HTML, pero tiene algunas diferencias:

3. ¿Qué son los componentes de React? ¿Cuáles son los dos tipos de ellos?

Respuesta: Los componentes de React son unidades independientes para crear interfaces de usuario. Hay dos tipos de componentes de React:

Componentes de funciones: utilice funciones para definir componentes, recibir accesorios como parámetros y devolver un elemento de React.
Componente de clase: utilice clases de ES6 para definir componentes, heredar de la clase React.Component y devolver un elemento de React a través del método de renderizado.

4. ¿Qué son el estado y los accesorios? ¿Cual es la diferencia entre ellos?

Respuesta: El estado son los datos administrados por el propio componente y se pueden actualizar mediante el método setState. Las propiedades (props) son datos que se pasan de los componentes principales a los componentes secundarios. Los componentes secundarios no pueden modificar los accesorios directamente. Los accesorios solo se pueden cambiar actualizando el componente principal.

la diferencia:

El estado son los datos dentro del componente y se pueden modificar y administrar libremente en el componente.
Las propiedades (props) son datos que se pasan de los componentes principales a los componentes secundarios. Los componentes secundarios no se pueden modificar directamente, solo pueden recibirlos y usarlos.

5. ¿Cuáles son los métodos del ciclo de vida de React? Enumere algunos métodos de ciclo de vida comúnmente utilizados.

Responder: Los métodos del ciclo de vida de React son métodos específicos que se ejecutan en diferentes etapas de un componente. A continuación se muestran algunos métodos de ciclo de vida de React comúnmente utilizados:

componenteDidMount: se llama inmediatamente después de montar el componente.
componenteDidUpdate: se llama después de actualizar el componente.
componenteWillUnmount: se llama antes de desmontar el componente.
deberíaComponentUpdate: determina si es necesario volver a renderizar el componente.
getDerivedStateFromProps: actualiza el estado según los cambios en los accesorios.

6. ¿Qué son los ganchos de reacción? ¿Cuál es su función?

Responder: React Hooks es una característica introducida en React versión 16.8 para usar el estado y otras características de React en componentes funcionales. Los ganchos proporcionan una manera de administrar el estado y manejar los efectos secundarios sin escribir componentes de clase, lo que hace que los componentes de funciones tengan las capacidades de los componentes de clase.

7. ¿Qué es el enrutador React? ¿Qué hace?

Responder: React Router es una biblioteca en React para manejar el enrutamiento. Proporciona una forma de implementar la funcionalidad de navegación y enrutamiento en una aplicación de una sola página. React Router puede ayudar a los desarrolladores a implementar funciones como cambiar entre páginas, pasar parámetros de URL y enrutamiento anidado.

8. ¿Qué es el contexto de React? ¿Qué hace?

Responder: React Context es un mecanismo para compartir datos en todo el árbol de componentes. Puede evitar pasar datos capa por capa a través de accesorios, lo que hace que el intercambio de datos entre componentes sea más simple y eficiente. React Context proporciona componentes de proveedor y consumidor para proporcionar y consumir datos compartidos.

9. ¿Qué es el proceso de Reconciliación de React? ¿Como funciona?

Respuesta: El proceso de coordinación de React significa que cuando React actualiza componentes, solo realiza operaciones DOM reales en las partes que necesitan actualizarse comparando las diferencias entre los árboles DOM virtuales antiguos y nuevos. El proceso de coordinación funciona de la siguiente manera:

React comparará los nodos de los árboles DOM virtuales antiguos y nuevos capa por capa y encontrará las diferencias.
Para cada diferencia, React genera las correspondientes instrucciones de manipulación DOM, como insertar, actualizar o eliminar nodos.
React ejecutará todas las instrucciones de operación DOM en lotes para reducir la cantidad de operaciones en el DOM real.

10. ¿Qué es la síntesis de eventos de React (SyntheticEvent)? ¿Qué hace?

Respuesta: La composición de eventos de React es un mecanismo para manejar eventos en React. Es un sistema de eventos implementado por React para mejorar el rendimiento y la compatibilidad entre navegadores. Las funciones de la síntesis de eventos incluyen:

Proporciona una forma unificada de manejar eventos sin considerar la compatibilidad del navegador.
Los controladores de eventos se pueden vincular a los componentes principales mediante la delegación de eventos para mejorar el rendimiento.
Puede acceder a las propiedades y métodos del objeto de evento nativo.

11. ¿Qué es la arquitectura Fiber de React? ¿Qué problema soluciona?

Respuesta: La arquitectura Fiber de React es un nuevo algoritmo y arquitectura de coordinación introducidos en la versión React 16. Está diseñado para resolver el problema del procesamiento a largo plazo que bloquea el hilo principal y mejorar el rendimiento de la aplicación y la experiencia del usuario. La arquitectura Fiber descompone el proceso de renderizado en múltiples tareas pequeñas y utiliza un algoritmo de programación de prioridades para asignar dinámicamente intervalos de tiempo, lo que permite a React realizar una parte de las tareas en cada cuadro, logrando así una interfaz de usuario fluida y un mejor rendimiento de respuesta.

12. ¿Cuál es el límite de error de React? ¿Qué hace?

Respuesta: Los límites de error de React son un mecanismo para manejar los errores de los componentes. Permite que los componentes detecten y manejen errores de JavaScript que ocurren en sus componentes secundarios para evitar que toda la aplicación falle. Las funciones de los límites de error incluyen:

Detecte y maneje errores en el árbol de componentes para evitar que los errores bloqueen toda la aplicación.
Proporciona una forma elegante de mostrar mensajes de error o una interfaz de usuario alternativa.
Se puede utilizar para registrar errores y enviar informes de errores.

red

1. ¿Qué es HTTP? ¿Como funciona?

Respuesta: HTTP (Protocolo de transferencia de hipertexto) es un protocolo utilizado para transferir datos en la Web. Utiliza un modelo cliente-servidor, donde el cliente envía una solicitud HTTP al servidor y el servidor devuelve una respuesta HTTP. El flujo de trabajo de HTTP es el siguiente:

El cliente envía una solicitud HTTP a la URL especificada.
El servidor recibe la solicitud, la procesa y devuelve una respuesta HTTP.
El cliente recibe la respuesta y la analiza para obtener los datos necesarios.

2. ¿Qué es HTTPS? ¿En qué se diferencia de HTTP?

Respuesta: HTTPS (Protocolo seguro de transferencia de hipertexto) es una versión segura de HTTP que cifra y autentica las comunicaciones mediante los protocolos SSL (Capa de sockets seguros) o TLS (Seguridad de la capa de transporte). En comparación con HTTP, HTTPS tiene las siguientes diferencias:

Los datos se protegen mediante cifrado durante la transmisión, proporcionando mayor seguridad.
Utilice certificados digitales para autenticar servidores y evitar ataques de intermediarios.
Utilice el puerto predeterminado 443.

3. ¿Qué es una solicitud entre dominios? ¿Cómo se soluciona?

Respuesta: Las solicitudes de origen cruzado son solicitudes enviadas a diferentes nombres de dominio, puertos o protocolos en el navegador. Debido a las restricciones de la Política del mismo origen del navegador, se restringirán las solicitudes entre dominios. Para resolver problemas entre dominios, puede utilizar los siguientes métodos:

JSONP (JSON con relleno): creado dinámicamente

4. ¿Qué es el caché? ¿Cómo utilizar el almacenamiento en caché en el front-end para mejorar el rendimiento?

Respuesta: El almacenamiento en caché es el almacenamiento de datos o recursos en un almacenamiento temporal para que puedan reutilizarse en solicitudes posteriores, mejorando así el rendimiento y reduciendo el tráfico de la red. En el front-end, el almacenamiento en caché se puede aprovechar usando:

Almacenamiento en caché HTTP: indique al navegador que almacene en caché las respuestas configurando encabezados de almacenamiento en caché apropiados, como Cache-Control y Expires.
Almacenamiento en caché de recursos: utilice huellas digitales de archivos o números de versión para cambiar el nombre de los archivos de recursos estáticos para que el navegador pueda volver a descargarlos cuando cambie el contenido del archivo.
Almacenamiento en caché de datos: utilice memoria caché, almacenamiento local del navegador (como localStorage) o caché del lado del servidor (como Redis) para almacenar datos y evitar solicitudes repetidas.

5. ¿Qué es una CDN? ¿Qué hace?

Respuesta: CDN (Content Delivery Network) es una arquitectura de red distribuida que se utiliza para proporcionar servicios de entrega de contenido de alto rendimiento y baja latencia en todo el mundo. Las funciones de CDN incluyen:

Almacene en caché los recursos estáticos (como imágenes, hojas de estilo, scripts, etc.) en servidores más cercanos a los usuarios para proporcionar velocidades de carga más rápidas.
Distribuya el tráfico de la red y reduzca la presión de carga en el servidor de origen.
Proporcionar tecnologías de optimización como compresión de contenido, compresión de datos y almacenamiento en caché para mejorar la experiencia del usuario.

6. ¿Qué es la optimización del rendimiento de carga de una página web? ¿Qué medidas se pueden tomar para mejorar el rendimiento de carga de la página?

Respuesta: La optimización del rendimiento de carga de la página web se refiere al uso de diversos medios técnicos para reducir el tiempo de carga de la página web y mejorar la experiencia del usuario. Aquí hay algunas cosas que puede hacer para mejorar el rendimiento de carga de la página:

Comprima y combine archivos de recursos (como CSS y JavaScript) para reducir el tamaño del archivo y la cantidad de solicitudes.
Utilice la compresión de imágenes y la selección de formato adecuada para reducir el tamaño del archivo de imagen.
Utilice la caché del navegador y los encabezados de la caché HTTP para almacenar en caché los recursos estáticos.
Utilice la carga diferida para retrasar la carga de recursos no críticos y mejorar la velocidad de carga inicial.
Utilice CDN (Content Delivery Network) para distribuir recursos estáticos y reducir la latencia de la red.
Optimice la ruta de renderizado crítica para renderizar el contenido de la página lo antes posible.

7. ¿Qué es el seguimiento y análisis del rendimiento web? ¿Qué herramientas se pueden utilizar para monitorear y analizar el rendimiento de la página web?

Respuesta: El seguimiento y análisis del rendimiento de la página web se refiere a medir y recopilar datos sobre la carga de la página web y el rendimiento de la interacción para identificar cuellos de botella en el rendimiento y optimizarlos. Puede utilizar las siguientes herramientas para monitorear y analizar el rendimiento de la página web:

API de rendimiento web: la API de JavaScript proporcionada por el navegador puede recopilar datos de rendimiento a través del objeto de rendimiento.
Lighthouse: una herramienta de código abierto que proporciona informes completos sobre el rendimiento, la accesibilidad y las mejores prácticas web.
WebPagetest: herramienta online que mide los tiempos de carga de páginas web y proporciona informes detallados de análisis de rendimiento.
Herramientas para desarrolladores de Chrome: las herramientas para desarrolladores integradas del navegador proporcionan funciones como análisis de rendimiento, monitoreo de red y revisión de páginas.

8. ¿Qué es la carga progresiva de imágenes? ¿Cómo mejora el rendimiento de carga de la página web?

Respuesta: La carga progresiva de imágenes es una técnica que mejora el rendimiento de carga de la página web y la experiencia del usuario al cargar gradualmente una versión borrosa o de baja resolución de una imagen y luego aumentar gradualmente la nitidez de la imagen. Los beneficios de la carga progresiva de imágenes incluyen:

Los usuarios pueden ver el contenido de la página más rápido, mejorando la velocidad de percepción.
Cargar imágenes gradualmente puede reducir el tiempo de carga general de su página web.
La carga progresiva de imágenes proporciona transiciones suaves y evita parpadeos o cambios repentinos en el contenido de la página.

9. ¿Qué es la prioridad de recursos de front-end (priorización de recursos)? ¿Cómo priorizar los recursos?

Respuesta: La prioridad de recursos de front-end se refiere a asignar prioridades de carga a diferentes tipos de recursos para optimizar el rendimiento de carga de la página web. Puede establecer la prioridad de los recursos utilizando los siguientes métodos:

Utilice etiquetas para especificar la precarga de recursos para garantizar que los recursos críticos se carguen lo antes posible.
Utilice etiquetas para especificar recursos que se pueden utilizar en páginas futuras para una carga temprana.
Utilice etiquetas para especificar los nombres de dominio que se resolverán previamente para reducir el tiempo de búsqueda de DNS.
Utilice etiquetas para especificar nombres de dominio para preconectarse y reducir el tiempo de establecimiento de la conexión.

Navegador

1. Explique cómo funciona el navegador.

Respuesta: El funcionamiento de un navegador incluye los siguientes pasos clave:

Análisis: el navegador analiza los códigos HTML, CSS y JavaScript recibidos en árboles DOM, árboles CSSOM y códigos ejecutables del motor JavaScript.
Representación: el navegador utiliza el árbol DOM y el árbol CSSOM para construir un árbol de representación y luego realiza el diseño (calcula la posición y el tamaño de los elementos) y dibuja (dibuja elementos en la pantalla) según el árbol de representación.
Diseño y dibujo: el navegador diseña y dibuja según los cambios en el árbol de representación y luego presenta la página final al usuario.
Ejecución del motor JavaScript: el motor JavaScript del navegador interpreta y ejecuta el código JavaScript, actualiza el árbol de renderizado y vuelve a renderizar la página según sea necesario.

2. ¿Qué son el repintado y el reflujo? ¿Cual es la diferencia entre ellos?

Respuesta: Redibujar se refiere al proceso de actualización cuando la apariencia de un elemento (como el color, el fondo, etc.) cambia, pero el diseño no se ve afectado. Volver a dibujar no hace que cambie la posición o el tamaño del elemento.

Reflujo se refiere al proceso de actualización cuando cambian las propiedades de diseño de un elemento (como ancho, alto, posición, etc.). El reflujo hace que el navegador vuelva a calcular el árbol de renderizado y vuelva a dibujar parte o la totalidad de la página.

La diferencia es que volver a dibujar implica solo cambios en la apariencia, mientras que redistribuir implica cambios en el diseño. Refluir requiere más rendimiento que volver a dibujar porque requiere volver a calcular el diseño y volver a dibujar toda la página.

3. ¿Qué son la difusión y captura de eventos? ¿Cual es la diferencia entre ellos?

Respuesta: La difusión y captura de eventos se refieren a dos métodos de propagación diferentes cuando los navegadores manejan eventos.

La propagación de eventos significa que el evento se activa desde el elemento más interno y luego se propaga hacia arriba hasta el elemento principal hasta llegar al elemento más externo.

La captura de eventos significa que los eventos se activan desde el elemento más externo y luego se propagan hasta el elemento más interno.

La diferencia radica en la dirección de propagación. La difusión de eventos se propaga de adentro hacia afuera, mientras que la captura de eventos se propaga de afuera hacia adentro.

4. Explique los métodos de ejecución de código JavaScript sincrónico y asincrónico.

Respuesta: El código síncrono es código que se ejecuta secuencialmente. Cada tarea debe esperar a que se complete la tarea anterior antes de poder ejecutarse. El código sincrónico bloquea la ejecución del código posterior hasta que se completa la tarea actual.

El código asincrónico es código que no se ejecuta en secuencia, se ejecuta en segundo plano y no bloquea la ejecución de código posterior. El código asincrónico generalmente usa funciones de devolución de llamada, Promise, async/await, etc. para manejar los resultados de las operaciones asincrónicas.

Mediante la ejecución asincrónica, puede evitar el bloqueo del hilo principal y mejorar el rendimiento de respuesta de la página.

5. ¿Qué es el bucle de eventos? ¿Cuál es su papel en JavaScript?

Responder: El bucle de eventos es el mecanismo en JavaScript que maneja la ejecución de código asincrónico. Es responsable de gestionar la programación y ejecución de tareas asincrónicas y agregarlas a la cola de ejecución.

En JavaScript, la función del bucle de eventos es garantizar que las tareas asincrónicas se ejecuten en el orden correcto y no bloqueen el hilo principal. Implementa operaciones asincrónicas sin bloqueo eliminando continuamente tareas de la cola de ejecución y ejecutándolas.

6. Explique cómo funciona el mecanismo de recolección de basura del navegador.

Respuesta: El mecanismo de recolección de basura del navegador es un mecanismo automático de administración de memoria que se utiliza para detectar y reciclar objetos que ya no se usan para liberar recursos de memoria.

El mecanismo de recolección de basura se implementa mediante el algoritmo de barrido de marcas. Así es como funciona:

Fase de marcado: el recolector de basura comenzará desde el objeto raíz (como el objeto global), atravesará recursivamente todos los objetos y marcará los objetos a los que aún se puede acceder.
Fase de limpieza: el recolector de basura escanea la memoria del montón, borra los objetos no marcados y recupera el espacio de memoria que ocupan.
El objetivo del mecanismo de recolección de basura es identificar y reciclar objetos que ya no se utilizan para evitar pérdidas de memoria y mejorar la utilización de la memoria.

7. Explique la política del mismo origen del navegador y sus limitaciones.

Respuesta: La política del mismo origen es un mecanismo de seguridad del navegador que limita las interacciones entre páginas web de diferentes orígenes. Homología significa que el protocolo, el nombre de dominio y el número de puerto son exactamente iguales.

Las limitaciones de la póliza del mismo origen incluyen:

Restricciones de acceso a scripts: los scripts de diferentes fuentes no pueden acceder directamente a los datos y operaciones de los demás.
Restricciones de acceso DOM: las páginas web de diferentes fuentes no pueden acceder a los elementos DOM de cada una a través de JavaScript.
Restricciones de cookies: las páginas web de diferentes orígenes no pueden leer ni modificar las cookies de las demás.
Limitación de solicitudes AJAX: las páginas web de diferentes orígenes no pueden acceder a los datos de las demás a través de solicitudes AJAX.
La existencia de una política del mismo origen puede evitar que los sitios web maliciosos obtengan información confidencial de los usuarios o realicen operaciones maliciosas.

8. ¿Qué son los trabajadores web? ¿Cuál es su papel en el navegador?

Respuesta: Web Workers es una API de JavaScript proporcionada por el navegador para realizar tareas informáticas que requieren mucho tiempo en un hilo en segundo plano para evitar bloquear el hilo principal.

La función de los Web Workers es mejorar la capacidad de respuesta del navegador para que la fluidez de la interfaz de usuario no se vea afectada al realizar cálculos complejos o procesar grandes cantidades de datos.

Web Workers permite el procesamiento paralelo delegando tareas a subprocesos en segundo plano, aprovechando al máximo la potencia de los procesadores multinúcleo. Pueden comunicarse con el hilo principal, pero no pueden acceder directamente al DOM ni realizar operaciones relacionadas con la UI.

9. Explique qué es el caché del navegador (Browser Cache) y cuál es su función.

Respuesta: La caché del navegador es donde el navegador almacena copias de páginas web y recursos localmente para que puedan cargarse rápidamente en visitas posteriores. Su función es reducir la cantidad de solicitudes al servidor y el volumen de transmisión de la red, y mejorar la velocidad de carga de la página y la experiencia del usuario.

El almacenamiento en caché del navegador funciona guardando el recurso localmente en la primera solicitud y verificando las solicitudes posteriores para ver si el recurso ya existe y no ha caducado. Si el recurso ya existe y no ha caducado, el navegador lo cargará directamente desde la memoria caché en lugar de volver a descargarlo desde el servidor.

10. ¿Qué es la redirección? ¿Cuál es su papel en el navegador?

Respuesta: Redirección significa que cuando el navegador solicita una URL, el servidor devuelve una URL diferente, redirigiendo así la solicitud del navegador a la nueva URL.

La función de la redirección en el navegador es saltar a la página, modificar la URL o redirigir el recurso. Se puede utilizar en una variedad de situaciones, como manejar la redirección de enlaces antiguos, normalizar URL, manejar la autenticación de usuarios, etc.

La redirección se implementa estableciendo códigos de estado específicos (como redirección permanente 301, redirección temporal 302) y campos de encabezado de ubicación en la respuesta HTTP.

11. ¿Qué es el almacenamiento del navegador? ¿Cuáles son los diferentes mecanismos de almacenamiento que tiene?

Respuesta: El almacenamiento del navegador es un mecanismo proporcionado por el navegador para almacenar datos en el lado del cliente y se utiliza para compartir datos entre diferentes páginas web o conservar datos.

El almacenamiento del navegador tiene los siguientes mecanismos de almacenamiento diferentes:

Cookie: un pequeño archivo de texto que puede almacenar una pequeña cantidad de datos y se envía automáticamente al servidor con cada solicitud HTTP.
Almacenamiento web (almacenamiento local y almacenamiento de sesión): puede almacenar grandes cantidades de datos en el navegador en forma de pares clave-valor.
IndexedDB: una base de datos avanzada del lado del cliente que puede almacenar grandes cantidades de datos estructurados y admite operaciones de indexación y transacciones.
API de caché: se utiliza para almacenar en caché las respuestas a solicitudes de red para acceso sin conexión o para aumentar la velocidad de carga de la página.
Los diferentes mecanismos de almacenamiento son adecuados para diferentes necesidades y los desarrolladores pueden elegir el método de almacenamiento adecuado según situaciones específicas.

Hola, soy Feichen.
Bienvenido a seguirme para obtener recursos de aprendizaje front-end, compartir diariamente cambios tecnológicos, reglas de supervivencia, información privilegiada de la industria, conocimientos y oportunidades.

¡Preguntas de la entrevista inicial de lectura obligada para los Oro, Nueve y Plata Diez de 2023! ¡2w palabras de calidad!