html

67827字约226分钟

2024-11-13

1. 浏览器是怎么解析 HTML 文档的？

浏览器解析 HTML 文档的过程是一个多阶段的复杂过程，涉及到多个组件的协同工作。简单来说，浏览器会读取 HTML 文件，通过以下步骤逐步解析、渲染页面。下面是浏览器解析 HTML 文档的基本过程：

1. 网络请求（Request）

浏览器通过网络请求（例如 HTTP 或 HTTPS）从服务器获取 HTML 文件。请求的过程通常包括：

用户输入网址或点击链接。
浏览器发出 HTTP 请求，请求 HTML 文件（或者通过 DNS 解析得到的 IP 地址）。
服务器接收请求并返回 HTML 文件（及其他相关资源，如 CSS、JS、图片等）。

2. 词法分析（Lexical Analysis）

一旦浏览器成功获取到 HTML 文档，它会开始解析文档。解析过程从第一个字节开始：

浏览器会读取 HTML 文档的内容，并将其转换成 字符流。
词法分析器（也叫“lexer”或“tokenizer”）将这些字符流分割成一系列的 标记（tokens）。每个标记代表了一个 HTML 元素、属性或文本内容等。

例如，HTML 代码：

<div class="container">Hello, World!</div>

词法分析器将其分解成以下标记：

<div>（开始标签）
class="container"（属性）
Hello, World!（文本节点）
</div>（结束标签）

3. 构建 DOM 树（DOM Tree）

浏览器接着根据标记生成 DOM（文档对象模型）树：

每个标记会成为 DOM 树中的一个节点。
DOM 是一个树形结构，每个元素都是一个节点，元素之间的层级关系反映了 HTML 的结构。
浏览器会根据 HTML 中的标签来创建 DOM 节点，处理嵌套的结构，并建立父子关系。

例如，给定以下 HTML：

<html>
	<head>
		<title>My Page</title>
	</head>
	<body>
		<h1>Hello World</h1>
		<p>Welcome to my website.</p>
	</body>
</html>

DOM 树的结构大致是：

Document
 └── html
      ├── head
      │    └── title
      └── body
           ├── h1
           └── p

4. 构建 CSSOM 树（CSS Object Model）

与 DOM 树并行，浏览器还会解析页面的 CSS，构建 CSSOM（CSS Object Model）树。CSSOM 描述了页面中所有 CSS 样式的结构和应用规则。

浏览器会根据样式表中的规则（包括 <style> 标签和外部引用的 CSS 文件）构建一个表示样式的树形结构。
每个 CSS 规则会对应于 CSSOM 中的一个节点，规则包括了选择器与样式之间的映射。

例如，给定以下 CSS：

body {
	background-color: #f0f0f0;
}

h1 {
	color: red;
}

CSSOM 树的结构可能类似于：

CSSOM
 ├── body { background-color: #f0f0f0 }
 └── h1 { color: red }

6. 布局计算（Layout / Reflow）

当渲染树构建完成后，浏览器会计算每个节点的位置和尺寸。这一步叫做布局（Layout），或称为 Reflow。

浏览器会根据元素的大小、位置、边距、边框等属性来计算它们在页面中的具体布局。
每个元素的位置和大小会影响到整个文档的布局，特别是一些动态变化的元素（如动画、弹出框、宽高变化等）可能会导致布局重新计算（Reflow）。

7. 绘制（Painting）

在布局完成后，浏览器将根据计算出的布局信息对每个元素进行绘制（Painting）：

绘制是将每个节点转换为实际的像素，将颜色、边框、阴影、文字等绘制到屏幕上。
这一步会把渲染树中的每个节点绘制成对应的屏幕像素，形成页面的视觉效果。

8. 合成（Compositing）

绘制完成后，浏览器会将多个图层（如背景、文本、图片等）合成最终的页面：

浏览器将页面分成不同的图层（例如：背景图层、文本图层、UI 元素图层等）。
每个图层会在屏幕上渲染成一个个独立的图像，最终通过合成合成一个完整的页面。

9. 触发页面显示（Rendering）

一旦合成完成，浏览器会将所有图层显示到屏幕上，用户就能看到页面的最终渲染效果。此时，页面的所有 DOM 和样式已经应用完毕，用户可以与页面进行交互。

浏览器渲染流程总结：

请求 HTML：浏览器向服务器请求 HTML 文件。
词法分析：解析 HTML 字符流，生成标记（tokens）。
构建 DOM 树：从标记生成 DOM 树，表示 HTML 结构。
构建 CSSOM 树：解析 CSS 规则，生成 CSSOM 树。
合成渲染树：合并 DOM 和 CSSOM，生成渲染树。
布局计算（Reflow）：计算元素的位置和大小。
绘制（Painting）：绘制页面的样式和内容。
合成图层（Compositing）：将图层合成最终图像。
显示：最终显示渲染结果，用户可以看到和交互页面。

总结：

浏览器的 HTML 解析是一个复杂的过程，涉及从字符流的处理到图层合成的多重步骤。每个阶段都可能涉及不同的优化和技术，以确保页面能够尽快并准确地渲染到屏幕上。对于开发者来说，理解这一过程有助于优化页面加载速度、避免性能瓶颈，并做出更高效的开发决策。

2. 怎么让页面上的某块区域全屏展示？

在网页中，如果你想让某个特定的区域全屏展示，可以使用 全屏 API。通过该 API，可以将页面的某个元素（例如一个 div 或其他 DOM 元素）切换到全屏模式，而不仅仅是整个页面。这对于提供用户更沉浸式体验的应用（如视频播放器、图片展示、图表等）非常有用。

步骤概述：

获取需要全屏展示的元素。
调用全屏 API 来请求将该元素切换到全屏。
提供退出全屏的功能。

1. 请求全屏

要让页面的某个元素进入全屏模式，使用全屏 API 中的 requestFullscreen() 方法。注意，requestFullscreen() 需要在用户的交互事件中调用，浏览器通常不允许自动进入全屏模式。

// 获取需要全屏的元素
const element = document.getElementById('elementId');

// 判断浏览器是否支持全屏 API
if (element.requestFullscreen) {
	element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
	// Firefox
	element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
	// Chrome, Safari 和 Opera
	element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
	// IE/Edge
	element.msRequestFullscreen();
}

2. 退出全屏

要退出全屏模式，可以使用 exitFullscreen() 方法。这个方法通常是通过 document 对象调用的，而不是某个特定的元素。

// 退出全屏
if (document.exitFullscreen) {
	document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
	// Firefox
	document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
	// Chrome, Safari 和 Opera
	document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
	// IE/Edge
	document.msExitFullscreen();
}

3. 监听全屏状态变化

你可以使用 fullscreenchange 事件监听全屏状态的变化。例如，在用户进入或退出全屏时，你可以执行某些操作（如更新 UI）。

// 监听全屏状态变化
document.addEventListener('fullscreenchange', (event) => {
	if (document.fullscreenElement) {
		console.log('进入全屏');
	} else {
		console.log('退出全屏');
	}
});

浏览器兼容性

Chrome, Safari, Opera, Edge：支持标准的 requestFullscreen 和 exitFullscreen。
Firefox：支持 mozRequestFullScreen 和 mozCancelFullScreen。
Internet Explorer：支持 msRequestFullscreen 和 msExitFullscreen。

注意事项

用户交互：全屏 API 必须在用户的交互（如点击、键盘事件等）中触发，不允许自动调用。
权限控制：一些浏览器会要求页面处于用户的交互模式，才能触发全屏模式。
退出全屏：退出全屏是用户可以操作的，可以通过按 Esc 键退出，或者通过脚本调用 exitFullscreen()。

通过这种方式，你可以方便地将页面的某个区域或元素切换为全屏展示，提供更沉浸的体验。

3. 怎么在页面上获取用户的定位信息？

要在网页中获取用户的地理定位信息，浏览器提供了 Geolocation API，这是一个简单的 API，可以用来访问用户的地理位置。通过这个 API，开发者可以获取用户的经度、纬度、精度等信息。

步骤概述

使用 navigator.geolocation 对象获取地理位置。
调用 getCurrentPosition() 获取用户当前位置，或者使用 watchPosition() 获取实时位置更新。
处理定位信息，包括成功回调和错误回调。

1. 获取当前位置（`getCurrentPosition()`）

getCurrentPosition() 方法用于获取用户当前位置的一次性结果。这个方法会返回用户当前的位置（经度、纬度、精度等）。

if (navigator.geolocation) {
	navigator.geolocation.getCurrentPosition(
		function (position) {
			// 成功获取定位
			const latitude = position.coords.latitude; // 纬度
			const longitude = position.coords.longitude; // 经度
			const accuracy = position.coords.accuracy; // 精度，单位：米

			console.log(`纬度: ${latitude}`);
			console.log(`经度: ${longitude}`);
			console.log(`精度: ${accuracy} 米`);
		},
		function (error) {
			// 获取定位失败
			console.error('定位失败: ' + error.message);
		}
	);
} else {
	console.log('浏览器不支持 Geolocation API');
}

2. 获取实时位置（`watchPosition()`）

如果你需要持续跟踪用户的位置，可以使用 watchPosition() 方法。这个方法会返回一个位置追踪器 ID，并且可以持续获取用户的地理位置更新。每当用户的地理位置发生变化时，会触发成功回调。

if (navigator.geolocation) {
	const watchId = navigator.geolocation.watchPosition(
		function (position) {
			const latitude = position.coords.latitude;
			const longitude = position.coords.longitude;
			const accuracy = position.coords.accuracy;

			console.log(`实时纬度: ${latitude}`);
			console.log(`实时经度: ${longitude}`);
			console.log(`实时精度: ${accuracy} 米`);
		},
		function (error) {
			console.error('定位失败: ' + error.message);
		}
	);
} else {
	console.log('浏览器不支持 Geolocation API');
}

停止追踪位置：可以使用 clearWatch() 方法来停止追踪实时位置。

navigator.geolocation.clearWatch(watchId);

3. 错误处理

在获取用户位置时，可能会遇到以下几种常见的错误：

PERMISSION_DENIED：用户拒绝提供位置权限。
POSITION_UNAVAILABLE：无法获取到当前位置。
TIMEOUT：请求定位超时。

你可以在错误回调函数中处理这些错误。

navigator.geolocation.getCurrentPosition(
	function (position) {
		console.log('定位成功');
	},
	function (error) {
		switch (error.code) {
			case error.PERMISSION_DENIED:
				console.error('用户拒绝了定位请求');
				break;
			case error.POSITION_UNAVAILABLE:
				console.error('无法获取定位信息');
				break;
			case error.TIMEOUT:
				console.error('请求定位超时');
				break;
			default:
				console.error('未知错误');
				break;
		}
	}
);

4. 定位选项（`options`）

在请求地理位置时，可以传递一个可选的 options 对象，来控制定位的精度、最大等待时间等。例如：

const options = {
	enableHighAccuracy: true, // 是否启用高精度定位
	timeout: 10000, // 超时时间（毫秒）
	maximumAge: 0, // 允许缓存位置的最大时间（毫秒）
};

navigator.geolocation.getCurrentPosition(
	function (position) {
		console.log(position);
	},
	function (error) {
		console.error(error);
	},
	options
);

enableHighAccuracy：如果为 true，则浏览器会尽力提供最准确的位置，可能会影响性能和耗电。
timeout：请求的最大超时时间，单位为毫秒。如果请求超时，会触发错误回调。
maximumAge：如果指定了此选项，浏览器会缓存之前的定位信息，且如果缓存数据仍然有效，就不会重新请求。

5. 获取位置的格式

getCurrentPosition() 和 watchPosition() 的成功回调都将返回一个 position 对象，包含以下信息：

coords：包含经纬度、精度等信息的对象：
- latitude：纬度。
- longitude：经度。
- accuracy：位置的精度，单位是米。
- altitude：海拔（如果支持）。
- altitudeAccuracy：海拔的精度（如果支持）。
- heading：朝向（如果支持）。
- speed：速度（如果支持）。
timestamp：请求的时间戳。

6. 地理定位的权限问题

权限要求：获取用户位置时，浏览器通常会要求用户授权。如果用户拒绝位置请求，错误回调将会触发 PERMISSION_DENIED 错误。
HTTPS：为了确保安全，Geolocation API 只能在 HTTPS 协议下或者 localhost 上运行，浏览器会阻止在 HTTP 网站中使用该功能。

总结

通过使用 Geolocation API，你可以轻松获取用户的地理位置。具体流程如下：

使用 getCurrentPosition() 获取一次性的位置。
使用 watchPosition() 获取实时位置更新。
配置选项（如精度、超时）来控制定位请求。
处理错误和定位权限的情况。

这对于基于位置的服务（如地图、导航、附近商家等）非常有用。

4. html 中有哪些常见的实体字符？

在 HTML 中，实体字符（也称为字符实体或字符引用）用于表示一些无法直接在 HTML 文本中输入的特殊字符，或者为了避免与 HTML 标签冲突的字符。这些字符通常以 & 开头，以 ; 结尾。

以下是一些常见的 HTML 实体字符及其对应的符号：

1. 常见符号实体字符

符号	实体字符名称	HTML 实体字符
`&`	和符号（and）	`&`
`<`	小于符号（less than）	`<`
`>`	大于符号（greater than）	`>`
`"`	双引号（double quote）	`"`
`'`	单引号（single quote）	`'` 或 `’`（不推荐使用 `'`，因为某些浏览器不完全支持）
`©`	版权符号（copyright）	`©`
`®`	注册商标符号（registered trademark）	`®`
`€`	欧元符号（euro）	`€`
`¥`	日元符号（yen）	`¥`
`£`	英镑符号（pound sterling）	`£`
`¢`	美分符号（cent）	`¢`

2. 数学符号实体字符

符号	实体字符名称	HTML 实体字符
`+`	加号（plus）	`+`
`−`	减号（minus）	`−`
`×`	乘号（multiply）	`×`
`÷`	除号（divide）	`÷`
`=`	等号（equal sign）	`=`
`≠`	不等于符号（not equal）	`≠`
`≤`	小于等于符号（less than or equal to）	`≤`
`≥`	大于等于符号（greater than or equal to）	`≥`

3. 标点符号实体字符

符号	实体字符名称	HTML 实体字符
`¡`	反向感叹号（inverted exclamation mark）	`¡`
`¿`	反向问号（inverted question mark）	`¿`
`•`	项目符号（bullet）	`•`
`“`	左双引号（left double quotation mark）	`“`
`”`	右双引号（right double quotation mark）	`”`
`‘`	左单引号（left single quotation mark）	`‘`
`’`	右单引号（right single quotation mark）	`’`

4. 空格和特殊空白字符

符号	实体字符名称	HTML 实体字符
空格	空格（space）	` `
换行符	换行（newline）	` ` 或 `&NewLine;`
制表符	制表符（tab）	` `

5. 控制字符和其他特殊符号

符号	实体字符名称	HTML 实体字符
`©`	版权符号（copyright）	`©`
`®`	注册商标符号（registered trademark）	`®`
`™`	商标符号（trademark）	`™`
`←`	左箭头（left arrow）	`←`
`→`	右箭头（right arrow）	`→`
`↑`	上箭头（up arrow）	`↑`
`↓`	下箭头（down arrow）	`↓`

6. 特殊字符和外语字符

符号	实体字符名称	HTML 实体字符
`α`	希腊字母 alpha（greek alpha）	`α`
`β`	希腊字母 beta（greek beta）	`β`
`π`	希腊字母 pi（greek pi）	`π`
`Δ`	希腊字母 delta（greek delta）	`Δ`
`一`	中文字符（中文全角）	`一`（通过 Unicode 编码）

7. Unicode 字符实体

通过 Unicode 编码，可以在 HTML 中使用几乎所有的字符。例如，Unicode 字符 U+1F600 对应的字符是 😀，可以使用 😀 或 😀 来表示。

<p>&#x1F600; 表情符号：😀</p>

总结

HTML 实体字符用于处理特殊字符、符号和符号实体，它们通过 & 开头和 ; 结尾。常见的用途包括表示 HTML 元素中无法直接输入的字符（如 <、> 等），以及各种常用符号、数学符号和外语字符。通过这些实体字符，可以确保在 HTML 中正确显示特殊符号，并避免与 HTML 语法产生冲突。

5. html 文档中常见的   是什么，有什么作用？

在 HTML 文档中，  是 非断行空格（Non-Breaking Space）的实体字符，它的作用是插入一个空格，但与普通空格（）不同的是，不会被浏览器自动拆分或换行。这意味着，  插入的空格始终保持在同一行内，不会因为文本的换行或容器的限制而被分割到下一行。

作用和应用场景

保持元素间的间隔
使用   可以强制在文本或元素之间插入空格，并防止这些空格被压缩或丢失。在正常的 HTML 中，多个连续空格会被浏览器合并为一个空格，使用   可以插入多个空格而不被压缩。
```
<p>文本&nbsp;&nbsp;&nbsp;更多文本</p>
```
在上面的例子中，  插入了三个空格，浏览器会准确显示这三个空格，而不会将它们合并为一个。
防止换行
  还可以用于防止文本中的某些部分发生换行。例如，如果你希望两部分文本始终在同一行显示，可以使用   在它们之间插入空格，而不是常规的空格。
```
<p>标题&nbsp;&nbsp;&nbsp;副标题</p>
```
这将在 标题 和 副标题 之间插入多个空格，并防止浏览器在这个位置换行。
在表格中控制间距
在表格布局中，  可以用来插入额外的间隔，尤其是在表格单元格中：
```
<table>
	<tr>
		<td>姓名</td>
		<td>&nbsp;&nbsp;&nbsp;张三</td>
	</tr>
</table>
```
在代码中插入不可见的空间
有时为了格式化文本，尤其是源代码或模板，开发者需要插入空格以保持代码的排版或对齐。在这种情况下，  可以作为一个占位符，插入不可见的空格。

与普通空格的区别

普通空格：普通空格字符（直接按空格键输入）会在 HTML 中被压缩为一个空格，多个连续的空格会被缩减为一个空格，且可能会因文本换行而分割成不同的行。
 ：  在 HTML 中表示一个 非断行空格，多个   不会被压缩，且它们永远保持在同一行内，不会因为布局或换行影响其位置。

总结

  代表 非断行空格，用于插入不可换行的空格。
主要应用场景包括：控制元素间的空格，防止文本换行，保持格式和对齐，或者插入额外的空格而不被浏览器合并。
与普通空格不同，  保证空格的个数不被压缩，并且避免在浏览器中换行。

6. 说说你对 html 嵌套规则的了解

在 HTML 中，嵌套规则指的是 HTML 元素如何在父子关系中进行嵌套，以及元素如何遵循特定的结构规则。正确的嵌套结构不仅确保 HTML 文档的语法正确，还能使页面更加易于解析、渲染，并且符合标准。

HTML 嵌套规则的基本原则

父元素和子元素的嵌套
- 每个 HTML 元素可以包含子元素，但这些子元素必须按照 HTML 语法规则嵌套。
- 必须保证元素嵌套关系正确，不能互相“交叉”或错误地嵌套。
块级元素与内联元素的嵌套
- 块级元素（block-level elements）：如 <div>、<p>、<ul>、<h1> 等，通常会在页面中占据一整行，并且后续元素会换行显示。
- 内联元素（inline elements）：如 <span>、<a>、<strong>、<img> 等，这些元素只占据其内容的宽度，并且不会导致换行。
嵌套规则：
- 块级元素可以包含块级元素和内联元素。
- 内联元素可以包含内联元素，但不能包含块级元素。
例如，以下是正确的嵌套方式：
```
<div>
	<p>这是一段文字。</p>
	<span>这是一段内联文字。</span>
</div>
```
以下是错误的嵌套方式：
```
<span>
	<div>错误的嵌套</div>
</span>
```
在这个例子中，<span> 是内联元素，而 <div> 是块级元素，<div> 不应该被放在 <span> 中。
自闭合标签的嵌套
- HTML 中有一些 自闭合元素，即不需要闭合标签的元素。常见的自闭合标签有：
  - <img>：用于嵌入图像。
  - <br>：换行。
  - <hr>：水平分隔线。
  - <input>：用于表单输入。
  - <meta>：用于定义页面的元数据。
自闭合标签不允许被其他元素嵌套。例如：
```
<img src="image.jpg" alt="image" />
```
表格元素的嵌套规则
- 在表格中，<table> 元素必须包含 <tr>（表格行），<tr> 必须包含 <td>（表格单元格）。但表格元素之间的嵌套规则较为严格，需要遵循：
  - <table> 不能直接包含其他元素，如 <div>、<span> 等，只能包含 <tr>、<thead>、<tbody>、<tfoot>。
  - <tr> 只能包含 <td> 或 <th> 元素，不能直接包含其他元素（如 <div>）。
例如：
```
<table>
	<tr>
		<td>内容 1</td>
		<td>内容 2</td>
	</tr>
</table>
```
错误的嵌套方式：
```
<table>
	<tr>
		<div>错误的嵌套</div>
	</tr>
</table>
```
无序列表和有序列表的嵌套
- <ul> 和 <ol> 是容器元素，用于包含一组列表项。每个列表项使用 <li> 标签表示。
- <ul> 和 <ol> 可以相互嵌套，或者嵌套在其他元素中，但不能直接包含其他类型的元素。
例如，嵌套有序列表：
```
<ol>
	<li>项 1</li>
	<li>
		项 2
		<ul>
			<li>子项 2.1</li>
			<li>子项 2.2</li>
		</ul>
	</li>
	<li>项 3</li>
</ol>
```
HTML 标签的闭合性规则
- 大多数 HTML 标签都有开闭标签，必须确保每个开标签都有对应的闭标签。例如：
```
<div>
	<p>这是一个段落。</p>
</div>
```
- 但也有一些元素是 自闭合的（如前述的 <img>, <br> 等），这些元素不需要闭合标签。

HTML5 中的嵌套规则

HTML5 引入了一些 宽容性 和 灵活性，在大多数情况下，浏览器会自动修正一些不符合规范的嵌套行为。例如，浏览器会修复不完整的标签或错误的嵌套。但为了确保 HTML 文档的正确性，仍然应遵循规范的嵌套规则。

常见的错误嵌套例子

内联元素包含块级元素

<span>
	<div>这是错误的嵌套</div>
</span>

嵌套空元素

`<img>
  <p>这是错误的，因为 <img> 是自闭合元素，不应包含任何子元素。</p>
</img>`

总结

HTML 中的嵌套规则主要是确保父元素和子元素之间的关系符合 HTML 标准。主要要遵守以下几点：

块级元素和内联元素的正确嵌套。
自闭合元素不能包含子元素。
特定元素（如表格、列表等）的嵌套有严格的规则。
保持元素的开闭标签匹配，避免错误的嵌套。

遵循这些规则，能够确保网页的结构清晰、规范，并且在各种浏览器中都能够正确渲染。

7. 如何使用 JavaScript 控制 `<audio>` 和 `<video>` 元素？

在 HTML 中，<audio> 和 <video> 元素用于嵌入音频和视频文件，并允许在网页中播放这些多媒体内容。使用 JavaScript 可以控制这些元素的行为，比如播放、暂停、音量控制、进度条控制等。

1. 获取 `<audio>` 和 `<video>` 元素

首先，您需要通过 JavaScript 获取到 <audio> 或 <video> 元素，可以使用 document.getElementById() 或 document.querySelector() 等方法。

<audio id="myAudio" controls>
	<source src="audio.mp3" type="audio/mp3" />
	Your browser does not support the audio element.
</audio>

<video id="myVideo" width="320" height="240" controls>
	<source src="video.mp4" type="video/mp4" />
	Your browser does not support the video tag.
</video>

// 获取 audio 和 video 元素
const audio = document.getElementById('myAudio');
const video = document.getElementById('myVideo');

2. 播放和暂停

使用 JavaScript 可以控制 <audio> 和 <video> 元素的播放和暂停。可以通过调用 play() 和 pause() 方法来控制播放。

// 播放音频
audio.play();

// 暂停音频
audio.pause();

// 播放视频
video.play();

// 暂停视频
video.pause();

3. 控制音量

可以通过 volume 属性来控制音频或视频的音量。音量的值范围是 0（静音）到 1（最大音量）。

// 设置音量为 50%
audio.volume = 0.5;
video.volume = 0.5;

// 静音
audio.volume = 0;
video.volume = 0;

// 恢复音量
audio.volume = 1;
video.volume = 1;

4. 设置播放进度

使用 currentTime 属性可以获取或设置当前播放的时间（以秒为单位）。通过这个属性，可以跳转到视频或音频的某个时间点。

// 设置音频播放到 30 秒
audio.currentTime = 30;

// 获取当前播放时间
console.log(audio.currentTime);

// 设置视频播放到 10 秒
video.currentTime = 10;

// 获取当前视频播放时间
console.log(video.currentTime);

5. 获取媒体的总时长

使用 duration 属性可以获取音频或视频的总时长（以秒为单位）。

// 获取音频的总时长
console.log(audio.duration);

// 获取视频的总时长
console.log(video.duration);

6. 控制播放速率

playbackRate 属性用于设置播放速率，默认值是 1（正常速度）。值大于 1 会加快播放速度，小于 1 会减慢播放速度。

// 设置音频的播放速率为 1.5 倍速
audio.playbackRate = 1.5;

// 设置视频的播放速率为 0.75 倍速
video.playbackRate = 0.75;

7. 监听播放事件

可以使用 addEventListener 方法监听 <audio> 和 <video> 元素的播放相关事件，如 play、pause、ended 等。

// 监听音频播放开始
audio.addEventListener('play', function () {
	console.log('音频开始播放');
});

// 监听音频暂停
audio.addEventListener('pause', function () {
	console.log('音频暂停');
});

// 监听音频播放结束
audio.addEventListener('ended', function () {
	console.log('音频播放结束');
});

// 监听视频播放开始
video.addEventListener('play', function () {
	console.log('视频开始播放');
});

// 监听视频暂停
video.addEventListener('pause', function () {
	console.log('视频暂停');
});

// 监听视频播放结束
video.addEventListener('ended', function () {
	console.log('视频播放结束');
});

8. 获取和设置播放状态

通过 paused 属性可以检查 <audio> 或 <video> 元素是否处于暂停状态。

// 检查音频是否暂停
if (audio.paused) {
	console.log('音频处于暂停状态');
} else {
	console.log('音频正在播放');
}

// 检查视频是否暂停
if (video.paused) {
	console.log('视频处于暂停状态');
} else {
	console.log('视频正在播放');
}

9. 自动播放和循环播放

自动播放：可以通过设置 autoplay 属性来使媒体文件在页面加载后自动播放。
循环播放：可以通过设置 loop 属性来让媒体文件在播放完后自动重新开始。

<audio id="myAudio" autoplay loop>
	<source src="audio.mp3" type="audio/mp3" />
</audio>

<video id="myVideo" autoplay loop width="320" height="240">
	<source src="video.mp4" type="video/mp4" />
</video>

10. 设置/获取字幕

如果视频包含字幕，可以通过 JavaScript 控制字幕的显示。字幕可以通过 <track> 元素添加。

<video id="myVideo" width="320" height="240" controls>
	<source src="video.mp4" type="video/mp4" />
	<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English" />
	<track src="subtitles_fr.vtt" kind="subtitles" srclang="fr" label="French" />
</video>

11. 其他属性和方法

muted：设置媒体是否静音。

// 静音
audio.muted = true;
video.muted = true;

// 取消静音
audio.muted = false;
video.muted = false;

seekable：获取一个 TimeRanges 对象，表示可跳转的时间区间。
ended：检查媒体是否播放完毕（例如，视频或音频是否已经播放到最后）。

总结

使用 JavaScript 控制 <audio> 和 <video> 元素，主要是通过调用这些元素的各种属性和方法来实现多媒体播放的控制。可以进行播放、暂停、音量调节、播放进度跳转、速率调节等操作，并且可以通过事件监听来响应播放状态的变化。这使得 Web 应用能够更加灵活地处理和播放音视频内容。

8. html 中的视频，怎么添加字幕？

在 HTML 中，可以通过 <track> 元素来为 <video> 元素添加字幕。<track> 元素用于指定一个外部字幕文件，通常是 .vtt（WebVTT）格式的字幕文件。该文件包含了字幕文本以及显示时的时间戳。

1. 基本语法

要为 <video> 元素添加字幕，只需在 <video> 标签中嵌入一个或多个 <track> 标签。每个 <track> 标签可以指向一个字幕文件，并指定字幕的语言、标签和其他元数据。

<video id="myVideo" width="640" height="360" controls>
	<source src="movie.mp4" type="video/mp4" />

	<!-- 添加英文字幕 -->
	<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English" />

	<!-- 添加法文字幕 -->
	<track src="subtitles_fr.vtt" kind="subtitles" srclang="fr" label="French" />

	Your browser does not support the video tag.
</video>

2. `<track>` 元素的属性说明

src：指定字幕文件的路径。字幕文件通常使用 .vtt 格式（WebVTT），它包含了字幕内容及时间戳。
kind：指定字幕类型，常见的值有：
- subtitles：字幕，用于显示翻译文本。
- captions：听力障碍者的字幕，通常包括音效描述和对话。
- descriptions：描述性字幕，通常用于描述画面中的事件。
- chapters：章节标签，用于标记视频中的章节。
srclang：指定字幕的语言。常用语言代码（例如 en 为英语，fr 为法语，es 为西班牙语等）。
label：字幕的标签，用于描述字幕的语言或用途，通常显示在浏览器的字幕选择菜单中。例如，“English”、“French”等。
default：表示该字幕文件为默认字幕。如果浏览器支持自动选择字幕，则会选择这个文件作为默认显示的字幕。

3. WebVTT 字幕文件格式

WebVTT（Web Video Text Tracks）是一种常用的字幕文件格式，它包含了时间戳和字幕文本。以下是一个简单的 .vtt 文件示例。

字幕文件示例：subtitles_en.vtt

WEBVTT

1
00:00:00.000 --> 00:00:04.000
Welcome to our video!

2
00:00:04.500 --> 00:00:08.000
In this video, we will explain how to add subtitles.

3
00:00:08.500 --> 00:00:12.000
Let's get started!

在这个示例中：

WEBVTT 是文件的声明，告诉浏览器这个文件是 WebVTT 格式。
每一条字幕有一个编号（如 1），然后是时间戳（00:00:00.000 --> 00:00:04.000），表示该字幕的显示和结束时间。
最后是字幕文本内容（如 Welcome to our video!）。

4. 使用 JavaScript 控制字幕

通过 JavaScript，你可以动态控制视频中的字幕。你可以通过 track 元素的 mode 属性来控制字幕的显示。mode 属性有三个值：

disabled：禁用字幕。
hidden：隐藏字幕（不显示，但仍加载）。
showing：显示字幕。

示例：使用 JavaScript 控制字幕

<video id="myVideo" width="640" height="360" controls>
	<source src="movie.mp4" type="video/mp4" />
	<track
		id="englishSubtitles"
		src="subtitles_en.vtt"
		kind="subtitles"
		srclang="en"
		label="English"
	/>
	<track
		id="frenchSubtitles"
		src="subtitles_fr.vtt"
		kind="subtitles"
		srclang="fr"
		label="French"
	/>
	Your browser does not support the video tag.
</video>

<button onclick="toggleSubtitles()">Toggle Subtitles</button>

<script>
	function toggleSubtitles() {
		var video = document.getElementById('myVideo');
		var englishTrack = document.getElementById('englishSubtitles');

		// 切换字幕的显示与隐藏
		if (englishTrack.mode === 'showing') {
			englishTrack.mode = 'hidden';
		} else {
			englishTrack.mode = 'showing';
		}
	}
</script>

在这个示例中，我们通过点击按钮切换字幕的显示状态。mode 属性的值会在 'showing' 和 'hidden' 之间切换，控制字幕是否显示。

5. 多个字幕和语言选择

你可以为 <video> 元素添加多个字幕文件，并通过浏览器的字幕菜单让用户选择需要显示的字幕。用户可以选择不同的语言或者关闭字幕。

<video id="myVideo" width="640" height="360" controls>
	<source src="movie.mp4" type="video/mp4" />

	<!-- 添加英文字幕 -->
	<track
		src="subtitles_en.vtt"
		kind="subtitles"
		srclang="en"
		label="English"
		default
	/>

	<!-- 添加法文字幕 -->
	<track src="subtitles_fr.vtt" kind="subtitles" srclang="fr" label="French" />

	<!-- 添加西班牙文字幕 -->
	<track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Spanish" />

	Your browser does not support the video tag.
</video>

总结

使用 <track> 元素来为 <video> 添加字幕文件。字幕文件通常是 .vtt 格式的 WebVTT 文件。
kind 属性指定字幕的类型（如 subtitles、captions）。
srclang 属性指定字幕的语言。
label 属性用来定义字幕的名称，显示在浏览器的字幕选择菜单中。
可以通过 JavaScript 控制字幕的显示和隐藏，使用 mode 属性来控制字幕的状态。

通过这种方式，您可以为视频提供多语言的字幕，增强用户体验，特别是对于需要辅助功能或多语言支持的网页应用。

9. 如何避免重绘或者重排？

在 Web 开发中，重绘（Repaint） 和 重排（Reflow） 是浏览器渲染引擎在渲染页面时发生的两种操作。为了提高页面的性能，尽量避免不必要的重绘和重排是非常重要的。

重排（Reflow）和重绘（Repaint）简介

重排（Reflow）：
- 重排是指浏览器重新计算元素的布局，尤其是在修改页面元素的尺寸、位置、结构时发生。
- 触发重排的情况包括：
  - 修改元素的尺寸（width、height、padding 等）。
  - 修改元素的定位（如 position、top、left 等）。
  - 修改元素的显示属性（如 display、visibility）。
  - 插入或删除元素。
  - 浏览器窗口的大小变化。
重绘（Repaint）：
- 重绘是指浏览器重新绘制元素的外观（例如颜色、背景、边框等），但不改变元素的布局或位置。
- 触发重绘的情况包括：
  - 修改元素的颜色（如 color、background）。
  - 修改元素的字体（如 font-family、font-size）。
  - 修改元素的透明度（opacity）。
  - 修改元素的阴影（box-shadow）。

如何避免重排和重绘

1. 批量修改 DOM（避免多次触发重排和重绘）

尽量将多个 DOM 操作合并，避免逐一修改属性，这样可以减少浏览器多次计算布局和绘制的次数。

错误的做法：逐个修改属性

element.style.width = '100px';
element.style.height = '200px';
element.style.marginLeft = '50px';

优化的做法：将修改放在一起，减少重排

element.style.cssText = 'width: 100px; height: 200px; margin-left: 50px;';

2. 使用 `requestAnimationFrame` 或 `setTimeout` 延迟修改

通过 requestAnimationFrame 或 setTimeout 来批量处理修改，或者将某些修改推迟到浏览器下一个渲染周期，以避免同步修改引起的重排。

使用 requestAnimationFrame：

requestAnimationFrame(() => {
	element.style.width = '100px';
	element.style.height = '200px';
});

使用 setTimeout：

setTimeout(() => {
	element.style.width = '100px';
	element.style.height = '200px';
}, 0);

3. 避免触发布局查询

在访问某些元素的布局属性（如 offsetHeight、offsetWidth、clientHeight、scrollTop 等）时，浏览器可能会强制执行重排，以便获取正确的值。因此，如果在修改 DOM 之后立刻查询这些属性，浏览器会阻塞渲染队列，导致性能问题。

错误的做法：修改样式后立即查询布局属性

element.style.width = '100px';
let height = element.offsetHeight; // 可能触发重排

优化的做法：尽量避免在修改样式后立即查询布局属性，或者将修改和查询操作分开执行。

element.style.width = '100px';
// 执行其他逻辑
let height = element.offsetHeight; // 将查询放在逻辑分离之后

4. 避免频繁修改 `display` 属性

display 属性的修改会直接导致元素的重排和渲染，因为它会改变元素在文档流中的布局。尽量避免频繁切换 display 属性，特别是在频繁的动画或交互中。

错误的做法：频繁切换 display 属性

element.style.display = 'none'; // 重排
element.style.display = 'block'; // 重排

优化的做法：使用其他方法（如 visibility 或 opacity）来控制元素的显示和隐藏，这样可以避免重排。

// 使用 opacity 或 visibility 来避免触发重排
element.style.visibility = 'hidden'; // 不会触发重排
element.style.opacity = 0; // 不会触发重排

5. 使用 `position: absolute` 或 `position: fixed` 来避免布局变化

如果你需要将元素从文档流中移除，避免影响其他元素的布局，可以使用 position: absolute 或 position: fixed。这可以避免元素的重新计算影响到整个页面布局，减少重排。

.element {
	position: absolute;
	top: 0;
	left: 0;
}

7. 使用 CSS 变换和透明度代替位置或大小的变化

如果需要执行动画，使用 transform 和 opacity 比使用 top、left、width 和 height 更高效，因为 transform 和 opacity 不会触发重排，只会触发重绘。

使用 transform 和 opacity 动画：

/* 动画使用 transform 来避免重排 */
@keyframes move {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(100px);
	}
}

