Insira a descrição da imagem aqui

Diretório de artigos

Introdução
CSS
JavaScript
Texto datilografado
VUE2
VUE3
Reagir
rede
Navegador

Introdução

Perguntas obrigatórias da entrevista inicial para 2023 Gold, Nine e Silver Ten!
Chegou o período áureo do Golden Nine e Silver Ten. Amigos que querem mudar de emprego, venham conferir.

CSS

1. Explique o que é o modelo de caixa CSS e descreva seus componentes.

Resposta: O modelo box do CSS é um conceito usado para organizar e posicionar elementos. Consiste em área de conteúdo, preenchimento, bordas e margens, que por sua vez envolvem o elemento.

2. Explique os seletores e suas prioridades em CSS.

Resposta: Os seletores CSS são usados para selecionar elementos HTML aos quais os estilos devem ser aplicados. As regras de prioridade dos seletores são: estilo inline > seletor de ID > seletor de classe, seletor de atributos, seletor de pseudoclasse > seletor de elemento > seletor universal. Ao mesmo tempo, usar !important pode aumentar a prioridade do estilo.

3. Explique como os floats funcionam em CSS e dê um exemplo.

Resposta: Float é um elemento usado em CSS para flutuar à esquerda ou à direita de um elemento, retirando-o do fluxo do documento e envolvendo-o. Por exemplo:

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

4. Explique o atributo position em CSS e seus diferentes valores.

Resposta: O atributo position é usado para controlar como um elemento é posicionado. Os valores comuns são: estático (padrão, posicionado de acordo com o fluxo do documento), relativo (posicionamento relativo), absoluto (posicionamento absoluto), fixo (posicionamento fixo) e pegajoso (posicionamento fixo).

5. Explique como o z-index funciona em CSS.

Resposta: A ordem de empilhamento (índice z) é usada para controlar a ordem de empilhamento dos elementos na direção vertical. Os elementos com valores de ordem de empilhamento mais altos aparecerão acima dos elementos com valores de ordem de empilhamento mais baixos. Por padrão, o valor da ordem de empilhamento é automático.

6. Explique a diferença entre pseudoclasses e pseudoelementos em CSS e dê um exemplo.

Resposta: Pseudoclasses são usadas para adicionar estados especiais aos seletores, como :hover, :active, etc. Pseudoelementos são usados para adicionar elementos especiais aos seletores, como ::before, ::after, etc. Por exemplo:

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

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

7. Explique os dois modos do modelo box em CSS: modo padrão e modo estranho.

Resposta: O modo padrão é um modo que analisa e renderiza páginas de acordo com os padrões W3C. O modo estranho é um modo compatível com versões mais antigas de navegadores para análise e renderização de páginas. Você pode especificar qual modo usar por meio da declaração <!DOCTYPE>.

8. Explique o que é BFC em CSS e qual a sua função?

Resposta: BFC (contexto de formatação em nível de bloco) é um modo de renderização em CSS que cria um ambiente de renderização independente no qual os elementos são dispostos e posicionados de acordo com certas regras. As funções do BFC incluem: compensação de flutuações, prevenção de margens sobrepostas, etc.

9. Explique o que é layout flexbox em CSS e quais são suas vantagens?

Resposta: O layout Flexbox é um módulo CSS para criar layouts flexíveis e responsivos. Ele alcança recursos de layout poderosos por meio da combinação de contêineres flexíveis e itens flexíveis. Suas vantagens incluem facilidade de uso, forte adaptabilidade e alinhamento flexível e controle de distribuição.

10.Explique o que é media query em CSS e qual a sua função?

Resposta: Consultas de mídia são uma técnica em CSS usada para aplicar diferentes estilos com base nas características e propriedades do dispositivo. Através de consultas de mídia, o layout e o estilo da página podem ser otimizados com base no tamanho da tela, tipo de dispositivo, resolução e outras condições.

JavaScript

1. Explique os tipos de dados JavaScript e dê exemplos de cada tipo.

Resposta: JavaScript possui sete tipos de dados: String, Número, Booleano, Objeto, Matriz, Nulo e Indefinido. Por exemplo:

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 o que é elevação de variável em JavaScript.

Resposta: Elevação de variáveis significa que em JavaScript, as declarações de variáveis e funções são içadas para o topo do escopo antes que o código seja executado. Isso significa que variáveis e funções podem ser usadas antes de serem declaradas. Por exemplo:

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

3. Explique o que é encerramento (Closure) em JavaScript e dê exemplos.

Resposta: Um encerramento ocorre quando uma função pode acessar e manipular variáveis fora de seu escopo léxico. Isso é feito criando uma função interna dentro de uma função e retornando essa função interna. Por exemplo:

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

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

4. Explique o borbulhamento de eventos (Event Bubbling) e a captura de eventos (Event Capturing) em JavaScript.

Resposta: O evento borbulhante significa que o evento é acionado passo a passo do elemento mais específico para o elemento pai até ser acionado para o elemento raiz. A captura de eventos significa que os eventos começam no elemento raiz e são acionados passo a passo até os elementos mais específicos. Você pode usar o terceiro parâmetro do método addEventListener para controlar se deve usar bolha de evento ou captura de evento.

5. Explique o que é herança de protótipo em JavaScript.

Resposta: Herança prototípica é um mecanismo em JavaScript que implementa relacionamentos de herança entre objetos. Cada objeto possui um objeto protótipo, que contém propriedades e métodos compartilhados. Ao acessar uma propriedade ou método de um objeto, se o próprio objeto não possuir um, ele será consultado ao longo da cadeia de protótipos. A herança prototípica pode ser implementada usando o método Object.create() ou definindo o atributo __proto__ do objeto.

6. Explique a programação assíncrona em JavaScript e forneça um exemplo de operação assíncrona.

Resposta: A programação assíncrona refere-se a um método de programação que não bloqueia a execução subsequente do código durante a execução do código. Operações assíncronas comuns incluem solicitações de rede, temporizadores, etc. Por exemplo:

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

7. Explique o que é encerramento (Closure) em JavaScript e dê exemplos.

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

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

8. Explique a função e os cenários de uso desta palavra-chave em JavaScript.

Responda: A palavra-chave this representa o objeto do contexto de execução atual em JavaScript. Seu valor específico depende de como a função é chamada. No escopo global, aponta para o objeto global (objeto janela no ambiente do navegador). Em uma função, o objetivo disso depende de como a função é chamada. O valor disso pode ser especificado explicitamente por meio de métodos como call, apply e bind.

