第二章——在HTML中使用JavaScript
<script>元素
HTML为<script>定义了6个属性:
async:表示应该立即下载脚本,但不应妨碍页面中其他操作。比如下载其他资源或等待加载其它脚本,且只对外部脚本有效。
charset:表示通过src属性指定的代码的字符集。
defer:表示脚本可以延迟到文档完全被解析和显示之后再执行,且只对外部脚本文件有效。
language:“text/javascript”或“text/ecmascript”等
src:表示要执行代码的外部文件。
type:脚本语言内容类型。默认值为“text/javascript”
使用<script>方式有两种:直接嵌入、包含外部
1.直接嵌入
只需为其指定type属性(可选)
包含在<script>元素中的代码将被从上到下依次解释。例如:解释器会解释到一个函数定义,然后将该定义保存在自己的环境中,在解释器对函数求值完毕以前,页面中其余内容都不会被浏览器加载显示。
2.包含外部
src属性是必需的。
外部文件只需包含<script>标签内的js代码。
同样,在解析外部js文件时,包括下载该文件时,页面的处理也会暂时停止。
不应在<script>标签内再包含额外的js代码(会被忽略)。
注意:在访问html所在域之外的某个URL的js文件时,要多加小心,以防怀有恶意的程序员随时替换文件。因此,想包含来自不同域的代码,要么你是那个域的所有者,要么那个域的所有者值得信赖。
无论如何包含代码,只要不存在defer和async属性,浏览器都会按照<script>元素出现的先后顺序依次执行。
标签的位置
按照惯例<script>元素放在<head>中,目的是把所有外部文件的引用都放在相同的位置上。但这就意味着必须等全部的js代码都被下载、解析和执行完之后才能呈现页面内容,对于需要很多的js代码的页面来说会有明显的延迟,这时web窗口一片空白。因此,现在很多程序员把js引用放在<body>的最后。
延迟脚本
添加defer属性,这个属性的意思是脚本在执行过程中不会影响页面构造。也就是说,脚本会被延迟到整个页面都解析完毕后再运行(也就是说,当浏览器遇到</html>后再执行,且延迟脚本也是按顺序执行)。并且会先于DOMContentLoaded事件执行。
注意:在现实情况中,延迟脚本不一定按顺序执行,也不一定在DOMContentLoaded事件之后执行,因此,最好只包含一个延迟脚本。
defer属性只适用于外部脚本,因此在HTML5会忽略给嵌入脚本设置的defer属性。IE4~IE7还支持嵌入脚本的defer属性,但IE8之后,完全支持HTML5行为。
很多浏览器不支持defer属性,因此把脚本放在页面底部仍是最佳选择。
异步脚本
添加adync属性,只适用于外部脚本文件,并告诉浏览器立即下载文件。但与defer不同的是,标记为async的脚本并不保证按照指定它们的先后顺序执行。因此,确保两者互不依赖很重要。
指定async属性的目的是不让页面等待两个脚本下载执行,从而异步加载页面其他内容。为此,建议不要在加载期间修改DOM。
异步脚本一定会在页面的onload事件之前执行,但可能会在DOMContentLoaded事件触发之前或之后执行。
嵌入代码与外部文件
优点:
- 可维护性:遍及不同HTML页面的JavaScript维护起来很困难。但如果都放在一个文件夹之下,开发人员也能在不触及HTML标记情况下集中精力编辑js代码。
- 可缓存:浏览器会缓存外部js文件,因此文件只需下载一次,加快页面加载速度。
- 适应未来
文档模式
两种文档模式:混杂模式(又称怪异模式)、标准模式
混杂模式会让IE的行为与包含非标准特性的IE5相同,而标准模式则让IE的行为更接近标准行为。虽然这两种模式主要影响CSS内容的呈现,但在某些情况下也会影响到JavaScript的解释执行。
本书将在必要时再讨论这些因文档模式而影响JavaScript执行的情况
准标准模式,在处理图片间隙的时候(尤其是在表格中使用图片时)不标准。
混杂模式下,不同浏览器行为差异很大,没有一致性。
<noscript>元素
在早期,当浏览器不支持脚本的时候,让页面平稳地退化。
这个元素可以包含能够出现在<body>中的任何HTML元素——<script>元素除外。
包含在<noscript>元素中的内容在下列情况下显示:
- 浏览器不支持脚本
- 浏览器支持脚本,但脚本被禁用