Trabalho no desenvolvimento do front-end há mais de um ano e ainda tenho algumas idéias no front-end. Hoje vou compartilhar com você.
Várias ferramentas poderosas são indispensáveis para o desenvolvimento do front-end. Por exemplo, estou acostumado a usar o navegador do Google e os fiddller de armas pesadas.
1: situação original
Primeiro, vamos dar uma olhada no seguinte código:
A cópia do código é a seguinte:
< %@ Página de página = "c#" autoeventwireup = "true" codeBehind = "default.aspx.cs" herits = "jsload.default" %>
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-bransitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head id = "head">
<Title> </title>
<link href = "styles/site.css" rel = "stylesheet" type = "text/css"/>
<script src = "jQuery/jQuery-1.4.1.js" type = "text/javascript"> </script>
<script src = "js/hello.js" type = "text/javascript"> </script>
<script src = "js/world.js" type = "text/javascript"> </script>
</head>
<Body>
<img src = "1.jpg" />
</body>
</html>
Estima -se que 90% dos programadores colocarão os arquivos JS na cabeça, mas você já investiu nele? Muitos navegadores usarão um único thread para fazer "Interface UI Atualizar" e "Processamento de script JS".
Ou seja, quando o mecanismo de execução encontra "<Script>", o download e a renderização da página devem aguardar a conclusão da execução do <Script>. Então é triste para o usuário, olhando para a página bloqueada,
Neste momento, o usuário provavelmente o desligará para você.
Do diagrama de cascata acima, podemos ver dois pontos:
Primeiro:
Três arquivos JS são baixados em paralelo, mas de acordo com minha teoria acima, o JS deve ser executado um por um. No entanto, no IE8, Firefox 3.5 e Chrome 2 implementam downloads paralelos de JS.
Isso é muito bom, mas ainda impedirá o download de outros recursos, como imagens.
segundo:
O download da imagem 1.jpg é acionado após a conclusão da execução do JS, o que também verifica a situação mencionada acima e impede que a imagem seja carregada.
Dois: o primeiro passo é otimização
Como o JS impede a renderização da interface do usuário, podemos considerar colocar o JS na frente de </body>, para que o HTML antes do <Script> possa ser renderizado perfeitamente sem permitir que os usuários vejam a página em branco esperando.
E a situação angustiada aumenta naturalmente a amizade.
A cópia do código é a seguinte:
< %@ Página de página = "c#" autoeventwireup = "true" codeBehind = "default.aspx.cs" herits = "jsload.default" %>
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-bransitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head id = "head">
<Title> </title>
<link href = "styles/site.css" rel = "stylesheet" type = "text/css"/>
</head>
<Body>
<img src = "1.jpg" />
<script src = "jQuery/jQuery-1.4.1.js" type = "text/javascript"> </script>
<script src = "js/hello.js" type = "text/javascript"> </script>
<script src = "js/world.js" type = "text/javascript"> </script>
</body>
</html>
A figura abaixo também mostra que 1.jpg e três js são baixados e executados quase paralelos. O tempo é reduzido de "469ms+" acima para "326ms".
Três: a segunda etapa da otimização
Olhando para o "Diagrama de Catinhos" acima, acho que todos também podem ver que os três arquivos JS fizeram três solicitações "Get". Todo mundo sabe que as solicitações recebem precisam ter cabeçalhos HTTP.
Portanto, leva tempo, então a solução que adotamos é naturalmente reduzir as solicitações de obter. Geralmente existem duas opções.
Primeiro: mesclar arquivos JS, como a fusão dos "hello.js" e "World.js" acima.
Segundo: use ferramentas de terceiros, como o Miniify no PHP.
Em relação ao segundo método, o Taobao é bastante usado. Dê uma olhada em um dos scripts e aplica três arquivos JS. Mude de 3 solicitações para 1.
Quarto: o terceiro passo da otimização
Seja colocando o arquivo JS no final do pé ou combinando três em um, sua essência é "modo de bloqueio", o que significa travar o navegador. Quando a página da web se torna cada vez mais complexa, há cada vez mais arquivos JS, ou
O que nos torna dor de cabeça, neste momento, defendemos um "modo de bloqueio sem bloqueio" para carregar scripts JS, ou seja, todas as páginas são apresentadas e, em seguida, JS é adicionado, o que corresponde ao gatilho da janela.onload.
Anexar o JS é o chamado "sem bloqueio", mas uma coisa que precisa receber atenção é se nossos requisitos para JS estão em ordem estrita.
Primeiro: não há requisito de pedido. Por exemplo, se eu não tiver requisito de pedido para "Hello.js" e "World.js", podemos usar o jQuery para anexá -lo dinamicamente.
A cópia do código é a seguinte:
< %@ Página de página = "c#" autoeventwireup = "true" codeBehind = "default.aspx.cs" herits = "jsload.default" %>
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-bransitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head id = "head">
<Title> </title>
<link href = "styles/site.css" rel = "stylesheet" type = "text/css"/>
</head>
<Body>
<img src = "1.jpg" />
<script src = "jQuery/jQuery-1.4.1.js" type = "text/javascript"> </script>
<script type = "text/javascript">
window.onload = function () {
$ ("#head"). Anexe ("<script src = 'js/hello.js' type = 'text/javascript'> <// script>")
$ ("#head"). Anexe ("<script src = 'js/mundial.js' type = 'text/javascript'> <// script>");
}
</script>
</body>
</html>
Como pode ser visto na figura, "Hello.js" e "World.js" aparecem na linha azul, o que significa que esses dois JS são acionados para carregar após o término do DomContentLoad, para que a página não seja bloqueada.
espere.
Segundo: existem requisitos de pedido
Por que é necessário ter pedido? Para o arquivo "Two JS" dinamicamente anexado acima, na série IE, você não pode garantir que o Hello.js seja executado antes do World.js.
Ele executará apenas o código no pedido retornado pelo lado do servidor.
A cópia do código é a seguinte:
< %@ Página de página = "c#" autoeventwireup = "true" codeBehind = "default.aspx.cs" herits = "jsload.default" %>
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-bransitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head id = "head">
<Title> </title>
<link href = "styles/site.css" rel = "stylesheet" type = "text/css"/>
</head>
<Body>
<img src = "1.jpg" />
<script type = "text/javascript">
função loadscript (url, retorno de chamada) {
var script = document.createElement ("script");
script.type = "text/javascript";
// ou seja
if (script.readyState) {
script.onReadyStateChange = function () {
if (script.readyState == "carregado" || script.readyState == "complete") {
script.onReadyStateChange = null;
ligar de volta();
}
}
} outro {
// ONE OUE
script.onload = function () {
ligar de volta();
}
}
script.src = url;
document.getElementById ("Head"). AppendChild (script);
}
// O primeiro passo é carregar a biblioteca da classe jQuery
loadScript ("jQuery/jQuery-1.4.1.js", function () {
// O segundo passo é carregar hello.js
loadScript ("js/hello.js", function () {
// O terceiro passo é carregar World.js
loadScript ("js/mundal.js", function () {
});
});
});
</script>
</body>
</html>
Como você também pode ver, o tempo que leva para que a página seja totalmente carregado é apenas cerca de 310ms, o que melhora bastante o download e a aparência amigável da página da web.
Você também pode conferir tencent.com, que é o que ele faz.
Não é muito útil? Passei algum tempo fazendo essas pesquisas e testes aqui. Espero que você possa ver isso em seu coração. Afinal, essa também é a solução da empresa "Mahua Vine". Por favor, consulte isso.