第二章——在HTML中使用JavaScript

2016-05-25  本文已影响35人  26001a36aa12

<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事件触发之前或之后执行。

嵌入代码与外部文件


优点:

文档模式


两种文档模式:混杂模式(又称怪异模式)、标准模式

混杂模式会让IE的行为与包含非标准特性的IE5相同,而标准模式则让IE的行为更接近标准行为。虽然这两种模式主要影响CSS内容的呈现,但在某些情况下也会影响到JavaScript的解释执行。

本书将在必要时再讨论这些因文档模式而影响JavaScript执行的情况

准标准模式,在处理图片间隙的时候(尤其是在表格中使用图片时)不标准。

混杂模式下,不同浏览器行为差异很大,没有一致性。

非常好的文档模式解释网站!

<noscript>元素


在早期,当浏览器不支持脚本的时候,让页面平稳地退化。

这个元素可以包含能够出现在<body>中的任何HTML元素——<script>元素除外。

包含在<noscript>元素中的内容在下列情况下显示:

上一篇下一篇

猜你喜欢

热点阅读