element.style.animation = 'move 1s ease-out';

8. 避免页面尺寸的动态变化

当页面尺寸变化时，浏览器会触发重排，因此避免动态改变页面的尺寸或容器的尺寸，尤其是在动画或用户交互过程中。

优化的做法：

使用固定尺寸或最小/最大尺寸来控制布局。
使用 transform 和 position 来移动元素，而不是通过修改 left、top、width 等属性。

总结

避免重排和重绘的关键是：

批量操作 DOM，避免多次触发重排和重绘。
尽量避免修改布局相关的属性（如 width、height、position），特别是频繁修改时。
避免频繁的布局查询（如 offsetHeight、clientWidth），避免在修改样式后立即查询。
使用 transform 和 opacity 来执行动画和视觉效果，而不直接修改布局属性。
优化 CSS 选择器，减少高开销的选择器。

通过合理的优化，减少不必要的重排和重绘，能够显著提升页面的渲染性能和用户体验。

10. canvas 与 svg 在可视化领域优劣如何

在可视化领域，Canvas 和 SVG 是两种常用的图形绘制技术。它们各自有不同的特点，适合于不同的应用场景。以下是两者的优缺点对比，帮助你在选择时做出最合适的决策。

1. Canvas（画布）

Canvas 是一种基于像素的绘图方式，提供了一个用于绘制图形的画布元素。你通过 JavaScript 绘制各种形状、路径、文本和图像等。

优点：

高效的图形渲染：Canvas 是基于像素绘制的，特别适用于需要快速渲染大量图形的场景，比如游戏开发、动画、实时数据可视化等。由于 Canvas 使用的是即时绘制的方式，因此能快速渲染复杂的图形。
动态更新方便：对于需要实时更新和渲染的图形（如动态图表、游戏、视频等），Canvas 允许直接修改整个画布的像素数据，更新非常灵活和高效。
性能更优：由于 Canvas 是一个单一的位图（Bitmap），不像 SVG 那样需要管理大量的 DOM 元素，因此在绘制大量元素时（如上千个图形）性能表现更好。
适合复杂场景和动画：Canvas 允许对每一帧都做精细控制，非常适合实时动画、粒子系统等复杂的视觉效果。

缺点：

不支持 DOM 操作：Canvas 是基于像素的绘制模型，绘制完成后，你无法直接操作或查询其中的单个元素（不像 SVG 那样可以操作 DOM 元素）。这使得对某些细节的交互变得复杂，比如图形上的点击事件等。
静态图形难以处理：对于需要以独立元素的方式处理的场景（例如，图形元素的可单独修改和重用），Canvas 可能不够灵活。每次更新图形时，都需要重新绘制整个画布。
可访问性差：Canvas 图形本质上是一个不可选取的位图，屏幕阅读器等辅助设备很难访问其中的内容（不像 SVG 的可读性更强）。

适用场景：

游戏开发、图像处理、动态图形和高性能图形（如图表、地图等）
高频率和复杂动画（如粒子效果、画布动画等）
需要处理大量数据和图形的可视化场景

2. SVG（可缩放矢量图形）

SVG 是一种基于 XML 的矢量图形格式，所有的图形元素（如路径、圆形、矩形等）都以独立的 DOM 元素呈现，可以像 HTML 元素一样被操作、样式化和事件监听。

优点：

基于矢量图形：SVG 是矢量图形，因此不管如何缩放，它的清晰度始终保持不变，适用于需要高分辨率的图形（如图标、矢量图和地图等）。
支持 DOM 操作：SVG 是基于 XML 格式的，因此它的每个元素（如路径、文本、形状等）都可以被视为 DOM 元素，可以通过 JavaScript 操作、修改、查询，支持丰富的交互。
良好的可访问性：由于 SVG 元素是 DOM 元素，它们是可访问的，可以被屏幕阅读器等工具读取，适合需要辅助功能的应用场景。
灵活的样式控制：SVG 图形可以使用 CSS 进行样式化，支持动画、渐变、滤镜等多种图形效果，允许开发者以非常简洁的方式控制外观。
良好的交互支持：你可以为 SVG 元素添加事件监听器（例如点击、悬停），使其更易于交互，这在实现点击图标、悬停效果、交互式图表等场景时非常有用。

缺点：

性能不如 Canvas：在需要绘制大量元素时（例如，成千上万个图形对象），SVG 会遇到性能瓶颈。每个 SVG 元素都是一个独立的 DOM 元素，浏览器需要管理和渲染所有这些 DOM 元素，因此性能会受到影响。
渲染速度慢：对于复杂的图形和动画，SVG 可能比 Canvas 更慢，尤其是当图形层次复杂或者元素数量非常大时。
适用于简单图形：对于一些需要绘制复杂动态效果或大量像素级图形的应用，SVG 并不如 Canvas 那样高效。

适用场景：

图标、矢量图、界面元素、简洁的动态图形等。
图表、流程图、互动式图形和数据可视化（尤其是小规模数据或较少的图形元素时）。
需要高分辨率缩放且图形元素容易交互的场景。

对比总结

特性	Canvas	SVG
渲染方式	基于像素的绘制方式	基于矢量图形的绘制方式
性能	性能优越，适合处理大量的动态图形和动画	性能较差，适合处理较少的图形和简单动画
可交互性	不支持元素级交互，需要自己管理交互和事件	支持元素级交互和事件处理
缩放	无论如何缩放都会失去清晰度（像素化）	无论如何缩放，图形清晰度始终保持
DOM 操作	无法操作或查询单个图形元素	每个图形元素都可以操作和查询
动画支持	动画流畅、适用于复杂的实时动画	动画支持较弱，适用于简单的动画
适用场景	游戏、动态图形、复杂动画、数据可视化（大量数据）	矢量图形、图标、简单图形、交互式图表、数据可视化（小规模数据）

选择指南

如果你的应用场景需要处理大量的动态元素、复杂的图形、实时更新（例如游戏、图像处理、动态图表等），并且对图形的质量要求不特别高，Canvas 是一个更好的选择。
如果你需要高质量的图形、元素级的交互、以及需要进行多次缩放的情况（如图标、界面、地图等），并且元素数量较少，SVG 是更合适的选择。
对于 数据可视化，如果图形元素较少且需要互动，SVG 是很好的选择。如果数据量非常大，或需要频繁更新，Canvas 可能更合适。

结论

Canvas 更适用于性能要求高且元素数量大、更新频繁的场景。
SVG 更适用于要求高质量、灵活交互且元素较少的场景。

最终，选择使用哪种技术应根据具体的需求、性能考虑和项目的特点来决定。

11. web components 是什么？

Web Components 是什么？

Web Components 是一种用于创建可重用、自定义、封装良好的组件的 Web 标准。它允许开发者创建具有自己 HTML 标签的独立模块，且这些模块可以在不同的应用中重复使用，而不会与其他代码冲突。

Web Components 的核心是基于浏览器原生支持的一组技术，这些技术可以一起用来定义、封装和扩展 DOM 元素。

Web Components 的组成部分

Web Components 由以下 3 个主要部分组成：

1. Custom Elements（自定义元素）

允许开发者定义新的 HTML 标签，并赋予其自定义行为。
自定义元素可以通过 JavaScript 定义，并注册为浏览器可以识别的新元素。

示例：

class MyElement extends HTMLElement {
	connectedCallback() {
		this.innerHTML = `<p>Hello, Web Components!</p>`;
	}
}
customElements.define('my-element', MyElement);

使用：

<my-element></my-element>

2. Shadow DOM（影子 DOM）

提供了一个独立的 DOM 范围，用于封装组件的内部结构和样式。
Shadow DOM 内的样式和结构与外部页面完全隔离，避免了样式和行为的冲突。

示例：

class MyShadowElement extends HTMLElement {
	constructor() {
		super();
		const shadow = this.attachShadow({ mode: 'open' });
		shadow.innerHTML = `
      <style>
        p { color: red; }
      </style>
      <p>This is inside shadow DOM</p>
    `;
	}
}
customElements.define('my-shadow-element', MyShadowElement);

使用：

<my-shadow-element></my-shadow-element>

3. HTML Templates（HTML 模板）

提供了定义 HTML 结构的模板机制，可与 Shadow DOM 和 Custom Elements 结合使用。
模板的内容不会直接渲染在页面中，只有通过 JavaScript 克隆并插入时才会生效。

示例：

<template id="my-template">
	<style>
		p {
			color: blue;
		}
	</style>
	<p>Template Content</p>
</template>

<script>
	const template = document.getElementById('my-template').content;
	document.body.appendChild(template.cloneNode(true));
</script>

Web Components 的特点

可重用性：自定义组件可以在不同的项目中重复使用，提高了代码的复用性。
封装性：通过 Shadow DOM 实现了样式和逻辑的封装，避免了与全局样式的冲突。
互操作性：Web Components 是基于标准构建的，可以与任何框架或库（如 React、Vue）配合使用。
无依赖性：完全基于浏览器原生支持，无需依赖第三方框架。

Web Components 的应用场景

UI 组件库：用于构建封装良好的按钮、输入框、对话框等组件库，支持跨项目和跨框架使用。
动态加载模块：在单页应用中，使用 Web Components 动态加载部分内容。
嵌入式小工具：在外部网站中嵌入封装良好的小组件（如广告、搜索框、统计工具等）。
跨框架组件共享：在不同的框架或无框架的项目中共享统一的组件。

Web Components 的优点

原生支持：无需依赖任何第三方库，浏览器直接支持。
封装性好：通过 Shadow DOM 隔离内部样式和逻辑，避免全局污染。
高兼容性：可以在任何框架中使用，与现有项目无缝集成。
代码复用：通过自定义元素和模板，轻松创建复用性高的组件。

Web Components 的缺点

浏览器兼容性：尽管现代浏览器大多支持 Web Components，但在旧版本中可能需要 Polyfill。
开发复杂度：与现代框架（如 React、Vue）相比，手动管理 Web Components 需要更多的代码。
状态管理复杂：不像框架那样提供统一的状态管理工具，开发者需要手动实现数据绑定和更新。

Web Components 与主流框架的对比

特性	Web Components	主流框架（如 React、Vue）
依赖性	无需依赖任何框架	需要依赖框架
封装性	使用 Shadow DOM 实现独立封装	使用框架的组件机制（如 scoped CSS）
性能	运行时性能高，直接基于浏览器 API	需要框架的运行时支持，性能略低
开发效率	手动管理复杂，适合基础设施开发	提供丰富的工具链，开发效率高
跨框架兼容性	高，可以与任何框架一起使用	依赖框架，跨框架使用较困难

总结

Web Components 是一种强大的前端组件化技术，特别适合于以下场景：

开发跨项目、跨框架可重用的 UI 组件。
构建样式和逻辑隔离良好的嵌入式模块。
在现代框架（如 React、Vue）之外，构建独立的可视化工具或小部件。

然而，对于需要复杂状态管理和工具支持的项目，现代框架可能是更高效的选择。

12. 什么是 HTML 文档的预解析？

HTML 文档的预解析（Pre-parsing）是什么？

HTML 文档的预解析（Pre-parsing） 是浏览器优化网页加载速度的一种机制。当浏览器在解析 HTML 文档的过程中，遇到阻塞的资源（如脚本或样式表）时，会在等待加载和执行的同时，提前扫描和处理 HTML 中的其他内容。

通过预解析，浏览器可以尽早发现其他需要加载的资源（如图片、样式表、脚本等），并并行发起加载请求，从而提高页面的整体加载速度和用户体验。

预解析的主要工作

提取资源：
- 浏览器会扫描 HTML 文档中的标签，识别需要加载的资源（如 link、img、script 等），并提前请求这些资源。
构建 DOM 的一部分：
- 浏览器会解析 HTML 并逐步构建 DOM 树。虽然部分 DOM 构建可能会被阻塞，但在可能的情况下，浏览器仍会尽可能构建可用的部分。
推迟执行阻塞操作：
- 遇到外部脚本（如 script 标签）时，浏览器会暂停文档解析，等待脚本加载和执行。此时，预解析机制可以在后台继续扫描 HTML，提前为后续的解析做好准备。

预解析的常见场景

1. Link 和 Stylesheet 的预解析

<link rel="stylesheet" href="styles.css" />

浏览器会在解析 HTML 时立即识别并请求 CSS 文件，即使此时还没有完全构建 DOM。

3. Script 的预解析

<script src="script.js"></script>

虽然脚本会阻塞 HTML 的解析，但预解析可以在后台发现其他资源（如图片或 CSS 文件）并发起加载。

预解析的好处

提高加载效率：
- 通过预解析，浏览器可以尽早发起资源的下载请求，减少资源加载的等待时间。
优化用户体验：
- 即使有部分内容需要等待（如脚本执行），预解析可以确保其他资源尽早加载，避免页面加载过程过于延迟。
并行加载资源：
- 浏览器可以利用预解析阶段提前并行加载资源，从而充分利用网络带宽。

预解析的限制

不会执行脚本：
- 在预解析阶段，浏览器只会扫描到脚本标签，但不会实际加载或执行脚本内容。
依赖资源的延迟加载：
- 如果某些资源（如动态生成的脚本或样式）在预解析阶段不可用，可能导致部分依赖的内容延迟加载。
阻塞的脚本仍然影响性能：
- 即使预解析能够提升加载效率，但阻塞的脚本仍可能阻碍 DOM 的进一步解析。

优化预解析的实践

使用 async 或 defer 加载脚本：
- 将外部脚本标记为异步加载：
```
<script src="script.js" async></script>
```
- 或延迟加载，等待 DOM 构建完成后再执行：
```
<script src="script.js" defer></script>
```
将 CSS 放在 head 中：
- 确保样式表尽早加载，避免渲染阻塞：
```
<link rel="stylesheet" href="styles.css" />
```
合理使用懒加载：
- 对非关键资源（如图片、视频等）使用懒加载，避免阻塞关键资源的加载：
```
<img src="image.jpg" loading="lazy" />
```
预加载关键资源：
- 使用 <link rel="preload"> 提前加载关键资源：
```
<link rel="preload" href="critical.css" as="style" />
```
减少阻塞资源：
- 减少同步脚本、内联样式等会阻塞文档解析的资源。

总结

HTML 文档的预解析是浏览器优化性能的重要策略，它能够在 HTML 文档解析过程中，提前发现并加载资源，从而提高页面的加载效率。通过合理地优化资源加载顺序、减少阻塞资源，开发者可以进一步提升预解析的效果，优化用户体验。

13. html 中前缀为 data- 开头的元素属性是什么？

HTML 中前缀为 `data-` 的属性是什么？

data- 属性 是 HTML5 引入的一种自定义属性，用于嵌入开发者定义的、与页面或应用逻辑相关的额外数据。这些属性以 data- 为前缀，可以绑定到 HTML 元素上，同时不会对浏览器的默认行为造成影响。

特点

自定义数据：data- 属性允许开发者在 HTML 元素中存储任意的自定义数据。
与页面结构分离：这些数据不会影响页面的显示效果，只是逻辑上的附加数据。
安全性：不会与浏览器的原生属性冲突。
灵活性：可以通过 JavaScript 轻松读取和修改这些数据。

语法

<tag data-属性名="值">内容</tag>

data-属性名：必须以 data- 开头，后面可以跟自定义名称。属性名称只能包含字母、小写字母开头，不能包含空格（推荐使用小写或连字符形式，如 data-user-name）。
值：可以是任意字符串，开发者可以定义数据的含义。

示例

1. 基础使用

<div data-id="12345" data-name="Alice">用户信息</div>

在 JavaScript 中，可以通过以下方式读取这些数据：

const div = document.querySelector('div');

// 使用 dataset 属性访问自定义数据
console.log(div.dataset.id); // 输出: "12345"
console.log(div.dataset.name); // 输出: "Alice"

2. 嵌入复杂数据

<button data-action="delete" data-user-id="789">删除用户</button>

使用 JavaScript 处理：

const button = document.querySelector('button');
console.log(button.dataset.action); // 输出: "delete"
console.log(button.dataset.userId); // 输出: "789"

常见应用场景

1. 数据绑定

将额外的元数据绑定到 HTML 元素上，用于前端逻辑处理：

<li data-category="books" data-id="001">书籍</li>
<li data-category="movies" data-id="002">电影</li>

根据用户操作动态读取数据：

document.querySelectorAll('li').forEach((item) => {
	console.log(item.dataset.category, item.dataset.id);
});

2. 动态控制样式或行为

可以根据自定义数据控制元素的样式或行为：

<button data-color="red">Red</button>
<button data-color="blue">Blue</button>
<script>
	document.querySelectorAll('button').forEach((button) => {
		button.addEventListener('click', () => {
			document.body.style.backgroundColor = button.dataset.color;
		});
	});
</script>

3. 用于前端框架或库

现代前端框架（如 React 或 Vue）或库（如 jQuery）中，可以通过 data- 属性传递和存储组件状态、事件数据等信息。

4. SEO 安全性

对于需要存储的非用户可见数据，data- 属性比直接暴露在页面内容中更安全。

优点

简单易用：开发者可以直接在 HTML 中定义数据，方便逻辑实现。
灵活性高：支持存储任意字符串，适用范围广。
与 JavaScript 的良好结合：通过 dataset API，轻松读取或修改数据。

注意事项

不要滥用：
- data- 属性主要用于存储少量、结构简单的数据。如果需要存储大量数据或复杂结构，建议使用 JavaScript 数据结构或 JSON 文件。
性能问题：
- 如果大量使用 data- 属性（特别是动态修改），可能会对页面性能产生一定影响。
保持规范性：
- 命名尽量使用简洁明了的格式，例如 data-user-id，而不是 data-user_!id。

总结

data- 属性是前端开发中处理动态数据和自定义逻辑的一个简单而强大的工具。它既能满足简单的数据存储需求，又能方便地与 JavaScript 结合使用，在动态网页、用户交互等场景中非常实用。

14. script 标签上有那些属性，作用分别是什么？

`<script>` 标签的属性及作用

<script> 标签用于定义客户端的 JavaScript 脚本，支持多个属性来控制脚本的加载方式、执行顺序和作用域。

2. 其他属性

2.2 `language`

作用：指定脚本语言。
示例：
```
<script language="JavaScript"></script>
```
说明：此属性已废弃，type 属性更推荐使用。

2.3 `id`

作用：为脚本标签设置唯一标识，方便通过 DOM 操作访问。

示例：

<script id="my-script">
	console.log('Hello, World!');
</script>

**2.4 `data-*`**

作用：为脚本传递自定义数据。

示例：

<script data-env="production" src="script.js"></script>

在脚本中可以访问：

const script = document.querySelector('script[data-env]');
console.log(script.dataset.env); // 输出: "production"

3. 属性行为总结

属性	作用	常用场景
`src`	指定外部 JavaScript 文件	加载外部脚本
`type`	指定脚本的类型	标准脚本或模块化脚本
`async`	异步加载和执行脚本，不保证顺序	加载独立脚本
`defer`	延迟脚本执行，按顺序执行，且在 DOM 完成解析后执行	加载依赖 DOM 的脚本
`crossorigin`	设置跨域资源请求的 CORS 策略	加载跨域脚本
`integrity`	验证脚本内容的完整性，防止脚本被篡改	提高安全性
`referrerpolicy`	设置请求的 `Referer` 信息策略	控制请求隐私
`nomodule`	仅在不支持模块的浏览器中加载脚本	提供兼容性解决方案
`charset`	指定外部脚本的字符编码	旧版编码设置（现代浏览器少用）

4. 使用建议

异步加载非关键脚本：
- 对于不依赖 DOM 的独立脚本，使用 async。
- 对于依赖 DOM 的脚本，使用 defer。
模块化脚本：
- 对现代浏览器，使用 type="module" 和模块化导入机制。
安全性优化：
- 对外部脚本设置 integrity 和 crossorigin，确保资源可信。
逐步增强：
- 使用 nomodule 为旧浏览器提供降级脚本支持。

15. link 标签有哪些属性，分别有什么作用？

`<link>` 标签的属性及作用

<link> 标签主要用于将外部资源与 HTML 文档关联，常用于加载样式表、图标、预加载资源等。以下是 <link> 标签的常用属性及其作用。

1. 常用属性

1.1 `rel`

作用：定义当前文档与外部资源的关系。
常见值：
- stylesheet：链接到外部 CSS 样式表。
- icon：定义网站图标（favicon）。
- preload：预加载资源，提高加载性能。
- dns-prefetch：提前解析 DNS。
- manifest：链接到 Web 应用程序清单文件。

示例：

<!-- 引入样式表 -->
<link rel="stylesheet" href="styles.css" />

<!-- 设置网站图标 -->
<link rel="icon" href="favicon.ico" />

<!-- 预加载字体 -->
<link
	rel="preload"
	href="font.woff2"
	as="font"
	type="font/woff2"
	crossorigin="anonymous"
/>

1.2 `href`

作用：指定关联资源的 URL。
说明：当 rel 定义了关联类型时，href 指向具体资源。

示例：

<link rel="stylesheet" href="styles.css" />

1.3 `type`

作用：指定关联资源的 MIME 类型。
说明：通常可以省略，浏览器会根据 rel 推断类型。

示例：

<link rel="stylesheet" href="styles.css" type="text/css" />

1.4 `media`

作用：定义关联资源的适用媒体类型。
常见值：
- all（默认）：适用于所有设备。
- screen：仅适用于屏幕设备。
- print：仅适用于打印设备。
- 复杂查询条件：如 (max-width: 600px)。

示例：

<link
	rel="stylesheet"
	href="styles.css"
	media="screen and (max-width: 600px)"
/>

1.5 `as`

作用：在资源预加载（rel="preload"）时，指定资源的类型。
常见值：
- script：脚本资源。
- style：样式表。
- font：字体文件。
- image：图像资源。

示例：

<link
	rel="preload"
	href="font.woff2"
	as="font"
	type="font/woff2"
	crossorigin="anonymous"
/>

1.6 `crossorigin`

作用：设置跨域请求的 CORS 策略。
常见值：
- anonymous：不带凭据（如 cookies）。
- use-credentials：带凭据。

示例：

<link rel="preload" href="font.woff2" as="font" crossorigin="anonymous" />

1.7 `integrity`

作用：验证资源的完整性，防止资源被篡改。

示例：

<link
	rel="stylesheet"
	href="styles.css"
	integrity="sha384-abc123"
	crossorigin="anonymous"
/>

1.8 `title`

作用：为链接资源提供标题。
说明：主要用于备用样式表。

示例：

<link rel="stylesheet" href="styles1.css" title="Theme 1" />
<link rel="stylesheet" href="styles2.css" title="Theme 2" />

2. 其他属性

2.1 `disabled`

作用：用于禁用某个备用样式表。

示例：

<link rel="stylesheet" href="styles.css" title="Theme" disabled />

2.2 `sizes`

作用：定义图标的尺寸，仅适用于 rel="icon" 或 rel="apple-touch-icon"。

示例：

<link rel="icon" href="favicon.png" sizes="32x32" />

2.3 `referrerpolicy`

作用：定义链接请求的 Referer 信息策略。
常见值：
- no-referrer：不发送 Referer 信息。
- origin：仅发送源（协议 + 主机）。
- strict-origin：同源请求发送完整 URL，跨域仅发送源。

示例：

<link rel="stylesheet" href="styles.css" referrerpolicy="no-referrer" />

3. 属性行为总结

属性	作用	常用场景
`rel`	定义当前文档与资源的关系	加载 CSS、设置图标、预加载资源等
`href`	指定关联资源的 URL	引用外部资源
`type`	指定关联资源的 MIME 类型	明确资源类型
`media`	定义资源适用的媒体类型	响应式样式表
`as`	指定预加载资源的类型	提高预加载效率
`crossorigin`	设置跨域请求的 CORS 策略	加载跨域资源
`integrity`	验证资源内容的完整性，防止篡改	提升安全性
`title`	提供备用样式表的标题	支持主题切换
`disabled`	禁用备用样式表	控制样式表的激活状态
`sizes`	定义图标的尺寸	设置图标
`referrerpolicy`	控制请求的 `Referer` 信息策略	提高隐私性

4. 使用建议

优化加载性能：
- 对关键资源使用 <link rel="preload"> 提前加载。
- 对跨域资源设置 crossorigin 和 integrity。
提升安全性：
- 使用 integrity 校验资源完整性，防止篡改。
支持响应式设计：
- 为样式表设置适配的 media 属性，实现响应式布局。
图标优化：
- 使用合适的 sizes 定义 favicon 的大小，提升图标加载效果。

通过合理使用 <link> 标签及其属性，可以有效提升网页加载性能、增强安全性，并优化用户体验。

16. link 标签的 rel 属性中，preload 和 prefetch 这两个值的作用是什么？

在 HTML 的 <link> 标签中，rel="preload" 和 rel="prefetch" 是两种常见的值，分别用于优化资源加载，但它们的作用和使用场景不同。

1. `rel="preload"`

作用：
preload 是一种资源提示，用来告诉浏览器提前加载当前页面需要的资源，以便在需要时快速呈现给用户。

特点：

适用于当前页面的资源加载。
优先级较高，会在常规资源加载之前尽快加载指定资源。
常用于关键资源（如字体、重要的脚本或样式文件）。

使用场景：

加载关键字体，避免 FOUT（Flash of Unstyled Text，样式未加载的文字闪烁）。
提前加载图片或视频资源，以减少首次呈现的延迟。
加载 JS 或 CSS 文件以加快页面渲染。

示例：

<link rel="preload" href="styles.css" as="style" />
<link rel="preload" href="main.js" as="script" />
<link rel="preload" href="image.jpg" as="image" />

注意事项：

必须指定 as 属性，明确资源类型（如 style、script、image 等），以便浏览器合理分配资源优先级。
如果是字体资源，还需配合 type 和 crossorigin 属性。

2. `rel="prefetch"`

作用：
prefetch 是一种资源提示，用来告诉浏览器在空闲时间加载可能会在未来某个页面使用的资源。

特点：

适用于未来页面可能使用的资源。
优先级较低，只有当当前页面的资源加载完成后，浏览器才会加载 prefetch 的资源。
常用于多页面应用的跨页面优化。

使用场景：

预加载下一步用户可能访问的页面资源（如图片、脚本或样式）。
优化多页面跳转时的加载速度。

示例：

<link rel="prefetch" href="next-page.html" />
<link rel="prefetch" href="next-script.js" as="script" />
<link rel="prefetch" href="next-image.jpg" as="image" />

注意事项：

资源是否会被真正加载，取决于浏览器的实现和用户的网络情况。
不适合用来加载当前页面的资源。

区别对比

属性	作用场景	优先级	资源用途	浏览器行为
`preload`	当前页面需要的资源	高（关键资源）	当前页面渲染所需的关键资源	尽快加载指定资源，优先级高，影响页面加载性能。
`prefetch`	未来可能需要的资源	低（闲时加载）	下一步或未来页面可能需要的资源	在浏览器空闲时加载资源，优先级低，提升用户体验。

实用建议

使用 preload 提前加载当前页面的关键资源，但不要滥用，以免阻塞其他重要资源。
使用 prefetch 为未来可能访问的页面预加载资源，尤其是在单页应用或多页面应用中，提升跳转流畅度。
确保在实际项目中测试其效果，因为资源加载的优先级会影响页面的加载性能和用户体验。

浏览器支持

大多数现代浏览器都支持 preload 和 prefetch，但行为可能略有差异：

preload 通常优先执行，效果较明显。
prefetch 的执行可能受限于网络环境、浏览器策略或用户行为。

确保使用前检查浏览器兼容性，并做好降级方案。

17. HTML 部分标签中的 crossorigin 属性，作用是什么？

HTML 中的 crossorigin 属性用于指示跨域资源如何处理跨源请求的策略。它主要应用于某些支持加载外部资源的标签，例如 <img>、<script>、<link>、<audio>、<video> 等。其主要作用是控制跨域资源是否允许携带凭据（如 Cookies、HTTP 认证等）以及资源的跨域行为。

作用与工作原理

控制资源是否携带凭据：
- 如果跨域资源需要携带用户凭据（例如 Cookies），可以通过设置 crossorigin 为 use-credentials。
- 如果跨域资源不需要凭据，则可以使用 anonymous 或默认值（不设置 crossorigin）。
确保资源加载的安全性：
- 浏览器会检查资源的 CORS（跨源资源共享）响应头，只有符合安全策略的资源才会加载成功。
与 CORS（跨源资源共享）协议配合：
- 服务器必须正确设置 CORS 响应头（如 Access-Control-Allow-Origin），否则浏览器会阻止资源加载。

