O que os desenvolvedores precisam saber sobre a análise de desempenho HTML5

Comentário: O artigo a seguir foi escrito por um técnico de TI chamado Zhang Liming e foi publicado na página da InfoQ. Desta vez, ele analisou o desempenho do HTML5 de 9 aspectos diferentes no texto completo, que ainda vale a pena ler pelos desenvolvedores correspondentes.

Primeiro, da perspectiva da legibilidade do usuário, havia muitas coisas que originalmente não eram entendidas pelos iniciantes pela primeira vez para ver essas coisas, e o método de declaração HTML5 é obviamente mais amigável para os usuários.

Segundo, a declaração de codificação do documento é muito simples se estiver no HTML5. Muitas pessoas perguntam o que é HTML5? Dizemos que a maneira como podemos usar o HTML5 primeiro é alterar o Doctype primeiro, porque muitas páginas ainda estão da maneira tradicional. O método HTML5 é compatível com o navegador do IE e pode ser usado do IE6 ao IE10 e pode ser suportado por navegadores avançados. Portanto, a maneira mais fácil de adotar o HTML5 é mudar o Doctype.

A próxima coisa pode não ser uma coisa muito comum, mas é algo que eu prefiro, usando um método de etiqueta mais simples. Como você pode dizer neste nome, o HTML5 é herdado do HTML4. HTML4 possui modo rigoroso e modo de transição. O HTML5 suporta esse modo de transição, o que significa que você não pode fechar algumas tags. No entanto, eu não recomendo todas as tags, por exemplo, a etiqueta corporal não está fechada, o que não recomendamos. Mas o p-label mais usado também é a tag li Li. Por que você diz isso? Primeiro de tudo, de uma perspectiva visual, esse método é um pouco mais simples. Então, a chave é que, durante o processo de transferência de documentos, haverá menos conteúdo.

A declaração de atributos de tag html5 suporta três maneiras: suportes únicos, colchetes duplos e colchetes não ramificados. Para reduzir o tamanho do documento, escolhi o método sem cotações duplas ou citações únicas. No entanto, deve -se notar que, assumindo que seja uma declaração de atributos de classe, porque os atributos podem incluir várias classes e, quando várias classes, elas devem ser fechadas entre colchetes. Nesse sentido, deixe -me mostrar a você uma prática do Google. O próprio Google possui uma página que pratica completamente o acima, reduzindo o tamanho do documento em 20%, reduzindo a transferência de documentos HTML em 20%. Se tudo for praticado, poderá obter uma diminuição entre 5% e 20%. Esta é a primeira etapa, reduzindo o tamanho do documento HTML.

Em seguida, é sobre a otimização de imagens, que sempre são elementos que amam e ódio. Porque quando houver muitas fotos, isso arrasta seriamente a velocidade de carregamento de toda a página. Em relação aos métodos de otimização das imagens, há muitas apresentações no livro "High Performance Website". Para resumir, existem três pontos principais: usando elfos, otimizando o tamanho das imagens e usando o URI de dados. Não vou entrar em detalhes aqui.

Outra idéia de otimização da imagem é: sem imagem. Abandone as fotos e abraça o CSS3. Originalmente, eu precisava definir uma imagem com um efeito de canto arredondado, mas agora usei o radiato de fronteira no CSS3; Eu usei a imagem com um efeito de sombra, mas agora uso a sombra de caixa no CSS3; Eu costumava definir uma imagem de fundo de gradiente, mas agora uso o gradiente no CSS3.

3. Pré-busca

Em seguida, vamos falar sobre pré -busca, que é outra maneira de otimização. Nossas idéias de otimização atuais nada mais são do que poucas. Muitos deles são da perspectiva de menos coisas, por exemplo, o tamanho do documento foi reduzido antes e o tamanho da imagem foi reduzido. Muitas fotos se tornam elfos, a fim de reduzir o número de solicitações de envio. Para pré -busca, é outra maneira de pensar. Carregando recursos mais cedo. Quando o usuário vai direto ao ponto, ele realmente carregou, então definitivamente será mais rápido.

Existem duas partes para a pré-busca: uma é a pré-busca de recursos e a outra é a pré-resolução do DNS.

Há vários pontos a serem observados ao pré -carregamento de recursos:

