Script脚本放置位置

按照惯例,我们把外部的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>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • JavaScript基础 按照任务中的代码,在IE8下提示:对象不支持“addEventListener”属性或方...
    cooore阅读 440评论 0 0
  • 前端开发面试知识点大纲: HTML&CSS: 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:...
    秀才JaneBook阅读 2,579评论 0 25
  • ――致一婚恋受挫者 当这个世界被包装的面目全非 满眼都是堂皇 亮 丽 悦人眼目的风景 你是一枝惊艳的...
    祁连牧雪阅读 394评论 0 5
  • 文章:清蓝(简书ID:作者清蓝) /1/ 今天我想说的可能要得罪一些人,但我还是情不自禁想要说出我真实的看法: 《...
    作者清蓝阅读 2,439评论 4 18
  • 待我长发及腰, 惆怅香闺暗老。 回首花间起梦处, 陌上谁家年少。
    pan朵阅读 188评论 2 5