9. Explique o que é delegação de eventos (delegação de eventos) em JavaScript e forneça um exemplo de uso da delegação de eventos.

Resposta: A delegação de eventos refere-se à ligação de manipuladores de eventos ao elemento pai, em vez de diretamente a cada elemento filho. Quando um evento é acionado, o evento irá borbulhar até o elemento pai e, em seguida, a lógica de processamento correspondente será executada julgando o alvo do evento. Isso reduz o número de manipuladores de eventos e melhora o desempenho. Por exemplo:

<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 a programação modular em JavaScript e forneça um exemplo de uso de módulos.

Resposta: A programação modular refere-se à divisão do código em módulos independentes, cada módulo é responsável por uma função específica e realiza as dependências entre os módulos por meio de importação e exportação. ES6 introduz sintaxe modular e você pode usar as palavras-chave import e export para importar e exportar módulos. Por exemplo:

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

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

11. Explique o borbulhamento e a captura de eventos em JavaScript.

Resposta: O borbulhamento de eventos significa que quando um evento é acionado na árvore DOM, ele se propagará do elemento mais interno para o elemento mais externo. A captura de eventos significa que quando um evento é acionado na árvore DOM, ele se propagará do elemento mais externo para o elemento mais interno.

12. O que é Cadeia de Protótipo? Como usar a cadeia de protótipos para implementar herança?

Resposta: A cadeia de protótipos é a conexão entre objetos em JavaScript. Cada objeto possui uma referência ao seu protótipo. Através da cadeia de protótipos, um objeto pode herdar as propriedades e métodos de seu objeto protótipo. A herança pode ser implementada usando uma cadeia de protótipos, apontando o protótipo de um objeto para outro objeto, para que o objeto possa acessar as propriedades e métodos do outro objeto.

13. Explique Debounce e Throttle em JavaScript.

Resposta: Debouncing e throttling são técnicas usadas para controlar a frequência com que uma função é executada. Anti-vibração refere-se à execução apenas da última chamada de função acionada dentro de um determinado período de tempo. A limitação refere-se à execução de chamadas de função em intervalos fixos dentro de um determinado período de tempo.

14. O que é Loop de Eventos? Explique o mecanismo de loop de eventos em JavaScript.

Resposta: O loop de eventos é o mecanismo em JavaScript para lidar com operações assíncronas. O loop de eventos pega continuamente tarefas da fila de tarefas e as executa até que a fila de tarefas esteja vazia. O loop de eventos consiste no thread principal e na fila de tarefas. O thread principal é responsável pela execução de tarefas síncronas. As tarefas assíncronas serão colocadas na fila de tarefas e aguardarão a execução do thread principal quando estiver ocioso.

15. Explique cópia profunda e cópia superficial em JavaScript.

Resposta: Cópia profunda significa criar um novo objeto e copiar todas as propriedades do objeto original e as propriedades do objeto aninhado para o novo objeto. Cópia superficial significa criar um novo objeto e copiar as propriedades do objeto original para o novo objeto, mas as referências aos objetos aninhados ainda são compartilhadas.

16. O que é programação assíncrona? Liste várias maneiras de lidar com operações assíncronas.

Resposta: A programação assíncrona é uma forma de programação que lida com operações potencialmente demoradas sem bloquear o thread principal. Os métodos comuns para lidar com operações assíncronas incluem funções de retorno de chamada, Promise, async/await e escuta de eventos.

17. Explique Hoisting (promoção variável) em JavaScript.

Resposta: Elevação de variáveis significa que em JavaScript, as declarações de variáveis e funções serão içadas para o topo do escopo atual. Isso significa que variáveis e funções podem ser usadas antes de serem declaradas, mas sua atribuição ou definição ainda estará no local original.

18. O que é curry? Por favor, dê um exemplo de curry.

Resposta: Currying é o processo de conversão de uma função que aceita vários parâmetros em uma nova função que aceita um parâmetro e retorna uma nova função. Exemplo:

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

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

19. Explique o modo estrito em JavaScript.

Resposta: O modo estrito é um modo de execução JavaScript que fornece sintaxe mais rigorosa e verificação de erros. No modo estrito, algumas sintaxes inseguras ou obsoletas serão desativadas e alguns novos recursos serão introduzidos, como variáveis que devem ser declaradas antes de serem usadas, proibindo o uso disso para apontar para objetos globais, etc.

Texto datilografado

1. Explique a relação entre TypeScript e JavaScript.

Resposta: TypeScript é um superconjunto de JavaScript que adiciona digitação estática e alguns outros recursos. O código TypeScript pode ser compilado em código JavaScript e, portanto, pode ser executado em qualquer ambiente que suporte JavaScript.

2. O que são anotações de tipo no TypeScript? Como usar anotações de tipo?

Resposta: As anotações de tipo referem-se à declaração explícita de informações de tipo em variáveis, parâmetros de função, valores de retorno de função, etc. As anotações de tipo podem ser adicionadas usando dois pontos (:) seguidos do tipo. Por exemplo:

let num: number = 10;

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

3. O que é uma interface em TypeScript? Como definir e usar interfaces?

Resposta: Uma interface é uma sintaxe para definir a estrutura e o tipo de objetos. As interfaces podem ser definidas usando a palavra-chave interface. Por exemplo:

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. O que são classes em TypeScript? Como definir e usar classes?

Resposta: Uma classe é um modelo para a criação de objetos, contém propriedades e métodos. As classes podem ser definidas usando a palavra-chave class. Por exemplo:

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. O que são genéricos em TypeScript? Como usar genéricos?

Resposta: Genéricos é uma ferramenta para criar código reutilizável que permite o uso de tipos de espaço reservado ao definir funções, classes ou interfaces. Tipos genéricos podem ser especificados usando colchetes angulares (<>). Por exemplo:

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

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

6. O que são enumerações em TypeScript? Como definir e usar enumerações?

Resposta: Enumeração é uma sintaxe para definir uma coleção de constantes nomeadas. As enumerações podem ser definidas usando a palavra-chave enum. Por exemplo:

enum Color {
    
    
  Red,
  Green,
  Blue,
}

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

7. O que são módulos em TypeScript? Como exportar e importar módulos?

Resposta: Um módulo é uma unidade usada para organizar e encapsular código. Você pode usar a palavra-chave export para exportar variáveis, funções, classes, etc. no módulo para que outros módulos possam usá-lo. Você pode usar a palavra-chave import para importar exportações de outros módulos. Por exemplo:

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

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

