Otimização JS para otimização de desempenho front-end

News 2023-09-06 01:01:57 views: null

Diretório de artigos

introdução

No mundo tecnológico atual, seja uma página web ou uma aplicação, o desenvolvimento front-end é sem dúvida crucial. Com o desenvolvimento da Internet, os usuários têm requisitos cada vez maiores quanto ao desempenho e velocidade de carregamento das páginas da web. Como desenvolvedores front-end, devemos nos esforçar para obter uma melhor otimização de desempenho. Entre eles, JavaScript é a linguagem central do desenvolvimento front-end e seu impacto no desempenho da página web não pode ser ignorado. Este artigo se concentrará na otimização do desempenho do JavaScript, por meio de uma série de técnicas e métodos, para ajudar os leitores a entender como otimizar o código JavaScript, de modo a melhorar a velocidade de carregamento e a experiência do usuário nas páginas da web. Quer você seja um desenvolvedor front-end que está apenas começando ou um veterano com experiência no setor, você pode aprender algumas habilidades práticas neste artigo.Espero que este artigo possa lhe fornecer alguma ajuda e inspiração. Vamos nos aprofundar no mistério da otimização de JavaScript para otimização de desempenho de front-end.

1. O navegador carrega o processo do arquivo js

O processo de carregamento de recursos do arquivo js pelo navegador pode ser dividido nas seguintes etapas:

  1. Iniciar uma solicitação : o navegador obtém o recurso do arquivo js do servidor enviando uma solicitação HTTP. Este processo envolve transmissão de rede e o atraso da rede pode ser uma sobrecarga relativamente grande.

  2. Receber resposta : Após receber a solicitação, o servidor retorna uma mensagem de resposta, que contém o conteúdo do arquivo js. O navegador analisará o cabeçalho da resposta e receberá o corpo da resposta. O tempo necessário para esse processo depende do tamanho do arquivo js e da velocidade de transmissão da rede.

  3. Análise de HTML : Quando o navegador recebe o arquivo js, ​​se houver uma referência ao arquivo na página HTML, o navegador irá pausar a análise do HTML e baixar e analisar o arquivo js o mais rápido possível. Neste momento, o navegador executará o mecanismo js para analisar e compilar o arquivo js. O tempo que esse processo leva depende do tamanho e da complexidade do arquivo js.

  4. Execute o código js : quando o arquivo js for analisado e compilado, o navegador executará o código js nele. A velocidade de execução do código js depende do desempenho do mecanismo js e da complexidade do código. Pode haver alguma sobrecarga de CPU ao executar o código js.

  5. Atualizar a página : se o código js manipular a estrutura DOM da página, o navegador renderizará novamente a página para refletir a atualização do DOM. O tempo necessário para uma operação DOM depende da complexidade da operação e do desempenho do navegador.

De modo geral, o processo de carregamento de arquivos js geralmente envolve vários estágios, como transmissão de rede, análise e compilação, execução e atualização de páginas , e a sobrecarga de cada estágio será afetada por diferentes fatores, incluindo tamanho do arquivo, velocidade da rede, complexidade do código, espera .

2. Comparação de js e imagens de carregamento do navegador

Quando o navegador carrega recursos JS e recursos de imagem do mesmo tamanho, geralmente leva mais tempo para carregar os recursos JS .

Isso ocorre porque existem vários estágios no processo de carregamento de recursos JS:

  1. Resolução DNS : O navegador obtém o endereço IP do servidor por meio da resolução de nomes de domínio e completa o posicionamento dos recursos.
  2. Estabelecer conexão : O navegador estabelece uma conexão TCP com o servidor, incluindo o processo de handshake de três vias.
  3. Enviar solicitação : o navegador envia uma solicitação GET ao servidor para solicitar recursos relacionados.
  4. Receber resposta : O servidor retorna uma resposta, dependendo da velocidade do servidor e das condições da rede, pode demorar um pouco.
  5. Baixar recurso : assim que a resposta for recebida, o navegador inicia o download do recurso JS.
  6. Análise e execução : após a conclusão do download, o navegador começa a analisar e executar o código JS.