常见的 `crossorigin` 值

值	描述
`anonymous`	表示匿名请求，不携带凭据（如 Cookies）。服务器需要在响应头中设置 `Access-Control-Allow-Origin`，且不能包含凭据相关字段。
`use-credentials`	表示跨域请求时携带凭据（如 Cookies、HTTP 认证等）。服务器需要设置 `Access-Control-Allow-Origin` 且允许携带凭据（`Access-Control-Allow-Credentials: true`）。
不设置（默认值）	对大多数资源无影响，但某些跨域请求可能失败（如 `<script>` 和 `<img>` 的跨域资源加载）。

支持 `crossorigin` 的标签

<img>
控制跨域图片的加载方式。如果需要跨域获取图片并进行操作（如 canvas 渲染），必须正确设置 crossorigin。
```
<img src="https://example.com/image.jpg" crossorigin="anonymous" />
```
- 如果未设置，默认浏览器会阻止跨域图片用于 canvas。
<script>
用于加载跨域的脚本资源。默认跨域脚本会被允许，但如果需要支持 integrity（子资源完整性校验），必须设置 crossorigin。
```
<script src="https://example.com/script.js" crossorigin="anonymous"></script>
```
<link>
用于加载跨域的样式表或字体资源。如果样式表或字体资源需要跨域加载，则 crossorigin 必须与服务器的 CORS 设置匹配。
```
<link
	rel="stylesheet"
	href="https://example.com/style.css"
	crossorigin="anonymous"
/>
```
<audio> 和 <video>
控制跨域的多媒体资源加载。如果需要跨域加载音频或视频文件并操作其数据，必须正确设置 crossorigin。
```
<video
	src="https://example.com/video.mp4"
	crossorigin="use-credentials"
></video>
```

应用场景

加载外部字体或样式：在跨域加载字体或样式文件时，确保跨域策略正确配置，避免加载失败或警告。
```
<link
	href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
	rel="stylesheet"
	crossorigin="anonymous"
/>
```
操作跨域图片：如果需要将跨域图片渲染到 canvas，需要设置 crossorigin。
```
<img src="https://example.com/image.jpg" crossorigin="anonymous" />
```
安全性和完整性校验：使用子资源完整性校验时，crossorigin 必须与 integrity 一起使用，确保资源未被篡改。
```
<script
	src="https://cdn.example.com/lib.js"
	crossorigin="anonymous"
	integrity="sha384-..."
></script>
```

注意事项

服务器配置要求：
- 必须正确设置 CORS 响应头：
  - 对于 anonymous：Access-Control-Allow-Origin: * 或特定域。
  - 对于 use-credentials：需要同时设置 Access-Control-Allow-Credentials: true 和明确的域名。
- 例如：
```
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Credentials: true
```
浏览器限制：
- 如果 CORS 策略不匹配，资源加载将失败。
- 不支持 crossorigin 的旧版浏览器会忽略该属性。

总结

crossorigin 属性是一个控制跨域资源加载行为的关键属性，它确保跨域资源的安全性与功能性，常用于图片、脚本、样式和多媒体文件的加载。合理使用可以避免 CORS 错误，提升用户体验和安全性。

18. 说说你对 SSG 的理解

什么是 SSG？

SSG (Static Site Generation) 指的是静态站点生成，是一种在构建时将内容预渲染成静态 HTML 文件的方式。这些静态文件在用户访问时直接从服务器或 CDN 提供，而无需每次都动态生成页面内容。SSG 通常用于生成快速、可扩展且对搜索引擎友好的静态站点。

SSG 是 Jamstack（JavaScript、API、Markup）的核心部分之一，适用于内容以静态为主但需要动态表现的场景。

SSG 的核心特点

预渲染
在构建阶段（Build Time）完成 HTML 的生成，而非在用户访问时动态生成。
高性能
由于静态文件可以直接通过 CDN 提供，减少了后端处理时间，页面加载速度非常快。
SEO 友好
静态 HTML 页面对搜索引擎更友好，避免了动态内容无法被正确索引的问题。
构建时生成
内容变更时需要重新构建，生成新的静态文件并部署。

SSG 的工作原理

开发者通过框架（如 Next.js、Nuxt.js）定义页面组件和数据源。
在构建阶段，框架会：
- 获取数据（通过 API 或本地文件）。
- 将数据与模板结合，生成静态 HTML 文件。
生成的静态文件部署到服务器或 CDN。
用户访问时，服务器直接返回静态文件，减少服务器处理时间。

SSG 的优点

快速加载
静态文件通过 CDN 提供，减少了服务器和网络的延迟。
低资源消耗
不需要后端服务器实时处理请求，降低了服务器的运行成本。
高安全性
由于没有动态服务器或数据库，攻击面较小，安全性更高。
可扩展性强
静态文件可以轻松分发到全球的 CDN 节点，无需复杂的服务器配置。
对 SEO 友好
生成的静态页面直接提供给爬虫，避免 SPA（单页应用）需要等待 JavaScript 渲染后才能被索引的问题。

SSG 的缺点

动态性不足
如果站点需要实时动态内容（如用户数据、评论等），实现起来较复杂，需要配合客户端渲染（CSR）或增量静态生成（ISR）。
构建时间长
对于大型站点，每次变更后都需要重新构建整个站点，耗时较长。
数据更新不及时
数据变更后需要重新生成并部署，无法像动态站点那样实时更新。

SSG 的典型使用场景

博客和文档网站
- 内容更新频率较低。
- 例如：技术博客、API 文档（如 Next.js 官网、Vue 文档）。
企业官网和营销页面
- 需要高性能和 SEO 友好。
- 例如：产品介绍页、登陆页面。
电子商务的静态内容
- 例如：商品列表页、商品分类页。
静态内容展示
- 例如：图片库、案例展示页。

常用的 SSG 框架

Next.js
- 支持 SSG、SSR（服务端渲染）和 CSR（客户端渲染）。
- 提供灵活的路由和数据获取方式。
Nuxt.js
- Vue.js 的同类框架，支持 SSG 和 SSR。
- 常用于 Vue.js 技术栈的静态站点生成。
Gatsby
- 基于 React 的静态站点生成框架。
- 生态丰富，支持 GraphQL 查询数据。
Hugo
- 高性能静态站点生成器，基于 Go 语言。
- 适合生成速度要求较高的站点。
Jekyll
- 基于 Ruby 的静态站点生成器，广泛用于 GitHub Pages。
11ty (Eleventy)
- 灵活的零依赖静态站点生成器，支持多种模板引擎。

SSG 与其他渲染方式的比较

特性	SSG	SSR（服务端渲染）	CSR（客户端渲染）
渲染时机	构建时生成	用户请求时生成	客户端渲染
性能	高（通过 CDN）	中（取决于服务器性能）	低（需要下载和解析 JS）
动态性	静态，不支持实时动态内容	实时动态内容支持	动态内容由前端控制
SEO	好	好	差（依赖于爬虫对 JS 的支持）
复杂性	低	高	高

SSG 的改进：增量静态生成（ISR）

增量静态生成（Incremental Static Regeneration）是对传统 SSG 的改进，允许：

仅重新生成部分页面，而不是重建整个站点。
在某些页面访问时，后台异步更新静态文件。

例如，Next.js 提供了 ISR，通过 revalidate 配置实现增量更新：

export async function getStaticProps() {
	return {
		props: { data: await fetchData() },
		revalidate: 10, // 每 10 秒重新生成页面
	};
}

总结

SSG 是一种高效的渲染方式，适合内容相对固定的站点。结合现代框架的增量生成能力，可以弥补动态性不足的问题。在性能、SEO 和开发效率之间取得平衡，使其成为前端开发的重要工具之一。

19. 说说你对 Dom 树的理解

什么是 DOM 树？

DOM（Document Object Model）是浏览器解析 HTML 文档后生成的一种树形结构，用于表示文档的内容、结构和样式。DOM 树是 HTML 文档在内存中的表示形式，其中每个 HTML 元素都被解析为树中的一个节点。

DOM 树的结构

DOM 树是由以下节点组成的层级结构：

文档节点：
树的根节点，表示整个 HTML 文档。常用 document 对象表示。
```
console.log(document); // 输出整个 DOM 树的根
```

元素节点：
对应 HTML 标签（如 <div>、<p> 等），是 DOM 树的核心组成部分。

<div>
	<p>Text</p>
</div>

对应的 DOM 树：

Document
 └── <html>
      ├── <head>
      └── <body>
           └── <div>
                └── <p>
                     └── Text

属性节点：
每个元素的属性（如 id、class）以节点形式存储在元素节点中，但不会作为树的直接子节点。
```
<div id="container"></div>
```
对应：
```
const div = document.getElementById('container');
console.log(div.id); // 输出: container
```
文本节点：
文本内容会作为文本节点存在，是元素节点的子节点。
```
<p>Hello World</p>
```
对应：
```
<p>
 └── Text: "Hello World"
```
注释节点：
表示 HTML 中的注释内容，通常用于标记开发者注释。
```

```

DOM 树的生成过程

解析 HTML：
浏览器读取 HTML 文档，按顺序解析标记。
构建 DOM 树：
解析每个标签并将其转化为节点，按照标签的嵌套关系形成树形结构。
结合 CSSOM：
CSSOM 是由 CSS 样式表解析生成的对象模型，与 DOM 树结合后形成渲染树。
渲染页面：
渲染树被浏览器绘制到屏幕上，完成页面的展示。

DOM 树的特点

树形结构：
根节点为 document，其子节点为 HTML 标签，节点间存在父子和兄弟关系。
动态性：
DOM 树是动态的，可以通过 JavaScript 修改或操作，例如增删节点、改变属性等。
层级访问：
每个节点都可以通过父节点、子节点或兄弟节点进行访问和操作。
性能问题：
由于 DOM 操作会导致重绘或重排，频繁的 DOM 操作可能引发性能瓶颈。

DOM 树的常见操作

节点访问：

获取特定节点：

const element = document.getElementById('myDiv');

遍历子节点：

const children = document.querySelector('ul').children;

节点操作：

增加节点：

const newElement = document.createElement('p');
document.body.appendChild(newElement);

删除节点：

const parent = document.getElementById('parent');
parent.removeChild(parent.firstChild);

修改节点：

修改属性：

const div = document.getElementById('myDiv');
div.setAttribute('class', 'newClass');

修改内容：

const div = document.getElementById('myDiv');
div.textContent = 'Updated Text';

DOM 树的优化

由于 DOM 操作会影响页面的重绘和重排，以下是一些优化建议：

减少 DOM 操作：
合并多次 DOM 操作，避免频繁地修改 DOM。

使用文档片段：
将多个节点添加到文档片段中，最后一次性插入到 DOM 树：

const fragment = document.createDocumentFragment();
for (let i = 0; i < 10; i++) {
	const li = document.createElement('li');
	li.textContent = `Item ${i}`;
	fragment.appendChild(li);
}
document.querySelector('ul').appendChild(fragment);

异步加载内容：
对于大规模内容加载，尽量使用异步方式减少阻塞。
避免强制同步布局：
避免获取元素属性（如 offsetHeight），导致浏览器强制重新计算布局。

DOM 树的实际应用场景

前端开发中的动态交互：
通过 DOM 操作，实现动态页面内容更新和交互（如表单验证、动态菜单等）。
虚拟 DOM 技术：
框架如 React、Vue 使用虚拟 DOM 模拟 DOM 树，并进行高效的差分更新。
性能优化与调试：
分析页面的 DOM 结构，优化层次过深或冗余的节点。

总结

DOM 树是浏览器解析 HTML 文档后生成的内存模型，提供了对文档结构的编程接口。通过 DOM 树，开发者可以动态操作页面内容，实现丰富的交互效果。然而，由于 DOM 操作可能影响页面性能，因此需要注意优化策略，减少不必要的操作。

20. Node 和 Element 是什么关系？

Node 和 Element 的关系

Node 和 Element 是 JavaScript DOM API 中两个重要的对象接口，用于表示 HTML 或 XML 文档中的节点。二者存在从属关系：

Node 是所有 DOM 节点的基础接口，表示 DOM 树中的任意节点。
Element 是 Node 的子接口，仅表示 HTML 或 XML 文档中的元素节点。

`Node` 对象

Node 是一个基类，表示 DOM 树中的任意节点，包括以下类型：

元素节点 (ELEMENT_NODE)：HTML 或 XML 标签。
文本节点 (TEXT_NODE)：标签中的文本内容。
注释节点 (COMMENT_NODE)：HTML 注释。
文档节点 (DOCUMENT_NODE)：document 对象。
文档片段节点 (DOCUMENT_FRAGMENT_NODE)：轻量级容器，用于创建文档片段。

`Node` 的属性和方法

属性：
- nodeType：返回节点类型（例如 1 表示元素节点）。
- nodeName：返回节点名称（如 DIV、#text）。
- childNodes：返回子节点的集合。
- parentNode：返回父节点。
- firstChild / lastChild：访问第一个/最后一个子节点。
方法：
- appendChild(node)：向节点末尾添加子节点。
- removeChild(node)：从节点中移除指定子节点。
- cloneNode(deep)：克隆节点。

示例：

const node = document.querySelector('div');
console.log(node.nodeType); // 1 (ELEMENT_NODE)
console.log(node.nodeName); // "DIV"

`Element` 对象

Element 是继承自 Node 的接口，专门表示 HTML 或 XML 元素节点。所有 HTML 标签（如 <div>、<span>）在 DOM 树中都是 Element 类型。

`Element` 的属性和方法

Element 继承了 Node 的所有属性和方法，并扩展了以下内容：

属性：
- id：返回或设置元素的 id 属性。
- className：返回或设置元素的 class。
- tagName：返回元素的标签名。
- attributes：返回元素的属性集合。
方法：
- getAttribute(name) / setAttribute(name, value)：获取或设置属性值。
- querySelector(selector)：在元素范围内查找符合选择器的第一个子元素。
- querySelectorAll(selector)：查找所有符合选择器的子元素。
- classList：操作元素的类名（如 add、remove）。

示例：

const element = document.querySelector('div');
console.log(element.tagName); // "DIV"
console.log(element.id); // 获取 id 属性
element.setAttribute('data-value', '123'); // 设置自定义属性
element.classList.add('active'); // 添加类名

`Node` 和 `Element` 的关系

继承关系：
Element 是 Node 的子类，因此 Element 继承了 Node 的所有特性。所有 Element 对象同时也是 Node 对象。
使用场景不同：
- Node 更加通用，适用于操作任意节点类型（例如文本、注释、文档节点）。
- Element 仅用于操作 HTML 或 XML 元素节点。
行为不同：
- Node 属性和方法通常用于树结构操作（如获取子节点或父节点）。
- Element 属性和方法更多与 HTML 元素相关（如操作属性和类名）。

一个 DOM 树中的示例对比

HTML 示例：

<div id="container">
	Hello <span>World</span>
	<!-- This is a comment -->
</div>

DOM 树结构：

Node (DOCUMENT_NODE)
 └── Element <html>
      └── Element <body>
           └── Element <div> #container
                ├── Text: "Hello "
                ├── Element <span>
                │     └── Text: "World"
                └── Comment: "This is a comment"

操作示例：

const divNode = document.querySelector('#container'); // 获取 <div>
console.log(divNode instanceof Node); // true
console.log(divNode instanceof Element); // true

const textNode = divNode.firstChild; // 获取 "Hello " 文本节点
console.log(textNode instanceof Node); // true
console.log(textNode instanceof Element); // false (因为它是文本节点)

总结

特性	Node	Element
表示范围	任意类型的节点（元素、文本等）	仅表示元素节点（HTML/XML 标签）
继承关系	父类	子类
常用操作	操作节点树结构	操作元素的属性、类名等
属性和方法	基础（如 `parentNode`、`childNodes`）	扩展了更多元素相关的方法
实例化场景	文本节点、注释节点、文档节点等	`<div>`、`<span>` 等 HTML 标签

Node 是基础，用于通用节点操作。
Element 是扩展，用于专门处理 HTML 或 XML 的标签节点。

21. 如何控制 input 输入框的输入字数？

在 HTML 和 JavaScript 中，可以通过多种方式限制用户在 <input> 输入框中的输入字数。以下是几种常见的方法：

1. 使用 `maxlength` 属性

HTML 中的 maxlength 属性用于直接限制用户输入的字符数。
适用于单行文本框（<input type="text">）或多行文本框（<textarea>）。

示例：

<input type="text" maxlength="10" placeholder="最多输入10个字符" />
<textarea maxlength="20" placeholder="最多输入20个字符"></textarea>

优点：简单易用，无需额外的 JavaScript。
限制：无法实现动态或条件性的字数控制。

2. 使用 JavaScript 动态控制字数

如果需要动态控制字数，例如在特定条件下调整限制，或者显示实时的字数统计，可以使用 JavaScript。

示例 1：限制输入长度

<input type="text" id="textInput" placeholder="最多输入10个字符" />

<script>
	const input = document.getElementById('textInput');
	input.addEventListener('input', () => {
		const maxLength = 10;
		if (input.value.length > maxLength) {
			input.value = input.value.slice(0, maxLength); // 截取前10个字符
		}
	});
</script>

示例 2：实时显示剩余字数

<textarea id="textarea" placeholder="最多输入20个字符"></textarea>
<p id="charCount">剩余字符：20</p>

<script>
	const textarea = document.getElementById('textarea');
	const charCount = document.getElementById('charCount');
	const maxLength = 20;

	textarea.addEventListener('input', () => {
		const remaining = maxLength - textarea.value.length;
		charCount.textContent = `剩余字符：${Math.max(0, remaining)}`;
		if (textarea.value.length > maxLength) {
			textarea.value = textarea.value.slice(0, maxLength);
		}
	});
</script>

3. 使用正则表达式验证输入

可以通过正则表达式验证输入的内容，并在超出字数限制时阻止输入。

示例：限制字数为 10 且只允许输入字母

<input type="text" id="regexInput" placeholder="最多输入10个字母" />

<script>
	const input = document.getElementById('regexInput');
	input.addEventListener('input', (event) => {
		const maxLength = 10;
		const regex = /^[a-zA-Z]*$/; // 仅允许字母输入
		if (!regex.test(input.value) || input.value.length > maxLength) {
			input.value = input.value.slice(0, maxLength); // 保留符合规则的部分
		}
	});
</script>

4. 阻止用户超出字数的输入

在 keydown 事件中，判断输入是否会超出字数限制，超出则阻止输入。

示例：

<input type="text" id="blockInput" placeholder="最多输入10个字符" />

<script>
	const input = document.getElementById('blockInput');
	input.addEventListener('keydown', (event) => {
		const maxLength = 10;
		if (input.value.length >= maxLength && event.key !== 'Backspace') {
			event.preventDefault(); // 阻止输入
		}
	});
</script>

5. 使用第三方库

如果需要更复杂的功能，比如字符计数、动态字数限制、显示超出部分等，可以使用第三方库，如：

示例：Inputmask

<input id="maskedInput" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/inputmask/5.0.7/inputmask.min.js"></script>
<script>
	Inputmask({ regex: '.{0,10}' }).mask('#maskedInput'); // 限制最多输入10个字符
</script>

总结

简单的字数限制：使用 maxlength 属性。
动态控制字数或实时显示剩余字数：使用 JavaScript 的 input 事件。
条件性限制或输入验证：结合正则表达式或 keydown 事件。
更高级功能：借助第三方库。

22. 导致页面加载白屏时间长的原因有哪些，怎么进行优化？

页面加载白屏时间长，通常是指从用户访问页面到页面可见内容渲染出来之间的时间过长。这一问题可能由多个因素引起，可以分为以下几类原因和优化方法：

1. 导致页面白屏时间长的原因

(1) HTML 和 CSS 加载过慢

原因：
- HTML 文件体积过大，加载时间过长。
- CSS 文件加载完成后才能渲染页面，CSS 文件过大或请求过多导致渲染阻塞。
- 未开启服务器压缩（如 Gzip、Brotli）。

(2) JavaScript 阻塞渲染

原因：
- JavaScript 文件同步加载（阻塞渲染树构建）。
- 较大的 JavaScript 文件或无用代码增加了解析和执行时间。
- 动态内容依赖大量的 JavaScript 渲染。

(3) 首屏资源请求过多

原因：
- 页面首屏依赖多个资源（如图片、字体、第三方库）。
- 请求数量过多或资源分散在多个域名，增加了 HTTP 请求时间。

(4) 网络延迟或带宽不足

原因：
- 用户网络慢（如移动网络）。
- CDN 配置不合理，未根据用户地理位置选择最近节点。
- 服务器响应慢或高延迟。

(5) 渲染性能问题

原因：
- 页面渲染过程中涉及复杂的样式计算或布局计算。
- 图片未优化（尺寸过大或格式不合理）。

(6) 动态数据加载延迟

原因：
- 页面依赖的 API 接口响应慢，导致渲染数据缺失。
- 接口未缓存，重复请求服务器。

2. 优化页面白屏时间的方法

(1) 优化 HTML 和 CSS

使用精简的 HTML 结构：减少不必要的标签和嵌套。
合并 CSS 文件：减少 HTTP 请求次数。
使用异步加载 CSS（关键 CSS 提前加载）：
- 提取首屏关键 CSS，内联到 HTML。
- 非关键 CSS 使用 rel="preload" 或延迟加载。

<link
	rel="preload"
	href="styles.css"
	as="style"
	onload="this.rel='stylesheet'"
/>
<noscript><link rel="stylesheet" href="styles.css" /></noscript>

启用压缩：开启 Gzip 或 Brotli 压缩。
使用 CSS 动画代替 JavaScript 动画：提升性能。

(2) 优化 JavaScript

减少阻塞性 JS 文件加载：
- 使用 defer 和 async 加载非关键 JavaScript。
- defer：延迟执行，等 DOM 完全解析后执行。
- async：异步加载和执行，适用于独立脚本。

<script src="script.js" defer></script>
<script src="analytics.js" async></script>

Tree-shaking：去除未使用的代码，减少打包体积。
代码拆分（Code Splitting）：仅加载当前页面需要的代码。
使用轻量级框架或原生 JS：减少依赖过大的库。

(3) 优化首屏资源

图片优化：
- 使用现代图片格式（如 WebP）。
- 使用 srcset 和 sizes 提供多分辨率图片。
- 延迟加载非首屏图片（Lazy Load）。

<img src="placeholder.jpg" data-src="image.jpg" loading="lazy" alt="example" />

字体优化：
- 减少字体文件体积，选择子集字体。
- 使用 font-display: swap; 提前渲染文本内容。
使用 CDN 加速：
- 部署静态资源到 CDN。
- 确保 CDN 节点覆盖用户群区域。
预加载关键资源：
- 使用 <link rel="preload"> 提前加载关键资源。

<link rel="preload" href="main.js" as="script" />
<link rel="preload" href="styles.css" as="style" />

(4) 优化网络请求

合并请求：合并 CSS 和 JS 文件，减少请求数量。
开启 HTTP/2：支持多路复用，提高请求效率。
启用缓存：
- 对静态资源设置长时间缓存（Cache-Control 和 ETag）。
- 动态数据使用缓存策略，如 Service Worker。

(5) 提升渲染性能

减少样式计算复杂度：
- 避免深层嵌套的 CSS 选择器。
- 使用更高效的选择器（如类选择器）。
避免频繁重绘和重排：
- 合理使用 transform 和 opacity，避免直接操作 DOM 布局属性（如 width、height）。
首屏内容优先渲染：
- 使用 SSR（服务端渲染）或 SSG（静态站点生成），优先输出首屏内容。
- 提前加载首屏的核心数据。

(6) 动态数据优化

减少 API 调用延迟：
- 使用接口聚合（Batch API Requests）。
- 开启服务端缓存（如 Redis、Memcached）。
骨架屏设计：
- 提前显示页面结构或占位符，提升用户感知速度。

<div class="skeleton">
	<div class="skeleton-header"></div>
	<div class="skeleton-body"></div>
</div>

3. 实践示例：优化后的页面加载过程

HTML 加载：快速解析简化的 HTML 文件。
CSS 渲染：
- 首屏 CSS 内联。
- 非关键 CSS 异步加载。
JavaScript 加载：
- 核心 JS 延迟执行。
- 非核心 JS 使用 async 加载。
资源加载：
- 使用 CDN 提供优化的图片和字体。
- 延迟加载非首屏资源。
渲染优化：
- 使用骨架屏或 SSR 提前渲染内容。

4. 总结

导致页面白屏时间长的原因包括资源加载慢、渲染阻塞、网络延迟和代码复杂性等。优化可以从多个方面入手：

加速静态资源加载（压缩、CDN、预加载）。
减少阻塞性 JavaScript。
提升渲染效率（骨架屏、延迟加载）。通过以上手段，可以显著减少页面白屏时间，提升用户体验。

23. 假设我要上传图片，怎么在选择图片后，通过浏览器预览待上传的图片？

在浏览器中上传图片后，可以通过 JavaScript 实现图片的预览功能。通常，使用 FileReader API 或者 URL.createObjectURL 来读取图片文件并显示在页面上。

实现步骤：

监听用户选择图片的事件（通常是通过 <input type="file"> 元素）。
获取用户选择的文件。
使用 FileReader 或 URL.createObjectURL() 将图片文件读取为数据 URL。
将读取到的图片数据显示在页面上的 <img> 标签中。

示例 1：使用 `FileReader` API 预览图片

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>图片预览</title>
	</head>
	<body>
		<h2>图片上传预览</h2>
		<!-- 图片上传按钮 -->
		<input type="file" id="fileInput" accept="image/*" />

		<!-- 图片预览区域 -->
		<div id="preview">
			<img
				id="previewImage"
				src=""
				alt="预览图片"
				style="max-width: 100%; display: none;"
			/>
		</div>

		<script>
			const fileInput = document.getElementById('fileInput');
			const previewImage = document.getElementById('previewImage');

			// 监听文件选择事件
			fileInput.addEventListener('change', function (event) {
				const file = event.target.files[0]; // 获取用户选择的文件
				if (file) {
					const reader = new FileReader();

					// 当文件读取完成后，设置图片源
					reader.onload = function (e) {
						previewImage.src = e.target.result; // e.target.result 是图片的 data URL
						previewImage.style.display = 'block'; // 显示图片
					};

					// 读取图片文件
					reader.readAsDataURL(file);
				}
			});
		</script>
	</body>
</html>

示例 2：使用 `URL.createObjectURL()` 预览图片

另一种方法是使用 URL.createObjectURL() 来创建一个对象 URL。这种方式不需要使用 FileReader，而是直接通过浏览器的 API 生成一个 URL 来表示文件。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>图片预览</title>
	</head>
	<body>
		<h2>图片上传预览</h2>
		<!-- 图片上传按钮 -->
		<input type="file" id="fileInput" accept="image/*" />

		<!-- 图片预览区域 -->
		<div id="preview">
			<img
				id="previewImage"
				src=""
				alt="预览图片"
				style="max-width: 100%; display: none;"
			/>
		</div>

		<script>
			const fileInput = document.getElementById('fileInput');
			const previewImage = document.getElementById('previewImage');

			// 监听文件选择事件
			fileInput.addEventListener('change', function (event) {
				const file = event.target.files[0]; // 获取用户选择的文件
				if (file) {
					// 使用 URL.createObjectURL 创建图片的对象URL
					const objectURL = URL.createObjectURL(file);
					previewImage.src = objectURL; // 设置图片源
					previewImage.style.display = 'block'; // 显示图片
				}
			});
		</script>
	</body>
</html>

区别：

FileReader：将图片文件读取为数据 URL。适用于需要将文件内容嵌入页面的情况。生成的数据 URL 大小较大，因为它将文件内容编码为 base64 格式。
URL.createObjectURL：生成一个指向本地文件的 URL，文件仍然保留在浏览器中，并没有被编码为 base64 格式。适合处理大文件，性能更好。

总结

这两种方式都可以用来预览图片，选择哪种方式取决于具体的需求。FileReader 更适合需要在页面中嵌入图片的情况，而 URL.createObjectURL 则在性能上更优，适用于大文件或不需要将图片内容嵌入 HTML 的情况。

24. 渐进式 JPEG 有了解过吗？

渐进式 JPEG（Progressive JPEG）是一种 JPEG 图片的编码方式，它与普通的 baseline JPEG（标准 JPEG）相比，图像的加载方式不同，能够在图片加载过程中提供更好的用户体验。

渐进式 JPEG 的特点

逐渐显示图像：
- 渐进式 JPEG 会在加载过程中显示图像的粗略版本，然后随着加载的进展，逐步提高图像的细节和清晰度。
- 初始加载时，图像会以模糊的低分辨率显示，随着下载更多的数据，图像逐渐变得更清晰。
多次扫描：
- 渐进式 JPEG 图像在编码时会生成多个扫描，每个扫描包含不同层级的图像信息。每个扫描增加的细节来自图像的高频部分，通常是从粗略到精细的多个数据块。
- 这些多次扫描的图像信息使得在较慢的网络环境下，用户可以快速看到一个模糊的版本，而不是空白或未加载的状态。
用户体验提升：
- 与普通 JPEG 图像的逐行显示不同，渐进式 JPEG 提供了一个“逐步清晰”的视觉效果，使得图片加载过程中，用户可以首先看到图片的大致内容，从而提高了用户的视觉体验，尤其是在低带宽的情况下。

渐进式 JPEG 与普通 JPEG 的区别

特性	普通 JPEG（Baseline JPEG）	渐进式 JPEG (Progressive JPEG)
显示方式	从上到下逐行渲染图像	逐步渲染图像，图像从模糊到清晰
加载体验	在图片完全加载之前显示空白或低质量图像	在加载过程中显示粗略的图像，再逐渐变清晰
文件大小	一般较小	文件大小通常会稍大一些
适用场景	快速加载或小图片展示	长时间加载或大图片展示

渐进式 JPEG 的工作原理

编码阶段：
- 在图像的编码过程中，渐进式 JPEG 会将图像的数据分成多个扫描层次。第一个扫描层次包含的是图像的粗略、模糊版本，后续的扫描层次提供更多的图像细节，直到最终的图像完全加载。
解码阶段：
- 当浏览器开始加载图片时，它会先显示第一个扫描层次（模糊的图像），随着图像的进一步解码，其他扫描层次会逐渐填补图像的细节，直到图像完全显示。

渐进式 JPEG 的优势

改善用户体验：在网络较慢的情况下，用户可以更快地看到图像的粗略版本，避免等待整个图像加载完毕。
适合大图展示：特别适合需要加载较大图片的场景，如长时间加载的背景图片或缩略图。
视觉反馈：逐步清晰的图像呈现使得用户可以更直观地看到图片的内容，而不是一直处于“加载中”状态。

渐进式 JPEG 的缺点

文件体积略大：由于渐进式 JPEG 包含多个扫描层次，因此在相同的图片质量下，文件体积往往会比普通 JPEG 略大。
对较低配置的设备可能有性能影响：逐步解码过程可能会对较老旧的设备造成一定的性能影响，尤其是在图片较大的时候。

如何使用渐进式 JPEG

在许多图像处理工具或库中，你可以选择将图像保存为渐进式 JPEG。例如：

Photoshop：在保存 JPEG 文件时，选择“渐进式”选项。
GIMP：在导出图片时，选择渐进式编码。
ImageMagick：使用命令行工具将 JPEG 图片转换为渐进式格式。

例如，使用 ImageMagick 的命令来转换 JPEG 为渐进式 JPEG：

convert input.jpg -interlace Plane output.jpg

总结

渐进式 JPEG 通过逐步呈现图像的效果，使得用户在图像加载过程中可以快速看到图像的大致内容，从而提升了体验，尤其是在带宽较低时。它的应用适合于需要加载较大图像或用户等待较长时间的场景，但会比普通 JPEG 文件稍大。在实际使用中，选择渐进式 JPEG 还是普通 JPEG，应该根据具体的需求和场景进行权衡。

25. 怎么实现“点击回到顶部”的功能？

实现“点击回到顶部”的功能通常需要两个主要步骤：

监听用户的点击事件，当用户点击某个按钮（通常是一个浮动按钮）时触发页面滚动。
平滑滚动到页面顶部，通常使用 JavaScript 的滚动控制来实现平滑的滚动动画。

实现步骤：

1. HTML 部分：

