Conecte-se
Fazer login

Galeria de mapas mentais Otimização de desempenho de link completo de front-end e otimização de processo de desenvolvimento de PD

Otimização de desempenho de link completo de front-end e otimização de processo de desenvolvimento de PD

Otimização de desempenho de link completo de front-end: otimização do processo de P

Editado em 2021-01-01 19:46:28

WSysQn6v

Trabalhos recentes Ver mais trabalhos>>

moléculas que compõem as células
A segunda unidade do Curso Obrigatório de Biologia resumiu e organizou os pontos de conhecimento, abrangendo todos os conteúdos básicos, o que é muito conveniente para todos aprenderem. Adequado para revisão e visualização de exames para melhorar a eficiência do aprendizado. Apresse-se e colete-o para aprender juntos!
Cambridge IGCS Chemistry Coursebook 2023 Capítulo 16 Resumo dos pontos de conhecimento
Este é um mapa mental sobre Extração e corrosão de mim. O conteúdo principal inclui: Corrosão de metais, Extração de metais e a série de reatividade.
Cambridge IGCS Chemistry Coursebook 2023 Capítulo 15 Resumo dos pontos de conhecimento
Este é um mapa mental sobre Reatividade de metais. O conteúdo principal inclui: Reações de deslocamento de metais, A série de reatividade de metais.

Otimização de desempenho de link completo de front-end e otimização de processo de desenvolvimento de PD

WSysQn6v

Trabalhos recentes Ver mais trabalhos>>

Recomendado para você
Descrição

Enciclopédia de processamento SQL lento
- 4
WSb6eYgD

Otimização de desempenho de link completo de front-end e otimização de processo de desenvolvimento de P&D

4. HTTP: Como reduzir o número de solicitações HTTP?

Sprites CSS

As imagens usam DataURL, Web Font

Mesclagem de arquivos JS/CSS

Combinação de solicitação JS/CSS

Mesclagem de interfaces

Armazenamento de interface LocalStorage

Armazenamento de recursos estáticos LocalStorage

5. Cookies: estratégias e benefícios da redução do tamanho dos cookies

Estratégia

Definir lista de permissões na página inicial do site principal

Exclua periodicamente cookies não permitidos

beneficiar

Reduza o tamanho da transferência entre páginas

Gerencie cookies de forma eficaz

6. Servidor

Soluções de configuração e otimização de cache

Expira

definição

O cabeçalho da resposta contém a data/hora após a qual a resposta expira

Uma data inválida, como 0, representa uma data no passado, ou seja, o recurso expirou

Se a diretiva "max-age" ou "s-max-age" estiver definida no cabeçalho de resposta Cache-Control, o cabeçalho Expires será ignorado.

gramática:

Expira em: terça-feira, 17 de dezembro de 2019, 07:01:44 GMT

Exemplo:

Expira em: terça-feira, 17 de dezembro de 2019, 07:01:44 GMT

Controle de cache

definição

Um campo geral de cabeçalho de mensagem que implementa o mecanismo de cache especificando instruções. As diretivas de cache são unilaterais, o que significa que as diretivas definidas na solicitação não são necessariamente incluídas na resposta.

gramática

Cache-Control: max-age=[Definir o período máximo de armazenamento do cache Após esse tempo, o cache é considerado expirado (em segundos). Ao contrário de Expira, o tempo é relativo ao momento da solicitação]

Exemplo

Controle de cache: idade máxima = 600

ETag

definição

Um cabeçalho de resposta HTTP é um identificador para uma versão específica de um recurso. Isso torna o cache mais eficiente e economiza largura de banda porque o servidor web não precisa enviar uma resposta completa se o conteúdo não tiver sido alterado. E se o conteúdo mudar, o uso de ETag ajuda a evitar que atualizações simultâneas de recursos se sobreponham.

Caso haja uma alteração voluntária em uma determinada URL, um novo valor de ETag deverá ser gerado. Portanto, as ETags são semelhantes às impressões digitais e também podem ser usadas para rastreamento por alguns servidores. A comparação de ETags pode determinar rapidamente se esse recurso foi alterado, mas também pode persistir permanentemente por meio de servidores de rastreamento

gramática:

ETag: "<etag_value>"

Exemplo

ETag: "<5c6ccc12-1d45>"

Última modificação

O Lat-Modified é um cabeçalho de resposta que contém a data e a hora em que o recurso identificado pelo servidor de origem foi modificado. É frequentemente usado como validador para determinar se os recursos recebidos ou armazenados são consistentes entre si. Este é um mecanismo alternativo, pois é menos preciso que o ETag. Solicitações condicionais contendo cabeçalhos If-Modified-Since ou If-Unmodified-Since usarão este campo

gramática

Última modificação: <nome do dia>, <dia>, <mês>, <ano>, <hora>: <minuto>: <segundo> GMT

Exemplo

Última modificação:Web, 20 de fevereiro de 2019 03:40:02 GMT

Data

definição:

Data é um cabeçalho comum que contém a data e hora em que a mensagem foi criada