Quanto ao processo de carregamento de recursos de imagem, é relativamente simples e inclui principalmente as seguintes etapas:

  1. Resolução DNS .
  2. Estabeleça uma conexão .
  3. Enviar solicitação .
  4. Receba a resposta .
  5. Baixe recursos .

Pode-se observar que o carregamento de recursos JS ainda precisa ser analisado e executado após a conclusão do download, enquanto os recursos de imagem não precisam ser analisados ​​​​e executados, portanto, relativamente falando, o carregamento de recursos JS demorado será mais .

De acordo com o ambiente de rede específico e a velocidade de resposta do servidor, a tabela a seguir é uma possível tabela de comparação demorada para diferentes estágios de carregamento:

estágio Recursos JS são demorados Recurso de imagem demorado
Resolução DNS 20ms 20ms
estabelecer conexão 30ms 30ms
enviar pedido 10ms 10ms
receber resposta 50ms 50ms
baixar recurso 100ms 100ms
analisar e executar 200ms -
tempo total gasto 410ms 210ms

Deve-se observar que os dados acima são apenas para referência e o consumo real de tempo será afetado por fatores como condições da rede, velocidade de resposta do servidor e mecanismo de cache.

3. A proporção de recursos js carregados pelo navegador em relação ao tempo total de carregamento de recursos

Em geral, o tempo necessário para o navegador carregar recursos JS ocupa uma grande parte do tempo necessário para carregar todos os recursos. Isso ocorre porque JavaScript é uma linguagem de script que precisa ser executada no lado do cliente e afetará diretamente a interação e a realização da função da página, portanto, será demorado carregar e executar recursos JS. Geralmente entre 10% e 30%

Por exemplo, suponha que um site real consista em uma página HTML, uma folha de estilo CSS e um arquivo JS. Durante o carregamento, o navegador prossegue na seguinte ordem:

  1. Primeiro, o navegador baixa a página HTML. Este processo é mais rápido porque há menos conteúdo HTML.

  2. Em seguida, o navegador analisa a página HTML e encontra referências às folhas de estilo CSS durante o processo de análise. O navegador começará a baixar o arquivo da folha de estilo CSS e o aplicará à página após a conclusão do download. Este processo é mais rápido que os recursos JS.

  3. Depois que o estilo CSS for carregado, o navegador continuará analisando a página HTML e encontrando a referência do arquivo JS. Neste ponto, o navegador começará a baixar o arquivo JS e executará a lógica do script JS após a conclusão do download. Como os arquivos JS geralmente contêm processamento lógico complexo, bem como possíveis operações assíncronas e solicitações de rede, o tempo de carregamento e execução do JS pode ser maior.

Resumindo, para um site, o tempo necessário para o navegador carregar os recursos JS representa grande parte do tempo necessário para carregar todos os recursos. Como o script JS desempenha um papel vital na página, envolvendo partes importantes como interação e realização de funções, leva muito tempo para carregar e executar. Em alguns sites complexos, os recursos JS podem até demorar mais para carregar do que outros recursos.

Deve-se notar que a situação específica da página também afetará a proporção de alocação de tempo de carregamento de cada recurso. Por exemplo, se o conteúdo principal de um site são imagens, o tempo de carregamento dos recursos de imagem pode ser maior, enquanto o tempo de carregamento dos recursos JS é relativamente curto. Portanto, essa proporção varia de site para site.。

4. Visão geral do princípio de compilação da v8

V8 é um JavaScriptmecanismo de código aberto, Googledesenvolvido pela V8, para execução JavaScriptde código. Just-In-Time Compilation，JITSeu princípio de compilação é baseado na tecnologia de compilação just-in-time ( ).

