JavaScript中script元素的位置

过去,所有<script>都放在<head>标签内,如下所示:

<!DOCTYPE html>
<html>
  <head>
  <title>Example HTML Page</title>
  <script src="example1.js"></script>
  <script src="example2.js"></script>
  </head>
  <body>
  <!-- 这里是页面内容 -->
  </body>
</html>

这样做的目的是把外部的 CSS 和 JavaScript 文件都集中放在一起,缺点就是,必须把所有的 JavaScript 的文件都下载、解析和解释执行完成后,才能渲染<body>页面,这会导致页面渲染明显延迟,为了解决此问题,可将所有或者部分 <script> 放在<body>元素中的页面内容后面,也就是</body>之前,如下所示:

<!DOCTYPE html>
<html>
  <head>
  <title>Example HTML Page</title>
  </head>
  <body>
  <!-- 这里是页面内容 -->
  <script src="example1.js"></script>
  <script src="example2.js"></script>
  </body>
</html>

原创文章,作者:huoxiaoqiang,如若转载,请注明出处:https://www.huoxiaoqiang.com/experience/javascripte/2217.html

(0)
上一篇 2020年10月7日 18:39
下一篇 2020年11月1日 23:08

相关推荐

  • JavaScript函数或类的this关键字

    与其他语言相比,函数的 this 关键字在 JavaScript 中的表现略有不同。 在非严格模式下,总是指向一个对象,在严格模式下可以是任意值。 在绝大多数情况下,函数的调用方式决定了 this 的值(运行时绑定)。ES5 引入了 bind 方法来设置函数的…

    JavaScript经验 2021年11月16日
    03720
  • JavaScript语言的setTimeout()函数

    function function 指在 delay 毫秒之后待推到消息队列的回调函数。 delay delay 指延迟的毫秒数 (1秒等于1000毫秒),如果省略该参数,则 delay 为默认值0。 如果消息队列有其它消息,setTimeout 消息必须等待其它消息处理完。因此 delay 参数仅仅表示最少延迟时间,…

    JavaScript经验 2022年1月23日
    02990
  • npx和npm exec的区别

    当通过npx运行时,所有标志(flag)和选项(option)都必须在任何位置参数之前设置。 当通过npm exec运行时,可以使用双连字符标志(–)来抑制 npm 对应发送到执行命令的开关(switch)和选项(option)的解析。 建议使用双连字符(–)明确告诉 npm 停止分析命令行选项(option)和开…

    JavaScript经验 2021年7月24日
    09730

发表回复

登录后才能评论