(续···)
与解析嵌入式JavaScript 代码一样,在解析外部JavaScript文件(包括下载文件)时,页面的处理也会暂时停止。
按照惯例,外部JavaScript文件带有.js扩展名。但这个扩展名不是必须的,因为浏览器不会检查包含JavaScript的文章的扩展名。这样一来,使用 JSP、 PHP 或其他服务器端语言动态生成 JavaScript 代码也就成为了可能。但是,服务器通常还是需要看扩展名决定为响应应用哪种 MIME 类型。如果不使用.js 扩展名,请确保服务器能返回正确的 MIME 类型。
Note :
1. 带有src属性的元素不应该在其和标签之间再包含额外的JavaScript代码,如果包含了嵌入的代码,则只会下载和执行外部文件的JavaScript代码,嵌入的代码将会被忽略。
2. 另外,通过<script>元素的src属性还可以包含来自外部域的JavaScript文件。这一点既让<script>元素倍显强大,也让它备受争议。这一点上,<script>元素和<img>非常相似,即它的src 可以指向当前HTML所在域之外的某个域的完整url。在访问自己不能控制的服务器上的JavaScript 文件要多加小心。元素的src属性还可以包含来自外部域的JavaScript文件。这一点既让元素的src属性还可以包含来自外部域的JavaScript文件。这一点既让
3. 无论如何包含代码,只要不存在 defer 和 async 属性,浏览器都会按照<script>元素所在的前后顺序依次进行解析
2.1.1标签的位置
1,传统做法:
所有<script>元素都应该放在页面的<head>元素中。
这样做的目的是所有外部文件(包括css文件和JavaScript文件)的引用都放在相同的地方。这意味着必须等到所有的JavaScript文件被下载,解析和执行完成以后,才能开始呈现页面(浏览器在遇到<body>标签时才开始呈现内容)。 这样就导致浏览器在呈现那些需要很多JavaScript代码的页面时出现明显的延迟。而延迟期间的浏览器窗口中将是一片空白
2,现代WEB应用程序
一般都把全部的JavaScript引用放在<body>元素中页面内容的后面。
在解析包含的JavaScript代码之前,页面的内容将完全呈现在浏览器中。而用户也会因为浏览器窗口显示空白页面的时间缩短而感到打开页面的速度加快了。
2.1.2延迟脚本
HTML4.01 为JavaScript定义了 defer 属性。脚本会被延迟到整个页面都解析完毕后再运行。
在<script>元素中设置defer属性,相当于告诉浏览器 立即下载但是延迟执行。
<html>
<head>
<script type="text/javascript" defer="defer" src="example.js"></script>
</head>
<body>
</body>
</html>
虽然我们把<script>元素放在文档<head>元素中,但其中包含的脚本将延迟到浏览器遇到</html>标签后再执行。
HTML5规范要求脚本按照它们出现的先后顺序执行,因此第一个延迟脚本会先于第二个延迟脚本执行,而这两个脚本会先于DOMContentLoaded事件 (详见第13章)执行。在现实当中,延迟脚本并不一定会按照顺序执行,也不一定会在DOMContentLoaded事件触发前执行,因此最好只包含一个延迟脚本。
defer属性只适用于外部脚本文件,把延迟脚本放在页面底部仍然是最佳选择。
2.1.3 异步脚本
HTML5为<script>元素定义了async属性。这个属性和defer属性类似,都用于改变处理脚本的行为。
同样与 defer 类似, async 只适用于外部脚本文件,并告诉浏览器立即下载文件。但与 defer不同的是,标记为 async 的脚本并不保证按照指定它们的先后顺序执行。
<html>
<head>
<script type="text/javascript" async src="example1.js"></script>
<script type="text/javascript" async src="example2.js"></script>
</head>
<body>
</body>
</html>
在以上代码中,第二个脚本文件可能会在第一个脚本文件之前执行。因此,确保两者之间互不依赖非常重要。
指定async属性的目的是不让页面等待两个脚本下载和执行,从而异步加载页面其他内容。为此,建议异步脚本不要在加载期间修改DOM。
异步脚本一定会在页面的load事件前执行,但可能会在DOMContentLoaded事件触发之前或之后执行。支持异步脚本的浏览器有Firefox 3.6、Safari 5和Chrome。
2.2 嵌入代码和外部文件
在HTML中嵌入JavaScript代码虽然没有问题,但一般认为最好的做法还是尽可能使用外部文件来包含JavaScript代码。
外部文件优点:
1,可维护性(遍及不同HTML页面的JavaScript会造成维护问题。但把所有JavaScript文件都放在一个文件夹中,维护起来就轻松多了。);
2,可缓存(浏览器能够根据具体的设置缓存链接的所有外部JavaScript文件。);
3,适应未来(HTML和XHTML包含外部文件的语法是相同的。);
2.3 文档模式
IE5.5引入了文档模式的概念,而这个概念是通过使用文档类型(doctype)切换实现的。最初的两种文档模式是:混杂模式(quirks mode)和标准模式(standards mode)。混杂模式会让IE的行为与(包含非标准特性的)IE5相同,而标准模式则让IE的行为更接近标准行为。虽然这两种模式主要影响CSS内容的呈现,但在某些情况下也会影响到JavaScript的解释执行。
在此之后,IE又提出一种所谓的准标准模式(almost standards mode)。
准标准模式与标准模式非常接近,它们的差异几乎可以忽略不计。因此,当有人提到“标准模式”时,有可能是指这两种模式中的任何一种。
2.4 <noscript>元素
用以在不支持JavaScript的浏览器中显示替代的内容。这个元素可以包含能够出现在文档<body>中的任何HTML元素——<script>元素除外。
包含在<noscript>元素中的内容只有在下列情况下才会显示出来
浏览器不支持脚本;
浏览器支持脚本,但脚本被禁用。
符合上述任何一个条件,浏览器都会显示<noscript>中的内容,在除此之外的其他情况浏览器不会呈现<noscript>中的内容。
<html>
<head>
<script type="text/javascript" defer="defer" src="example.js"></script>
</head>
<body>
<noscript>
<p>本页面需要浏览器支持(启用)JavaScript</p>
<noscript>
</body>
</html>
这个页面会在脚本无效的情况下向用户显示一条消息。而在启用了脚本的浏览器中,用户永远也不会看到它——尽管它是页面的一部分。