gramática

Data: <nome do dia>, <dia>, <mês>, <ano>, <hora>: <minuto>: <segundo> GMT

Exemplo

Data: terça-feira, 17 de fevereiro de 2019, 03:40:02 GMT

Status

definição

Os códigos de status de resposta HTTP indicam se uma solicitação HTTP específica foi concluída com êxito. As respostas são divididas em cinco categorias: respostas informativas (100 - 199), respostas bem-sucedidas (200 - 299), redirecionamentos (300 - 399), erros de cliente (400 - 499) e erros de servidor (500 - 599)

Exemplo

Status: 200

Como habilitar e configurar a compactação gzip

beneficiar

Compactar texto (HTML/CSS/JS)

Sem compactação para não texto (jpg/gif/png)

Taxa de compressão de cerca de 50% - 70%

Método de configuração

Configuração Nginx: arquivo nginx.conf adiciona gzip em

Configuração do Apache: AddOutputFilterByType e AddOutputFilter

Detecção de validade

Cabeçalho de resposta Verifique se há Content-Encoding: gzip, o que significa que o gzip está ativado no servidor.

7. HTTPS: como habilitar HTTPS para todo o site

conceito básico

HTTPS, HyperText Transfer Protocol Secure, é um protocolo de transferência para comunicação segura em redes de computadores

HTTPS se comunica por HTTP, mas usa SSL/TLS para criptografia de dados

O principal objetivo do HTTPS é fornecer autenticação de identidade do servidor e proteger a privacidade e integridade dos dados.

princípio de trabalho

O navegador inicia uma solicitação HTTPS

Certificado de transferência

O navegador analisa o certificado

Envie informações criptografadas

Servidor descriptografa informações

Transferir informações criptografadas

O navegador descriptografa informações

vantagem

SEO

Segurança

implemento

Certificado de compra do revendedor

GoGetSSL

SSLs.com

SSLmate.com

Certificado de teste local

Instalação local do HomeBrew: brew install mkcert

Instale o certificado raiz localmente: $ mkcert --install

Gere assinatura localmente: $mkcert 123.com //Gere certificado para 123.com

Configuração local do nginx

8. HTTP-2: Quais são os benefícios da atualização do HTTP-2? Como atualizar?

Conceitos HTTP/2

HTTP/2 (Hypertext Transfer Protocol versão 2, originalmente denominado HTTP 2.0), referido como h2 (conexão criptografada baseada em TLS/1.2 ou superior) ou h2c (conexão não criptografada), é a segunda versão principal da versão do protocolo HTTP

Vantagens do HTTP/2

Transferir dados em formato binário

Multiplexação, permitindo que várias solicitações sejam feitas em uma única conexão HTTP/2

Compressão de cabeçalho, pequeno volume de transmissão

Server Push, o servidor pode enviar recursos para o cliente mais rapidamente

Vantagens dos sites HTTP/2

Pode reduzir a pressão do servidor

Melhore a velocidade de acesso ao site

Mantenha seu site seguro

Habilite HTTP/2 no Nginx

Atualizar OpenSSL: versão $ openssl

Recompilar

$ cd nginx-xxx

$ ./configure --with-http_ssl_module --with-http_v2_module

$ make && make install

Verifique HTTP/2

Verifique no navegador se há um pequeno cadeado verde

Captura de tela da solicitação do navegador

3. DNS: Quais são os principais métodos de otimização de DNS?

definição

O Domain Name System é um banco de dados distribuído que mapeia nomes de domínio de sites e endereços IP entre si, facilitando o acesso à Internet.

Processamento do cliente

Módulo DNS do Android (okhttp)

Suporta HTTP/2. HTTP/2 suporta simultaneidade em uma única conexão TCP usando tecnologia de multiplexação para enviar ou receber dados enviando várias solicitações de uma só vez em uma única conexão.

Se o HTTP/2 não estiver disponível, a tecnologia de reutilização do pool de conexões também pode reduzir bastante a latência

Suporta GZIP para compactar o tamanho do download

O cache correspondente pode evitar completamente solicitações repetidas de rede

Se o servidor estiver configurado com vários endereços IP, quando a primeira conexão IP falhar, o OkHttp tentará automaticamente o próximo IP

Módulo DNS iOS (desenvolvido automaticamente)

Quando o aplicativo é iniciado, ele armazena em cache todos os nomes de domínio e IPs que podem ser usados e os processa de forma assíncrona. O cliente não precisa obter os resultados armazenados em cache.

Se houver um cache para este nome de domínio no Cache, o IP armazenado em cache será retornado diretamente.

Caso este nome de domínio não esteja no cache, aplique novamente no SERVIDOR HTTPDNS, e o resultado será retornado neste callback.

Processamento front-end

Limite de simultaneidade do navegador, distribuição definida para vários nomes de domínio

Acesso do usuário: Java, PHP e outras interfaces API

Páginas e estilos: HTML/CSS/JS

Imagens: jpg, png, gif, etc.

