美文网首页
Script脚本放置位置

Script脚本放置位置

作者: mnikn | 来源:发表于2017-04-01 21:23 被阅读61次

按照惯例,我们把外部的javascript脚本放在head标签里。

<!DOCTYPE html>
<head>
  <title>javascript</title>
  <script type="text/javascript" src="example1.js"></script>
  <script type="text/javascript" src="example2.js"></script>
</head>
<body>
</body>

但是由于head里面放置javascript脚本,因此网页内容必须等所有的javascript脚本下载、解析、执行完后才显示,这样会导致页面的显示有明显的延迟,因此我们把script脚本放在body里面。

<!DOCTYPE html>
<head>
  <title>javascript</title>
</head>
<body>
  <script type="text/javascript" src="example1.js"></script>
  <script type="text/javascript" src="example2.js"></script>
</body>

这样虽然解决了问题,但是我们真的没办法把script脚本放在head里面吗?script里面有一些属性可设置script脚本的执行方式。

延迟脚本

script标签里面定义了defer属性,表明脚本会立刻下载,但等整个网页都绘制完再执行,脚本按顺序执行。

<!DOCTYPE html>
<head>
  <title>javascript</title>
  <script type="text/javascript" defer="defer" src="example1.js"></script>
  <script type="text/javascript" defer="defer" src="example2.js"></script>
</head>
<body>
</body>

异步脚本

script标签里面定义了async属性,功能和defer相似,但是并不按脚本顺序执行。

<!DOCTYPE html>
<head>
  <title>javascript</title>
  <script type="text/javascript" async src="example1.js"></script>
  <script type="text/javascript" async src="example2.js"></script>
</head>
<body>
</body>

相关文章

  • Script脚本放置位置

    按照惯例,我们把外部的javascript脚本放在head标签里。 但是由于head里面放置javascript脚...

  • JS笔记-001-基本实现

    HTML 中的脚本必须位于 标签之间。 脚本可被放置在 HTML 页面的...

  • js的学习1

    1. JavaScript介绍 脚本必须位于script与/script标签之间 放置在body和head部分,通...

  • js实现

    HTML中的脚本必须定位于 与 标签之间。脚本可被放置在HTML页面的 和 部分中