O processo de compilação do V8 pode ser dividido em três etapas: análise ( parsing), otimização ( optimization) e geração de código ( code generation).

  1. Fase de análise :
    Na fase de análise, o V8 analisa JavaScripto código em uma estrutura de dados chamada árvore de sintaxe abstrata ( Abstract Syntax Tree, AST). ASTÉ uma forma de representar o código em uma estrutura em árvore , e cada nó representa um componente do código, como variáveis, funções, expressões, etc. A fase de análise também constrói lexical scopeinformações sobre o escopo léxico ( ) para fases subsequentes de otimização.

  2. Fase de otimização :
    A fase de otimização é a parte central do motor V8 . V8 usa uma Just-In-Time Compilation，JITtécnica chamada compilação just-in-time ( ), que otimiza o código antes de ele ser executado. V8 analisa as características de execução do código, tentando identificar e inferir o tipo e comportamento do código. Com base nessas informações, o V8 realizará uma série de otimizações no código, como funções inline ( inlining), remoção de códigos inúteis ( dead code elimination), geração de códigos nativos ( native code generation), etc. Essas otimizações podem melhorar significativamente JavaScripta eficiência de execução do código.

  3. Fase de geração de código :
    Na fase de geração de código, o V8 converte o código otimizado em código de máquina para execução no sistema subjacente. O V8 adota uma Code Cachingtecnologia chamada execução de cache ( ), que armazena em cache o código compilado e pode ser usada diretamente em execuções subsequentes para evitar compilação repetida e melhorar o desempenho.

Deve-se notar que a otimização do V8 é baseada na compilação just-in-time, o que significa que o V8 otimiza dinamicamente durante a execução do código, em vez de pré-otimizar no estágio estático. Ao coletar características de execução de código em tempo de execução, o V8 pode ser otimizado para cenários de execução específicos, proporcionando assim maior velocidade de execução e menor uso de memória.

Resumindo, o princípio de compilação do V8 é JavaScriptconverter o código em uma árvore de sintaxe abstrata, otimizá-lo e, finalmente, gerar o código de máquina. Este projeto pode aproveitar ao máximo as vantagens da plataforma de hardware e fornecer um JavaScriptambiente de execução de alto desempenho.

5. Otimização de nível de código para melhorar a eficiência de compilação V8

1. Otimização de função

Para melhorar a eficiência de compilação do V8, ele pode ser otimizado nos seguintes aspectos:

1. Reduza o tamanho e a complexidade da função

O tamanho e a complexidade das funções têm impacto direto na eficiência de compilação do V8. Funções com código conciso, tamanho pequeno e menos camadas de chamada aninhadas podem reduzir o tempo de análise e geração de bytecode.

  1. Reduza o tamanho da função:

    • Remova código desnecessário : verifique a implementação da função e remova variáveis ​​não utilizadas, código redundante e fluxo de controle desnecessário.
    • Dividir funções grandes : Divida uma função grande em várias funções menores para que o compilador V8 possa processar cada função mais rapidamente.
    • Use funções inline : funções curtas inline para onde são chamadas para reduzir a sobrecarga das chamadas de função.

  2. Reduza a complexidade da função:

    • Reduza o aninhamento de loop : evite estruturas de loop aninhadas de vários níveis, que podem ser simplificadas usando algoritmos de recursão ou refatoração.
    • Extraia cálculos comuns : extraia cálculos repetidos para reduzir o tempo de execução de trabalhos repetidos.
    • Reduza as propriedades e métodos do objeto : tente simplificar e mesclar as propriedades e métodos do objeto para evitar complexidade desnecessária.

2. Evite usar recursos dinâmicos

Ao compilar, o V8 tentará ao máximo realizar a otimização inline, ou seja, substituir o local onde a função é chamada pelo código de implementação da função chamada, reduzindo assim a sobrecarga das chamadas de função. No entanto, se a função tiver características dinâmicas, como gerar funções dinamicamente por meio de eval() ou Function(), o V8 não poderá realizar a otimização in-line, resultando em eficiência de compilação reduzida.

