第2章 HTML中的JavaScript

HTML中如何加载JavaScript？

直接在网页中嵌入JavaScript或者引入外部JavaScript文件。
最优加载方式？为什么？

尽可能将JavaScript放在外部文件中，在标签之前。好处：方便维护、利于缓存、适应潮流。

从宽带占用方面考虑，如果浏览器支持SPDY/HTTP2（SPDY并不是首字母缩略字，而仅仅是"speedy"的缩写，是Google开发的基于TCP的会话层协议，用于加快页面加载速度），轻量、独立JavaScript组件形式向客户端送达脚本加载更快。因为在该协议下，初次请求时，就可以从同一个地方取得一批文件，并将其逐个放入浏览器缓存，浏览器获得这些独立的资源与获得一个大的JavaScript文件的延时差不多。
HTML何时执行JavaScript脚本？
- 通常情况下是从上到下依次解释，不论是行内代码还是外部文件。
- <script>中的defer属性可以推迟执行脚本，如果有多个脚本推迟，则先推迟的先执行。但都会在DOMContentLoaded事件之前执行。且只对外部脚本文件有效。
- <script>中的async属性可以使脚本异步执行，即告诉浏览器，不必等到当前脚本加载和执行完后再加载页面（加载body中的内容），也不必等当前脚本下载和执行完后再加载其他JavaScript脚本。因此异步脚本不应该在加载期间修改DOM（如果页面已经加载了，儿新的还没加载完成的JS文件又在修改DOM，则会造成页面重新加载内容，造成混乱与不和谐）。使用async也就意味着告诉浏览器不会使用document.write。不过好的Web开发实践不推荐使用该方法。异步脚本保证会在load事件之前执行，但可能会在DOMContentLoaded事件之后执行。
- 使用 DOM API 动态加载脚本，默认是异步方式加载，但考虑有的浏览器不支持异步加载，可以设置为同步加载：
```
let script = document.createElement('script');
script.src = 'gibberish.js';
script.async=false;
document.head.appendChild(script);
```
  但是这种方式获取的资源对浏览器预加载器是不可见的，会影响性能，需要让预加载器知道这些文件的存在。可以在文档头部显示声明：
```
<link rel = 'preload' href "gibberish.js">
```
XHTML是什么？

XHTML（Extensible HyperText Markup Language ），是将HTML作为XML的应用重新包装的结果。XHTML 是更严格、更基于 XML 的 HTML 版本。在XHTML中使用JavaScript必须指定type属性且值为text/javascript，HTML中则可以没有这个属性。

在XHTML中使用<script>标签需要更严格的语法（如<必须用<表示，否则会被解释成新标签的开始），因此编写XHTML文件要么严格按照其语法编写代码，要么使用CDATA块（Character Data）：
```
<script type="text/javascript"><![CDATA[
	function xxx(){
	}
]]></script>
```
上面的代码在兼容XHTML的浏览器中能执行，但在不支持CDATA块的非XHTML兼容浏览器中则不行，为此可用注释符来抵消CDATA标记，使得其既可以适用于现代浏览器（被当做HTML），也可以在兼容XHTML的浏览器中将其当做XHTML文件：
```
<script type="text/javascript">
//<![CDATA[
	function xxx(){
	}
//]]>
</script>
```

doctype文档模式？

HTML文件开头总有一句<!DOCTYPE html> ，即用于告知浏览器当前文档的类型，方便其明确需要用哪种文档类型规范来解析这个文档。
最初的文档模式在 IE5.5 中被提出，有两种模式：混杂模式（quirks mode）和标准模式（standards mode）。混杂模式支持文档中一些非标准的特性，标准模式更适合符合标准的文档。两种模式的主要区别只体现在通过CSS渲染的内容方面，对JavaScript也有一定的关联影响。
其他浏览器陆续实现文档模式，过程中出现了第三种文档模式：准标准模式（almost standards mode），该模式下支持很多标准的特性，但是没有标准规定的严格。主要区别在于如何对待图片元素周围的空白（在表格中使用图片时最明显）。
开启混杂模式：省略文档开头的doctype声明（所有浏览器都是）；

开启标准模式（举例说明）：

<!-- HTML 4.01 严格型 -->
<!DOCTYPE HTML PUBLIC 
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!--该DTD包含所有HTML元素和属性，但不包含展示性的和弃用的元素（比如font），不允许框架集（Framesets）-->

<!-- XHTML 1.0 严格型 -->
<!DOCTYPE html PUBLIC 
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/html1/DTD/xhtml1-strict.dtd">
<!--该DTD包含所有HTML元素和属性，但不包含展示性的和弃用的元素（比如font），不允许框架集（Framesets）必须以格式正确的XML来编写标记-->

<!--HTML5 -->
<!DOCTYPE html>

准标准模式通过过渡性文档类型（Transitional）或（原文是和）框架集文档类型（Frameset）来触发（对应上述例子）：

<!-- HTML 4.01 过渡型 -->
<!DOCTYPE HTML PUBLIC 
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!--该DTD包含所有HTML元素和属性，但不包含展示性的和弃用的元素（比如font），不允许框架集（Framesets）-->

<!-- HTML 4.01 框架集 -->
<!DOCTYPE HTML PUBLIC 
"-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<!--该DTD包含所有HTML元素和属性，但不包含展示性的和弃用的元素（比如font），但允许框架集内容（Framesets）-->

<!-- XHTML 1.0 过渡型 -->
<!DOCTYPE html PUBLIC 
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/html1/DTD/xhtml1-transitionalt.dtd">

<!-- XHTML 1.0 框架集 -->
<!DOCTYPE html PUBLIC 
"-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/html1/DTD/xhtml1-frameset.dtd">

准标准模式和标准模式非常接近，很少需要区分，人们在说“标准模式”时，可能指其中任何一个。

posted @ 2021-06-12 16:08 unuliha 阅读(31) 评论(0) 收藏举报

刷新页面返回顶部

unuliha

第2章 HTML中的JavaScript

公告