Onde devo colocar as etiquetas na marcação HTML?
ao incorporar o JavaScript num documento HTML, onde é o local adequado para colocar as marcas <script> e incluiu o JavaScript? Eu me lembro que você não deve colocar estes na seção <head>, mas colocar no início da Seção <body> também é ruim, uma vez que o JavaScript terá que ser analisado antes que a página seja renderizada completamente (ou algo assim). Isto parece deixar o fim da secção <body> como um lugar lógico para as marcas <script>.
(esta pergunta referencia esta pergunta , na qual foi sugerido que as chamadas de função JavaScript deveriam ser movidas de marcas <a> para marcas <script>. Estou a usar jQuery especificamente, mas respostas mais gerais também são apropriadas.)
20 answers
Isto é o que acontece quando um navegador carrega um site com uma etiqueta <script> nele:
- obter a página HTML (por exemplo, índice.html)
- comece a analisar o HTML
- O analisador encontra uma marca
<script>referenciando um ficheiro de programa externo. - o navegador pede o ficheiro do programa. Enquanto isso, o analisador bloqueia e pára de analisar o outro HTML em sua página.
- Depois de algum tempo o script é baixado e posteriormente executado.
- o analisador continua a analisar o resto do documento HTML.
O Passo # 4 causa uma má experiência de utilizador. Seu site basicamente pára de carregar até que você tenha baixado todos os scripts. Se há uma coisa que os usuários odeiam é esperar por um site para carregar.
Porque é que isto acontece?Qualquer script pode inserir o seu próprio HTML via document.write() ou outras manipulações DOM. Isto implica que o analisador tem de esperar até que o programa tenha sido transferido e executado antes de poder processar com segurança o o resto do documento. Afinal, o script poderia ter inserido o seu próprio HTML no documento.
No entanto, a maioria dos programadores de JavaScript já não manipulam o DOM enquanto o documento está a carregar. Em vez disso, eles esperam até que o documento tenha sido carregado antes de modificá-lo. Por exemplo:
<!-- index.html -->
<html>
<head>
<title>My Page</title>
<script type="text/javascript" src="my-script.js"></script>
</head>
<body>
<div id="user-greeting">Welcome back, user</div>
</body>
</html>
// my-script.js
document.addEventListener("DOMContentLoaded", function() {
// this function runs when the DOM is ready, i.e. when the document has been parsed
document.getElementById("user-greeting").textContent = "Welcome back, Bart";
});
Porque o seu navegador não sabe o meu-script.o js não irá modificar o documento até que ele tenha sido transferido e executado, o o analisador pára de analisar.
Recomendação antiquada
A velha abordagem para resolver este problema era colocar <script> etiquetas no fundo do seu <body>, porque isto garante que o analisador não está bloqueado até ao fim.
Esta abordagem tem o seu próprio problema: o navegador não pode começar a descarregar os scripts até que o documento inteiro seja processado. Para sites maiores com scripts e folhas de estilo Grandes, ser capaz de baixar o script o mais rápido possível é muito importante para desempenho. Se o seu site não carregar em 2 segundos, as pessoas irão para outro site.
Numa solução óptima, o navegador começaria a descarregar os seus programas o mais rapidamente possível, ao mesmo tempo que analisava o resto do seu documento.
A abordagem modernaHoje, os navegadores suportam os atributos async e defer nos programas. Estes atributos dizem ao navegador que é Seguro continuar a processar enquanto os scripts estão sendo baixar.
Async
<script type="text/javascript" src="path/to/script1.js" async></script>
<script type="text/javascript" src="path/to/script2.js" async></script>
Scripts com o atributo async são executados assíncronamente. Isto significa que o script é executado assim que é baixado, sem bloquear o navegador entretanto.
Isto implica que é possível transferir o script 2 e executá-lo antes do script 1.
De Acordo com http://caniuse.com/#feat=script-async, 94.57% de todos os navegadores suportam isto.
Adiar
<script type="text/javascript" src="path/to/script1.js" defer></script>
<script type="text/javascript" src="path/to/script2.js" defer></script>
Programas com o adiamento o atributo é executado por ordem (ou seja, primeiro script 1, depois script 2). Isto também não bloqueia o navegador.
Ao contrário dos programas async, os programas de adiamento só são executados depois de todo o documento ter sido carregado.
De Acordo com http://caniuse.com/#feat=script-defer, 94.59% de todos os navegadores suportam isto. 94,92% apoiam-no pelo menos parcialmente.
Uma Nota importante sobre a compatibilidade do navegador: em algumas circunstâncias, IE este primeiro!
Conclusão
O estado actual da arte é colocar scripts na marca <head> e usar os atributos async ou defer. Isto permite que os seus programas sejam baixados o mais rápido possível sem bloquear o seu navegador.
A coisa boa é que o seu site ainda deve carregar corretamente nos 6% dos navegadores que não suportam estes atributos ao acelerar os outros 94%.
Mesmo antes da marca de Fecho, como indicado em
Http://developer.yahoo.com/performance/rules.html#js_bottom
Põe os programas no Fundo
O problema causado pelos scripts é que eles bloqueiam downloads paralelos. A especificação HTTP / 1.1 sugere que os navegadores não transferem mais de dois componentes em paralelo por nome da máquina. Se você servir suas imagens de vários hostnames, você pode obter mais de dois downloads para ocorrer em paralelo. Enquanto um script está baixando, no entanto, o navegador não vai iniciar quaisquer outros downloads, mesmo em diferentes hostnames.
As marcas de programas não-bloqueantes podem ser colocadas em qualquer lado:
<script src="script.js" async></script>
<script src="script.js" defer></script>
<script src="script.js" async defer></script>
-
asynco programa será executado assíncronamente assim que estiver disponível -
defero programa é executado quando o documento tiver terminado o processamento -
async defero programa volta ao comportamento de adiamento se o async não for suportado
Estes programas serão executados assíncronamente / após o documento estar pronto, o que significa que você não posso fazer isto:
<script src="jquery.js" async></script>
<script>jQuery(something);</script>
<!--
* might throw "jQuery is not defined" error
* defer will not work either
-->
Ou isto:
<script src="document.write(something).js" async></script>
<!--
* might issue "cannot write into document from an asynchronous script" warning
* defer will not work either
-->
Ou isto:
<script src="jquery.js" async></script>
<script src="jQuery(something).js" async></script>
<!--
* might throw "jQuery is not defined" error (no guarantee which script runs first)
* defer will work in sane browsers
-->
Ou isto:
<script src="document.getElementById(header).js" async></script>
<div id="header"></div>
<!--
* might not locate #header (script could fire before parser looks at the next line)
* defer will work in sane browsers
-->
-
Transferência paralela de recursos:
O navegador pode baixar folhas de estilo, imagens e outros scripts em paralelo, sem esperar por um script para baixar e executar. -
Independência da ordem da fonte:
Você pode colocar os scripts dentro da cabeça ou do corpo sem se preocupar acerca do bloqueio (útil se estiver a usar um CMS). A ordem de execução ainda importa.
<script> no final do corpo do documento para que eles não bloqueiem a renderização da página.
Mas existem algumas abordagens mais recentes que oferecem melhor desempenho, como descrito em esta resposta sobre o tempo de carga do ficheiro JavaScript do Google Analytics:
Existem alguns grandes slides de Steve Souders (especialista de desempenho do lado do cliente) sobre:
- diferentes técnicas para carregar ficheiros JavaScript externos em paralelo
- o seu efeito sobre o tempo de carregamento e a renderização das páginas
- Que tipo de indicadores de" em progresso " o navegador mostra (por exemplo, 'carregamento' na barra de Estado, cursor do rato ampulheta).
Se estiver a usar o JQuery, então coloque o javascript onde o achar melhor e use {[[0]} para garantir que as coisas são carregadas correctamente antes de executar quaisquer funções.
Numa nota lateral: gosto de todas as minhas etiquetas na secção <head>, pois parece ser o local mais limpo.
XHTML não validará se o script estiver em qualquer lugar que não dentro do elemento cabeça.Parece que pode estar em todo o lado.
Você pode adiar a execução com algo como jQuery para que não importa onde ele está colocado (exceto por um pequeno toque de performance durante o processamento).
<script src="myjs.js"></script>
</body>
A marca do programa deve ser usada sempre antes dobody close ouBottom in HTML file.
Depois poderá ver primeiro o conteúdo da página antes de carregar o ficheiro js.
Verifique isto se necessário : http://stevesouders.com/hpws/rule-js-bottom.php
A resposta convencional (e amplamente aceite) é "no fundo", porque então todo o DOM terá sido carregado antes que alguma coisa possa começar a executar.
Existem dissidentes, por várias razões, começando com a prática disponível para iniciar intencionalmente a execução com uma página onload event.
Dependendo do script e do seu uso, o melhor possível (em termos de carga de página e tempo de renderização) pode ser não usar uma etiqueta convencional
Existem algumas técnicas diferentes, mas a mais simples é usar o documento.createElement ("script") quando a janela.o evento onload é activado. Em seguida, o script é carregado primeiro quando a página em si tem renderizado, assim não impactando o tempo o o usuário tem que esperar que a página apareça.Isto requer naturalmente que o script em si não seja necessário para a renderização da página.
Para mais informações, consulte o post Coupling async scripts por Steve Souders (criador do YSlow mas agora no Google).
Carregado. Desta forma, poderá evitar que os utilizadores usem acções na sua página antes de os programas serem carregados. E também evitar o estilo impróprio.
O programa bloqueia o DOM até ser carregado e executado.
Se você colocar scripts no final de {[[0]} todo o DOM tem a chance de carregar e renderizar (a página irá "mostrar" mais rápido). <script> terá acesso a todos esses elementos DOM.
Por outro lado, se o colocar depois de {[[0]} iniciar ou acima irá executar o programa (onde ainda não existem elementos DOM).
Você está incluindo jQuery o que significa que você pode colocá-lo onde quiser e usar {[[11]}.pronto()
Se você ainda se importa muito com o suporte e desempenho em IE
Se já não se importar muito com o IE<script type="text/javascript" src="path/to/script1.js" defer></script>). Se ainda quiseres code to work in IEwindow.onload even, though!
Você pode colocar a maioria das referências <script> no final de <body>,
mas se houver componentes ativos na sua página que estejam usando scripts externos,
então sua dependência (arquivos js) deve vir antes disso (idealmente em tag head).
O melhor local para escrever o seu código JavaScript no fim do Código do documento, após a marca, para carregar o documento e depois executar o código js.
e se u escrever JQuery Código escrever
$(document).ready (function{
//your code here
});
Incluindo scripts no final é usado principalmente onde o conteúdo / estilos do site deve ser mostrado em primeiro lugar.
Incluindo os scripts na cabeça carrega os scripts cedo e pode ser usado antes do Carregamento de todo o site.
Se os scripts forem introduzidos finalmente, a validação só ocorrerá após o carregamento de todos os estilos e design que não é apreciado para sites de resposta rápida.
No final do documento HTML
De modo que não irá afectar o carregamento do documento HTML no navegador no momento da execução.
Scripts podem ser colocados na, ou na seção de uma página HTML, ou em ambos.
<head>
<script></script>
</head>
or here
<body>
<script></script>
</body>
Mas para que a melhor prática ignore qualquer erro, terá de colocar entre a marca corporal, porque se algum problema descobrir no javascript, o html não será parar o trabalho, mas se você, mas entre a marca de cabeçalho, se algum problema descobrir que irá parar o seu trabalho de Página
Blockquote
Faz mais sentido para mim incluir o script depois do HTML. Porque a maior parte do tempo preciso do Dom para carregar antes de executar o meu guião. Podia pô-lo na etiqueta da cabeça, mas não gosto de ouvir os documentos. Quero que o meu código seja curto, doce e fácil de ler.
Ouvi dizer que as versões antigas do safari eram duvidosas ao adicionar o teu guião fora da etiqueta, mas eu digo Quem se importa. Não conheço ninguém a usar essa porcaria, pois não? Ainda bem. já agora, uma pergunta.Você pode colocar onde você quer os scripts e um não é melhor do que outra prática.
A situação é a seguinte:
A página de carga linearmente, "top-down", por isso, se você colocar o script na cabeça garante que ele começa a carregar antes de tudo, agora, se você colocá-lo dentro do corpo misturado com o código pode causar página carrega um emaranhado de forma.
Identificar as boas práticas não depende de onde.Para te apoiar, vou mencionar o seguinte:
Pode colocar:
E a página irá carregar linearmente
A página é carregada assíncronamente com outro conteúdo
O conteúdo da página irá carregar antes e após a conclusão do Carregamento os programas são carregados
[[1]Boas Práticas aqui seria, quando vai implementar cada um? Espero ter sido útil, qualquer coisa responda-me a esta questão.