A pré -carga só puxa quando o navegador estiver ocioso, mas não é garantido que o puxasse. Este é um ponto muito importante. Porque o navegador em si tem um ouvinte global, que é uma interface interna. Quando o ar de navegação estiver ocioso, ele executa o navegador quando estiver ocioso, mas esse retorno de chamada ocioso pode não ser acionado, portanto, não garante que a pré -carga seja executada.

O Chrome não suporta a pré -carga dos recursos HTTPS. Por exemplo, o Alipay é uma página HTTPS, o Chrome não será pré-pull.

Embora uma página pré-pulada não seja visível depois de existir, ela está realmente analisando normalmente. Se eu preceder a página de login, a página de login possui muitos recursos, como imagens, arquivos CSS e arquivos JS. Ele será analisado de cima para baixo normalmente. Durante o processo de análise, esta página não aparece, mas na verdade existe. No HTML5, você pode obter o status atual da página através do document.VisibilityState. Geralmente, a página tem dois estados, visíveis e invisíveis, mas agora existe um novo estado chamado estado de pré-renderização. Você pode determinar diretamente se a página está no estado de pré -renda, se document.VisibilityState é igual ao Prerender.

4.DNS Resolução

Em seguida, é a resolução do DNS. Às vezes, quando efetuamos login na página, é relativamente difícil detectar onde o usuário pode clicar. Obviamente, às vezes faremos alguns pontos de sepultamento para descobrir que o próximo comportamento do usuário está entrando principalmente. Mas, em alguns casos, não sabemos em qual página o usuário irá para a próxima, mas sabemos para qual domínio ele irá. Neste momento, posso pré-parsar DNS. Porque, de fato, existe um longo processo de resolução DNS em todo o processo de solicitação de página. Se fizermos isso com antecedência, podemos permitir que os usuários vejam esta página.

A seguir, é apresentado um caso de papel de parede Q+. Q+ Papel de parede é um determinado sistema. Primeiro de tudo, toda a arquitetura do Q+ é baseada no Web+ Client. O que estamos vendo agora é uma página da web. Embora seja uma concha do cliente lá fora, seu coração é web. Quando concluímos todo o processo pela primeira vez, porque há muitas fotos, todos os recursos estáticos são alocados para mais de uma dúzia de servidores estáticos. Em outras palavras, se eu quiser puxar, tenho que analisar 10 DNs. Desta vez, é bastante demorado, e o tempo mais lento pode ser adiado por alguns segundos, o que é algo que podemos sentir a olho nu. Se você executa a pré-resolução do DNS, porque não sei qual recurso é, todas as imagens são aleatórias, por isso podemos apenas dizer que trabalhamos duro na pré-resolução do DNS para melhorar sua velocidade. Dessa forma, pode levar 2 segundos, e eu ficarei 1 segundo.

Em seguida, vamos falar sobre o aplicativo em Q+. Teremos muitas cadeias de texto em qq e q+, assim como no QQ, o que significa que há um aplicativo de texto Push no canto inferior esquerdo da janela. Este é o back -end de tempos em tempos pela Web, e o back -end é retirado e depois exibido em primeiro plano. Mas, em um determinado período, as informações operacionais totais impulsionadas por todos os aplicativos são realmente corrigidas. Se você analisar a matriz correspondente de cada cadeia de texto de acordo com um aplicativo específico, é muito big data no momento. Como um aqui tem cerca de trezentos ou quatrocentos bytes, da perspectiva de otimização, puxamos essas áreas localmente. Em seguida, salve o local do local. Estamos no mesmo domínio e todas as informações entre aplicativos podem ser acessadas um pelo outro. Então você não puxará todos os IDs que puxou novamente.

