第二章=》在HTML中使用JavaScript

时间 2019-11-12

标签第二 html 使用 javascript 栏目 HTML 繁體版

原文原文链接

在HTML中使用JavaScripthtml

2.1 <script>元素浏览器

2.1.1 script元素的属性缓存

async: 可选。表示应该当即下载脚本，但不该妨碍页面中的其余操做。只对外部脚本有效。服务器

charset: 可选。表示经过src属性指定的代码的字符集。异步

defer : 可选。表示脚本能够延迟到文档彻底被解析和显示以后再执行。只对外部脚本有效。async

src: 可选。表示包含要执行代码的外部文件spa

type: 可选。表示编写代码使用的脚本语言的内容类型。htm

　　2.1.2 解释顺序事件

a. 包含在<script>元素内部的JS代码将被从上至下一次解释，而后保存在本身的环境当中。在解释器对<script>元素内部的全部代码求值完毕之前，页面中的其他内容都不会被浏览器加载或显示。ip

b.若是要经过<script>元素来包含外部JS文件，那么src属性就是必须的。在解析外部JS文件时，页面的处理也会暂时中止。

2.1.3 标签的位置

现代Web应用程序通常都把所有JS引用放到<body>元素中页面后面，这样在解析包含的JS代码以前，页面的内容将彻底呈如今浏览器中。而用户也会由于浏览器窗口显示空白时间的缩短而感到打开页面的速度加快了

2.1.4 延迟脚本

defer属性只适用于外部脚本文件，会使脚本延迟到整个页面都解析完毕后再运行。在<script>元素中设置defer属性，至关于告诉浏览器当即下载，但延迟执行。

在现实当中，延迟脚本并不必定会按照顺序执行，也不必定会在DOMContentLoaded事件前执行，所以最好只包含一个延迟脚本。

2.1.5 异步脚本

async只适用于外部脚本文件，并告诉浏览器当即下载文件。但与defer不一样的是，标记为async的脚本并不保证按照指定它们的前后顺序执行。因此要确保多个异步脚本之间互不依赖。

指定async属性的目的是不让页面等待两个脚本下载和执行，从而异步加载页面其余内容。为此，建议异步脚本不要在加载期间修改DOM。异步脚本必定会在页面的load事件前执行，但可能会在DOMContentLoaded事件出发以前或以后执行

2.2 选择嵌入代码仍是外部文件

最好的作法仍是尽量使用外部文件来包含JS代码，使用外部文件的优势

可维护性
可缓存：浏览器可以根据具体的设置缓存链接的全部外部JS代码。也就是说，若是有两个页面都是用同一个文件，那么这个文件只需下载一次。所以，最终结果就是可以加快页面加载的速度。
适应将来：经过外部文件来包含JS无须使用XHTML或注释hack

2.3 文档模式

IE5.5引入了文档模式的概念，最初的两种文档模式是：混杂模式与标准模式。混杂模式会让IE的行为与（包含非标准特性的）IE5相同，而标准模式则让IE的行为更接近标准行为。虽然这两种模式主要影响CSS内容的呈现，但也会影响JS的解释执行。

若是在文档开始处没有发现文档类型声明，则全部浏览器都会默认开启混杂模式。但采用混杂模式不是什么值得推荐的作法，由于不一样浏览器在这种模式下的行为差别很是大，若是不使用某些hack技术，跨浏览器的行为根本就没有一致性可言。

因此应该使用标准模式

<!DOCTYPE html>

2.4 小结

把JS插入到HTML页面中要使用<script>元素。使用这个元素能够把JS嵌入到HTML页面中，让脚本与标记混合在一块儿；也能够包含外部的JS文件。

在包含外部JS文件时，必须将src属性设置为指向相应文件的URL。而这个文件既能够是与它的页面位于同一个服务器上的文件，也能够是其余任何域中的文件。

在不使用defer 和 async属性的状况下，全部<script>元素都会按照它们在页面中出现的前后顺序依次被解析

使用defer属性可让脚本在文档彻底呈现以后再执行。延迟脚本老是按照指定它们的顺序执行。

使用async 属性表示当前脚本不比等待其余脚本，也没必要阻塞文档呈现。不能保证异步脚本按照它们在页面中出现的顺序执行。