Pode-se dizer que o desempenho do JavaScript no navegador é o problema de usabilidade mais importante que os desenvolvedores de front-end precisam enfrentar.
Entre as regras YSLOW23 do Yahoo, uma delas é colocar JS no fundo. O motivo é que, de fato, a maioria dos navegadores usa um único processo para processar várias tarefas, como interface do usuário e atualizar as execuções do JavaScript, e apenas uma tarefa é executada ao mesmo tempo. Quanto tempo o JavaScript é executado, quanto tempo leva para esperar para que o navegador esteja ocioso para responder à interação do usuário.
De uma perspectiva básica, isso significa que a aparência da tag <Script> faz com que a página inteira aguarde devido à análise e execução do script. Independentemente de o código JavaScript real estar inlinado ou contido em um arquivo externo irrelevante, o processo de download da página e análise deve ser interrompido e aguarde o script para concluir esses processamento antes de continuar. Esta é uma parte essencial do ciclo de vida da página, porque o script pode modificar o conteúdo da página durante o tempo de execução. Um exemplo típico é a função Document.Write (), por exemplo:
A cópia do código é a seguinte:
<html>
<head>
Exemplo de script <title> </title>
</head>
<Body>
<p>
<script type = "text/javascript">
document.Write ("A data é" + (new Date ()).
</script>
</p>
</body>
</html>
Quando o navegador encontra uma tag <script>, como na página HTML acima, é impossível prever se o JavaScript adiciona conteúdo à tag <p>. Portanto, o navegador para, executa esse código JavaScript e continua a analisar e traduzir a página. O mesmo acontece ao carregar JavaScript usando a propriedade SRC. O navegador deve primeiro baixar o código para o arquivo externo, que leva algum tempo e depois analise e execute esse código. Durante esse processo, a análise da página e a interação do usuário estão completamente bloqueadas.
Como o script bloqueia o processo de download de outros recursos da página, o método recomendado é: Coloque todas as tags <Script> o mais próximo possível da parte inferior da tag <Body> para minimizar o impacto em todo o download da página. Por exemplo:
A cópia do código é a seguinte:
<html>
<head>
Exemplo de script <title> </title>
<link rel = "Stylesheet" type = "text/css" href = "styles.css">
</head>
<Body>
<p> Olá mundo! </p>
<-Exemplo de posicionamento de script recomendado->
<script type = "text/javascript" src = "file1.js"> </script>
<script type = "text/javascript" src = "file2.js"> </script>
<script type = "text/javascript" src = "file3.js"> </script>
</body>
</html>
Este código mostra onde a tag <Script> recomendada está localizada no arquivo HTML. Embora os downloads de script estejam bloqueados entre si, a página foi baixada e exibida na frente do usuário, e a velocidade de entrar na página não parecerá muito lenta. É isso que mencionou acima para colocar JS no fundo.
Além disso, Yahoo! Cria um "identificador federal" para a sua "interface do usuário do Yahoo!, biblioteca Yui", que é implementada por meio de sua "Rede de Entrega de Conteúdo (CDN). Qualquer site pode usar um URL de" manipulação federal "para indicar quais arquivos estão incluídos no pacote de arquivos YUI. Por exemplo, o URL a seguir contém dois arquivos:
A cópia do código é a seguinte:
<script type = "text/javascript" src = "http://yui.yahooapis.com/combo?2.7.0/build/yahoo/yahoo-min.js&2.7.0/build/event/event-min.js"> </script>
Este URL chama os arquivos Yahoo-Min.Js e Event-Min.JS na versão 2.7.0. Esses arquivos são dois arquivos separados no servidor, mas quando o servidor recebe essa solicitação de URL, os dois arquivos serão mesclados e devolvidos ao cliente. Dessa forma, duas tags <Script> não são mais necessárias (um arquivo é carregado para cada tag) e uma tag <cript> pode carregá -las. Esta é a melhor maneira de incluir vários JavaScript externo nas páginas HTML.
Scripts noblocking
O acima é a melhor maneira de carregar vários scripts JavaScript no estado inicial da página. O JavaScript tende a bloquear certos processos de processamento do navegador, como solicitações HTTP e atualizações de interface, que são os problemas de desempenho mais significativos enfrentados pelos desenvolvedores. Manter os arquivos JavaScript curtos e limitar o número de solicitações HTTP é apenas a primeira etapa para criar um aplicativo Web responsivo.
Mas como grandes páginas da web com muitos código JS, manter o código -fonte curto nem sempre é a melhor opção. Assim, surgiram scripts não bloqueadores, o que precisamos é adicionar gradualmente JavaScript à página, que não bloqueará o navegador até certo ponto.
A chave para não bloquear scripts é carregar o código -fonte do JavaScript após o carregamento da página, o que significa que o download do código é iniciado após a emissão do evento de carga da janela.
Explicações relacionadas:
O evento de carregamento da janela será disparado apenas uma vez e apenas uma vez após o carregamento da página.
window.onload = function () {} deve aguardar todo o conteúdo da página da web (incluindo todos os arquivos associados de elementos, como imagens) a serem executados, ou seja, o JavaScript pode acessar qualquer elemento na página neste momento.
Os seguintes métodos são:
Scripts diferidos diferidos scripts
HTML4 define um atributo estendido para a tag <Cript>: adiar.
Esse atributo de adiamento indica que o script contido no elemento não pretende modificar o DOM, para que o código possa ser executado posteriormente. O atributo de adiamento é suportado apenas pelo Internet Explorer 4+ e Firefox 3.5+, e não é uma solução ideal para navegadores. Em outros navegadores, o atributo de adiamento será ignorado. Portanto, a tag <Script> será processada da maneira padrão normal, o que significa que causará bloqueio. Se suportado por vários navegadores convencionais, esta ainda é uma solução eficaz.
A cópia do código é a seguinte:
<script type = "text/javascript" src = "file1.js" adiar> </script>
Uma tag <Script> com o atributo de adiamento pode ser colocada em qualquer lugar do documento e inicia o download quando é analisado até que o DOM carregue (antes que o identificador de evento Onload seja chamado). Quando um arquivo JavaScript difer é baixado, ele não bloqueia outros processos de processamento no navegador, para que esses arquivos possam ser baixados em paralelo com outros recursos.
Você pode usar o seguinte código para testar se o navegador suporta o atributo de adiamento:
A cópia do código é a seguinte:
<html>
<head>
<title> Exemplo de adiamento de script </title>
</head>
<Body>
<cript adie> alert ("adiar"); </script>
<cript> alerta ("script"); </script>
<cript> window.onload = function () {alert ("load");}; </script>
</body>
</html>
Se o navegador não suportar adiar, a ordem das caixas de diálogo pop-up é "adiar", "script" e "carregar".
Se o navegador suportar adiar, a ordem das caixas de diálogo pop-up é "script", "carregamento", "adiar".
Elementos de script dinâmicos
O DOM nos permite criar dinamicamente quase todo o conteúdo do documento de HTML usando JavaScript, e um novo elemento <Script> pode ser criado com muita facilidade através do DOM padrão:
A cópia do código é a seguinte:
1 var script = document.createElement ("script");
2 script.type = "text/javascript";
3 script.src = "file1.js";
4 document.body.appendChild (script);
O novo elemento <Script> carrega o arquivo de origem File1.js. Faça o download deste arquivo imediatamente após a adição do elemento à página. O ponto principal dessa tecnologia é que, não importa onde o download seja iniciado, o download e a execução do arquivo não bloquearão outro processamento de página.
Quando um arquivo é baixado usando um nó de script dinâmico, o código retornado é geralmente executado imediatamente (exceto Firefox e Opera, que aguardam todos os nós de script dinâmicos anteriores a serem executados).
Na maioria dos casos, esperamos chamar uma função para implementar download dinâmico de arquivos JavaScript. A seguinte função encapsulou implementa as implementações padrão e o IE:
A cópia do código é a seguinte:
função loadscript (url, retorno de chamada) {
var script = document.createElement ("script");
script.type = "text/javascript";
if (script.readyState) {// ie
script.onReadyStateChange = function () {
if (script.readyState == "carregado" || script.readyState == "complete") {
script.onReadyStateChange = null;
ligar de volta();
}
};
}
else {// outros
script.onload = function () {callback ();
};
}
script.src = url;
document.getElementsByTagName ("Head") [0] .AppendChild (Script);
}
loadScript ("file1.js", function () {// Call
alerta ("o arquivo está carregado!");
});
Esta função aceita dois parâmetros: o URL do arquivo JavaScript e uma função de retorno de chamada que é acionada quando a recepção JavaScript é concluída. A verificação de atributos é usada para determinar qual evento monitorar. A última etapa é o atributo SRC e adicionar o arquivo JavaScript à cabeça.
O carregamento dinâmico de script é o padrão mais usado em downloads de JavaScript sem bloqueio, pois pode ser navegador cruzado e é fácil de usar.
Injeção de script de script xmlhtttrequest XHR injeção de script
Outra maneira de obter scripts de uma maneira não bloqueadora é injetar scripts na página usando o objeto XMLHTTPREQUEST (XHR). Esta técnica primeiro cria um objeto XHR, depois baixa um arquivo JavaScript e, em seguida, injeta o código JavaScript na página com um elemento dinâmico <Script>. Veja a demonstração:
A cópia do código é a seguinte:
var xhr = novo xmlHttPrequest ();
xhr.open ("get", "file1.js", true);
xhr.onreadyStateChange = function () {
if (xhr.readyState == 4) {
if (xhr.status> = 200 && xhr.status <300 || xhr.status == 304) {// Verifique o código de status HTTP
var script = document.createElement ("script");
script.type = "text/javascript";
script.Text = xhr.ProSeText;
document.body.appendChild (script);
}
}
};
xhr.send (nulo);
Este código envia uma solicitação de obtenção de arquivo para o servidor para obter o File1.js. O manipulador de eventos ONReadyStateChange verifica se o ReadyState é 4 e verifica se o código de status HTTP é válido (200 significa confirmar que a solicitação do cliente foi bem -sucedida, 2xx significa resposta válida e 304 significa uma resposta em cache). Se uma resposta válida for recebida, um novo elemento <script> será criado e seu atributo de texto será definido como a string RespoteText recebida do servidor. Isso realmente criará um elemento <SCRIPT> com o código embutido e, uma vez que um novo elemento <SCRIPT> for adicionado ao documento, o código será executado e pronto para ser usado.
A vantagem desse método é que ele tem uma boa compatibilidade e você pode baixar o código JavaScript que não é executado imediatamente. Como o código retorna fora da tag <cript>, ela não será executada automaticamente após o download, o que permite adiar a execução.
A determinação desse método está sujeita a restrições homólogas do navegador. Os arquivos JavaScript devem ser colocados no mesmo domínio da página e não podem ser baixados do CDN (rede de entrega de conteúdo). Por esse motivo, as grandes páginas da web geralmente não usam a tecnologia de injeção de scripts XHR.
Padrão de noblock recomendado Padrão de noblock recomendado
O método recomendado de carregar uma grande quantidade de JavaScript em uma página é dividido em duas etapas:
A primeira etapa inclui o código necessário para carregar dinamicamente o JavaScript e, em seguida, carregar a peça, exceto o JavaScript necessário para a inicialização da página. Esta parte do código é o menor possível e pode incluir apenas a função loadScript (). O downloads e funciona muito rapidamente e não causa muita interferência na página.
A segunda etapa é usá -lo para carregar o restante do JavaScript depois que o código inicial estiver pronto.
Por exemplo:
A cópia do código é a seguinte:
1 <script type = "text/javascript" src = "carregador.js">>
2 </script> <script type = "text/javascript">
3 loadscript ("the-reest.js", function () {
4 Application.init ();
5});
6
7 </cript>
Coloque esse código antes da etiqueta fechada do corpo </fody>. O benefício de fazer isso é que, primeiro, isso garante que o JavaScript seja executado sem afetar outras partes de outras páginas a serem exibidas. Em segundo lugar, quando a segunda parte do arquivo JavaScript é baixada, todos os DOMs necessários para o aplicativo foram criados e prontos para serem acessados, evitando o uso de processamento de eventos adicionais (como window.onload) para saber se a página está pronta.
Outra opção é incorporar a função loadScript () diretamente na página, que pode reduzir a sobrecarga de uma solicitação HTTP. Por exemplo:
A cópia do código é a seguinte:
1 <script type = "text/javascript">
função loadscript (url, retorno de chamada) {
var script = document.createElement ("script");
script.type = "text/javascript";
if (script.readyState) {// ie script.onReadyStateChange = function () {
if (script.readyState == "carregado" || script.readyState == "complete") {
script.onReadyStateChange = null;
ligar de volta();
}
};
} else {// outros
script.onload = function () {
ligar de volta();
};
}
script.src = url;
document.getElementsByTagName ("Head") [0] .AppendChild (Script);
}
loadScript ("the-reest.js", function () {
Application.init ();
});
</script>
Depois que o código de inicialização da página for baixado, você também pode usar a função loadScript () para carregar as funções funcionais adicionais exigidas pela página.
Apresentando uma ferramenta comum, Ryan Grove, do Yahoo! A pesquisa criou a biblioteca Lazyload (consulte: http://github.com/rgrove/lazyload/). LazyLoad é uma função de carga poderosa (). O LazyLoad possui apenas cerca de 1,5 KB após a escala. Exemplos de uso são os seguintes:
A cópia do código é a seguinte:
<script type = "text/javascript" src = "lazyload-min.js"> </script>
<script type = "text/javascript">
Lazyload.js ("the-reest.js", function () {
Application.init ();
});
</script>
Resumo
1. Coloque todas as tags <Script> na parte inferior da página, próximas à tag de fechamento </fody>. Este método garante que a página seja analisada antes da execução do script.
2. Embale os scripts em grupos. Quanto menos tags <Script> em uma página, mais rápido a página carregará e responderá mais rapidamente. Isso é verdade para arquivos de script externos e código embutido.
3. Existem várias maneiras de baixar JavaScript usando métodos não de bloqueio:
1). Adicione um atributo de adiar à tag <cript>
2). Crie dinamicamente o elemento <Script>, use -o para baixar e executar o código
3). Use o objeto XHR para baixar o código e injetar -o na página
Através da estratégia acima, o desempenho real dos internautas que usam o código JavaScript pode ser bastante aprimorado.
Livro de referência "JavaScript de alto desempenho".