Otimização de performance

1. Para o pessoal de front-end

2. Mainstream, para Chrome,

3. Diversos, resumo

Otimização: md

A função e composição do navegador

Rede: o navegador baixa vários recursos por meio do módulo de rede, como texto html; código javascript; folha de estilo; imagens; arquivos de áudio e vídeo, etc. A parte da rede é particularmente importante porque leva muito tempo e requer acesso seguro aos recursos da Internet.

Gerenciamento de recursos: Os recursos baixados da rede ou obtidos localmente precisam ter um mecanismo eficiente para gerenciá-los. Por exemplo, como evitar downloads repetidos, como armazenar recursos em cache, etc.

Navegação na Web: Esta é a função central e mais básica do navegador, a função mais importante. Como transformar recursos em resultados visuais.

Gerenciamento de várias páginas:

Plug-in e gerenciamento:

Sincronização de conta

Mecanismo de Segurança

Ferramentas de desenvolvimento

…

O kernel do navegador (motor de renderização)

Este é um dos módulos mais importantes do navegador, cuja função principal é transformar todos os recursos solicitados em imagens visuais.
Este módulo é o kernel do navegador, geralmente também chamado de mecanismo de renderização.
Resumo do kernel do navegador:

IE ----------> Tridente

Safari ------> WebKit O
próprio WebKit é composto principalmente de dois pequenos motores,
um é o motor de renderização "WebCore" e o
outro é o motor de interpretação javascript "JSCore",
ambos derivados do motor de renderização KHTML do KDE E o motor de interpretação de javascript KJS é derivado.

