js <script>元素应该放在html页面的哪个位置?

简单的html

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Hello World</title>
    <!--<head>处放置script元素-->
    <script src="...外部脚本路径"></script>   
    <script type="text/javascript">
         function testA() {

         }  
    </script>  
</head>

<body>
    <div id="app"></div>

    <!--<body>处放置script元素-->
    <script src="...外部脚本路径"></script>   
    <script type="text/javascript">
         function testB() {

         }  
    </script>   
</body>

</html>
<script> 加载顺序、使用方式的说明:
  1. type="text/javascript" 可加可不加,即使没有指定该属性,默认值也是它。
  2. <script> 有两种使用方式: 页面中嵌入javascript代码引入外部javascript文件
  3. <script> 元素内部的代码会被从上到下依次解释。(在<script> 元素内部所有的代码解释完之前,页面其余内容都不会被浏览器加载和显示)
  4. <script> 元素在解析外部文件(包括下载)时,页面的处理也会暂停(同于解析内部代码)
  5. <script> 元素在引入外部文件(使用src)时,就不能再嵌入内部代码(<script></script>之间添加代码),否则嵌入的代码会被忽略
<script> 的解析顺序的说明:
  • 浏览器会按照 <script> 元素在页面中出现的先后顺序,对它们依次进行解析
<script> 存放位置的说明:
  1. 传统做法,<script> 元素都应该放在页面的 <head> 元素中。(这种做法的目的是把所有的外部文件引用都放在一起,例如 CSS文件和Javascript文件)
  2. 但是,放在 <head> 元素中,就意味着必须等到全部的javascript代码都被下载、解析和执行完成以后,才能开始呈现页面内容。(因为浏览器在遇到 <body> 标签时才开始呈现内容)
  3. 因此,放在 <head> 元素中,容易出现较长时间的空白页面(因为呈现被阻塞,如果javascript代码需要很多的话)
  4. 所以,最终 <script> 元素一般都放在 <body> 标签中页面内容的后面(也就是 </body> 标签的前面)

==================================

<script> 几个记录:

  • 所有 <script> 元素都会按照它们在页面中出现的先后顺序依次被解析。(在不使用 deferasync 属性的情况下)
  • defer 属性,表示延迟解析脚本,即让脚本在文档完全呈现后再执行。(延迟脚本总是按照指定它们的顺序执行)
  • async 属性,表示异步解析脚本,即表示当前脚本不必等待其他脚本,也不必阻挡文档呈现。(区别于 defer,异步脚本不能按照在页面中的出现的顺序执行)
    <script defer="defer" src="...外部脚本路径"></script>   
    <script async="async" src="...外部脚本路径"></script>   
posted @ 2020-12-11 15:37  南歌子  阅读(3936)  评论(0编辑  收藏  举报