Ao incorporar JavaScript em um documento HTML, onde é o local apropriado para colocar as <script>
tags e incluir o JavaScript? Eu me lembro que você não deveria colocá-las na <head>
seção, mas a colocação no início da <body>
seção também é ruim, pois o JavaScript terá que ser analisado antes que a página seja renderizada completamente (ou algo assim). Isso parece deixar o final da <body>
seção como um local lógico para as <script>
tags.
Então, onde é o lugar certo para colocar as <script>
tags?
(Esta pergunta faz referência a essa pergunta , na qual foi sugerido que as chamadas de função JavaScript devam ser movidas de <a>
tags para <script>
tags. Estou usando especificamente o jQuery, mas respostas mais gerais também são adequadas.)
javascript
jquery
html
mipadi
fonte
fonte
Respostas:
Aqui está o que acontece quando um navegador carrega um site com uma
<script>
tag:<script>
marca referenciando um arquivo de script externo.O passo 4 causa uma má experiência do usuário. Seu site basicamente pára de carregar até que você baixe todos os scripts. Se há algo que os usuários odeiam, está esperando o carregamento de um site.
Por que isso acontece?
Qualquer script pode inserir seu próprio HTML via
document.write()
ou outras manipulações DOM. Isso implica que o analisador precisa esperar até que o script seja baixado e executado antes de poder analisar com segurança o restante do documento. Afinal, o script poderia ter inserido seu próprio HTML no documento.No entanto, a maioria dos desenvolvedores de JavaScript não manipula mais o DOM enquanto o documento está sendo carregado. Em vez disso, eles esperam até o documento ser carregado antes de modificá-lo. Por exemplo:
Javascript:
Como o seu navegador não sabe que o my-script.js não modifica o documento até que ele seja baixado e executado, o analisador para de analisar.
Recomendação antiquada
A abordagem antiga para resolver esse problema era colocar
<script>
tags na parte inferior do seu<body>
, porque isso garante que o analisador não seja bloqueado até o final.Essa abordagem tem seu próprio problema: o navegador não pode iniciar o download dos scripts até que todo o documento seja analisado. Para sites maiores com scripts e folhas de estilo grandes, a capacidade de fazer o download do script o mais rápido possível é muito importante para o desempenho. Se o seu site não carregar dentro de 2 segundos, as pessoas irão para outro site.
Em uma solução ideal, o navegador começaria a baixar seus scripts o mais rápido possível, enquanto analisava o restante do documento.
A abordagem moderna
Hoje, os navegadores suportam os atributos
async
edefer
nos scripts. Esses atributos informam ao navegador que é seguro continuar analisando enquanto os scripts estão sendo baixados.assíncrono
Os scripts com o atributo assíncrono são executados de forma assíncrona. Isso significa que o script é executado assim que é baixado, sem bloquear o navegador enquanto isso.
Isso implica que é possível fazer o download e executar o script 2 antes do script 1.
De acordo com http://caniuse.com/#feat=script-async , 97,78% de todos os navegadores suportam isso.
adiar
Os scripts com o atributo defer são executados em ordem (ou seja, primeiro script 1, depois script 2). Isso também não bloqueia o navegador.
Diferentemente dos scripts assíncronos, os scripts de adiamento são executados somente após o carregamento do documento inteiro.
De acordo com http://caniuse.com/#feat=script-defer , 97,79% de todos os navegadores suportam isso. 98,06% o apóiam pelo menos parcialmente.
Uma observação importante sobre a compatibilidade do navegador: em algumas circunstâncias, o IE <= 9 pode executar scripts adiados fora de ordem. Se você precisar oferecer suporte a esses navegadores, leia isso primeiro!
Conclusão
O estado da arte atual é colocar scripts na
<head>
tag e usar os atributosasync
oudefer
. Isso permite que seus scripts sejam baixados o mais rápido possível, sem bloquear o navegador.O bom é que seu site ainda deve carregar corretamente nos 2% dos navegadores que não suportam esses atributos enquanto acelera os outros 98%.
fonte
document.write
opera no dom. A questão não é se um script manipula o dom, mas quando o faz. Desde que toda a manipulação do Dom aconteça após odomready
evento ter sido acionado, você estará bem. O jQuery é uma biblioteca e, como tal, não manipula o dom por si só.async
edefer
não são usados em lugar algum? Quero dizer, eu vi muitas fontes HTML da Internet e não vejo os atributosasync
e emdefer
lugar algum. ...?Pouco antes da etiqueta do corpo de fechamento, conforme indicado em
http://developer.yahoo.com/performance/rules.html#js_bottom
fonte
Tags de script sem bloqueio podem ser colocadas em qualquer lugar:
async
O script será executado de forma assíncrona assim que estiver disponíveldefer
script é executado quando o documento termina de analisarasync defer
script volta ao comportamento de adiamento se o assíncrono não for suportadoEsses scripts serão executados de forma assíncrona / após o documento estar pronto, o que significa que você não pode fazer isso:
Ou isto:
Ou isto:
Ou isto:
Dito isto, os scripts assíncronos oferecem estas vantagens:
navegador pode baixar folhas de estilo, imagens e outros scripts em paralelo, sem aguardar o download e a execução de um script.
você pode colocar os scripts dentro da cabeça ou do corpo sem se preocupar com o bloqueio (útil se você estiver usando um CMS). A ordem de execução ainda é importante.
É possível contornar os problemas da ordem de execução usando scripts externos que suportam retornos de chamada. Muitas APIs JavaScript de terceiros agora oferecem suporte à execução sem bloqueio. Aqui está um exemplo de carregamento da API do Google Maps de forma assíncrona .
fonte
<head>
lógica lógica sofisticada .async
oudefer
quando incluindo jQuery como especificado no segundo bloco:<script src="jquery.js" async></script>
. Você é capaz de explicar o porquê? Eu pensei que precisava ter a tag assíncrona para desempenho - de acordo com a resposta aceita - para que minha página seja carregada mesmo enquanto o jQuery ainda estiver carregando]. Obrigado!<script src=jquery.js>
é seguido por$(function(){ ... })
blocos em algum lugar da página. O carregamento assíncrono não garante que o jQuery será carregado no momento em que o navegador tentar analisar esses blocos, portanto, ele aumentará o erro $ não está definido (você pode não receber o erro se o jQuery tiver sido carregado do cache). Respondi a uma pergunta sobre o carregamento do jQuery de forma assíncrona e preserve$(function(){ ... })
. Vou ver se eu poderia encontrá-lo, ou você pode olhar para esta questão: stackoverflow.com/q/14811471/87015jquery
lib para carregar, depois meus.js
scripts restantes . Quando declaroasync
oudefer
najquery
tag lib script, meus.js
scripts não funcionam. Eu pensei$(function(){ ... })
que protegia isso - acho que não. Solução atual: Eu não adicionodefer
ouasync
nojquery
script lib, mas adicionoasync
nos meus.js
scripts de acompanhamento . Nota: a razão que eu estou fazendo qualquer disto é para tornar o Google Page Speed feliz. Obrigado novamente pela ajuda! Qualquer outro conselho é bem-vindo. (Ou um link para sua resposta anterior). :)O conselho padrão, promovido pelo Yahoo! Equipe de desempenho excepcional, é colocar as
<script>
tags no final do corpo do documento para que elas não bloqueiem a renderização da página.Mas existem algumas abordagens mais recentes que oferecem melhor desempenho, conforme descrito nesta resposta sobre o tempo de carregamento do arquivo JavaScript do Google Analytics:
fonte
Se você estiver usando o JQuery, coloque o javascript onde achar melhor e use
$(document).ready()
para garantir que as coisas sejam carregadas corretamente antes de executar qualquer função.Em uma nota lateral: eu gosto de todas as minhas tags de script na
<head>
seção, pois esse parece ser o lugar mais limpo.fonte
<header>
?$(document).ready()
não significa que você pode colocar seu JavaScript em qualquer lugar que desejar - você ainda precisará colocá-lo após o local<script src=".../jquery.min.js">
onde você incluir o jQuery, para que ele$
exista.header
elemento faz parte do conteúdo do documento HTML e deve ocorrer uma ou mais vezes na tag head dobody
elemento,. The
para metadados e dados sem conteúdo do documento. Trata-se, nos dias de hoje, comdefer
easync
um lugar ideal para tags de script.header
Os elementos devem conter apenas informações que descrevam a seção do documento a seguir.A abordagem moderna em 2019 está usando scripts do tipo de módulo ES6 .
Por padrão, os módulos são carregados de forma assíncrona e adiada. ou seja, você pode colocá-los em qualquer lugar e eles serão carregados em paralelo e executados quando a página terminar de carregar.
As diferenças entre um script e um módulo são descritas aqui:
https://stackoverflow.com/a/53821485/731548
A execução de um módulo comparado a um script é descrita aqui:
https://developers.google.com/web/fundamentals/primers/modules#defer
O suporte é mostrado aqui:
https://caniuse.com/#feat=es6-module
fonte
XHTML não validará se o script estiver em outro lugar que não esteja dentro do elemento head.Acontece que pode estar em toda parte.Você pode adiar a execução com algo como jQuery, para que não importe onde foi colocada (exceto por um pequeno desempenho atingido durante a análise).
fonte
A tag de script deve ser usada sempre antes do fechamento do corpo ou na parte inferior do arquivo HTML .
então você pode ver o conteúdo da página primeiro antes de carregar o arquivo js .
verifique isso se necessário: http://stevesouders.com/hpws/rule-js-bottom.php
fonte
A resposta convencional (e amplamente aceita) é "na parte inferior", porque todo o DOM será carregado antes que qualquer coisa possa começar a ser executada.
Existem dissidentes, por vários motivos, começando com a prática disponível para iniciar intencionalmente a execução com um evento onload de página.
fonte
O melhor local para colocar uma
<script>
tag é antes de fechar a</body>
tag , para que o download e a execução não bloqueiem o navegador para analisar o html no documento,Também o carregamento externo dos arquivos js tem suas próprias vantagens, pois será armazenado em cache pelos navegadores e pode acelerar o tempo de carregamento da página , separa o código HTML e JavaScript e ajuda a gerenciar melhor a base de códigos .
mas os navegadores modernos também suportam algumas outras maneiras ideais como
async
edefer
para carregar externosjavascript
arquivos.Assíncrono e adiado
Normalmente, a execução da página HTML começa linha por linha. Quando um elemento JavaScript externo é encontrado, a análise de HTML é interrompida até que um JavaScript seja baixado e esteja pronto para execução. Esta execução da página normal pode ser alterado usando
defer
easync
atributo.Defer
Quando um atributo adiado é usado, o JavaScript é baixado paralelamente à análise de HTML, mas será executado somente após a análise completa de HTML.
Async
Quando o atributo assíncrono é usado, o JavaScript é baixado assim que o script é encontrado e, após o download, ele é executado de forma assíncrona (paralelamente), juntamente com a análise de HTML.
Quando usar quais atributos
async
.async
, ambos serão executadosparalelamente, juntamente com a análise de HTML, assim que forem baixados
e disponíveis.
defer
para ambos:defer
, o script1 é garantido para executar primeiro,async
, use-o sem atributos e coloque-o acima de todos osasync
scripts.referência: knowledgehills.com
fonte
Depende, se você estiver carregando um script necessário para estilizar sua página / usando ações em sua página (como o clique de um botão), é melhor colocá-lo no topo. Se o seu estilo for 100% CSS e você tiver todas as opções de fallback para as ações dos botões, poderá colocá-lo na parte inferior.
Ou o melhor (se isso não for um problema) é que você pode criar uma caixa de carregamento modal, colocar seu javascript na parte inferior da página e desaparecer quando a última linha do seu script for carregada. Dessa forma, você pode evitar que os usuários usem ações em sua página antes do carregamento dos scripts. E também evite o estilo inadequado.
fonte
A inclusão de scripts no final é usada principalmente onde o conteúdo / estilos do site deve ser mostrado primeiro.
incluir os scripts na cabeça carrega os scripts mais cedo e pode ser usado antes do carregamento de todo o site.
se os scripts forem inseridos finalmente, a validação ocorrerá somente após o carregamento de todos os estilos e designs, o que não é apreciado por sites com rápida resposta.
fonte
Dependendo do script e seu uso, o melhor possível (em termos de carregamento da página e tempo de renderização) pode ser não usar uma tag <script> convencional por si só, mas disparar dinamicamente o carregamento do script de forma assíncrona.
Existem algumas técnicas diferentes, mas a mais direta é usar document.createElement ("script") quando o evento window.onload é acionado. Em seguida, o script é carregado primeiro quando a página é renderizada, não afetando o tempo que o usuário precisa esperar para que a página apareça.
Naturalmente, isso requer que o próprio script não seja necessário para a renderização da página.
Para obter mais informações, consulte a publicação dos scripts de acoplamento assíncrono de Steve Souders (criador do YSlow, mas agora no Google).
fonte
Se você ainda se preocupa muito com suporte e desempenho no IE <10, é melhor SEMPRE transformar suas tags de script nas últimas tags do seu corpo HTML. Dessa forma, você tem certeza de que o restante do DOM foi carregado e não bloqueará e renderizará.
Se você não se importa muito com o IE <10, convém colocar seus scripts no cabeçalho do documento e usá-lo
defer
para garantir que eles sejam executados somente após o carregamento do seu DOM (<script type="text/javascript" src="path/to/script1.js" defer></script>
). Se você ainda deseja que seu código funcione no IE <10, não se esqueça de agrupar seu código de maneirawindow.onload
uniforme!fonte
Blocos de script que o DOM carrega até que seja carregado e executado.
Se você colocar scripts no final de
<body>
todo o DOM, poderá carregar e renderizar (a página será "exibida" mais rapidamente).<script>
terá acesso a todos esses elementos DOM.Por outro lado, colocá-lo após o
<body>
início ou acima irá executar o script (onde ainda não há elementos DOM).Você está incluindo o jQuery, o que significa que você pode colocá-lo onde quiser e usar .ready ()
fonte
Eu acho que depende da execução da página da web. Se a página que você deseja exibir não puder ser exibida corretamente sem antes carregar o JavaScript, inclua o arquivo JavaScript primeiro. Mas se você pode exibir / renderizar uma página da Web sem fazer o download inicial do arquivo JavaScript, coloque o código JavaScript na parte inferior da página. Como emulará um carregamento rápido da página e, do ponto de vista do usuário, parece que a página está carregando mais rapidamente.
fonte
Você pode colocar a maioria das
<script>
referências no final de<body>
,mas se houver componentes ativos em sua página que estejam usando scripts externos,
sua dependência (arquivos js) deverá vir antes disso (idealmente no cabeçalho).
fonte
Antes do final da etiqueta do corpo, a fim de impedir e bloquear a interface do usuário.
fonte
No final do documento HTML
Para que isso não afete o carregamento do documento HTML no navegador no momento da execução.
fonte
O melhor local para escrever seu
JavaScript
código é no final do documento, antes ou logo antes da</body>
tag, para carregar o documento primeiro e depois executar o código js.E se você escrever
JQuery
o seguinte, pode estar no documento principal e ele será executado após o carregamento do documento:fonte
SyntaxError
Faz mais sentido para mim incluir o script após o HTML. Porque na maioria das vezes eu preciso que o Dom seja carregado antes de executar meu script. Eu poderia colocá-lo na tag head, mas não gosto de toda a sobrecarga do ouvinte de carregamento de documentos. Quero que meu código seja curto, doce e fácil de ler.
Ouvi dizer que versões antigas do safari eram quarky ao adicionar seu script fora do cabeçalho, mas digo quem se importa. Não conheço ninguém que use essa porcaria velha.
Boa pergunta, a propósito.
fonte
Você pode colocar onde deseja os scripts e um não é melhor que outra prática.
a situação é a seguinte:
A página carrega linearmente, "de cima para baixo", portanto, se você colocar o script na cabeça, garante que ele comece a carregar antes de tudo, agora, se você o colocar dentro do corpo misturado ao código, poderá causar um carregamento desagradável da página.
identificar boas práticas não depende de onde.
para apoiá-lo, mencionarei o seguinte:
você pode colocar:
e a página carregará linearmente
página é carregada de forma assíncrona com outro conteúdo
o conteúdo da página será carregado antes e após a conclusão do carregamento, os scripts serão carregados
boa prática aqui seria, quando implementará cada?
Espero ter sido útil, qualquer coisa me responda a esse problema.
fonte