8. O que é inferência de tipo no TypeScript? Como usar a inferência de tipo?

Resposta: A inferência de tipo significa que o TypeScript infere automaticamente o tipo de variáveis com base no contexto sem adicionar explicitamente anotações de tipo. Por exemplo:

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

9. O que são namespaces em TypeScript? Como definir e usar namespaces?

Resposta: Namespace é um mecanismo para organizar e encapsular código, o que evita conflitos globais de nomenclatura. Namespaces podem ser definidos usando a palavra-chave namespace. Por exemplo:

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

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

10. O que são aliases de tipo no TypeScript? Como definir e usar aliases de tipo?

Resposta: Um alias de tipo é fornecer um alias a um tipo para que ele possa ser referenciado mais facilmente no código. Aliases de tipo podem ser definidos usando a palavra-chave type. Por exemplo:

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. O que é Vue.js? Quais são suas características?

Resposta: Vue.js é uma estrutura JavaScript para construção de interfaces de usuário. Possui as seguintes características:

Vinculação de dados responsiva: usando a sintaxe de vinculação de dados do Vue, a atualização automática dos dados pode ser alcançada.
Desenvolvimento de componentes: Vue permite que a página seja dividida em componentes independentes, melhorando a manutenibilidade e reutilização do código.
DOM virtual: Vue usa um DOM virtual para rastrear alterações na página e atualizar o DOM real com eficiência.
Sistema de comando: Vue fornece uma variedade de comandos integrados para lidar com operações DOM comuns e controle lógico.
Ecossistema: Vue possui um enorme ecossistema, incluindo plug-ins, ferramentas e bibliotecas de terceiros, para atender diversas necessidades de desenvolvimento.

2. Como a vinculação de dados bidirecional é implementada no Vue?

Resposta: A vinculação de dados bidirecional no Vue é implementada por meio da diretiva v-model. O v-model pode criar vinculação de dados bidirecional em elementos de formulário (como ,,). Quando a entrada do usuário altera o valor do elemento do formulário, o modelo de dados será atualizado automaticamente; inversamente, quando o valor do modelo de dados for alterado, o elemento do formulário também será atualizado automaticamente.

3. Quais são os ganchos do ciclo de vida no Vue? Qual é a ordem em que eles são executados?

Resposta: Os ganchos de ciclo de vida no Vue incluem beforeCreate, criado, beforeMount, montado, beforeUpdate, atualizado, beforeDestroy e destruído. A ordem de execução deles é a seguinte:

beforeCreate
criado
beforeMount
montado
beforeUpdate
atualizado
beforeDestroy
destruído

4. Qual é a diferença entre propriedades computadas e ouvintes no Vue?

Resposta: Uma propriedade computada é uma propriedade baseada em dependência que calcula dinamicamente um valor com base nos dados dos quais depende. As propriedades computadas possuem um mecanismo de cache e são recalculadas somente quando os dados dependentes são alterados. Ouvintes são usados para monitorar alterações nos dados e executar operações correspondentes. Quando os dados mudam, o ouvinte executará imediatamente a função de retorno de chamada especificada.

5. Quais são as formas de comunicação dos componentes no Vue?

Resposta: Os métodos de comunicação de componentes no Vue incluem:

Comunicação do componente pai-filho: passe dados para o componente filho por meio de adereços, e o componente filho envia mensagens ao componente pai por meio de eventos.
Comunicação entre componentes filho e pai: O componente filho aciona eventos por meio de $emit, e o componente pai escuta os eventos e responde.
Comunicação de componentes irmãos: passagem de dados por meio de um componente pai compartilhado ou comunicação por meio de um barramento de eventos.
Comunicação de componentes entre níveis: forneça dados em componentes ancestrais por meio de fornecimento e injeção e, em seguida, use-os em componentes descendentes.

6. Como o roteamento é implementado no Vue?

Responda: O roteamento no Vue é implementado através do Vue Router. Vue Router é o gerenciador de roteamento fornecido oficialmente pelo Vue.js, que permite aos desenvolvedores implementar aplicativos de página única (SPA) em aplicativos Vue. O Vue Router associa caminhos de URL a componentes configurando relacionamentos de mapeamento de rotas e fornece funções de navegação para que os usuários possam alternar visualizações sem atualizar a página.

7. Quais são as instruções do Vue? Dê exemplos para ilustrar seu uso.

Responda: As instruções comumente usadas no Vue incluem:

v-if: renderiza elementos condicionalmente com base no valor de uma expressão.
v-for: Renderização de loop com base nos dados de um array ou objeto.
v-bind: usado para vincular propriedades dinamicamente ou atualizar propriedades de forma responsiva.
v-on: usado para ouvir eventos DOM e executar métodos correspondentes.
modelo v: usado para implementar vinculação de dados bidirecional em elementos de formulário.
Por exemplo:

<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. Qual é a diferença entre assistir e computar no Vue?

Resposta: Tanto o watch quanto o computado podem ser usados para monitorar alterações nos dados, mas seu uso e implementação são ligeiramente diferentes. Watch é usado para monitorar alterações de dados especificadas e executar operações correspondentes quando os dados mudam. computado é usado para calcular dinamicamente um novo valor com base em dados dependentes, armazenar em cache o valor e recalculá-lo somente quando os dados dependentes forem alterados.

9. O que são mixins no Vue? O que isso faz?

Responda: Mixins são uma forma de compartilhar código entre vários componentes. Os mixins podem conter opções de componentes (como dados, métodos, ganchos de ciclo de vida, etc.) e mesclá-los no componente usando o mixin. Isso pode conseguir a reutilização de código e a expansão de componentes e reduzir o trabalho de escrever repetidamente código semelhante.

10. O que é keep alive no Vue? O que isso faz?

Responda: É um componente integrado no Vue, usado para armazenar componentes dinâmicos em cache. Quando um componente é encapsulado em um , o estado do componente é preservado, incluindo sua instância, estado e estrutura DOM. Isso evita a criação e destruição repetidas de componentes ao trocar componentes, melhorando o desempenho e a experiência do usuário.

11. Explique o que é injeção de dependência em Vue.js? Quais são seus cenários de aplicação no Vue?