创建一个按钮（例如 <button> 或 <div>）来触发滚动事件。按钮可以设置为浮动的固定位置，通常出现在页面右下角。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>回到顶部</title>
		<style>
			/* 设置回到顶部按钮的样式 */
			#scrollToTopBtn {
				position: fixed;
				bottom: 20px;
				right: 20px;
				background-color: #007bff;
				color: white;
				border: none;
				border-radius: 50%;
				width: 50px;
				height: 50px;
				font-size: 24px;
				cursor: pointer;
				display: none; /* 默认隐藏按钮 */
			}
		</style>
	</head>
	<body>
		<!-- 内容区域，假设页面有很多内容以触发滚动 -->
		<div style="height: 2000px; padding-top: 20px;">
			<h1>滚动页面</h1>
			<p>页面内容...</p>
		</div>

		<!-- 回到顶部按钮 -->
		<button id="scrollToTopBtn">&#8679;</button>

		<script>
			// 获取回到顶部按钮
			const scrollToTopBtn = document.getElementById('scrollToTopBtn');

			// 页面滚动时显示或隐藏回到顶部按钮
			window.onscroll = function () {
				if (
					document.body.scrollTop > 100 ||
					document.documentElement.scrollTop > 100
				) {
					scrollToTopBtn.style.display = 'block'; // 显示按钮
				} else {
					scrollToTopBtn.style.display = 'none'; // 隐藏按钮
				}
			};

			// 点击按钮时平滑滚动到顶部
			scrollToTopBtn.onclick = function () {
				window.scrollTo({
					top: 0,
					left: 0,
					behavior: 'smooth', // 平滑滚动
				});
			};
		</script>
	</body>
</html>

代码解释：

HTML 部分：
- 在页面底部创建了一个按钮 <button>，该按钮用于触发回到顶部的功能。按钮的 id 为 scrollToTopBtn。
CSS 部分：
- 使用 position: fixed 将按钮固定在页面的右下角，并设置按钮的样式（例如背景颜色、尺寸等）。
- 默认情况下，按钮是 display: none，即在页面加载时不会显示。
JavaScript 部分：
- 监听页面滚动：使用 window.onscroll 事件，判断页面滚动的距离，当滚动超过 100 像素时，显示回到顶部按钮，否则隐藏按钮。
- 按钮点击事件：使用 scrollToTopBtn.onclick，点击按钮时使用 window.scrollTo() 方法，配合 behavior: 'smooth' 实现平滑滚动到页面顶部。

平滑滚动（`scrollTo`）

window.scrollTo() 方法允许我们设置页面的滚动位置。设置 behavior: 'smooth' 会使得滚动过程平滑，给用户带来更好的体验。

可选优化：

自定义按钮动画：你可以使用 CSS 动画来添加更多的视觉效果，例如按钮的透明度渐变或缩放动画等。
使用事件监听器：你可以使用 addEventListener 来替代 window.onscroll，更灵活地绑定事件。

window.addEventListener('scroll', function () {
	if (window.scrollY > 100) {
		scrollToTopBtn.style.display = 'block';
	} else {
		scrollToTopBtn.style.display = 'none';
	}
});

总结

通过结合 JavaScript 的 scrollTo 和 CSS 的 position: fixed，可以很容易地实现一个点击回到顶部的功能。在用户滚动页面时，当页面滚动超过一定高度时，显示一个回到顶部的按钮；当用户点击该按钮时，页面平滑滚动回顶部。这种方式不仅提升了用户体验，而且实现简单，兼容性较好。

26. SPA 应用怎么进行 SEO？

单页面应用（SPA，Single Page Application）通常使用 JavaScript 来动态加载和渲染页面内容，而不像传统的多页面应用（MPA）那样，每个页面都具有独立的 HTML 文件。这给 SEO（搜索引擎优化）带来了挑战，因为搜索引擎爬虫通常无法有效抓取 JavaScript 渲染的内容。

然而，尽管 SPA 应用面临 SEO 难题，但通过一些技术手段，仍然可以使 SPA 应用被搜索引擎有效地索引，提升搜索引擎排名。

SPA SEO 的挑战

JavaScript 渲染的问题：搜索引擎爬虫通常无法执行 JavaScript，因此它们只能抓取应用的初始 HTML 内容。对于依赖 JavaScript 渲染的 SPA，爬虫可能无法索引页面的动态内容。
动态 URL 和路由问题：SPA 应用的 URL 是动态生成的（例如 #/product/123），而不是传统的静态 URL，这可能使得搜索引擎难以正确理解页面结构。

解决方案

以下是几种常见的 SPA SEO 实现方法：

1. 服务器端渲染 (SSR)

服务器端渲染（SSR）是解决 SPA SEO 问题的一个常见方法，它可以在服务器端渲染页面并返回完整的 HTML，这样搜索引擎就能抓取到页面的完整内容。

原理：在服务器端，应用的 JavaScript 被执行并生成完整的 HTML 内容，搜索引擎抓取的是这个完全渲染后的 HTML 页面。
常用工具：
- Next.js：一个 React 框架，内置了支持 SSR 和静态生成的功能。
- Nuxt.js：一个 Vue 框架，支持 SSR 和静态生成。
- Angular Universal：Angular 的服务器端渲染解决方案。

2. 预渲染 (Prerendering)

预渲染是另一种常用的 SEO 解决方案，它适用于内容较为固定的 SPA。通过在构建时预先渲染页面并生成静态 HTML 文件，来解决 SEO 问题。

原理：在构建过程中，应用的每个路由都被渲染成一个静态 HTML 文件。当爬虫访问这些路由时，直接返回已经渲染好的 HTML 文件。
适用场景：适用于那些页面内容不频繁变化的 SPA 应用，如博客、产品详情页等。
常用工具：
- Prerender.io：一个服务，可以帮助将动态内容转换为静态 HTML，适用于单页面应用。
- Vue Press / Gridsome / Nuxt.js：这些框架都可以用于生成静态网站，适用于需要预渲染的 Vue 或 React 应用。

3. 使用动态渲染（Dynamic Rendering）

动态渲染是 Google 推荐的一种解决方案，它结合了 SSR 和预渲染的优点。针对爬虫请求，服务器动态生成完整的 HTML 内容；而针对普通用户请求，返回正常的 SPA 应用。

原理：当搜索引擎爬虫访问页面时，服务器返回预先渲染的静态 HTML；而当用户访问页面时，返回的是 SPA 应用，通过 JavaScript 渲染内容。
如何实现：
- 使用 User-Agent 进行判断，当请求来源是搜索引擎时，返回静态 HTML，当请求来源是普通浏览器时，返回 JavaScript 应用。
适用场景：适用于那些无法进行服务器端渲染或预渲染，但又希望兼顾搜索引擎的 SPA 应用。

4. 增强可抓取的内容（将 SPA 代码分离）

对于不使用 SSR 或预渲染的 SPA，还可以采取一些其他方法来增强 SEO：

合理设置 meta 标签：
- 使用 <meta> 标签设置每个页面的标题、描述和关键字。尽管搜索引擎会抓取 JavaScript 渲染的页面，但这些动态内容仍然有可能被抓取到。
- 使用 <meta name="robots" content="index,follow"> 等标签来指示搜索引擎是否抓取页面。
使用 history API 管理 URL：
- 使用 HTML5 history.pushState 和 history.replaceState 管理页面的 URL，可以避免像 #/product/123 这种锚点式 URL，改用像 www.example.com/product/123 这样的传统 URL，帮助搜索引擎理解页面结构。
提供网站地图（Sitemap）：
- 通过为 SPA 提供动态或静态的 XML 网站地图，帮助搜索引擎更好地理解页面结构，确保爬虫能够抓取到所有重要页面。
使用 JSON-LD 或 Schema.org 标记：
- 在页面中嵌入结构化数据（如 JSON-LD 或 Schema.org 格式），帮助搜索引擎更好地理解页面内容和含义，从而提高搜索引擎排名。

5. 增加页面加载速度

页面加载速度是 SEO 的一个重要因素，尤其对于 SPA 来说，以下是一些提升加载速度的优化建议：

懒加载（Lazy Loading）：对于非首屏内容，延迟加载，减少页面初次加载的时间。
代码分割（Code Splitting）：将 JavaScript 代码拆分成更小的模块，按需加载，减少初次加载时需要下载的文件大小。
压缩和优化资源：优化图像、CSS 和 JavaScript 文件的大小，提高页面加载速度。

总结

对于 SPA 应用，SEO 的核心挑战是确保搜索引擎能够访问并索引动态生成的内容。常见的解决方案包括：

服务器端渲染 (SSR)：将 JavaScript 渲染移到服务器端，生成完整的 HTML。
预渲染 (Prerendering)：将静态内容在构建时生成 HTML。
动态渲染：结合 SSR 和预渲染的优势，动态生成 HTML 内容。
增强页面可抓取性：合理使用 meta 标签、SEO 友好的 URL、网站地图等。
提升性能：通过懒加载、代码分割等方式提升页面加载速度，间接提升 SEO。

选择合适的策略取决于应用的规模、更新频率以及性能需求。通过这些优化手段，SPA 应用可以提高搜索引擎可见性，并获得更好的排名。

27. SEO 的原理是什么？

SEO（Search Engine Optimization，搜索引擎优化）是通过优化网站的结构、内容和外部链接等因素，以提高网站在搜索引擎结果中的排名，从而增加网站流量的过程。SEO 的目的是使网站在搜索引擎中获得更好的可见性和排名，从而吸引更多的用户访问。

SEO 的基本原理

SEO 的核心原理可以归结为以下几个方面：

1. 搜索引擎的工作原理

搜索引擎通过以下步骤来理解和评估网页的内容，从而决定其排名：

爬虫抓取：搜索引擎使用“爬虫”程序（如 Googlebot）来抓取互联网上的网页。这些爬虫会不断访问网页，下载其 HTML 内容，并将其存储到搜索引擎的数据库中。
索引：搜索引擎将抓取到的网页内容整理到数据库（即索引）中。索引是搜索引擎存储的所有网页的一个结构化列表，包含了页面的文本、图片、链接等内容。
排名算法：当用户在搜索引擎中输入查询时，搜索引擎会根据复杂的算法评估和排名这些网页。算法会考虑各种因素，比如关键词的匹配程度、页面的质量、用户的搜索意图等，以确定哪些网页最符合用户的需求。

2. 搜索引擎排名因素

搜索引擎使用大量的排名因素来评估页面的相关性和质量，常见的排名因素包括：

关键词优化：页面中是否包含用户搜索的关键词，以及这些关键词出现的位置和频率。关键词应当自然地融入到页面的标题、内容、URL 和元标签中。
页面内容的质量：搜索引擎更倾向于优质、原创、信息量大且有用的内容。如果网站内容对用户有价值，能解答用户的问题，就更可能获得更高的排名。
页面结构和可读性：清晰的页面结构、良好的可读性和用户体验（如快速加载、移动友好等）会影响排名。搜索引擎会偏好那些结构清晰、易于理解的页面。
外部链接（Backlinks）：指向该页面的外部网站链接（即反向链接）对排名有重要影响。反向链接的数量和质量决定了页面的权威性。高质量的外部链接能够提高页面的可信度和权威性，从而有助于提升排名。
用户行为信号：用户的行为也会影响页面排名。例如，页面的点击率（CTR）、停留时间、跳出率等都能反映出页面是否对用户有吸引力，搜索引擎会根据这些信号评估页面的质量。
页面加载速度：搜索引擎喜欢快速加载的网页，因为它能提供更好的用户体验。页面加载速度慢可能会导致排名下降。
移动端优化：随着移动设备的普及，搜索引擎对移动端友好的页面更为青睐。确保网站在移动端上的适配性，能够提升网站的排名。
SSL 证书（HTTPS）：使用 HTTPS 加密协议的网站比使用 HTTP 的网站更安全，搜索引擎也倾向于给予 HTTPS 网站更高的排名。

3. 搜索引擎优化的策略

根据以上原理，SEO 的优化策略可以从以下几个方面着手：

站内优化（On-page SEO）：
- 关键词优化：在页面的标题（title）、元描述（meta description）、标题标签（h1-h6）、URL 和正文内容中合理地使用目标关键词。
- 内部链接：合理地使用内部链接将相关页面连接起来，提升网站的整体结构和导航。
- 图片优化：优化图片的大小，使用合适的文件格式，并通过 alt 属性提供图片描述，以帮助搜索引擎理解图片内容。
- 元标签优化：确保页面的元描述和标题标签简洁且具有吸引力，能够吸引用户点击。
- 页面结构优化：使用良好的 HTML 结构，确保页面对用户友好、易于访问。
站外优化（Off-page SEO）：
- 获取高质量的外部链接：通过与相关网站合作、内容营销、社交媒体等方式获得高质量的反向链接，提升网站的权威性和排名。
- 社交信号：通过社交媒体平台增加内容曝光度，获取更多的社交分享、点赞和评论等信号，增强页面的可见性。
技术性 SEO（Technical SEO）：
- 优化网站速度：通过压缩图片、启用缓存、优化代码等方法提升页面加载速度。
- 优化移动端体验：确保网站在手机和平板上的良好表现，包括响应式设计、点击按钮适配、字体大小等。
- 使用结构化数据：通过 Schema.org 或 JSON-LD 提供结构化数据，帮助搜索引擎更好地理解页面内容，提高可见性。
- XML 网站地图和 robots.txt：使用网站地图帮助搜索引擎爬虫更好地抓取网页，使用 robots.txt 控制哪些页面可以被抓取，哪些不能。

总结

SEO 的原理可以概括为通过优化网站的内容、结构、速度、外部链接等多个方面，使得搜索引擎能够更好地理解网页，从而提升网页在搜索结果中的排名。SEO 的核心是为用户提供有价值、易于访问和高质量的内容，而不是单纯地为了迎合搜索引擎算法的变化。

28. 常用的 meta 元素有哪些？

在 HTML 中，<meta> 元素用于提供关于网页的元数据，它不会直接显示在网页中，但对浏览器和搜索引擎等非常重要。<meta> 标签通常放置在 <head> 标签内，提供一些页面的基本信息，如字符集、页面描述、关键字、作者等。

1. 字符集设置（Charset）

<meta charset="UTF-8" />

作用：定义网页的字符编码。
解释：UTF-8 是一种常用的字符编码，可以支持大多数语言的字符。设置字符集非常重要，能够避免乱码问题。

2. 页面描述（Description）

<meta name="description" content="This is a description of the page." />

作用：提供网页的简短描述，通常用于搜索引擎显示在搜索结果中的摘要部分。
解释：content 属性包含网页内容的简要描述，最好简洁明了、包含关键词，这对 SEO（搜索引擎优化）非常重要。

3. 关键词（Keywords）

<meta name="keywords" content="HTML, CSS, JavaScript, SEO" />

作用：提供网页的关键词列表，帮助搜索引擎了解页面内容的相关性。
解释：虽然很多搜索引擎现在已经不再依赖这个元标签来排名，但它仍然可以提供一定的参考信息。通过逗号分隔多个关键词。

4. 作者（Author）

<meta name="author" content="John Doe" />

作用：指定网页的作者。
解释：对于博客、文章或任何需要标注作者的页面，使用此标签可以明确标识。

5. 视口设置（Viewport）

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

作用：控制页面在移动设备上的显示方式，特别是响应式网页设计。
解释：width=device-width 使页面的宽度适应设备屏幕宽度，initial-scale=1.0 设置初始缩放比例。这个标签对移动端优化至关重要。

6. 网页刷新（Refresh）

<meta http-equiv="refresh" content="30" />

作用：设置页面的自动刷新时间，单位为秒。
解释：该标签常用于需要定时刷新内容的页面。例如，每 30 秒刷新一次页面。

7. 缓存控制（Cache-Control）

<meta
	http-equiv="Cache-Control"
	content="no-store, no-cache, must-revalidate"
/>

作用：控制页面的缓存行为。
解释：no-store 不缓存任何内容，no-cache 防止缓存使用已过期的内容，must-revalidate 强制验证缓存。

8. X-UA-Compatible（IE 浏览器兼容性）

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

作用：指定网页的兼容模式，通常用于 IE 浏览器。
解释：IE=edge 让 Internet Explorer 使用最新的渲染引擎，而不是老旧的兼容模式。

9. 社交媒体卡片（Open Graph）

<meta property="og:title" content="Page Title" />
<meta property="og:description" content="Page Description" />
<meta property="og:image" content="image_url.jpg" />
<meta property="og:url" content="http://www.example.com" />

作用：这些是 Open Graph 协议的一部分，允许网页在社交媒体（如 Facebook、Twitter）上显示自定义的卡片信息。
解释：这些元标签让你定义分享时显示的标题、描述、图片和链接等信息，提升社交分享的效果。

10. Twitter 卡片

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Page Title" />
<meta name="twitter:description" content="Page Description" />
<meta name="twitter:image" content="image_url.jpg" />

作用：专为 Twitter 分享优化，定义 Twitter 卡片的内容。
解释：twitter:card 控制卡片类型（例如：summary_large_image 会显示较大的图片），twitter:title、twitter:description 和 twitter:image 分别是卡片的标题、描述和图片。

11. 禁止搜索引擎索引（Robots）

<meta name="robots" content="noindex, nofollow" />

作用：告知搜索引擎该页面不应被索引或不应跟踪页面上的链接。
解释：noindex 阻止页面被搜索引擎索引，nofollow 阻止搜索引擎跟踪页面中的链接。

12. 主题颜色（Theme Color）

<meta name="theme-color" content="#ff6600" />

作用：定义浏览器工具栏的颜色，适用于移动设备上的浏览器。
解释：它控制手机浏览器上页面顶部的地址栏颜色，能够改善用户的视觉体验。

13. 视窗大小设置（Screen Color）

<meta
	name="apple-mobile-web-app-status-bar-style"
	content="black-translucent"
/>

作用：适用于苹果设备，控制在全屏 Web 应用或本地应用启动时状态栏的样式。
解释：该标签可以改变 iOS 设备在打开 Web 应用时的状态栏的外观。

14. 语言设置（Language）

<meta http-equiv="Content-Language" content="en" />

作用：指定网页的语言。
解释：对于多语言网页，使用此标签来标明页面的主语言，可以帮助搜索引擎确定网页的内容语言。

总结

<meta> 标签是 HTML 中非常重要的元素，通过它可以为搜索引擎提供有价值的信息，从而影响页面的搜索排名，也能改善页面的用户体验。不同的 meta 属性适用于不同的用途，包括字符集设置、页面描述、SEO 优化、响应式设计、缓存控制等。在开发网页时合理使用 <meta> 标签，可以显著提升网站的可见性、可访问性和用户体验。

29. 前端跨页面通信，你知道哪些方法？

前端跨页面通信指的是在不同页面（通常是不同窗口或标签页）之间进行数据交换或信息传递。常见的前端跨页面通信方法包括：

1. LocalStorage / SessionStorage

LocalStorage 和 SessionStorage 都是 Web Storage API 的一部分，它们可以存储数据并跨页面共享，适用于同一个源（域名和协议相同）的不同页面。

LocalStorage：数据持久存储，关闭浏览器或标签页后数据依然存在，直到手动清除。
SessionStorage：数据仅在当前浏览器会话中有效，页面关闭后数据消失。

使用场景：

可以通过 window.localStorage 或 window.sessionStorage 在不同标签页之间共享数据。
各页面通过监听 storage 事件来获取数据更新。

示例：

// 页面A设置数据
localStorage.setItem('data', JSON.stringify({ name: 'Alice' }));

// 页面B监听storage事件
window.addEventListener('storage', (event) => {
	if (event.key === 'data') {
		console.log('Data updated:', JSON.parse(event.newValue));
	}
});

2. Cookies

Cookies 可以在多个页面、多个会话之间共享数据。它是由浏览器自动管理并且可以被不同标签页或窗口访问。数据可以设置过期时间，也可以设置为只在当前会话有效。

示例：

// 设置cookie
document.cookie = 'username=John; expires=Thu, 18 Dec 2024 12:00:00 UTC';

// 获取cookie
let cookies = document.cookie;
console.log(cookies); // "username=John"

3. BroadcastChannel API

BroadcastChannel API 提供了一个简单的方式，可以在不同的浏览器标签页、窗口或工作线程之间传递消息。它适用于同一源（同一域名和协议）的不同页面之间的通信。

示例：

// 页面A 发送消息
const channel = new BroadcastChannel('channel_name');
channel.postMessage('Hello from page A');

// 页面B 接收消息
const channelB = new BroadcastChannel('channel_name');
channelB.onmessage = (event) => {
	console.log('Received:', event.data);
};

4. Window.postMessage()

postMessage() 方法可以跨不同窗口、标签页甚至跨域进行通信。它能够安全地传递数据，适用于跨源（不同域名、协议或端口）的通信。

示例：

// 页面A向子窗口发送消息
let iframe = document.getElementById('iframe');
iframe.contentWindow.postMessage('Hello from parent', '*');

// 页面B接收来自父页面的消息
window.addEventListener(
	'message',
	(event) => {
		console.log('Received message:', event.data);
	},
	false
);

5. SharedWorker

SharedWorker 允许多个浏览器标签页共享一个后台线程，在标签页之间共享数据。它比普通的 Web Worker 更强大，能够在不同页面之间进行通信。

示例：

// 创建共享 Worker
const worker = new SharedWorker('worker.js');

// 页面A 发送消息给 Worker
worker.port.postMessage('Hello from page A');

// 页面B 接收消息
worker.port.onmessage = (event) => {
	console.log('Worker response:', event.data);
};

6. Server-Sent Events (SSE)

Server-Sent Events 是一种单向通信方式，服务器可以主动推送数据到浏览器。它通过 HTTP 协议传输事件数据，用于实时更新页面内容。

示例：

// 打开 SSE 连接
const eventSource = new EventSource('/events');

// 监听消息
eventSource.onmessage = (event) => {
	console.log('New message:', event.data);
};

7. WebSockets

WebSocket 提供了一种双向、持久的通信机制，适用于需要实时数据交换的场景。与传统的 HTTP 请求不同，WebSocket 连接建立后可以在客户端和服务器之间进行持续的双向通信。

示例：

// 建立 WebSocket 连接
const socket = new WebSocket('ws://example.com');

// 发送消息
socket.send('Hello, server');

// 接收消息
socket.onmessage = (event) => {
	console.log('Received:', event.data);
};

8. Query String（URL 参数）

可以通过在 URL 中附加查询参数来实现跨页面传递数据。这个方法通常用于页面之间通过 URL 传递少量数据。

示例：

<!-- 页面A的URL -->
<a href="pageB.html?user=John">Go to Page B</a>

// 页面B读取 URL 参数
const urlParams = new URLSearchParams(window.location.search);
const user = urlParams.get('user');
console.log(user); // "John"

总结

前端跨页面通信的方式有很多，选择适合的方式主要取决于应用场景、数据传输的复杂性以及跨域的需求。常见的方法包括 LocalStorage、SessionStorage、Cookies、BroadcastChannel、postMessage、SharedWorker、SSE、WebSocket 和 URL 参数等。

30. script 标签中， async 和 defer 两个属性有什么用途和区别？

在 HTML 中，<script> 标签有两个属性：async 和 defer，它们都用于控制外部 JavaScript 文件的加载和执行方式，以优化页面加载性能。它们的主要区别在于脚本的加载顺序和执行时机。下面详细解释这两个属性的用途和区别。

1. async 属性

async 属性表示脚本是异步加载的。使用 async 属性时，浏览器会并行加载脚本和 HTML 内容，在脚本加载完成后立即执行。

用途：

当脚本的执行顺序不影响页面的功能时，使用 async 可以提高页面加载速度，因为它不会阻塞页面的其他内容的加载。

特点：

脚本加载时不会阻塞 HTML 解析。
如果有多个脚本使用 async，它们的执行顺序是未知的，取决于各自的加载完成时间。
一旦脚本加载完成，就会立即执行，可能会中断当前的 HTML 解析。

示例：

<script src="script1.js" async></script>
<script src="script2.js" async></script>

在上面的示例中，script1.js 和 script2.js 会并行加载，谁先加载完成谁就先执行，但执行顺序无法保证。

2. defer 属性

defer 属性表示脚本的延迟执行，脚本会在页面解析完成后（即 DOM 完全构建完成后）再执行，且脚本会按照在页面中出现的顺序执行。

用途：

当脚本的执行顺序非常重要时，或者脚本依赖于 DOM 元素时，使用 defer 可以保证脚本执行的顺序和页面内容的加载顺序。

执行时机：

脚本加载是异步的，但它的执行会被延迟到 HTML 文档解析完毕之后。
如果有多个 defer 脚本，它们会按照出现的顺序依次执行。

特点：

脚本加载时不会阻塞 HTML 解析。
脚本会按顺序执行，且保证在 DOM 完全构建后执行。
只有当页面加载完成后才会执行，因此比没有 defer 的脚本（同步加载）具有更好的性能。

示例：

<script src="script1.js" defer></script>
<script src="script2.js" defer></script>

在上面的示例中，script1.js 和 script2.js 会并行加载，但它们会按照顺序在 HTML 文档解析完成后执行。

`async` 与 `defer` 的区别

特性	`async`	`defer`
加载方式	异步加载（不阻塞页面渲染）	异步加载（不阻塞页面渲染）
执行时机	脚本加载完成后立即执行	DOM 完全解析后执行（在 `DOMContentLoaded` 事件前）
执行顺序	无法保证，按照脚本加载完成的顺序执行	按照文档中出现的顺序依次执行
适用场景	无依赖关系的独立脚本，执行顺序不重要	需要依赖 DOM 或者脚本执行顺序重要的场景

总结：

async：适用于独立脚本，且脚本之间执行顺序不重要。脚本加载完成后立即执行，可能会打乱 HTML 解析的顺序。
defer：适用于需要按顺序执行的脚本，且确保在页面解析完成后再执行，不会阻塞页面的渲染。

一般情况下，如果你有多个脚本需要执行并且不依赖其他脚本的顺序，使用 async；如果多个脚本之间有依赖关系或者需要等待 DOM 加载完毕再执行，使用 defer。

31. DNS 预解析是什么？怎么实现？

DNS 预解析（DNS Prefetching）是什么？

DNS 预解析是浏览器的一个优化机制，用来提前解析外部资源的域名，从而减少用户访问这些资源时的延迟。具体来说，浏览器会在页面加载过程中，通过提前发起 DNS 查询，将目标域名解析为对应的 IP 地址，避免在需要访问该域名时再次进行 DNS 查询，从而加速资源的加载。

作用：

减少 DNS 查询延迟：通常，当浏览器请求一个外部资源时，首先需要解析域名，获取相应的 IP 地址。DNS 查询是网络请求中的一个耗时操作。如果在访问该域名之前已经进行 DNS 解析，后续的请求将不再受到 DNS 查询延迟的影响。
优化资源加载时间：通过提前解析 DNS，可以使得页面中的资源请求（如图片、脚本、样式表等）更加迅速地发送请求，提高页面的响应速度。

如何实现 DNS 预解析？

在 HTML 文档中，可以使用 <link> 标签配合 rel="dns-prefetch" 来实现 DNS 预解析。<link> 标签是一个用于指定文档间关系的元素，通过 rel="dns-prefetch" 指定需要预解析的域名。

语法：

<link rel="dns-prefetch" href="https://example.com" />

示例：

假设页面中需要加载来自不同域名的资源（如外部脚本、图片等），可以使用 DNS 预解析来提前解析这些外部域名的 IP 地址，优化后续请求的速度：

<head>
	<!-- 预解析外部域名 -->
	<link rel="dns-prefetch" href="https://cdn.example.com" />
	<link rel="dns-prefetch" href="https://assets.example.com" />
</head>

在上面的示例中，https://cdn.example.com 和 https://assets.example.com 是外部域名，浏览器会在页面加载时提前发起 DNS 查询来解析这些域名。

预解析的工作原理：

浏览器解析 HTML 文档时，遇到 <link rel="dns-prefetch" href="..."> 标签时，浏览器会立即开始解析指定的域名。
浏览器发起 DNS 查询，并缓存解析结果（即 IP 地址），这个过程发生在页面的其他资源加载之前。
当需要访问这些域名的资源时，由于 DNS 解析已经完成，浏览器可以立即发起 HTTP 请求，从而避免了等待 DNS 查询的时间。

注意事项：

不对所有请求有效：rel="dns-prefetch" 仅会解析域名，而不会发起实际的 HTTP 请求。它只是提前做一个 DNS 查询。
只适用于外部域名：DNS 预解析只对跨域资源（即外部域名）有效，无法用于同一域名下的资源。
过度使用的影响：虽然 DNS 预解析能提高页面性能，但过度使用会导致浏览器发起过多的 DNS 查询，从而可能导致性能下降，因此应该合理使用。

使用场景：

当一个页面中需要加载多个外部资源（例如外部的 CDN、API 服务、图片库等），并且这些资源的域名已知时，可以提前通过 DNS 预解析来优化加载速度。
适用于访问第三方服务的场景，如广告服务器、社交媒体嵌入、外部分析工具等。

总结：

DNS 预解析是一个性能优化技术，通过在页面加载期间提前解析外部域名来减少后续网络请求的延迟。实现方法是使用 <link rel="dns-prefetch" href="..."> 标签，适用于需要加载来自不同域名的资源，并且可以减少 DNS 查询带来的延迟，提高页面加载性能。

32. HTML5 有哪些 drag 相关的 API ？

HTML5 引入了拖放（drag and drop）功能，使得用户可以通过鼠标或触摸事件将元素从一个位置拖动到另一个位置，并且通过 JavaScript 控制拖动过程。HTML5 提供了一些专门的 API 来支持拖放操作。以下是与拖放相关的主要 API 和事件。

1. HTML5 Drag and Drop API

HTML5 Drag and Drop API 允许你对元素进行拖动、拖动的目标区域进行定义，并处理拖动过程中和结束时的事件。

2. 拖动元素的设置（Draggable 属性）

draggable 属性：这个属性用于指定一个元素是否可以被拖动。可以在 HTML 标签中设置 draggable="true" 来使元素可拖动。

示例：

<div id="draggable" draggable="true">拖动我</div>

3. 常见的 Drag 事件

HTML5 的拖放操作涉及多个事件，这些事件可以用来处理拖动开始、进行和结束的不同阶段。常见的拖放事件如下：

示例：

document
	.getElementById('draggable')
	.addEventListener('dragstart', function (event) {
		console.log('开始拖动');
	});

示例：

document.getElementById('draggable').addEventListener('drag', function (event) {
	console.log('拖动中');
});

示例：

document
	.getElementById('draggable')
	.addEventListener('dragend', function (event) {
		console.log('拖动结束');
	});

4. dragover

触发时机：当被拖动的元素在目标区域上方移动时触发。
作用：必须阻止默认行为（event.preventDefault()），否则拖动操作无法成功。

示例：

document
	.getElementById('dropzone')
	.addEventListener('dragover', function (event) {
		event.preventDefault(); // 阻止默认行为
		console.log('拖动元素在目标区域上方');
	});

5. dragenter

触发时机：当拖动的元素进入目标区域时触发。
作用：可以用来修改目标区域的样式以表示目标可以接受拖动的元素。

示例：

document
	.getElementById('dropzone')
	.addEventListener('dragenter', function (event) {
		console.log('拖动元素进入目标区域');
	});

示例：

document
	.getElementById('dropzone')
	.addEventListener('dragleave', function (event) {
		console.log('拖动元素离开目标区域');
	});

7. drop

触发时机：当拖动的元素被放置在目标区域时触发。
作用：处理拖动元素释放到目标区域后的操作。

示例：

document.getElementById('dropzone').addEventListener('drop', function (event) {
	event.preventDefault(); // 阻止默认行为
	console.log('元素被放置到目标区域');
	// 获取拖动的元素数据
	const data = event.dataTransfer.getData('text');
	console.log(data); // 输出拖动的数据
});

4. DataTransfer 对象

DataTransfer 对象用于在拖动操作期间存储拖动的数据。它允许你在拖动开始时存储数据，并在目标区域处理时访问这些数据。

getData(type)：获取拖动的指定类型的数据（如文本）。
setData(type, data)：设置拖动的数据。
clearData(type)：清除拖动的数据。
files：返回包含拖动的文件列表（适用于文件拖放）。

示例：

document
	.getElementById('draggable')
	.addEventListener('dragstart', function (event) {
		event.dataTransfer.setData('text', '这是拖动的数据');
	});

document.getElementById('dropzone').addEventListener('drop', function (event) {
	event.preventDefault();
	const data = event.dataTransfer.getData('text');
	console.log(data); // 输出：这是拖动的数据
});

5. 阻止默认行为

在某些情况下，必须通过调用 event.preventDefault() 来阻止浏览器的默认行为，才能使拖放操作生效。例如，在 dragover 和 drop 事件中必须调用 preventDefault()。

示例：