Para melhorar a eficiência de compilação do V8, podemos reduzir o tempo de compilação evitando o uso de recursos dinâmicos. Os recursos dinâmicos referem-se ao uso de tipos dinâmicos, análise dinâmica de nomes de variáveis, ligação dinâmica, etc. Durante a compilação, o V8 não consegue resolver esses recursos dinâmicos antecipadamente, aumentando assim o tempo de compilação.

A seguir é apresentado um caso prático de aplicação para ilustrar como melhorar a eficiência de compilação do V8 evitando o uso de recursos dinâmicos.

Suponha que temos um aplicativo JavaScript que contém uma função dinâmica de concatenação de strings. A entrada desta função é uma matriz de objetos, e os nomes e valores das propriedades dos objetos podem ser dinâmicos. A função da função é concatenar os nomes e valores dos atributos na matriz de objetos em uma string e retorná-la.

function concatProperty(objArray) {
    
    
  let result = "";
  for (let obj of objArray) {
    
    
    for (let key in obj) {
    
    
      result += key + ": " + obj[key] + ", ";
    }
  }
  return result;
}

let objArray = [
  {
    
     name: "Alice", age: 25 },
  {
    
     name: "Bob", age: 30 },
  {
    
     name: "Charlie", age: 35 }
];

console.log(concatProperty(objArray));

Neste exemplo, usamos nomes e valores de propriedades dinâmicos, para que o V8 não possa determinar os tipos de nomes e valores de propriedades em tempo de compilação. Isso fará com que o V8 execute análise dinâmica e inferência de tipo em tempo de execução, o que afeta a velocidade de compilação.

Para melhorar a eficiência de compilação do V8, podemos usar algumas técnicas de otimização. Primeiro, podemos tentar evitar o uso de nomes e valores de propriedades dinâmicos. No exemplo acima, se soubermos que os tipos de nomes de atributos e valores de atributos são fixos, podemos usar nomes de atributos estáticos e valores de atributos em vez de obter dinamicamente nomes de atributos e valores de atributos de objetos. Desta forma, o V8 pode inferir o tipo do nome do atributo e o valor do atributo em tempo de compilação, reduzindo a análise dinâmica em tempo de execução.

O código modificado é o seguinte:

function concatProperty(objArray) {
    
    
  let result = "";
  for (let obj of objArray) {
    
    
    result += obj.name + ": " + obj.age + ", ";
  }
  return result;
}

let objArray = [
  {
    
     name: "Alice", age: 25 },
  {
    
     name: "Bob", age: 30 },
  {
    
     name: "Charlie", age: 35 }
];

console.log(concatProperty(objArray));

Ao evitar o uso de recursos dinâmicos, podemos melhorar a eficiência de compilação do V8, reduzir a análise dinâmica e a inferência de tipo em tempo de execução e, assim, acelerar a execução do código. Isto é especialmente importante para aplicações JavaScript grandes e complexas.

3. Evite eval() e declarações with

As instruções eval() e with causarão alterações na cadeia de escopo durante a fase de compilação, tornando difícil para o V8 realizar análise estática e otimização. Evite usar essas instruções tanto quanto possível para melhorar a eficiência da compilação.

  1. Evite usar eval(): A função eval() pode executar a string recebida como código JavaScript, mas isso fará com que o V8 não consiga compilar e otimizar antecipadamente, afetando assim o desempenho. Considere usar outras alternativas, como chamadas de função, instruções condicionais, etc., para evitar a execução dinâmica de código usando eval().

  2. Evite usar a instrução with: a instrução with cria um novo escopo e afeta os recursos de otimização do V8. Recomenda-se o uso de métodos convencionais de declaração e acesso de variáveis ​​para garantir a legibilidade e o desempenho do código.

A seguir está um caso de aplicação prática para ilustrar:

Considere o seguinte fragmento de código, que usa a função eval() e a instrução with para realizar acesso dinâmico a propriedades:

function getProperty(obj, prop) {
    
    
  with(obj) {
    
    
    return eval(prop);
  }
}

const obj = {
    
     foo: 10, bar: 20 };
const property = getProperty(obj, "foo");
console.log(property);

