【红宝书笔记精简版】第二章 HTML 中的 JavaScript

目录

2.1 HTML中的JavaScript

2.1.1 标签位置

2.1.2 推迟执行脚本

2.1.3 异步执行脚本

2.1.4 动态加载脚本

2.1.5 XHTML 中的变化

2.2 行内代码与外部文件

2.3 文档模式

2.4

2.5 小结


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>元素中的任何内容都不会被渲染。
     

猜你喜欢

转载自blog.csdn.net/weixin_41950078/article/details/120764668