document
	.getElementById('dropzone')
	.addEventListener('dragover', function (event) {
		event.preventDefault(); // 必须调用，以允许元素被放置
	});

6. 拖动文件

HTML5 的 Drag and Drop API 支持文件拖动，可以通过 event.dataTransfer.files 访问用户拖动的文件，通常用于上传文件的场景。

示例：

document.getElementById('dropzone').addEventListener('drop', function (event) {
	event.preventDefault();
	const files = event.dataTransfer.files;
	for (let i = 0; i < files.length; i++) {
		console.log(files[i].name); // 输出文件名
	}
});

HTML5 提供了强大的拖放支持，通过拖放 API，开发者可以方便地创建拖动和放置的交互效果。常见的 API 事件包括 dragstart、drag、dragend、dragover、dragenter、dragleave 和 drop，同时 DataTransfer 对象允许存储和获取拖动的数据。通过这些 API，开发者可以轻松实现文件上传、拖动排序、拖放编辑等功能。

33. 浏览器乱码的原因是什么？如何解决？

浏览器显示乱码通常是由于字符编码不匹配导致的。字符编码定义了如何将文本存储为字节以及如何将字节解释为文本。如果网页的字符编码与浏览器解码的方式不一致，就会导致乱码。

浏览器乱码的原因

未指定字符编码
- 网页没有明确声明所使用的字符编码，浏览器会根据默认设置或页面内容猜测编码方式。如果猜测不正确，就会导致乱码。
字符编码声明与实际编码不一致
- 如果 HTML 文档中声明的编码（如 UTF-8）与文件实际使用的编码（如 GBK）不一致，浏览器解码时会出错。
跨平台字符编码不一致
- 文件在不同的操作系统间传递时，可能由于系统默认的字符编码不同导致乱码。例如：Windows 系统可能使用 GBK 编码，而 macOS 或 Linux 通常使用 UTF-8。
服务器未正确设置字符编码
- 服务器未通过 HTTP 响应头正确声明页面的字符编码，浏览器可能会默认使用不适当的编码方式。
传输过程中的编码转换错误
- 文件传输、编辑或存储过程中未正确保存为所声明的编码，可能会导致内容出现编码错误。
浏览器强制使用错误的编码
- 用户手动更改了浏览器的编码设置，导致解码与实际编码方式不符。

如何解决浏览器乱码问题

1. 正确声明字符编码

在 HTML 文档的 <head> 中，通过 <meta charset> 标签明确声明文档的字符编码。推荐使用 UTF-8 编码，因为它是全球通用的字符编码。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
	</head>
	<body>
		<!-- 页面内容 -->
	</body>
</html>

2. 确保文件保存为声明的编码格式

使用支持编码选择的编辑器（如 VS Code、Sublime Text）保存文件时，确保文件的实际编码与声明一致。
在保存文件时选择 UTF-8 编码。

3. 配置服务器正确声明编码

通过 HTTP 响应头设置字符编码。例如：

如果使用 Apache 服务器，可以在 .htaccess 文件中添加以下配置：
```
AddDefaultCharset UTF-8
```
如果使用 Nginx，可以在配置文件中设置：
```
charset utf-8;
```

4. 使用 BOM（可选）

对于某些需要明确标记编码的情况，可以在文件保存时添加字节顺序标记（BOM）。不过，这种方式可能在某些环境下不被推荐。

5. 检查并调整浏览器编码

如果网页仍然乱码，可以尝试以下方法：

在浏览器中手动设置编码（通常在 "查看" > "字符编码" 菜单下）。
检查浏览器的开发者工具，确认 HTTP 响应头中的 Content-Type 是否正确声明了字符编码。

6. 避免跨编码操作

确保文件在不同操作系统、编辑器之间传递时，一直使用相同的编码格式（推荐使用 UTF-8）。
避免在存储和读取时混用不同的编码格式。

7. 统一数据库和应用的编码

确保数据库和应用程序使用相同的编码，例如 UTF-8。
在与数据库交互时，明确指定字符编码。

检测和调试乱码问题

检查 HTML 文档头部
- 查看 <meta charset> 是否声明了正确的编码。
检查 HTTP 响应头
- 使用浏览器的开发者工具查看 Content-Type 是否包含正确的编码声明。
- 示例：
```
Content-Type: text/html; charset=UTF-8
```
验证文件实际编码
- 使用工具（如 VS Code、Notepad++ 或命令行工具）查看文件的实际编码。
- 命令行检测文件编码（如 Linux 中的 file 命令）：
```
file -i filename.html
```

总结

原因：浏览器乱码主要由字符编码声明不当、文件保存时编码错误或服务器未正确配置编码导致。
解决方法：正确声明编码（推荐 UTF-8）、确保文件保存为一致的编码格式、配置服务器的 HTTP 响应头以及浏览器手动调整编码。
预防措施：在开发时全流程统一使用 UTF-8 编码，这是现代 Web 开发的最佳实践。

34. Canvas 和 SVG 有什么区别？

Canvas 和 SVG 是前端用于绘图的两种技术，各有特点和适用场景。以下是二者的区别：

1. 工作原理

Canvas

基于像素的绘图。
提供了一个用于绘制图形的画布，所有的绘图操作都通过 JavaScript 操作像素实现。
绘制完成后，图像变为不可编辑的静态图。

SVG

基于矢量的绘图。
图形使用 XML 描述，元素（如 <rect>、<circle>）表示图形的结构。
图像由 DOM 元素组成，图形可以动态修改或通过 CSS 和 JavaScript 操作。

2. 渲染性能

Canvas

适合渲染大量像素密集的图形（如游戏、动态数据可视化）。
性能依赖于设备的图形处理能力，绘图操作直接对像素进行操作。
不适合绘制复杂的、带有大量元素的静态图形，因为需要手动管理所有绘图逻辑。

SVG

适合静态图形或元素数量有限的场景。
由于每个图形元素都是 DOM 节点，当图形数量非常多时，操作性能可能下降。

3. 交互性

Canvas

需要通过坐标计算实现交互，例如鼠标点击或拖拽。
不支持原生的事件绑定，开发者需要额外编写逻辑。

SVG

每个图形元素都是 DOM 节点，支持原生的事件绑定（如 click、mouseover 等）。
交互逻辑简单，直接对 DOM 元素操作即可。

4. 动画支持

Canvas

动画通过不断重绘整个画布实现（如 requestAnimationFrame）。
动画需要开发者手动管理每一帧的状态。

SVG

支持原生的动画标签（如 <animate> 和 <animateTransform>）。
可以通过 CSS 和 JavaScript 实现动画效果，适合简单的动画场景。

5. 文件体积

Canvas

绘图逻辑在 JavaScript 中实现，画布本身不包含绘图数据。
通常生成的文件体积较小，但丢失了图形的结构信息。

SVG

由于图形是用 XML 描述的，文件体积可能较大，尤其是复杂图形。
保留了图形结构信息，可用于缩放和后续编辑。

6. 可缩放性

Canvas

绘制的图像基于像素，缩放时可能会出现锯齿或模糊。
适合固定分辨率的图形显示。

SVG

基于矢量，缩放时不会失真，适合响应式设计和需要高分辨率的图形场景。

7. 浏览器支持

Canvas：HTML5 中引入，现代浏览器均支持。
SVG：SVG 是 W3C 标准，支持性良好（包括现代浏览器和一些较老的版本）。

适用场景

场景	适合技术	理由
动态游戏或实时绘图	Canvas	性能高，适合快速重绘场景。
数据可视化（少量元素）	SVG	易于交互和样式控制，且矢量图形效果更好。
数据可视化（大量数据点）	Canvas	高性能绘图，能处理大量图形的快速渲染。
响应式图形或可缩放图标	SVG	矢量图形不会失真，适合在不同屏幕分辨率下显示。
图像编辑工具	Canvas	提供像素级操作，适合实现绘图、涂鸦等工具。
矢量图形绘制和保存	SVG	保留结构信息，易于导出和再编辑。

总结

Canvas 更适合实时、高性能、动态的像素级操作（如游戏、动态数据可视化）。
SVG 更适合静态、矢量化的图形绘制，尤其是在需要交互和缩放时表现更优。

开发者应根据具体需求选择合适的技术方案，或者结合两者的优点进行混合使用。

35. title 与 h1 的区别、b 与 strong 的区别、i 与 em 的区别？

以下是 <title> 和 <h1>、<b> 和 <strong>、<i> 和 <em> 的区别和使用场景：

1. `<title>` 与 `<h1>` 的区别

定义与作用

<title>
- 定义：指定网页的标题，用于显示在浏览器的标签页、书签以及搜索引擎的标题。
- 作用：用于描述整个网页的主题，通常包含关键字，有助于 SEO 优化。
<h1>
- 定义：表示 HTML 文档中最高级的标题，用于网页正文内容的标题。
- 作用：表示页面内容的结构，辅助搜索引擎理解文档层次。

使用场景

<title> 用于定义网页的标题，放置在 <head> 内部。
<h1> 用于网页主要内容的标题，放置在 <body> 内部。

浏览器表现

<title> 不直接显示在页面中，显示在浏览器标签页。
<h1> 是页面中的可见标题，字体较大，默认加粗。

示例

<!-- 定义网页标题 -->
<head>
	<title>HTML 的基础知识</title>
</head>

<!-- 定义页面主要标题 -->
<body>
	<h1>HTML 的基础知识</h1>
</body>

2. `<b>` 和 `<strong>` 的区别

定义与作用

<b>
- 定义：表示一段加粗的文本。
- 作用：强调样式，没有语义，仅改变文本的视觉效果。
<strong>
- 定义：表示一段重要的文本。
- 作用：同时具有语义，表示文本在上下文中具有重要性，搜索引擎会关注其语义。

使用场景

<b> 用于单纯加粗而不强调意义的文本（如装饰性文字）。
<strong> 用于需要强调意义的重要文本（如警告信息）。

浏览器表现

二者默认视觉效果相同，都是加粗文本。但 <strong> 有语义化，搜索引擎和辅助工具会识别为重要内容。

示例

<p>这是普通加粗文本：<b>加粗样式</b></p>
<p>这是强调的重要内容：<strong>加粗并有语义</strong></p>

3. `<i>` 和 `<em>` 的区别

定义与作用

<i>
- 定义：表示一段斜体文本。
- 作用：强调样式，没有语义，通常用于表示特殊术语、技术术语或外文短语。
<em>
- 定义：表示一段需要强调的文本。
- 作用：具有语义，表示文本需要加重语气，可以嵌套（嵌套的层级表示强调程度）。

使用场景

<i> 用于表示样式化的内容（如外文术语、文档中的变量名）。
<em> 用于表示需要语义强调的内容。

浏览器表现

默认视觉效果相同，都是斜体文本，但 <em> 有语义化，搜索引擎会识别为被强调的内容。

示例

<p>这是普通斜体文本：<i>斜体样式</i></p>
<p>这是强调语气的文本：<em>语义化的强调</em></p>

总结对比

元素	是否具有语义	默认样式	作用或场景
`<title>`	是	无	定义网页标题，显示在浏览器标签页或搜索结果中。
`<h1>`	是	加粗	定义页面主要标题，用于构建文档结构。
`<b>`	否	加粗	单纯加粗文字，强调视觉，无语义。
`<strong>`	是	加粗	强调文本的重要性，具有语义，适合重要内容。
`<i>`	否	斜体	单纯斜体文字，强调视觉，无语义。
`<em>`	是	斜体	用于语气强调的文本，具有语义，适合需要加重语气的内容。

根据实际需求选择适当的标签，注重语义化设计，提升页面的可读性和可访问性。

36. 浏览器是如何对 HTML5 的离线储存资源进行管理和加载？

HTML5 离线存储的管理与加载机制

HTML5 提供了离线存储机制（如 Application Cache 和后续推荐的 Service Worker），允许在没有网络连接时加载特定资源。以下是浏览器对离线存储资源进行管理和加载的主要方式：

1. 使用离线存储的主要技术

(1) Application Cache（已过时）

通过 manifest 文件定义哪些资源需要缓存。
浏览器会根据 manifest 文件的内容，下载并存储这些资源。
优点：易于实现，适用于小型应用。
缺点：灵活性不足，调试困难，被 Service Worker 取代。

(2) Service Worker（推荐）

Service Worker 是运行在浏览器后台的独立线程，用于拦截网络请求、缓存资源，并在离线时提供数据。
提供了更细粒度的控制，适合现代应用的离线支持。

2. 加载流程

以下是两种主要离线存储技术的加载流程：

(1) Application Cache 的加载流程

检查 Manifest 文件：当页面带有 <html manifest="example.appcache"> 属性时，浏览器会下载 manifest 文件。
解析 Manifest 文件：
- CACHE：指定需要缓存的资源。
- NETWORK：指定始终需要在线获取的资源。
- FALLBACK：定义当资源无法访问时的替代资源。
下载资源：根据 manifest 文件中的定义，浏览器会缓存资源到本地。
离线加载：
- 当网络不可用时，浏览器会使用缓存的资源渲染页面。
- 缓存内容会在 manifest 文件更新后被替换。

(2) Service Worker 的加载流程

注册 Service Worker：
- 通过 JavaScript 使用 navigator.serviceWorker.register 方法注册一个 Service Worker 文件。
安装阶段：
- 在 install 事件中，浏览器会预缓存指定的资源。
- 通过 caches.open 方法创建缓存并存储资源。
激活阶段：
- 在 activate 事件中，清理旧的缓存资源，确保使用最新版本。
拦截请求：
- 在 fetch 事件中拦截页面的网络请求。
- 判断资源是否存在缓存中，如果存在直接返回；否则尝试从网络获取。

3. 资源的管理

浏览器对离线存储资源的管理机制主要体现在以下几个方面：

(1) 版本控制

Application Cache：通过 manifest 文件的内容来控制版本。修改文件会触发缓存的更新。
Service Worker：通过在缓存中添加唯一标识（如文件名中的哈希值）来实现版本控制。

(2) 缓存更新

Application Cache：manifest 文件更新后，浏览器会自动下载新的资源。
Service Worker：开发者需要手动控制缓存更新逻辑（如检查新资源并替换旧资源）。

(3) 缓存清理

缓存数据有存储上限（通常为几 MB 到几十 MB）。
浏览器会自动清理过期或未使用的缓存，开发者也可以在代码中手动清理。

4. 离线加载时的优先级

强制缓存优先：
- 浏览器会优先加载离线存储中的资源，而不是请求服务器。
- 在缓存策略中可以设置资源的优先级（如 stale-while-revalidate 允许加载缓存资源的同时后台更新）。
网络不可用时的回退机制：
- 如果资源未缓存，浏览器会尝试加载 FALLBACK 或其他离线资源。

5. 优缺点对比

特性	Application Cache	Service Worker
灵活性	固定规则，较难定制化	完全控制缓存逻辑，灵活性高
缓存更新	自动更新（受限于 manifest）	手动控制，精细化更新
功能支持	基本离线支持	支持离线、推送通知、后台同步等功能
性能	适用于简单应用	适用于复杂应用和渐进式 Web 应用
兼容性	已过时，现代浏览器不推荐	现代浏览器广泛支持

6. 示例代码

(1) 使用 Application Cache

<!DOCTYPE html>
<html manifest="example.appcache">
	<head>
		<title>Offline Example</title>
	</head>
	<body>
		<p>This page works offline!</p>
	</body>
</html>

<!-- example.appcache 文件 -->
CACHE MANIFEST CACHE: index.html style.css script.js

(2) 使用 Service Worker

// 注册 Service Worker
if ('serviceWorker' in navigator) {
	navigator.serviceWorker
		.register('/service-worker.js')
		.then(() => console.log('Service Worker registered!'));
}

// service-worker.js 文件
self.addEventListener('install', (event) => {
	event.waitUntil(
		caches.open('my-cache-v1').then((cache) => {
			return cache.addAll(['/index.html', '/style.css', '/script.js']);
		})
	);
});

self.addEventListener('fetch', (event) => {
	event.respondWith(
		caches.match(event.request).then((response) => {
			return response || fetch(event.request);
		})
	);
});

总结

HTML5 的离线存储技术从 Application Cache 发展到 Service Worker，使得离线应用更加灵活和高效。开发者可以根据项目需求选择合适的技术，但建议使用 Service Worker，因为它提供了更强大的功能和更好的开发体验。

37. HTML5 的离线储存怎么使用，它的工作原理是什么

Service Worker 的使用场景和工作原理

1. 什么是 Service Worker？

Service Worker 是一种运行在浏览器后台的独立线程，能够拦截网络请求、缓存资源、推送通知和进行后台同步。它为网页提供了类似原生应用的功能，比如离线支持、快速加载和后台任务处理。

2. Service Worker 的使用场景

(1) 离线支持

场景：用户离线或网络不稳定时，依然可以访问网页内容。
实现：通过缓存关键资源（HTML、CSS、JS、图片等），在离线时提供这些资源。

(2) 资源缓存优化

场景：减少资源加载时间，加速页面渲染。
实现：缓存静态资源，避免重复加载；采用缓存优先、网络优先等策略优化资源获取。

(3) 动态内容缓存

场景：缓存 API 响应或动态生成的内容（如 JSON 数据）。
实现：在 fetch 事件中拦截请求并缓存响应。

(4) 后台同步

场景：用户在离线状态下完成某些操作（如提交表单、上传图片），在网络恢复时自动同步。
实现：结合 Background Sync API。

(5) 推送通知

场景：通过 Web Push 向用户发送消息，即使用户没有打开网页。
实现：通过 Service Worker 监听推送事件并显示通知。

(6) 渐进式 Web 应用（PWA）

场景：将网站打包为 PWA，使其具备类似原生应用的功能（如离线支持、安装到主屏幕）。
实现：Service Worker 是 PWA 的核心技术，提供缓存管理和后台任务能力。

3. Service Worker 的工作原理

Service Worker 的工作原理基于事件驱动模型，通常分为以下阶段：

(1) 注册阶段

使用 navigator.serviceWorker.register() 注册 Service Worker 文件。
浏览器会检查文件是否已注册，若未注册则下载并注册。

示例代码：

if ('serviceWorker' in navigator) {
	navigator.serviceWorker
		.register('/service-worker.js')
		.then(() => console.log('Service Worker 注册成功'))
		.catch((error) => console.log('注册失败:', error));
}

(2) 安装阶段（install）

第一次加载时触发 install 事件。
在此阶段，缓存静态资源。

示例代码：

self.addEventListener('install', (event) => {
	console.log('Service Worker 安装中...');
	event.waitUntil(
		caches.open('my-cache-v1').then((cache) => {
			return cache.addAll([
				'/',
				'/index.html',
				'/styles.css',
				'/script.js',
				'/logo.png',
			]);
		})
	);
});

(3) 激活阶段（activate）

在旧的 Service Worker 被替换后触发 activate 事件。
主要任务：清理旧的缓存，准备新的缓存环境。

示例代码：

self.addEventListener('activate', (event) => {
	console.log('Service Worker 激活...');
	event.waitUntil(
		caches.keys().then((cacheNames) => {
			return Promise.all(
				cacheNames.map((cacheName) => {
					if (cacheName !== 'my-cache-v1') {
						console.log('清理旧缓存:', cacheName);
						return caches.delete(cacheName);
					}
				})
			);
		})
	);
});

(4) 拦截请求（fetch）

在 fetch 事件中，拦截页面的网络请求，决定如何返回资源（缓存、网络或自定义响应）。

示例代码：

self.addEventListener('fetch', (event) => {
	event.respondWith(
		caches.match(event.request).then((cachedResponse) => {
			// 如果缓存中有资源，则返回缓存资源，否则从网络获取
			return cachedResponse || fetch(event.request);
		})
	);
});

(5) 更新阶段

当 service-worker.js 文件发生变化时，浏览器会自动检测更新。
新版本的 Service Worker 会进入 安装 -> 激活 流程，替换旧的版本。

4. 常见的缓存策略

(1) Cache First

策略：优先使用缓存资源，若缓存中没有，则从网络获取并更新缓存。
适用场景：静态资源（CSS、JS、图片等）。

(2) Network First

策略：优先从网络获取资源，若网络不可用，则使用缓存。
适用场景：动态内容（如新闻、数据接口）。

(3) Cache Only

策略：只使用缓存资源，若缓存中没有，则请求失败。
适用场景：纯离线应用。

(4) Network Only

策略：只从网络获取资源，忽略缓存。
适用场景：实时性要求高的资源（如用户认证）。

(5) Stale-While-Revalidate

策略：优先返回缓存内容，同时在后台更新缓存。
适用场景：需要快速响应，但允许后台更新的场景。

5. 优缺点

优点

提供离线功能，提升用户体验。
优化资源加载，减少服务器压力。
实现后台任务（如同步、推送）。

缺点

较复杂的开发与调试。
需要注意缓存管理，避免加载过期资源。

6. Service Worker 的限制

运行环境：只能在 HTTPS 协议下运行（开发时可用 localhost）。
独立线程：不与主线程共享上下文，无法直接操作 DOM。
生命周期：可能受浏览器回收机制影响。

7. 示例：实现离线缓存

完整代码：

// 注册 Service Worker
if ('serviceWorker' in navigator) {
	navigator.serviceWorker
		.register('/service-worker.js')
		.then(() => console.log('Service Worker 注册成功'));
}

// Service Worker 文件
self.addEventListener('install', (event) => {
	event.waitUntil(
		caches.open('my-cache-v1').then((cache) => {
			return cache.addAll(['/', '/index.html', '/styles.css', '/script.js']);
		})
	);
});

self.addEventListener('fetch', (event) => {
	event.respondWith(
		caches.match(event.request).then((cachedResponse) => {
			return cachedResponse || fetch(event.request);
		})
	);
});

总结

Service Worker 是现代前端技术的核心，用于实现离线功能、优化性能和支持渐进式 Web 应用（PWA）。通过灵活的事件驱动模型和缓存策略，开发者可以打造更加高效和可靠的用户体验。

38. img 的 srcset 属性的作⽤？

img 的 `srcset` 属性的作用

srcset 属性是 HTML5 中引入的一种增强功能，用于实现 响应式图片加载。它允许开发者为 <img> 标签提供多个图片资源选项，浏览器会根据设备屏幕分辨率、视口宽度等条件，自动选择最合适的图片进行加载，从而优化性能和用户体验。

1. 基本语法

<img
	src="default.jpg"
	srcset="small.jpg 480w, medium.jpg 1024w, large.jpg 1600w"
	sizes="(max-width: 600px) 480px, (max-width: 1200px) 1024px, 1600px"
	alt="示例图片"
/>

2. 属性说明

(1) `src`

默认图片路径。
如果浏览器不支持 srcset 或未选择合适的资源，则会使用 src 指定的图片。

(2) `srcset`

提供多个图片资源及其条件，供浏览器选择。
每个资源由以下两部分组成：
- 图片路径。
- 条件描述（以宽度或像素密度为单位，分别用 w 或 x 标识）。

(3) `sizes`（可选）

指定图片在不同条件下所需的显示大小。
值可以是媒体查询或固定尺寸。
影响浏览器对 srcset 中图片的选择。

3. 使用示例

(1) 基于视口宽度

为不同设备提供不同分辨率的图片：

<img
	src="default.jpg"
	srcset="small.jpg 480w, medium.jpg 1024w, large.jpg 1600w"
	sizes="(max-width: 600px) 480px, (max-width: 1200px) 1024px, 1600px"
	alt="示例图片"
/>

解释：
- small.jpg 480w：当视口宽度小于 600px 时，使用 small.jpg。
- medium.jpg 1024w：当视口宽度在 600px 到 1200px 之间时，使用 medium.jpg。
- large.jpg 1600w：当视口宽度超过 1200px 时，使用 large.jpg。

(2) 基于设备像素密度

为高分辨率屏幕提供更清晰的图片：

<img src="default.jpg" srcset="normal.jpg 1x, retina.jpg 2x" alt="示例图片" />

解释：
- normal.jpg 1x：为普通屏幕提供图片。
- retina.jpg 2x：为高分辨率屏幕（如 Retina 屏幕）提供高清图片。

(3) 简单例子

不指定 sizes 时，浏览器会根据默认规则选择图片：

<img src="default.jpg" srcset="small.jpg 480w, large.jpg 800w" alt="示例图片" />

解释：
- 浏览器会选择最接近视口宽度的图片。

4. 工作原理

浏览器评估视口条件：
- 判断屏幕分辨率、视口宽度等因素。
选择合适的图片资源：
- 根据 srcset 和 sizes 中的规则选择最佳图片。
加载图片：
- 加载与条件匹配的图片，提升性能和质量。

5. 使用场景

响应式设计：
- 在不同屏幕尺寸下显示合适大小的图片。
- 适用于手机、平板、桌面设备。
高清显示支持：
- 为高像素密度设备（如 Retina 显示屏）提供更清晰的图片。
性能优化：
- 减少带宽占用，提高加载速度。
- 避免为低分辨率设备加载大尺寸图片。
CDN 或多服务器资源：
- 在不同地理位置的服务器提供优化的图片加载。

6. 常见问题

(1) 没有定义 `sizes` 会怎样？

如果不定义 sizes，浏览器会根据图片的默认显示尺寸选择资源。
这可能导致浏览器选择的图片资源不符合实际需求。

(2) 与 CSS 媒体查询的关系？

srcset 和 sizes 是 HTML 内联方法，主要用于图片资源选择。
CSS 媒体查询更适合布局控制，两者可以配合使用。

(3) 浏览器兼容性如何？

现代浏览器（如 Chrome、Firefox、Edge、Safari）普遍支持 srcset。
对于不支持的浏览器，会加载 src 属性定义的默认图片。

7. 总结

srcset 提供了一种灵活、高效的方式来实现响应式图片加载。
通过结合 src 和 sizes，开发者可以针对不同设备和网络条件优化图片资源的加载策略。
在性能优化和用户体验提升方面，srcset 是现代前端开发中不可或缺的工具之一。

39. js 和 css 是否阻塞 DOM 树构建和渲染？

JS 和 CSS 是否阻塞 DOM 树构建和渲染？

1. 什么是 DOM 树构建和渲染？

DOM 树构建：浏览器解析 HTML，逐步将其转换为 DOM 树结构的过程。
渲染：浏览器根据 DOM 树、CSS 样式表和 JavaScript 脚本，生成渲染树并绘制到屏幕的过程。

2. JavaScript 的影响

(1) 是否阻塞 DOM 树构建？

阻塞：JavaScript 默认会阻塞 DOM 树的构建。
原因：因为 JS 脚本可能会修改 DOM 结构（例如通过 document.write()），浏览器必须暂停 DOM 树的解析，直到脚本执行完成。

(2) 是否阻塞渲染？

阻塞：JavaScript 默认会阻塞页面的渲染。
原因：JS 脚本可能会动态修改 CSS 或影响 DOM 节点样式，因此浏览器会等到脚本执行完成后再继续渲染。

(3) 如何避免阻塞？

使用异步加载：
- 添加 async 或 defer 属性到 <script> 标签：
  - async：异步加载脚本并立即执行，可能会影响执行顺序。
  - defer：异步加载脚本，但会按照顺序在 DOM 树解析完成后执行。

<script src="example.js" async></script>
<script src="example.js" defer></script>

放置脚本在 </body> 前：
- 让脚本在 DOM 树构建和渲染完成后加载。

3. CSS 的影响

(1) 是否阻塞 DOM 树构建？

不阻塞：CSS 不会阻塞 DOM 树的构建。
原因：HTML 和 CSS 是独立解析的，CSS 的加载和解析不会影响 HTML 的 DOM 树构建。

(2) 是否阻塞渲染？

阻塞：CSS 会阻塞页面的渲染。
原因：
- 浏览器必须等到 CSSOM（CSS 样式树）构建完成后，才能合并 DOM 树和 CSSOM，生成渲染树。
- 如果渲染发生在 CSS 加载完成之前，可能导致布局闪烁（FOUC：Flash of Unstyled Content）。

(3) 如何优化 CSS 加载？

使用媒体查询：

指定条件加载 CSS，例如：

<link rel="stylesheet" href="styles.css" media="print" />

避免阻塞 CSS：

将关键 CSS 直接内联到页面中，非关键 CSS 异步加载。

<link
	rel="stylesheet"
	href="styles.css"
	onload="this.rel='stylesheet'"
	as="style"
/>

4. 总结：JS 和 CSS 的阻塞特性

类型	阻塞 DOM 树构建	阻塞渲染	解决方法
JavaScript	是	是	使用 `async`、`defer` 或放底部
CSS	否	是	优化关键 CSS，异步加载非关键 CSS

通过合理优化 JavaScript 和 CSS 的加载方式，可以大幅提升页面加载速度，改善用户体验。

40. CSSOM 树和 DOM 树是同时解析的吗？

CSSOM 树和 DOM 树是否同时解析？

1. DOM 树和 CSSOM 树的作用

DOM 树（Document Object Model）：由 HTML 文档解析生成，表示文档的结构和内容。
CSSOM 树（CSS Object Model）：由 CSS 样式表解析生成，表示样式规则和元素的样式信息。

2. 是否同时解析

是的，它们是同时解析的，但互相独立。
- 浏览器会解析 HTML 生成 DOM 树，同时解析外部或内联的 CSS 生成 CSSOM 树。
- 但是，它们的解析顺序互不依赖，因此可以并行进行。

3. DOM 树和 CSSOM 树的交互

浏览器需要将 DOM 树和 CSSOM 树结合，生成 渲染树（Render Tree）。
在渲染之前，必须等待 DOM 树和 CSSOM 树的构建完成。

4. 解析的具体过程

浏览器接收到 HTML 文档后，开始自上而下解析，逐步构建 DOM 树。
当解析到 <link> 标签或 <style> 标签时，会触发 CSS 的加载和解析。
CSS 的解析生成 CSSOM 树，但可能受到外部资源加载时间的影响。
当 DOM 树和 CSSOM 树均完成时，生成渲染树，并开始渲染页面。

5. 延迟因素

外部 CSS 的加载：如果 CSS 文件较大或网络较慢，CSSOM 的构建会被延迟。
阻塞的 JS：
- 默认情况下，JS 会阻塞 DOM 树的解析。
- 如果 JS 修改了 CSS 样式（如动态引入 CSS），也会影响 CSSOM 树的构建。
- 解决方案：使用 defer 或 async 属性避免阻塞。

6. 为什么 CSS 加载阻塞渲染但不阻塞 DOM 树？

CSS 的加载不会阻止 DOM 树的解析，因为它们是并行独立的。
但是，浏览器为了避免 闪烁内容（FOUC），会等待 CSSOM 树构建完成后才渲染页面。
这确保了页面显示时已经应用了正确的样式。

7. 总结

CSSOM 树和 DOM 树是同时解析的，但它们是独立构建的。
DOM 树完成后可以立即用于交互，而渲染必须等待 CSSOM 树完成。
优化建议：
- 减少外部 CSS 文件的大小和数量。
- 使用关键 CSS 内联的方式加速首屏渲染。
- 非关键 CSS 通过异步方式加载。

41. 使用 input 标签上传图片时，怎样触发默认拍照功能？

在移动设备上使用 <input> 标签上传图片时，可以通过以下方法触发设备的默认拍照功能：

方法：设置 `accept` 和 `capture` 属性