Para melhorar a eficiência da compilação, o código pode ser reescrito para evitar o uso de eval() e instruções with, como segue:

function getProperty(obj, prop) {
    
    
  return obj[prop];
}

const obj = {
    
     foo: 10, bar: 20 };
const property = getProperty(obj, "foo");
console.log(property);

Ao acessar diretamente as propriedades dos objetos sem usar eval() e com instruções, o V8 pode compilar e otimizar o código antecipadamente, melhorando assim o desempenho. Dessa forma também fica muito mais claro e fácil de entender.

4. Use o modo estrito

No modo estrito, o V8 pode realizar mais análises e otimizações estáticas, melhorando assim a eficiência da compilação. O modo estrito é habilitado com a diretiva "use strict".
O uso do modo estrito pode melhorar a eficiência de compilação do V8, principalmente porque o código no modo estrito é mais padronizado e conciso, eliminando algumas verificações e conversões desnecessárias, reduzindo assim a carga de trabalho do V8 e melhorando a velocidade de compilação.

A seguir é apresentado um caso de aplicação prática para ilustrar como melhorar a eficiência de compilação do V8 usando o modo estrito.

Suponha que temos um arquivo JavaScript com o seguinte conteúdo:

"use strict";

const name = "John";
let age = 30;

function sayHello() {
    
    
  console.log("Hello, " + name + "! You are " + age + " years old.");
}

sayHello();

No código acima, usamos o modo estrito (“use strict”), declaramos duas variáveis ​​nome e idade e definimos uma função sayHello para imprimir a saudação.

Comparado com o código no modo não estrito, o uso do modo estrito tem as seguintes vantagens:

  1. Identificação antecipada de erros: No modo estrito, variáveis ​​não declaradas não podem ser declaradas, caso contrário um ReferenceError será lançado. Isso permite que os desenvolvedores encontrem erros mais cedo no código e reduzam o tempo de depuração.

  2. Melhore a eficiência operacional: No modo estrito, o mecanismo JavaScript pode otimizar melhor o código. Por exemplo, a função eval e a instrução with são proibidas no modo estrito e esses recursos geralmente levam à degradação do desempenho. Ao desabilitar esses recursos, o mecanismo V8 pode compilar e otimizar com mais eficiência, aumentando a velocidade de execução.

Ao usar o modo estrito, o compilador V8 pode reduzir algumas verificações extras e operações de conversão durante a compilação, melhorando assim a velocidade de compilação. Embora neste caso o impacto do modo estrito no tempo de compilação possa não ser muito perceptível, para aplicativos grandes, o uso do modo estrito pode melhorar o desempenho geral.

5. Evite chamadas de função e fechamentos frequentes

Chamadas frequentes de função e o uso de fechamentos aumentam a sobrecarga de análise e geração de bytecode.
Para melhorar a eficiência de compilação do V8, evitando chamadas de função e fechamentos frequentes, os seguintes aspectos podem ser considerados:

  1. Reduza chamadas de função: evite chamadas de função em corpos de loop e blocos de código executados com frequência. Incorpore a lógica das funções que precisam ser chamadas com frequência no site de chamada para reduzir a sobrecarga das chamadas de função.

  2. Evite criar encerramentos: Tente evitar a criação de funções anônimas ou encerramentos em corpos de loop e blocos de código executados com frequência. A criação de encerramentos causará alocação adicional de memória e sobrecarga de coleta de lixo, afetando o desempenho.

A seguir está um caso de aplicação prático para mostrar como melhorar a eficiência de compilação do V8, evitando chamadas de função e fechamentos frequentes.

Suponha que haja um array arr, todos os elementos nele precisam ser elevados ao quadrado e os resultados quadrados são acumulados. Uma implementação tradicional pode usar uma map()função e uma reduce()função para fazer isso:

const arr = [1, 2, 3, 4, 5];

const squaredSum = arr
  .map((n) => n * n)
  .reduce((sum, n) => sum + n, 0);

console.log(squaredSum);