Há também um ponto que precisa receber atenção aqui. Atualmente, muitos fabricantes do LocalSorage são sincronizados. Se você ligar para o LocalStorage em grandes quantidades, ele realmente bloqueará seu processo de renderização. No momento, quando o usuário arrasta a página para baixo, você está armazenando dados no momento e os dados são relativamente grandes. Neste momento, o usuário sentirá que sua página está muito presa. Eles já discutiram essa questão antes. O design dessa interface é projetado de forma assíncrona e é projetada como síncrona. Isso fará com que você faça essa desculpa quando fizer mais aplicativos porque existe um processo de serialização, sequência do disco. Dessa forma, todo o processo parecerá mais lento. Além disso, o LocalStorage pode compartilhar esses dados entre diferentes Windows e bloquear esses dados. Se uma grande quantidade de dados estiver chamando essa interface local, ele parecerá relativamente preso. Portanto, não há uma solução particularmente boa no momento, mas isso é algo a lembrar. Mesmo que o maior no momento seja superior às 5 horas, se você usar mais de 5 horas, ficará muito triste ao usuário. Porque se você chamar essa desculpa e o usuário estiver arrastando e usando o mouse, ele ficará muito preso.

Em seguida, vamos falar sobre os benefícios do armazenamento offline para os usuários em termos de desempenho. Primeiro de tudo, o arquivo de definição é inserido armazenamento offline. Todos os módulos do sistema em Q+ têm suporte offline de definição. Ou seja, se todos os aplicativos estiverem desconectados, eles ainda poderão ser usados. Adicione um arquivo de manifesto ao documento. Manifest é um arquivo de definição que declara quais páginas precisam ser armazenadas localmente? Quais não precisam ser armazenados? Quais devem ser substituídos se a solicitação falhar? Isso é dividido em três partes:

Primeiro, o cache, que precisa ser armazenado localmente.

Segundo, a rede não será armazenada localmente. Voltará e solicitará sempre. Mas deve -se apontar aqui que o armazenamento e o armazenamento local do navegador são na verdade duas coisas diferentes. Eles armazenam duas partes diferentes. Mesmo que a rede precise dizer ao aplicativo que eu preciso puxá -lo uma vez sempre, porque, como o Chrome, seu cache de armazenamento é muito odioso e difícil de esclarecer. Deve ser limpo manualmente para entrar em vigor. Portanto, mesmo se você o definir para não armazená -lo localmente, o navegador poderá armazená -lo em si, pois armazena dois lugares diferentes.

Terceiro, fallback. Se uma imagem falhar, é 404. Então, que imagens devem ser usadas? Eu acho que isso é mais divertido.

Como definir o Maeifest? Há três coisas a serem observadas sobre o manifesto:

Manifestar restrição homóloga;

O tipo MIME deve ser o texto/manifesto de cache, que é padrão e não entrará em vigor se estiver em outros formatos;

Chrome, se você quiser ver se essa coisa entra em vigor, poderá inseri-la no navegador através do pseudo-protocolo Chrome, Chrome: // appcache-internals.

Sobre como atualizar o cache do aplicativo. Por que você precisa de armazenamento offline? Armazene offline localmente. Quando o navegador souber que você tem armazenamento offline, ele irá primeiro ao diretório de armazenamento offline para descobrir se esse recurso foi armazenado em cache. Quando for armazenado em cache, ele receberá o recurso diretamente daqui e não enviará outra solicitação. Como a solicitação do navegador é assim, quando houver armazenamento offline, mesmo a solicitação não será enviada, por isso será mais rápido. Se às vezes precisamos atualizar, o que devemos fazer quando atualizarmos?

Os usuários podem limpar manualmente o cache do navegador e o armazenamento local será automaticamente limpo no momento.

Modificar qualquer conteúdo do manifesto é uma maneira mais recomendada e também é a maneira como o usamos online. Ou seja, podemos modificar os projetos específicos dentro, mas é melhor modificar os comentários aqui, porque toda vez que publico, publicamos automaticamente o mecanismo e apenas comentar e modificá -lo ao publicar. Dessa forma, toda vez que o conteúdo for publicado, ele será sincronizado com a área local do cliente em tempo real;

Execute através do programa e o programa é Window.ApplicationCache.Update (). Isso significa que quero operar o armazenamento offline. Na verdade, às vezes chamo de armazenamento de aplicativos porque sua semântica é o armazenamento de aplicativos. Vamos atualizar manualmente o armazenamento do aplicativo.

6. Web Worker

Próximo trabalhador da web. O Web Worker é um processo JS multi-thread. De fato, se não tivermos cenários de aplicativos on -line, não falarei sobre eles. Mas podemos falar sobre os cenários de aplicação específicos que já vi.

