HTML中的JavaScript

一、<script>元素

  1.1 属性

    ①async:可选项。表示立即下载脚本,加载后立即执行,但是不会妨碍文档的解析或其他操作(异步,即和文档解析并行,正常情况下互不打扰)。只对外部的脚本文件有效。

    ②defer:可选项。表示该脚本只有文档完全解析和显示之后再执行(异步,与上面的区别就是执行的顺序,会先于 DOMContentLoaded 事件)。只对外部脚本文件有效。注意:在现实当中,延迟脚本并不一定会按照顺序执行,也不一定会在 DOMContentLoaded 事件触发 前执行,因此好只包含一个延迟脚本。 

    ③charset:可选项。表示src属性指定的代码的字符集(简单来说就是那个外部链接的字符集)。只对外部脚本文件有效。

    ④src:可选项。表示包含要执行的外部脚本文件。

    ⑤type:表示脚本语言的内容类型。比如js脚本就是 text/javascript (其实不需要这个也没关系)。

  1.2 标签位置

    传统做法是将所有的<script>标签全部放在<head>标签中。但是这样的后果就是只有将<head>标签中所有的脚本全部下载并且解析和执行完之后才能开始解析<body>中的内容(用户可以看到的),这无疑会导致浏览器会呈现页面显示出现很大的延迟,延迟期间浏览器窗口会是一片空白。为了避免这个问题,一般将与操作文档无关的脚本全部放在<body>元素的页面内容的后面。

    还有一种解决方法就是刚刚上面说的defer属性和async属性。

二、嵌入代码与外部文件

  推荐使用外部文件引用。有如下有点:

   可维护性:遍及不同 HTML页面的 JavaScript会造成维护问题。但把所有 JavaScript文件都放在 一个文件夹中,维护起来就轻松多了。而且开发人员因此也能够在不触及 HTML标记的情况下, 集中精力编辑 JavaScript代码。

   可缓存:浏览器能够根据具体的设置缓存链接的所有外部 JavaScript文件。也就是说,如果有两个 页面都使用同一个文件,那么这个文件只需下载一次。因此,终结果就是能够加快页面加载的 速度。

   适应未来:通过外部文件来包含 JavaScript 无须使用 XHTML 或注释 hack。HTML 和 XHTML包含外部文件的语法是相同的。

三、<noscript>元素

  早期浏览器有可能不支持JavaScript脚本,这就需要让页面平稳的退化(即不能什么都不显示)。于是<noscript>元素出现了,用在不支持JavaScript的浏览器中显示替代的内容。这个元素可以包含能够出现在<body>中 任何元素----<script>除外。包含在<noscript>元素中的内容只有在下列情况下才会显示出来:

   浏览器不支持脚本;

   浏览器支持脚本,但脚本被禁用。 

  符合上面任何一个条件,浏览器就只会显示<noscript>中的内容。其他情况下,用户永远也看不到<noscript>中的内容。

猜你喜欢

转载自www.cnblogs.com/Falling-snow/p/11993882.html