Responda: A injeção de dependência é um padrão de design usado para passar dependências de um componente para outro. No Vue, a injeção de dependência é implementada por meio das opções fornecer e injetar. O componente pai fornece dados por meio de provide e, em seguida, o componente filho injeta esses dados por meio de injeção. É muito útil na comunicação de componentes em vários níveis.

12. Qual é a função Render em Vue.js? Qual é a diferença entre ele e um modelo?

Resposta: As funções de renderização são uma forma de escrever componentes em código JavaScript que geram dinamicamente um DOM virtual. Em comparação com os modelos, as funções de renderização fornecem maior flexibilidade e controle e podem lidar com lógicas mais complexas e necessidades de renderização dinâmica.

13. O que é um slot no Vue.js? Forneça um exemplo com slots nomeados e slots com escopo definido.

Resposta: Slots são um mecanismo para estender o conteúdo de um componente. Os slots nomeados permitem que um componente pai insira conteúdo com um nome específico em um componente filho, enquanto os slots com escopo permitem que um componente filho passe dados para o componente pai. Exemplo:

<!-- 父组件 -->
<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. Como funciona o sistema de animação em Vue.js? Forneça um exemplo simples de animação.

Resposta: O sistema de animação do Vue.js é implementado por meio de transição CSS e classes de animação. Ao adicionar uma classe de transição ou classe de animação a um elemento, o efeito de transição ou efeito de animação correspondente pode ser acionado. Exemplo:

<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. Qual é o mecanismo de tratamento de erros em Vue.js? Como capturar e tratar erros em componentes Vue?

Resposta: Vue.js fornece um mecanismo global de tratamento de erros e um mecanismo de tratamento de erros em nível de componente. O tratamento de erros global pode capturar e tratar erros por meio da função de gancho errorCaptured. O tratamento de erros em nível de componente pode capturar e tratar erros por meio da função de gancho errorCaptured ou da opção errorHandler.

16. O que é Server Side Rendering (SSR) em Vue.js? Quais são suas vantagens e limitações?

Resposta: A renderização do lado do servidor refere-se ao processo de geração de conteúdo HTML no servidor e envio ao navegador para renderização. Vue.js pode realizar renderização no lado do servidor, proporcionando melhor desempenho de carregamento na primeira vez e otimização de SEO. No entanto, a renderização no lado do servidor também traz algumas limitações, como aumento da carga do servidor e complexidade de desenvolvimento.

17. Quais são as limitações dos arrays reativos em Vue.js? Como contornar essas limitações?

Resposta: O sistema responsivo do Vue.js não pode rastrear métodos de mutação de array (como push, pop, splice, etc.). Para resolver esta limitação, o Vue fornece alguns métodos especiais, como Vue.set, vm.$set e Array.prototype.splice. Esses métodos podem ser usados para atualizar arrays e permanecer responsivos.

18. Quais são as técnicas comuns para otimização de desempenho em Vue.js?

Resposta: Dicas comuns de otimização de desempenho do Vue.js incluem:

Tenha cuidado para evitar renderização desnecessária ao usar v-if e v-for.
Use atributos computados e observe os ouvintes adequadamente.
Use componentes keep-alive para armazenar em cache o estado do componente.
Use componentes assíncronos para carregamento sob demanda.
Evite usar expressões complexas em modelos.
Use o atributo key para gerenciar a reutilização de componentes e elementos.
Use o carregamento lento e a divisão de código com sabedoria.

19. Quais são os protetores de navegação de rota em Vue.js? Qual é a ordem em que eles são executados?

Resposta: Os guardas de navegação de rota em Vue.js incluem guardas frontais globais, guardas de análise global, guardas de posto globais, guardas exclusivos de rota e guardas no componente. A ordem de execução deles é a seguinte:

Proteção frontal global (beforeEach)
Proteção exclusiva de rota (beforeEnter)
Proteção de resolução (beforeResolve)
Proteção no componente (beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave)
Proteção de posto global (afterEach)

20. Como é feito o teste de unidade em Vue.js? Forneça um exemplo simples de teste de unidade.

Resposta: O teste unitário do Vue.js pode ser realizado usando ferramentas como Jest ou Mocha. Exemplo:

// 组件代码
// 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. O que é a API de composição no Vue.js 3? Como é diferente da API de opções?

Resposta: API de composição é uma nova maneira de organizar a lógica de componentes introduzida no Vue.js 3. Ele permite que os desenvolvedores organizem e reutilizem a lógica por meio de funções em vez de objetos de opção. Em contraste, a API de opções é uma forma comumente usada para organizar a lógica do componente no Vue.js 2. Os dados, métodos, etc. do componente são definidos por meio das propriedades no objeto de opções.

2. O que é teletransporte em Vue.js 3? Por favor, dê um exemplo de teletransporte.

Resposta: Teleporte é um mecanismo introduzido no Vue.js 3 para renderizar o conteúdo de um componente para qualquer local na árvore DOM. Exemplo:

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

3. Como funciona o sistema reativo no Vue.js 3? Como ele difere do sistema reativo no Vue.js 2?

Responda: O sistema reativo em Vue.js 3 é implementado usando objetos Proxy. Comparado com o sistema reativo no Vue.js 2, o sistema reativo no Vue.js 3 tem melhor desempenho e rastreamento mais refinado, pode detectar alterações de dados com mais precisão e suporta reatividade aninhada.

4. O que é Suspense em Vue.js 3? O que isso faz?

Resposta: Suspense é um mecanismo introduzido no Vue.js 3 para lidar com o status de carregamento de componentes assíncronos. Ele pode exibir um espaço reservado antes do componente assíncrono ser carregado e renderizar o conteúdo do componente assíncrono após ele ser carregado. Isso pode lidar melhor com o processo de carregamento de componentes assíncronos e fornecer uma melhor experiência ao usuário.

5. Quais são as funções de fornecer e injetar no Vue.js 3? Por favor, dê um exemplo de fornecer e injetar.

Resposta: provide e inject são usados para implementar injeção de dependência entre componentes. Forneça dados usando provide no componente pai e, em seguida, injete esses dados no componente filho usando inject. Exemplo:

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

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

6. Quais melhorias foram feitas no sistema de animação do Vue.js 3? Liste algumas melhorias.

Resposta: O sistema de animação no Vue.js 3 tem as seguintes melhorias em comparação com o Vue.js 2:

