2.2 行内代码与外部文件
 

在HTML中使用JavaScript有两种方式,一是写在<script>里的行内代码,二是使用src来引入外部文件。通常认为最佳实践是尽可能将JavaScript代码放在外部文件中。(这不是强制要求)

推荐使用外部文件的理由如下:

1.可维护性。JavaScript代码如果分散到很多HTML页面,会导致维护困难。而用一个目录保存所有JavaScript文件,则更容易维护,这样开发者就可以独立于使用它们的HTML页面来编辑代码。

2.缓存。浏览器会根据特定的设置缓存所有外部链接的JavaScript文件,这意味着如果两个页面都用到同一个文件,则该文件只需下载一次。这最终意味着页面加载更快。

3.适应未来。通过把JavaScript放到外部文件中,就不必考虑用XHTML或前面提到的注释黑科技(比如之前提到的‘<’被XHTML误认为是标签的开始, ‘</script>’被认为是标签的结束)。包含外部JavaScript文件的语法在HTML和XHTML中是一样的。
 

在配置浏览器请求外部文件时,要重点考虑的一点是它们会占用多少带宽。在SPDY/HTTP2中,预请求的消耗已显著降低,以轻量、独立JavaScript组件形式向客户端送达脚本更具优势。当然,这里假设浏览器支持SPDY/HTTP2,只有比较新的浏览器才满足。如果你还想支持那些比较老的浏览器,可能还是用一个大文件更合适。

 

2.3 文档模式

IE5.5发明了文档模式的概念,即可以使用 doctype 切换文档模式。最初的文档模式有两种:混杂模式(又称为怪异模式或兼容模式,宽松向下兼容旧版本浏览器)和标准模式(又称为严格模式,严格根据web标准渲染)这两种模式的不同主要表现在CSS的渲染上,但也会影响到JavaScript,这被称为副作用

IE初次支持文档模式切换以后,其他浏览器也跟着实现了。随着浏览器的普遍实现,又出现了第三种文档模式:准标准模式(浏览器支持很多标准的特性,但是没有标准规定得那么严格

混杂模式在所有浏览器中都以省略文档开头的 doctype 声明作为开关。

标准模式通过下列几种文档类型声明开启:

<!-- HTML 4.01 Strict -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!-- XHTML 1.0 Strict -->
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">
<!-- HTML5 -->
<!DOCTYPE html>

准标准模式通过过渡性文档类型( Transitional )和框架集文档类型( Frameset )来触发

<!-- HTML 4.01 Transitional -->
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!-- HTML 4.01 Frameset -->
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<!-- XHTML 1.0 Transitional -->
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<!-- XHTML 1.0 Frameset -->
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
frameset.dtd">

准标准模式与标准模式非常接近,很少需要区分。人们在说到“标准模式”时,可能指其中任何一个。而对文档模式的检测也不会区分它们。

 

2.4 <noscript> 元素

<noscript> 元素被用于给不支持JavaScript的浏览器提供替代内容,能在不支持JavaScript的浏览器或JavaScript的支持被关闭的浏览器提供优雅降级。

<noscript> 元素可以包含任何可以出现在 <body> 中的HTML元素, <script> 除外。在下列两种情况下,浏览器将显示包含在 <noscript> 中的内容:①浏览器不支持脚本;②浏览器对脚本的支持被关闭。任何一个条件被满足,包含在 <noscript> 中的内容就会被渲染。
 

2.5 小结

本章的重点可以总结如下。

要包含外部JavaScript文件,必须将 src 属性设置为要包含文件的URL。文件可以跟网页在同一台服务器上,也可以位于完全不同的域。

所有 <script> 元素会依照它们在网页中出现的次序被解释。在不使用 defer 和 async 属性的情况下,包含在 <script>元素中的代码必须严格按次序解释。

对不推迟执行的脚本,浏览器必须解释完位于 <script> 元素中的代码,然后才能继续渲染页面的剩余部分。为此,通常应该把 <script> 元素放到页面末尾,介于主内容之后及</body> 标签之前。

可以使用 defer 属性把脚本推迟到文档渲染完毕后再执行。推迟的脚本总是按照它们被列出的次序执行。

可以使用 async 属性表示脚本不需要等待其他脚本,同时也不阻塞文档渲染,即异步加载。异步脚本不能保证按照它们在页面中出现的次序执行。

通过使用 <noscript> 元素,可以指定在浏览器不支持脚本时显示的内容。如果浏览器支持并启用脚本,则 <noscript> 元素中的任何内容都不会被渲染。