accept 属性：指定上传文件的类型。对于图片，可以使用 image/*。
capture 属性：提示浏览器使用设备的摄像头直接拍照。

示例代码

<input type="file" accept="image/*" capture="environment" />

属性解释

accept="image/*"：
- 限制文件选择为图片类型。
- 移动设备上，这通常会提供“拍照”或“从相册选择”的选项。
capture="environment"：
- 提示使用设备的后置摄像头。
- 可选值：
  - user：前置摄像头（自拍）。
  - environment：后置摄像头（拍摄环境）。

注意事项

兼容性问题：
- 并非所有设备或浏览器都完全支持 capture 属性。
- 在某些情况下，设备会忽略 capture 并仅显示文件选择器。
桌面浏览器行为：
- 在桌面浏览器中，capture 属性通常不会生效，仅提供文件选择器。
用户隐私：
- 使用摄像头功能需要用户授权访问设备摄像头。

改进用户体验的建议

针对不同设备进行优化：
- 检测是否是移动设备，如果是，则动态添加 capture 属性。
用户提示：
- 在页面中提供明确的操作提示，让用户知道可以直接拍照上传。

动态检测设备示例

const fileInput = document.querySelector('input[type="file"]');
if (/Mobi|Android|iPhone/i.test(navigator.userAgent)) {
	fileInput.setAttribute('capture', 'environment');
}

总结

通过为 <input> 标签添加 accept="image/*" 和 capture 属性，可以在支持的移动设备上触发默认拍照功能，从而简化用户上传图片的流程并提高用户体验。

42. input 上传文件可以同时选择多张吗？怎么设置？

如何使用 `<input>` 上传文件时同时选择多张图片？

设置方法

通过为 <input> 标签添加 multiple 属性，可以实现一次性选择多个文件（包括多张图片）。

示例代码

<input type="file" accept="image/*" multiple />

属性说明

type="file"：
- 指定文件上传类型。
accept="image/*"：
- 限制文件类型为图片（所有图片格式）。
- 可以根据需求指定特定图片格式，例如 accept="image/png, image/jpeg"。
multiple：
- 允许用户一次性选择多个文件。

注意事项

用户体验：
- 不同浏览器的文件选择界面可能有所不同，但在大多数现代浏览器中，添加 multiple 属性后用户可以使用快捷操作选择多张图片。

文件列表：

在文件选择完成后，通过 JavaScript 可以访问上传的文件列表，使用 files 属性：

const input = document.querySelector('input[type="file"]');
input.addEventListener('change', function () {
	const files = input.files; // 获取 FileList 对象
	console.log(files); // 输出选中的文件信息
	for (const file of files) {
		console.log(file.name); // 输出文件名
	}
});

兼容性：
- 大多数现代浏览器都支持 multiple 属性，但建议对老旧浏览器（如 IE9 以下）进行兼容性测试。
服务器端接收：
- 确保后端能够正确处理多文件上传，例如通过 FormData 方式发送多个文件。

扩展：实现预览选中图片

利用 JavaScript，可以在用户选择图片后预览：

<input type="file" accept="image/*" multiple id="fileInput" />
<div id="preview"></div>

<script>
	const input = document.getElementById('fileInput');
	const preview = document.getElementById('preview');

	input.addEventListener('change', function () {
		const files = input.files;
		preview.innerHTML = ''; // 清空之前的预览
		for (const file of files) {
			const reader = new FileReader();
			reader.onload = function (e) {
				const img = document.createElement('img');
				img.src = e.target.result;
				img.style.width = '100px';
				img.style.margin = '5px';
				preview.appendChild(img);
			};
			reader.readAsDataURL(file);
		}
	});
</script>

总结

通过添加 multiple 属性，<input> 标签可以让用户一次性选择多张图片。结合 JavaScript，可以进一步扩展用户体验，例如预览选中的图片或验证文件格式大小等。

43. 如何禁止 input 展示输入的历史记录？

如何禁止 `<input>` 输入框展示输入历史记录？

当用户在 <input> 元素中输入内容时，浏览器可能会根据历史输入记录提供自动完成的建议。这种行为可以通过设置相关属性来禁用。

解决方法

通过设置 HTML 的 autocomplete 属性为 "off"，可以禁用输入历史记录的展示。

示例代码

<form>
	<label for="username">用户名：</label>
	<input type="text" id="username" name="username" autocomplete="off" />
</form>

属性说明

autocomplete 属性
- on（默认值）：启用自动完成，浏览器会根据历史记录提供建议。
- off：禁用自动完成，浏览器不会显示历史输入记录。

使用场景

表单登录或注册页面
- 防止敏感信息（如用户名、密码等）被缓存或展示。
搜索框
- 避免展示不相关的历史搜索记录。
临时表单
- 禁用自动完成，确保每次都从用户输入获取新的值。

注意事项

不同浏览器行为
- 大多数现代浏览器会完全禁用输入记录显示，但某些浏览器（如 Chrome）可能在特定条件下仍显示历史记录，尤其是用户明确选择了保存数据。
- 解决方法：在表单的 <form> 元素上也添加 autocomplete="off"。
```
<form autocomplete="off">
	<input type="text" name="username" />
</form>
```
隐私性要求
- 对于敏感信息（如密码输入框），建议始终添加 autocomplete="off"。
开发者工具的验证
- 使用浏览器开发者工具检查 HTML 属性是否正确设置，确保禁用生效。

增强用户体验的建议

如果禁用历史记录，请明确提示用户填写完整信息，避免表单提交失败。
提供占位符（placeholder）说明输入格式。
对输入框内容进行验证，防止错误输入。

总结

禁用 <input> 输入框历史记录的最简单方式是通过设置 autocomplete="off"。对于需要额外隐私保护的场景，建议在 <form> 和 <input> 标签中同时使用此属性。

44. 能否使用自闭合 script 标签引入脚本文件?

是否可以使用自闭合 `<script>` 标签引入脚本文件？

答案：不能使用自闭合 `<script>` 标签引入脚本文件。

原因分析

HTML 规范的要求
- 根据 HTML 规范，<script> 是一种非空标签（non-void element），即使没有内容也必须有明确的闭合标签。
- 自闭合标签（如 <script src="app.js" />）在 HTML 中是不被正确解析的，会导致浏览器忽略该脚本标签。
浏览器的解析机制
- 浏览器解析 HTML 时，看到自闭合的 <script /> 会将其当作普通元素对待，而不是脚本元素。
- 此时，脚本文件（src 属性）不会被加载。
区别于 XHTML
- 在 XHTML 中，自闭合的 <script /> 标签是有效的，但需要配合正确的 XML 解析器。
- 在 HTML5 中，自闭合 <script /> 标签不符合规范。

正确的用法

引入外部脚本文件：

<script src="app.js"></script>

内联脚本：

<script>
	console.log('Hello, world!');
</script>

常见错误示例

以下写法在 HTML5 中无效：

<script src="app.js" />

常见的自闭合标签

元信息和文档结构
- <meta>：定义文档的元信息，例如字符集、描述等。
- <link>：定义与文档相关的外部资源（如 CSS）。
- <base>：为相对 URL 提供基准路径。
媒体和嵌入
- <img>：用于插入图像。
- <source>：为媒体元素（如 <picture> 或 <video>）指定资源。
- <track>：为 <video> 和 <audio> 提供文本轨道（如字幕）。
输入和表单
- <input>：用于接收用户输入。
- <br>：插入换行符。
- <hr>：插入水平分隔线。
脚本和嵌入
- <area>：定义图像映射中的可点击区域。
- <col>：定义表格中列的属性。
- <embed>：嵌入外部内容（如插件、视频等）。
- <param>：为 <object> 元素提供参数。
- <wbr>：定义可选的换行点。

45. iconfont 是什么？有什么优缺点？

什么是 Iconfont？

Iconfont 是指使用字体文件（如 ttf、woff、svg）来展示图标的一种技术。通过将图标设计为字体文件中的字形，可以像操作文字一样轻松地调整图标的大小、颜色、阴影等样式。

通常，Iconfont 文件由设计师制作后，通过工具（如 Iconfont 平台）生成，前端开发者可引入文件并通过 CSS 类或 Unicode 字符显示图标。

Iconfont 的优点

轻量级
- 一个字体文件可以包含多个图标，减少了 HTTP 请求。
- 相较于单个图标图片，字体文件体积较小，加载效率高。
样式灵活
- 图标的颜色、大小可以通过 CSS 直接控制。
- 支持文本相关样式（如 font-size、color 等）。
跨平台兼容性
- 支持大多数现代浏览器，包括一些较老的浏览器。
矢量特性
- Iconfont 是基于矢量的图形，在任意分辨率下都可以保持清晰。
易于集成
- 和文字一样，可以通过 <i> 或 <span> 标签直接嵌入到 HTML 中，无需额外操作。

Iconfont 的缺点

不适合复杂图标
- 由于字体文件的限制，无法表现复杂的多色图标（多色图标需要使用 SVG 或图片）。
图标的语义性较弱
- Iconfont 通常使用 Unicode 映射或 CSS 类名，与图标的实际含义无直接关联，可读性和维护性较差。
字体文件加载问题
- 如果字体文件未成功加载，图标可能会显示为“方框”或其他占位符。
对浏览器的支持依赖
- 较老的浏览器可能对某些字体文件格式（如 woff2）支持较差，需要提供多种格式以保证兼容性。
难以实现细节优化
- 图标的细节控制不如 SVG 细腻，比如复杂的渐变效果。

Iconfont 的使用方法

引入字体文件
- 使用本地生成的字体文件，或者通过 Iconfont 平台下载字体文件。

通过 CSS 使用图标

<!-- 引入字体文件 -->
<link rel="stylesheet" href="iconfont.css" />

<!-- 使用图标 -->
<i class="iconfont icon-home"></i>

Unicode 使用方法

<span style="font-family: 'iconfont';">&#xe600;</span>

直接使用类名

.icon-home::before {
	content: '\e600'; /* Unicode 编码 */
	font-family: 'iconfont';
}

Iconfont 与 SVG 的对比

特性	Iconfont	SVG
表现力	单色（多色需复杂操作）	支持多色、渐变、复杂图形
缩放	基于字体矢量，效果清晰	矢量图形，效果清晰
样式控制	CSS 控制颜色、大小	支持 CSS 和直接嵌套样式
语义性	较差，需额外说明	强，直接通过文件描述语义
加载效率	一个文件包含多个图标，较快	每个 SVG 单独请求或合并
兼容性	较老的浏览器兼容性好	部分老旧浏览器支持较差

总结

Iconfont 是一种轻量级、易用的矢量图标技术，适用于需要大规模使用图标且对图标复杂度要求不高的场景。然而，对于需要多色或复杂设计的图标，SVG 是更好的选择。Iconfont 和 SVG 各有优势，可以根据项目需求合理选择。

46. 页面统计数据中，常用的 PV、UV 指标分别是什么？

页面统计数据中的 PV 和 UV 是什么？

在网页数据分析中，PV（Page View） 和 UV（Unique Visitor） 是两项重要的指标，常用来衡量网站的流量和用户访问行为。

1. PV（Page View）——页面浏览量

定义：

PV 表示页面被用户浏览的次数。
每当用户打开一次网页，PV 就会增加一次，无论该用户是否刷新页面或重复访问。

特点：

统计方式： 每次页面加载都会计入一次。
多次访问： 用户多次刷新页面或从其他页面跳回该页面，PV 都会增加。

应用场景：

衡量页面的受欢迎程度。
分析用户对特定页面的关注度。

举例：

用户访问首页 -> 点击文章页 -> 返回首页：
- PV = 3（首页两次 + 文章页一次）。

2. UV（Unique Visitor）——独立访客

定义：

UV 表示访问某个页面的唯一用户数。
基于用户设备和浏览器，通过 Cookie 或设备标识（如 IP、用户代理等）来区分不同用户。

特点：

统计方式： 同一用户一天内多次访问，UV 只计为 1。
跨设备： 如果用户用多个设备访问，会被计算为多个 UV。

应用场景：

衡量网站的真实访问人数。
分析用户覆盖面和网站吸引力。

举例：

用户 A 在上午访问一次首页，下午访问一次文章页；
用户 B 访问首页；
- UV = 2（用户 A 和用户 B 各计一次）。

PV 和 UV 的区别

指标	PV（Page View）	UV（Unique Visitor）
定义	页面浏览次数	唯一用户数
统计方式	每次页面加载增加 1	每个独立用户一天只计一次
反映内容	页面流量（页面受欢迎程度）	用户流量（真实访客数量）
用途	评估页面吸引力	评估网站用户覆盖范围

如何计算 PV 和 UV？

PV 计算
- 服务器或前端每次页面加载时记录日志：
  - 日志记录示例：IP地址 | 时间 | 页面URL。
- 汇总页面访问次数。
UV 计算
- 通过设置 Cookie 或用户标识：
  - 生成唯一标识符（如 UUID）。
  - 判断当天是否已有该用户记录，若没有则计入 UV。
- 服务端常通过 IP 地址 + 浏览器信息进行区分。

优化与分析应用

数据分析工具：
- Google Analytics、百度统计、Mixpanel 等工具支持实时统计 PV 和 UV。
提升 PV 的方法：
- 优化页面内容，吸引用户持续访问。
- 增加页面的交互和推荐，延长用户浏览路径。
提升 UV 的方法：
- 提高网站的推广和引流效果。
- 吸引更多新用户访问（如广告投放、SEO 优化）。

总结

PV： 关注页面访问频率，反映用户对内容的喜好程度。
UV： 注重唯一用户数，反映网站用户的真实覆盖面。
两者配合使用，可以全面了解网站的访问质量和用户行为。

47. 什么是 DOM 和 BOM？

DOM（Document Object Model）和 BOM（Browser Object Model）

在前端开发中，DOM 和 BOM 是两个常见的概念，它们都与浏览器和网页的交互有关，但它们关注的方面不同。

1. DOM（Document Object Model）——文档对象模型

定义：

DOM 是浏览器提供的一种 API（应用程序编程接口），使得 JavaScript 可以访问和操作 HTML 或 XML 文档。
它将文档结构表示为一个树形结构，其中每个节点表示文档中的一个部分（如元素、属性、文本等）。

特点：

树形结构： DOM 通过树形结构呈现页面内容，文档的每个部分（如 <html>、<body>、<div> 等）都被表示为一个对象。
动态交互： JavaScript 可以通过 DOM 对文档结构进行操作，动态修改网页的内容、结构和样式。
平台无关： DOM 是独立于操作系统和编程语言的标准。

常见操作：

获取或修改元素内容：

document.getElementById('myElement').innerHTML = '新内容';

操作节点：

let newDiv = document.createElement('div');
document.body.appendChild(newDiv);

事件监听：

document.getElementById('myButton').addEventListener('click', function () {
	alert('按钮点击');
});

DOM 示例：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>DOM 示例</title>
	</head>
	<body>
		<h1 id="header">Hello, World!</h1>
		<button id="changeText">点击更改文本</button>

		<script>
			document
				.getElementById('changeText')
				.addEventListener('click', function () {
					document.getElementById('header').innerHTML = '文本已更改';
				});
		</script>
	</body>
</html>

2. BOM（Browser Object Model）——浏览器对象模型

定义：

BOM 是浏览器提供的一个 API，它允许 JavaScript 与浏览器进行交互。BOM 主要用于操作浏览器的窗口和与浏览器相关的功能，如控制浏览器历史记录、获取浏览器信息、操作浏览器的窗口大小等。
与 DOM 关注文档不同，BOM 关注的是浏览器环境本身。

特点：

不直接与 HTML 结构相关： BOM 更侧重于操作浏览器的各类功能，如窗口、位置、历史等。
动态交互： 通过 BOM，JavaScript 可以动态控制浏览器窗口、控制浏览器的导航行为（如历史记录、跳转、刷新等）。

常见操作：

获取和控制浏览器窗口：
```
window.alert('弹出框');
```

操作浏览器历史记录：

window.history.back(); // 返回上一页
window.history.forward(); // 前进到下一页

操作浏览器位置和跳转：

window.location.href = 'https://www.example.com';
window.location.reload(); // 刷新当前页面

获取浏览器信息：

console.log(navigator.userAgent); // 获取浏览器的用户代理字符串

BOM 示例：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>BOM 示例</title>
	</head>
	<body>
		<button onclick="goBack()">返回上一页</button>
		<button onclick="goForward()">前进到下一页</button>

		<script>
			function goBack() {
				window.history.back();
			}
			function goForward() {
				window.history.forward();
			}
		</script>
	</body>
</html>

DOM 与 BOM 的区别

特性	DOM（文档对象模型）	BOM（浏览器对象模型）
关注点	操作网页文档（HTML、XML）	操作浏览器本身（如窗口、历史、定位、用户代理等）
操作内容	操作页面结构和内容，如元素、属性、文本等	操作浏览器功能，如历史记录、窗口、位置等
API 示例	`document.getElementById()`、`document.createElement()`	`window.alert()`、`window.location`、`window.history`
与网页结构关系	紧密相关，直接操作网页内容	不直接与网页内容相关，操作浏览器的环境

总结

DOM 用于操作和控制网页的结构和内容。它使得 JavaScript 能够动态地改变网页内容，实现交互效果。
BOM 用于操作浏览器窗口、历史记录、导航等与浏览器相关的功能。它更侧重于与浏览器环境的交互。

在实际开发中，DOM 和 BOM 是不可分割的，二者常常共同作用来完成网页的动态交互和用户体验优化。

48. 说说你对以下几个页面生命周期事件的理解：DOMContentLoaded，load，beforeunload，unload

在网页的生命周期中，浏览器会触发多个事件，这些事件反映了页面的加载和卸载过程。以下是关于 DOMContentLoaded、load、beforeunload 和 unload 事件的详细解释：

1. `DOMContentLoaded` 事件

触发时机：

当 HTML 文档被完全加载和解析完成（不包括样式表、图片和子框架等外部资源）时，浏览器会触发 DOMContentLoaded 事件。
该事件在文档的 DOM 树已经构建完成时触发，此时 JavaScript 可以访问和操作 DOM 元素。

特点：

不等外部资源加载完成： DOMContentLoaded 事件触发时，并不要求外部资源（如图片、CSS、JavaScript）加载完成，只要 HTML 文档本身解析完成即可。
适用于页面渲染： 可以在此事件中执行操作，例如添加事件监听器、初始化页面元素等。

常见应用：

在页面解析完成后立即执行某些初始化任务，而不必等外部资源（如图片）加载完成。

示例：

document.addEventListener('DOMContentLoaded', function () {
	console.log('DOM 已经完全加载和解析');
});

2. `load` 事件

触发时机：

load 事件会在页面及其所有外部资源（如图片、样式表、JavaScript 脚本等）都加载完成后触发。
通常用于确保所有内容都已经加载完成，可以开始执行操作。

特点：

等所有资源加载完成： 相比于 DOMContentLoaded，load 事件会等所有的外部资源（如图像和样式表）加载完成才会触发。
适用于页面完全加载： 如果你需要在所有资源加载完毕后再执行某些操作，可以使用 load 事件。

常见应用：

确保页面的所有资源都已加载完成后，进行操作，如图片懒加载或第三方库的初始化等。

示例：

window.addEventListener('load', function () {
	console.log('页面及所有资源已加载完成');
});

3. `beforeunload` 事件

触发时机：

beforeunload 事件在页面卸载之前触发，通常用于在用户离开页面之前给出提示，避免用户意外离开未保存的内容。

特点：

用户离开页面前： 在用户尝试关闭浏览器窗口、刷新页面、跳转到其他页面时，beforeunload 事件会被触发。
显示提示框： 在此事件中，浏览器通常会显示一个提示框，提醒用户是否确定离开页面。提示内容由浏览器控制，无法自定义。
在某些浏览器中有限制： 现代浏览器限制了 beforeunload 事件中自定义提示框的内容，只能显示浏览器默认提示。

常见应用：

提示用户在离开页面之前保存数据，例如表单未保存时的提示。

示例：

window.addEventListener('beforeunload', function (event) {
	event.returnValue = '确定要离开吗？'; // 在某些浏览器中，无法自定义提示内容
});

4. `unload` 事件

触发时机：

unload 事件在页面完全卸载时触发，通常在页面被关闭、刷新或跳转时触发。

特点：

页面卸载时触发： 当用户关闭窗口、刷新页面或跳转到其他页面时，unload 事件会被触发。
不能中止操作： unload 事件不能阻止页面离开，不像 beforeunload 那样提供对用户行为的干预。
通常用于清理工作： unload 事件常用于做一些清理工作，例如清除定时器、断开 WebSocket 连接等。

常见应用：

用于释放资源、清理缓存、停止正在进行的任务等。

示例：

window.addEventListener('unload', function () {
	console.log('页面即将卸载，可以在这里进行资源清理');
});

总结：

事件名称	触发时机	主要用途
`DOMContentLoaded`	HTML 文档加载完成，外部资源未加载	适用于初始化操作、操作 DOM 元素
`load`	页面及所有资源（如图片、CSS、JS）加载完成	适用于确保所有资源加载完毕后再执行操作
`beforeunload`	页面卸载前（如刷新、跳转、关闭页面）	提示用户离开页面前，防止丢失未保存的数据
`unload`	页面卸载时（如关闭窗口、跳转到其他页面）	执行资源清理、终止后台任务等

小结

这些页面生命周期事件分别在不同的阶段触发，可以根据需求来选择适当的事件。例如：

使用 DOMContentLoaded 进行页面初始化；
使用 load 确保资源完全加载后再进行操作；
使用 beforeunload 在用户离开时给出提示；
使用 unload 进行页面卸载时的清理工作。

49. 一台设备的 dpr，是否是可变的？

是的，设备的 DPR（Device Pixel Ratio，设备像素比）是可变的，但它通常与设备的硬件和操作系统有关。DPR 表示设备的物理像素与 CSS 像素之间的比例。根据设备的屏幕类型、分辨率和设置，DPR 可能会有所不同，且在某些情况下，用户可以调整设备的显示设置，从而改变 DPR。

DPR 的变动原因：

设备类型和分辨率：
- 高分辨率屏幕（例如 Retina 屏幕）通常具有较高的 DPR，例如 2 或 3。这样的设备上，显示的 CSS 像素（屏幕上的实际尺寸）与实际的硬件像素之间存在较大的差异。
- 普通屏幕的 DPR 可能为 1，这意味着设备像素和 CSS 像素是相等的。
设备的显示设置：
- 某些操作系统（如 macOS 或 Android）允许用户调整屏幕的显示缩放设置。例如，macOS 允许用户选择 "默认" 或 "更大" 显示模式，这可能影响设备的 DPR。用户在设置中选择更高的缩放级别时，DPR 可能会增加。
- 安卓设备也可以通过设置来调整显示的大小，这可能影响 DPR。
浏览器的响应式设计：
- 一些浏览器或操作系统可能会自动调整 DPR 以适应不同的显示条件，例如在不同的窗口尺寸或设备旋转时。
操作系统的缩放功能：
- 在一些设备上（尤其是 Windows 设备），操作系统的 DPI 设置（每英寸点数）可能会影响显示的像素密度。这种设置通常会影响应用的缩放，从而间接影响 DPR。

DPR 与网页呈现的关系：

响应式设计： DPR 的变化对于响应式设计至关重要，因为高 DPR 屏幕（例如 Retina 屏幕）要求更高分辨率的图片和更精细的图形。如果没有适当处理，图像和元素可能会显示模糊。
CSS 像素与设备像素： 对于高分辨率的设备，浏览器会使用不同的 CSS 像素与物理像素的映射关系。例如，当一个设备的 DPR 为 2 时，1 CSS 像素对应 2 物理像素。CSS 像素在设计上是为屏幕设计的逻辑单位，而设备像素则是硬件实际显示的物理单位。

DPR 获取方式：

你可以通过 JavaScript 获取设备的 DPR 值：

console.log(window.devicePixelRatio); // 输出设备的 DPR，例如 1、2、3 等

总结：

是可变的： 设备的 DPR 可以根据设备类型、显示设置和操作系统的缩放调整进行改变。
影响网页呈现： 高 DPR 设备需要更高分辨率的资源来确保清晰度，尤其是图片和图形内容。

50. html 和 css 中的图片加载与渲染规则是什么样的？

在 HTML 和 CSS 中，图片的加载与渲染是一个涉及多个步骤的过程，包括资源的请求、加载、解码以及渲染。以下是图片加载和渲染的规则和流程：

1. 图片加载和渲染的基本流程

图片的加载与渲染大致可以分为以下几个步骤：

HTML 或 CSS 解析：
- 当浏览器解析到 <img> 标签或背景图片时，它会从网络请求图片资源（如果是远程图片）或者直接加载本地资源（如果是本地文件）。
- 对于背景图片，浏览器会在 CSS 渲染过程中触发图像的请求。
请求图片资源：
- 浏览器向服务器发送 HTTP 请求，请求获取图片资源。这个请求的过程是由浏览器的 网络模块 处理的。
- 图片可以是 本地图片（相对路径） 或 远程图片（URL）。
图片下载：
- 图片开始下载，具体下载速度取决于网络带宽、服务器响应时间等因素。
- 如果图片是通过 HTTP(S) 请求加载的，它会被存储在浏览器的缓存中，以便下次使用。
图片解码：
- 浏览器会根据图片格式（如 PNG、JPEG、WebP 等）解码图片，将其转换为可供渲染的像素数据。
- 解码过程是由浏览器内置的图像解码器（或操作系统提供的解码库）完成的。
渲染：
- 当浏览器完成图片的加载和解码后，它会将图片渲染到页面上。
- 这时，浏览器将图像的像素数据填充到对应的 <img> 元素或 CSS 背景的位置。
显示：
- 渲染完成后，图片显示在页面上，并可以响应页面的布局变化（如响应式设计）。

2. 图片加载的具体规则

HTML `<img>` 标签中的图片加载：

<img> 标签会阻塞渲染：
- 如果页面中的图片较大或有多个图片需要加载，会延迟页面的渲染，导致 首屏加载 的时间变长。
- 浏览器会在图片资源完全加载前不会渲染图像的内容，而会保持占位符。
图片懒加载：
- HTML5 引入了 loading="lazy" 属性，允许浏览器延迟加载图片，直到图片即将进入视口时再进行加载。这有助于加速页面加载，减少不必要的资源请求。
示例：
```
<img src="image.jpg" loading="lazy" alt="Lazy loaded image" />
```

CSS 背景图片的加载：

CSS 背景图像的加载不会阻塞页面渲染：
- 背景图像的加载是在页面渲染过程中异步进行的，它不会影响页面的初步呈现。
- 如果 CSS 中包含背景图像，浏览器会先渲染页面的结构（如文本、布局等），然后再加载背景图片。
异步加载：
- 背景图像不会阻塞其他 DOM 元素的渲染，只有在 CSS 样式被解析并且背景图像被解码后，才会显示背景。
示例：
```
body {
	background-image: url('background.jpg');
	background-size: cover;
}
```

图片预加载：

预加载：
- 如果知道某些图片是用户可能会访问的，可以使用 <link rel="preload"> 标签来提前加载这些图片，以减少资源加载的延迟。
示例：
```
<link rel="preload" href="image.jpg" as="image" />
```

3. 图片加载优化

为了提升网页加载性能，减少图片加载的阻塞，以下是一些优化方法：

图片格式选择：
- 使用现代的图片格式，如 WebP，可以在保证图像质量的同时，减少图片大小，提高加载速度。
- 对于需要透明背景的图像，可以使用 PNG 或 SVG 格式；而对于大多数图片，使用 JPEG 或 WebP 格式能更有效地压缩文件大小。
响应式图片：
- 使用 srcset 和 sizes 属性为不同的屏幕尺寸和分辨率提供适当的图片。
示例：

<img
	src="image-320w.jpg"
	srcset="image-320w.jpg 320w, image-640w.jpg 640w, image-1280w.jpg 1280w"
	sizes="(max-width: 600px) 320px, 640px"
	alt="Responsive image"
/>

图片懒加载：
- 对于不在视口内的图片，启用懒加载（loading="lazy"），可以显著提高页面初次加载速度，特别是长页面中有大量图片时。
图片压缩：
- 对图片进行适当压缩，减少文件大小，减轻浏览器的下载负担。可以使用工具如 ImageOptim 或 TinyPNG 进行压缩。
合并图片（精灵图）：
- 对于小图标或重复使用的图片，可以将它们合并成一张精灵图，减少 HTTP 请求的数量。
使用图片 CDN：
- 图片可以通过 CDN（内容分发网络）进行托管，以便更快地从离用户最近的服务器获取资源。

4. 图片的渲染策略

同步加载：
- 图片资源一旦请求发出，浏览器会立即尝试加载并解码，直到图片完全加载完成，才会显示该图片。
异步加载：
- 通过 CSS 背景图像的方式，图片加载是异步进行的，背景图片只有在完全加载后才会呈现。
占位符：
- 在图片加载过程中，浏览器可能会显示一个占位符图像（例如，使用一个小的占位图或模糊渐变效果），直到原始图片加载完成。

总结：

HTML <img> 标签 会在请求图片时阻塞页面渲染，直到图片加载完成后才会显示；可以使用懒加载（loading="lazy"）和预加载（<link rel="preload">）来优化图片加载。
CSS 背景图片 是异步加载的，不会阻塞页面的渲染，可以在页面结构渲染后加载背景图片。
优化图片加载可以通过选择合适的图片格式、使用响应式图片、懒加载、压缩图片等手段来提升页面性能。

通过这些方法，我们可以使页面加载更高效、用户体验更流畅。

51. mete 标签中的 viewport 有什么用？

<meta> 标签中的 viewport 属性用于控制网页在不同设备上的显示方式，尤其是在 响应式设计 中。它定义了浏览器的视口（viewport）如何显示网页的内容，直接影响网页的缩放和布局。

基本语法：

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

常见属性：

width
- 控制视口的宽度，常见的值是：
  - device-width：表示视口的宽度等于设备的屏幕宽度（不考虑设备缩放）。这是移动设备中常用的设置，确保网页适应不同的屏幕尺寸。
  - 也可以设置为具体的像素值（例如 width=800），指定视口宽度为 800px。
initial-scale
- 控制页面的初始缩放比例。默认值是 1，表示没有缩放。设置 initial-scale=1 通常意味着页面显示的内容与设备的物理像素一致。
- initial-scale 控制页面加载时的缩放比例。例如，initial-scale=1 表示页面在加载时以 100% 的比例显示。
maximum-scale
- 控制页面的最大缩放比例。可以用来限制用户在浏览网页时放大页面的最大程度，避免过度缩放。
- 示例：maximum-scale=1.0 表示用户无法放大页面超过原始大小。
minimum-scale
- 控制页面的最小缩放比例。可以用来限制用户缩小页面的程度。
- 示例：minimum-scale=0.5 表示用户最小缩小的比例为原始大小的一半。
user-scalable
- 控制用户是否可以缩放页面。常见的值：
  - yes：允许用户缩放。
  - no：禁止用户缩放页面。禁止缩放的做法一般用于防止用户操作页面时遇到显示问题。

示例：

<meta
	name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
/>

这段代码的含义是：

width=device-width：视口的宽度与设备的屏幕宽度相同。
initial-scale=1：初始的缩放比例为 1，即页面内容按设备的默认比例显示。
maximum-scale=1：用户不能放大页面。
user-scalable=no：用户无法缩放页面。

使用场景：

响应式设计：
- 通过设置 width=device-width，确保网页内容可以根据不同设备的屏幕大小进行自适应显示，适合手机、平板等多种设备。
- 如果不设置 viewport，移动设备上的网页会默认使用一个固定的宽度，可能导致页面内容显示得过小或不合适。
禁止缩放：
- 在某些情况下（例如移动端表单或 Web 应用），为了避免用户缩放页面影响操作或布局，可以通过 user-scalable=no 禁止缩放。
精细控制缩放：
- 使用 initial-scale, maximum-scale 和 minimum-scale 来精确控制页面缩放行为，防止用户将页面缩放得太小或太大，影响页面的可用性。

总结：

<meta name="viewport"> 标签是控制网页在不同设备上如何显示和缩放的关键工具，特别是对于响应式设计至关重要。通过合理配置 width, initial-scale, maximum-scale, user-scalable 等属性，可以有效地提升网页的用户体验，确保网页在手机、平板、桌面等设备上都能良好显示。

52. style 标签写在 body 后与 body 前有什么区别？

<style> 标签在 HTML 中用于包含 CSS 样式，它的位置相对网页文档的结构可能会影响样式的应用和加载顺序。通常，<style> 标签会放在 <head> 部分，但是如果它放在 <body> 部分，尤其是 <body> 标签之后，可能会产生一些微妙的区别。让我们来看看 style 标签放在 <body> 前后可能带来的不同：

1. `style` 标签放在 `<head>` 中（推荐做法）

<head>
	<style>
		/* 样式定义 */
	</style>
</head>
<body>
	<!-- 页面内容 -->
</body>

效果：

优先加载： 浏览器会首先加载并应用位于 <head> 中的 CSS 样式，这有助于页面在加载时正确呈现布局和样式。
防止闪烁（FOUC，Flash of Unstyled Content）： 页面加载时，浏览器会先渲染 HTML 内容，再加载 CSS。如果 CSS 在 <body> 后才加载，可能会先看到没有样式的页面内容（即“样式闪烁”）。
符合标准： 将 CSS 放在 <head> 中是符合 HTML 和网页开发最佳实践的做法，确保样式与结构分离，并且不影响页面渲染的流畅性。

2. `style` 标签放在 `<body>` 后

<body>
	<!-- 页面内容 -->
	<style>
		/* 样式定义 */
	</style>
</body>

效果：

延迟样式应用： 如果 <style> 放在 <body> 后，浏览器首先会解析和渲染 HTML 内容，而样式直到 <style> 标签被解析之后才会被应用。这可能导致页面在加载时展示没有样式的内容，直到浏览器解析完样式并重新渲染页面。
影响渲染性能： 页面上的内容会先显示，没有任何样式，可能出现短暂的闪烁现象（FOUC）。用户在加载过程中看到的页面内容，可能是在没有应用任何 CSS 样式的情况下显示的。
样式生效顺序： 如果样式在 <body> 后，浏览器会在文档的内容加载后再解析样式。因此，对于一些动态加载的内容（例如通过 JavaScript 渲染的内容），可能会出现样式应用的延迟。

