Primeiro de tudo, quero falar sobre o carregamento e a execução do JavaScript. De um modo geral, os navegadores têm dois recursos principais para operação JavaScript: 1) executar imediatamente após o carregamento, 2) bloqueará o conteúdo subsequente da página (incluindo renderização de página e outros recursos) durante a execução. Portanto, se vários arquivos JS forem introduzidos, para o navegador, esses arquivos JS serão carregados em série e executados sequencialmente.
Como o JavaScript pode operar os documentos Dom Tree of HTML, os navegadores geralmente não baixam arquivos CSS em paralelo como downloads paralelos, porque isso é causado pela particularidade dos arquivos JS. Portanto, se o seu JavaScript quiser operar o elemento DOM subsequente, basicamente, o navegador relatará um erro dizendo que o objeto não pode ser encontrado. Porque quando o JavaScript é executado, o HTML atrás está bloqueado e não há nó DOM atrás da árvore DOM. Portanto, o programa é relatado como um erro.
A maneira tradicional
Então, quando você escreve o seguinte código no código:
A cópia do código é a seguinte:
<script type = "text/javascript"
src = "http://coolshell.cn/asyncjs/alert.js"> </script>
Basicamente, a tag <cript> na cabeça bloqueará o carregamento dos recursos subsequentes e a geração de toda a página. Fiz um exemplo especial que você pode dar uma olhada: Exemplo 1. Nota: Existe apenas uma frase no meu alerta.js: alert ("Hello World"), o que facilita para você ver como o JavaScript bloqueia as coisas por trás disso.
Então, você sabe por que muitos sites colocam JavaScript no final da página da web, usando eventos como Window.onload ou DocMuemt Ready.
Além disso, como a maioria do código JavaScript não precisa esperar as páginas, carregamos funções de forma assíncrona. Então, como carregamos de forma assíncrona?
Método Document.Write
Portanto, você pode pensar em document.write () pode resolver o problema de não bloquear. Obviamente, você pensará que, após o documento. Isso é verdade para o código JavaScript na mesma tag de script, mas para toda a página, isso ainda será bloqueado. Aqui está um código de teste:
A cópia do código é a seguinte:
<script type = "text/javascript" idioma = "javascript">
função loadjs (script_filename) {
document.write ('<' + 'script idioma = "javascript" type = "text/javascript"');
document.write ('src = "' + script_filename + '">');
document.write ('<'+'/script'+'' ');
alerta ("loadjs () saída ...");
}
var script = 'http://coolshell.cn/asyncjs/alert.js';
loadjs (script);
alerta ("loadjs () terminado!");
</script>
<script type = "text/javascript" idioma = "javascript">
alerta ("outro bloco");
</script>
O que você acha que a ordem dos alertas é? Você pode tentar em diferentes navegadores. Aqui está a página de teste que você deseja fechar: Exemplo 2.
Propriedades de adiamento e assíncrono do script
O IE apoia as tags de adiamento desde o IE6, como:
A cópia do código é a seguinte:
<script adiar type = "text/javascript" src = "./ alert.js">
</script>
Para o IE, esta tag permitirá que o IE faça o download dos arquivos JS em paralelo e mantenha sua execução até que todo o carregamento DOM seja concluído (DomContentLoaded). Múltiplos adiamentos <Cript> também serão executados na ordem em que aparecem quando executados. O mais importante é que, após o adiamento ser adicionado ao <Script>, ele não bloqueará a renderização do DOM subsequente. No entanto, como esse adiamento é usado apenas para o IE, geralmente é usado menos.
Nosso HTML5 padrão também adiciona um atributo que carrega JavaScript de forma assíncrona: assíncrona. Não importa o valor que você atribua, desde que pareça, ele começa a carregar o arquivo JS de forma assíncrona. No entanto, o carregamento assíncrono terá um problema sério, ou seja, implementa fielmente o "executar imediatamente após o carregamento"; portanto, embora não bloqueie a renderização da página, você não pode controlar a ordem e o tempo de sua execução. Você pode dar uma olhada neste exemplo para experimentá -lo.
Os navegadores que suportam a tag Async são: Firefox 3.6+, Chrome 8.0+, Safari 5.0+, IE 10+, Opera não o suporta (daqui), então esse método também não é muito bom. Porque nem todos os navegadores podem fazer isso.
Crie dinamicamente DOM
Este método é provavelmente o mais usado.
A cópia do código é a seguinte:
função loadjs (script_filename) {
var script = document.createElement ('script');
script.setAttribute ('type', 'text/javascript');
script.setAttribute ('src', script_filename);
script.setAttribute ('id', 'coolshell_script_id');
script_id = document.getElementById ('coolshell_script_id');
if (script_id) {
document.getElementsByTagName ('Head') [0] .RemoveChild (script_id);
}
document.getElementsByTagName ('Head') [0] .AppendChild (Script);
}
var script = 'http://coolshell.cn/asyncjs/alert.js';
loadjs (script);
Esse método quase se tornou uma maneira assíncrona padrão de carregar arquivos JS. Para uma demonstração desse método, consulte: Exemplo 3. Esse método também é reproduzido com as coisas do JSONP, ou seja, posso especificar um script de segundo plano (como PHP) para o script src, e esse PHP retorna uma JavaScript de JavaScript. Você pode dar uma olhada neste exemplo: T.JS (este exemplo é um pequeno exemplo de uma chamada assíncrona de Ajax que colecionei no Weibo antes)
Carregar JS de forma assíncrona sob demanda
O exemplo acima do método DOM resolve o problema da carga assíncrona de JavaScript, mas não resolve o problema que queremos que ele seja executado no momento em que especificamos. Portanto, precisamos apenas vincular o método DOM acima a um determinado evento.
por exemplo:
Amarrado ao evento Window.Load - Exemplo 4
Você deve comparar as diferenças na execução entre o Exemplo 4 e o Exemplo 3. Nos dois exemplos, usei especialmente um JavaScript com o Código destacando para ver a execução do script com o destaque do código e a execução do meu alert.js. Você saberá a diferença)
A cópia do código é a seguinte:
window.load = loadjs ("http://coolshell.cn/asyncjs/alert.js")
Amarrado a um evento específico - Exemplo 5
A cópia do código é a seguinte:
<p style = "cursor: ponteiro" onclick = "loadjs ()"> clique para carregar alert.js </p>
Este exemplo é muito simples. Somente quando você clicar em um elemento DOM, nosso alerta será realmente carregado.
Mais
No entanto, a ligação a um evento específico parece passar um pouco, porque o download real do JS só será feito ao clicar, o que será muito lento novamente. Ok, aqui temos que lançar nosso problema final - queremos baixar o arquivo JS de forma assíncrona na área local do usuário, mas não executá -lo, apenas se quisermos executá -lo.
Seria ótimo se tivéssemos o seguinte método:
A cópia do código é a seguinte:
var script = document.createElement ("script");
script.noexecute = true;
script.src = "alert.js";
document.body.appendChild (script);
// Podemos fazer isso mais tarde
script.execute ();
Infelizmente, este é apenas um lindo sonho. Hoje, nosso JavaScript ainda é relativamente primitivo, e esse "JS Dream" ainda não foi realizado.
Portanto, nossos programadores só podem usar o hack para fazê -lo.
Alguns programadores usam o tipo de script não padrão para cache JavaScript. como:
A cópia do código é a seguinte:
<script type = cache/script src = "./ alert.js"> </script>
Como "cache/script", essa coisa não pode ser analisada pelo navegador, para que o navegador não possa executar o alerta.js como javascript, mas precisa baixar o arquivo JS, para que possa ser feito. Infelizmente, o WebKit segue estritamente os padrões HTML - para coisas não reconhecidas, eles as excluirão diretamente e não farão nada. Então, nosso sonho foi quebrado novamente.
Então, precisamos invadir um pouco mais. Assim como N tocou imagens de pré -carga há muitos anos, podemos usar a tag de objeto (ou a tag iframe), por isso temos o seguinte código:
A cópia do código é a seguinte:
função cachejs (script_filename) {
var cache = document.createElement ('objeto');
cache.data = script_filename;
cache.id = "coolshell_script_cache_id";
cache.width = 0;
cache.Height = 0;
document.body.appendChild (cache);
}
Em seguida, chamamos essa função no final. Por favor, veja o exemplo relacionado: Exemplo 6
Pressione Ctrl+Shit+I Under Chrome, mude para a página de rede e você pode ver que o alert.js foi baixado, mas não foi executado. Em seguida, usamos o método do Exemplo 5, porque o lado do navegador possui cache, o alert.js não será mais baixado do servidor. Portanto, a velocidade de execução pode ser garantida.
Você deve estar familiarizado com esse tipo de pré -carga. Você também pode usar métodos Ajax, como:
A cópia do código é a seguinte:
var xhr = novo xmlHttPrequest ();
xhr.open ('get', 'new.js');
xhr.send ('');
Não vou dizer mais e dar exemplos aqui. Você pode experimentar você mesmo.
Por fim, vamos mencionar dois JS, um é o ControlJS e o outro é o Headjs, que é especialmente usado para criar arquivos JavaScript de carga assíncrona.
OK, isso é todo o conteúdo. Espero que você possa entender o carregamento e a execução de JavaScript, bem como tecnologias relacionadas depois de lê -lo. Ao mesmo tempo, também espero que todos os especialistas do front-end lhe dêem conselhos!