variavel - não representa uma forma possível de inserção de javascript em uma página html:




Onde devo colocar tags<script> na marcação HTML? (14)

Ao incorporar JavaScript em um documento HTML, onde é o local adequado para colocar as tags <script> e incluir o JavaScript? Eu pareço lembrar que você não deve colocá-los na seção <head> , mas colocar no início da seção <body> é ruim, já que o JavaScript terá que ser analisado antes que a página seja renderizada completamente ( ou algo assim). Isso parece deixar o final da seção <body> como um lugar lógico para as tags <script> .

Então, onde é o lugar certo para colocar as tags <script> ?

(Essa questão faz referência a essa pergunta , na qual foi sugerido que as chamadas de função JavaScript fossem movidas de tags <a> para <script> . Estou usando especificamente o jQuery, mas respostas mais gerais também são apropriadas.)


A inclusão de scripts no final é usada principalmente onde o conteúdo / estilos do site é exibido primeiro.

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 inseridos por último, a validação ocorrerá somente após o carregamento de todos os estilos e designs que não são apreciados para sites rápidos e responsivos.


A resposta convencional (e amplamente aceita) é "na parte inferior", porque então todo o DOM terá sido carregado antes que qualquer coisa possa começar a ser executada.

Existem dissidentes, por várias razões, começando com a prática disponível para iniciar intencionalmente a execução com um evento onload de página.


Depende, se você estiver carregando um script que é necessário para estilizar sua página / usando ações em sua página (como clicar em um botão), entã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 de botão, poderá colocá-lo na parte inferior.

Ou melhor coisa (se isso não é uma preocupação) é que você pode fazer uma caixa de carregamento modal, colocar o seu javascript na parte inferior da sua página e fazê-lo 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 que os scripts sejam carregados. E também evite o estilo impróprio.


Dependendo do script e de seu uso, o melhor possível (em termos de carregamento de página e tempo de renderização) pode ser não usar uma tag <script> convencional, mas ativar 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 própria página é renderizada, portanto, não afeta o tempo que o usuário precisa aguardar a exibição da página.

Isso naturalmente exige que o script em si não seja necessário para a renderização da página.

Para obter mais informações, consulte os scripts assíncronos post Coupling de Steve Souders (criador do YSlow, mas agora no Google).


Faz mais sentido para mim incluir o script depois do HTML. Porque na maioria das vezes eu preciso que o Dom carregue antes de executar meu script. Eu poderia colocá-lo na tag head, mas não gosto de toda a sobrecarga do listener de carregamento de documentos. Eu quero que meu código seja curto, doce e fácil de ler.

Eu já ouvi versões antigas do Safari serem quarky ao adicionar seu script fora da tag head, mas eu digo quem se importa. Eu não conheço ninguém usando essa porcaria velha você.

Boa pergunta pelo caminho.


O conselho padrão, promovido pelo Yahoo! Equipe de desempenho excepcional, é colocar as tags <script> no final do corpo do documento para que elas não bloqueiem a renderização da página.

Mas há algumas abordagens mais recentes que oferecem melhor desempenho, conforme descrito nesta resposta sobre o tempo de carregamento do arquivo JavaScript do Google Analytics:

Há alguns ótimos slides de Steve Souders (especialista em desempenho do lado do cliente) sobre:

  • Diferentes técnicas para carregar arquivos JavaScript externos em paralelo
  • seu efeito no tempo de carregamento e renderização da página
  • que tipo de indicadores "em andamento" o navegador exibe (por exemplo, "carregando" na barra de status, cursor do mouse em ampulheta).

Se você estiver usando o JQuery, coloque o javascript em qualquer lugar que 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 seção <head> , pois parece ser o lugar mais limpo.


Tags de script sem bloqueio podem ser colocadas em qualquer lugar:

<script src="script.js" async></script>
<script src="script.js" defer></script>
<script src="script.js" async defer></script>
  • script async será executado de forma assíncrona assim que estiver disponível
  • defer script é executado quando o documento termina a análise
  • async defer script de async defer retorna ao comportamento de adiamento se o assíncrono não for suportado

Esses scripts serão executados de forma assíncrona / após o documento pronto, o que significa que você não pode fazer isso:

<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
-->

Dito isto, os scripts assíncronos oferecem estas vantagens:

  • Download paralelo de recursos :
    O navegador pode baixar folhas de estilo, imagens e outros scripts em paralelo sem esperar que um script seja baixado e executado.
  • Independência de ordem de origem :
    Você pode colocar os scripts dentro da cabeça ou do corpo sem se preocupar com o bloqueio (útil se estiver usando um CMS). A ordem de execução ainda é importante.

É possível contornar os problemas de ordem de execução usando scripts externos que suportam retornos de chamada. Muitas APIs JavaScript de terceiros agora suportam a execução sem bloqueio. Veja um exemplo de como carregar a API do Google Maps de forma assíncrona .