Chrome ------> WebKit branch engine -----> Blink
em 13 anos lançou a versão do Chrome 28.0.1469.0 start, Chrome abandona as revoluções do motor Chromium
e usa o motor Blink mais recente (baseado no WebKit2 da Apple-- O novo O motor WebKit foi lançado em 2010.
Comparado com o motor da geração anterior , o Blink simplifica o código, melhora a estrutura DOM e também melhora a segurança.

A
versão antiga do Opera do Opera 4 a 6 versões: mecanismo de composição Elektra
Opera7.0: mecanismo de renderização Presto O
Opera anunciou em fevereiro de 2013 que abandonaria o Presto:
usar o mecanismo Chromium;
ele foi convertido para o mecanismo Blink;

Firefox ------> Gecko

Processo e discussão

Processo: depois que um programa é executado, ele ocupa um espaço de memória exclusivo e é a unidade básica de execução do sistema operacional.

Há pelo menos um thread em execução em um processo: o thread principal, que é criado automaticamente após o processo ser iniciado.

Um processo também pode executar vários threads, dizemos que o programa está sendo executado em vários threads.

Os dados em um processo podem ser compartilhados por vários threads, e os dados entre vários processos não podem ser compartilhados.

Thread: É uma unidade de execução independente dentro de um processo e é a menor unidade de escalonamento da CPU. A unidade básica de operação do programa.

Pool de threads: Um contêiner que contém vários objetos de thread para realizar o uso repetido de objetos de thread.

O mecanismo JS é executado em um único encadeamento!

Navegadores modernos: modelo multiprocessos e multithread

1. Passado insuportável:
quando você abre muitas páginas pelo navegador, se uma das páginas parar de responder ou travar,
mais coisas infelizes se seguirão, e todas as páginas que você abrir receberão. Se não houver resposta, o
mais insuportável é que algumas das páginas também podem conter informações não salvas ou não enviadas

2. Como os fabricantes de navegadores resolvem isso?
Usando um modelo de vários processos, o modelo pode trazer benefícios
①. Evite a estabilidade de todo o navegador devido à falta de resposta ou travamento de uma única página
②. Quando um plug-in de terceiros falha, isso não afetará a estabilidade do navegador inteiro
③ .Segurança

3. Quais são os processos do navegador
①. Processo do
navegador : o processo principal do navegador, responsável pela exibição da interface do navegador, e pelo gerenciamento de cada página,
ancestral de todos os outros tipos de processos no navegador, responsável por a criação e destruição de outros processos
Tem um e apenas um !!!
②. Processo de
renderização : processo de renderização da página web, responsável pela renderização da página, pode haver vários,
claro, o número de processos de renderização não é necessariamente igual ao número de páginas da web que você abre
③. Vários processos de plug-in
④ processo de GPU
Os navegadores de dispositivos móveis podem ser diferentes: o
Android não oferece suporte a plug-ins, portanto, não há processo de plug-in. A
GPU evoluiu para um thread do processo do navegador. O
processo de renderização evoluiu para um processo de serviço do sistema operacional, que ainda é independente.

4. Existem muitos threads dentro de cada processo
. O objetivo do multithreading é manter a interface do usuário altamente responsiva.
Por exemplo: para evitar que o thread da interface do usuário do processo do navegador seja afetado por outras operações demoradas (carregamento de grandes arquivos, leitura e gravação de arquivos locais) Bloqueio,
então colocamos essas operações na sub-thread para lidar com elas.
No processo de renderização, a fim de não permitir que outras operações bloqueiem a execução em alta velocidade do thread de renderização, geralmente [pipeline] o processo de renderização,
usando as vantagens de múltiplos núcleos do computador para permitir que diferentes estágios de renderização sejam executados em threads diferentes (o thread de renderização não pode diminuir)

Motor de renderização do navegador

Módulo principal

Um mecanismo de renderização inclui principalmente: analisador HTML, analisador CSS, mecanismo javascript, módulo de layout, módulo de desenho
- Analisador de HTML: um analisador que interpreta documentos HTML. Sua função principal é interpretar o texto HTML em uma árvore DOM.
- Analisador CSS: sua função é calcular informações de estilo para cada objeto de elemento no DOM e fornecer infraestrutura para layout
- Mecanismo Javascript: Use o código Javascript para modificar o conteúdo da página da web e também modificar as informações de css. O mecanismo de javascript pode interpretar o código javascript e modificar o conteúdo e as informações de estilo da página da web por meio da interface DOM e da interface de árvore CSS, alterando assim o resultado da renderização.
- Layout (layout): Depois que o DOM é criado, o Webkit precisa combinar as mesmas informações de tipo dos objetos de elemento nele, calcular seu tamanho e posição e outras informações de layout, para formar um modelo de representação interno que possa expressar todas essas informações
- Módulo de desenho (pintura): use a biblioteca de gráficos para desenhar os nós de cada página da web após o cálculo do layout em resultados de imagem
Observações: Document Object Model (DOM)

Processo de renderização aproximada

Todo o processo do navegador renderizando a página: o navegador analisará o documento de cima para baixo.
1. Ao encontrar tags HTML , chame a fonte do analisador HTML para analisar os tokens correspondentes (um token é a serialização de um texto de rótulo) e construir uma árvore DOM (ou seja, um pedaço de memória, que armazena tokens e estabelece a relação entre eles) .
2. Quando a tag style / link é encontrada, o analisador correspondente é chamado para processar a tag CSS e construir uma árvore de estilo CSS .
3. Ao encontrar tags de script , chame o mecanismo de javascript para processar tags de script, vincular eventos, modificar árvore DOM / árvore CSS, etc.
4. Combine a árvore DOM e a árvore CSS em uma árvore de renderização .
5. Renderize de acordo com a árvore de renderização para calcular as informações geométricas de cada nó (esse processo precisa depender da GPU).
6. Finalmente, cada nó é desenhado na tela.

Os módulos acima contam com muitos outros módulos básicos, incluindo decodificador de vídeo e áudio de imagem 2D / 3D de armazenamento em rede e decodificador de imagem.
Portanto, o mecanismo de renderização também incluirá como usar esses módulos dependentes.

Dois, bloqueando a renderização

1. Sobre o bloqueio de CSS:

Aviso de isenção de responsabilidade: somente CSS externo introduzido por link pode causar bloqueio.
1. O estilo na tag de estilo :
(1). É analisado pelo analisador html;
(2). Não bloqueia a renderização do navegador (pode produzir "fenômeno de tela flash");
(3). Não bloqueia a análise DOM;

2. Estilo css externo introduzido por link (método recomendado) :
(1) É analisado pelo analisador CSS. Análise síncrona
(2) .Bloque a renderização do navegador (este bloqueio pode ser usado para evitar o "fenômeno da tela flash").
(3). Bloqueie a execução das seguintes instruções js (JS e CSS podem ser estilizados)
(4). Não bloqueie a análise de DOM (como a maioria dos navegadores funciona):

3. Otimize o conceito principal: melhore a velocidade de carregamento de css externo o mais rápido possível
(1). Use nós CDN para acelerar recursos externos.
(2) Comprimir css (usando ferramentas de empacotamento, como webpack, gulp, etc.).
(3) .Reduzir o número de solicitações http e mesclar vários arquivos css.
(4). Otimize o código da folha de estilo

2. Sobre o bloqueio de js:

1. Bloquear a análise subsequente do DOM :
Motivo: o navegador não conhece o conteúdo do script subsequente. Se o DOM a seguir for analisado primeiro e o js subsequente excluir todos os DOM subsequentes,
o navegador fará um trabalho inútil, navegando no O navegador não pode prever quais operações específicas são feitas no script. Por exemplo, operações como document.write
simplesmente param. Depois que o script é executado, o navegador continua a analisar o DOM para baixo.
2. Bloquear a renderização da página :
Motivo: JS também pode definir estilos para o DOM, o navegador aguarda a execução do script e renderiza um resultado final, evitando trabalhos inúteis.
3. bloquear a implementação do js de acompanhamento :
motivos: para manter dependências, tais como: a introdução de jQuery deve ser reintroduzida bootstrap

3. Observações

[Nota 1]: A análise CSS e a execução de js são mutuamente exclusivas (mutuamente exclusivas), js para a execução quando css é analisado e css para de analisar quando js é executado.

[Nota 2]: Se bloquear css, js ou bloqueado, não obstruirá o navegador para carregar recursos externos (imagens, vídeo, estilo, script, etc.)
motivos: sempre em um navegador: "Coloque a solicitação feita para" funcionar Modo, desde que envolva o conteúdo do pedido de rede,
seja: imagens, estilos, scripts, primeiro enviará um pedido de obtenção de recursos, já quando os recursos são utilizados localmente, o
próprio navegador coordena. Essa abordagem é muito eficiente.

[Nota 3]: Tanto o WebKit quanto o Firefox realizaram a otimização [pré-análise]. Ao executar o script js, outras threads do navegador farão uma pré-análise do restante do documento, localizarão e carregarão outros recursos que precisam ser carregados na rede. Desta forma, os recursos podem ser carregados em conexões paralelas,
aumentando assim a velocidade geral. Observe que o pré-analisador não modifica a árvore DOM

No processo acima, os eventos "DOMContentLoaded" e "onload" serão acionados durante o carregamento e renderização da página da web
, respectivamente, depois que a árvore DOM for construída (analisada) e depois que a árvore DOM for construída e os recursos que a página da web depende são carregados.

O processo acima é um processo de renderização completo, mas muitas páginas da web modernas são dinâmicas, o que significa que depois que a renderização é concluída, o
navegador executa repetidamente o processo de renderização devido à animação da página da web ou à interação do usuário . (Redesenhar e reorganizar). Os números acima indicam a ordem básica, que não é estritamente consistente.
Esse processo pode ser repetido ou cruzado.

Navegadores diferentes têm analisadores CSS diferentes.

O navegador encontra o servidor para algo

Resposta de recepção: o "cabeçalho de resposta" dos dados recebidos, o código de status

Receber dados: os dados reais estão sendo transmitidos.

Renderização de estilo

Análise assíncrona: sem bloqueio. (Mais eficiente) -callback

Análise síncrona: bloqueio.

1. O estilo na tag Style é analisado pelo analisador HTML.

2. O estilo interno escrito na tag de estilo de página é analisado de forma assíncrona (sujeito ao fenômeno de tela flash)

3. O navegador carrega recursos [assíncrono]

Vincular renderização CSS externa

O acesso do navegador aos recursos é assíncrono.

1. Os estilos em que o link vem são analisados por parse Stylesheet (CSS) e são analisados de forma síncrona.

2. O analisador css bloqueará a renderização da página. (O estilo externo em que o link vem bloqueará a renderização da página e evitará a tela inicial)

3. Recomenda-se o uso de link

Camadas CSS

Layout: Layout ---- Disposição --------- Reorganização (rearranjo / refluxo)

Pintura: desenho ---- desenho -------- repintura (repintura)

Quando o navegador renderiza uma página, ele a divide em várias camadas, com camadas grandes e pequenas, e cada camada tem um ou mais nós.

Condições para a criação de camadas

O navegador Chrome criará uma camada quando qualquer uma das seguintes condições for atendida:

Possui propriedades CSS com transformações 3D (translateZ)
Use o nó de decodificação de vídeo acelerado ------ com tag de vídeo
Existem nós
Nós de animação CSS3
Elementos com atributos de aceleração CSS (mudará mudará)

Ao renderizar o DOM, o que o navegador faz é, na verdade:

	1. 获取DOM后分割为多个图层
    	2. 对每个图层的节点计算样式结果		（Recalculate style--样式重计算）
        3. <font color=red>为每个节点生成图形和位置	</font>		（Layout--布局，重排,回流）
        4. <font color=red>将每个节点绘制填充到图层位图中	</font>	（Paint--重绘）
        5. <font color=red>图层作为纹理上传至GPU</font>
        6. 组合多个图层到页面上生成最终屏幕图像	（Composite Layers--图层重组）

Repintar

Redesenhar é um comportamento do navegador acionado por uma mudança na aparência de um elemento, como a alteração de atributos como contorno e cor de fundo. O navegador será redesenhado de acordo com os novos atributos do
elemento para dar ao elemento uma nova aparência. O redesenho não acarreta um novo layout, portanto não necessariamente acompanha o redesenho.

Deve-se observar que o redesenho e o rearranjo são todos baseados na camada. Se um elemento da camada precisar ser redesenhado, toda a camada precisará ser redesenhada.
Portanto, para melhorar o desempenho, devemos permitir que essas "coisas que mudam" tenham suas próprias camadas,
mas, felizmente, a maioria dos navegadores criará automaticamente camadas para nós de animação CSS3.

Reorganização (refluxo também conhecido como: refluxo)

Quando o objeto de renderização é criado e adicionado à árvore de renderização, ele não contém informações de posição e tamanho. O processo de cálculo desses valores é chamado de layout ou rearranjo

"Redesenhar" não requer necessariamente "rearranjo". Por exemplo, alterar a cor de um elemento de página da web acionará apenas o "redesenho" e não o "rearranjo" porque o layout não mudou.
"Refluir" levará a "redesenhar" na maioria dos casos. Por exemplo, alterar a posição de um elemento de página da web acionará "refluxo" e "redesenhar" porque o layout muda.

O atributo que aciona o redesenho

cor * fundo * cor de contorno
estilo rder * imagem de fundo * contorno
- border-radius * background-position * contorno-style
  sibility * background-repeat * outline-width
  - text-decoration * background-size * box-shadow

Atributos que acionam o rearranjo (refluxo)

largura * superior * alinhamento do texto
ight * inferior * overflow-y
- padding * left * font-weight
  rgin * right * overflow
  - display * position * font-family
    rder-width * float * line-height
    - borda * limpar * vertival-align
      n-height * white-space

(Chave) Operações de rearranjo comuns

O custo de Refundir (reorganizar) é muito maior do que o custo de Redesenhar (redesenhar).
O refluxo de um nó provavelmente levará ao refluxo do nó filho, ou mesmo do nó pai e dos nós do mesmo nível.
Pode não ser muito em alguns computadores de alto desempenho, mas se o Reflow acontecer em um telefone celular, o processo será muito doloroso e consumirá energia.
(Jogos desenvolvidos com H5 geram calor no terminal móvel e consomem muita energia)

Portanto, as ações a seguir provavelmente serão relativamente caras.
1. Ao adicionar, excluir ou modificar nós DOM, isso causará refluxo e redesenho.
2. Quando você move a posição do DOM
3. Quando você modifica o estilo CSS.
4. Quando você redimensiona a janela (amplia e reduz a janela) (o terminal móvel não tem esse problema, porque o zoom do terminal móvel não afeta a janela de visualização do layout)
5. Quando você modifica a fonte padrão da web página.
[Ao obter alguns atributos (largura, altura ...)! ! ! ! ! 】
Observação: display: none (oculto não ocupado) acionará o refluxo, e a visibilidade: oculto (oculto ocupado) somente acionará o redesenho, pois não há mudança de posição.

Esquema otimizado para redesenhar e reorganizar

Sabemos que o navegador passou pelas seguintes etapas "detalhadas" ao renderizar a página:

	1. 计算需要被加载到节点上的样式结果（Recalculate style--样式重计算）*
	2. 为每个节点生成图形和位置（Layout--重排或回流）
	3. 将每个节点填充到图层中（Paint--重绘）
	4. 组合图层到页面上（Composite Layers--图层重组）
   如果我们需要提升性能，需要做的就是减少浏览器在运行时所需要做的工作，即：尽量减少1234步。

[O esquema de otimização específico é o seguinte]:
1. Tente usar a transformação CSS3 para substituir o canto superior esquerdo e outras operações ao transformar a posição do elemento. As alterações de transformação
e opacidade afetam apenas a combinação de camadas

2. Use opacidade ao invés de visibilidade] (1) O uso de visibilidade não aciona o rearranjo, mas ainda assim redesenha. (2) usando diretamente uma opacidade que é acionada, redesenhar e acionar o rearranjo (GPU projetada desde o início!) (. 3). Camada de opacidade com o uso, ou seja, não aciona o gatilho, não redesenha o rearranjo . (opacidade com a vai-mudar) Motivo: Ao alterar a transparência, antes de simplesmente reduzir GPU quando a pintura já estava com bons valores de textura alfa para alcançar o efeito desejado, não precisamos de um redesenho inteiro. Mas essa premissa é que a opacidade é modificada em si deve ser uma camada. 3. [Não use o layout da tabela] tabela-célula 4. Combine [várias operações de alterar os atributos de estilo em um] operação Não modifique o estilo do DOM um por um, defina a classe com antecedência e, em seguida, modifique o className do DOM 5. [Modifique o DOM após offline ()] Como o elemento cujo atributo de exibição é none não está na árvore de renderização, as operações em elementos ocultos não farão com que outros elementos sejam reorganizados. Se desejar realizar operações complexas em um elemento, você pode ocultá-lo primeiro e, em seguida, exibi-lo após a conclusão da operação. Isso só aciona 2 rearranjos quando oculto e exibido. 6. [Usando fragmento de documento] (documentFragment) ------ O Vue usa esse método para melhorar o desempenho.

7. [Não coloque os valores de atributo de certos nós DOM em um loop como uma variável de loop]
Quando você solicitar algumas informações de estilo do navegador, o navegador irá esvaziar a fila, como:

1.offsetTop, offsetLeft, offsetWidth, offsetHeight

2.scrollTop / Left / Width / Height

3.clientTop / Left / Width / Height

4.width, height
Quando você solicita alguns dos atributos acima, o navegador precisa atualizar a fila interna para fornecer o valor mais preciso,
porque pode haver operações na fila que afetam esses valores. Mesmo se você obtiver as informações de layout e estilo de um elemento que não tem nada a ver com as informações de layout que ocorreram ou alteraram recentemente, o navegador forçará a atualização da fila de renderização.
8. No processo de implementação de animação, habilite a aceleração de hardware da GPU: transform: tranlateZ (0)
9. Crie uma nova camada para elementos de animação para aumentar o índice z de elementos de animação
10. Ao escrever animações, tente usar o seguinte APIrequestAnimationFrame ---- solicitar quadro de animação

requestAnimationFrame ---- solicitar quadro de animação

1.window.requestAnimationFrame ()
Descrição: Este método dirá ao navegador para chamar a função que você especificar antes do próximo redesenho e reorganização
. 1. Parâmetros: Este método usa uma função de retorno de chamada como um parâmetro, e esta função de retorno de chamada estará no navegador da próxima vez Chamado antes de redesenhar.
A função de retorno de chamada será passada automaticamente em um parâmetro, DOMHighResTimeStamp, que identifica a hora atual quando requestAnimationFrame () começa a acionar a função de retorno de chamada

2. Valor de retorno:
Um inteiro longo, ID de solicitação, que é o único identificador na lista de retorno de chamada. É um valor diferente de zero e não tem outro significado. Você pode passar esse valor para window.cancelAnimationFrame () para cancelar a função de retorno de chamada. Nota: Se você deseja continuar a atualizar a próxima animação de quadro antes do próximo navegador de redesenho, a função de retorno de chamada em si deve ser chamada novamente window.requestAnimationFrame ()

2. window.cancelAnimationFrame (requestID)
cancela uma solicitação de quadro de animação previamente adicionada ao plano chamando o método window.requestAnimationFrame ().
requestID é o valor retornado quando o método window.requestAnimationFrame () é chamado anteriormente. É um identificador de tempo e seu uso é semelhante ao id de um cronômetro.

CDN

CDN rápido

[Falha na transferência da imagem do link externo. O site de origem pode ter um mecanismo de link anti-leech. Recomenda-se salvar a imagem e carregá-la diretamente (img-Guch56JJ-1604846375736) (F: \ WEB \ WEB \ 009-git, svn , modularização, otimização \ 009 -git, svn, modularização, otimização \ otimização de desempenho_stu \ icon \ 01_web front-end e back-end global icon.png)]

O que é CDN? Como funciona?

O site geralmente coloca todos os seus servidores no mesmo lugar. Quando a base de usuários aumenta, a empresa deve implantar conteúdo em vários servidores geograficamente diferentes.
Para encurtar o tempo de solicitações http, devemos colocar um grande número de recursos estáticos. Get mais perto do usuário.

Content Delivery Networks CDN (Content Delivery Networks)
CDN é um grupo de servidores da web distribuídos em muitas localizações geográficas diferentes, usados para distribuir conteúdo aos usuários de forma mais eficaz

A ideia básica:
tentar evitar gargalos e links na Internet que possam afetar a velocidade e a estabilidade da transmissão de dados, para que a transmissão do conteúdo seja mais rápida e estável.
Ao colocar servidores de nó em vários locais da rede constituídos por uma camada de rede virtual inteligente com base na Internet existente, o
sistema CDN pode ser baseado no tráfego de rede e na conexão de cada nó, status de carga, distância aos usuários e tempo de resposta em tempo real Essas informações abrangentes
redirecionam a solicitação do usuário para o nó de serviço mais próximo do usuário.

Infraestrutura: A rede CDN mais simples consiste em um servidor DNS e vários servidores cache
1. A url inserida pelo usuário será "traduzida" para o endereço ip correspondente através da resolução DNS, de forma a encontrar o servidor dedicado CDN.
2. O CDN "obtém" o endereço IP do usuário e, em seguida, coopera com o dispositivo de balanceamento de carga regional para selecionar um dispositivo de balanceamento de carga regional na área à qual o usuário pertence e diz ao usuário para iniciar uma solicitação para esse dispositivo.
3. A "escolha" se baseia nas etapas acima
(1). A base para a seleção inclui: julgar qual servidor está mais próximo do usuário de acordo com o endereço IP do usuário;
(2) julgar de acordo com o nome do conteúdo carregado no URL solicitado pelo usuário Qual servidor possui o conteúdo requerido pelo usuário;
(3) Consultar a situação atual de carga de cada servidor e determinar qual servidor ainda possui a capacidade de atendimento.

Otimização de desempenho de front end da WEB