Melhor desempenho: O sistema de animação do Vue.js 3 utiliza um mecanismo de animação mais eficiente, proporcionando melhor desempenho.
Sintaxe mais concisa: O sistema de animação do Vue.js 3 usa uma sintaxe mais concisa, tornando a definição e o uso da animação mais intuitivos e convenientes.
Suporta mais recursos de animação: o sistema de animação do Vue.js 3 oferece suporte a mais recursos de animação, como animações interativas e efeitos de animação mais complexos.
O que é elevação estática de árvore em Vue.js 3? Quais são suas vantagens?
Resposta: O levantamento estático é uma técnica de otimização no Vue.js 3 que reduz a sobrecarga do tempo de execução, promovendo nós estáticos a constantes durante a fase de compilação. Esta tecnologia de otimização pode melhorar o desempenho de renderização de componentes e reduzir o tamanho do código gerado.

7. O que é fragmento em Vue.js 3? O que isso faz?

Resposta: Fragmento é um mecanismo introduzido no Vue.js 3 para retornar vários nós raiz em um componente. No Vue.js 2, o template de um componente pode ter apenas um.
Qual é a diferença entre ref e reactive na API Composition no Vue.js 3? Quando usar qual?
Resposta: ref é usado para criar um tipo de dados básico responsivo, enquanto reativo é usado para criar um objeto responsivo. Quando você precisa criar dados reativos simples, você pode usar ref. Quando você precisa criar um objeto reativo contendo múltiplas propriedades, você pode usar reativo.

8. Qual é a diferença entre watchEffect e watch no Vue.js 3? Quando usar qual?

Resposta: watchEffect é usado para monitorar alterações nos dados responsivos e realizar operações correspondentes na função de retorno de chamada. Ele rastreia automaticamente as dependências e executa novamente as funções de retorno de chamada quando as dependências mudam. Watch é usado para monitorar dados responsivos especificados e executar operações correspondentes quando eles mudam. Ele permite que você especifique exatamente quais dados ouvir e oferece mais opções de configuração. De modo geral, se você precisar apenas monitorar alterações em dados responsivos e executar as operações correspondentes, poderá usar watchEffect; se precisar de um controle mais refinado, poderá usar watch.

9. Quais são os cuidados ao usar a diretiva v-model no Vue.js 3?

Resposta: Ao usar a diretiva v-model, há as seguintes considerações:

A diretiva v-model deve ser usada com um elemento de formulário, como,,, etc.
Ao usar um componente personalizado, o atributo modelValue e o evento update:modelValue devem ser implementados dentro do componente para suportar a ligação bidirecional do modelo v.
Você pode usar o modificador .lazy para atualizar os dados quando a caixa de entrada perder o foco.
Você pode usar o modificador .trim para remover automaticamente espaços iniciais e finais do conteúdo da caixa de entrada.
Você pode usar o modificador .number para converter o valor da caixa de entrada em um tipo numérico.

10. Fornecer e injetar no Vue.js 3 suporta dados reativos?

Resposta: Por padrão, fornecer e injetar não oferece suporte a dados reativos. Se precisar fornecer dados responsivos no provedor, você poderá usar ref ou reactive para agrupar os dados. Em seguida, use toRefs ou toRef no inject para desconstruir os dados e obter referências responsivas.

11. O que o método nextTick em Vue.js 3 faz? Em que situações é utilizado?

Resposta: O método nextTick é usado para executar a função de retorno de chamada após o término do próximo ciclo de atualização do DOM. Pode ser usado para garantir que certas operações sejam executadas após a atualização do DOM, como manipular o elemento DOM atualizado ou obter o valor da propriedade calculada atualizada. NextTick geralmente é usado em situações em que você precisa aguardar a conclusão da atualização do DOM antes de continuar.

12. Qual é a diferença entre os componentes e no Vue.js 3?

Resposta: Componente é usado para renderizar o conteúdo do componente em qualquer local na árvore DOM, enquanto componente é usado para aplicar efeitos de transição quando o componente entra ou sai da árvore DOM. É usado principalmente para mover a posição dos componentes e principalmente para mostrar e ocultar transições de componentes.

13. Qual é a função do atributo key na diretiva v-for no Vue.js 3? Por que usá-lo?

Resposta: O atributo key na diretiva v-for é usado para definir um identificador exclusivo para cada item de iteração. Sua função é ajudar o Vue.js a rastrear a identidade de cada nó para atualizar o DOM com eficiência quando os dados mudam. Usar o atributo key pode evitar problemas com atualizações ou reordenamentos incorretos de nós.

Reagir

1. O que é Reagir? Qual é o seu conceito central?

Resposta: React é uma biblioteca JavaScript para construção de interfaces de usuário. Seus conceitos principais são componenteização e programação declarativa. O React divide a interface do usuário em componentes reutilizáveis independentes e usa sintaxe declarativa para descrever o estado dos componentes e o relacionamento entre a UI, tornando mais fácil e sustentável a construção de UIs complexas.

2. O que é JSX? Como é diferente do HTML?

Responda: JSX é uma extensão de sintaxe JavaScript usada para descrever a estrutura da UI no React. É semelhante ao HTML, mas tem algumas diferenças:

3. O que são componentes do React? Quais são os dois tipos deles?

Resposta: Os componentes React são unidades independentes para construção de interfaces de usuário. Existem dois tipos de componentes React:

Componentes de função: use funções para definir componentes, receber adereços como parâmetros e retornar um elemento React.
Componente de classe: use classes ES6 para definir componentes, herdar da classe React.Component e retornar um elemento React por meio do método render.

4. O que são estados e adereços? Qual é a diferença entre eles?

Resposta: Estado são os dados gerenciados pelo próprio componente e podem ser atualizados através do método setState. Propriedades (adereços) são dados passados do componente pai para o componente filho. O componente filho não pode modificar diretamente os adereços e só pode alterar os adereços por meio da atualização do componente pai.

a diferença:

Estado são os dados dentro do componente e podem ser modificados e gerenciados livremente no componente.
Propriedades (adereços) são dados passados de componentes pais para componentes filhos.Os componentes filhos não podem ser modificados diretamente, mas só podem recebê-los e usá-los.

5. O que são métodos de ciclo de vida do React? Liste alguns métodos de ciclo de vida comumente usados.

Resposta: Os métodos de ciclo de vida React são métodos específicos executados em diferentes estágios de um componente. Aqui estão alguns métodos de ciclo de vida do React comumente usados:

