目录
2.1 HTML中的JavaScript
2.1.1 标签位置
把所有 JavaScript 文件都放在里,也就意味着必须把所有 JavaScript 代码都下载、解析和解释完成后,才能开始渲染页面(页面在浏览器解析到的起始标签时开始渲染)。
优化:
页面会在处理 JavaScript 代码之前完全渲染页面。
2.1.2 推迟执行脚本
HTML4.01定义了defer
属性,表示脚本在执行时不会改变页面的结构。即脚本会被延迟到整个页面都解析完毕后再运行,告诉浏览器立即下载,但延迟执行。
defer 属性只对外部脚本文件才有效。这是 HTML5 中明确规定的,因此支持 HTML5 的浏览器会忽略行内脚本的 defer 属性。
2.1.3 异步执行脚本
HTML5为<script>元素定义了 async 属性。从改变脚本处理方式上看,async 属性与 defer 类似。当然,它们两者也都只适用于外部脚本,都会告诉浏览器立即开始下载。不过,与 defer 不同的 是,标记为 async 的脚本并不保证能按照它们出现的次序执行。
给脚本添加 async 属性的目的是告诉浏览器,不必等脚本下载和执行完后再加载页面,同样也不必等到该异步脚本下载和执行后再加载其他脚本。正因为如此,异步脚本不应该在加载期间修改 DOM。
2.1.4 动态加载脚本
除了<script>标签,还有其他方式可以加载脚本。因为 JavaScript 可以使用 DOM API,所以通过 向 DOM 中动态添加 script 元素同样可以加载指定的脚本。只要创建一个 script 元素并将其添加到 DOM 即可。
let script = document.createElement('script');
script.src = 'gibberish.js';
script.async = false;
document.head.appendChild(script);
2.1.5 XHTML 中的变化
可扩展超文本标记语言(XHTML,Extensible HyperText Markup Language)是将 HTML 作为 XML 的应用重新包装的结果。与 HTML 不同,在 XHTML 中使用 JavaScript 必须指定 type 属性且值为 text/javascript,HTML 中则可以没有这个属性。XHTML 虽然已经退出历史舞台,但实践中偶尔 可能也会遇到遗留代码。介绍略。
2.2 行内代码与外部文件
虽然可以直接在 HTML 文件中嵌入 JavaScript 代码,但通常认为最佳实践是尽可能将 JavaScript 代 码放在外部文件中。不过这个最佳实践并不是明确的强制性规则。推荐使用外部文件的理由如下。
- 可维护性。JavaScript 代码如果分散到很多 HTML 页面,会导致维护困难。而用一个目录保存 所有 JavaScript 文件,则更容易维护,这样开发者就可以独立于使用它们的 HTML 页面来编辑代码。
- 缓存。浏览器会根据特定的设置缓存所有外部链接的 JavaScript 文件,这意味着如果两个页面都 用到同一个文件,则该文件只需下载一次。这最终意味着页面加载更快。
- 在配置浏览器请求外部文件时,要重点考虑的一点是它们会占用多少带宽。在 SPDY/HTTP2 中, 预请求的消耗已显著降低,以轻量、独立 JavaScript 组件形式向客户端送达脚本更具优势。
2.3 文档模式
最初的文档模式有两种:混杂 模式(quirks mode)和标准模式(standards mode)
随着浏览器的普遍实现,又出现了第三 种文档模式:准标准模式(almost standards mode)。这种模式下的浏览器支持很多标准的特性,但是没 有标准规定得那么严格。主要区别在于如何对待图片元素周围的空白(在表格中使用图片时最明显)。
2.4 <noscript>元素
针对早期浏览器不支持 JavaScript 的问题,需要一个页面优雅降级的处理方案。最终,<noscript> 元素出现,被用于给不支持 JavaScript 的浏览器提供替代内容。虽然如今的浏览器已经 100%支持 JavaScript,但对于禁用 JavaScript 的浏览器来说,这个元素仍然有它的用处。
<noscript>元素可以包含任何可以出现在中的 <body>中的 HTML 元素,<script>除外。在下列两种 情况下,浏览器将显示包含在<noscript>中:
- 浏览器不支持脚本;
- 浏览器对脚本的支持被关闭。
满足任一条件、<noscript>内容将会被渲染,否则不会被渲染。
2.5 小结
JavaScript是通过<script>元素插入到html页面中的:
- 要包含外部JavaScript文件,必须将src属性设置为要包含文件的url。文件可以跟网页在同一台服务器上,也可以位于完全不同的域。
- 所有<script>元素会依照它们在网页中出现的次序被解释,在不使用defer和async时,包含在<script>的代码必须严格按次序解释。
- 对不推迟执行的脚本,浏览器必须解释完位于<script>元素的代码,然后才能继续渲染页面的剩余部分。为此,通常把此元素放到页面末尾。
- 可以使用defer属性把脚本推迟到文档渲染完毕后再执行。推迟脚本的原则上按照次序执行。
- 可以使用async属性表示不需要等待其他脚本,同时也不阻塞文档渲染,即异步加载。异步脚本不能保证按照次序执行。
- 通过使用<noscript>元素,可以指定在浏览器不支持脚本时显示的内容。如果浏览器支持,则<noscript>元素中的任何内容都不会被渲染。