índice
- http 和 https
- Códigos de status comuns
- Cabeçalhos de solicitação comuns
- método de solicitação http
- A diferença entre GET e POST
- Pré-solicitação de HTTP
- Cache forte e negociado
- valor de controle de cache
- Handshake TCP de três vias
- TCP e UDP
- WebSocket
urlO que aconteceu entre a entrada e a conclusão da renderização da página- Regras de carregamento de arquivo
- A diferença entre script tag defer e async
- Download do arquivo
- Cookie 、 sessionStorage 、 localStorage
- A diferença entre cookie e sessão
- CSRF e XSS
- Web Worker
- O papel do Doctype, modo estrito e modo promíscuo
- Compreensão de tags semânticas HTML
- O que é um iframe? Quais são as desvantagens?
- comunicação iframe
- onload 和 onready
- Fale sobre janela de visualização e layout para celular
- Resuma RESTFUL em uma frase
- Click tem 300ms de atraso no iOS, por que e como resolver?
- otimização de desempenho da web
http 和 https
- Conceitos Básicos
http: Hypertext Transfer Protocol, um protocolo de transferência usado parawwwtransferir hipertexto do servidor para o navegador localhttps:http+SSL, Usado para estabelecer um canal de segurança da informação para garantir a autenticidade do servidor e a segurança da transmissão de dados
httpsPrincípio de trabalho- O cliente inicia um pedido de conexão ao servidor
- O servidor retorna o certificado e a chave pública de criptografia assimétrica
- O cliente verifica o certificado e usa criptografia de chave pública para verificar o servidor de verificação de dados
- O servidor usa a chave privada para descriptografar, criptografar novamente os mesmos dados e retornar para concluir a verificação
- O cliente gera uma chave de criptografia simétrica, criptografa-a com a chave pública e a envia para o servidor
- O servidor descriptografa para obter a chave e, em seguida, usa criptografia simétrica para se comunicar
httpsDeficiências- Baixa eficiência: a fase de handshake é demorada e prolonga o tempo de carregamento da página. A criptografia consome desempenho, não tão rápido quanto o texto simples
- Custo alto: o certificado exige dinheiro
- Diferença de versão
http1.0: Uma conexão TCP é estabelecida para cada solicitação, e a conexão é desconectada após a solicitação ser concluídahttp1.1: Estabeleça uma conexão TCP longa e faça várias solicitações de forma síncrona. A solicitação anterior congestionará a seguinte.http2.0: Estabeleça uma conexão TCP e faça várias solicitações simultaneamente. Código binário
Códigos de status comuns
| código de status | significado |
|---|---|
| 200 | A solicitação foi bem-sucedida (dados completos são retornados) |
| 301 | Redirecionamento permanente |
| 302 | Redirecionamento temporário |
| 307 | O redirecionamento temporário (http1.1) envia uma solicitação Post, perguntando ao usuário se deseja redirecionar |
| 304 | Cache de negociação (não há necessidade de retornar a quantidade total de dados) |
| 400 | A solicitação é inválida (os parâmetros são inconsistentes com o plano de fundo) |
| 401 | A solicitação precisa verificar a identidade do usuário |
| 403 | O servidor recebe a solicitação, mas se recusa a executá-la |
Cabeçalhos de solicitação comuns
| Solicitar cabeçalho | significado | Por exemplo |
|---|---|---|
| Pescoço geral | Indica algumas informações gerais | data representa a hora de criação |
| Solicitar cabeçalho | Solicitar mensagem única | cookie ， if-Modified-Since |
| Cabeçalho de resposta | Mensagem de resposta única | set-cookie ， location |
| Cabeçalho da entidade | Descreva a parte física | allow descreve o método de solicitação, content-type descreve o tipo de assunto e content-Encoding descreve o método de codificação |
método de solicitação http
GET, POST, HEAD, OPTIONS, PUT, DELETE, TRACE,CONNECT
A diferença entre GET e POST
- Diferença essencial: os
GETparâmetros sãoURLpassados ePOSTcolocadosRequest bodyem - Devido à diferença essencial, o limite de comprimento é diferente, a segurança é diferente e o método de codificação é diferente
Pré-solicitação de HTTP
Ao processar solicitações complexas de domínio cruzado, o navegador usará o OPTIONSmétodo para enviar uma solicitação de pré-solicitação ao servidor antes de enviar a solicitação. Se o resultado da resposta do servidor for rejeitado, a solicitação real não será enviada.
Condições para pré-solicitação:
Solicitação simples : (não envie uma OPTIONSsolicitação)
- Não use cabeçalhos de solicitação personalizados
- Use
GET,POSTouHEADmétodo - Use
content-type:text/plain,multipart/form-dataouapplication/x-www-form-urlencoded
Solicitação não simples : (enviar OPTIONSsolicitação)
Cache forte e negociado
Os recursos do servidor não são fixos. Se o usuário acessar o cache local depois que os recursos do servidor forem atualizados, isso equivale a não ser atualizado. Se o usuário obtiver recursos do servidor quando os recursos do servidor não estiverem atualizados, os recursos serão desperdiçados. Portanto, existem dois mecanismos de cache: cache forte (sempre ler do cache), cache negociado (após solicitar ao servidor para determinar se deve ler do cache)
Cache forte: nenhuma HTTPsolicitação é enviada , o código de status é 200 e o navegador lê os dados diretamente do cache. Campos relevantes têm expires, cache-control. Se cache-controle expiresenquanto existir, cache-controltem precedência expires.
Cache de negociação: irá enviar uma HTTPsolicitação, o código de status é 304, o navegador envia uma solicitação ao servidor, se acertar o cache, será obtido do cache. Campos relevantes têm Last-Modified/If-Modified-Since, Etag/If-None-Match.
valor de controle de cache
max-age: Período de validade do cache: cache
no-cachenegociado, lido quando o servidor confirma o uso do cache de cache
no-store: desabilite o cache, cada solicitação precisa baixar novamente os recursos completos
public: pode ser armazenado em cache por todos os usuários, incluindo usuários finais e CDNs e outros servidores proxy intermediários
private: pode ser usado apenas por terminais O cache do navegador do usuário não pode ser armazenado em cache por servidores de cache de retransmissão, como CDN
Padrões:private
Handshake TCP de três vias
O cliente inicia um pedido de ligação ao
servidor O servidor responde ao pedido e inicia um pedido de ligação ao
cliente O cliente responde ao pedido de ligação
TCP e UDP
TCP: Conexão face a face (é necessário estabelecer uma conexão), transmissão de informações um a um, confiável
UDP: isolamento face a face (sem necessidade de estabelecer uma conexão), transmissão de informações um a muitos não confiável
WebSocket
Conceitos básicos:
HTML5o protocolo em, com base httpem, suporta conexões persistentes
Função:
não mais limitado ao cliente solicitando ativamente o servidor, depois que a conexão for estabelecida, o cliente pode enviar mensagens ao servidor, e o servidor também pode enviar mensagens ativamente ao cliente
urlO que aconteceu entre a entrada e a conclusão da renderização da página
- O navegador procura seu próprio cache DNS
- O navegador pesquisa o cache DNS do sistema operacional
- Leia o arquivo HOST local
- O navegador inicia uma chamada de sistema DNS
- Operadores de banda larga verificarão o cache DNS local
- O servidor da operadora inicia uma solicitação DNS para o nome de domínio raiz
- O nome do domínio raiz retorna o resultado da resolução DNS para o operador
- O operador retorna o resultado da resolução DNS para o kernel do sistema operacional e armazena o resultado em cache
- O kernel do sistema operacional retorna o resultado retornado ao navegador
- Depois que o navegador obtém o endereço IP correspondente, ele constrói uma solicitação HTTP e inicia uma solicitação HTTP para o servidor
- Depois que o servidor recebe a solicitação, ele retorna o resultado da solicitação ao navegador de acordo com o parâmetro do caminho
- Depois que o navegador obtém o código da página, constrói a árvore DOM com base em HTML
- Quando o processo de construção da árvore DOM encontra uma solicitação de recurso, repita as etapas acima para obter recursos
- Se a aquisição de recursos puder ler o cache, use o cache forte correspondente e negocie a regra de cache
- Durante o processo de construção da árvore DOM, se um script JS for encontrado, a construção da árvore DOM será interrompida para baixar e executar o script correspondente
- O navegador constrói a árvore CSSOM de acordo com o estilo
- Depois de construir a árvore CSSOM, mescle com a árvore DOM em uma árvore de renderização
- Layout e renderizar a página
Regras de carregamento de arquivo
CSSO carregamento do arquivo Domé assíncrono em relação à análise, o que bloqueia a Domrenderização e não bloqueia a Domanálise.
JSO carregamento do arquivo Domé síncrono com a análise e bloqueia a Domanálise. Um onloadevento será acionado após o carregamento e a execução.
O carregamento do arquivo é síncrono em relação ao carregamento de arquivo semelhante
A diferença entre script tag defer e async
Ponto comum: Todos são carregados de forma assíncrona e scriptsão carregados quando encontram uma tag. Durante o download do arquivo, HTMLa análise do documento não será bloqueada .
Diferenças: A sequência de execução é garantida após a análise do documento
defer, ou seja, domContentLoadedapós o evento é acionado .
asyncExecute imediatamente após o download do arquivo e analise o HTMLdocumento após a conclusão da execução
Download do arquivo
- Aula de salto
<a target="_blank" href='xxx'></a>
window.open('xxx')
window.location.href = 'xxx'
downloadAtributos
<a download='xxx' href='xxx'></a>
http header
res.setHeader("Content-Disposition","attachment;filename=xxx")
canvas.toDataURL()
- Só pode ser usado para arquivos de imagem da mesma fonte
Arquivos que podem ser abertos por navegadores: 1,2,3todos, 1,2independentemente dos
arquivos de domínio cruzado, 1,2,3podem ser abertos por navegadores: todos e 1,2devem ser da mesma fonte
Cookie 、 sessionStorage 、 localStorage
Ponto comum: Salvo no lado do navegador, compartilhado com a mesma origem
Cookie: será transferido de um lado para o outro entre o navegador e o servidor, válido antes do tempo de expiração ser definido e o limite de tamanho é de 4 源K cada
sessionStorage: Válido apenas até o navegador atual a janela está fechada
localStorage: Sempre válido, OK Como um armazenamento de dados persistente, o limite de tamanho é 源2,5M-10M cada
A diferença entre cookie e sessão
cookieArmazene os dados no navegador, a segurança não é boa.
sessionArmazene os dados no servidor, e
cookiearmazene-os com mais segurança sessionIdpara identificar o usuário. O servidor obtém as informações sessionIdusadas para ler o status do usuário.
CSRF e XSS
Web Worker
O papel do Doctype, modo estrito e modo promíscuo
Doctype é declarado na parte superior do documento, informando ao navegador como renderizar a página, existem dois modos: modo estrito e modo promíscuo.
Modo estrito: os modos de composição e operação JS são executados no mais alto padrão compatível com o navegador.
Modo promíscuo: compatibilidade com versões anteriores, simulando navegadores antigos, evitando que navegadores sejam incompatíveis com as páginas.
Compreensão de tags semânticas HTML
Tags semânticas significam que as tags corretas contêm o conteúdo correto e são bem estruturadas para facilitar a leitura
O que é um iframe? Quais são as desvantagens?
iframeIrá criar um quadro embutido contendo outro documento
Desvantagens:
onloadEventos que bloqueiam a página principal (use adição dinâmica parasrcresolver)- é prejudicial para
SEO - Compartilhando o pool de conexão com a página principal, o navegador limita o
httpnúmero de solicitações simultâneas da mesma fonte , afetando assim o desempenho da página principal
comunicação iframe
Homólogas: página mãe, cookie
diferentes fontes: document.domain, location.hash, window.name
Jieke:postMessage
onload 和 onready
As etapas de carregamento de documentos DOM são:
- Analisar estrutura HTML
- Carregar scripts externos e arquivos de folha de estilo
- Analisar e executar o código do script
- A árvore DOM é construída. // DOMContentLoaded, botão de atualização do navegador redefinido
- Carregue arquivos externos, como imagens
- A página está carregada. // window.onload
Fale sobre janela de visualização e layout para celular
Janela de visualização do PC:
usada para exibir páginas projetadas para terminais não móveis. Haverá uma largura padrão, que é maior do que a resolução real da tela
Janela de visualização móvel:
usada para exibir páginas projetadas no terminal móvel. A largura e a altura são a resolução real da tela
A diferença é: (o terminal móvel é usado após o uso, o terminal de PC não é usado)
<meta name="viewport" content="width=device-width, initial-scale=1.0">
O layout é adotado rem, se a compatibilidade não for considerada vw, vhé melhor
document.addEventListener('DOMContentLoaded', () => {
const html = document.querySelector('html')
let fontSize = window.innerWidth / 10
fontSize = fontSize > 50 ? 50 : fontSize
html.style.fontSize = fontSize + 'px'
})
Resuma RESTFUL em uma frase
Use a URLlocalização de recursos e HTTPdescreva as operações por solicitação
Click tem 300ms de atraso no iOS, por que e como resolver?
Motivo: IOSHá um clique duplo para zoom, eo navegador não pode julgar se é um único clique ou operação de clique duplo após o primeiro clique.
Solução:
- Desativar zoom
<meta name="viewport" content="width=device-width, user-scalable=no">
- Use
fastClick
paratouchendenviar umclickevento analógico imediatamente após a detecção e bloquear o evento disparado após 300ms
otimização de desempenho da web
Reduza a quantidade de solicitações: mesclar recursos, reduzir o número de solicitações HTTP, compactação gzip, webP, lazyLoad para
acelerar a velocidade da solicitação: e resolver DNS, reduzir o número de nomes de domínio, carregamento paralelo, distribuição de CDN
Cache: cache de protocolo HTTP , manifesto de cache off-line, cache de dados off-line local
Renderização de armazenamento : otimização JS / CSS, sequência de carregamento, renderização do lado do servidor, pipeline