índice
1 A maneira de usar o script
Há duas maneiras de usar <script>: incorporar diretamente o código JavaScript na página da web por meio dele e usá-lo para incluir arquivos JavaScript externos na página da web.
1.1 Incorporação de código JavaScript em páginas da web
Para incorporar o código JavaScript embutido, coloque o código diretamente no elemento <script>.
<script>
function sayHi(){
console.log("Hi");
}
</script>
Ao usar código JavaScript embutido, preste atenção à string <script> que não aparece no código. Por exemplo, o código a seguir fará com que o navegador relate um erro:
<script>
function sayScript(){
console.log("</script>");
}
</script>
A maneira como o navegador analisa o script embutido determina que, quando ele vir a string <script>, ele a tratará como uma tag final <script>. Para evitar esse problema, você só precisa do caractere de escape "":
<script>
function sayScript(){
console.log("<\/script>");
}
</script>
Após tal modificação, o código pode ser totalmente interpretado pelo navegador sem causar erros.
1.2 A página da web contém arquivos JavaScript externos
Para incluir JavaScript em arquivos externos, você deve usar o atributo src. O valor desta propriedade é um URL que aponta para um arquivo que contém o código JavaScript, como:
<script src="example.js"></script>
Este exemplo carrega um arquivo externo denominado example.js na página. O próprio arquivo só precisa incluir o código JavaScript a ser colocado entre as tags de início e fim de <script>. Além disso, o elemento <script> que usa o atributo src não deve mais conter outro código JavaScript nas tags <script> e </script>. Se ambos forem fornecidos, o navegador só fará o download e executará o arquivo de script, ignorando o código embutido.
Após a introdução do arquivo externo, o navegador armazenará em cache todos os arquivos JavaScript vinculados externamente de acordo com configurações específicas, o que significa que se o mesmo arquivo for usado em ambas as páginas, o arquivo só precisa ser baixado. Em última análise, isso significa que a página carrega mais rápido.
2 Posição da etiqueta
Independentemente do código incluído, o navegador os interpretará na ordem de <script> na página, desde que não usem os atributos defer e async. O código do segundo elemento <script> deve ser explicado antes que o código do primeiro elemento <script> seja explicado, o terceiro deve esperar a explicação do segundo, e assim por diante.
assíncrono: opcional. Indica que o script deve ser baixado imediatamente, mas outras ações da página, como baixar recursos ou aguardar o carregamento de outros scripts, não podem ser evitadas. Válido apenas para arquivos de script externos.
adiar: Opcional. Indica que o script pode ser atrasado até que o documento seja completamente analisado e exibido. Válido apenas para arquivos de script externos.
No passado, todos os elementos <script> eram colocados na tag <head> da página, conforme mostrado no exemplo a seguir:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="example1.js"></script>
<script src="example2.js"></script>
</head>
<body>
</body>
</html>
O objetivo principal dessa abordagem é colocar os arquivos CSS e JavaScript externos juntos. No entanto, colocar todos os arquivos JavaScript no <head> significa que todos os códigos JavaScript devem ser baixados, analisados e interpretados antes que a página possa ser renderizada (a página é analisada no navegador para a tag de início do <body> para iniciar a renderização) . Para páginas que requerem muito JavaScript, isso pode causar um atraso significativo na renderização da página, durante o qual a janela do navegador fica completamente em branco. Para resolver esse problema, os aplicativos da web modernos geralmente colocam todas as referências de JavaScript atrás do conteúdo da página no elemento <body>, como:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 这里是页面内容 -->
<script src="example1.js"></script>
<script src="example2.js"></script>
</body>
</html>
Dessa forma, a página renderizará completamente a página antes de processar o código JavaScript. Os usuários sentirão que a página carrega mais rápido porque o navegador leva menos tempo para exibir uma página em branco.
3 adiar 和 assíncrono
3.1 adiar
O atributo defer indica que o script não mudará a estrutura da página quando for executado, o que significa que o script será atrasado até que a página inteira seja analisada antes de ser executado. Portanto, definir o atributo defer no elemento <script> é equivalente a dizer ao navegador para fazer o download imediatamente, mas atrasar a execução.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script defer src="example1.js"></script>
<script defer src="example2.js"></script>
</head>
<body>
<!-- 这里是页面内容 -->
</body>
</html>
Embora os elementos <script> estejam contidos no <head> da página, eles não serão executados até que o navegador analise o final da tag </html>. A especificação HTML5 requer que os scripts sejam executados na ordem em que aparecem, portanto, o primeiro script adiado será executado antes do segundo script adiado, e ambos serão executados antes do evento DOMContentLoaded. O atributo defer é válido apenas para arquivos de script externos.
3.2 assíncrono
HTML5 define o atributo async para o elemento <script>. Async é semelhante a adiar e é aplicável a scripts externos. Ao contrário de adiar, os scripts assíncronos não podem ter garantia de execução na ordem em que aparecem , como:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script async src="example1.js"></script>
<script async src="example2.js"></script>
</head>
<body>
<!-- 这里是页面内容 -->
</body>
</html>
Neste exemplo, o segundo script pode ser executado antes do primeiro script, então o ponto importante é que não há dependência entre eles. O objetivo de adicionar o atributo async ao script é informar ao navegador que ele não precisa esperar para que o script seja baixado e executado antes de carregar a página, você não precisa esperar até que o script assíncrono seja baixado e executado antes de carregar outros scripts. Os scripts assíncronos têm garantia de execução antes do evento de carregamento da página, mas podem ser antes ou depois de DOMContentLoaded.