3. 为什么 `<style>` 标签最好放在 `<head>` 中？

提高性能： 将 CSS 样式放在 <head> 中有助于浏览器提前获取和应用样式，避免页面加载时的闪烁效果，提高用户体验。
标准做法： 把样式放在 <head> 中，符合 HTML 的最佳实践，有助于代码的可维护性和清晰的结构。
防止样式应用延迟： 将样式提前加载，使页面内容在呈现时已经是完整样式，避免页面内容的样式在加载完后才应用，从而避免视觉上的跳跃。

4. 总结：

将 <style> 标签放在 <head> 部分是最佳实践，可以确保页面在加载时即正确应用样式，避免样式闪烁（FOUC）。
如果 <style> 标签放在 <body> 后，可能会导致样式应用的延迟，影响页面的渲染顺序和用户体验。尤其是在内容较多或者依赖大量动态样式的页面中，这种做法会影响性能。

因此，建议将 <style> 标签放在 <head> 部分。

53. 前端该如何选择图片的格式？

在前端开发中，选择合适的图片格式对于优化网页性能和用户体验至关重要。以下是一些常见的图片格式以及它们的适用场景：

1. JPEG (Joint Photographic Experts Group)

适用场景: 照片、复杂图像、色彩丰富的图片。
特点:
- 有损压缩，压缩率高，文件较小。
- 不支持透明度。
- 适合用于背景图、轮播图、产品展示等。

2. PNG (Portable Network Graphics)

适用场景: 需要透明背景的图像、图标、线条图、文本图。
特点:
- 无损压缩，保留图像细节。
- 支持透明度（8 位和 24 位）。
- 文件较大，适合用于需要高质量图像的场景。

3. GIF (Graphics Interchange Format)

适用场景: 简单的动画、图标、低色彩图像。
特点:
- 支持动画。
- 支持透明度（1 位）。
- 色彩有限（256 色），适合简单的图像和动画。

4. SVG (Scalable Vector Graphics)

适用场景: 图标、矢量图形、需要无损缩放的图像。
特点:
- 基于 XML 的矢量图形格式。
- 无损缩放，文件较小。
- 适合用于响应式设计中的图标和图形。

5. WebP

适用场景: 照片、复杂图像、需要高压缩率的场景。
特点:
- 由 Google 开发，支持有损和无损压缩。
- 文件较小，压缩率比 JPEG 和 PNG 更高。
- 支持透明度。
- 兼容性较好，但仍需考虑旧版浏览器的支持情况。

6. AVIF (AV1 Image File Format)

适用场景: 照片、复杂图像、需要极高压缩率的场景。
特点:
- 基于 AV1 视频编码的图像格式。
- 压缩率极高，文件非常小。
- 支持透明度。
- 兼容性正在逐步提升，但仍需考虑浏览器的支持情况。

7. APNG (Animated Portable Network Graphics)

适用场景: 需要高质量动画的场景。
特点:
- 支持动画的 PNG 格式。
- 支持透明度。
- 文件较大，适合需要高质量动画的场景。

选择图片格式的建议

照片和复杂图像: 优先考虑 JPEG 或 WebP，如果需要透明度则使用 PNG。
图标和矢量图形: 优先考虑 SVG，如果需要动画则使用 APNG。
动画: 优先考虑 GIF 或 APNG，如果需要高质量动画则使用 APNG。
高压缩率: 优先考虑 WebP 或 AVIF，但需注意浏览器兼容性。

优化建议

压缩图片: 使用工具（如 ImageOptim、TinyPNG）压缩图片以减小文件大小。
响应式图片: 使用<picture>标签或srcset属性提供不同分辨率的图片。
懒加载: 使用懒加载技术延迟加载图片，提高页面加载速度。

通过合理选择和优化图片格式，可以显著提升网页的加载速度和用户体验。

54. 什么是渐进增强和优雅降级？

渐进增强（Progressive Enhancement）和优雅降级（Graceful Degradation）是两种不同的前端开发策略，它们都关注如何确保网页在不同设备和浏览器上都能良好运行，且能提供最佳的用户体验。

1. 渐进增强（Progressive Enhancement）

渐进增强是一种开发策略，核心思想是首先为所有用户提供一个基本的功能和体验，并在此基础上，针对拥有更强大功能支持的设备（如支持 JavaScript、CSS3 或更高分辨率的设备）增强网页的交互性和功能。

基本原则：

核心内容和功能： 在最基础的情况下，确保网页的核心内容和功能可以在所有设备和浏览器中访问和使用，即使是最老的浏览器也能看到内容。
逐步增强： 针对更现代的设备和浏览器，逐步增强页面的功能。例如，通过 JavaScript 提供动态交互，通过 CSS3 提供更精美的样式，或者利用响应式设计针对不同屏幕尺寸优化布局。
容错性： 允许在功能支持不完全的环境下，用户仍然能够获得可用的网页体验。

示例：

一个简单的 HTML 页面，可以在没有 JavaScript 的情况下提供基本内容，如果浏览器支持 JavaScript，那么就可以增强页面的交互体验（如动态表单验证、异步数据加载等）。
页面可能首先通过 HTML5 和 CSS3 构建一个简单布局，然后利用媒体查询、JavaScript 和 CSS 动画等增强用户体验。

优点：

确保了基本功能对所有用户都可用，最大化覆盖不同设备和浏览器。
增强的功能和交互只会在支持的浏览器和设备中启用，从而提供最佳的体验。

缺点：

需要开发者考虑如何在不支持某些功能的环境中提供替代方案或降级方案。

2. 优雅降级（Graceful Degradation）

优雅降级是一种开发策略，核心思想是从一开始就为现代浏览器和设备提供全面的功能和设计，然后通过降级，确保在较旧或不支持某些功能的浏览器中，网站依然能够正常工作，尽管功能可能受到限制。

基本原则：

先进行全面开发： 先为最新、最强大的浏览器和设备开发一个功能全面、用户体验丰富的网页。
降级支持： 然后，通过降级技术（如条件注释、polyfill 或其他兼容性解决方案）来确保这些功能在较老的浏览器中依然能工作，尽可能保留最基本的功能和内容。

示例：

开发者可能首先为现代浏览器（如 Chrome 或 Firefox）使用 JavaScript 动画、CSS3 动画和高级交互功能，随后通过 JavaScript polyfills 和条件注释，确保在 IE 旧版本或不支持现代特性的浏览器中，网站仍然可以正常显示文本和图片，功能略微减少或没有动画效果。

优点：

提供丰富、创新和高度互动的体验给使用现代浏览器的用户。
更容易在设计上实现复杂的功能，因为开发者假设用户的浏览器会支持最新技术。

缺点：

如果没有充分的降级方案，较老的浏览器或设备可能无法正常显示内容或体验效果大幅度下降。
这种策略通常会要求开发者更多地关注浏览器兼容性和为老旧浏览器提供支持的额外工作量。

3. 渐进增强 vs. 优雅降级：

特点	渐进增强（Progressive Enhancement）	优雅降级（Graceful Degradation）
开发顺序	从基本功能开始，逐步增强功能	从全面功能开始，逐步降级支持
核心思想	确保所有用户都能看到内容，增强现代设备和浏览器的体验	针对现代浏览器和设备提供最强功能，降级为旧设备和浏览器提供简化版体验
重点	优先考虑无 JS 或简单浏览器的支持（基本功能先行）	优先考虑现代浏览器的体验（提供更复杂的功能）
支持的设备/浏览器	所有设备和浏览器，逐步增强功能	主要支持现代设备和浏览器，降级至旧设备和浏览器
使用技术	主要使用 HTML 和 CSS，使用 JS 和 CSS3 增强功能	使用现代技术（如 JS 动画、CSS3）并通过兼容性方案提供降级支持

总结：

渐进增强 侧重于为所有用户提供可用的网页内容和功能，并根据设备能力逐步增加功能。
优雅降级 则是从一个完整的、功能丰富的网页开始，并为不支持某些功能的用户提供简化的版本。

在实际开发中，渐进增强通常被认为是更现代的做法，因为它首先考虑了较老设备和浏览器的兼容性，并确保所有用户都能访问核心内容和功能。而优雅降级更多关注现代浏览器和设备，但如果没有足够的降级方案，可能会影响老设备用户的体验。

55. webSocket 如何兼容低浏览器

WebSocket 是一种在客户端和服务器之间建立持久连接的协议，用于实时数据通信。它提供了比传统的轮询方式（如 AJAX 请求）更高效的双向通信机制，能够在客户端和服务器之间快速、实时地交换数据。然而，WebSocket 并不是所有浏览器都支持的，特别是在一些旧版浏览器中（如 Internet Explorer 10 及更早版本）。

为了使 WebSocket 能兼容低版本浏览器，可以采用以下几种方案：

1. 使用 WebSocket Polyfill 或第三方库

为了解决低版本浏览器不支持 WebSocket 的问题，可以使用 polyfill 或第三方库来模拟 WebSocket 的行为。这些库可以提供一个标准的 API，并在浏览器不支持 WebSocket 时回退到其他通信机制。

一些常见的 WebSocket polyfill 和第三方库包括：

SockJS：
- SockJS 是一个 JavaScript 库，它为不支持 WebSocket 的浏览器提供了一个类似于 WebSocket 的 API，并且能够自动选择最佳的通信协议（如 XHR 流、长轮询等）来回退实现。
- 它在大多数现代浏览器中支持 WebSocket，在老旧浏览器中提供了可靠的替代方案。
示例：
```
var sock = new SockJS('http://example.com/socket');
sock.onopen = function () {
	console.log('WebSocket connection established');
};
sock.onmessage = function (e) {
	console.log('Message from server: ' + e.data);
};
sock.onclose = function () {
	console.log('WebSocket connection closed');
};
```
WebSocketJS：
- WebSocketJS 是另一个库，旨在通过基于 XHR 的轮询、JSONP 等方法来模拟 WebSocket 功能，从而支持低版本的浏览器。

2. 回退到轮询机制

对于不支持 WebSocket 的浏览器，可以在后端使用 长轮询（Long Polling）作为 WebSocket 的回退方案。长轮询是一个模仿 WebSocket 行为的技术，客户端发送请求到服务器，服务器保持连接直到有新的数据，服务器返回数据后，客户端再次发送请求。

长轮询的工作原理：

客户端发送请求到服务器。
服务器保持连接，直到有新消息或者数据需要返回给客户端。
一旦服务器有数据，响应请求并关闭连接。
客户端接收到响应后，立即发送新的请求。

虽然长轮询可以提供类似 WebSocket 的功能，但它并不如 WebSocket 高效，因为它需要频繁地建立 HTTP 请求，带来一定的网络和性能开销。

示例（长轮询的伪代码）：

function longPolling() {
	var xhr = new XMLHttpRequest();
	xhr.open('GET', '/long-polling-endpoint', true);
	xhr.onreadystatechange = function () {
		if (xhr.readyState === 4 && xhr.status === 200) {
			console.log('New data: ' + xhr.responseText);
			// 处理数据后，立即重新发送请求
			longPolling();
		}
	};
	xhr.send();
}

longPolling();

3. 使用 Flash Socket 或其他技术（如 XHR Polling）

在某些极旧的浏览器（如 IE6、IE7、IE8）中，WebSocket 和其它解决方案可能不可用。这时候，可以使用基于 Flash 的解决方案（如 Flash Socket），或者通过 XHR Polling（普通的 AJAX 轮询）来模拟 WebSocket 的行为。这种方法通常是最后的选择，主要用于那些非常老旧的浏览器。

Flash Socket：借助 Flash 插件提供的 socket 功能来模拟 WebSocket。
XHR Polling：普通的 HTTP 请求，通过不断发送轮询请求来模拟实时消息推送，性能较差，且延迟较高。

4. 浏览器特性检测

为了判断浏览器是否支持 WebSocket，可以使用 JavaScript 对浏览器特性进行检测。如果 WebSocket 不受支持，则可以回退到其他方法（如 SockJS 或长轮询）。

示例：

if (window.WebSocket) {
	// 浏览器支持 WebSocket
	var socket = new WebSocket('ws://example.com');
	socket.onopen = function () {
		console.log('WebSocket connected');
	};
	socket.onmessage = function (e) {
		console.log('Message: ' + e.data);
	};
} else {
	// 浏览器不支持 WebSocket，使用其他技术
	var sock = new SockJS('http://example.com/socket');
	sock.onopen = function () {
		console.log('SockJS connection established');
	};
}

5. 后端支持的多协议

除了前端的处理，还需要确保后端能够支持多种协议来处理不同的客户端请求。通常，后端的 WebSocket 服务器会根据客户端是否支持 WebSocket 来选择使用 WebSocket 或其他替代方案。例如：

WebSocket：默认的通信协议。
HTTP 轮询：当 WebSocket 不可用时，回退到 HTTP 轮询。
长连接（长轮询）：当浏览器不支持 WebSocket 时，服务器使用轮询和长连接技术。

总结

为了兼容低版本浏览器，通常可以采取以下几种策略：

使用 SockJS 或类似的 polyfill 库来模拟 WebSocket 的行为。
对于极旧的浏览器，使用 长轮询 或 XHR Polling 作为回退方案。
进行 浏览器特性检测，如果 WebSocket 不受支持，回退到其他技术。
确保后端支持多种通信协议，根据浏览器能力选择合适的方案。

通过这些方法，可以确保 WebSocket 的功能在不同浏览器中都能正常运行，并提供最佳的用户体验。

56. 如何实现浏览器内多个标签页之间的通信？

在浏览器中实现多个标签页之间的通信可以通过多种方式实现，以下是几种常见的方法：

1. 使用 `localStorage` 和 `storage` 事件

localStorage 是浏览器提供的一种存储机制，可以在多个标签页之间共享数据。当 localStorage 中的数据发生变化时，会触发 storage 事件，从而实现标签页之间的通信。

示例代码

// 标签页 A
localStorage.setItem('message', 'Hello from Tab A');

// 标签页 B
window.addEventListener('storage', function (event) {
	if (event.key === 'message') {
		console.log('Message received from Tab A:', event.newValue);
	}
});

2. 使用 `BroadcastChannel` API

BroadcastChannel API 是一种更现代的方式，允许同源的多个标签页之间进行通信。它比 localStorage 更简洁，且不需要手动触发事件。

示例代码

// 标签页 A
const channel = new BroadcastChannel('my_channel');
channel.postMessage('Hello from Tab A');

// 标签页 B
const channel = new BroadcastChannel('my_channel');
channel.addEventListener('message', function (event) {
	console.log('Message received from Tab A:', event.data);
});

3. 使用 `SharedWorker`

SharedWorker 是一种共享的 Web Worker，允许多个标签页共享同一个后台线程。通过 SharedWorker，标签页之间可以进行通信。

示例代码

// shared-worker.js
const connections = [];

onconnect = function (event) {
	const port = event.ports[0];
	connections.push(port);

	port.onmessage = function (event) {
		connections.forEach((connection) => {
			if (connection !== port) {
				connection.postMessage(event.data);
			}
		});
	};
};

// 标签页 A
const worker = new SharedWorker('shared-worker.js');
worker.port.start();
worker.port.postMessage('Hello from Tab A');

// 标签页 B
const worker = new SharedWorker('shared-worker.js');
worker.port.start();
worker.port.onmessage = function (event) {
	console.log('Message received from Tab A:', event.data);
};

4. 使用 `IndexedDB` 和 `IDBObserver`

IndexedDB 是一种浏览器提供的客户端数据库，可以用于存储大量结构化数据。通过监听 IndexedDB 的变化，可以实现标签页之间的通信。

示例代码

// 标签页 A
const request = indexedDB.open('myDatabase', 1);

request.onupgradeneeded = function (event) {
	const db = event.target.result;
	db.createObjectStore('messages', { keyPath: 'id' });
};

request.onsuccess = function (event) {
	const db = event.target.result;
	const transaction = db.transaction('messages', 'readwrite');
	const store = transaction.objectStore('messages');
	store.add({ id: 1, message: 'Hello from Tab A' });
};

// 标签页 B
const request = indexedDB.open('myDatabase', 1);

request.onsuccess = function (event) {
	const db = event.target.result;
	const transaction = db.transaction('messages', 'readonly');
	const store = transaction.objectStore('messages');
	const request = store.get(1);

	request.onsuccess = function (event) {
		console.log('Message received from Tab A:', event.target.result.message);
	};
};

5. 使用 `WebSocket`

如果你需要跨多个标签页进行实时通信，可以使用 WebSocket。WebSocket 是一种双向通信协议，可以在客户端和服务器之间建立持久连接。

示例代码

// 标签页 A
const socket = new WebSocket('ws://example.com/socket');

socket.onopen = function () {
	socket.send('Hello from Tab A');
};

// 标签页 B
const socket = new WebSocket('ws://example.com/socket');

socket.onmessage = function (event) {
	console.log('Message received from Tab A:', event.data);
};

总结

以上是几种常见的实现浏览器内多个标签页之间通信的方法。选择哪种方法取决于你的具体需求，例如是否需要实时通信、是否需要跨域通信等。

57. 什么是 HTML5，以及和 HTML 的区别是什么？

什么是 HTML5？

HTML5 是 HTML（超文本标记语言）的第五个主要版本，于 2014 年由 W3C（万维网联盟）正式发布。它是一个面向现代 Web 应用的开放标准，旨在改进 Web 的语义、结构和功能，同时支持多媒体和丰富的应用程序。

HTML5 的设计目标包括：

提高对多媒体（如音频、视频）的支持，无需插件（如 Flash）。
提供更语义化的标签，以增强页面内容的结构化和可读性。
增强 Web 应用的能力，比如离线存储、本地数据库等。
更好地支持跨设备访问，如手机、平板和桌面设备。
提供更强大的 API 支持，使开发者可以直接与浏览器底层交互。

HTML5 和 HTML 的主要区别

1. 新增语义化标签

HTML5 提供了一些新的语义化标签，帮助开发者更好地描述页面结构，提升搜索引擎优化（SEO）和可维护性：

<header>：定义页面或部分内容的头部。
<footer>：定义页面或部分内容的底部。
<article>：表示独立的内容单元（例如博客文章、新闻等）。
<section>：定义页面的分区内容。
<aside>：表示与主要内容相关的附属信息。
<nav>：定义导航链接。

2. 多媒体支持

HTML5 原生支持音频和视频播放，无需依赖第三方插件（如 Flash）：

<audio>：用于嵌入音频内容。
<video>：用于嵌入视频内容。

示例：

<audio controls>
	<source src="audio.mp3" type="audio/mpeg" />
	您的浏览器不支持 audio 元素。
</audio>

<video controls width="640" height="360">
	<source src="video.mp4" type="video/mp4" />
	您的浏览器不支持 video 元素。
</video>

3. 更强的表单功能

HTML5 增强了表单元素和属性，使得表单更易用：

新增的输入类型：date、email、url、range、color 等。
新增属性：
- placeholder：显示占位提示文本。
- required：设置字段为必填项。
- pattern：通过正则表达式定义输入格式。

示例：

<form>
	<input type="email" placeholder="请输入邮箱" required />
	<input type="date" />
</form>

4. 新的 API 和功能

HTML5 提供了一系列新的 JavaScript API，用于增强 Web 应用的功能：

Canvas API：使用 <canvas> 元素进行 2D 图形绘制。
Web Storage：包括 localStorage 和 sessionStorage，提供了更简单的客户端存储方案。
Geolocation API：允许获取用户的地理位置信息。
Offline Web 应用：通过缓存机制实现离线访问。
WebSocket API：提供全双工通信能力。
Drag and Drop API：实现拖放功能。

5. 提供离线存储和应用支持

HTML5 支持：

Application Cache（已弃用，替代为 Service Worker）：实现简单的离线缓存。
Web Storage：提供 localStorage 和 sessionStorage。

6. 移除的内容

HTML5 删除了一些不再推荐使用的元素和属性，以简化开发：

不推荐的元素：
- <font>（替代为 CSS 控制字体样式）。
- <center>（替代为 CSS 中的 text-align: center;）。
- <big> / <small>。
不推荐的属性：
- align、bgcolor（替代为 CSS）。

HTML5 的优势

跨平台支持：适合在多种设备（手机、平板、桌面）上使用。
丰富的多媒体功能：无需插件即可播放音视频。
更语义化的标签：提升了代码的可读性和 SEO 效果。
强大的 Web 应用支持：支持离线存储、实时通信和用户位置获取等功能。
高性能：通过减少对第三方插件的依赖，提高页面加载速度和响应性能。

HTML5 的应用场景

响应式网站开发：使用 <header>、<footer> 等语义化标签配合 CSS 构建适配不同设备的页面。
多媒体网站：通过 <audio> 和 <video> 构建音视频播放器。
Web 应用：使用 Web Storage 和离线支持开发高性能的浏览器应用。
地图服务：通过 Geolocation API 获取用户地理位置信息。
游戏开发：使用 Canvas API 绘制 2D 游戏画面，或结合 WebGL 进行 3D 渲染。

HTML5 已成为现代 Web 开发的基础标准，是前端技术栈中不可或缺的一部分。

58. 说说 HTML、XML、XHTML 的区别

HTML、XML、XHTML 的区别

HTML、XML 和 XHTML 是 Web 开发中常用的标记语言，它们各自有不同的设计目标和用途。以下是对它们的区别的详细分析：

1. HTML（超文本标记语言）

定义

HTML（HyperText Markup Language）是用来描述网页结构的标记语言，专注于内容展示，是一种非严格的标记语言。

特点

用途：定义网页的结构和内容，如文本、图像、链接等。
宽松性：HTML 允许不闭合标签、不严格嵌套元素等（如 <br> 和 <p> 标签可以不闭合）。
语义化：HTML5 引入了大量语义化标签（如 <header>、<footer>）以提高可读性和 SEO 效果。
浏览器容错性：浏览器对 HTML 代码具有很强的容错能力，即使 HTML 编写不规范，大多数浏览器仍能渲染页面。

缺点

缺少数据描述能力，无法清晰表示复杂的数据结构。
不严格的规范容易导致兼容性问题。

2. XML（可扩展标记语言）

定义

XML（eXtensible Markup Language）是用于存储和传输数据的标记语言，专注于描述和组织数据。

特点

用途：用来存储和交换数据，不关注显示，更多用于数据的结构化传递。
严格的语法规则
：
- 所有标签必须闭合。
- 标签必须正确嵌套。
- 属性值必须使用引号包裹。
- 区分大小写。
自定义标签：开发者可以根据需要定义自己的标签，便于清晰描述数据结构。
可扩展性：非常灵活，适合描述任意结构化数据。

缺点

处理和解析 XML 的开销较大。
不适合直接用于 Web 页面内容展示。

3. XHTML（可扩展超文本标记语言）

定义

XHTML（eXtensible HyperText Markup Language）是结合了 HTML 和 XML 的标记语言，旨在通过 HTML 的语义和 XML 的严格性来提供一种更规范的网页描述方式。

特点

用途：用于网页内容描述，兼具 HTML 的语义性和 XML 的规范性。
严格的语法规则
：
- 标签必须正确闭合。
- 属性值必须用引号包裹。
- 标签名称和属性必须小写。
- 空标签需要以自闭合的形式书写（如 <br />）。
向后兼容：XHTML 是对 HTML 的扩展，可以兼容现有的 HTML 内容。

缺点

较为严格的语法规则增加了开发和维护的复杂性。
浏览器对 XHTML 的支持没有 HTML 那么宽容。

HTML、XML、XHTML 的对比表

特性	HTML	XML	XHTML
用途	网页内容的描述和展示	数据存储和传输	网页内容描述，强调规范性
语法规则	宽松，允许不闭合标签、不嵌套	严格，所有标签必须闭合、嵌套正确	严格，类似 XML 的规则
标签类型	固定的一组标准标签	可自定义任意标签	基于 HTML 的标准标签
容错性	浏览器容错能力强	无容错能力，格式错误无法解析	相对宽容，但仍需符合严格语法
大小写敏感性	不区分大小写	区分大小写	标签和属性区分大小写
应用场景	Web 页面内容展示	数据传输、配置文件、数据描述	严格标准的 Web 页面内容描述

总结

HTML：面向页面展示，宽松的语法规则让它易于使用。
XML：面向数据存储与传输，严格的规则确保数据格式的一致性。
XHTML：结合了 HTML 的展示能力和 XML 的严格规则，适合需要高规范性的 Web 开发。

在实际开发中：

如果需要快速开发 Web 页面，使用 HTML。
如果需要定义和传输复杂数据结构，使用 XML 或替代品（如 JSON）。
如果需要兼顾页面展示和严格的语法规则，可选择 XHTML。

59. 标签上 title 属性与 alt 属性的区别是什么？

`title` 属性与 `alt` 属性的区别

1. 定义

title 属性：为元素提供附加信息，通常在用户将鼠标悬停在元素上时显示工具提示（tooltip）。
alt 属性：为图片提供替代文本，当图片无法加载或用于屏幕阅读器时显示，用于描述图片内容。

2. 适用范围

title 属性：可以应用于大多数 HTML 元素（如链接、段落、图片等）。
alt 属性：仅适用于 <img> 标签。

3. 用途

title 属性：
- 提供附加的上下文或说明。
- 增强用户体验。
- 用于 SEO 时增加与链接或内容相关的描述性信息。
- 仅在鼠标悬停时可见。
alt 属性：
- 当图片加载失败时显示替代内容。
- 为视觉障碍用户提供描述性内容，提升网页的无障碍性。
- 有助于 SEO，搜索引擎可以通过 alt 属性了解图片的内容。

4. 示例

title 属性

<a href="https://example.com" title="访问示例网站">示例链接</a>
<img src="example.jpg" title="示例图片" />

当鼠标悬停在链接或图片上时，浏览器会显示工具提示。

alt 属性

<img src="example.jpg" alt="一张美丽的风景图片" />

如果图片加载失败或用户使用屏幕阅读器，显示的内容为：“一张美丽的风景图片”。

5. SEO 与无障碍性

title 属性：对 SEO 帮助有限，主要提供辅助信息，不能直接影响内容的索引。
alt 属性：对图片 SEO 重要，搜索引擎会解析其内容，有助于图片排名。

总结

属性	用途	使用范围	显示时机	SEO 作用	无障碍性
`title`	提供元素的附加说明信息	任意元素	鼠标悬停时显示	辅助作用	无显著作用
`alt`	提供图片的替代文本，描述图片内容	仅限于图片	图片加载失败或被屏幕阅读器解析时显示	对图片 SEO 非常重要	提高网页的可访问性

两者可以配合使用，但应根据具体需求合理选择。

60. 页面导入样式时，使用 link 和@import 有什么区别？

`<link>` 和 `@import` 的区别

1. 定义

<link>：HTML 元素，用于在文档中引入外部资源（如 CSS 文件、网站图标等）。
@import：CSS 规则，用于在 CSS 文件中引入其他 CSS 文件。

2. 使用方式

<link>

：直接在 HTML 文件的

<head>

部分引入。

<link rel="stylesheet" href="styles.css" />

@import
：写在 CSS 文件中，或嵌入式的
```
<style>
```
标签中。
```
@import url('styles.css');
```

3. 加载顺序

<link>：在 HTML 解析时立即加载外部资源，属于并行加载。
@import：只有在加载并解析包含 @import 的 CSS 文件后才会加载导入的资源，属于串行加载。

影响： <link> 比 @import 加载效率更高，页面渲染速度更快。

4. 浏览器兼容性

<link>：所有主流浏览器都支持，包括较早期的浏览器。
@import：不被 IE5 以下版本支持，兼容性较差。

5. 使用场景

<link>
：
- 推荐用于引入样式表，尤其是外部 CSS 文件。
- 可以控制媒体查询（如 media="screen"）。
- 支持预加载机制（rel="preload"）优化性能。
@import
：
- 一般用于组织 CSS 文件，在一个样式文件中导入另一个样式文件。
- 不推荐在生产环境使用（加载效率低）。

6. 嵌套导入

<link>：不支持嵌套导入（不能通过 <link> 引入另一个 CSS 文件）。
@import：支持嵌套导入，一个 CSS 文件中可以多次使用 @import 引入其他文件。

对比总结

特性	`<link>`	`@import`
引入方式	HTML 标签，直接在 HTML 中使用	CSS 规则，写在 CSS 文件或 `<style>` 标签中
加载顺序	并行加载，效率高	串行加载，效率低
浏览器兼容性	支持所有主流浏览器	不支持 IE5 以下版本
灵活性	可添加属性（如 `media`）控制样式应用	只能通过 CSS 实现控制
嵌套导入	不支持	支持嵌套导入
推荐使用场景	用于引入外部样式文件	用于组织多个 CSS 文件，但不推荐在生产环境使用

建议

在实际开发中，应优先使用 <link> 引入样式文件，以提高加载速度和浏览器兼容性。
@import 更适合作为组织 CSS 文件的工具，但在性能优化需求较高的项目中，尽量避免使用。

61. 简单描述从输入网址到页面显示的过程

从输入网址到页面显示的完整过程

当用户在浏览器地址栏中输入一个网址并回车时，浏览器会经历以下步骤将页面呈现出来：

1. URL 解析

浏览器首先解析用户输入的 URL，判断协议（如 http:// 或 https://）、域名或 IP 地址、端口号（默认 80 或 443）以及路径。

2. DNS 解析

浏览器将域名解析为服务器的 IP 地址，过程如下：

浏览器缓存：检查本地浏览器缓存是否已存有该域名对应的 IP。
操作系统缓存：若浏览器无缓存，查询操作系统的 DNS 缓存。
本地 hosts 文件：操作系统检查 hosts 文件中的静态映射。
DNS 服务器查询：
- 操作系统向配置的 DNS 服务器发送查询请求。
- DNS 服务器逐级查询根域名服务器、顶级域名服务器（TLD）、权威域名服务器，最终返回 IP 地址。

3. 建立 TCP 连接

通过 三次握手 与目标服务器建立 TCP 连接：

客户端向服务器发送 SYN 请求（请求建立连接）。
服务器响应 SYN-ACK（确认连接请求并返回服务器状态）。
客户端发送 ACK 确认，连接建立成功。

4. 发起 HTTP/HTTPS 请求

浏览器通过 TCP 连接发送 HTTP/HTTPS 请求。
若是 HTTPS，先进行 TLS/SSL 握手，协商加密方式后开始安全通信。
请求包括：
- 请求行（GET 方法、路径等）。
- 请求头（浏览器信息、Cookie 等）。
- 请求体（仅 POST 等方法使用）。

5. 服务器处理请求并返回响应

服务器接收请求：后端服务器根据请求路径和参数，处理请求。
生成响应内容
：
- 静态资源：直接读取文件返回（如 HTML、CSS、JS）。
- 动态资源：调用后端逻辑（如查询数据库）生成内容。
响应内容发送
：
- 包括状态码（如 200 OK）、响应头、响应体（如 HTML 内容）。

6. 浏览器接收并解析响应

浏览器接收到服务器的 HTTP 响应后：

检查状态码
：
- 200：请求成功，继续处理。
- 301/302：重定向，自动发起新的请求。
- 404：资源未找到。
- 500：服务器内部错误。
解析响应头
：
- 如缓存控制、压缩方式（Gzip 等）、内容类型（Content-Type）、跨域策略等。
解压响应体（如 Gzip 解压）并开始渲染。

7. 页面渲染流程

解析 HTML，构建 DOM 树
：
- 从 HTML 文件的开头逐行解析，生成 DOM 树。
加载外部资源
：
- 遇到 <link> 加载 CSS，构建 CSSOM 树。
- 遇到 <script>，根据属性（defer/async）决定执行时机。
- 遇到图片、视频等资源，发起并行下载。
合并 DOM 树和 CSSOM 树
：
- 生成渲染树（Render Tree）。
计算布局
：
- 根据渲染树计算每个节点的布局（大小、位置等）。
绘制
：
- 将内容绘制到屏幕上（包括文字、颜色、图像等）。

8. 触发交互行为

页面显示完成后，用户可以与之交互。浏览器通过事件机制（如点击、输入等）监听并处理用户操作。

完整流程图

输入 URL -> DNS 解析 -> TCP 三次握手 -> 发送 HTTP 请求 -> 服务器返回响应 -> 浏览器解析响应 -> 构建和渲染页面

优化点

DNS 预解析：减少 DNS 查询时间。
CDN 加速：加快资源加载速度。
缓存机制：减少重复加载资源。
压缩资源：如 Gzip/ Brotli。
延迟加载：按需加载图片、脚本等资源。
预加载和预渲染：提前加载关键资源，提升首屏渲染速度。