componentDidMount: chamado imediatamente após a montagem do componente.
componentDidUpdate: chamado após a atualização do componente.
componentWillUnmount: chamado antes do componente ser desmontado.
shouldComponentUpdate: determina se o componente precisa ser renderizado novamente.
getDerivedStateFromProps: atualiza o estado com base nas alterações nos adereços.

6. O que são ganchos de reação? Qual é a sua função?

Resposta: React Hooks são um recurso introduzido no React versão 16.8 para usar estado e outros recursos do React em componentes funcionais. Os ganchos fornecem uma maneira de gerenciar o estado e lidar com os efeitos colaterais sem escrever componentes de classe, fazendo com que os componentes de função tenham os recursos dos componentes de classe.

7. O que é o roteador React? O que isso faz?

Responda: React Router é uma biblioteca em React para lidar com roteamento. Ele fornece uma maneira de implementar funcionalidades de navegação e roteamento em um aplicativo de página única. O React Router pode ajudar os desenvolvedores a implementar funções como alternar entre páginas, passar parâmetros de URL e roteamento aninhado.

8. O que é o contexto de reação? O que isso faz?

Resposta: React Context é um mecanismo para compartilhar dados na árvore de componentes. Ele pode evitar a passagem de dados camada por camada através de adereços, tornando o compartilhamento de dados entre componentes mais simples e eficiente. React Context fornece componentes de provedor e consumidor para fornecer e consumir dados compartilhados.

9. Qual é o processo de reconciliação do React? Como funciona?

Resposta: O processo de coordenação do React significa que quando o React atualiza os componentes, ele executa apenas operações DOM reais nas partes que precisam ser atualizadas, comparando as diferenças entre as árvores DOM virtuais antigas e novas. O processo de coordenação funciona da seguinte forma:

O React comparará os nós das árvores DOM virtuais antigas e novas, camada por camada, e encontrará as diferenças.
Para cada diferença, o React gera instruções de manipulação de DOM correspondentes, como inserir, atualizar ou excluir nós.
O React executará todas as instruções de operação do DOM em lotes para reduzir o número de operações no DOM real.

10. Qual é a síntese de eventos do React (SyntheticEvent)? O que isso faz?

Resposta: A composição de eventos do React é um mecanismo para lidar com eventos no React. É um sistema de eventos implementado pelo React para melhorar o desempenho e a compatibilidade entre navegadores. As funções de síntese de eventos incluem:

Fornece uma maneira unificada de lidar com eventos sem considerar a compatibilidade do navegador.
Os manipuladores de eventos podem ser vinculados aos componentes pai por meio da delegação de eventos para melhorar o desempenho.
Pode acessar as propriedades e métodos do objeto de evento nativo.

11. Qual é a arquitetura Fiber do React? Qual problema isso resolve?

Resposta: A arquitetura Fiber do React é um novo algoritmo e arquitetura de coordenação introduzido na versão React 16. Ele foi projetado para resolver o problema de bloqueio de renderização de longo prazo do thread principal e melhorar o desempenho do aplicativo e a experiência do usuário. A arquitetura Fiber decompõe o processo de renderização em múltiplas tarefas pequenas e usa um algoritmo de agendamento de prioridade para alocar intervalos de tempo dinamicamente, permitindo que o React execute uma parte das tarefas em cada quadro, alcançando assim uma interface de usuário suave e melhor desempenho de resposta.

12. Qual é o limite de erro do React? O que isso faz?

Resposta: Os limites de erro do React são um mecanismo para lidar com erros de componentes. Ele permite que os componentes capturem e manipulem erros de JavaScript que ocorrem em seus componentes filhos para evitar travar todo o aplicativo. As funções dos limites de erro incluem:

Capture e manipule erros na árvore de componentes para evitar que erros travem todo o aplicativo.
Fornece uma maneira elegante de exibir mensagens de erro ou interface de usuário alternativa.
Pode ser usado para registrar erros e enviar relatórios de erros.

rede

1. O que é HTTP? Como funciona?

Resposta: HTTP (Hypertext Transfer Protocol) é um protocolo usado para transferir dados na Web. Ele usa um modelo cliente-servidor, onde o cliente envia uma solicitação HTTP ao servidor e o servidor retorna uma resposta HTTP. O fluxo de trabalho do HTTP é o seguinte:

O cliente envia uma solicitação HTTP para o URL especificado.
O servidor recebe a solicitação, processa-a e retorna uma resposta HTTP.
O cliente recebe a resposta e a analisa para obter os dados necessários dela.

2. O que é HTTPS? Como é diferente do HTTP?

Resposta: HTTPS (Hypertext Transfer Protocol Secure) é uma versão segura do HTTP que criptografa e autentica comunicações usando protocolos SSL (Secure Sockets Layer) ou TLS (Transport Layer Security). Comparado com HTTP, HTTPS tem as seguintes diferenças:

Os dados são protegidos por criptografia durante a transmissão, proporcionando maior segurança.
Use certificados digitais para autenticar servidores e evitar ataques man-in-the-middle.
Use a porta padrão 443.

3. O que é uma solicitação entre domínios? Como isso é resolvido?

Resposta: Solicitações de origem cruzada são solicitações enviadas para diferentes nomes de domínio, portas ou protocolos no navegador. Devido às restrições da Política de Mesma Origem do navegador, as solicitações entre domínios serão restritas. Para resolver problemas entre domínios, você pode usar os seguintes métodos:

JSONP (JSON com preenchimento): criado dinamicamente

4. O que é cache? Como usar o cache no front-end para melhorar o desempenho?

Resposta: Cache é o armazenamento de dados ou recursos em armazenamento temporário para que possam ser reutilizados em solicitações subsequentes, melhorando assim o desempenho e reduzindo o tráfego de rede. No front-end, o cache pode ser aproveitado usando:

Cache HTTP: instrua o navegador a armazenar respostas em cache, definindo cabeçalhos de cache apropriados, como Cache-Control e Expires.
Cache de recursos: use impressões digitais de arquivos ou números de versão para renomear arquivos de recursos estáticos para que o navegador possa baixá-los novamente quando o conteúdo do arquivo for alterado.
Cache de dados: Use cache de memória, armazenamento local do navegador (como localStorage) ou cache do lado do servidor (como Redis) para armazenar dados e evitar solicitações repetidas.

5. O que é um CDN? O que isso faz?

Resposta: CDN (Content Delivery Network) é uma arquitetura de rede distribuída usada para fornecer serviços de entrega de conteúdo de alto desempenho e baixa latência em todo o mundo. As funções do CDN incluem:

Armazene recursos estáticos em cache (como imagens, folhas de estilo, scripts, etc.) em servidores mais próximos dos usuários para fornecer velocidades de carregamento mais rápidas.
Distribua o tráfego de rede e reduza a pressão de carga no servidor de origem.
Fornece tecnologias de otimização, como compactação de conteúdo, compactação de dados e cache, para melhorar a experiência do usuário.

6. O que é otimização de desempenho de carregamento de páginas da web? Que medidas podem ser tomadas para melhorar o desempenho do carregamento da página?

Resposta: A otimização do desempenho de carregamento de páginas da Web refere-se ao uso de vários meios técnicos para reduzir o tempo de carregamento de páginas da Web e melhorar a experiência do usuário. Aqui estão algumas coisas que você pode fazer para melhorar o desempenho de carregamento da página:

Compacte e mescle arquivos de recursos (como CSS e JavaScript) para reduzir o tamanho do arquivo e o número de solicitações.
Use compactação de imagem e seleção de formato apropriado para reduzir o tamanho do arquivo de imagem.
Use o cache do navegador e os cabeçalhos de cache HTTP para armazenar recursos estáticos.
Use o carregamento lento para atrasar o carregamento de recursos não críticos para melhorar a velocidade de carregamento inicial.
Use CDN (Content Delivery Network) para distribuir recursos estáticos e reduzir a latência da rede.
Otimize o caminho crítico de renderização para renderizar o conteúdo da página o mais cedo possível.

7. O que é monitoramento e análise de desempenho da web? Quais ferramentas podem ser usadas para monitorar e analisar o desempenho da página web?

Resposta: O monitoramento e a análise do desempenho de páginas da Web referem-se à medição e coleta de dados sobre o carregamento de páginas da Web e o desempenho da interação, a fim de identificar gargalos de desempenho e otimizá-los. Você pode usar as seguintes ferramentas para monitorar e analisar o desempenho da página da web:

API de desempenho da Web: a API JavaScript fornecida pelo navegador pode coletar dados de desempenho por meio do objeto de desempenho.
Lighthouse: uma ferramenta de código aberto que fornece relatórios abrangentes sobre desempenho, acessibilidade e práticas recomendadas da web.
WebPagetest: ferramenta online que mede o tempo de carregamento de páginas da web e fornece relatórios detalhados de análise de desempenho.
Ferramentas de desenvolvedor do Chrome: as ferramentas de desenvolvedor integradas do navegador fornecem funções como análise de desempenho, monitoramento de rede e revisão de página.

8. O que é carregamento progressivo de imagens? Como isso melhora o desempenho de carregamento da página da web?

Resposta: O carregamento progressivo de imagens é uma técnica que melhora o desempenho de carregamento de páginas da web e a experiência do usuário, carregando gradualmente uma versão desfocada ou de baixa resolução de uma imagem e, em seguida, aumentando gradualmente a nitidez da imagem. Os benefícios do carregamento progressivo de imagens incluem:

Os usuários podem ver o conteúdo da página com mais rapidez, melhorando a velocidade de percepção.
O carregamento gradual de imagens pode reduzir o tempo geral de carregamento da sua página da web.
O carregamento progressivo de imagens fornece transições suaves e evita oscilações ou alterações repentinas no conteúdo da página.

9. O que é prioridade de recursos front-end (Priorização de Recursos)? Como priorizar recursos?

Resposta: A prioridade de recursos de front-end refere-se à atribuição de prioridades de carregamento a diferentes tipos de recursos para otimizar o desempenho de carregamento de páginas da web. Você pode definir a prioridade dos recursos usando os seguintes métodos:

Use tags para especificar o pré-carregamento de recursos para garantir que os recursos críticos sejam carregados o mais cedo possível.
Use tags para especificar recursos que podem ser usados em páginas futuras para carregamento antecipado.
Use tags para especificar nomes de domínio a serem pré-resolvidos para reduzir o tempo de pesquisa de DNS.
Use tags para especificar nomes de domínio para pré-conectar e reduzir o tempo de estabelecimento da conexão.

Navegador

1. Explique como funciona o navegador.

Resposta: O funcionamento de um navegador inclui as seguintes etapas principais:

Análise: O navegador analisa os códigos HTML, CSS e JavaScript recebidos em árvores DOM, árvores CSSOM e códigos executáveis do mecanismo JavaScript.
Renderização: o navegador usa a árvore DOM e a árvore CSSOM para construir uma árvore de renderização e, em seguida, executa o layout (calculando a posição e o tamanho dos elementos) e o desenho (desenhando elementos na tela) com base na árvore de renderização.
Layout e desenho: O navegador faz o layout e desenha com base nas alterações na árvore de renderização e, em seguida, apresenta a página final ao usuário.
Execução do mecanismo JavaScript: o mecanismo JavaScript do navegador interpreta e executa o código JavaScript, atualizando a árvore de renderização e renderizando novamente a página conforme necessário.

2. O que são repintura e refluxo? Qual é a diferença entre eles?

Resposta: Redesenho refere-se ao processo de atualização quando a aparência de um elemento (como cor, fundo, etc.) muda, mas o layout não é afetado. Redesenhar não altera a posição ou o tamanho do elemento.

Refluxo refere-se ao processo de atualização quando as propriedades de layout de um elemento (como largura, altura, posição, etc.) mudam. O refluxo faz com que o navegador recalcule a árvore de renderização e redesenhe parte ou toda a página.

A diferença é que o redesenho envolve apenas alterações na aparência, enquanto o refluxo envolve alterações no layout. O refluxo exige mais desempenho do que o redesenho porque requer recalcular o layout e redesenhar a página inteira.

3. O que são bolhas de eventos e captura de eventos? Qual é a diferença entre eles?

Resposta: A bolha de eventos e a captura de eventos referem-se a dois métodos de propagação diferentes quando os navegadores lidam com eventos.

Borbulhamento de evento significa que o evento é acionado a partir do elemento mais interno e, em seguida, se propaga para cima, para o elemento pai, até atingir o elemento mais externo.

A captura de eventos significa que os eventos são acionados a partir do elemento mais externo e depois propagados até o elemento mais interno.

A diferença está na direção de propagação. O borbulhamento de eventos se propaga de dentro para fora, enquanto a captura de eventos se propaga de fora para dentro.

4. Explique os métodos de execução de código JavaScript síncronos e assíncronos.