2. CDN: Como configurar corretamente o cache do CDN?

definição

A Content Delivery Network (CDN) usa o servidor mais próximo de cada usuário para enviar arquivos para a rede de distribuição do usuário de forma mais rápida e confiável.

vantagem

Acelerar: os usuários receberão nós de servidor mais próximos e suaves para transmitir dados aos usuários.

Baixo custo: os servidores são colocados em locais diferentes, reduzindo o tráfego de interconexão e diminuindo os custos de largura de banda.

Alta disponibilidade: quando um servidor falha, os servidores em áreas próximas são chamados automaticamente

CDN de volta à origem

Voltar à origem significa que quando o navegador acessa arquivos estáticos no cluster CDN, o cache de arquivos expira e penetra diretamente no cluster CDN para acessar a máquina de origem.

Cache CDN

Cache de nível 3: cache local do navegador, cache do nó de borda CDN, cache do site de origem CDN

Configurações de cache: se o tempo de cache for definido muito curto, o cache do nó de borda CDN frequentemente falha, resultando em retornos de origem frequentes, aumentando a carga no site de origem e o acesso será lento se o tempo de cache for definido muito longo, atualizações de arquivo; são lentos e o cache local do usuário não pode ser atualizado a tempo; portanto, depende da situação do negócio.

Tempo de cache de diferentes tipos de recursos estáticos

HTML: 3 minutos

JS, CSS: 10 minutos, 1 dia, 30 dias

Versão em escala de cinza do CDN

Princípio: Em algumas regiões e em algumas operadoras em algumas regiões, os recursos estáticos serão liberados primeiro. Após a verificação, eles serão liberados integralmente.

Implementação: Em termos de nomes de domínio, configurar VIPs especiais para resolver as cidades e operadores que precisam ser colocados em escala de cinza em termos de máquinas do site de origem, configurar máquinas de site de origem separadas para cidades e operadores em escala de cinza; estas máquinas únicas

CDN se prepara para grande promoção

Aumente a largura de banda da sala de computadores

Aumente o tráfego da operadora

Recuperação de desastres: O tempo de cache do aplicativo CDN é definido de 10 minutos a 1 hora e será restaurado após a promoção principal.

1. Desenvolvimento híbrido

Introdução ao núcleo e às vantagens dos miniprogramas

Visão

Na ponta dos dedos: os usuários podem abrir o aplicativo digitalizando ou pesquisando

Use e pronto: não se preocupe em instalar muitos aplicativos

Vantagens técnicas

H5 tem um limite de desenvolvimento mais baixo do que o desenvolvimento de aplicativos

Melhor que H5, próximo da experiência nativa

Recursos nativos avançados, como câmera, localização, rede, armazenamento, etc.

O menu suspenso superior, pesquisa, código QR e outras entradas são fáceis de usar e desaparecem após o uso, o que é simples e conveniente.

Não há necessidade de baixar como um aplicativo, basta abrir e sair diretamente, suporta atualização a quente

kernel subjacente

fundo de negócios

Lado da plataforma de aplicativos

Monetização de tráfego

Ecologia do miniprograma

Mercado de distribuição de aplicativos de classe

Lado do aplicativo corporativo

O tráfego móvel está diminuindo, novo tráfego é um bônus

Resolver alguns dos problemas de dificuldade na aquisição de clientes e reduzir o custo de captação de novos clientes

Reduza drasticamente os custos de desenvolvimento

Mais oportunidades de tentativa e erro nos negócios

Sugestões de seleção

Lançado pela primeira vez: janeiro de 2017 (mini programa WeChat)

Github começa: código fechado

Comunidade ativa: OK

Componentes: muito ricos

Curva de aprendizado: muito baixa

Desempenho nativo: OK

Sugestões abrangentes: os produtos da plataforma agora têm saída de tráfego para os comerciantes; vários aplicativos permitem a interoperabilidade de negócios em comparação com RN e Flutter, programas pequenos são mais recomendados;

Introdução ao núcleo e vantagens do Flutter

Visão

Um kit de ferramentas útil para uma bela experiência de construção que permite desenhar pixels em qualquer lugar da tela

Vantagens técnicas

Escreva uma vez e implante em cada terminal: Web, Android/iOS, Mac/Linux/Windows, Fuchsia OS

A camada inferior usa o mecanismo gráfico Skia e o desempenho gráfico é comparável ao de aplicativos nativos.

Interface como um aplicativo em tela cheia ou jogo 2D

Rápido, usa binários ARM nativos, compila antecipadamente, sem necessidade de JVM

princípios subjacentes

Sugestões de seleção

Maio de 2017

Início do Github: 8,16w (final de 2019)

A comunidade é geralmente ativa

Os componentes são widgets especializados e não são ricos o suficiente

A curva de aprendizado é relativamente alta, familiarizando-se novamente com a linguagem Dart

Nativo tem melhor desempenho

Sugestões abrangentes: Considerando o desempenho, o negócio é orientado para multiterminais e a equipe do App conta com gente suficiente, é recomendável escolher