通过理解这个过程，前端开发者可以针对性能优化进行有针对性的改进。

62. 简述 html 页面渲染过程

HTML 页面渲染过程

浏览器将 HTML 页面从输入到呈现在屏幕上的渲染过程，可以分为以下几个步骤：

1. 解析 HTML，生成 DOM 树

浏览器从服务器接收到 HTML 文件，逐行解析 HTML 标记。
HTML 元素被解析为 DOM（文档对象模型）树，其中每个节点代表 HTML 文档中的一个标签或内容。
若 HTML 中包含无效标记，浏览器会尝试容错修复。

2. 解析 CSS，生成 CSSOM 树

浏览器解析 HTML 中的 <style> 标签以及外部样式文件（通过 <link> 标签引入的 CSS）。
根据 CSS 选择器匹配规则生成 CSSOM（CSS 对象模型）树，表示样式规则如何作用于 DOM 树的元素。

3. 合并 DOM 树和 CSSOM 树，生成渲染树

渲染树（Render Tree）包含页面上实际显示的所有元素，以及这些元素的样式和属性。
一些不可见的元素（如 display: none 的元素）不会被包含在渲染树中。

4. 布局（Layout 或 Reflow）

浏览器根据渲染树计算每个元素的几何属性（位置和大小）。
这一阶段涉及：
- 元素的宽高计算。
- 元素的相对位置布局。
- 确定内容是否需要换行。

5. 绘制（Painting）

浏览器将计算好的元素样式和布局绘制到屏幕上。
包括：
- 绘制文本、颜色、背景、边框等。
- 绘制图像、渐变、阴影等。

6. 显示到屏幕

浏览器将绘制内容通过 GPU 合成层（Compositing），最后合并所有图层并显示到屏幕上。

渲染流程图

HTML 文件解析 -> DOM 树
CSS 文件解析 -> CSSOM 树
DOM + CSSOM -> 渲染树
渲染树 -> 布局（计算位置和大小）
布局 -> 绘制（生成像素信息）
绘制 -> GPU 合成 -> 显示到屏幕

注意事项

阻塞渲染的资源

CSS
- 在渲染过程中，CSS 是阻塞资源。
- DOM 树和 CSSOM 树需要合并才能生成渲染树，因此必须等待 CSS 加载和解析完成。
JavaScript
- 默认情况下，JavaScript 是阻塞 DOM 解析的。
- 使用 async 或 defer 属性可以避免阻塞渲染。

性能优化

减少阻塞资源
- 优化 CSS 文件（如合并和压缩）。
- 延迟加载非关键 JavaScript。
使用渲染优化技术
- 首屏关键资源优先加载（Critical Rendering Path）。
- 使用 preload 和 prefetch 提前加载资源。
合并和压缩文件
- 减少请求数。
避免频繁重排和重绘
- 通过合并操作减少布局计算和绘制。

通过理解渲染过程，可以更好地优化页面性能，提升用户体验。

63. HTML5 有哪些新特性？

HTML5 的新特性

HTML5 是 HTML 的最新版本，旨在改善语义化、结构化、功能性和多媒体支持。以下是 HTML5 的核心新特性：

1. 语义化标签

引入了更多语义化的元素，用于增强文档的结构和意义：

结构化内容：
- <header>：页面或章节的头部。
- <nav>：定义导航链接。
- <article>：独立的内容单元（如文章、博客）。
- <section>：文档或页面中的分块。
- <aside>：附属内容（如侧边栏）。
- <footer>：页面或章节的尾部。
语义内容：
- <main>：页面主体内容。
- <figure> 和 <figcaption>：图像、图表等与其描述。

2. 新的表单控件

HTML5 增强了表单功能，引入了新的控件和属性：

新的输入类型：
- type="email"：电子邮件地址验证。
- type="url"：URL 验证。
- type="date"：日期选择。
- type="number"：数字输入。
- type="range"：滑块选择范围。
- type="color"：颜色选择。
表单属性：
- required：必填字段。
- placeholder：输入占位符。
- pattern：正则表达式验证。
- autofocus：自动聚焦输入框。
- autocomplete：自动完成提示。

3. 多媒体支持

提供了无需插件的音视频支持：

音频：
- <audio>：直接嵌入音频文件。
- 支持属性：controls（控制面板）、autoplay（自动播放）、loop（循环播放）。
视频：
- <video>：直接嵌入视频文件。
- 支持属性：controls、autoplay、loop、muted（静音）。

4. 图形和绘图

Canvas：
- <canvas>：用于动态绘制 2D 图形，支持动画、图像处理等。
SVG：
- 支持可缩放矢量图形，适用于图表、图像和矢量形状。

5. 本地存储和缓存

增强了客户端存储和离线功能：

本地存储（Local Storage）：
- 使用 localStorage 和 sessionStorage 存储键值对数据。
离线缓存（AppCache）：
- 使用 manifest 文件实现离线访问。
- 被 Service Worker 替代，更灵活强大。

6. 新的 API

HTML5 提供了一些新的 API，用于提升 Web 应用的功能：

地理位置 API：
- 获取用户的地理位置信息。
Web Storage API：
- localStorage 和 sessionStorage。
Drag and Drop API：
- 支持拖拽功能。
WebSocket API：
- 实现实时双向通信。
File API：
- 处理文件的上传、读取和操作。
History API：
- 操作浏览器的历史记录（如单页应用的路由实现）。
Web Workers：
- 支持多线程编程，提升复杂任务的执行效率。

7. 支持增强的多媒体属性

字幕和多轨道：
- <track>：为 <audio> 和 <video> 提供字幕和说明。
MIME 类型支持：
- 指定音视频文件的格式和兼容性。

8. 增强的兼容性和设备支持

响应式设计支持：
- 使用 <meta name="viewport"> 适配不同设备。
设备 API：
- 支持触摸屏、传感器等现代设备功能。

9. 弃用和优化

废弃的元素：
- HTML5 移除了部分过时元素，如 <font>、<center>、<big>。
优化的解析机制：
- 更智能的错误容错能力。

HTML5 的优势

无需插件：多媒体支持原生音视频，不再依赖 Flash。
增强的语义化：使文档更易读、更可维护。
更强的交互性：通过 API 和新控件提升用户体验。
更好的性能：离线缓存和本地存储减少了服务器负担。

HTML5 是现代 Web 开发的基石，它的功能丰富而强大，使 Web 应用更高效、可交互性更强，同时也提升了用户体验。

64. 标签有什么用？

`<!DOCTYPE html>` 标签的作用

<!DOCTYPE html> 是文档类型声明（Document Type Declaration, DTD），用于告诉浏览器当前 HTML 文档使用的标准。它的主要作用包括以下几点：

1. 启用标准模式

标准模式
：
- 浏览器按照 W3C 定义的最新 HTML 和 CSS 标准解析和渲染页面。
- 避免了浏览器为了兼容老旧页面而采用的“怪异模式”。
怪异模式
：
- 浏览器采用过时的兼容模式，可能会导致 CSS 样式、盒模型等行为不符合标准。
- 怪异模式会出现一些意想不到的布局问题。

<!DOCTYPE html> 会启用标准模式，确保网页在各个现代浏览器中尽可能一致地呈现。

2. HTML5 特性支持

在 HTML5 中，<!DOCTYPE html> 是声明使用 HTML5 的方式。
HTML5 的 Doctype 是一种极简声明，具有向后兼容性，所有浏览器都支持。
以前版本的 HTML（如 HTML 4.01 和 XHTML 1.0）的 Doctype 声明较长且复杂，而 HTML5 简化了声明格式。

3. 提供 HTML 版本标识

<!DOCTYPE html> 表示文档采用 HTML5 标准。

不同版本的 HTML 使用不同的 Doctype：

HTML 4.01（严格模式）：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

XHTML 1.0（严格模式）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

HTML5 的简化声明格式不仅易读，还能减少解析错误。

4. 向后兼容性

即使旧版浏览器无法完全支持 HTML5 特性，但由于 <!DOCTYPE html> 的兼容性设计，它依然能够正常渲染页面，而不会导致解析错误。

不声明 Doctype 的后果

如果未声明 <!DOCTYPE> 或声明不正确，浏览器会：

进入怪异模式
：
- 采用老式的渲染方式（如 IE 的怪异模式）。
- CSS 盒模型会发生变化（宽度和边框计算方式不同）。
页面可能在不同浏览器中渲染结果不一致。

HTML5 的 `<!DOCTYPE>` 声明

HTML5 使用的是最简洁的 Doctype 声明：

<!DOCTYPE html>

它可以：

启用标准模式。
表示文档是 HTML5 文档。
兼容所有现代浏览器。

总结

<!DOCTYPE html> 是确保网页按照标准解析和渲染的关键声明。它在 HTML5 中简化了形式，同时提升了浏览器的兼容性和一致性，为 Web 开发提供了更好的基础。

65. script 标签为什么建议放在 body 标签的底部（defer、async）

将 <script> 标签放在 <body> 标签的底部是一种常见的性能优化实践，其背后的主要原因是为了提高页面加载和渲染速度，避免 JavaScript 的加载和执行阻塞页面的解析和渲染。

1. JavaScript 的阻塞特性

阻塞 HTML 解析：
- 当浏览器遇到 <script> 标签时，会暂停解析 HTML，开始下载和执行 JavaScript 文件。
- 只有 JavaScript 执行完成后，浏览器才会继续解析 HTML。
- 如果 JavaScript 文件体积较大或网络较慢，会显著延迟页面的内容渲染。

2. 放在 `<body>` 底部的优势

将 <script> 标签放在 <body> 底部，可以优化用户体验：

优先渲染页面内容：
- 浏览器可以先完成 HTML 的解析和渲染，使页面内容尽快展现在用户面前。
- 避免用户在等待 JavaScript 加载时看到“白屏”。
减少对关键渲染路径的影响：
- 关键渲染路径包括 DOM 树和 CSSOM 树的构建。
- 如果 JavaScript 不阻塞 HTML 的解析，就能更快地完成关键渲染路径。
提升首屏渲染速度：
- 将脚本加载延后，可以显著提高页面的首屏时间。

3. 使用 `defer` 和 `async` 优化脚本加载

HTML5 提供了两种属性（defer 和 async）来优化 JavaScript 的加载和执行，进一步减少脚本对页面解析的阻塞。

(1) `defer` 属性

作用：
- 指示浏览器异步加载 JavaScript 文件。
- 文件加载完成后，延迟到 HTML 完全解析完成后再执行。
优点：
- 脚本不会阻塞 HTML 的解析。
- 保证多个脚本按照声明顺序执行。
适用场景：
- 用于需要依赖 DOM 的脚本。

示例：

<script src="script.js" defer></script>

(2) `async` 属性

作用：
- 指示浏览器异步加载 JavaScript 文件。
- 文件加载完成后立即执行，不等待 HTML 解析完成。
优点：
- 加载和执行最快，减少整体加载时间。
缺点：
- 如果多个脚本有依赖关系，可能因执行顺序不确定而出现问题。
适用场景：
- 独立的、没有依赖关系的脚本（如统计脚本、广告脚本）。

示例：

<script src="script.js" async></script>

4. 对比三种方式

加载方式	HTML 解析是否阻塞	脚本加载是否并行	脚本执行时间点	执行顺序
默认	阻塞	否	加载完成后立即执行	按声明顺序执行
`defer`	否	是	HTML 解析完成后执行	按声明顺序执行
`async`	否	是	加载完成后立即执行	不保证按声明顺序执行

5. 综合建议

普通脚本：
- 优先将 <script> 标签放在 <body> 底部。
需要立即执行或独立的脚本：
- 使用 async 属性加载。
需要依赖 DOM 的脚本：
- 使用 defer 属性加载。

通过合理使用 defer、async 和脚本位置的优化，可以显著提升页面的加载性能和用户体验。

66. HTML 标签中的 src 和 href 有什么区别

在 HTML 中，src 和 href 都是用来指定资源位置的属性，但它们的应用场景和作用有所不同。下面是它们的主要区别：

1. `src`（Source）

作用
：
- src 是 source（源）的缩写，用于指定嵌入或包含的资源的路径或 URL。
- 用于指定文件的来源，比如图像、视频、音频、脚本等资源。
使用场景
：
- 用于 <img>、<script>、<iframe>、<audio>、<video> 等标签。
加载和渲染
：
- 当浏览器遇到带有 src 属性的标签时，浏览器会下载和解析指定的资源，并等待资源加载完毕后再继续渲染页面（例如，<script> 标签会阻塞页面的解析）。
- 资源（如图片、视频）加载完成后会被嵌入到页面中（例如，图片会显示出来）。
示例
：
```
<img src="image.jpg" alt="An image" />
<script src="script.js"></script>
```

2. `href`（Hyperlink Reference）

作用：
- href 是 hyperlink reference（超链接引用）的缩写，用于指定超链接的目标资源或文档的 URL。
- 用于指向一个外部页面、文件、锚点等。它通常用于 <a> 标签、<link> 标签等。
使用场景：
- 用于 <a>（超链接）、<link>（用于引入外部资源，如样式表）等标签。
加载和渲染：
- 当浏览器遇到带有 href 属性的标签时，用户点击超链接时，浏览器会根据指定的 URL 导航到新的页面或资源。
- href 指定的链接不会直接嵌入当前页面，而是指向外部或页面的不同部分。
示例：
```
<a href="https://www.example.com">Go to Example</a>
<link rel="stylesheet" href="style.css" />
```

3. 主要区别

特性	`src`	`href`
用途	用于指定需要嵌入、显示或执行的资源（图片、脚本、视频等）。	用于指定超链接的目标资源或文档（如链接到其他页面、CSS 文件等）。
常用标签	`<img>`, `<script>`, `<audio>`, `<video>`, `<iframe>` 等	`<a>`, `<link>`, `<base>` 等
影响页面	会阻塞页面加载（如 `<script>` 标签）或直接嵌入资源（如 `<img>`）。	不会阻塞页面加载，通常是导航的触发器。
执行方式	加载并渲染嵌入的资源，或执行脚本。	点击时导航到指定的 URL，或用于样式表等外部资源。
能否为空	不可为空，必须指定资源的 URL。	可以为空，通常默认指向当前页面或空的 URL。

4. 总结

src 用于嵌入和执行资源，通常加载后直接影响页面内容或行为。
href 用于创建超链接或引入外部资源，通常用于页面间的导航。

67. iframe 是什么？有哪些优缺点？

`<iframe>` 是什么？

<iframe>（inline frame）是 HTML 中用于在当前页面中嵌入另一个 HTML 页面或资源的元素。可以将一个外部网页、文档或媒体内容嵌入到当前页面中，而不需要重新加载整个页面。

基本语法：

<iframe src="URL"></iframe>

`<iframe>` 的优缺点

优点：

隔离性：
- iframe 提供了页面内容的隔离。在 iframe 中加载的网页或资源与父页面在 JavaScript 和 CSS 等方面是隔离的，这有助于避免父页面和 iframe 中的内容发生冲突。
- 适用于嵌入第三方内容（如广告、外部文档、嵌入视频等），不会影响到父页面的样式或功能。
易于嵌入外部资源：
- 通过 iframe 可以方便地嵌入其他网站或服务的内容，比如嵌入视频、地图、广告等，无需在页面中直接包含它们的代码。
- 适用于加载外部网页、文档、视频播放器等，不需要跳转页面。
增强用户体验：
- 可以在不刷新整个页面的情况下嵌入外部页面或内容，提升用户体验。比如，嵌入 YouTube 视频或 Google Maps 地图时，不需要跳转到新页面。
沙盒功能（sandbox）：
- 使用 iframe 的 sandbox 属性，可以提供额外的安全限制，例如禁止脚本执行、表单提交等，这对于嵌入不信任的外部内容时特别有用。
跨域资源共享（CORS）：
- iframe 可以从不同域加载内容，但可以通过设置跨域访问策略来控制访问权限。

缺点：

性能问题：
- iframe 会导致页面加载变慢，因为它会额外加载一个新的文档，并且通常会有额外的请求和渲染时间。
- 每个 iframe 实际上会创建一个新的浏览上下文，这会增加浏览器的渲染负担，导致页面的性能下降。
SEO（搜索引擎优化）不友好：
- 嵌入的 iframe 内容对于搜索引擎来说是不可索引的，因此对页面的 SEO 可能有负面影响。
- 搜索引擎无法识别 iframe 中的内容，因此不能提升嵌入内容的页面排名。
跨域问题：
- 如果嵌入的 iframe 来自不同的域，可能会面临跨域问题。尤其是在访问或操作嵌入页面的 DOM 时，会受到浏览器的同源策略的限制。
- 虽然有 postMessage API 和 CORS 策略可以解决跨域问题，但需要额外的配置和编码工作。
安全性问题：
- 不当使用 iframe 可能导致安全漏洞，如 clickjacking 攻击。黑客可以通过透明的 iframe 伪装成按钮，诱使用户执行恶意操作。
- 需要在 iframe 中使用 sandbox 属性来增强安全性，避免来自外部内容的脚本攻击。
响应式问题：
- iframe 的嵌入可能会导致页面不容易适应不同屏幕尺寸，尤其是在嵌入的内容没有进行响应式设计时，可能无法很好地适应移动设备。
JavaScript 和样式的限制：
- 在父页面和 iframe 页面之间直接交互（例如修改 iframe 中的内容或获取 iframe 的状态）时，可能会受到跨域策略的限制。

常见使用场景：

嵌入外部视频：
- 像 YouTube、Vimeo 等第三方视频服务通常使用 iframe 来将视频嵌入到网页中，而不需要加载整个视频页面。
```
<iframe src="https://www.youtube.com/embed/example"></iframe>
```
嵌入外部地图或社交媒体内容：
- 嵌入 Google Maps 或 Facebook 帖子时，使用 iframe 是一种常见做法。
```
<iframe src="https://www.google.com/maps/embed?pb=..."></iframe>
```
第三方广告和内容：
- 许多广告服务通过 iframe 嵌入广告内容到页面中，以便与主页面内容隔离。
文档查看器：
- 嵌入 PDF、Word 或其他文档查看器时，使用 iframe 可以使用户直接查看文档而无需离开当前页面。
```
<iframe src="document.pdf"></iframe>
```
网站内嵌入外部页面：
- 一些网站使用 iframe 嵌入其他网站的内容，例如客户支持、FAQ 页面等。

68. canvas 在标签上设置宽高，与在 style 中设置宽高有什么区别？

在使用 <canvas> 标签时，设置宽度和高度的方式有两种：一种是通过在标签上直接设置 width 和 height 属性，另一种是通过 CSS 的 style 属性设置。它们之间有一些重要的区别。

1. 使用 `width` 和 `height` 属性

作用：直接在 <canvas> 标签上设置 width 和 height 属性，这样设置的是画布的内部绘制区域的尺寸，定义了画布的实际像素大小。
默认值：如果没有设置 width 和 height 属性，则默认值为 300px（宽度）和 150px（高度）。
行为：设置 width 和 height 属性会改变画布的绘制区域的尺寸，而画布内容会被清空。当你修改 width 或 height 时，画布的像素数据会被重置，之前的绘图内容将丢失。
示例：
```
<canvas width="500" height="400"></canvas>
```

2. 使用 `style` 设置宽高

作用：通过 CSS 的 style 属性来设置画布的显示尺寸，即画布在页面中占据的外部显示区域的尺寸。
默认值：没有 width 和 height 属性时，<canvas> 默认是 300px 宽，150px 高，即使通过 style 设置了尺寸，默认的内部绘制区域仍然是 300x150。
行为：使用 style 设置宽高只是改变画布的外观尺寸，而不会改变其绘制区域的实际像素大小。这意味着即使你设置了一个更大的显示尺寸，绘图内容的分辨率仍然基于 width 和 height 属性设定的尺寸。如果 style 的尺寸与 width 和 height 的实际尺寸不同，画布的图像会被缩放或拉伸。
示例：
```
<canvas
	width="500"
	height="400"
	style="width: 1000px; height: 800px;"
></canvas>
```
在这个例子中，画布的实际绘制区域是 500x400 像素，但它在页面上显示为 1000x800 像素，导致绘图内容会被拉伸。

3. 主要区别

属性	`width` 和 `height` 属性	`style` 属性
设置内容区域大小	设置画布的实际绘制区域（像素尺寸），并清空画布内容。	不影响画布的实际绘制区域，只影响外观尺寸。
默认值	默认 300px x 150px	默认没有影响，取决于 `width` 和 `height` 的设置。
修改后的行为	修改 `width` 或 `height` 会清空画布内容。	修改 `style` 会改变显示尺寸，但不会影响绘图区域。
影响图像质量	确定画布的分辨率，影响绘制的图像质量。	不影响图像的分辨率，只改变显示效果，可能导致拉伸。

4. 总结

width 和 height 属性 控制的是画布的实际绘制区域大小，直接影响到图像的分辨率和质量。
style 属性 控制的是画布在页面中的显示尺寸，不会影响到内部绘图区域的像素数据，但可能导致内容的缩放或拉伸。

为了获得更好的画布渲染效果，通常建议同时设置 width 和 height 属性来定义实际绘制区域，而通过 style 来调整画布在页面中的显示效果。

69. 如何禁用 a 标签跳转页面或定位链接?

要禁用 <a> 标签的跳转页面或定位链接，可以通过以下几种方式：

1. 使用 `href="javascript:void(0)"`

在 <a> 标签的 href 属性中使用 javascript:void(0) 可以防止页面跳转。这种方法可以确保点击链接时不会发生任何跳转。

<a href="javascript:void(0)">点击这里</a>

javascript:void(0) 语句会返回 undefined，而不会触发页面跳转。

2. 使用 `#` 作为 `href`

可以在 href 中使用 #，这样页面不会跳转，只会停留在当前页面，然而，如果页面顶部有锚点或其他行为，这可能会导致页面滚动到顶部。因此不太推荐用于禁用链接。

<a href="#">点击这里</a>

3. 使用 JavaScript 阻止默认行为

通过 JavaScript 中的事件处理程序，监听 click 事件，并调用 event.preventDefault() 来阻止默认的跳转行为。这种方法非常常用，且灵活性高，可以在需要时动态控制。

<a href="https://example.com" id="myLink">点击这里</a>

<script>
	document.getElementById('myLink').addEventListener('click', function (event) {
		event.preventDefault(); // 阻止默认行为，即不跳转
		console.log('链接已禁用');
	});
</script>

4. 使用 `pointer-events: none;` (CSS 方法)

通过 CSS 设置 pointer-events: none; 可以禁用 <a> 标签的点击事件。这会导致 <a> 标签完全不响应鼠标点击事件，无法触发任何事件。虽然这不是阻止页面跳转的传统方法，但它可以防止任何点击行为，包括跳转、点击样式变化等。

<a href="https://example.com" style="pointer-events: none;">点击这里</a>

这种方法的缺点是：pointer-events: none; 不仅禁用跳转，还会完全禁用链接的所有交互（包括鼠标悬停样式、点击效果等）。

5. 移除 `href` 属性

如果在某些情况下，不想要 <a> 标签的跳转功能，可以完全移除 href 属性。这样，链接就变成了普通的文本元素，点击时不会发生跳转。

<a>点击这里</a>

总结

最常用和推荐的方式是：

使用 JavaScript（event.preventDefault()）来阻止默认行为，这样可以灵活控制是否禁用链接的跳转。
使用 href="javascript:void(0)" 也是一种常见的方式，用于禁用链接但保持其为可点击状态。

70. 行内元素有哪些？块级元素有哪些？空(void)元素有那些？

1. 行内元素（Inline Elements）

行内元素是不会独占一行的元素，它们与周围的内容在同一行内显示，并且只占据它们所需要的空间。行内元素的特征是，它们不能设置宽度和高度（除非特定属性如 display: inline-block 被应用），并且在布局中不会引起换行。

常见的行内元素：

<a>：超链接
<span>：行内容器
<strong>：加粗文本（语义上表示重要的内容）
<em>：斜体文本（语义上表示强调的内容）
<b>：加粗文本（只是外观上加粗，没有语义）
<i>：斜体文本（只是外观上斜体，没有语义）
<img>：图像
<abbr>：缩写
<code>：代码内容
<sub>：下标
<sup>：上标
<label>：表单标签
<q>：短引用
<time>：时间日期
<mark>：高亮显示的文本
<bdi>：文本方向隔离
<bdo>：文本方向

行内元素的特点：

不会自动换行，多个行内元素会显示在同一行中。
不能设置宽度和高度。
行内元素可以包含文本或者其他行内元素，但不能包含块级元素。

2. 块级元素（Block-level Elements）

块级元素会独占一行，通常用来构建页面的结构。块级元素的特征是它们会从新的一行开始显示，并且可以设置宽度、高度、内外边距等样式。

常见的块级元素：

<div>：常用的容器元素
<p>：段落
<h1> 至 <h6>：标题
<ul>、<ol>：无序列表、有序列表
<li>：列表项
<section>：文档的节
<article>：文章内容
<header>：页面头部
<footer>：页面底部
<main>：页面主体内容
<aside>：侧边栏
<nav>：导航链接
<form>：表单
<table>：表格
<header>、<footer>：页面的头部和尾部内容
<blockquote>：引用
<pre>：预格式化文本

块级元素的特点：

会在页面中独占一行。
可以设置宽度和高度。
常用于页面的布局结构中。

3. 空（Void）元素

空元素是没有结束标签的元素。它们本身是自封闭的，在 HTML 中没有配对的结束标签，这些元素不能包含子元素。空元素通常用来插入一些不可见的内容，如图片、表单控件等。

常见的空元素：

<img>：图像
<br>：换行
<hr>：水平线
<input>：输入框
<link>：链接（如引用外部样式表）
<meta>：元数据（如字符集、viewport 设置等）
<source>：多媒体元素的来源（如 <video> 或 <audio>）
<area>：图像地图区域
<col>：表格的列
<base>：指定网页的基本 URL
<track>：视频或音频的文本轨道
<embed>：嵌入外部资源
<wbr>：建议浏览器在此处换行

空元素的特点：

不能包含任何子元素。
不需要结束标签。
一般在元素名后添加斜杠（如 <img />）来表示自封闭标签（不过在 HTML5 中，斜杠并非必须）。

总结

类型	元素示例	特点
行内元素	`<a>`, `<span>`, `<strong>`, `<img>`, `<em>`	不占一行，可以与其他行内元素并排，不能设置宽度和高度
块级元素	`<div>`, `<p>`, `<h1>`, `<section>`, `<article>`	占一行，通常用于构建页面布局，可以设置宽度和高度
空元素	`<img>`, `<br>`, `<input>`, `<meta>`, `<link>`	没有结束标签，不能包含子元素，通常表示某些自封闭的元素

了解这些元素的特性和使用场景，对于开发页面布局和优化网页结构非常重要。

71. label 标签有什么用？

<label> 标签用于为表单元素提供标签，它可以与 <input>、<textarea>、<select> 等表单元素结合使用，以增强可访问性和用户体验。<label> 标签的主要作用是当用户点击标签内容时，能够聚焦或选中相关的表单控件，从而提高表单的可用性和可操作性。

`<label>` 标签的作用：

增强可访问性： <label> 标签帮助屏幕阅读器等辅助工具识别表单元素的描述，使得视觉上不可见的元素也能被正确识别和操作。
改善用户体验： 通过为表单控件提供一个可点击的标签，用户点击标签时，浏览器会自动将焦点设置到相应的输入框或其他表单元素上。这对于增强表单的可用性非常重要，尤其是在移动端或触摸设备上。
关联表单控件： <label> 标签的 for 属性与对应的表单控件的 id 属性相匹配，可以明确表单控件和标签的关联。这样，即使标签文字和表单控件分开了，点击标签也能正确地聚焦到相应的表单元素。

`<label>` 标签的语法：

<label for="username">用户名:</label>
<input type="text" id="username" name="username" />

在上面的例子中：

<label> 标签的 for 属性值为 username，与 <input> 元素的 id 属性值相匹配。当用户点击 "用户名" 文字时，输入框会自动获得焦点。

使用 `<label>` 标签的好处：

点击标签触发表单元素： 用户点击 <label> 内容时，会自动聚焦到与其关联的表单元素，这样提高了可用性。
可访问性： 屏幕阅读器可以使用 <label> 标签提供的文字来描述表单元素，从而为视觉障碍用户提供更好的交互体验。
表单元素可以更灵活地排列： <label> 标签允许表单元素在视觉上分开，但仍然保持关联。

`<label>` 标签的使用注意事项：

没有 for 属性时： 如果不使用 for 属性，<label> 标签仍然可以包裹表单控件，但这时点击标签不会触发输入框聚焦。这个方法通常用于表单控件和标签在视觉上的紧密布局。
```
<label>用户名: <input type="text" name="username" /></label>
```
这种方式同样有效，但是点击整个 label 内容（包括标签和表单控件）时，输入框会获得焦点。

总结：

<label> 标签是用来为表单控件提供描述的，提升了可访问性、可用性，并且帮助用户更加高效地与表单进行交互。在开发中，应当合理使用 <label> 标签，确保每个表单元素都有清晰的标签描述。

72. 什么是 HTML 语义化？

HTML 语义化 是指使用符合其内容和功能的 HTML 标签来构建网页结构，以便增强网页的可读性、可访问性和 SEO（搜索引擎优化）效果。简而言之，HTML 语义化就是使用能够明确表达内容含义的标签，而不是依赖于 <div> 或 <span> 这类无语义的元素。

HTML 语义化的核心思想：

使用更具描述性的 HTML 标签来准确表达页面中每个部分的功能和意义。这样做不仅有助于开发者理解代码结构，也能使搜索引擎和辅助技术（如屏幕阅读器）更好地解析和呈现网页内容。

语义化的好处：

可访问性： 使用语义化标签有助于屏幕阅读器等辅助技术更好地解读页面内容，提供更好的可访问性。例如，<header>、<footer>、<article> 等标签为屏幕阅读器提供了更清晰的结构，帮助视障人士更好地理解页面。
SEO 优化： 搜索引擎能够通过语义化标签理解网页内容，从而提高页面的搜索排名。与使用非语义化标签（如 <div>）相比，搜索引擎更青睐清晰、有意义的标签结构。
代码可维护性和可读性： 语义化的 HTML 标签使得代码更具可读性。其他开发者或自己在维护时能更容易理解网页结构和内容，从而提高开发效率。
增强跨设备适配： 语义化标签对于多设备兼容性、响应式设计等也有帮助，能够提升用户体验。

常见的语义化标签：

以下是一些常见的 HTML 语义化标签及其功能：

<header>：定义页面或章节的头部内容，通常包含网站的 logo、导航条、标题等信息。
```
<header>
	<h1>网站标题</h1>
	<nav>...</nav>
</header>
```
<article>：表示独立的内容块，通常用于文章、新闻、博客等。
```
<article>
	<h2>文章标题</h2>
	<p>文章内容...</p>
</article>
```
<section>：表示文档中的一个区域，用来将页面内容划分为不同的部分。
```
<section>
	<h2>关于我们</h2>
	<p>内容...</p>
</section>
```

<nav>：定义页面的导航区域，用来包装导航链接。

<nav>
	<ul>
		<li><a href="#home">首页</a></li>
		<li><a href="#services">服务</a></li>
	</ul>
</nav>

<aside>：用于表示与页面主要内容略微相关的部分，通常是侧边栏、引用或广告等。

<aside>
	<h2>相关链接</h2>
	<ul>
		<li><a href="#">链接1</a></li>
		<li><a href="#">链接2</a></li>
	</ul>
</aside>

<main>：定义页面的主内容区域，通常包含页面的核心内容。

<main>
	<h1>欢迎来到我们的网站</h1>
	<p>这里是网站的主要内容...</p>
</main>

<figure> 和 <figcaption>：用于表示一组媒体元素（如图像、图表等）以及它们的说明。

<figure>
	<img src="image.jpg" alt="图片描述" />
	<figcaption>图片说明</figcaption>
</figure>

与非语义化标签的对比：

语义化标签	描述	非语义化标签
`<header>`	页面或章节的头部	`<div>`
`<footer>`	页面或章节的底部	`<div>`
`<article>`	独立的内容块	`<div>`
`<section>`	页面区域/内容部分	`<div>`
`<nav>`	导航链接区域	`<div>`
`<aside>`	辅助内容区（如侧边栏、广告）	`<div>`
`<main>`	主内容区	`<div>`
`<figure>`	媒体元素及其说明	`<div>`

总结：

HTML 语义化是现代网页开发的一个重要实践，能显著提升网页的可访问性、可维护性和搜索引擎优化。通过使用合适的语义化标签，可以使网页结构更加清晰，用户体验得到提升，同时让搜索引擎和辅助技术更容易理解网页内容。