No código acima, map()as reduce()funções e são frequentemente chamadas e map()fechamentos são usados ​​nas funções, o que levará à perda de desempenho.

map()Para melhorar o desempenho, a lógica das funções de soma pode ser reduce()incorporada no local da chamada e os fechamentos podem ser evitados. O método específico é o seguinte:

const arr = [1, 2, 3, 4, 5];

let squaredSum = 0;
for (let i = 0; i < arr.length; i++) {
    
    
  const n = arr[i];
  squaredSum += n * n;
}

console.log(squaredSum);

No código acima, usamos um forloop em vez da map()função sum reduce(). Através dessas melhorias, evitam-se chamadas de função frequentes e criação de encerramentos, e a eficiência de compilação do V8 é melhorada.

Deve-se notar que o método acima é apenas um exemplo simples, e métodos de otimização específicos devem ser selecionados e aplicados de acordo com as necessidades reais e cenários de aplicação. Você também pode usar as ferramentas e métodos fornecidos pela V8, como analisar --trace-opta otimização da V8 para otimizar o desempenho do código JavaScript.

6. Use informações de tipo suficientes

V8 suporta compilação JIT (Just-In-Time), que pode ser compilada dinamicamente de acordo com as informações de tipo em tempo de execução. Em locais como parâmetros de função e valores de retorno, tente usar tipos específicos em vez de tipos genéricos, o que pode melhorar a eficiência da compilação.

Ao fornecer informações de tipo suficientes para V8, sua eficiência de compilação pode ser melhorada. Isso ocorre porque o V8 é um mecanismo JavaScript baseado em um compilador JIT (Just-in-Time), que compila o código JavaScript em um código de máquina eficiente em tempo de execução. As informações de tipo ajudam o V8 a tomar decisões de compilação mais precisas e otimizar o código de máquina gerado.

Um caso prático de aplicação é usar TypedArray para lidar com um grande número de cálculos numéricos. TypedArray é um tipo de array especial em JavaScript que nos permite manipular diretamente dados binários na memória para obter cálculos numéricos de alto desempenho.

Suponha que temos uma aplicação que precisa realizar algumas operações numéricas em um array de um milhão de elementos, como soma, média, etc. Podemos usar TypedArray para definir o tipo deste array e informar ao V8 sobre as informações de tipo de cada elemento.

Aqui está um exemplo de código usando TypedArray:

// 创建一个包含一百万个元素的Float64Array
const array = new Float64Array(1000000);

// 填充数组
for (let i = 0; i < 1000000; i++) {
    
    
  array[i] = Math.random();
}

// 计算数组的总和
let sum = 0;
for (let i = 0; i < 1000000; i++) {
    
    
  sum += array[i];
}

console.log(sum);

Neste exemplo, usamos o tipo Float64Array para definir o tipo do array, informando ao V8 que o array contém números de ponto flutuante de 64 bits. Ao fornecer informações de tipo, o V8 pode otimizar o código em tempo de compilação e gerar código de máquina mais eficiente.

Resumindo, ao usar informações de tipo suficientes, como TypedArray para definir o tipo de variável, pode ajudar o V8 a tomar decisões de compilação mais precisas e gerar código de máquina mais eficiente, melhorando assim a eficiência de compilação do V8.

Em resumo, a compilação V8 pode ser melhorada otimizando o tamanho e a complexidade da função, evitando recursos dinâmicos, evitando eval() e instruções with, usando o modo estrito, evitando chamadas e fechamentos de função frequentes e usando eficiência suficiente de informações de tipo.

2. Otimização de objetos

V8 é um mecanismo JavaScript de alto desempenho que compila código JavaScript em código de máquina para execução. Na V8, a operação de adição, exclusão, modificação e consulta de objetos envolverá operações como acesso a atributos de objetos, inserção ou exclusão de atributos e modificação de atributos.

