No processo de fusão do cromo (em)

No processo de renderização Chrome num (a) nós introduzimos o pipeline de processamento geração DOM , estilo de computação e layout das três etapas. Hoje, estamos preocupados na parte de trás do palco pipeline de processamento.

estratificada

Depois de gerar o layout gerado pelo layout da árvore, a localização específica de cada elemento de informação é calculado, e, em seguida, a próxima página não é começou a desenhar-se?

A resposta ainda é não.

Uma vez que existem muitos página complexo com efeito, tais como alguns transformação complexa 3D, página rolagem, ou fazer uso do eixo z z-indexação triagem. Para alcançar estes efeitos mais facilmente, motor de renderização necessária para gerar específica para uma camada nó particular, e gerar uma árvore camada correspondente (LayerThree) . camadas mencionadas, devemos primeiro pensar em software PS. Camadas PS são muito comuns, tais como a imagem se torna fundo transparente, você precisa copiar uma camada saiu, limpar partes indesejadas da camada com uma ficha, em seguida, aplicado à imagem original, você pode gerar uma imagem com um fundo transparente de.

Para entender o que é a camada de forma intuitiva, através do Chrome "Ferramentas de Desenvolvimento" e selecione a guia "Layers", você pode visualizar a página estratificação, como mostrado abaixo:

Se não há "Camadas" etiqueta, ver o esquema abaixo:

Como pode ser visto a partir do acima do primeiro gráfico, aponta para a página motor render muitas camadas, estas camadas em uma certa ordem dobrada em conjunto, de forma a página final.

Agora que você sabe a página do browser é, na verdade dividido em muitas camadas, estas camadas sobrepostas síntese após a página final. Em seguida, a relação entre essas camadas e disposição de nós da árvore é como? Por favor, referir-se ao diagrama de:

Tipicamente, cada nó da árvore contém a disposição não é uma camada, se um nó não corresponde à camada, em seguida, a camada subordinado para o nó do nó pai . Por exemplo, a figura acima da marca de span haverá camadas exclusivos, em seguida, eles são subordinados ao seu camada-mãe. Em qualquer caso, uma camada final de cada nó dependente directamente ou indirectamente.

O browser irá criar uma camada para nós individuais que satisfaçam as seguintes condições:

1. O elemento de atributo contexto tem um laminado promovida a uma única camada.

Página é um plano bidimensional, mas o contexto permite que os elementos HTML laminado que tem um conceito tridimensional, estes elementos HTML de acordo com o próprio atributo de prioridade para a distribuição do eixo Z perpendicular ao plano bidimensional.
Esta é uma vista esquemática de um contexto laminado.

contexto laminada geralmente têm as seguintes propriedades:

• elemento raiz do documento (HTML).
• postion é absoluta (o posicionamento absoluto - com respeito ao elemento pai) ou (posicionamento relativo) relativa e índice z não é de auto elementos.
• valor de posição fixa (posicionado de forma fixa - no que diz respeito a todo o documento) ou pegajosa elementos (viscoso) de posicionamento.
• Flex elemento (flexbox) criança do recipiente, e valor de índice z não é automático.
• elemento de grelha criança do navio, e o valor de índice z não é automático.
• valor da propriedade opacidade inferior a 1 elemento.
• valor de atributo-mistura do modo de mistura não é um elemento normal.
• transformar / filtro / perspectiva / grampo-trajeto / máscara / mascarar-imagem / mascarar-fronteira valor de atributo não é um elemento para nenhum.
• valor de atributo do isolado elemento de isolamento.
• --Webkit-estouro rolagem valor do atributo elemento de toque.
• valor de vontade alteração é definida como qualquer um dos atributos do atributo é criado no contexto do elemento laminado valor não-inicial.
• Conter disposição valor de atributo, pintar ou um valor sintético de um deles: o elemento (por exemplo, conter conteúdo / estrito) um.

2. a necessidade de colocar corte (clipe) vai ser criada como uma camada

Mas primeiro você precisa entender o que é corte, combinado com o seguinte HTML:

<style>
      div {
            width: 200;
            height: 200;
            overflow:auto;
            background: gray;
        } 
</style>
<body>
    <div>
        <p>所以元素有了层叠上下文的属性或者需要被剪裁，那么就会被提升成为单独一层，你可以参看下图：</p>
        <p>从上图我们可以看到，document层上有A和B层，而B层之上又有两个图层。这些图层组织在一起也是一颗树状结构。</p>
        <p>图层树是基于布局树来创建的，为了找出哪些元素需要在哪些层中，渲染引擎会遍历布局树来创建层树（Update LayerTree）。</p> 
    </div>
</body>

Aqui nós definimos div tamanho de 200 * 200 pixels, enquanto a div dentro do texto mais conteúdo, a área de texto exibida, certamente, ultrapassar uma área de 200 * 200, desta vez produziu uma fita de corte, o motor de renderização vai cortar texto div porção de área de exibição, os resultados finais como mostrado abaixo:

