Wondershare EdrawMind
Galeria de mapas mentais Otimização de desempenho de link completo de front-end e otimização de processo de desenvolvimento de PD
- 4
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
Otimização de desempenho de link completo de front-end e otimização de processo de desenvolvimento de PD
- Recomendado para você
- Descrição
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