一、了解 <script> 元素以及那些似曾相识但又不惹人注意的xxx
1 <script>属性介绍
在html页面使用javascript有两种方法，一种是引入外部js，一种是自己写js代码。两种方法都涉及到<script>这个标签,在日常使用中，我们经常使用src和type属性，今天让我们来认识下它的其它几个属性。
- src：可选。当引入外部 js 时使用，后面跟地址，如：<script src='aaaa.js'>
- type：可选。表示编写代码使用的脚本语言的内容类型。这个属性不是必需的，没写的情况下默认是 text/javascript。下面列的三点是延伸知识，可直接跳过。
a. text/javascript 和 text/ecmascript 之前最多使用这两个中的一个，ECMAScript5中已经不推荐使用了；
b.服务器在传送Javascript文件时使用的是 application/x-javascript，但在 type 中设置这个值却可能导致脚本被忽略；（尴尬）
c.在非 IE 浏览器中还可以使用以下值：application/javascript 和 application/ecmascript。
- async：可选。只对外部 js 有效，表示立即下载脚本。和 ajax 的 async 一样，异步的意思。
a.告诉浏览器立即下载脚本，但不指定它们执行的先后顺序。
如：按正常执行顺序，应该先执行 aaa.js 再执行 bbb.js，但加了 async 属性后将出现随机性，可能 bbb.js 就比 aaa.js 先执行；
b.异步的另一个注意点是：异步下载 js 文件，而同时可以加载页面的其它内容，而不必等到 js 文件下载和执行后才加载页面其他内容。
c.使用情况： 确保脚本之间互不依赖，没有必要的先后执行顺序；异步脚本在加载期间不要修改 DOM 元素。
<body>
<script src='aaa.js' async></script>
<script src='bbb.js' async></script>
</body>- charset：可选。只对外部 js 有效，控制使用 src 引入外部 js 文件的字符集。（什么引入外部 js 的中文乱码问题可以往这里靠）
- defer：可选。只对外部 js 有效，脚本延迟到文档完全被解析和显示之后才执行。htm 的正常执行顺序从上往下执行，如果<script>标签放在html代码的上面就会先执行。属性值： defer="defer"
立即下载，延迟执行。在加载到 </html> 时才会执行延迟脚本。
在实际操作中，延迟脚本不一定会按照先后顺序进行，因此最好保证一个页面只有一个延迟脚本。
- language：已废弃，不考虑。
2 js代码中的<script>
在页面直接写 js 代码时，不能在代码中的任何地方出现 "</script>" ，因为此时浏览器解析 js 代码时当解析到字符串 "</script>" 会找到里面的 </script> 以为这个标签结束了。（是不是很蠢）
像这样：
// 错误示范：
<script>
function aa () {
alert('</script>'); // 浏览器解析到这里就会结束
}
</script>那么如果需要写字符串 "</script>" 该怎么办呢？有两种方式，请看下面代码：
// 正确示范一：使用转义符号
<script>
function aa () {
alert('<\/script>'); // 这里使用了转义符 \
}
</script>
// 正确示范二：字符串拼接
<script>
function aa () {
alert('</sc'+'ript>'); // 这里使用字符串拼接
}
</script>3 引入外部 js 时容易犯的错
前面说了引入外部 js 文件的格式为：
<script src='aaa.js' type='text/javascript'></script> // 在html中切记不可省略后面那个 </script>
<script src='aaa.js' type='text/javascript' /> // <span style="color:#FF0000;">在 <strong>xhtml 中这样写是正确</strong>的，但<strong>在html中省略后面那个标签就会报错</strong></span>
4 <script>标签的位置
起先是将 <script> 标签放到 <head> 里的，这样会造成一个问题。浏览器在加载 html 页面时，只有遇到 <body> 标签时才开始呈现内容。
如果 <head> 里的外部 js 文件很多的话，那么在页面加载初期，意味着必须等到全部的外部 js 文件代码都被下载、解析和完成以后，才能执行到 <body> 元素，即呈现页面内容。这样会导致浏览器呈现页面时出现明显的延迟。
考虑到上面那种情况，将 <script> 标签放到 <body> 标签里，并且是 <body> 标签里的 html 代码后面。大体结构见下：
<body>
<!-- 这里放html代码 -->
// js 代码放在 body 里，但在 html 代码的下面
<script src='aaa.js'></script>
</body>5 我们希望使用外部 js 而不是在 html 页面写 js 代码
优点如下：
- 可维护性：在统一的位置进行 js 代码的编辑，而不需在众多 html 页面中寻找 js 代码。
- 可缓存： 有多个页面都使用了同一个 js 外部文件，这么这个文件只需下载一次就会被缓存记录。最终加快页面加载速度。
6 <noscript> 标签
在某些不支持 javascript 的浏览器中，<noscript> 可以提醒用户这一点。
<body>
<noscript>
<span>本页面不支持（没有启用）javascript</span>
</noscript>
</body>
扫一扫
10万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
