Continue a criar, acelere o crescimento! Este é o terceiro dia da minha participação no "Nuggets Daily New Plan · June Update Challenge", clique para ver os detalhes do evento .

Uma palavra e uma imagem, aproveite a otimização da direção do navegador

1. Escreva na frente

Em meio mês, o Internet Explorer será oficialmente aposentado e o navegador que serviu por mais de 25 anos, o antigo senhor dos navegadores, terminou. Seu fim pode ser resultado de uma combinação de fatores, mas o desempenho do navegador e a experiência do usuário não estão de acordo com as expectativas, o que deve ser um motivo importante para que ele seja "abandonado" pelo mercado e pelos usuários.

Existem muitos navegadores no mercado, mais de 80 segundo estatísticas, muitos dos quais você talvez nunca tenha ouvido falar, como greenbrowser, chromeplus (maple), Lunascape, Candy Browser, Comet Browser, Gomodo Dragon, Bee Browser, Slim Browser Espere.

Não importa qual seja o navegador ou quantos navegadores existam, o desempenho do navegador é sempre um tópico inevitável e geralmente é o "ponto de venda" nas principais conferências sobre navegadores.

Neste ponto, a importância do desempenho do navegador é evidente.

Então, a seguir, vamos dar uma olhada nas otimizações sobre a orientação do navegador e o que podemos fazer especificamente.

Dicas: É importante entender que este artigo é sobre a introdução da otimização da direção do navegador. É muito importante entender e ganhar algo com este artigo.

2. Grande conversa: "uma palavra, uma imagem"

Uma palavra refere-se à palavra "pré", e uma imagem refere-se ao seguinte mapa cerebral que resume a otimização da direção do navegador.

Inteligente você, eu acredito que você viu alguma coisa. Sabemos que diferentes navegadores, seus kernels e seus mecanismos internos de operação podem ser diferentes, o que significa que em termos de técnicas específicas de otimização, pode ser necessário "adaptar-se às condições locais" para funcionar melhor, que é o desempenho de o navegador e a experiência do usuário são aprimoradas.

No entanto, do ponto de vista da estratégia de otimização central, a otimização para a direção do navegador pode ser dividida em duas categorias:

Primeiro, otimização de classe de documento
Em segundo lugar, otimização especulativa

Ou seja, em relação à otimização da direção do navegador, a estratégia de otimização central pode ser dividida em duas direções, uma é a direção da otimização do documento e a outra é a direção da otimização especulativa do navegador.

Em termos de meios técnicos específicos, divide-se principalmente nas seguintes quatro tecnologias:

①Pré-renderização de página

页面预渲染，是通过猜测你可能要访问的目标，从而在隐藏的标签页中预先渲染整个页面。当然，如果你是首次访问某个目标，这可能不理想。注意，这是通过我们的一些表示，例如输入部分关键字，此时我们还没确定访问，也还没正式访问，但浏览器通过一些线索，推测我们可能要访问的目标，预先渲染了这些页面。当用户真正访问浏览器猜中并提前渲染的目标页面时，相信会有一种这个浏览器或这个站点响应速度真快的“错觉”。我们无可否认，这是一种令大多数用户满意的表现，所以，页面预渲染很棒。

②DNS 预解析

DNS 预解析，有点页面预渲染的味道，当然，这一步通常发生在页面预渲染的前面。它是一种通过推测用户可能要访问的域名，提前对这些域名进行解析，从而缩短用户感知到的耗费时间，提升体验的手段。既然是推测提前解析，那么推测的依据是啥呢？这可能和浏览器的标签页，鼠标悬浮指向，导航历史等有关。我们知道，http 请求是存在DNS延迟的，而如果浏览器的推测正确，提前进行了 DNS 解析，这种延迟问题可以得到很好的处理。

③TCP 预连接

浏览器推测性的提前开始 TCP 连接，就是所说的 TCP 预连接，它发生在 DNS 解析之后。TCP 预连接能带来的好处是，假如浏览器的推测正确，那么可以省下一次完整的 TCP 握手实践。不要小瞧这一次握手的时间，这对机器而言，可以发生很多事，尤其是在“抢先占位”这种方向上。

④资源预取

和页面相关的解析器，例如文档解析器、样式解析器、脚本解析器等，可以和网络协议层沟通，声明预加载某些资源。某些资源，当然是指那些初始化渲染必要的资源，必要而又会阻塞继续渲染的资源。

tips1：综上图文信息，一字是四种技术手段的“预”，一图是概括浏览器方向优化的脑图。

tips2：上面提到的策略和手段，其实浏览器本身已经做了，或者说浏览器厂商已经做了。所以说这有点“高谈阔论”的意思，而我们需要清楚这些机制和特点，从而做一些更具体的，普通开发人员能做的事情，从而提升经我们手上开发的应用的性能。

具体落地：一个 link 标签

Em relação à direção técnica http de pré-carregamento e preparação, a tag de link de html também é suportada por ref="prefetch", ref="prerender", ref="dns-prefetch".

Solicitar algumas palavras-chave por meio da tag de link ref para informar ao navegador para usar o mecanismo de otimização correspondente para nós. Um exemplo da aplicação da tag de link a esse respeito:

<!-- 预解析特定的域名 -->
<link rel="dns-prefetch" href="//example.com">
<!-- 预获取某些页面要用到的关键资源 -->
<link rel="subresource" href="//example.com/app.js">
<!-- 预获取某些将来要用的资源，例如浏览器标签上小 logo 图标等 -->
<link rel="prerender" href="//example.com/logo.png">
<!-- 预渲染某些指定页面 -->
<link rel="prefetch" href="//example.com/index.html">
复制代码

dicas: link, elemento de link de recurso externo HTML, especifica o relacionamento entre o documento atual e os recursos externos.

Dicas: Você notou isso? Essas tecnologias específicas usadas nos aplicativos que desenvolvemos estão intimamente relacionadas à conversa "uma palavra, uma imagem" acima mencionada?

escreva nas costas

Portanto, é significativo para nós entender o mecanismo de otimização, estratégias e meios de aprender navegadores e otimizar para aplicativos específicos porque eles estão intimamente relacionados.

Em geral, específicos para cada página de documentação, devemos atentar para os seguintes pontos:

Faça com que os recursos-chave apareçam no documento o mais cedo possível, como alguns scripts js-chave e recursos css.
Esteja ciente dos recursos de bloqueio de renderização do CSS e carregue-os antecipadamente para entregá-los.
Preste atenção ao arranjo razoável dos recursos js, faça uso razoável dos atributos defer (atraso) e assíncrono (assíncrono) do script e considere atrasar ou obter de forma assíncrona alguns recursos de script não críticos, para evitar bloquear a construção do CSSOM e DOM.

Dicas: Todas as tecnologias relacionadas ao navegador devem prestar atenção às diferenças e compatibilidade do navegador, e os meios técnicos relevantes mencionados neste artigo não são exceção.