从头认识js-HTML中使用JavaScript

Posted 只会一点前端

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了从头认识js-HTML中使用JavaScript相关的知识,希望对你有一定的参考价值。

<script>元素

html页面中插入javascript的主要办法就是使用<script>元素,HTML4.01为<script>定义了下列6个属性。

1.async:可选,表示应该立即下载脚本,但不应该妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本。最对外部脚本文件有效。

2.charset:可选,表示通过src属性指定的代码的字符集。由于大多数浏览器会忽略它的值,因此这个属性很少人用。

3.defer:可选,表示脚本可以延迟到文档完全被解析和显示之后在执行。只对外部脚本文件有效。IE及更早版本对嵌入脚本也支持这个属性。

4.language: 已废弃。原来用于表示编写代码使用的脚本语言。大多数浏览器会忽略这个属性,因此也没有在使用的必要了。

5.src:可选,表示包含要执行外部文件。

6.type:可选,可以看成是language的替代属性;表示编写代码使用的脚本语言的内容类型。

标签的位置

按照传统的做法,所有<script>元素都应该放在页面的<head>元素中,但是这样子文档就必须等到所有的JavaScript代码下载,解析和执行完成以后,才能开始呈现页面的内容。对于那些所有很多的JavaScript代码的页面来说,这无疑会导致浏览器在呈现页面的时候出现明显的延迟,而延迟期间的浏览器窗口中将会是一片空白,导致用户体验极其不好。为了解决这个问题,现在Web应用程序一般都把全部JavaScript引用放在<body>元素中页面内容的后面,这样在解析包含的JavaScript代码之前,页面的内容将完全呈现在浏览器中。而用户也会因为浏览器窗口显示空白页面的时间缩短而感到打开页面的速度加快了。

延迟脚本

<script>标签定义了defer属性。这个属性的用途是表明脚本在执行是不会影响页面的构造。也就是说,脚本会延迟到整个页面都解析完成之后在运行。因此,在<script>元素中设置defer属性,相当于告诉浏览器立即下载,但延迟执行。前面提到过,defer属性只适用于外部脚本文件。这一点在HTMl5已经明确规定,因此支持HTML5的实现会忽略给嵌入脚本设置的defer属性。IE4-IE7还支持对嵌入脚本的defer,像平常一样处理脚本。为此,把延迟脚本放到页面底部依然是最佳选择。

异步脚本

HTML5为<script>元素定义了async属性。与defer类似,都用于改变处理脚本的行为,也只适用于外部脚本,并告诉浏览器立即下载文件。但于defer不同的是,标记为async的脚本并不保证按指定它们的先后顺序执行。指定async属性的目的是不然页面等待拥有该属性的脚本下载和执行,从而异步加载页面其他内容。为此,建议异步脚本不要在加载期间修改DOM。异步脚本一定会在页面的load事件前执行。支持异步脚本的浏览器有Firefox3.6,Safari5和Chrome。

<noscript>元素

早期浏览器都面临一个特殊的问题,即当浏览器不支持JavaScript时如何让页面平稳退化。对于这个问题的最终解决方案就是创造一个<noscript>元素,用以不支持JavaScript的浏览器显示替代的内容。在<noscript>元素中的内容只有在下列情况才会显示出来:

1.浏览器不支持脚本

2.浏览器支持脚本,但脚本禁用。

以上是关于从头认识js-HTML中使用JavaScript的主要内容,如果未能解决你的问题,请参考以下文章

从头认识Spring-2.6 在注解中使用表达式@Value-注入普通值

从头认识Spring-2.6 在注解中使用表达式@Value-使用表达式注入其他对象的值

从头认识java-18.5 临界区

从头认识设计模式-策略模式-05-引入设计原则:面向接口编程

从头认识多线程-3.1 使用volatile解决异步死循环

从头认识Spring-2.1 自己主动装配-byType