Este artigo apresenta principalmente o tutorial sobre o uso de tela em camadas para otimizar a renderização HTML5. Ele vem dos documentos técnicos do desenvolvedor oficial do site da IBM. Amigos que precisam podem se referir à seguinte introdução
Normalmente, ao jogar jogos em 2D ou renderizar a tela HTML5, é necessário que otimizações seja executado para usar várias camadas para construir uma cena sintética. Em renderizações de baixo nível, como OpenGL ou WebGL, a renderização é realizada limpando e desenhando o quadro de cena por quadro. Após a implementação da renderização, o jogo precisa ser otimizado para reduzir a quantidade de renderização e o custo necessário varia de situação para situação. Como a tela é um elemento DOM, ele permite que você coloque várias telas como um método de otimização.
Abreviações comuns
DOM: Modelo de objeto de documento
HTML: linguagem de marcação de hipertexto (linguagem de marcação de hipertexto)
Este artigo explorará a racionalidade das telas de camadas. Entenda as configurações de DOM para ativar uma tela em camadas. O uso da otimização hierárquica requer várias práticas. Este artigo também explorará alguns conceitos e técnicas para estratégias de otimização que estendem a abordagem hierárquica.
Você pode baixar o código -fonte para os exemplos usados neste artigo.
Selecione uma estratégia de otimização
Escolher a melhor estratégia de otimização pode ser difícil. Ao escolher um cenário hierárquico, você precisa considerar como o cenário é composto. A renderização de objetos fixos em telas grandes geralmente requer a reutilização de vários componentes, que são excelentes candidatos à pesquisa. Efeitos como paralaxe ou entidades de animação geralmente exigem muito espaço de tela variável. É melhor prestar atenção a essas situações ao explorar suas melhores estratégias de otimização. Embora a otimização hierárquica da tela exija várias técnicas diferentes, o desempenho geralmente será bastante aprimorado após a aplicação correta dessas técnicas.
Camada de configurações
Ao usar o método hierárquico, a primeira etapa é definir a tela no DOM. Normalmente, isso é simples, basta definir o elemento de tela e colocá -lo no DOM, mas a camada de tela pode exigir algum estilo extra. Ao usar o CSS, existem dois requisitos para implementar com sucesso a hierarquia de tela:
Cada elemento de tela deve coexistir na mesma posição na viewport.
Cada tela deve ser visível sob outra tela.
A Figura 1 mostra o conceito de sobreposição geral por trás das configurações da camada.
Figura 1. Exemplo de camada
As etapas para configurar a camada são as seguintes:
Adicione os estilos de posicionamento do elemento Canvas para apoiar a hierarquia.
Estilize os elementos da tela para gerar um fundo transparente.
Defina a pilha de sobreposição de tela
Criar uma pilha de sobreposição no CSS pode exigir uma pequena quantidade de estilos. Existem muitas maneiras de se sobrepor usando HTML e CSS. Os exemplos deste artigo usam uma tag <div> para conter a tela. A tag <div> especifica um ID exclusivo que aplica o estilo aos seus elementos de tela HTML5 infantil, conforme mostrado na Listagem 1.
Listagem 1. Estilos de posicionamento de tela
CSS Code Copy Content para a área de transferência