V8 usa mecanismos como classe oculta (Classe Oculta) e cache embutido (Cache Inline) para melhorar a eficiência de acesso aos objetos. Uma classe oculta é um mecanismo de ligação em tempo de compilação para propriedades de objetos e valores correspondentes, que é usado para rastrear a forma e o layout de propriedades do objeto. Quando as propriedades do objeto mudam, ele julgará se a classe oculta precisa ser atualizada de acordo com as informações da classe oculta, reduzindo assim o custo de modificação da propriedade do objeto. O cache embutido é um mecanismo de cache usado para armazenar em cache os caminhos de acesso dos atributos. Através do cache inline, o V8 pode reduzir o custo de pesquisa de acesso a atributos e acelerar o acesso.

Para melhorar a eficiência de compilação do V8, podemos seguir os seguintes pontos:

  1. Evite inserção ou exclusão frequente de atributos: A modificação frequente dos atributos do objeto causará alterações nas classes ocultas e afetará o desempenho. Se precisar modificar atributos com frequência, você pode considerar o uso de estruturas de dados, como matrizes, ou encapsular atributos em variáveis ​​internas.

  2. Evite usar nomes de propriedades dinâmicas: O uso de nomes de propriedades dinâmicas torna difícil para o V8 otimizar o acesso a objetos. Se forem necessários nomes de propriedades dinâmicas, considere armazenar as propriedades em um objeto Map.

  3. Evite acesso frequente às propriedades: acessar frequentemente as propriedades de um objeto também pode afetar o desempenho. Se uma propriedade for acessada com frequência, ela poderá ser armazenada em uma variável local para reduzir o custo de pesquisas de propriedades.

  4. Evite modificar o mesmo atributo diversas vezes: Modificar o mesmo atributo diversas vezes resultará em diversas alterações de classe ocultas e afetará o desempenho. Se precisar modificar atributos diversas vezes, você poderá combinar operações de modificação em uma única modificação.

Aqui está um exemplo simples para ilustrar:

// 不推荐的写法
function updateObject(obj, prop, value) {
    
    
  if (!obj.hasOwnProperty(prop)) {
    
    
    obj[prop] = value;
  } else {
    
    
    obj[prop] += value;
  }
}

// 推荐的写法
function updateObject(obj, prop, value) {
    
    
  const oldValue = obj[prop] || 0;
  obj[prop] = oldValue + value;
}

Na forma de escrita não recomendada, toda vez que você modifica o atributo de um objeto, você precisa primeiro determinar se o atributo existe e, em seguida, executar a operação correspondente, o que levará ao acesso e modificação freqüentes do atributo. No método de escrita recomendado, primeiro armazenamos o valor do atributo em uma variável local e depois o modificamos, evitando o custo de acesso e modificação de múltiplos atributos, melhorando assim a eficiência de compilação da V8.

Em uma palavra, a eficiência de compilação do V8 pode ser melhorada manipulando racionalmente os atributos dos objetos e evitando operações frequentes de atributos.

Resumir

Na otimização do desempenho front-end, a otimização do código JavaScript é uma parte muito importante. A escrita de código razoável, o desenvolvimento modular, o carregamento assíncrono, a compactação e o cache podem efetivamente melhorar a velocidade de resposta da página e a experiência do usuário. Precisamos prestar atenção a indicadores como tamanho do arquivo JavaScript, tempo de execução e número de solicitações na página, e otimizá-los de maneira direcionada. Ao mesmo tempo, também é necessário prestar atenção à experiência do usuário e à manutenção do código, de modo a melhorar o desempenho sem afetar a expansão e manutenção do código. Espero que este artigo possa ajudar os leitores a entender e aplicar melhor os métodos de otimização de JavaScript e a melhorar seu nível técnico de front-end.

Acho que você gosta

Origin blog.csdn.net/jieyucx/article/details/132489433
Recomendado
Clasificación
Diario
Más
2024-06-02(0)
2024-06-01(0)
2024-05-31(0)
2024-05-30(0)
2024-05-29(0)
2024-05-28(0)
2024-05-27(0)
2024-05-26(0)
2024-05-25(0)
2024-05-24(11)

Code World

© 2018 codetd.com