Você pode colocar a maioria das referências <script> no final de <body> ,
Mas se houver componentes ativos em sua página que estejam usando scripts externos,
então sua dependência (arquivos js) deve vir antes disso (idealmente na tag head).


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", então se você colocar o script na cabeça garante que ele comece a carregar antes de tudo, agora, se você colocar dentro do corpo misturado com o código pode fazer com que a página carregue de uma maneira desagradável.

identificar boas práticas não depende de onde.

para apoiá-lo, vou mencionar 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 depois da conclusão do carregamento, os scripts serão carregados

boa prática aqui seria, quando vai implementar cada um?

Espero ter sido útil, qualquer coisa apenas me responder esta questão.


primeiro de tudo para imaginar o meu gráfico e entender a explicação bem, você deve saber essa cor que se referem

você deve colocá-los no final do corpo antes de fechar a tag (body) isso te ajuda a ignorar qualquer erro

<body>
  <script></script>
</body>

mas você pode colocá-los antes da tag de fechamento da cabeça,

<head>
  <script></script>
</head>

mas isso leva a uma experiência de usuário muito ruim, pois o navegador não está realmente fazendo nada útil enquanto o arquivo de script está sendo baixado. mas o que acontece Quando o navegador se depara com a linha acima na sua marcação, é isso que acontece.

  1. Pausar a análise do documento.
  2. Faça um pedido para buscar o arquivo.
  3. Execute o script após o download.
  4. Retomar a análise do documento.

Então, quando é encontrar algum erro este efeito em nosso conteúdo, mas eu quero colocar o meu script no topo da minha marcação e eu não sei se eu erro ou não fazer isso você tem dois atributo eu acho que isso vai ajudá-lo para baixar sua marcação bem não efeito com script

1. Primeiro atributo

Assíncrono: quando você adicionar o atributo assíncrono à sua tag de script, ocorrerá o seguinte.

 <script src="myfile1.js" async></script>
 <script src="myfile2.js" async></script>
  1. Faça solicitações paralelas para buscar os arquivos.
  2. Continue analisando o documento como se nunca tivesse sido interrompido.
  3. Execute os scripts individuais no momento em que os arquivos são baixados.

O melhor desse fluxo é que os scripts podem ser baixados em paralelo enquanto o documento está sendo analisado. Mas há uma ressalva para isso e para o terceiro ponto - o script será executado no momento em que for baixado. Isso pode não ser um problema se um script for completamente autocontido. No entanto, em muitas situações, os scripts podem depender de outros scripts para terem feito alguma inicialização antes de poderem executar. Por exemplo, os plugins jquery requerem que a variável jquery já exista na página.

ATENÇÃO: Os scripts que você programaticamente insere no DOM são assíncronos por padrão, a menos que você defina explicitamente seu atributo async como falso no momento da inserção.

  1. Segundo Atributo

Defer: Defer é muito semelhante ao assíncrono com uma grande diferença. Veja o que acontece quando um navegador encontra um script com o atributo defer.

<script src="myfile1.js" defer></script>
<script src="myfile2.js" defer></script>
  1. Faça solicitações paralelas para buscar os arquivos individuais.
  2. Continue analisando o documento como se nunca tivesse sido interrompido.
  3. Termine de analisar o documento, mesmo que os arquivos de script tenham baixado.
  4. Execute cada script na ordem em que foram encontrados no documento.

Como você pode ver, adiar é basicamente o que você quer fazer nos seus arquivos. No entanto, devido ao suporte limitado do navegador, não é uma opção viável no momento da escrita. ATENÇÃO: Os atributos async e defer são ignorados para scripts que não possuem atributo src.

mas quando devo usar o que? Normalmente, você deseja usar o assíncrono sempre que possível e, em seguida, adiar, em seguida, nenhum atributo. Aqui estão algumas regras gerais a seguir:

  • Se o script é modular e não depende de nenhum script, use
    assíncrono.
  • Se o script depender ou for invocado por outro script, use adiar.
  • Se o script for pequeno e for invocado por um script assíncrono, use um script in-line sem atributos colocados acima dos scripts assíncronos.

No final do documento HTML

Assim, isso não afetará o carregamento do documento HTML no navegador no momento da execução.


<script src="myjs.js"></script>
</body>

A tag script deve ser usada sempre antes do body close ou Bottom no arquivo HTML .

então você pode ver o conteúdo da página antes de carregar o arquivo js .

verifique isso se precisar: http://stevesouders.com/hpws/rule-js-bottom.php


  • Se você ainda se importa muito com suporte e desempenho no IE <10, é sempre SEMPRE fazer suas tags de script as últimas tags do seu corpo HTML. Dessa forma, você está certo de que o restante do DOM foi carregado e você não irá bloquear e renderizar.

  • Se você não se importar muito mais com o IE <10, talvez queira colocar seus scripts na cabeça do seu documento e usar defer para garantir que eles só sejam executados depois que o DOM tiver sido carregado ( <script type="text/javascript" src="path/to/script1.js" defer></script> ). Se você ainda quiser que seu código funcione no IE <10, não esqueça de colocar seu código em uma window.onload .







html