JavaScript高级程序设计--在HTML中使用JavaScript

2.1<script>元素

<script>定义的属性中比较常用的有src(要执行代码的外部文件),defer(脚本可以延迟到文档完全被解析和显示之后进行),async(异步下载该脚本),type(默认是text/javascript,在非IE浏览器可以使用 application/javascript)

一个栗子:

<script type="text/javascript">
	function helloscript(){
		alert("Hi!")
	}
</script>

2.1.1 标签的位置

把全部javascript代码放到</body>前(即<body>元素中页面内容的后面)
原因1: 不需要等到所有javascript代码加载完之后,才开始呈现页面的内容
原因2:javascript中可能包含操作dom的代码,避免提前加载因为找不到元素报错

2.1.2 延迟脚本

使用范围

  1. 只支持外部脚本文件
  2. 并非所有浏览器都支持

所以将延迟脚本放到页面底部仍是最佳选择

<head>
	<script defter="defer" src="example.js"></script>
</head>

HTML5规范要求脚本按照他们的先后顺序执行,然而现实中,第一个脚本不一定先于第二个延迟脚本执行,脚本也不一定会在DOMContetnLoaded事件触发前执行,因此最好只包含一个延迟脚本。

2.1.3 异步脚本

适用范围

  1. 只适用于外部文件
  2. 并非所有浏览器都支持
<head>
	<script async src="example1.js"></script>
	<script async src="example2.js"></script>
</head>

并不能保证按照他们的制定先后顺序执行,一定会在页面的load事件前执行,但不一定在DOMContentLoaded事件前执行

2.2 嵌入代码和外部文件

从可维护性、可缓存(两个页面使用同一个文件只需要下载一次)、适应未来等角度考虑,推荐使用外部文件。

发布了14 篇原创文章 · 获赞 0 · 访问量 500

猜你喜欢

转载自blog.csdn.net/yichen_adf/article/details/104138266