por conseguinte, o elemento laminado com os atributos de contexto precisa de ser cortada ou, em qualquer ponto ao se encontram, uma camada separada será promovido.

Nós também podemos ver através da página Layers nós escrevemos a árvore camada correspondente, para minimizar a profundidade da camada da árvore, para otimizar ainda mais o nosso código da página web.

A camada de desenho

Após a conclusão da construção da camada da árvore, o motor árvore camada de renderização serão sorteados em cada camada, então é como alcançá-lo tirado?

Render mecanismo de processamento vai dividir cada camada em muitas pequenas instrução desenho, e a composição destas instruções no fim de uma lista para ser desenhado, como mostrado abaixo:

Como pode ser visto a partir da figura, a lista de comandos de desenho é muito simples, Deixa-se realizar uma operação de estiramento simples, tais como um desenho ou rosa preto linhas de matriz. Elementos desenhados geralmente exigem um bom número de instruções de desenho, porque cada elemento fundo, primeiro plano, fronteira e requer um comando separado para desenhar. Assim camada fase desenho, o conteúdo da saída a ser tirada é que estas listas.

Da mesma forma, podemos vê-lo clicando na instrução desenho camada correspondente no "Layers" em.

rasterized

lista de desenhar, exceto uma lista de instruções de desenho ea ordem de desenho de gravação, ea operação é desenhado pelo motor de renderização para completar a síntese da rosca.
A figura acima ilustra o relacionamento entre o segmento principal render e fio sintético. Quando pronto para extrair uma lista de camadas, o segmento principal irá chamar a lista apresentada a (cometer) para fio sintético.

Nós falamos sobre o conceito sob o visor:

Normalmente, uma página pode ser muito grande, mas o usuário pode ver apenas parte dele, podemos ver a secção de usuário é chamado de janela.

Os usuários só podem ver através da parte viewport da página, neste caso, para tirar todo o conteúdo da camada, ele teria muito em cima, mas não é necessário.

Por esta razão, a camada de fio sintético vai ser dividido em telhas (telhas) , o tamanho destas telhas são geralmente 256 * 256 ou 512 * 512.
Em seguida, sintetizado de acordo com a proximidade do fio para o mapa de bits de bloco de exibição prioridade é gerado, a operação é realmente gerado pelo mapa de bits Rasterized realizada. Os meios de rasterização chamados converte o bitmap para telhas . Grade bloco é a menor unidade de execução. O processo de renderização mantém uma grade de pool de threads, todos rasterization telha é realizada no pool de threads, o modo de executar como mostrado abaixo:

Em geral, o processo rasterization vai usar a GPU para acelerar a formação, usando a GPU para gerar bitmap o processo rasterizing é chamado rasterização rápida ou GPU, o bitmap resultante é armazenado na memória GPU.

operação GPU é executado na GPU processo, se o rasterized usando a GPU, em seguida, as operações finais de mapa de bits gerados são feitas na GPU, que envolve uma operação de processo cruzado.

Como pode ser visto a partir da figura, o processo de renderização para gerar uma telha enviando instruções para a GPU, e depois executar as telhas de bitmap gerados na GPU, a GPU e armazenados na memória.

Síntese e exibição

Uma vez que todas as peças são rasterized, fio sintético irá gerar um comando para desenhar uma telha - "DrawQuad", e em seguida, enviar o comando para o processo do navegador.

Há um processo de navegador chamado componentes viz, fio sintético DrawQuad para receber comandos enviados através de, em seguida, de acordo com o comando DrawQuad, chamar a sua conteúdo da página na memória, então a memória exibição final na tela.

Aqui, através de uma série de etapas, escrever uma boa HTML, CSS, JavaScript e outros documentos através do navegador irá mostrar uma página bonita.

Renderização resumo gasoduto

Após a introdução de dois artigos, eu tenho uma impressão geral da barra do navegador processo de renderização. Permitam-me resumir: de HTML para DOM calcular, estilo, layout, árvore camada, desenho, rasterization, síntese e display. Tal como mostrado abaixo:

1. O conteúdo HTML processo de renderização no navegador pode ler a árvore DOM estrutura.
2. A folha de estilo CSS motor de renderização em um navegador pode entender styleSheets , o nó DOM estilo calculado.
3. Criar uma árvore de layout , e calcula o layout de elementos de informação.
4. layout de árvore hierárquica, e gera uma árvore hierárquica .
5. Gerado para cada camada lista sorteio e enviá-lo para o fio sintético.
6. Síntese da camada de fios em telhas , e conjunto de encadeamentos rasterization em um mapa de bits em bloco.
7. fio sintético envia uma instrução de desenho DrawQuad ao processo browser.
8. processo do navegador de acordo com mensagens DrawQuad gerados páginas , e exibidas no monitor.