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对象或类的关键字super

    super关键字用于调用一个对象的父对象上的构造函数或方法。 语法 调用 父对象/父类 的构造函数 在构造函数中使用时,super关键字必须在使用this关键字之前使用。 调用 父对象/父类 的静态方法

    JavaScript经验 2021年11月13日
    02280
  • JavaScript对象的可计算属性名

    ECMAScript的对象的键往往是确定的,如果想要实现对象的键根据实际情况赋予不同的键的话,那就得用 可计算属性名 这个功能,把需要计算的表达式放在方括号[]里面。 在ECMA262-5(2009)里面的做法是: 从ECMA262-6(2015)开始添加了可计算属性名这个功能,这里这样做:

    JavaScript经验 2021年11月17日
    02660
  • node -v与nodejs -v的区别

    笔者在使用nodejs的时候发现有node -v和nodejs -v两个命令,经过一番测试后,基本总结如下: 如果从ubuntu系统以外的第三方源安装的nodejs,命令用node -v,例如: 如果从ubuntu系统官方的源里面安装的nodejs,命令用nodejs -v,例如:

    JavaScript经验 2020年9月12日
    02.6K0

发表评论

登录后才能评论