Primeiro, deixe -me apresentar o que é o webwork? É um tópico de nível de OS. Antes, imitamos multi-threading, mas na verdade abrimos mais uma janela. Mas agora, o próprio navegador fornece, o que trará mais conveniência para a operação e é uma maneira de tornar todo o nosso documento mais pesado e não muito recomendado.

Em seguida, o WebWorker possui recursos de acesso limitado e não pode acessar muitos objetos globais. Por exemplo, o objeto Documnet não pode ser acessado. O cenário mais adequado para o WebWorker são as operações de computação intensiva da CPU. Quando estávamos jogando antes, usamos Box2D. Muitas pessoas já ouviram falar disso. Envolve muitos cálculos, ou seja, todos os objetos abaixo em toda a página precisam calcular seu relacionamento de colisão, o que é muito grande. No entanto, se for executado no processo JS atual, o cálculo será grande e, uma vez calculado o cálculo, a página inteira será muito gagueira. No entanto, se você usar o WebWorker para fazê-lo, é um processo assíncrono enviado em tempo real e pode fazer outras coisas durante o processo de cálculo, que é multi-threading.

Vamos falar sobre a API do dispositivo. Eu acho que a coisa mais importante sobre a API do dispositivo é o desempenho e também é a API mais antiga implementada atualmente. Uma é a conexão, que é a largura de banda da rede. Qual é a função disso? Nesse cenário na China, é necessário lembrar que a velocidade da Internet de muitos usuários ainda é muito baixa. Esperamos que, quando a velocidade da Internet dos usuários estiver baixa, eles possam rebaixar automaticamente para uma solução relativamente baixa. Não podemos fazer isso se usarmos a tecnologia existente. Mas podemos usar a API do dispositivo. Porque sabemos que essas informações podem ser obtidas no dispositivo. Qual é a sua banda larga? Qual é a banda larga? O que podemos fazer quando for. Por exemplo, quando a banda larga é boa, eu uso imagens de alta definição. Quando a banda larga estiver relativamente baixa, use imagens com menor clareza.

8. Bateria

O seguinte é sobre a bateria. Eu acho que, de uma perspectiva de desempenho, trata -se principalmente de poder. Se a energia da bateria do usuário for relativamente baixa, acho que ele deve tentar fazer menos coisas. A tecnologia da bateria do próprio telefone celular ainda não fez avanços. Eu acho que fazer o aplicativo parecer mais alto desempenho também é um destaque da publicidade.

9.CANVAS

Em seguida é a tela. Vamos falar sobre vários pontos de otimização de desempenho da tela. Se você usar essas coisas, o desempenho será aprimorado em 10 vezes.

Primeiro, cada tela é uma tela. Quando queremos renderizar um gráfico, podemos caminhar. Assim como dentro do PS, é uma, duas e três camadas. Muitos usuários imitam diretamente tudo em uma camada ao fazer jogos, e tudo precisa ser atualizado assim que forem atualizados. Mas se você o colocar, você coloca o plano de fundo na camada de segundo plano e o personagem no papel. Dessa forma, quando quiser atualizar a função, atualizarei apenas a função e a camada de segundo plano não precisa ser alterada. Como a CPU faz menos, o desempenho melhorará naturalmente.

Segundo, context.Drawimage. Não escala a imagem. Cometemos um erro no começo. As fotos feitas por nossos artistas são sempre inconsistentes conosco e então queremos escalar a imagem. Como o tamanho da imagem do próprio dispositivo é assim, devemos escalar a imagem por proporção. Depois de ampliar a imagem, achei que em dispositivos de baixo custo, por exemplo, o iPad ou iPhone ficará muito preso. Por que? Basta realizar a análise de código. Ao usar esse método, custará muito.

Terceiro, requestanimationframe. Este é um método especificamente otimizado para renderização. Seu próprio princípio é o seguinte: quando o navegador passa por um quadro, esse método será acionado. Quando eu o aciono, a tela recebe o navegador está pronto para fazer o próximo quadro. Se você usar o método tradicional, não considerará mais suas coisas. Ele saberá apenas quanto tempo passei e o executarei. Se o usuário for bloqueado antes e executar esse método a cada 10 segundos, em 10 segundos, o trabalho anterior não foi concluído e o trabalho será adiado. É otimizado para que a animação pareça mais suave, porque todo quadro diz que você pode fazer algo. (Texto: InfoQ)