Resposta: Código síncrono é um código executado sequencialmente. Cada tarefa deve aguardar a conclusão da tarefa anterior antes de poder ser executada. O código síncrono bloqueia a execução do código subsequente até que a tarefa atual seja concluída.

Código assíncrono é aquele que não é executado em sequência, é executado em segundo plano e não bloqueia a execução do código subsequente. O código assíncrono geralmente usa funções de retorno de chamada, Promise, async/await, etc. para lidar com os resultados de operações assíncronas.

Por meio da execução assíncrona, você pode evitar o bloqueio do thread principal e melhorar o desempenho de resposta da página.

5. O que é Loop de Eventos? Qual é o seu papel no JavaScript?

Responda: O loop de eventos é o mecanismo em JavaScript que lida com a execução assíncrona de código. É responsável por gerenciar o agendamento e execução de tarefas assíncronas e adicioná-las à fila de execução.

Em JavaScript, a função do loop de eventos é garantir que as tarefas assíncronas sejam executadas na ordem correta e não bloqueiem o thread principal. Ele implementa operações assíncronas sem bloqueio, removendo continuamente tarefas da fila de execução e executando-as.

6. Explique como funciona o mecanismo de coleta de lixo do navegador.

Resposta: O mecanismo de coleta de lixo do navegador é um mecanismo automático de gerenciamento de memória usado para detectar e reciclar objetos que não são mais usados para liberar recursos de memória.

O mecanismo de coleta de lixo é implementado por meio do algoritmo mark-sweep. Veja como funciona:

Fase de marcação: o coletor de lixo começará a partir do objeto raiz (como o objeto global), percorrerá recursivamente todos os objetos e marcará os objetos que ainda estão acessíveis.
Fase de limpeza: o coletor de lixo verifica a memória heap, limpa objetos não marcados e recupera o espaço de memória que eles ocupam.
O objetivo do mecanismo de coleta de lixo é identificar e reciclar objetos que não são mais usados para evitar vazamentos de memória e melhorar a utilização da memória.

7. Explique a Política de Mesma Origem do navegador e suas limitações.

Resposta: A política de mesma origem é um mecanismo de segurança do navegador que limita as interações entre páginas da web de origens diferentes. Homologia significa que o protocolo, o nome de domínio e o número da porta são exatamente iguais.

As limitações da política de mesma origem incluem:

Restrições de acesso a scripts: scripts de fontes diferentes não podem acessar diretamente os dados e operações uns dos outros.
Restrições de acesso ao DOM: páginas da Web de fontes diferentes não podem acessar os elementos DOM umas das outras por meio de JavaScript.
Restrições de cookies: páginas web de origens diferentes não podem ler ou modificar os cookies umas das outras.
Limitação de solicitação AJAX: páginas da Web de origens diferentes não podem acessar os dados umas das outras por meio de solicitações AJAX.
A existência da política de mesma origem pode impedir que sites maliciosos obtenham informações confidenciais dos usuários ou realizem operações maliciosas.

8. O que são Web Workers? Qual é o seu papel no navegador?

Resposta: Web Workers é uma API JavaScript fornecida pelo navegador para executar tarefas de computação demoradas em um thread em segundo plano para evitar o bloqueio do thread principal.

A função dos Web Workers é melhorar a capacidade de resposta do navegador para que a suavidade da interface do usuário não seja afetada ao realizar cálculos complexos ou processar grandes quantidades de dados.

Web Workers permitem o processamento paralelo delegando tarefas a threads em segundo plano, aproveitando ao máximo o poder dos processadores multi-core. Eles podem se comunicar com o thread principal, mas não podem acessar diretamente o DOM ou realizar operações relacionadas à UI.

9. Explique o que é cache do navegador (Browser Cache) e qual a sua função?

Resposta: O cache do navegador é onde o navegador armazena cópias de páginas da web e recursos localmente para que possam ser carregados rapidamente em visitas subsequentes. Sua função é reduzir o número de solicitações ao servidor e o volume de transmissão da rede, além de melhorar a velocidade de carregamento da página e a experiência do usuário.

O cache do navegador funciona salvando o recurso localmente na primeira solicitação e verificando as solicitações subsequentes para ver se o recurso já existe e não expirou. Se o recurso já existir e não tiver expirado, o navegador carregará o recurso diretamente do cache em vez de baixá-lo novamente do servidor.

10. O que é redirecionamento? Qual é o seu papel no navegador?

Resposta: Redirecionamento significa que quando o navegador solicita uma URL, o servidor retorna uma URL diferente, redirecionando assim a solicitação do navegador para a nova URL.

A função do redirecionamento no navegador é ir para a página, modificar o URL ou redirecionar o recurso. Ele pode ser usado em diversas situações, como manipulação de redirecionamento de links antigos, normalização de URLs, manipulação de autenticação de usuário, etc.

O redirecionamento é implementado definindo códigos de status específicos (como redirecionamento permanente 301, redirecionamento temporário 302) e campos de cabeçalho de local na resposta HTTP.

11. O que é armazenamento do navegador? Quais são os diferentes mecanismos de armazenamento que possui?

Resposta: O armazenamento do navegador é um mecanismo fornecido pelo navegador para armazenar dados no lado do cliente, usado para compartilhar dados entre diferentes páginas da web ou persistir dados.

O armazenamento do navegador possui os seguintes mecanismos de armazenamento diferentes:

Cookie: Um pequeno arquivo de texto que pode armazenar uma pequena quantidade de dados e é enviado automaticamente ao servidor a cada solicitação HTTP.
Armazenamento Web (localStorage e sessionStorage): pode armazenar grandes quantidades de dados no navegador na forma de pares chave-valor.
IndexedDB: um banco de dados avançado do lado do cliente que pode armazenar grandes quantidades de dados estruturados e oferece suporte a operações de indexação e transação.
API de cache: usada para armazenar em cache respostas a solicitações de rede para acesso offline ou para aumentar a velocidade de carregamento da página.
Diferentes mecanismos de armazenamento são adequados para diferentes necessidades, e os desenvolvedores podem escolher o método de armazenamento apropriado de acordo com situações específicas.

Olá, eu sou Feichen.
Bem-vindo a me seguir para obter recursos de aprendizagem front-end, compartilhamento diário de mudanças tecnológicas e regras de sobrevivência; especialistas e insights do setor.

Perguntas obrigatórias da entrevista inicial para 2023 Gold, Nine e Silver Ten! 2w palavras de qualidade!