HTML面试题

1. DOCTYPE 的作用是什么？

概述

<!DOCTYPE> 声明位于 HTML 文档的第一行，出现在 <html> 标签之前，用于告知浏览器使用哪种文档标准来解析该文档。DOCTYPE 的存在和格式直接影响浏览器的解析模式。

历史背景

在早期的浏览器发展过程中，不同浏览器对 HTML 标准的实现存在差异。为了兼容旧版网页，浏览器引入了不同的解析模式。IE5.5 引入了文档模式的概念，通过使用 DOCTYPE 声明来切换不同的解析模式。

解析模式

浏览器根据 DOCTYPE 声明选择不同的解析模式：

  1. 标准模式（Standards Mode）：浏览器按照 W3C 标准解析和渲染页面。
  2. 兼容模式（Quirks Mode）：浏览器采用旧版本的渲染方式，模拟早期浏览器的行为，通常用于处理老旧网站。
  3. 几乎标准模式（Almost Standards Mode）：与标准模式基本一致，但处理一些表格相关的布局问题时，行为类似于兼容模式。

DOCTYPE 的格式

正确的 DOCTYPE 声明格式示例如下：

  • HTML5： 

    1
    <!DOCTYPE html>

  • HTML 4.01 Strict： 

    1
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

  • XHTML 1.0 Strict： 

    1
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

DOCTYPE 的影响

如果 DOCTYPE 声明不存在或格式不正确，浏览器将以兼容模式呈现文档。这会导致浏览器使用非标准的解析规则，可能会出现意想不到的布局和显示问题。因此，使用正确的 DOCTYPE 声明是确保网页在现代浏览器中按标准模式渲染的关键。

实例

以下是一个包含 DOCTYPE 声明的 HTML5 文档示例：

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello, world!</h1>
</body>
</html>

在这个示例中，<!DOCTYPE html> 声明确保浏览器按照 HTML5 标准模式解析和渲染文档。

  • DOCTYPE 声明用于指定浏览器应使用的文档标准。
  • 它影响浏览器的解析模式：标准模式、兼容模式和几乎标准模式。
  • 正确的 DOCTYPE 声明是确保网页按预期显示和渲染的关键。

2. 标准模式与兼容模式各有什么区别？

标准模式（Standards Mode）

在标准模式下，浏览器按照 W3C 和其他标准组织定义的最新网页标准来解析和渲染页面。标准模式的渲染方式和 JavaScript 引擎的解析方式都是以该浏览器支持的最高标准运行。这意味着在标准模式下，网页会按照最严格和最新的标准进行处理。

兼容模式（Quirks Mode）

兼容模式（也称为怪异模式）是为了向后兼容旧版网页而存在的。在兼容模式中，浏览器会模拟老式浏览器的行为，以防止旧站点在新浏览器中无法正常工作。兼容模式通常会导致页面以宽松的、非标准的方式显示，可能会忽略或部分忽略一些最新的标准。

标准模式与兼容模式的具体区别

  1. 盒模型（Box Model）：
    • 标准模式：按照 W3C 规范的盒模型进行计算，即元素的宽度和高度不包含内边距（padding）和边框（border）。
    • 兼容模式：采用 IE5 盒模型，元素的宽度和高度包括内边距和边框。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    /* 标准模式 */
    .box {
        width: 100px; /* 实际内容宽度 */
        padding: 10px; /* 内边距 */
        border: 5px solid; /* 边框 */
    }

    /* 兼容模式 */
    .box {
        width: 100px; /* 实际总宽度，包括内容、内边距和边框 */
        padding: 10px; /* 内边距 */
        border: 5px solid; /* 边框 */
    }
  2. CSS 样式解析：
    • 标准模式：严格遵循 CSS 规范解析和应用样式。
    • 兼容模式：可能会有一些非标准的行为，以适应旧版浏览器的样式处理方式。
  3. JavaScript 解析：
    • 标准模式：按照最新的 ECMAScript 标准执行 JavaScript 代码。
    • 兼容模式：可能会保留一些旧版浏览器中的非标准特性和行为。
  4. 布局和渲染：
    • 标准模式：浏览器会按照标准的 HTML 和 CSS 规范进行布局和渲染，确保页面在不同浏览器中的显示一致。
    • 兼容模式：布局和渲染方式会尽可能模拟旧版浏览器的行为，可能会导致页面在不同浏览器中的显示不一致。
  5. DOM 方法和属性：
    • 标准模式：支持和实现最新的 DOM 方法和属性。
    • 兼容模式：可能会包含一些非标准的 DOM 方法和属性，以支持旧的网页和脚本。

切换模式的方式

<!DOCTYPE> 声明可以影响浏览器的解析模式：

  • 标准模式：通过正确的 <!DOCTYPE> 声明激活。 

    1
    <!DOCTYPE html> <!-- HTML5 标准模式 -->

  • 兼容模式：缺少或错误的 <!DOCTYPE> 声明会触发兼容模式。 

    1
    2
    <!-- 没有 DOCTYPE 声明，会触发兼容模式 -->
    <html>

实例对比

以下示例展示了标准模式和兼容模式下盒模型的差异：

标准模式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
    <style>
        .box {
            width: 100px;
            padding: 10px;
            border: 5px solid;
        }
    </style>
</head>
<body>
    <div class="box">标准模式</div>
</body>
</html>

兼容模式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
<head>
    <style>
        .box {
            width: 100px;
            padding: 10px;
            border: 5px solid;
        }
    </style>
</head>
<body>
    <div class="box">兼容模式</div>
</body>
</html>

在标准模式下，盒子的实际内容宽度是 100px，整体宽度为 130px（内容 100px + 内边距 10px * 2 + 边框 5px * 2）。在兼容模式下，盒子的整体宽度为 100px（包含内容、内边距和边框）。

总结

  • 标准模式：严格按照最新的 HTML 和 CSS 标准解析和渲染，确保一致性和规范性。
  • 兼容模式：为向后兼容旧版网页，采用宽松的非标准解析和渲染方式，模拟老式浏览器的行为。
  • 使用正确的 <!DOCTYPE> 声明可以确保浏览器在标准模式下解析网页。

3. HTML5 为什么只需要写 <!DOCTYPE HTML>，而不需要引入 DTD？

背景知识

  • SGML（Standard Generalized Markup Language）：标准通用标记语言，是一种用于定义标记语言的标准语言。HTML 早期版本（如 HTML 4.01）是基于 SGML 的。
  • DTD（Document Type Definition）：文档类型定义，是 SGML 中的一部分，用于定义文档的结构和合法元素及属性。HTML 4.01 使用 DTD 来定义文档类型，确保浏览器正确解析和渲染文档。

HTML4.01 与 DTD

HTML4.01 基于 SGML，需要引入 DTD 来告知浏览器文档所使用的文档类型。不同的 DTD 声明使浏览器能够区分标准模式和兼容模式：

  • HTML4.01 Strict： 

    1
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

  • HTML4.01 Transitional： 

    1
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

  • HTML4.01 Frameset： 

    1
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

HTML5 的变化

HTML5 不再基于 SGML，因此不需要对 DTD 进行引用。HTML5 的设计目标之一是简化文档的定义和解析方式。为了实现这一目标，HTML5 使用了一个简化的 <!DOCTYPE> 声明：

1
<!DOCTYPE html>

原因和优势

  1. 简化文档定义：
    • HTML5 通过一个简单的 <!DOCTYPE html> 声明简化了文档的定义，无需复杂的 DTD 引用。
  2. 独立于 SGML：
    • HTML5 不基于 SGML，因此不需要 DTD 来定义文档结构。HTML5 的语法和结构由 HTML 规范直接定义。
  3. 规范浏览器行为：
    • 尽管 HTML5 不需要 DTD，但 <!DOCTYPE html> 声明仍然用于规范浏览器的行为，确保浏览器以标准模式解析和渲染文档。
  4. 向后兼容：
    • 简化的 <!DOCTYPE> 声明确保向后兼容，旧版浏览器也能正确解析和渲染 HTML5 文档。
  5. 统一和标准化：
    • 通过一个统一的 <!DOCTYPE> 声明，HTML5 消除了不同 DTD 带来的复杂性，促进了网页的标准化和一致性。

实例对比

HTML4.01 Strict 示例：

1
2
3
4
5
6
7
8
9
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>HTML4.01 Example</title>
</head>
<body>
    <h1>Hello, world!</h1>
</body>
</html>

HTML5 示例：

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 Example</title>
</head>
<body>
    <h1>Hello, world!</h1>
</body>
</html>

在 HTML5 示例中，仅使用了一个简单的 <!DOCTYPE html> 声明，浏览器即可按照标准模式解析和渲染文档。

总结

  • HTML5 不基于 SGML，不需要引用 DTD。
  • HTML4.01 基于 SGML，需要 DTD 来定义文档结构和类型。
  • HTML5 使用简化的 <!DOCTYPE html> 声明，规范浏览器行为并确保文档以标准模式解析和渲染。
  • 这种简化设计提高了网页开发的效率和一致性，促进了网页的标准化。

4. SGML 、 HTML 、XML 和 XHTML 的区别？

1. SGML（Standard Generalized Markup Language）

  • 概述：标准通用标记语言，是一种定义电子文档结构和描述其内容的国际标准语言。
  • 特点：
    • 元语言：SGML 是一种元语言，用于定义其他标记语言（如 HTML 和 XML）。
    • 灵活性：可以定义文档的结构、标签、属性等，具有极高的灵活性。
    • 标准化：是所有电子文档标记语言的起源，广泛应用于文档管理和出版领域。

2. HTML（HyperText Markup Language）

  • 概述：超文本标记语言，用于规定如何显示网页内容。
  • 特点：
    • 固定标签：HTML 的标签是固定的，数量有限。
    • 结构和表现：HTML 主要用于描述网页的结构和内容展示。
    • 容易使用：设计简单，适合快速开发网页。
  • 版本：
    • HTML 4.01：基于 SGML，需要 DTD 定义。
    • HTML5：不基于 SGML，不需要 DTD，更加简化和现代化。

3. XML（Extensible Markup Language）

  • 概述：可扩展标记语言，是一种用于表示结构化信息的通用标记语言。
  • 特点：
    • 可扩展性：XML 的标签可以自定义，数量无限。
    • 数据表示：主要用于数据存储和传输，不关注表现。
    • 严格的语法：强调结构的严格性，标签必须正确嵌套和闭合。
  • 用途：
    • 数据交换：广泛用于不同系统之间的数据交换。
    • 配置文件：很多软件和应用程序使用 XML 作为配置文件格式。

4. XHTML（Extensible Hypertext Markup Language）

  • 概述：可扩展超文本标记语言，是 HTML 和 XML 的结合体。
  • 特点：
    • 严格性：遵循 XML 的语法规则，比 HTML 更严格。
    • 标签使用：标签名称必须小写，所有标签必须闭合，属性值必须用引号括起来。
    • 向前兼容：与 HTML 基本兼容，但要求更严格的语法。
  • 用途：
    • 网页开发：基本上所有网页都可以使用 XHTML，其实质与 HTML 类似，但更严格。

详细比较

特性 SGML HTML XML XHTML
全称 Standard Generalized Markup Language HyperText Markup Language Extensible Markup Language Extensible Hypertext Markup Language
类型 元语言 标记语言 标记语言 标记语言
标签定义 用户自定义 固定 用户自定义 固定
灵活性 高 低 高 低
语法规则 自定义 相对宽松 严格 严格
闭合标签 可选 可选 必须 必须
大小写 不敏感 不敏感 敏感 敏感
使用领域 文档管理、出版 网页设计 数据存储、数据传输 网页设计
解析标准 需要 DTD 定义 基于 SGML（HTML 4.01） 独立于 DTD 基于 XML

示例

HTML 示例

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
    <title>HTML Example</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is an HTML example.</p>
</body>
</html>

XML 示例

1
2
3
4
5
6
7
<?xml version="1.0" encoding="UTF-8"?>
<note>
    <to>Tove</to>
    <from>Jani</from>
    <heading>Reminder</heading>
    <body>Don't forget me this weekend!</body>
</note>

XHTML 示例

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <meta charset="UTF-8" />
    <title>XHTML Example</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is an XHTML example.</p>
</body>
</html>

总结

  • SGML 是一种元语言，用于定义其他标记语言，具有极高的灵活性。
  • HTML 是一种用于网页展示的标记语言，标签固定，语法相对宽松。
  • XML 是一种可扩展的标记语言，主要用于数据存储和传输，具有严格的语法规则。
  • XHTML 是 HTML 和 XML 的结合体，具有 HTML 的功能和 XML 的严格语法规则，用于网页设计。

5. DTD 介绍

DTD（Document Type Definition）介绍

什么是 DTD？

DTD（Document Type Definition，文档类型定义）是一组机器可读的规则，用于定义 XML 或 HTML 文档中所有允许的元素及其属性和层次关系。在解析网页时，浏览器会使用这些规则检查页面的有效性并采取相应的措施。

主要功能

  1. 定义文档结构：
    • DTD 描述了文档的结构，包括哪些元素可以出现，它们的属性和层次关系等。
  2. 验证文档：
    • 通过 DTD，可以验证文档的结构是否符合预定义的规则，确保文档的正确性和一致性。
  3. 影响渲染模式：
    • DTD 的声明还会影响浏览器的渲染模式（工作模式），决定浏览器以何种方式解析和显示页面内容。

DTD 的类型

  1. 内部 DTD：
    • DTD 直接嵌入在文档内部。 
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      <!DOCTYPE html [
          <!ELEMENT note (to,from,heading,body)>
          <!ELEMENT to (#PCDATA)>
          <!ELEMENT from (#PCDATA)>
          <!ELEMENT heading (#PCDATA)>
          <!ELEMENT body (#PCDATA)>
      ]>
      <note>
          <to>Tove</to>
          <from>Jani</from>
          <heading>Reminder</heading>
          <body>Don't forget me this weekend!</body>
      </note>
  2. 外部 DTD：
    • DTD 存在于一个单独的文件中，通过引用来使用。 
      1
      2
      3
      4
      5
      6
      7
      <!DOCTYPE note SYSTEM "note.dtd">
      <note>
          <to>Tove</to>
          <from>Jani</from>
          <heading>Reminder</heading>
          <body>Don't forget me this weekend!</body>
      </note>
    note.dtd 文件内容： 
    1
    2
    3
    4
    5
    <!ELEMENT note (to,from,heading,body)>
    <!ELEMENT to (#PCDATA)>
    <!ELEMENT from (#PCDATA)>
    <!ELEMENT heading (#PCDATA)>
    <!ELEMENT body (#PCDATA)>

DTD 对 HTML 的影响

DTD 主要用于 HTML 4.01 和早期版本，以及 XHTML。以下是常见的 DTD 声明：

  1. HTML 4.01 Strict：
    • 仅包含严格的 HTML 元素和属性，不允许使用展示性或过时的标签。 
      1
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. HTML 4.01 Transitional：
    • 允许使用展示性和过时的标签，兼容性更好。 
      1
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  3. HTML 4.01 Frameset：
    • 专为使用框架的网页设计。 
      1
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

渲染模式

DTD 声明会影响浏览器的渲染模式。浏览器主要有以下两种渲染模式：

  1. 标准模式（Standards Mode）：
    • 浏览器按照最新的 HTML 和 CSS 标准渲染页面。标准模式提供了更一致和准确的呈现。
  2. 兼容模式（Quirks Mode）：
    • 浏览器以宽松的向后兼容的方式显示页面，模拟老式浏览器的行为，以防止旧站点无法工作。

DTD 的声明决定了浏览器是以标准模式还是兼容模式来渲染页面。没有或不正确的 DTD 声明会导致浏览器以兼容模式渲染页面。

实例对比

HTML 4.01 Strict 示例：

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>HTML 4.01 Strict Example</title>
</head>
<body>
    <h1>Hello, world!</h1>
    <p>This is an example of HTML 4.01 Strict.</p>
</body>
</html>

HTML 4.01 Transitional 示例：

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>HTML 4.01 Transitional Example</title>
</head>
<body>
    <h1>Hello, world!</h1>
    <p>This is an example of HTML 4.01 Transitional.</p>
    <center>This text is centered using a deprecated tag.</center>
</body>
</html>

总结

  • DTD（文档类型定义）是一组机器可读的规则，用于定义 XML 或 HTML 文档中所有允许的元素及其属性和层次关系。
  • 功能：定义文档结构、验证文档有效性、影响浏览器渲染模式。
  • 类型：内部 DTD 和外部 DTD。
  • HTML 影响：不同 DTD 声明决定浏览器以标准模式或兼容模式渲染页面。
  • 实例：HTML 4.01 Strict、Transitional 和 Frameset 声明示例。

6. 行内元素定义

什么是行内元素？

在 HTML4 中，元素被分为两大类：行内元素（inline elements）和块级元素（block elements）。行内元素只占据它对应标签的边框所包含的空间，而不会独占一行。行内元素主要用于文本级的标记，它们不会在其前后产生换行。

行内元素的特点

  1. 不会独占一行：
    • 行内元素不会在其前后产生换行，而是与其他行内元素和文本内容在同一行内显示。
  2. 只占据必要的空间：
    • 行内元素只占据其内容所需要的宽度，不会像块级元素那样扩展到父元素的全部宽度。
  3. 可以包含文本和其他行内元素：
    • 行内元素可以包含文本和其他行内元素，但不能包含块级元素。
  4. 影响布局的属性有限：
    • 行内元素的 width 和 height 属性通常无效。它们的尺寸是由内容决定的。
    • 行内元素的 margin 和 padding 属性仅在左右方向上有效，而在上下方向上无效或表现异常。

常见的行内元素

以下是 HTML 中常见的行内元素及其用途：

  1. <a>：

    • 超链接元素，用于定义链接到其他文档或资源。 
      1
      <a href="https://www.example.com">Example Link</a>

  2. <b>：

    • 粗体文本元素，使文本加粗。 
      1
      <b>Bold Text</b>

  3. <span>：

    • 通用行内容器，用于对部分文本应用样式或脚本。 
      1
      <span class="highlight">Highlighted Text</span>

  4. <img>：

    • 图像元素，用于嵌入图像。 
      1
      <img src="image.jpg" alt="Description">

  5. <strong>：

    • 强调文本元素，通常表现为加粗，表示重要性。 
      1
      <strong>Important Text</strong>

  6. <sub>：

    • 下标文本元素，使文本下移。 
      1
      H<sub>2</sub>O

  7. <sup>：

    • 上标文本元素，使文本上移。 
      1
      E = mc<sup>2</sup>

  8. <button>：

    • 按钮元素，用于创建可点击的按钮。 
      1
      <button type="button">Click Me</button>

  9. <input>：

    • 输入元素，用于创建各种类型的输入控件，如文本框、单选按钮、复选框等。 
      1
      <input type="text" placeholder="Enter your name">

  10. <label>：

    • 标签元素，用于绑定表单控件，提供控件的说明。 
      1
      2
      <label for="username">Username:</label>
      <input type="text" id="username" name="username">

  11. <select>：

    • 下拉列表元素，用于创建一个可供选择的列表。 
      1
      2
      3
      4
      5
      <label for="options">Choose an option:</label>
      <select id="options">
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
      </select>

  12. <textarea>：

    • 文本区域元素，用于创建多行文本输入区域。 
      1
      <textarea rows="4" cols="50">Enter text here...</textarea>

行内元素的示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inline Elements Example</title>
    <style>
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <p>This is a paragraph with <a href="https://www.example.com">a link</a> and <strong>important text</strong>.</p>
    <p>Here is an image: <img src="image.jpg" alt="Example Image" width="100"></p>
    <p><span class="highlight">Highlighted text</span> and <sub>subscript</sub> and <sup>superscript</sup> text.</p>
    <p>
        <label for="username">Username:</label>
        <input type="text" id="username" name="username">
    </p>
    <p>
        <button type="button">Click Me</button>
    </p>
    <p>
        <label for="options">Choose an option:</label>
        <select id="options">
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
        </select>
    </p>
    <p>
        <textarea rows="4" cols="50">Enter text here...</textarea>
    </p>
</body>
</html>

总结

  • 行内元素：只占据其内容所需的空间，不会独占一行。常用于文本级标记。
  • 常见行内元素：包括 <a>, <b>, <span>, <img>, <strong>, <sub>, <sup>, <button>, <input>, <label>, <select>, <textarea> 等。
  • 特点：不会在前后产生换行，只占据必要空间，可以包含文本和其他行内元素。

7. 块级元素定义

什么是块级元素？

块级元素是 HTML 中的一类元素，其特点是占据其父元素（容器）的整个宽度，形成一个“块”级的区域。这些元素通常用于构建网页的结构和布局。块级元素会在其前后自动换行，将其他内容推到下一行。

块级元素的特点

  1. 独占一行：
    • 块级元素会在其前后产生换行，即使它们的内容不足以填满一整行，也会占据整行的宽度。
  2. 宽度和高度可以设置：
    • 块级元素的 width 和 height 属性有效，通常默认宽度为父元素的 100%。
  3. 可以包含块级元素和行内元素：
    • 块级元素可以包含其他块级元素和行内元素。
  4. 影响布局：
    • 块级元素常用于页面布局，如容器、段落和列表等。

常见的块级元素

以下是一些常见的块级元素及其用途：

  1. <div>：
    • 通用容器元素，用于分组和布局页面内容。 
      1
      2
      3
      <div>
          <p>This is a paragraph inside a div.</p>
      </div>
  2. <ul> 和 <ol>：
    • 无序列表（<ul>）和有序列表（<ol>）元素，用于显示列表项。 
      1
      2
      3
      4
      5
      6
      7
      8
      9
      <ul>
          <li>Item 1</li>
          <li>Item 2</li>
      </ul>

      <ol>
          <li>First item</li>
          <li>Second item</li>
      </ol>
  3. <li>：
    • 列表项元素，用于 ul 和 ol 列表中。 
      1
      2
      3
      4
      <ul>
          <li>Item 1</li>
          <li>Item 2</li>
      </ul>
  4. <dl>：
    • 定义列表元素，用于描述术语和定义。 
      1
      2
      3
      4
      <dl>
          <dt>Term</dt>
          <dd>Description</dd>
      </dl>
  5. <dt> 和 <dd>：
    • 定义术语（<dt>）和定义描述（<dd>）元素，用于 dl 列表中。 
      1
      2
      3
      4
      <dl>
          <dt>HTML</dt>
          <dd>HyperText Markup Language</dd>
      </dl>
  6. <h1> 到 <h6>：
    • 标题元素，用于定义文档的标题级别。<h1> 是最高级别标题，<h6> 是最低级别标题。 
      1
      2
      3
      <h1>Main Title</h1>
      <h2>Sub Title</h2>
      <h3>Sub Sub Title</h3>
  7. <p>：
    • 段落元素，用于定义文本段落。 
      1
      <p>This is a paragraph of text.</p>

示例：块级元素的使用

以下是一个包含各种块级元素的示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Block Elements Example</title>
    <style>
        div {
            border: 1px solid black;
            padding: 10px;
            margin-bottom: 10px;
        }
        ul {
            list-style-type: square;
        }
        dl {
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <h1>Block Elements Example</h1>

    <div>
        <p>This is a paragraph inside a div.</p>
        <p>Another paragraph inside the same div.</p>
    </div>

    <ul>
        <li>Unordered list item 1</li>
        <li>Unordered list item 2</li>
    </ul>

    <ol>
        <li>Ordered list item 1</li>
        <li>Ordered list item 2</li>
    </ol>

    <dl>
        <dt>HTML</dt>
        <dd>HyperText Markup Language</dd>
        <dt>CSS</dt>
        <dd>Cascading Style Sheets</dd>
    </dl>

    <div>
        <h2>Sub Title</h2>
        <p>This is another paragraph inside a div.</p>
    </div>
</body>
</html>

总结

  • 块级元素：占据其父元素的整个宽度，形成一个“块”，在其前后产生换行。
  • 常见块级元素：包括 <div>, <ul>, <ol>, <li>, <dl>, <dt>, <dd>, <h1> 到 <h6>, <p> 等。
  • 特点：可以包含其他块级元素和行内元素，width 和 height 属性有效，用于页面的结构和布局。

8. 行内元素与块级元素的区别？

在 HTML 中，元素通常被分为两大类：行内元素（inline elements）和块级元素（block elements）。这两类元素在格式、内容和属性上有显著的不同。下面详细介绍它们的区别：

1. 格式（布局和换行）

  • 行内元素：

    • 不会独占一行：行内元素不会在前后产生换行。它们与其他行内元素和文本内容在同一行内显示。
    • 在同一行内流动：多个行内元素会在同一行内并排显示，直到空间不足。
    1
    2
    3
    <p>
        This is <a href="#">a link</a> and <strong>important text</strong>.
    </p>

    在这个例子中，<a> 和 <strong> 都是行内元素，它们在 <p> 标签内不会引起换行。

  • 块级元素：

    • 会独占一行：块级元素在其前后产生换行。每个块级元素都会在新的一行开始。
    • 扩展到父容器的宽度：块级元素默认宽度为其父容器的宽度（可以通过 width 属性设置具体宽度）。
    1
    2
    3
    4
    <div>
        <p>This is a paragraph inside a div.</p>
        <p>Another paragraph inside the same div.</p>
    </div>

    在这个例子中，<div> 和 <p> 都是块级元素，它们在页面上会分别占据新的一行。

2. 内容（包含的元素）

  • 行内元素：

    • 只能包含文本和其他行内元素：行内元素通常只包含文本内容和其他行内元素。不能包含块级元素。
    1
    <span>This is <em>italic</em> text.</span>

    在这个例子中，<span> 可以包含其他行内元素如 <em> 和文本。

  • 块级元素：

    • 可以包含行内元素和块级元素：块级元素可以包含其他块级元素和行内元素。用于创建页面的结构和布局。
    1
    2
    3
    4
    5
    6
    7
    8
    <div>
        <h1>Title</h1>
        <p>This is a paragraph.</p>
        <ul>
            <li>List item 1</li>
            <li>List item 2</li>
        </ul>
    </div>

    在这个例子中，<div> 包含了标题 (<h1>)、段落 (<p>) 和列表 (<ul>)，展示了块级元素可以容纳各种内容。

3. 属性（CSS盒模型属性）

  • 行内元素：
    • width 和 height 属性无效：行内元素的宽度和高度通常由其内容决定。width 和 height 属性设置无效。
    1
    2
    3
    4
    span {
        width: 100px; /* 无效 */
        height: 20px; /* 无效 */
    }
    • margin 和 padding 的上下属性无效：行内元素的上下 margin 和 padding 不会影响其他元素或改变布局，只能左右方向有效。
    1
    2
    3
    4
    5
    6
    span {
        margin-top: 10px; /* 无效 */
        margin-bottom: 10px; /* 无效 */
        padding-top: 10px; /* 无效 */
        padding-bottom: 10px; /* 无效 */
    }
  • 块级元素：
    • width 和 height 属性有效：块级元素的宽度和高度可以通过 width 和 height 属性设置。
    1
    2
    3
    4
    div {
        width: 200px; /* 有效 */
        height: 100px; /* 有效 */
    }
    • margin 和 padding 的上下属性有效：块级元素的上下 margin 和 padding 会影响布局，并且可以用于调整元素间的距离。
    1
    2
    3
    4
    5
    6
    div {
        margin-top: 20px; /* 有效 */
        margin-bottom: 20px; /* 有效 */
        padding-top: 20px; /* 有效 */
        padding-bottom: 20px; /* 有效 */
    }

总结

  • 行内元素：
    • 不会独占一行，在同一行内流动。
    • 只能包含文本和其他行内元素，不能包含块级元素。
    • width 和 height 属性无效，上下 margin 和 padding 无效。
  • 块级元素：
    • 会独占一行，扩展到父容器的宽度。
    • 可以包含行内元素和块级元素。
    • width 和 height 属性有效，上下 margin 和 padding 有效，影响布局。

9. HTML5 元素的分类

在 HTML4 中，元素被分为两大类：inline（内联元素）和 block（块级元素）。但是随着网页设计和开发的需求不断变化，这种简单的分类方式已经不再适用了。HTML5 引入了更细致的分类方法，将元素分为以下七类：

  1. Metadata 元数据
  2. Flow 流内容
  3. Sectioning 分区内容
  4. Heading 标题内容
  5. Phrasing 短语内容
  6. Embedded 嵌入内容
  7. Interactive 交互内容

1. Metadata 元数据

元数据元素提供关于文档本身的信息。这些元素一般出现在文档的 <head> 部分，用于定义页面的设置和配置。

  • <base>
  • <link>
  • <meta>
  • <noscript>
  • <script>
  • <style>
  • <title>

2. Flow 流内容

流内容包括块级内容和内联内容，是页面内容的主要组成部分。大部分 HTML 元素都属于流内容。

  • 块级内容：<div>, <p>, <ul>, <ol>, <li>, <table>, <header>, <footer>, <section>, <article>, <nav>, <aside>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
  • 内联内容：<span>, <a>, <strong>, <em>, <img>, <br>, <code>

3. Sectioning 分区内容

分区内容定义文档的各个部分，使文档具有更好的结构和可读性。

  • <section>
  • <article>
  • <nav>
  • <aside>

这些元素可以包含其他流内容，形成嵌套的层级结构。

4. Heading 标题内容

标题内容用于定义各个部分的标题，帮助用户和搜索引擎理解文档结构。

  • <h1>
  • <h2>
  • <h3>
  • <h4>
  • <h5>
  • <h6>

5. Phrasing 短语内容

短语内容主要用于标记段落中的文本和内联内容。它们通常在块级元素内使用。

  • <a>
  • <abbr>
  • <b>
  • <cite>
  • <code>
  • <em>
  • <i>
  • <img>
  • <small>
  • <span>
  • <strong>
  • <sub>
  • <sup>
  • <time>

6. Embedded 嵌入内容

嵌入内容用于在文档中嵌入其他类型的内容，如多媒体、插件等。

  • <audio>
  • <canvas>
  • <embed>
  • <iframe>
  • <img>
  • <object>
  • <video>
  • <picture>
  • <source>

7. Interactive 交互内容

交互内容用于定义用户可以与之交互的元素，如表单控件、链接等。

  • <a>
  • <button>
  • <details>
  • <input>
  • <label>
  • <select>
  • <textarea>
  • <summary>
  • <menu>

10. 空元素定义

空元素是指在 HTML 中没有内容的标签，这些标签在开始标签中关闭，不需要一个结束标签。它们的作用是通过属性来定义其功能或行为，而不包含任何子内容。

空元素的特征

  • 没有内容: 空元素不包含任何子内容或文本。
  • 自封闭: 这些标签在开始标签中自我关闭，不需要独立的结束标签。
  • 使用属性: 空元素通常通过属性来配置其行为或外观。

常见的空元素及其用途

  1. <br>: 行内换行符
    • 用于插入一个换行符，通常用于文本中需要强制换行的场景。
    • 示例: 
      1
      <p>This is a line of text.<br>This is a new line of text.</p>
  2. <hr>: 水平线
    • 用于插入一个水平分隔线，通常用于视觉上的分隔内容。
    • 示例: 
      1
      2
      3
      <hr>
      <p>Some content above the horizontal line.</p>
      <p>Some content below the horizontal line.</p>
  3. <img>: 图像
    • 用于插入图像。常用属性包括 src（图像来源）、alt（替代文本）、width 和 height（图像尺寸）。
    • 示例: 
      1
      <img src="image.jpg" alt="Description of image" width="300" height="200">
  4. <input>: 表单控件
    • 用于创建各种类型的输入控件，如文本框、复选框、单选按钮等。通过 type 属性指定输入控件的类型。
    • 示例: 
      1
      2
      <input type="text" name="username" placeholder="Enter your username">
      <input type="submit" value="Submit">
  5. <link>: 外部资源链接
    • 用于定义当前文档与外部资源之间的关系，常用于引入外部样式表或图标。常用属性包括 rel（关系类型）和 href（资源 URL）。
    • 示例: 
      1
      <link rel="stylesheet" href="styles.css">
  6. <meta>: 元数据
    • 用于提供有关文档的元数据，如字符编码、文档描述、作者等。常用属性包括 name 和 content。
    • 示例: 
      1
      2
      3
      <meta charset="UTF-8">
      <meta name="description" content="A description of the webpage.">
      <meta name="author" content="Author Name">

属性

空元素通常使用以下属性来定义其行为或外观：

属性 描述
src 对于 <img> 元素，定义图像的 URL。
alt 对于 <img> 元素，定义图像无法显示时的替代文本。
type 对于 <input> 元素，定义输入控件的类型（例如 text、checkbox、submit）。
href 对于 <link> 元素，定义外部资源的 URL。
rel 对于 <link> 元素，定义文档与外部资源之间的关系。
name 对于 <meta> 元素，定义元数据的名称。
content 对于 <meta> 元素，定义与 name 属性对应的元数据内容。

空元素的自封闭语法

在 HTML4 和 HTML5 中，空元素的开始标签可以自我封闭。虽然 HTML5 允许省略自封闭的斜杠（/），但以下写法仍然被支持：

1
2
<br />
<img src="image.jpg" alt="Description of image" />

通过使用空元素，开发者可以在不需要关闭标签的情况下有效地定义和控制网页的各种功能和外观。

link 标签用于定义当前文档与外部资源之间的关系。这个标签是一个空元素，这意味着它只包含属性，没有内容。

基本用法

1
2
3
<head>
    <link rel="stylesheet" href="styles.css">
</head>

在上述示例中，link 标签的 rel 属性指定了当前文档与被链接文档的关系为 "stylesheet"，这意味着它引入了一个外部样式表。

位置

link 标签只能存在于文档的 head 部分，但它可以出现多次，以链接多个资源。

常用属性

  • rel: 定义了当前文档与被链接文档之间的关系。常见值包括:

    • stylesheet: 用于定义一个外部加载的样式表。
    • icon: 用于定义文档的图标。
    • manifest: 用于定义一个应用程序的 manifest 文件。

  • href: 定义被链接文档的 URL。

  • type: 定义被链接资源的 MIME 类型。对于样式表，通常是 text/css。

  • media: 指定被链接资源适用的媒介或设备。常见值包括:

    • all: 适用于所有设备。
    • screen: 适用于屏幕设备。
    • print: 适用于打印设备。

示例

  1. 引入外部样式表:
1
2
3
<head>
    <link rel="stylesheet" href="styles.css">
</head>
  1. 定义文档图标:
1
2
3
<head>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
  1. 定义打印样式表:
1
2
3
<head>
    <link rel="stylesheet" href="print.css" media="print">
</head>
  1. 引入 Web App Manifest 文件:
1
2
3
<head>
    <link rel="manifest" href="manifest.json">
</head>

详细属性说明

属性 描述
rel 定义了当前文档与被链接文档之间的关系。常用值包括 stylesheet、icon、manifest 等。
href 定义被链接文档的 URL。
type 定义被链接资源的 MIME 类型。例如，对于样式表，通常是 text/css。
media 指定被链接资源适用的媒介或设备。常见值包括 all、screen、print 等。
sizes 主要用于 icon 链接类型，定义了图标的尺寸。例如，sizes="16x16"。
title 给予被链接资源一个标题。这个属性在大多数情况下是可选的。
integrity 用于验证被链接资源的完整性。通常用于安全性较高的场景，例如使用 Subresource Integrity (SRI) 技术时。

通过使用 link 标签，开发者可以高效地管理网页与外部资源的连接，从而实现样式分离、引入图标、定义应用程序清单等功能。这有助于提高网页的可维护性和用户体验。

在网页中导入样式表时，link 标签和 @import 规则都是常用的方法。它们各有优缺点，适用于不同的场景。以下是它们的详细区别：

1. 从属关系区别

  • link 标签
    • 定义: link 是 HTML 提供的标签，用于在 HTML 文档中引入外部资源。
    • 用途: 除了引入 CSS 文件，link 标签还可以用于定义 RSS 订阅、设置网站图标（favicon）、以及其他与文档相关的外部资源链接。
    • 示例: 
      1
      2
      <link rel="stylesheet" href="styles.css">
      <link rel="icon" href="favicon.ico">
  • @import 规则
    • 定义: @import 是 CSS 提供的语法规则，用于在 CSS 文件中引入其他 CSS 文件。
    • 用途: 仅用于导入样式表，不能用于其他类型的资源。
    • 示例: 
      1
      @import url('styles.css');

2. 加载顺序区别

  • link 标签
    • 加载顺序: 使用 link 标签引入的 CSS 文件在页面加载时即开始下载和解析，多个 link 标签可以同时并行加载。
    • 性能: link 标签通常会被浏览器并行加载，提高页面加载性能。
  • @import 规则
    • 加载顺序: 使用 @import 引入的 CSS 文件会在主样式表加载完成后才开始下载和解析。这可能导致样式的延迟加载，影响页面的初次呈现。
    • 性能: 由于 @import 文件是串行加载的，可能会增加页面的加载时间和影响性能。

3. 兼容性区别

  • link 标签
    • 兼容性: link 标签是 HTML 标准的一部分，几乎所有的浏览器和所有的浏览器版本都支持 link 标签，没有兼容性问题。
  • @import 规则
    • 兼容性: @import 规则在 CSS2.1 中引入，所有现代浏览器（包括 IE5+）都支持它。然而，某些旧版本的浏览器可能对 @import 的支持不完全，特别是对于较复杂的 @import 语法。

4. DOM 可控性区别

  • link 标签
    • DOM 操控: link 标签可以通过 JavaScript 动态创建和插入到 DOM 中。这允许开发者在页面运行时根据需要加载或更改样式表。
    • 示例: 
      1
      2
      3
      4
      var link = document.createElement('link');
      link.rel = 'stylesheet';
      link.href = 'dynamic-styles.css';
      document.head.appendChild(link);
  • @import 规则
    • DOM 操控: @import 规则只能在 CSS 文件中使用，不能通过 JavaScript 动态插入到文档中。所有的 @import 规则必须在 CSS 文件的开头定义。

总结

  • link 标签 更适合在 HTML 文件中静态地引入 CSS 资源，它支持更广泛的应用，不仅限于样式表，并且支持更高效的加载方式。
  • @import 规则 主要用于在 CSS 文件中进行样式表的导入，它可能导致较慢的加载速度，但在某些情况下（例如需要将样式组织成多个层次）是有用的。

选择哪种方法取决于项目的具体需求和性能要求。在大多数情况下，使用 link 标签会提供更好的性能和灵活性。

13. 你对浏览器的理解？

浏览器是一种软件应用程序，用于从网络上检索和呈现用户所需的 web 资源。它通过解析、渲染和展示 HTML、CSS、JavaScript 和其他格式的文件，使用户能够访问和交互网站和应用程序。

浏览器的主要功能

  1. 资源请求和显示
    • 浏览器通过网络协议（如 HTTP/HTTPS）从服务器请求资源，并将这些资源显示在用户界面上。
    • 资源的格式不仅包括 HTML 文档，还包括 PDF 文件、图片、视频、音频等多种格式。
  2. 用户界面交互
    • 提供用户界面组件，如地址栏、标签页、菜单、工具栏等，允许用户输入网址、导航、设置参数等。
  3. 解析和渲染
    • HTML 解析: 解析 HTML 文档，将其转换为 DOM（文档对象模型）树。
    • CSS 解析: 解析 CSS 文件或样式，应用样式规则，生成渲染树。
    • JavaScript 执行: 执行网页中的 JavaScript 代码，以实现动态行为和交互。
    • 渲染: 将解析和样式处理后的文档显示在浏览器窗口中。

浏览器的结构

浏览器的内部结构通常可以分为两部分：shell 和 内核。

  1. Shell（外壳）
    • 定义: 浏览器的用户界面部分，包含菜单、工具栏、标签页、地址栏等。
    • 功能: 提供用户操作界面和设置选项。它负责与用户交互，接收用户输入（如网址），以及展示浏览器的各种界面组件。
    • 实现: 不同浏览器的外壳实现可能会有所不同，例如 Google Chrome 的外壳与 Firefox 的外壳具有不同的设计和功能。
  2. 内核（引擎）
    • 定义: 浏览器的核心部分，负责解析和渲染网页内容。内核处理 HTML、CSS、JavaScript，并将其转换为用户可以看到的网页。
    • 功能: 负责解析 HTML、CSS 和 JavaScript，执行脚本，处理样式和布局，生成和显示网页内容。
    • 类型: 常见的浏览器内核包括：
      • Blink: 用于 Google Chrome 和 Microsoft Edge。
      • Gecko: 用于 Mozilla Firefox。
      • WebKit: 用于 Safari。
      • Trident: 用于旧版本的 Internet Explorer。
      • EdgeHTML: 用于旧版的 Microsoft Edge。

浏览器兼容性问题

  • 规范与扩展: 虽然 HTML 和 CSS 的规范由 W3C（万维网联盟）维护，并规定了浏览器应如何解释和渲染文档，但各浏览器厂商通常会在这些规范的基础上添加自定义扩展或优化，这可能导致不同浏览器之间的行为差异。
  • 兼容性问题: 不同浏览器对相同的 HTML、CSS 和 JavaScript 代码的解释和渲染方式可能会有所不同，这给 Web 开发者带来了兼容性问题。开发者需要进行跨浏览器测试，并使用各种技巧和工具来确保网站在不同浏览器中的一致表现。

内核与外壳的演变

  • 早期浏览器: 在早期的浏览器中，内核和外壳通常是紧密结合的，浏览器并没有明确区分外壳和内核。
  • 现代浏览器: 随着技术的发展，许多现代浏览器开始将内核和外壳分离，以提高模块化和维护性。比如 Mozilla 在将 Gecko 引擎独立出来后，明确了内核和外壳的划分，使得不同的外壳可以基于相同的内核进行构建。

总结

浏览器是一个复杂的软件系统，由外壳和内核两个主要部分组成。外壳负责用户界面的呈现和用户交互，而内核负责处理和渲染网页内容。尽管浏览器遵循了统一的 Web 标准，但由于各自的扩展和实现差异，浏览器间仍存在兼容性问题，这对 Web 开发者提出了更高的要求。 ***

14. 介绍一下你对浏览器内核的理解？

浏览器内核是浏览器的核心部分，负责处理和渲染网页内容。现代浏览器的内核主要分为两个主要组成部分：渲染引擎和JavaScript 引擎。这两个引擎各自承担着不同的任务，共同实现网页的完整显示和动态功能。

渲染引擎

职责: - 渲染内容: 渲染引擎负责将 HTML、CSS 和图像等资源转换为浏览器窗口中可见的内容。它将这些资源解析成 DOM（文档对象模型）树和渲染树，然后进行布局和绘制。 - 处理文档: 渲染引擎处理各种文档类型，如 HTML、XML 以及通过插件支持的格式（如 PDF）。

主要任务: 1. 解析 HTML: 解析 HTML 文档并构建 DOM 树。 2. 解析 CSS: 解析 CSS 文件并将样式应用到 DOM 树上，生成渲染树。 3. 布局: 计算每个元素的确切位置和大小。 4. 绘制: 将内容绘制到屏幕上，包括文本、图像和其他可视元素。

示例: - Blink: 用于 Google Chrome 和新版 Microsoft Edge。 - Gecko: 用于 Mozilla Firefox。 - WebKit: 用于 Apple Safari。 - Trident: 用于 Internet Explorer。 - EdgeHTML: 用于旧版 Microsoft Edge。

插件支持: - 插件: 渲染引擎可以通过插件支持额外的功能，如 PDF 阅读器、Flash 播放器等。虽然现代浏览器逐渐减少对插件的依赖，但插件在某些场景下仍然有用。

JavaScript 引擎

职责: - 解析和执行 JavaScript: JavaScript 引擎负责解析和执行网页中的 JavaScript 代码，以实现动态效果、交互功能和客户端逻辑。

主要任务: 1. 解析: 解析 JavaScript 代码，将其转换为抽象语法树（AST）。 2. 编译: 将 AST 编译成字节码或机器码（JIT 编译）。 3. 执行: 执行编译后的代码，处理逻辑、计算和 DOM 操作。

示例: - V8: 用于 Google Chrome 和 Node.js，著名的高性能 JavaScript 引擎。 - SpiderMonkey: 用于 Mozilla Firefox。 - JavaScriptCore (Nitro): 用于 Apple Safari。 - Chakra: 用于旧版 Microsoft Edge。

渲染引擎与 JavaScript 引擎的独立性

  • 早期浏览器: 最早的浏览器中，渲染引擎和 JavaScript 引擎通常没有明确的区分，很多功能都集中在一个引擎中。
  • 现代浏览器: 随着 JavaScript 的复杂性和重要性的增加，JavaScript 引擎逐渐独立出来，与渲染引擎分开。这种分离使得两个引擎可以各自专注于其核心任务，提高了性能和开发效率。

总结

  • 渲染引擎: 负责处理和显示网页内容，包括解析 HTML、CSS，进行布局和绘制。它将网页内容呈现给用户。
  • JavaScript 引擎: 负责解析和执行 JavaScript 代码，以实现网页的动态效果和交互功能。

在现代浏览器中，这两个引擎虽然通常是独立的，但它们协同工作，共同确保网页的完整呈现和功能实现。 ***

15. 常见的浏览器内核比较

浏览器内核是浏览器的核心组件，负责解析和渲染网页内容。不同的内核具有不同的特点和优劣势。以下是一些常见的浏览器内核的详细比较：

1. Trident

  • 使用浏览器: Internet Explorer (IE)
  • 优点:
    • 市场份额: 在其巅峰时期，Trident 内核由于 IE 浏览器的高市场份额，成为网页开发的主要标准之一。
  • 缺点:
    • 标准支持: 对于 W3C 标准的支持较差，很多现代网页标准和技术不被支持或支持不完整。
    • 安全性: 由于存在大量的安全漏洞，Trident 内核的浏览器经常被指出存在安全隐患。
    • 更新滞后: 微软对 Trident 的更新不够及时，导致其与现代网页标准脱节。
  • 影响: 尽管 Trident 内核在过去的网页开发中占有重要地位，但由于其标准支持不足和安全问题，许多用户和开发者已经转向使用其他浏览器内核。

2. Gecko

  • 使用浏览器: Mozilla Firefox、Flock
  • 优点:
    • 功能丰富: 支持大量的现代网页技术和复杂的网页效果，提供强大的浏览器扩展接口。
    • 标准支持: 相对较好地支持 W3C 标准，较为兼容现代网页技术。
  • 缺点:
    • 资源消耗: 比较消耗内存和系统资源，可能导致性能问题，特别是在低配设备上。
  • 影响: Gecko 内核的开放性和强大功能使其在开发者社区中受到欢迎，但资源消耗问题可能影响用户体验。

3. Presto

  • 使用浏览器: Opera（早期版本）
  • 优点:
    • 速度快: 在处理 JavaScript 和其他脚本语言时，Presto 内核的速度非常快，优于其他内核。
  • 缺点:
    • 兼容性: 为了实现快速的性能，Presto 内核牺牲了一部分网页兼容性，可能导致某些网页无法正确显示。
  • 影响: Presto 内核在速度方面表现出色，但由于兼容性问题和 Opera 浏览器的变化，逐渐被其他内核所取代。

4. WebKit

  • 使用浏览器: Safari、早期版本的 Chrome（直到 Blink 的出现）
  • 优点:
    • 速度较快: 网页浏览速度较快，尽管不如 Presto，但优于 Gecko 和 Trident。
    • 开源: WebKit 是开源的，允许开发者进行修改和贡献。
  • 缺点:
    • 兼容性较低: 对网页代码的容错性较低，可能导致不符合标准的网页无法正确显示。
  • 影响: WebKit 的速度和开源特性使其受到广泛应用，但兼容性问题仍然是一个挑战。WebKit 的前身是 KDE 的 KHTML 引擎，WebKit 是其开源分支。
  • 使用浏览器: Google Chrome、新版 Opera
  • 优点:
    • 性能优化: 在 WebKit 的基础上进行优化，提高了性能和速度，同时支持更现代的网页技术。
    • 开放源代码: Blink 是开源的，允许开发者参与和贡献代码。
  • 缺点:
    • 兼容性问题: 虽然 Blink 兼容性比 WebKit 有所改善，但仍然可能出现兼容性问题。
  • 影响: Blink 内核的出现标志着 Google 在浏览器内核开发方面的独立性，推动了 Chrome 浏览器的广泛应用，并影响了其他浏览器的开发方向。

总结

  • Trident: 曾经的市场主导者，但标准支持和安全性不足，已被其他内核取代。
  • Gecko: 提供强大的功能和较好的标准支持，但较高的资源消耗可能影响性能。
  • Presto: 以快速性能著称，但兼容性较差，已被 Opera 替换。
  • WebKit: 提供较快的速度和开源优势，但兼容性问题存在。
  • Blink: 在 WebKit 基础上进行优化，提供较好的性能和现代技术支持，广泛应用于 Chrome 和新版 Opera。

不同的浏览器内核具有各自的优缺点，选择合适的内核可以根据具体需求和用户体验的要求来决定。 ***

16. 常见浏览器所用内核

以下是一些常见浏览器所使用的内核，以及这些内核的演变和特点：

1. Internet Explorer (IE)

  • 内核: Trident 内核（俗称 IE 内核）
  • 特点:
    • 兼容性: Trident 内核在早期的网页开发中具有广泛的使用基础，但它对现代网页标准的支持较差，存在许多兼容性问题。
    • 安全性: Trident 内核在安全性方面也存在不少漏洞，这使得 IE 浏览器经常被指出存在安全隐患。
    • 市场影响: 由于其历史悠久和早期的市场占有率，Trident 内核在网页开发中曾占据重要位置，但随着时间的推移，浏览器的更新和市场的变化使得其逐渐被其他内核所取代。

2. Google Chrome

  • 内核: Blink 内核（以前是 WebKit 内核）
  • 特点:
    • 性能: Blink 内核在 WebKit 的基础上进行了优化，提高了性能和速度。
    • 功能: 支持现代的网页技术和标准，如 HTML5、CSS3 和 ECMAScript 6。
    • 开放性: Blink 是开源的，开发者可以参与和贡献代码。
    • 演变: Chrome 最初使用 WebKit 内核，但在 2013 年，Google 宣布将 Chrome 的渲染引擎更改为 Blink，以改进性能和功能。

3. Mozilla Firefox

  • 内核: Gecko 内核（俗称 Firefox 内核）
  • 特点:
    • 功能丰富: 支持大量的现代网页技术和复杂的网页效果。
    • 标准支持: 提供较好的标准支持，符合 W3C 标准。
    • 资源消耗: 相对较高的内存和资源消耗，可能影响性能。
    • 开放性: Gecko 内核是开源的，允许开发者进行修改和贡献。

4. Safari

  • 内核: WebKit 内核
  • 特点:
    • 速度: WebKit 内核提供较快的网页浏览速度。
    • 兼容性: 对网页代码的容错性较低，有时可能会遇到兼容性问题。
    • 开源: WebKit 是开源的，前身是 KDE 的 KHTML 引擎，WebKit 是其开源分支。

5. Opera

  • 内核: 早期使用 Presto 内核，现使用 Blink 内核
  • 特点:
    • Presto 内核:
      • 速度: 以网页加载速度快著称，但兼容性较差。
      • 兼容性: 由于专注于速度，可能会牺牲一部分网页兼容性。
    • Blink 内核:
      • 演变: Opera 在 2013 年切换到 Blink 内核，与 Google Chrome 的内核相同。
      • 性能: 与 Blink 内核的改进相结合，提供了更好的性能和现代技术支持。

6. 360 浏览器、猎豹浏览器

  • 内核: IE + Chrome 双内核
  • 特点:
    • 双内核模式: 提供兼容模式和高速模式，通过切换内核来适应不同的网页兼容性需求。
    • 灵活性: 用户可以选择使用 IE 内核来处理旧版网页或使用 Chrome 内核来处理现代网页。

7. 搜狗浏览器、遨游浏览器、QQ 浏览器

  • 内核: Trident（兼容模式）+ WebKit（高速模式）
  • 特点:
    • 双内核模式: 类似于 360 浏览器和猎豹浏览器，通过切换 Trident 和 WebKit 内核来适应不同的网页需求。
    • 兼容性: 在需要时使用 Trident 内核以保证兼容性，在需要速度时使用 WebKit 内核。

8. 百度浏览器、世界之窗浏览器

  • 内核: Trident 内核
  • 特点:
    • 兼容性: 主要使用 Trident 内核，因此与 IE 浏览器的兼容性较好，但面临与 Trident 内核相关的标准和安全问题。

9. 2345 浏览器

  • 内核: 以前是 IE 内核，现在是 IE + Chrome 双内核
  • 特点:
    • 演变: 最初使用 IE 内核，后加入了 Chrome 内核以改进兼容性和性能。
    • 双内核模式: 提供切换功能，以支持不同的网页兼容性和性能需求。

10. UC 浏览器

  • 内核: UC 声称使用自研发的 U3 内核，但也有基于 WebKit 和 Trident 的说法
  • 特点:
    • 多样性: UC 浏览器的内核情况较为复杂，有不同版本可能基于不同的内核技术。
    • 性能和兼容性: 可能结合了 WebKit 和 Trident 的优点，但具体情况可能因版本和平台而异。

总结

不同的浏览器内核具有各自的特点和优缺点，影响了浏览器的性能、兼容性和用户体验。了解这些内核的特点可以帮助开发者优化网页的兼容性和性能，并选择合适的浏览器进行测试和开发。 ***

17. 浏览器的渲染原理？

浏览器的渲染过程是将网页的 HTML 和 CSS 代码转换为用户可以看到的网页内容的过程。这个过程涉及多个阶段，从解析文档到显示最终的页面内容。以下是详细的渲染原理：

1. 解析 HTML 构建 DOM 树

  • 解析 HTML: 浏览器首先接收到 HTML 文档，并解析它。HTML 文档被解析成一棵称为 DOM（文档对象模型）树的结构。
  • DOM 树: DOM 树由 DOM 节点组成，这些节点代表 HTML 文档中的各种元素和属性。DOM 树是一个树状结构，其中每个节点表示文档的一个部分（例如，元素、文本、属性等）。

2. 解析 CSS 构建 CSSOM 规则树

  • 解析 CSS: 浏览器解析 CSS 文件或内嵌的 CSS 代码，生成一个称为 CSSOM（CSS 对象模型）的规则树。
  • CSSOM 规则树: CSSOM 规则树包含了所有样式规则，并将这些规则与 DOM 元素关联起来。每个节点代表一个 CSS 规则或样式声明。

3. 构建渲染树

  • 渲染树: 浏览器结合 DOM 树和 CSSOM 规则树，构建渲染树。渲染树的每个节点称为渲染对象，这些对象包含了渲染所需的所有信息，如颜色、大小和位置。
  • 渲染对象:
    • 可见对象: 渲染对象对应于 DOM 元素，它们显示在页面上。
    • 不可见对象: 不可见的 DOM 元素（例如，display: none 的元素）不会出现在渲染树中。
    • 复杂结构: 某些复杂的 DOM 元素可能会被渲染成多个渲染对象（例如，一个包含多个子元素的 div）。

4. 布局（回流）

  • 布局阶段: 在渲染树构建完成后，浏览器需要确定每个渲染对象的确切位置和大小。这个过程被称为布局或回流。
  • 自动重排: 布局阶段也称为“自动重排”，浏览器计算每个渲染对象在页面中的位置和尺寸。这包括处理元素的边距、填充、边框等。

5. 绘制

  • 绘制阶段: 在布局完成后，浏览器遍历渲染树并调用每个渲染对象的 paint 方法，将它们的内容绘制到屏幕上。
  • 绘制过程: 绘制涉及将渲染对象的视觉内容（如文本、图像、背景颜色）绘制到屏幕上。这通常使用低级别的图形 API（如 Canvas 或 GPU 加速）来完成。

渲染过程的优化

  • 渐进渲染: 浏览器为了提供更好的用户体验，会尽早将内容呈现到屏幕上，而不是等待所有 HTML 和 CSS 完全解析完成。它可能在解析部分内容时就开始构建渲染树和进行布局，逐步显示内容。
  • 异步加载: 在页面渲染的过程中，浏览器可能还在通过网络下载剩余的资源（如图片、脚本、样式表）。这些资源的加载是异步的，浏览器在加载过程中逐步更新页面内容。

总结

浏览器的渲染过程是一个复杂且高效的多阶段过程，涉及以下主要步骤： 1. 解析 HTML: 构建 DOM 树。 2. 解析 CSS: 构建 CSSOM 规则树。 3. 构建渲染树: 根据 DOM 和 CSSOM 构建渲染树。 4. 布局: 确定渲染对象的位置和大小。 5. 绘制: 将渲染对象的内容绘制到屏幕上。

为了优化用户体验，浏览器会尽可能早地呈现部分内容，同时异步加载其余的资源。这种逐步渲染的策略可以提高页面的加载速度和响应性。 ***

18. 渲染过程中遇到 JS 文件怎么处理？（浏览器解析过程）

渲染过程中遇到 JavaScript 文件的处理

在浏览器的渲染过程中，JavaScript 文件的加载、解析和执行会影响文档的解析和渲染。这些影响包括阻塞文档解析、改变页面布局和影响页面交互。以下是详细的处理过程和策略：

1. JavaScript 文件的加载、解析与执行

当浏览器在解析 HTML 文档时遇到 <script> 标签，处理过程如下：

  • 阻塞文档解析:
    • 同步脚本: 默认情况下，<script> 标签会阻塞 HTML 文档的解析。当浏览器遇到一个同步 JavaScript 文件（即没有 defer 或 async 属性的脚本），它会暂停解析文档，去下载、解析和执行这个脚本。完成后，浏览器会继续解析后续的 HTML 内容。这可能导致页面渲染的延迟，特别是当脚本文件较大或网络速度较慢时。
    • 执行脚本: 执行 JavaScript 文件后，脚本可以修改 DOM 或样式，从而影响页面的布局和呈现。这可能导致页面的重排或重绘。

2. defer 和 async 属性的影响

为了优化页面加载和渲染，现代浏览器提供了两种属性来控制 <script> 标签的行为：defer 和 async。

  • defer 属性:
    • 定义: defer 属性指示浏览器在文档解析完成后再执行脚本。这样，脚本不会阻塞文档的解析过程。
    • 行为:
      • 按顺序执行: 带有 defer 属性的脚本会按照它们在 HTML 文档中的出现顺序执行。
      • 兼容性: defer 属性在文档加载和脚本执行之间提供了良好的平衡，适合需要在页面加载完成后执行的脚本，例如初始化代码或页面交互功能。
  • async 属性:
    • 定义: async 属性指示浏览器在下载脚本时并行解析文档，并且脚本下载完成后立即执行。这样可以提高页面加载速度，但可能会影响脚本执行的顺序。
    • 行为:
      • 不按顺序执行: 带有 async 属性的脚本可能会在下载完成后立即执行，而不是按文档中的顺序执行。这可能导致脚本之间的依赖关系问题。
      • 适用场景: async 属性适合不依赖于其他脚本的独立脚本，例如广告脚本或分析脚本。

3. script 标签的位置

在文档中放置 <script> 标签的位置对页面加载性能也有影响：

  • 底部放置:
    • 原理: 将 <script> 标签放置在 </body> 标签前，可以确保在执行脚本之前，文档中的大部分内容已经被解析和渲染。这样可以避免脚本阻塞页面的主要内容加载。
    • 效果: 提高首屏渲染速度，使用户更快地看到页面的内容，而不是等待所有脚本加载和执行完成。
  • 头部放置:
    • 适用场景: 在一些情况下，可能需要在页面加载前执行脚本（例如，某些第三方库或功能的初始化）。这种情况下，使用 defer 或 async 属性可以减少对页面渲染的影响。

4. 异步加载与延迟加载

除了使用 defer 和 async 属性，还可以采用其他策略来优化脚本加载：

  • 动态加载: 使用 JavaScript 动态加载脚本（例如，通过 document.createElement('script')）可以按需加载脚本，进一步优化页面性能。
  • 分割代码: 使用代码分割技术，将脚本拆分为更小的块，按需加载，减少首屏加载时间。

总结

  • 阻塞文档解析: 默认情况下，JavaScript 脚本会阻塞 HTML 文档的解析，影响页面的渲染速度。
  • defer 属性: 在文档解析完成后按顺序执行脚本，不阻塞页面渲染。
  • async 属性: 并行下载并立即执行脚本，可能会影响脚本的执行顺序。
  • 脚本位置: 将脚本放在 </body> 标签前可以减少对页面渲染的影响。
  • 异步加载: 动态加载和代码分割可以进一步优化页面性能和加载速度。

通过合理使用这些技术，可以有效提高页面加载性能和用户体验。 ***

19. async 和 defer 的作用是什么？有什么区别？（浏览器解析过程）

在 HTML 中，<script> 标签用于引入和执行 JavaScript 脚本。脚本的加载和执行方式会影响网页的加载性能和用户体验。async 和 defer 是两种控制 <script> 标签行为的属性，它们对脚本的加载和执行有不同的影响。

1. 默认行为（无 async 或 defer 属性）

  • 加载和执行: 如果 <script> 标签没有 async 或 defer 属性，浏览器会在解析 HTML 时立即下载并执行该脚本。这意味着：
    • 阻塞文档解析: 浏览器在执行脚本时会暂停解析 HTML 文档，直到脚本下载和执行完成。这样会导致文档的解析过程被阻塞，影响页面的渲染速度和用户体验。
    • 执行顺序: 如果有多个没有 async 或 defer 的脚本，它们会按顺序执行，影响页面加载的连贯性。

2. defer 属性

  • 定义: defer 属性表示脚本应在文档解析完成后执行。这意味着脚本的下载过程与文档解析过程是并行进行的，但脚本的执行会被延迟到整个文档解析完成之后。

  • 行为:

    • 并行下载: 带有 defer 属性的脚本会在文档解析的同时进行下载，不会阻塞文档解析。
    • 延迟执行: 当文档解析完成后，所有带有 defer 属性的脚本会按照它们在 HTML 中出现的顺序执行。执行时间是在 DOMContentLoaded 事件触发之前。
    • 多个脚本: 脚本会按顺序执行，即使它们被延迟加载，这有助于确保脚本之间的依赖关系得到满足。

  • 适用场景: 使用 defer 属性适合那些需要在 DOM 完全加载后才能执行的脚本，例如初始化脚本或依赖于完整 DOM 的功能脚本。

3. async 属性

  • 定义: async 属性表示脚本应尽可能快地下载和执行。脚本的下载和执行是异步进行的，即不会阻塞文档解析。

  • 行为:

    • 并行下载: 带有 async 属性的脚本会与文档解析并行下载，下载过程不会阻塞 HTML 解析。
    • 异步执行: 一旦脚本下载完成，它会立即执行，不论文档的解析是否完成。这意味着脚本的执行可能会中断或影响文档的解析过程。
    • 执行顺序: 脚本的执行顺序不一定按照它们在 HTML 中的出现顺序，具体执行顺序取决于脚本的下载速度和完成时间。这可能会导致脚本间的依赖问题。

  • 适用场景: 使用 async 属性适合那些独立的脚本，不依赖于其他脚本或 DOM 状态的脚本，例如第三方脚本或统计脚本。

总结比较

特性 async 属性 defer 属性
下载 与文档解析并行下载 与文档解析并行下载
执行 下载完成后立即执行，可能会阻塞文档解析 文档解析完成后按顺序执行，不会阻塞文档解析
顺序 无法保证多个脚本的执行顺序 确保多个脚本按照它们在 HTML 中的顺序执行
适用场景 独立的脚本（例如广告脚本、分析脚本） 需要在 DOM 完全加载后执行的脚本（例如初始化脚本）

通过合理使用 async 和 defer 属性，可以优化网页的加载性能，改善用户体验。对于需要立即执行的脚本，可以使用默认行为或 async 属性，而对于依赖于完整文档的脚本，建议使用 defer 属性。 ***

20. 什么是文档的预解析？（浏览器解析过程）

文档的预解析（Preloading）的详细解释

在浏览器的渲染过程中，文档的预解析是一种优化技术，用于加速网页的加载速度和提高用户体验。以下是关于文档预解析的详细说明：

1. 什么是文档预解析？

  • 定义: 文档预解析是一种优化技术，当浏览器在解析 HTML 文档并遇到 JavaScript 脚本时，它会使用额外的线程来预解析文档的剩余部分，并处理后续需要通过网络加载的资源。这个过程并不会修改 DOM 树，而是加速资源的并行加载。

  • 目标: 通过并行处理文档的解析和资源的加载，减少总体加载时间，从而加快页面的渲染速度和响应性。

2. 预解析的工作流程

  1. 遇到 JavaScript 脚本:
    • 当浏览器在解析 HTML 时遇到 <script> 标签（特别是同步脚本），它会暂停文档的解析，进入脚本的下载和执行阶段。这可能会导致页面渲染的延迟。
  2. 并行预解析:
    • 在 JavaScript 脚本执行期间，浏览器会启动一个额外的线程来继续解析文档的其余部分。这个线程会处理剩余的 HTML 内容，并开始下载后续需要的外部资源，如样式表、图片等。
    • 资源加载: 预解析线程负责识别和请求外部资源（如 CSS、图片等），这些资源的加载是并行进行的，以提高加载速度。
  3. 恢复主解析:
    • 一旦 JavaScript 脚本执行完成，浏览器会恢复主解析过程，继续处理 HTML 文档，并构建和渲染 DOM 树。
    • 合并结果: 主解析和预解析线程的工作结果会合并，以完成页面的最终渲染。

3. 预解析的优化作用

  • 加快加载速度: 通过并行处理文档解析和资源下载，预解析可以显著减少页面的加载时间。例如，当脚本执行期间，预解析线程已经开始加载下一个页面的 CSS 和图片，减少了整体的等待时间。

  • 提高用户体验: 更快的加载速度和更流畅的页面呈现会提升用户体验，使页面更快地响应用户操作。

4. 注意事项

  • 预解析与 DOM 更新: 预解析不会影响 DOM 树的构建和更新。DOM 树的构建和更新依然由主解析线程完成。预解析主要关注于加速资源的加载，而不涉及 DOM 的修改。

  • 兼容性: 预解析是一种浏览器优化技术，主要用于 WebKit 和 Firefox 等浏览器。不同浏览器可能会有不同的实现细节，但总体目标是一致的——提升网页的加载性能。

5. 实际应用

  • 脚本位置: 为了充分利用预解析技术，可以合理安排 <script> 标签的位置，例如将非关键脚本放在页面底部，减少对文档解析的阻塞。
  • 资源加载: 使用 <link rel="preload"> 标签可以告诉浏览器提前加载关键资源，进一步优化页面性能。

总结

文档的预解析是一种优化技术，通过在脚本执行期间并行处理文档的其余部分和资源加载，提升网页的整体加载速度和用户体验。预解析专注于加速资源的下载，而不影响 DOM 树的构建和更新。它是现代浏览器性能优化的重要手段之一，有助于提高页面响应速度和用户满意度。

21. CSS 如何阻塞文档解析？（浏览器解析过程）

在浏览器的渲染过程中，CSS 的处理对文档解析有一定的阻塞作用。以下是对 CSS 阻塞文档解析的详细解释：

1. 为什么 CSS 会阻塞文档解析？

  • 样式与脚本的交互: 在 JavaScript 执行期间，脚本可能会查询样式信息以做出决策。如果 CSS 还未加载和解析，脚本获取的样式信息可能是不准确的，这会导致脚本执行错误或页面布局出现问题。因此，浏览器需要确保 CSS 规则在脚本执行之前已被正确加载和应用。

  • CSSOM 的构建: 浏览器在构建 DOM 树时，还需要解析和构建 CSSOM（CSS Object Model）。CSSOM 与 DOM 树一起决定了页面的最终渲染样式。如果在脚本执行之前样式表未完全加载和解析，浏览器可能会面临不一致的状态或布局问题。

2. CSS 的加载与解析过程

  1. 遇到 <link> 或 <style> 标签:
    • 当浏览器在解析 HTML 时遇到 <link rel="stylesheet"> 或 <style> 标签，浏览器会开始下载和解析 CSS 文件。这一过程会阻止文档的进一步解析，直到样式表加载和解析完成。
  2. 阻塞解析:
    • 默认行为: CSS 的下载和解析是同步进行的，浏览器会在处理完这些样式之后继续解析 HTML。这种行为可以防止出现样式未加载完全而导致的布局问题。
    • 阻塞原因: 浏览器需要确保样式表的所有规则都被应用到页面中，以确保脚本在执行时能够访问到正确的样式信息。为了避免出现样式不一致的情况，浏览器会在继续解析文档之前等待 CSS 完全加载和构建完成。
  3. 构建 CSSOM:
    • 浏览器在下载 CSS 文件后，会解析 CSS 内容并构建 CSSOM。CSSOM 是一个描述样式信息的对象模型，与 DOM 树一起用于生成渲染树。
  4. 脚本执行:
    • 脚本阻塞: 在 CSSOM 构建完成之前，如果有 <script> 标签（特别是同步脚本），浏览器会延迟这些脚本的执行。这样可以确保脚本获取到的样式信息是准确的。

3. 优化建议

  • 使用 defer 或 async 属性: 对于非关键的 JavaScript 脚本，可以使用 defer 或 async 属性，以减少对文档解析的阻塞。defer 属性会延迟脚本的执行，直到文档解析完成；async 属性则会异步加载脚本，但它的执行顺序不一定保证。

  • 将 CSS 放在 <head> 部分: 将样式表链接放在 HTML 文档的 <head> 部分，可以确保 CSS 在页面渲染之前加载完成，避免影响页面的初始呈现。

  • 减少阻塞的 CSS: 尽量减少关键 CSS 的数量，避免将大量 CSS 规则放在内联样式中，这可以减少浏览器的阻塞时间。

4. 实例分析

考虑以下示例：

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
    <script src="script.js"></script>
</head>
<body>
    <p>Hello World!</p>
</body>
</html>
  • 在这个示例中，浏览器会先下载并解析 styles.css 文件，然后才会开始下载并执行 script.js。这保证了脚本能够访问到完整的样式信息，并避免了样式与脚本执行之间的冲突。

总结

CSS 的加载和解析会阻塞文档解析，是为了确保样式信息在脚本执行之前已经完全加载和应用。这种阻塞行为可以避免样式不一致的问题，确保页面的正常渲染和脚本的正确执行。通过优化脚本的加载方式和样式表的组织，可以提高页面的加载性能和用户体验。 ***

22. 渲染页面时常见哪些不良现象？（浏览器渲染过程）

FOUC（Flash of Unstyled Content）与白屏问题

在网页的加载过程中，FOUC 和白屏是常见的视觉问题，可能影响用户的初始体验。以下是对这两个问题的详细解释及其原因：

1. FOUC（Flash of Unstyled Content）

定义: FOUC 指的是在页面加载时，用户首先看到没有样式的内容，然后突然间页面样式出现的现象。通常这是由于浏览器在 CSS 文件加载之前先渲染了 HTML 内容。

原因: - CSS 加载延迟: 如果 CSS 文件的加载速度较慢，或者 CSS 文件被放在 HTML 文档的底部（</body> 标签之前），浏览器可能会先渲染未应用样式的 HTML 内容。 - 外部样式表: 当使用 <link> 标签引入外部样式表时，浏览器会等待样式表完全加载和解析后再应用样式。如果样式表在 HTML 内容之后加载，用户会先看到无样式的页面，之后样式才应用，产生 FOUC。

解决方法: - 将 CSS 放在 <head> 中: 确保所有关键的样式表都在 HTML 文档的 <head> 部分加载。这样，浏览器在渲染页面之前会先加载和应用样式。 - 使用内联样式: 对于关键样式，可以使用内联 CSS，这样浏览器会立即应用样式，而不需要等待外部样式表加载。 - 优化 CSS 文件: 减少 CSS 文件的大小和数量，使用合并和压缩工具，以缩短加载时间。

示例: 

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css"> <!-- 推荐放在 <head> 中 -->
</head>
<body>
    <p>Hello World!</p>
</body>
</html>

2. 白屏问题

定义: 白屏问题指的是在页面加载时，用户看到一个完全空白的页面或内容迟迟未显示。这通常发生在 CSS 和 JavaScript 文件的加载和执行过程中。

原因: - CSS 文件在文档底部: 如果 CSS 文件被放置在文档底部，由于 CSS 文件未加载完成，浏览器无法渲染页面的样式，导致用户看到白屏或内容迟迟未显示。 - JavaScript 文件在头部: 如果 JavaScript 文件放在 HTML 文档的 <head> 部分，脚本的加载和执行会阻塞 HTML 文档的解析。这会导致页面的其他内容无法及时显示，从而出现白屏现象。 - 慢速网络或大文件: 慢速网络连接或大型 CSS/JS 文件可能导致这些资源加载时间较长，从而使页面内容迟迟未能渲染。

解决方法: - CSS 放在 <head> 中: 确保所有关键样式表都在 <head> 中，以便在文档内容开始渲染之前加载完样式。 - JavaScript 文件放在底部: 将非关键的 JavaScript 文件放在 <body> 底部，以减少对文档解析的阻塞。对于关键脚本，可以使用 defer 或 async 属性来异步加载和执行脚本。 - 预加载和缓存: 使用浏览器缓存和预加载技术来提高资源的加载速度，减少页面加载时间。 - 延迟加载: 对于非关键的资源，可以使用延迟加载（Lazy Loading）技术，推迟加载直到页面内容需要它们为止。

示例: 

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css"> <!-- 推荐放在 <head> 中 -->
</head>
<body>
    <p>Hello World!</p>
    <script src="script.js"></script> <!-- 推荐放在 <body> 底部 -->
</body>
</html>

总结

FOUC 和白屏问题都是由于样式和脚本加载不及时引起的视觉问题。通过优化 CSS 和 JavaScript 的加载位置、减少文件大小、使用缓存和预加载技术，可以有效减少这些问题的发生，提高页面的加载速度和用户体验。 ***

23. 如何优化关键渲染路径？（浏览器渲染过程）

优化关键渲染路径是提高网页首次渲染速度和用户体验的关键步骤。以下是详细的步骤和策略，帮助你优化关键渲染路径：

1. 理解关键渲染路径

关键渲染路径（Critical Rendering Path, CRP）是浏览器从开始加载页面到首次渲染页面内容的过程中涉及的所有步骤。优化这一路径涉及减少影响首次渲染的资源和减少关键资源的加载时间。

2. 分析和特性描述

关键资源分析: - 关键资源是影响首屏渲染的 CSS、JavaScript 和字体等资源。分析这些资源的数量、字节数和加载时间，了解它们如何影响页面的首次渲染。

关键路径分析: - 关键路径长度是指从开始加载关键资源到页面首次渲染所需的时间。路径中包含所有依赖的资源，了解每个资源的加载和解析顺序。

3. 减少关键资源的数量

删除不必要的资源: - 审查和删除: 检查网页中使用的所有资源，删除不必要的或未使用的资源。避免在初始页面加载时加载不必要的资源。

延迟加载非关键资源: - 延迟加载: 将非关键资源的加载延迟到初始渲染之后，例如，通过 defer 或 async 属性延迟 JavaScript 的执行，或者将非关键 CSS 延迟加载。

使用异步加载: - 异步加载: 对于非关键的 CSS 和 JavaScript，使用 async 或 defer 属性，使它们的加载不会阻塞文档的解析。

4. 优化关键字节数

压缩资源: - 压缩和最小化: 压缩 CSS、JavaScript 和图像文件，以减少文件大小。使用工具如 UglifyJS、CSSNano、ImageOptim 等进行压缩。

合并文件: - 合并文件: 将多个 CSS 或 JavaScript 文件合并成一个文件，减少 HTTP 请求数量，从而减少延迟。

使用现代格式: - 使用现代文件格式: 使用现代图像格式（如 WebP）和高效的压缩技术，以减少文件的大小。

5. 优化关键资源的加载顺序

将 CSS 放在 <head> 中: - CSS 优先: 将关键 CSS 放在 <head> 部分，这样浏览器会在开始渲染页面之前下载和应用样式。

将 JavaScript 放在底部: - JavaScript 优先级: 将非关键 JavaScript 文件放在 <body> 底部，或使用 defer 和 async 属性，确保这些脚本不会阻塞页面的初始渲染。

利用 Preconnect 和 Prefetch: - 预连接: 使用 <link rel="preconnect" href="..."> 标签来预先建立对关键域名的连接，从而加快加载速度。 - 预取: 使用 <link rel="preload" href="..."> 和 <link rel="prefetch" href="..."> 标签来提前加载或预取关键资源。

Critical CSS: - 内联关键 CSS: 将最关键的 CSS 直接内联到 HTML 中，以便浏览器在渲染页面时立即使用这些样式，而无需等待外部样式表加载。

6. 测试和监控

使用工具分析性能: - 性能分析工具: 使用浏览器开发者工具、Lighthouse、WebPageTest 等工具分析页面性能，检查关键渲染路径的各个环节。

持续优化: - 定期检查: 定期检查和优化关键渲染路径，以应对不断变化的资源和需求。

示例

考虑一个简单的 HTML 页面优化示例：

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css"> <!-- 关键样式，放在 <head> 中 -->
    <script src="critical.js" defer></script> <!-- 关键脚本，使用 defer 属性 -->
</head>
<body>
    <p>Hello World!</p>
    <script src="non-critical.js" async></script> <!-- 非关键脚本，使用 async 属性 -->
    <link rel="preload" href="image.jpg" as="image"> <!-- 预加载关键资源 -->
</body>
</html>

在这个示例中，CSS 文件放在 <head> 中，关键 JavaScript 脚本使用 defer 属性，非关键脚本使用 async 属性。还使用了预加载（preload）来提前加载关键图像资源。

总结

优化关键渲染路径是提升页面加载速度和用户体验的重要步骤。通过减少关键资源数量、缩短关键路径长度、优化字节数以及合理安排资源加载顺序，可以有效提高页面的首次渲染速度，改善用户体验。 ***

24. 什么是重绘和回流？（浏览器绘制过程）

重绘（Repaint） 和 回流（Reflow） 是浏览器渲染过程中两个关键的操作，它们在处理页面布局和视觉更新时扮演重要角色。以下是对这两个概念的详细解释：

1. 重绘（Repaint）

定义: - 重绘发生在元素的外观或风格改变，但不会改变布局的情况下。例如，改变元素的背景颜色或边框颜色会导致重绘。重绘操作只更新视觉呈现，不会影响文档的几何布局。

触发条件: - CSS 属性变更: 如 background-color、color、border-color、visibility（从 visible 到 hidden，但 hidden 可能触发回流）等。 - 元素状态变化: 如 :hover、:focus 伪类应用于元素时。 - 图形变更: 如 Canvas 或 SVG 内容的改变。

影响: - 性能开销较低: 相对于回流，重绘的计算成本较低，因为它不需要重新计算布局，仅更新渲染树的部分属性。

示例: 

1
2
3
4
/* 这将触发重绘，但不会引发回流 */
element {
    background-color: blue;
}

2. 回流（Reflow）

定义: - 回流发生在布局或几何信息发生变化时，这种变化会影响文档的整体布局。回流会导致浏览器重新计算元素的位置和尺寸，并重新构建布局。

触发条件: - DOM 元素的添加或删除: 增加或移除可见元素会影响整个文档的布局。 - 元素尺寸改变: 如 width、height、padding、margin、border、font-size 的改变。 - 内容变化: 如在 input 框中输入文本或修改元素的内容。 - 浏览器窗口尺寸改变: 例如，通过 resize 事件触发窗口大小改变。 - 计算布局属性: 如 offsetWidth、offsetHeight、clientWidth、clientHeight 等。 - 修改网页默认字体: 字体变化会影响文本的布局和行高。

影响: - 性能开销较高: 回流的计算成本较高，因为它需要重新计算并更新整个文档的布局。频繁的回流会显著影响性能和用户体验。

示例: 

1
2
3
// 这会触发回流
element.style.width = '100px'; // 改变元素的宽度
element.style.margin = '20px'; // 改变元素的外边距

重绘与回流的关系

  • 回流 必定会发生 重绘。因为回流需要重新计算布局和尺寸，之后会根据新的布局重新绘制元素。
  • 重绘 不一定会引发回流。如果只是改变元素的颜色或样式，而不改变布局，只有重绘而没有回流。

优化建议

减少回流和重绘: - 批量操作: 尽量将多个样式变更合并为一次操作。例如，使用 documentFragment 来批量更新 DOM。 - 使用 requestAnimationFrame: 在 JavaScript 中进行批量更新，确保所有的布局和绘制操作都在下一帧开始之前完成。 - 避免频繁操作: 避免在动画中频繁改变布局，尽量使用 transform 和 opacity 属性，因为这些属性通常不会引发回流。 - 使用 CSS3: 优化动画和转换使用 CSS3 特性，这些特性更高效地处理渲染和布局。

示例优化: 

1
2
3
4
5
6
7
// 不推荐的做法：多次触发回流
element.style.width = '100px';
element.style.height = '50px';
element.style.padding = '10px';

// 推荐的做法：合并操作
element.style.cssText = 'width: 100px; height: 50px; padding: 10px;';

总结

重绘和回流是浏览器渲染过程中的两个重要操作。重绘仅更新元素的视觉外观，而回流会影响布局和几何信息。为了提高页面性能和用户体验，开发者应尽量减少不必要的回流和重绘，优化页面渲染过程。 ***

25. 如何减少回流？（浏览器绘制过程）

回流（Reflow）是浏览器重新计算页面元素的布局和尺寸的过程。由于回流的性能开销较大，因此减少回流的次数对提高页面性能至关重要。以下是一些减少回流的方法和最佳实践：

1. 使用 transform 替代 top、left

原因: - transform 通过 GPU 加速来处理元素的平移、缩放和旋转，通常不会触发回流，只会触发重绘。 - top 和 left 属性直接改变元素的位置，会影响其布局，从而触发回流。

示例: 

1
2
3
4
5
6
7
8
9
10
11
12
/* 触发回流的做法 */
.element {
    position: absolute;
    top: 100px;
    left: 50px;
}

/* 使用 transform，不触发回流 */
.element {
    position: absolute;
    transform: translate(50px, 100px);
}

2. 避免在循环中频繁读取和写入 DOM 属性

原因: - 读取和写入 DOM 属性（如 offsetHeight、clientWidth）会触发回流和重绘。将这些操作放在循环中，会造成性能瓶颈，因为每次访问都可能引发回流。

示例: 

1
2
3
4
5
6
7
8
9
10
11
// 不推荐的做法：每次循环都触发回流
for (let i = 0; i < items.length; i++) {
    items[i].style.width = `${itemWidth}px`;
    console.log(items[i].offsetHeight); // 触发回流
}

// 推荐的做法：批量操作
const itemWidth = 100; // 预先计算值
for (let i = 0; i < items.length; i++) {
    items[i].style.width = `${itemWidth}px`;
}

3. 避免使用表格布局

原因: - 表格布局会导致频繁的回流，因为小的改变可能需要重新计算整个表格的布局。

示例: 

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- 使用表格布局，不推荐 -->
<table>
    <tr>
        <td>Item 1</td>
        <td>Item 2</td>
    </tr>
</table>

<!-- 使用 Flexbox 或 Grid 布局，推荐 -->
<div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
</div>

4. 离线修改 DOM

原因: - 直接修改 DOM 会引发回流。使用 documentFragment 对象可以在内存中批量修改 DOM，最后一次性将修改应用到文档中，从而减少回流次数。

示例: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 不推荐的做法：逐个修改 DOM
const parent = document.getElementById('parent');
for (let i = 0; i < 100; i++) {
    const child = document.createElement('div');
    parent.appendChild(child);
}

// 推荐的做法：使用 documentFragment
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
    const child = document.createElement('div');
    fragment.appendChild(child);
}
document.getElementById('parent').appendChild(fragment);

5. 批量修改样式

原因: - 一条一条地修改 DOM 元素的样式会导致频繁的回流。预先定义好 CSS 类，并通过修改 className 来应用样式，可以减少回流。

示例: 

1
2
3
4
5
6
7
8
9
10
11
12
13
// 不推荐的做法：逐条修改样式
element.style.width = '100px';
element.style.height = '50px';
element.style.padding = '10px';

// 推荐的做法：预先定义 CSS 类
.element-class {
    width: 100px;
    height: 50px;
    padding: 10px;
}

element.className = 'element-class';

总结

减少回流的策略主要包括： - 使用 transform 替代位置属性（如 top、left）。 - 避免在循环中频繁操作 DOM，尤其是读取和写入布局属性。 - 尽量避免使用表格布局，改用现代布局模型如 Flexbox 或 Grid。 - 在内存中离线修改 DOM，使用 documentFragment 来批量处理节点。 - 批量修改样式，预定义 CSS 类并通过类名切换来应用样式。

通过这些优化措施，可以有效减少回流的次数，提高网页的渲染性能，改善用户体验。 ***

26. 为什么操作 DOM 慢？（浏览器绘制过程）

1
一些 DOM 的操作或者属性访问可能会引起页面的回流和重绘，从而引起性能上的消耗。

27. DOMContentLoaded 事件和 Load 事件的区别？

在网页的生命周期中，DOMContentLoaded 事件和 load 事件用于不同的时机和目的。以下是它们的详细区别：

DOMContentLoaded 事件

  • 触发时机:
    • 当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发。此时，所有的 DOM 元素已经可以被访问和操作，但其他资源如样式表、图像和子框架还可能在加载中。
  • 用途:
    • 用于执行需要在 DOM 元素完全构建后立刻运行的 JavaScript 代码，而不必等到所有资源加载完毕。
  • 适用场景:
    • 例如，初始化页面的交互、绑定事件处理程序、操作 DOM 元素等。
  • 特点:
    • 不会等到样式表、图片、子框架等外部资源完全加载后才触发，因此通常触发较早。
    • 可以减少等待时间，使页面在 JavaScript 脚本执行时更快地准备好。

示例: 

1
2
3
4
document.addEventListener('DOMContentLoaded', (event) => {
    console.log('DOM fully loaded and parsed');
    // DOM 操作代码
});

load 事件

  • 触发时机:
    • load 事件在页面的所有资源，包括 HTML 文档、样式表、图像、子框架等完全加载完成后触发。这意味着网页的所有部分（不仅是 DOM）都已完全呈现。
  • 用途:
    • 用于执行需要在所有资源完全加载后才运行的 JavaScript 代码，比如对所有资源进行处理或计算。
  • 适用场景:
    • 例如，执行与图像、样式表、iframe 内容相关的操作，或者在网页完全加载后进行的复杂计算。
  • 特点:
    • 由于需要等待所有资源加载完毕，load 事件通常会比 DOMContentLoaded 事件稍晚触发。
    • 适合那些依赖于页面所有资源加载完成的操作。

示例: 

1
2
3
4
window.addEventListener('load', (event) => {
    console.log('All resources including images and stylesheets are fully loaded');
    // 资源加载后的操作代码
});

总结

  • DOMContentLoaded:
    • 触发时机：DOM 完全加载和解析完成时。
    • 不等待其他资源（如图片、样式表）的加载。
    • 适用于 DOM 操作和初始化脚本。
  • load:
    • 触发时机：所有资源（HTML、样式表、图像等）完全加载完成时。
    • 适用于需要等所有资源加载后的操作。

通过理解这两个事件的触发时机和用途，可以更有效地管理和优化网页的加载和初始化过程。 ***

28. HTML5 有哪些新特性、移除了那些元素？

HTML5 对于现代网页开发带来了许多重要的新特性，同时也移除了了一些过时的元素。下面详细介绍这些新特性和移除的元素：

HTML5 新特性

  1. 绘图：<canvas>
    • 功能: 提供了一个绘图区域，可以用来绘制图形、游戏图像、动画等。
    • 示例: 
      1
      2
      3
      4
      5
      6
      7
      <canvas id="myCanvas" width="200" height="100"></canvas>
      <script>
          var canvas = document.getElementById('myCanvas');
          var context = canvas.getContext('2d');
          context.fillStyle = 'red';
          context.fillRect(10, 10, 150, 80);
      </script>
  2. 多媒体：<video> 和 <audio>
    • 功能: 允许直接在网页中嵌入和播放视频和音频文件。
    • 示例: 
      1
      2
      3
      4
      5
      6
      7
      8
      9
      <video width="320" height="240" controls>
          <source src="movie.mp4" type="video/mp4">
          Your browser does not support the video tag.
      </video>

      <audio controls>
          <source src="audio.mp3" type="audio/mpeg">
          Your browser does not support the audio element.
      </audio>
  3. 本地存储：localStorage 和 sessionStorage
    • 功能: 提供了在客户端存储数据的机制，localStorage 数据在浏览器关闭后仍然存在，而 sessionStorage 数据在浏览器关闭后删除。
    • 示例: 
      1
      2
      3
      4
      5
      6
      7
      // localStorage
      localStorage.setItem('key', 'value');
      var data = localStorage.getItem('key');

      // sessionStorage
      sessionStorage.setItem('key', 'value');
      var data = sessionStorage.getItem('key');
  4. 语义化元素
    • 新元素: <article>, <footer>, <header>, <nav>, <section>
    • 功能: 提供了更有语义的结构化方式来组织网页内容，增强了文档的可读性和SEO优化。
    • 示例: 
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      <header>
          <h1>My Website</h1>
          <nav>
              <ul>
                  <li><a href="#">Home</a></li>
                  <li><a href="#">About</a></li>
              </ul>
          </nav>
      </header>

      <article>
          <h2>Article Title</h2>
          <p>This is the article content.</p>
      </article>

      <footer>
          <p>Footer content here.</p>
      </footer>
  5. 表单控件
    • 新控件: <input type="calendar">, <input type="date">, <input type="time">, <input type="email">, <input type="url">, <input type="search">
    • 功能: 提供了更丰富的表单控件类型，增强了用户输入的交互性和数据验证。
    • 示例: 
      1
      2
      3
      4
      <input type="date">
      <input type="email">
      <input type="url">
      <input type="search">
  6. 新技术
    • Web Workers: 允许在后台线程中执行 JavaScript，提升网页的性能。
    • WebSockets: 提供了在客户端和服务器之间建立持久连接的方式，用于实时数据传输。
    • 示例: 
      1
      2
      3
      4
      5
      6
      7
      8
      9
      // Web Worker 示例
      var worker = new Worker('worker.js');
      worker.postMessage('Hello World');

      // WebSocket 示例
      var socket = new WebSocket('ws://example.com/socket');
      socket.onmessage = function(event) {
          console.log('Message from server ', event.data);
      };
  7. 文档属性：document.visibilityState
    • 功能: 提供了文档当前的可见性状态，例如页面是否在前台或后台，帮助开发者优化用户体验。
    • 示例: 
      1
      2
      3
      4
      5
      6
      7
      document.addEventListener('visibilitychange', function() {
          if (document.visibilityState === 'hidden') {
              console.log('Page is not visible');
          } else {
              console.log('Page is visible');
          }
      });

移除的元素

  1. 纯表现的元素
    • 移除的元素: <basefont>, <big>, <center>, <font>, <s>, <strike>, <tt>, <u>
    • 原因: 这些元素用于样式的直接控制，而现代的网页设计推荐使用 CSS 来进行样式调整，增强了语义化和可维护性。
  2. 对可用性产生负面影响的元素
    • 移除的元素: <frame>, <frameset>, <noframes>
    • 原因: <frame> 和 <frameset> 被认为会影响网页的可用性和用户体验，因此被移除。现代网页设计推荐使用 <iframe> 代替，并通过 CSS 和 JavaScript 来实现相似的效果。

总结

HTML5 的引入不仅增加了对多媒体、图形、存储等功能的支持，还改善了网页的语义化和用户体验。同时，HTML5 也移除了过时的元素和属性，鼓励使用现代的技术和最佳实践来构建网页。 ***

29. 如何处理 HTML5 新标签的浏览器兼容问题？

旧版浏览器（如 IE6、IE7、IE8）在 HTML5 标准发布时并不完全支持新标签和特性。为了确保这些浏览器能正确解析和展示 HTML5 内容，可以采用以下方法：

1. 使用 document.createElement

旧版浏览器不会识别 HTML5 的新标签，因此需要通过 JavaScript 动态创建这些标签，以确保它们被正确处理：

  • 方法: 使用 document.createElement 方法创建 HTML5 新标签，并在页面加载时动态添加它们。这会使这些标签在旧版浏览器中被识别为有效的 HTML 元素。

  • 步骤:

    1. 在页面的 <head> 部分添加以下 JavaScript 代码： 

      1
      2
      3
      4
      5
      6
      7
      <script>
          // Array of HTML5 elements to be recognized by older browsers
          var elements = ['header', 'footer', 'section', 'article', 'nav', 'aside', 'figure', 'figcaption'];
          for (var i = 0; i < elements.length; i++) {
              document.createElement(elements[i]);
          }
      </script>

    2. 这段代码将创建一系列 HTML5 元素，使它们在旧版浏览器中被识别和渲染。

  • 注意: 这种方法主要是让浏览器知道这些标签的存在，但默认的样式（如边距、字体大小等）可能仍然需要通过 CSS 来补充。

2. 使用 html5shiv

html5shiv 是一个 JavaScript 库，它的作用是使旧版 IE 浏览器（IE8 及以下）能够识别和正确处理 HTML5 的新标签。它通过动态地为这些新标签创建 DOM 元素，并为它们应用默认的样式，从而在旧版浏览器中提供兼容性。

  • 如何使用:
    1. 将 html5shiv 的 JavaScript 文件引入到你的 HTML 页面中： 
      1
      2
      3
      <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv/dist/html5shiv.min.js"></script>
      <![endif]-->
      这段代码的作用是仅在 IE9 及以下版本中加载 html5shiv。[if lt IE 9] 是一个条件注释，它指定了只有在 IE9 及以下版本中才会执行其中的脚本。
  • 工作原理:
    1. html5shiv 会为 HTML5 标签创建一个新的 DOM 元素，并将其添加到页面的 DOM 中。
    2. 同时，它会为这些标签应用适当的样式，以确保它们在 IE 浏览器中正常显示。
  • 使用方式:
    1. 将 <script> 标签添加到 <head> 部分的条件注释中，如上所示。
    2. 这个脚本将确保在旧版 IE 浏览器中，HTML5 标签被正确解析和渲染。

3. 默认样式的处理

即使旧版浏览器能够识别 HTML5 新标签，默认样式可能不会被自动应用。因此，需要通过 CSS 来补充样式，以确保页面在所有浏览器中都能正常显示：

  • CSS 示例: 

    1
    2
    3
    4
    /* 样式重置和基本样式 */
    header, footer, section, article, nav, aside, figure, figcaption {
        display: block;
    }

  • 工作原理: 上述 CSS 规则确保 HTML5 新标签在所有浏览器中都有默认的块级显示样式。

总结

通过 document.createElement 方法、html5shiv 库和适当的 CSS 样式，可以有效地使旧版浏览器（如 IE6/IE7/IE8）支持 HTML5 新标签。html5shiv 是一个成熟的解决方案，可以帮助开发者处理兼容性问题，而 document.createElement 方法提供了一个简单的备选方案。在实际应用中，通常会结合这两种方法，以确保网页在不同浏览器中的一致性和兼容性。 ***

30. 简述一下你对 HTML 语义化的理解？

1. 用正确的标签做正确的事情

HTML 语义化的核心原则是使用最合适的标签来描述网页内容的结构和意义。正确使用标签不仅能够使网页结构更加清晰，还能提升网页的可读性和可维护性。

2. 页面内容结构化

通过语义化的标签，网页内容可以更好地被结构化，浏览器和搜索引擎能够更容易地解析和理解网页内容。这样不仅有利于网页在没有样式的情况下也能以一种文档格式显示，还能提升搜索引擎优化（SEO）效果。

3. 提升无样式情况下的可读性

即使在没有 CSS 样式的情况下，语义化的 HTML 文档依然能够以一种清晰、易读的格式展示给用户。这对于使用屏幕阅读器的用户尤其重要，因为语义化的标签能够帮助屏幕阅读器正确解读和朗读网页内容。

4. 有利于 SEO

搜索引擎的爬虫依赖 HTML 标签来确定网页内容的上下文和关键字的权重。语义化的 HTML 标签能够帮助爬虫更好地理解网页内容，从而提升网页在搜索结果中的排名。例如，使用 <strong> 标签而不是 <b> 标签，可以让爬虫知道该内容具有更高的重要性。

5. 提高代码可读性和可维护性

语义化的标签可以让开发者更容易地阅读和维护代码。例如，使用 <header> 和 <footer> 标签来表示网页的头部和尾部，使用 <nav> 标签来表示导航菜单，可以使代码结构更加清晰，便于开发者快速理解和修改。

具体示例和对比

示例1：使用语义化标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <header>
        <h1>网站标题</h1>
        <nav>
            <ul>
                <li><a href="#home">首页</a></li>
                <li><a href="#about">关于我们</a></li>
                <li><a href="#contact">联系我们</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <article>
            <h2>文章标题</h2>
            <p>这是文章的内容。</p>
        </article>
        <section>
            <h3>小节标题</h3>
            <p>这是小节的内容。</p>
        </section>
    </main>
    <footer>
        <p>&copy; 2024 网站版权所有</p>
    </footer>
</body>
</html>

示例2：使用非语义化标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div class="header">
        <h1>网站标题</h1>
        <div class="nav">
            <ul>
                <li><a href="#home">首页</a></li>
                <li><a href="#about">关于我们</a></li>
                <li><a href="#contact">联系我们</a></li>
            </ul>
        </div>
    </div>
    <div class="content">
        <div class="article">
            <h2>文章标题</h2>
            <p>这是文章的内容。</p>
        </div>
        <div class="section">
            <h3>小节标题</h3>
            <p>这是小节的内容。</p>
        </div>
    </div>
    <div class="footer">
        <p>&copy; 2024 网站版权所有</p>
    </div>
</body>
</html>

对比分析

  • 结构清晰度：语义化标签（如 <header>、<nav>、<main>、<article>、<section>、<footer>）使得文档结构更加清晰，而非语义化标签（如 <div>）则让文档结构显得杂乱无章。
  • 可读性和可维护性：使用语义化标签的代码更易读和维护，因为标签本身就能传达其功能和意义。
  • 无样式下的展示：语义化标签在无样式的情况下展示效果更好，因为它们有默认的样式，而 <div> 标签没有。
  • SEO：语义化标签对搜索引擎爬虫更加友好，有助于提升网页的搜索引擎排名。

总结

HTML 语义化不仅是为了使网页结构更清晰和易于维护，也是为了提升网页的可访问性和搜索引擎优化效果。通过使用正确的标签来表达内容的意义，开发者能够创建更加现代、易读和易维护的网页。HTML5 提供了大量语义化标签，帮助开发者更好地组织和呈现网页内容。 ***

31. b 与 strong 的区别和 i 与 em 的区别？

b 与 strong 的区别

1. b 标签

  • 功能: <b> 标签用于将文本显示为粗体。
  • 语义: 没有语义上的强调，纯粹是为了样式上的加粗。
  • 使用场景: 当需要纯粹的视觉加粗效果时使用，适用于不需要传递任何特殊意义的文本。

2. strong 标签

  • 功能: <strong> 标签也用于将文本显示为粗体。
  • 语义: 表示文本具有重要性或强调的语义。在内容上有更强的强调意义。
  • 使用场景: 当需要强调文本的意义或重要性时使用，适用于需要传递强调意义的文本。

i 与 em 的区别

1. i 标签

  • 功能: <i> 标签用于将文本显示为斜体。
  • 语义: 没有语义上的强调，纯粹是为了样式上的斜体。
  • 使用场景: 当需要纯粹的视觉斜体效果时使用，适用于不需要传递任何特殊意义的文本。

2. em 标签

  • 功能: <em> 标签也用于将文本显示为斜体。
  • 语义: 表示文本具有轻微强调的语义。在内容上有一定的强调意义。
  • 使用场景: 当需要轻微强调文本的意义时使用，适用于需要传递轻微强调意义的文本。

语义和可访问性

  • 语义化的重要性: <strong> 和 <em> 标签具有语义上的强调意义，对搜索引擎爬虫和辅助技术（如屏幕阅读器）更友好。搜索引擎可以根据这些标签判断文本的重要性，辅助技术可以通过语音提示用户哪些部分是需要注意的。
  • 屏幕阅读器的表现: 屏幕阅读器在读取 <strong> 标签时会加重语气，而在读取 <b> 标签时不会有语气变化。同样，屏幕阅读器在读取 <em> 标签时会有轻微的语气变化，而在读取 <i> 标签时不会。

示例对比

示例1：无语义的加粗和斜体

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p>This is a <b>bold</b> word.</p>
    <p>This is an <i>italic</i> word.</p>
</body>
</html>

示例2：有语义的加粗和斜体

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p>This is a <strong>strongly emphasized</strong> word.</p>
    <p>This is an <em>emphasized</em> word.</p>
</body>
</html>

总结

  • 视觉效果: <b> 和 <strong> 标签的视觉效果都是加粗，<i> 和 <em> 标签的视觉效果都是斜体。
  • 语义差异: <b> 和 <i> 只是视觉样式标签，没有语义上的强调；<strong> 和 <em> 是语义化标签，具有强调意义。
  • SEO 和可访问性: 使用 <strong> 和 <em> 标签有助于SEO和可访问性，因为它们能传递文本的重要性和强调程度给搜索引擎和辅助技术。

使用语义化标签不仅有助于提升网页的可读性和可维护性，还能提高网页在搜索引擎中的排名以及提升用户的访问体验。 ***

32. 前端需要注意哪些 SEO ？

1. 合理的 title、description、keywords

  • Title:
    • 作用: 页面标题是搜索引擎抓取的第一个重要信息，也是用户在搜索结果中看到的第一个内容。
    • 优化建议:
      • 标题简洁明了，突出页面重点。
      • 重要关键词尽量靠前，出现1-2次即可。
      • 不同页面的标题应有所不同，以便区分内容。
    • 示例: 
      1
      <title>最佳前端 SEO 技巧 - 让你的网站脱颖而出</title>
  • Description:
    • 作用: 页面描述是对页面内容的高度概括，有助于提高点击率。
    • 优化建议:
      • 长度适中（通常 150-160 字符）。
      • 自然流畅地嵌入关键词，不要过度堆砌。
      • 每个页面都有独特的描述，准确反映页面内容。
    • 示例: 
      1
      <meta name="description" content="了解最佳的前端 SEO 技巧，提升你的网站在搜索引擎中的排名，增加流量。">
  • Keywords:
    • 作用: 关键词标签已经不再是搜索引擎排名的主要因素，但仍然可以作为参考。
    • 优化建议:
      • 列举出页面的重要关键词。
      • 不要堆砌过多关键词。
    • 示例: 
      1
      <meta name="keywords" content="前端, SEO, 网站优化, 关键词">

2. 语义化的 HTML 代码，符合 W3C 规范

  • 作用: 语义化的 HTML 代码使搜索引擎更容易理解网页的内容和结构，提高页面的可访问性和用户体验。
  • 优化建议:
    • 使用适当的标签（如 <header>, <nav>, <article>, <section>）来组织内容。
    • 遵循 W3C 标准，确保代码有效。
  • 示例: 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <header>
      <h1>网站标题</h1>
      <nav>
        <ul>
          <li><a href="#home">首页</a></li>
          <li><a href="#about">关于我们</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <article>
        <h2>主要内容标题</h2>
        <p>这里是主要内容。</p>
      </article>
    </main>
    <footer>
      <p>版权信息</p>
    </footer>

3. 重要内容 HTML 代码放在最前

  • 作用: 搜索引擎按从上到下的顺序抓取 HTML 内容，重要内容放在前面有助于其被优先抓取。
  • 优化建议:
    • 将重要的文本内容和关键词靠近页面顶部。
  • 示例: 
    1
    2
    3
    4
    5
    6
    7
    8
    <body>
      <main>
        <section>
          <h1>重要的内容</h1>
          <p>此段落包含关键的信息和关键词。</p>
        </section>
      </main>
    </body>

4. 重要内容不要用 JavaScript 输出

  • 作用: 搜索引擎爬虫通常不会执行 JavaScript，因此通过 JavaScript 动态生成的内容可能无法被抓取。
  • 优化建议:
    • 直接在 HTML 中输出关键内容，而不是通过 JavaScript 生成。
  • 示例: 
    1
    2
    3
    <div>
      <p>直接在 HTML 中呈现的内容。</p>
    </div>

5. 少用 iframe

  • 作用: 搜索引擎通常不会抓取 iframe 中的内容，这会影响页面的内容索引。
  • 优化建议:
    • 避免使用 iframe，尽量将内容直接嵌入页面中。
  • 示例: 
    1
    2
    3
    4
    5
    <!-- 避免使用 iframe 嵌入内容 -->
    <!-- 直接将内容嵌入 HTML -->
    <div>
      <p>直接嵌入的内容。</p>
    </div>

6. 非装饰性图片必须加 alt 属性

  • 作用: alt 属性为图片提供了替代文本，帮助搜索引擎理解图片内容，提高页面的可访问性。
  • 优化建议:
    • 为所有非装饰性图片添加描述性的 alt 属性。
  • 示例: 
    1
    <img src="example.jpg" alt="描述图片内容的文字">

7. 提高网站速度

  • 作用: 网站加载速度是搜索引擎排名的重要因素，速度越快，用户体验越好。
  • 优化建议:
    • 压缩和优化图片。
    • 使用浏览器缓存。
    • 最小化 CSS 和 JavaScript 文件。
    • 使用内容分发网络 (CDN)。
  • 示例: 
    1
    2
    3
    <!-- 示例：使用压缩过的 CSS 和 JS 文件 -->
    <link rel="stylesheet" href="styles.min.css">
    <script src="scripts.min.js"></script>

总结

通过合理的 title、description 和 keywords，使用语义化的 HTML 代码，确保重要内容容易被搜索引擎抓取，避免使用 JavaScript 输出重要内容，少用 iframe，为图片添加 alt 属性，并提高网站速度，可以有效提升网页的 SEO 表现。 ***

33. HTML5 的离线储存怎么使用，工作原理能不能解释一下？

HTML5 离线存储详解

1. 原理

HTML5 的离线存储基于 .appcache 文件的缓存机制。这不是传统意义上的存储技术，而是一种缓存机制。通过在 .appcache 文件中列出需要离线存储的资源，这些资源会被缓存下来。当网络连接断开时，浏览器会使用这些缓存的数据展示页面内容。

2. 使用步骤

  1. 创建 manifest 文件
    • 创建一个与 HTML 文件同名的 .manifest 文件。
    • 在 HTML 文件的 <html> 标签中添加 manifest 属性。
    1
    <html lang="en" manifest="index.manifest">
  2. 编写 manifest 文件
    • CACHE MANIFEST: 声明文件类型。
    • CACHE: 列出需要离线存储的资源。
    • NETWORK: 列出只能在在线状态下访问的资源。
    • FALLBACK: 指定替代资源路径。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    CACHE MANIFEST
    # v0.11
    CACHE:
    js/app.js
    css/style.css

    NETWORK:
    resource/logo.png

    FALLBACK:
    / /offline.html
  3. 操作离线缓存
    • 在离线状态下，可以通过 window.applicationCache 操作离线缓存。

3. 缓存更新

  1. 更新 manifest 文件
    • 修改 manifest 文件的内容（如版本号）。
  2. 通过 JavaScript 操作
    • 可以使用 JavaScript 来手动更新缓存。
    1
    window.applicationCache.update();
  3. 清除浏览器缓存
    • 清除浏览器缓存可以强制重新下载所有资源。

4. 注意事项

  1. 缓存容量限制
    • 各浏览器对缓存数据的容量限制不同（通常为每个站点 5MB）。
  2. 更新过程失败
    • 如果 manifest 文件或其中某个资源无法正常下载，整个更新过程会失败，浏览器继续使用旧的缓存。
  3. 同源策略
    • 引用 manifest 的 HTML 文件必须与 manifest 文件同源。
  4. FALLBACK 同源
    • FALLBACK 中的资源必须和 manifest 文件同源。
  5. 绝对路径访问
    • 一旦资源被缓存，浏览器直接请求该绝对路径也会访问缓存中的资源。
  6. 隐含缓存
    • 站点中的其他页面即使没有设置 manifest 属性，请求的资源如果在缓存中也会从缓存中访问。
  7. 触发更新
    • 当 manifest 文件发生改变时，资源请求会触发更新。

示例与操作

示例 manifest 文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
CACHE MANIFEST
# v0.11

CACHE:
js/app.js
css/style.css
images/logo.png

NETWORK:
*
http://example.com/api/

FALLBACK:
/ /offline.html

示例 HTML 文件

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
    <meta charset="UTF-8">
    <title>HTML5 Offline Example</title>
</head>
<body>
    <h1>HTML5 Offline Storage Example</h1>
    <p>This page can be viewed offline.</p>
    <script src="js/app.js"></script>
</body>
</html>

JavaScript 操作离线缓存

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 检查应用缓存的状态
if (window.applicationCache.status === window.applicationCache.UPDATEREADY) {
    // 更新已准备好，重新加载页面
    window.applicationCache.swapCache();
    window.location.reload();
}

// 监听更新事件
window.applicationCache.addEventListener('updateready', function() {
    if (window.applicationCache.status === window.applicationCache.UPDATEREADY) {
        // 更新已准备好，重新加载页面
        window.applicationCache.swapCache();
        window.location.reload();
    }
}, false);

参考资料

通过上述步骤和示例，可以有效地实现 HTML5 的离线存储，确保在用户无网络连接时也能正常访问站点或应用。 ***

34. 浏览器是怎么对 HTML5 的离线储存资源进行管理和加载的呢？

1. 在线状态下的处理流程

  1. 检测 manifest 属性
    • 浏览器在加载 HTML 页面时，检测到 <html> 标签中包含 manifest 属性。
    1
    <html lang="en" manifest="index.manifest">
  2. 请求 manifest 文件
    • 浏览器请求 index.manifest 文件。若这是用户首次访问该应用，浏览器将根据 manifest 文件内容下载并缓存相应的资源。
  3. 资源缓存
    • 浏览器将根据 manifest 文件中指定的资源列表进行下载和离线存储。manifest 文件格式如下：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    CACHE MANIFEST
    # v0.11

    CACHE:
    js/app.js
    css/style.css

    NETWORK:
    *

    FALLBACK:
    / /offline.html
  4. 资源加载
    • 浏览器从缓存中加载已下载的资源来渲染页面。
  5. 对比 manifest 文件

    • 浏览器会对比当前下载的 manifest 文件与之前缓存的 manifest 文件。

    • 如果 manifest 文件没有改变，浏览器不做任何操作。

    • 如果 manifest 文件发生变化，浏览器重新下载文件中的资源并更新离线存储。

2. 离线状态下的处理流程

  1. 资源加载
    • 当用户离线访问该应用时，浏览器直接从离线缓存中加载资源，保证应用的正常运行。

3. manifest 文件的具体行为

  1. CACHE
    • 在 CACHE 部分指定的资源会被浏览器离线存储，并在离线模式下优先使用这些资源。
    1
    2
    3
    CACHE:
    js/app.js
    css/style.css
  2. NETWORK
    • 在 NETWORK 部分指定的资源只会在在线状态下加载，并不会离线存储。星号 (*) 表示所有其他未指定的资源均需联网请求。
    1
    2
    NETWORK:
    *
  3. FALLBACK
    • 在 FALLBACK 部分指定的资源表示当请求失败时，使用备用资源。例如，当访问根目录下的资源失败时，使用 offline.html。
    1
    2
    FALLBACK:
    / /offline.html

4. manifest 文件更新触发机制

  1. 文件变动检测
    • 浏览器定期检查 manifest 文件是否更新。若有更新，浏览器会重新下载并缓存指定的资源。
  2. 版本控制
    • 在 manifest 文件中通过注释（如 # v0.11）进行版本控制，可以确保浏览器检测到文件变化。
    1
    2
    CACHE MANIFEST
    # v0.11
  3. JavaScript 操作
    • 可以通过 JavaScript 手动检查和更新离线缓存。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    // 检查应用缓存的状态
    if (window.applicationCache.status === window.applicationCache.UPDATEREADY) {
        // 更新已准备好，重新加载页面
        window.applicationCache.swapCache();
        window.location.reload();
    }

    // 监听更新事件
    window.applicationCache.addEventListener('updateready', function() {
        if (window.applicationCache.status === window.applicationCache.UPDATEREADY) {
            // 更新已准备好，重新加载页面
            window.applicationCache.swapCache();
            window.location.reload();
        }
    }, false);

5. 离线缓存的优势和局限

优势

  • 提高访问速度：即使在离线状态下也能快速加载页面。
  • 减少带宽消耗：缓存资源减少了重复下载的需求。
  • 用户体验提升：在网络不稳定时，保证用户仍能访问应用。

局限

  • 缓存容量限制：不同浏览器对缓存数据的容量限制不同。
  • 更新机制复杂：需要管理和维护 manifest 文件，确保缓存资源的同步更新。
  • 兼容性问题：需要处理不同浏览器对 HTML5 离线缓存的支持情况。

通过理解上述机制和流程，开发者可以更好地利用 HTML5 离线存储特性，为用户提供更佳的体验。 ***

35. 常见的浏览器端的存储技术有哪些？

特点 - 存储容量：约 4KB - 数据生命周期：可以设置到期时间；默认情况下，关闭浏览器即失效。 - 访问范围：同源的所有页面都能访问。 - 安全性：数据在网络请求中会被发送，有安全隐患；需要使用 HttpOnly 属性提高安全性，防止 XSS 攻击。 - 用途：主要用于会话管理（如用户登录状态）、个性化设置（如用户偏好）和追踪分析（如统计用户行为）。

使用示例 

1
2
3
4
5
6
7
8
9
10
11
12
13
// 设置 cookie
document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";

// 获取 cookie
function getCookie(name) {
    let matches = document.cookie.match(new RegExp(
        "(?:^|; )" + name.replace(/([.$?*|{}()[\]\\/+^])/g, '\\$1') + "=([^;]*)"
    ));
    return matches ? decodeURIComponent(matches[1]) : undefined;
}

// 删除 cookie
document.cookie = "username=JohnDoe; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

2. LocalStorage

特点 - 存储容量：约 5MB - 数据生命周期：永久存储，除非通过代码删除。 - 访问范围：同源的所有页面都能访问。 - 安全性：仅能被同源脚本访问；但数据暴露在浏览器环境下，容易被用户手动修改。 - 用途：适用于长期存储不敏感的数据，如用户偏好设置、应用状态等。

使用示例 

1
2
3
4
5
6
7
8
9
10
11
// 设置数据
localStorage.setItem("username", "JohnDoe");

// 获取数据
let username = localStorage.getItem("username");

// 删除数据
localStorage.removeItem("username");

// 清空所有数据
localStorage.clear();

3. SessionStorage

特点 - 存储容量：约 5MB - 数据生命周期：仅在当前会话（即页面关闭）期间有效。 - 访问范围：同源的同一窗口（或标签页）能访问。 - 安全性：仅能被同源脚本访问；但数据暴露在浏览器环境下，容易被用户手动修改。 - 用途：适用于临时数据存储，如表单数据、页面状态等。

使用示例 

1
2
3
4
5
6
7
8
9
10
11
// 设置数据
sessionStorage.setItem("username", "JohnDoe");

// 获取数据
let username = sessionStorage.getItem("username");

// 删除数据
sessionStorage.removeItem("username");

// 清空所有数据
sessionStorage.clear();

4. IndexedDB

特点 - 存储容量：理论上无限制，实际受限于硬盘容量和用户设置。 - 数据生命周期：永久存储，除非通过代码删除。 - 访问范围：同源的所有页面都能访问。 - 安全性：仅能被同源脚本访问；支持事务，数据操作更加安全和稳定。 - 用途：适用于存储大量结构化数据，如离线 Web 应用的数据存储、复杂数据的索引和查询等。

使用示例 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// 打开数据库
let request = indexedDB.open("myDatabase", 1);

request.onupgradeneeded = function(event) {
    let db = event.target.result;
    let objectStore = db.createObjectStore("users", { keyPath: "id" });
    objectStore.createIndex("name", "name", { unique: false });
};

request.onsuccess = function(event) {
    let db = event.target.result;
    let transaction = db.transaction(["users"], "readwrite");
    let objectStore = transaction.objectStore("users");
    
    // 添加数据
    let user = { id: 1, name: "JohnDoe" };
    objectStore.add(user);

    // 获取数据
    objectStore.get(1).onsuccess = function(event) {
        console.log(event.target.result);
    };
    
    // 删除数据
    objectStore.delete(1);

    // 事务完成
    transaction.oncomplete = function() {
        console.log("Transaction completed");
    };
};

5. Web SQL (已废除)

特点 - 存储容量：约 5MB - 数据生命周期：永久存储，除非通过代码删除。 - 访问范围：同源的所有页面都能访问。 - 安全性：仅能被同源脚本访问；但数据暴露在浏览器环境下，容易被用户手动修改。 - 用途：用于存储结构化数据，但已被废除，不推荐使用。

使用示例 

1
2
3
4
5
6
7
8
9
10
11
let db = openDatabase('myDatabase', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
    tx.executeSql('CREATE TABLE IF NOT EXISTS users (id unique, name)');
    tx.executeSql('INSERT INTO users (id, name) VALUES (1, "JohnDoe")');
    tx.executeSql('SELECT * FROM users', [], function (tx, results) {
        let len = results.rows.length, i;
        for (i = 0; i < len; i++) {
            console.log(results.rows.item(i).name);
        }
    });
});

6. IE UserData (较少使用)

特点 - 存储容量：约 64KB 每个存储空间（每个域最多10个）。 - 数据生命周期：永久存储，除非通过代码删除。 - 访问范围：同源的所有页面都能访问。 - 安全性：仅能被同源脚本访问；但数据暴露在浏览器环境下，容易被用户手动修改。 - 用途：适用于 IE 特定版本下的数据存储需求，现已较少使用。

使用示例 

1
2
<!-- HTML 部分 -->
<element id="userdata" style="behavior:url('#default#userData')"></element>

1
2
3
4
5
6
7
8
9
10
11
12
// 设置数据
let element = document.getElementById("userdata");
element.setAttribute("username", "JohnDoe");
element.save("myStore");

// 获取数据
element.load("myStore");
let username = element.getAttribute("username");

// 删除数据
element.removeAttribute("username");
element.save("myStore");

7. 总结

各存储技术适用于不同的应用场景，应根据实际需求选择合适的存储方式。对于大规模数据存储和复杂查询操作，推荐使用 IndexedDB；对于简单的键值对存储和短期会话数据，LocalStorage 和 SessionStorage 是不错的选择。Cookie 仍然是管理会话状态和用户跟踪的重要工具，但要注意其容量和安全性问题。 ***

36. 请描述一下 cookies，sessionStorage 和 localStorage 的区别？

见上： ***

37. iframe 有那些缺点？

iframe 的缺点

1. 阻塞主页面的 onload 事件

  • 说明：iframe 的加载会阻塞主页面的 onload 事件，即主页面的 onload 事件要等到所有 iframe 加载完毕（包括其内部的所有元素）后才会触发。
  • 解决方法：在 Safari 和 Chrome 中，可以通过 JavaScript 动态设置 iframe 的 src 属性来避免这种阻塞情况。
  • 示例： 
    1
    2
    3
    4
    // 动态设置 iframe 的 src
    var iframe = document.createElement('iframe');
    iframe.src = "your_iframe_url";
    document.body.appendChild(iframe);

2. 不利于 SEO

  • 说明：搜索引擎的检索程序（爬虫）无法有效解析和索引 iframe 中的内容，这会影响网页的 SEO 排名。
  • 解决方法：尽量避免在重要内容部分使用 iframe，改用其他技术如 AJAX 动态加载内容。

3. 共享连接池

  • 说明：iframe 和主页面共享浏览器的连接池，而浏览器对相同域的并发连接数有限制，这会影响页面的并行加载速度。
  • 示例： 
    1
    2
    3
    4
    <!-- 示例：一个页面中包含多个 iframe -->
    <iframe src="content1.html"></iframe>
    <iframe src="content2.html"></iframe>
    <iframe src="content3.html"></iframe>

4. 浏览器的后退按钮失效

  • 说明：在一些情况下，使用 iframe 会导致浏览器的后退按钮失效，用户体验不佳。
  • 解决方法：可以使用 JavaScript 管理 iframe 内部的导航逻辑，或者避免在需要导航的情况下使用 iframe。

5. 小型移动设备显示问题

  • 说明：在小型移动设备上，iframe 可能无法完全显示框架内容，导致用户体验差。
  • 解决方法：使用响应式设计，通过 CSS 媒体查询和其他技术来优化移动设备上的显示效果。

其他常见问题

安全性问题

  • 说明：iframe 容易引发跨站脚本攻击（XSS）和其他安全问题。
  • 解决方法：使用安全措施如 sandbox 属性来限制 iframe 的权限。
  • 示例： 
    1
    <iframe src="https://example.com" sandbox="allow-scripts allow-same-origin"></iframe>

浏览器兼容性问题

  • 说明：不同浏览器对 iframe 的支持和行为可能有所不同，导致兼容性问题。
  • 解决方法：在开发和测试时确保在多个浏览器上进行测试，并使用现代的网页技术来替代 iframe。

参考资料

通过了解和处理这些缺点，可以更好地使用 iframe，同时避免其带来的问题。 *** ## 38. Label 的作用是什么？是怎么用的？

作用

label 标签用于定义表单控件之间的关系。当用户点击 label 标签时，浏览器会将焦点自动转到与 label 标签关联的表单控件上。这种方式不仅提高了用户体验，还提升了表单的可访问性，使得使用屏幕阅读器的用户可以更容易地理解表单的内容和结构。

使用方法

1. 使用 for 属性

label 标签的 for 属性值应与相关控件的 id 属性值相同，从而建立关联关系。

1
2
<label for="name">Name:</label>
<input type="text" id="name" name="name">

在上面的示例中，当用户点击 "Name:" 标签时，浏览器会自动将焦点转到 id="name" 的输入框中。

2. 嵌套使用

label 标签也可以直接包裹表单控件，这样点击 label 标签的任意部分都会聚焦到相应的控件上。这种方式不需要 for 属性。

1
2
3
<label>Name:
  <input type="text" name="name">
</label>
3. 用于复选框和单选按钮

label 标签对于复选框（checkbox）和单选按钮（radio）尤为重要，可以通过点击标签来选择相应的选项。

1
2
3
4
5
6
7
<label for="subscribe">Subscribe to newsletter</label>
<input type="checkbox" id="subscribe" name="subscribe">

<label>
  <input type="checkbox" name="subscribe">
  Subscribe to newsletter
</label>

在这两个示例中，无论是使用 for 属性还是嵌套的方式，点击 "Subscribe to newsletter" 标签都会选择对应的复选框。

提高可访问性

使用 label 标签可以显著提高表单的可访问性。屏幕阅读器会读取 label 标签的内容，从而帮助视障用户更好地理解表单控件的作用。此外，label 标签使得表单控件的点击区域变大，更加符合人机工程学设计。

示例：综合示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<form>
  <div>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username">
  </div>
  <div>
    <label for="password">Password:</label>
    <input type="password" id="password" name="password">
  </div>
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
  </div>
  <div>
    <label for="subscribe">Subscribe to newsletter</label>
    <input type="checkbox" id="subscribe" name="subscribe">
  </div>
  <div>
    <label>Gender:
      <input type="radio" name="gender" value="male"> Male
      <input type="radio" name="gender" value="female"> Female
    </label>
  </div>
  <div>
    <button type="submit">Submit</button>
  </div>
</form>

在上述示例中，通过使用 label 标签，表单控件的可点击区域变得更大，用户体验得到了提升，同时也提高了表单的可访问性。

总结

label 标签通过建立表单控件之间的关联关系，不仅提升了用户体验，还增强了表单的可访问性。无论是通过 for 属性还是嵌套方式，label 标签都是表单设计中不可或缺的元素。 ***

39. HTML5 的 form 的自动完成功能是什么？

HTML5 自动完成功能（Autocomplete）

概述

HTML5 的 autocomplete 属性用于控制浏览器的自动完成功能。自动完成允许浏览器根据用户之前输入的内容提供建议和预测，从而加快数据输入速度，并提升用户体验。

属性及其值

  • autocomplete="on"（默认值）：浏览器启用自动完成。当用户在字段中开始输入时，浏览器会基于之前的输入记录显示建议选项。
  • autocomplete="off"：浏览器禁用自动完成。用户在字段中输入内容时，浏览器不会提供自动完成功能。

使用场景

  1. 表单级别：autocomplete 属性可以应用于 <form> 元素，控制整个表单的自动完成行为。 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <form autocomplete="on">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username">
        
        <label for="email">Email:</label>
        <input type="email" id="email" name="email">
        
        <button type="submit">Submit</button>
    </form>

  2. 字段级别：autocomplete 属性也可以应用于单独的 <input> 元素，控制特定字段的自动完成行为。 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <form>
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" autocomplete="on">
        
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" autocomplete="off">
        
        <button type="submit">Submit</button>
    </form>

    在这个示例中，username 字段启用了自动完成，而 email 字段则禁用了自动完成。

适用的 <input> 类型

autocomplete 属性适用于以下 <input> 类型：

  • text
  • search
  • url
  • telephone
  • email
  • password
  • date
  • datetime-local
  • month
  • range
  • time
  • week
  • color

浏览器的自动完成建议

  • 用户输入历史记录：浏览器会基于用户以前输入的内容提供建议。例如，如果用户曾经在某个表单字段中输入过 example@example.com，那么浏览器在该字段中重新输入时会自动显示 example@example.com 作为建议。
  • 表单字段的 name 属性：浏览器可能会根据字段的 name 属性值提供建议。例如，如果字段的 name 属性是 email，浏览器可能会尝试填充电子邮件地址。
  • 数据填充：自动完成功能可以帮助用户自动填充表单字段，例如地址、电话和信用卡信息。

安全和隐私

  • 敏感信息：尽管自动完成功能可以提高输入效率，但在处理敏感信息（如密码）时，用户应考虑禁用自动完成以保护隐私。
  • 禁用自动完成：如果开发者不希望浏览器保存或建议用户的输入数据，可以使用 autocomplete="off" 来禁用该功能。注意，这可能会影响用户体验，因为用户将不得不手动输入所有数据。

示例：完整的表单示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Autocomplete Example</title>
</head>
<body>
    <form autocomplete="on">
        <label for="first-name">First Name:</label>
        <input type="text" id="first-name" name="first-name" autocomplete="on">

        <label for="last-name">Last Name:</label>
        <input type="text" id="last-name" name="last-name" autocomplete="on">

        <label for="email">Email:</label>
        <input type="email" id="email" name="email" autocomplete="on">

        <label for="password">Password:</label>
        <input type="password" id="password" name="password" autocomplete="off">

        <label for="phone">Phone Number:</label>
        <input type="tel" id="phone" name="phone" autocomplete="on">

        <button type="submit">Submit</button>
    </form>
</body>
</html>

在这个示例中，autocomplete="on" 被应用于大多数字段，以启用自动完成功能，但 password 字段的自动完成被禁用，以保护用户的安全性。 ***

40. 如何实现浏览器内多个标签页之间的通信?

实现浏览器内多个标签页之间的通信

在现代浏览器中，实现标签页之间的通信通常依赖于不同的技术和机制。由于标签页之间无法直接通信，因此可以利用以下几种方式来实现通信：

1. WebSocket

  • 概念：WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。通过 WebSocket，客户端和服务器可以随时向对方发送消息，无需重新建立连接。

  • 实现方式：

    • 各个标签页都连接到同一个 WebSocket 服务器。
    • 当一个标签页向服务器发送消息时，服务器将消息广播给所有连接的客户端（即所有标签页）。
    • 浏览器中的 WebSocket API 允许在 JavaScript 中创建 WebSocket 连接，并处理消息的发送和接收。

    示例： 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    // 创建 WebSocket 连接
    const socket = new WebSocket('ws://your-websocket-server');

    // 监听消息事件
    socket.addEventListener('message', function(event) {
        console.log('Message from server ', event.data);
    });

    // 发送消息到服务器
    socket.send('Hello from tab!');

    参考资料：

2. SharedWorker

  • 概念：SharedWorker 是一种在多个浏览器上下文（标签页、窗口、iframe）中共享的线程。它允许多个标签页共享同一个工作线程，进而实现跨标签页的通信。

  • 实现方式：

    • 创建一个 SharedWorker 脚本，这个脚本在多个标签页中运行并共享。
    • 标签页通过 SharedWorker API 连接到共享线程，发送和接收消息。

    示例： 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    // worker.js
    onconnect = function(event) {
        const port = event.ports[0];
        port.onmessage = function(e) {
            port.postMessage('Received: ' + e.data);
        };
    }

    // 在标签页中使用 SharedWorker
    const worker = new SharedWorker('worker.js');
    worker.port.start();
    worker.port.postMessage('Hello from tab!');
    worker.port.onmessage = function(event) {
        console.log(event.data);
    };

    参考资料：

3. localStorage 和 StorageEvent

  • 概念：localStorage 是一种 Web 存储机制，它允许在浏览器中存储数据。localStorage 在同源的不同标签页和窗口之间共享数据。storage 事件会在 localStorage 数据变化时被触发。

  • 实现方式：

    • 一个标签页对 localStorage 进行操作并触发 storage 事件。
    • 其他标签页通过监听 storage 事件来接收数据变化通知。

    示例： 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    // 在一个标签页中
    localStorage.setItem('key', 'value');

    // 在其他标签页中监听 storage 事件
    window.addEventListener('storage', function(event) {
        if (event.key === 'key') {
            console.log('Storage changed: ', event.newValue);
        }
    });

    参考资料：

4. postMessage

  • 概念：postMessage 方法允许跨文档消息传递。它可以在不同的窗口、iframe 和标签页之间进行安全的消息传递。

  • 实现方式：

    • 使用 postMessage 方法发送消息到指定的目标窗口或标签页。
    • 使用 message 事件监听器接收消息。

    示例： 

    1
    2
    3
    4
    5
    6
    7
    8
    // 发送消息
    const otherWindow = window.open('target.html');
    otherWindow.postMessage('Hello from tab!', '*');

    // 接收消息
    window.addEventListener('message', function(event) {
        console.log('Message received: ', event.data);
    });

    参考资料：

总结

这些方法各有优缺点，可以根据实际需求选择合适的技术进行标签页之间的通信：

  • WebSocket 适用于需要实时双向通信的场景。
  • SharedWorker 适用于需要共享线程和状态的场景。
  • localStorage 适用于简单的数据同步需求，适合较少的数据量和简单的通信。
  • postMessage 适用于直接的跨文档通信，特别是在有明确目标窗口的情况下。

41. webSocket 如何兼容低版本浏览器？

为了在低版本浏览器中实现 WebSocket 兼容性，开发者通常会使用以下技术来模拟 WebSocket 的功能：

1. Adobe Flash Socket

  • 概念：在 WebSocket 被广泛支持之前，Adobe Flash 提供了一个名为 Socket 的 API，它允许 Flash 应用程序与服务器进行全双工通信。

  • 实现方式：

    • 使用 Flash 插件创建一个 Socket 对象，通过 Flash 的 ActionScript 进行数据的发送和接收。
    • Flash 插件在客户端与服务器之间充当 WebSocket 的替代品。

    示例： 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    import flash.net.Socket;
    import flash.events.Event;

    var socket:Socket = new Socket("server.example.com", 12345);
    socket.addEventListener(Event.CONNECT, onConnect);

    function onConnect(event:Event):void {
        socket.writeUTF("Hello from Flash!");
        socket.flush();
    }

    注意：Flash 插件在现代浏览器中已被淘汰，因此这种方法逐渐不再适用。

2. ActiveX HTMLFile (IE)

  • 概念：对于旧版本的 Internet Explorer，ActiveX 控件 HTMLFile 可以用于模拟服务器推送。

  • 实现方式：

    • 使用 ActiveX 控件创建一个 HTMLFile 对象来模拟类似于 WebSocket 的功能，通过 MSXML2.XMLHTTP 对象进行数据传输。

    示例： 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var xhr = new ActiveXObject("MSXML2.XMLHTTP");
    xhr.open("POST", "server.example.com", true);
    xhr.setRequestHeader("Content-Type", "text/plain");
    xhr.send("Hello from IE!");

    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            console.log(xhr.responseText);
        }
    };

    注意：ActiveX 控件在现代浏览器中不再被支持，因此此方法也逐渐不再适用。

3. 基于 Multipart 编码的 XHR

  • 概念：在一些不支持 WebSocket 的浏览器中，可以使用 XMLHttpRequest (XHR) 通过 multipart 编码模拟数据流。
  • 实现方式：
    • 使用 XHR 发起 POST 请求，设置适当的请求头，以 multipart 编码方式发送数据。
    • 服务器端需要能够处理 multipart 编码的请求并维持会话状态。
    示例： 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "server.example.com", true);
    xhr.setRequestHeader("Content-Type", "multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW");
    xhr.send("----WebKitFormBoundary7MA4YWxkTrZu0gW\r\nContent-Disposition: form-data; name=\"message\"\r\n\r\nHello from XHR!\r\n----WebKitFormBoundary7MA4YWxkTrZu0gW--");

    xhr.onload = function() {
        if (xhr.status >= 200 && xhr.status < 300) {
            console.log(xhr.responseText);
        }
    };

4. 基于长轮询的 XHR

  • 概念：长轮询（Long Polling）是一种通过不断地发起 HTTP 请求来模拟实时通信的技术。
  • 实现方式：
    • 客户端不断地发起 HTTP 请求，服务器在有新数据时才响应请求。服务器在没有数据时保持连接，直到有数据或超时。
    • 客户端在接收到服务器的响应后立即发起新的请求，从而保持与服务器的实时连接。
    示例： 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    function longPolling() {
        var xhr = new XMLHttpRequest();
        xhr.open("GET", "server.example.com/updates", true);
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                console.log(xhr.responseText);
                longPolling(); // 继续长轮询
            }
        };
        xhr.send();
    }

    longPolling();

总结

在低版本浏览器中，虽然 WebSocket 的支持有限，但可以通过这些技术模拟 WebSocket 的功能。随着技术的发展，现代浏览器对 WebSocket 的支持已经很普遍，这些旧技术的使用也逐渐减少。 ***

42. 页面可见性（Page Visibility API） 可以有哪些用途？

页面可见性（Page Visibility API）的用途

Page Visibility API 是 HTML5 提供的一个新特性，它允许开发者检测页面的可见性状态。当用户切换标签页或最小化浏览器窗口时，页面的可见性状态会发生变化。通过监听这些变化，开发者可以优化网页的行为，节省资源，提升用户体验。以下是一些常见的用途和详细介绍：

1. 优化资源使用

当页面不可见时，可以暂停或降低一些资源密集型操作，节省系统资源和电能。例如： - 暂停轮询服务器：如果页面不可见，可以暂停定期的服务器轮询，减少不必要的网络请求和服务器负载。 

1
2
3
4
5
6
7
8
9
document.addEventListener('visibilitychange', function() {
    if (document.hidden) {
        // 暂停轮询
        clearInterval(pollingInterval);
    } else {
        // 恢复轮询
        pollingInterval = setInterval(pollServer, 5000);
    }
});
- 暂停动画：可以暂停页面上的动画，避免 GPU 和 CPU 的不必要消耗。 
1
2
3
4
5
6
7
8
9
document.addEventListener('visibilitychange', function() {
    if (document.hidden) {
        // 暂停动画
        stopAnimations();
    } else {
        // 恢复动画
        startAnimations();
    }
});

2. 优化用户体验

当页面不可见时，暂停一些对用户体验没有意义的操作。例如： - 暂停音频或视频播放：当用户切换到其他标签页时，自动暂停音频或视频的播放，避免打扰用户。 

1
2
3
4
5
6
7
8
9
document.addEventListener('visibilitychange', function() {
    if (document.hidden) {
        // 暂停音视频
        videoElement.pause();
    } else {
        // 恢复播放
        videoElement.play();
    }
});

3. 提高应用性能

通过暂停不必要的任务，可以提高页面性能，特别是在多任务环境下。例如： - 暂停数据处理任务：当页面不可见时，可以暂停一些后台的数据处理任务，以减少系统负载。 

1
2
3
4
5
6
7
8
9
document.addEventListener('visibilitychange', function() {
    if (document.hidden) {
        // 暂停数据处理
        stopDataProcessing();
    } else {
        // 恢复数据处理
        startDataProcessing();
    }
});

4. 实现智能功能

利用页面可见性状态，可以实现一些智能化功能，提高应用的智能化水平。例如： - 智能推送通知：当页面不可见时，推送通知给用户，提醒他们有新的消息或更新。 

1
2
3
4
5
6
document.addEventListener('visibilitychange', function() {
    if (document.hidden) {
        // 发送推送通知
        sendPushNotification("你有新的消息！");
    }
});

示例代码

以下是一个完整的示例代码，展示如何使用 Page Visibility API 来暂停和恢复页面上的动画：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page Visibility API 示例</title>
    <style>
        @keyframes rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            animation: rotate 5s linear infinite;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        document.addEventListener('visibilitychange', function() {
            if (document.hidden) {
                document.querySelector('.box').style.animationPlayState = 'paused';
            } else {
                document.querySelector('.box').style.animationPlayState = 'running';
            }
        });
    </script>
</body>
</html>

总结

Page Visibility API 提供了一种有效的方法来检测页面的可见性状态，并根据这些状态优化网页的行为。通过暂停或降低一些资源密集型操作，不仅可以节省资源，还可以提高用户体验和应用性能。

详细资料可以参考： 《Page Visibility API 教程》

43. 如何在页面上实现一个圆形的可点击区域？

方法一：纯 HTML 实现

使用 <map> 和 <area> 标签来定义一个客户端图像映射，实现圆形的可点击区域。

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Circle Clickable Area</title>
</head>
<body>
    <img src="your-image.jpg" usemap="#circle-map" alt="Clickable Circle">
    <map name="circle-map">
        <area shape="circle" coords="100,100,50" href="https://www.example.com" alt="Clickable Circle">
    </map>
</body>
</html>

在这个示例中： - shape="circle" 定义了一个圆形区域。 - coords="100,100,50" 定义了圆心的坐标 (100, 100) 和半径 (50)。 - href 属性定义了点击该区域时的链接。

方法二：纯 CSS 实现

使用 border-radius 属性来创建一个圆形的可点击区域。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Circle Clickable Area</title>
    <style>
        .circle {
            width: 100px;
            height: 100px;
            background-color: red;
            border-radius: 50%;
            display: inline-block;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="circle" onclick="window.location.href='https://www.example.com'"></div>
</body>
</html>

在这个示例中： - width 和 height 设置为相同的值，形成一个正方形。 - border-radius: 50% 将正方形变成一个圆形。 - onclick 事件绑定到 div 元素，实现点击跳转。

方法三：纯 JavaScript 实现

通过 JavaScript 监听点击事件并判断点击位置是否在圆形区域内。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Circle Clickable Area</title>
    <style>
        #circle {
            width: 100px;
            height: 100px;
            background-color: red;
            border-radius: 50%;
            position: relative;
        }
    </style>
</head>
<body>
    <div id="circle"></div>

    <script>
        document.getElementById('circle').addEventListener('click', function(event) {
            var circle = event.target;
            var rect = circle.getBoundingClientRect();
            var circleX = rect.left + rect.width / 2;
            var circleY = rect.top + rect.height / 2;
            var clickX = event.clientX;
            var clickY = event.clientY;
            var radius = rect.width / 2;

            var distance = Math.sqrt(Math.pow(clickX - circleX, 2) + Math.pow(clickY - circleY, 2));
            if (distance <= radius) {
                window.location.href = 'https://www.example.com';
            }
        });
    </script>
</body>
</html>

在这个示例中： - 计算点击位置与圆心的距离。 - 如果距离小于或等于圆的半径，则点击在圆形区域内，执行跳转操作。

详细资料可以参考： 《如何在页面上实现一个圆形的可点击区域？》 《HTML 标签及在实际开发中的应用》

44. 实现不使用 border 画出 1 px 高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果。

1
<div style="height:1px;overflow:hidden;background:red"></div>

45. title 与 h1 的区别？

1. 定义和用途

title

  • 用途: 用于设置网页的标题，它显示在浏览器的标题栏或标签页上。
  • 属性: 位于 <head> 元素内，提供网页的标题信息。
  • 示例: 
    1
    2
    3
    <head>
        <title>网页标题</title>
    </head>

h1

  • 用途: 表示文档中的顶级标题，用于内容的分层结构。
  • 标签: 位于 <body> 元素内，用于页面内容的结构化。
  • 示例: 
    1
    <h1>这是一个一级标题</h1>

2. 对搜索引擎优化 (SEO) 的影响

title

  • 影响: title 标签是搜索引擎优化（SEO）的重要元素之一。搜索引擎会使用 title 标签内容作为页面在搜索结果中的标题。
  • 作用: 一个好的 title 标签可以显著提高网页在搜索引擎中的排名。应包含关键字，简洁明了且与页面内容相关。

h1

  • 影响: h1 标签同样对SEO非常重要。搜索引擎使用 h1 标签内容来理解页面的主要主题。
  • 作用: 页面通常只有一个 h1 标签，其内容应准确描述页面的主要内容。合理使用 h1 可以帮助搜索引擎更好地理解页面结构和内容。

3. 层次结构和语义

title

  • 层次: title 标签没有层次结构，只是单一的页面标题。
  • 语义: 提供页面整体的描述，不与页面内容的结构直接关联。

h1

  • 层次: h1 标签是文档中最高级别的标题，通常用于页面的主标题。文档可以包含多个级别的标题（<h1> 到 <h6>），h1 是最重要的。
  • 语义: 明确页面的内容结构，帮助用户和搜索引擎理解页面内容的层次和重要性。

4. 显示位置

title

  • 显示位置: 在浏览器的标签页、窗口标题栏，以及被搜索引擎用作搜索结果的标题。
  • 用户可见性: 默认情况下，用户在浏览器窗口内看不到 title 标签内容，除非查看浏览器标签页或窗口标题栏。

h1

  • 显示位置: 直接在网页内容中显示，通常位于页面的显著位置，如页面顶部。
  • 用户可见性: 明显可见，通常是页面最重要的内容之一。

示例

title 示例:

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这是网页的标题</title>
</head>
<body>
    <!-- 网页内容 -->
</body>
</html>

h1 示例:

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这是网页的标题</title>
</head>
<body>
    <h1>这是页面的主标题</h1>
    <p>这里是网页的内容。</p>
</body>
</html>

总结来说，title 和 h1 都对SEO和用户体验有重要作用，但它们的用途、显示位置和对内容的描述层次不同。合理使用这两个标签可以显著提高网页的可访问性和搜索引擎排名。 ***

46. <img> 的 title 和 alt 有什么区别？

1. 定义和用途

title 属性

  • 用途: 提供图像的补充信息，通常在用户将鼠标悬停在图像上时显示为工具提示（tooltip）。
  • 属性: 可用于任何 HTML 元素，不仅限于 <img> 标签。
  • 示例: 
    1
    <img src="example.jpg" title="这是图片的标题信息">

alt 属性

  • 用途: 提供图像的替代文本描述，用于图像无法加载时显示，也用于辅助技术如屏幕阅读器读取图像内容。
  • 属性: 是 <img> 标签的特有属性，旨在提高网页的可访问性和搜索引擎优化（SEO）。
  • 示例: 
    1
    <img src="example.jpg" alt="这是图片的替代文本">

2. 用户体验和可访问性

title 属性

  • 用户体验: 当用户将鼠标悬停在图像上时，title 属性的内容会显示为工具提示。适合提供附加信息，但并不是所有浏览器和设备都支持显示。
  • 可访问性: 对于使用屏幕阅读器的用户，title 属性的内容可能不会被读取，取决于屏幕阅读器和浏览器的实现。

alt 属性

  • 用户体验: 当图像无法加载时，alt 属性的内容会显示在图像位置上，帮助用户理解图像的内容。
  • 可访问性: 屏幕阅读器会读取 alt 属性的内容，帮助视障用户理解图像的意义。alt 属性对于提高网页的可访问性非常重要。
  • SEO: 搜索引擎会分析 alt 属性的内容，帮助理解图像的上下文和页面内容，从而提高搜索引擎排名。

3. 使用场景

title 属性

  • 工具提示: 用于提供额外的信息，用户不需要立即看到，但可以通过鼠标悬停获取。
  • 示例: 
    1
    <img src="example.jpg" title="这是一张描述风景的图片">

alt 属性

  • 替代文本: 当图像加载失败时，alt 属性的内容作为替代文本显示。对于装饰性图像，可以将 alt 属性留空。
  • 辅助技术: 提供图像内容的文字描述，帮助使用屏幕阅读器的用户。
  • SEO: 提高图像和页面的可搜索性。
  • 示例: 
    1
    <img src="example.jpg" alt="描述风景的图片">

4. 实践建议

  • alt 属性: 每个 <img> 标签都应包含一个有意义的 alt 属性，描述图像的内容或用途。对于纯装饰性图像，alt 属性可以为空字符串 (alt="")。
  • title 属性: 可以为 <img> 标签添加 title 属性，提供附加信息，但不要依赖它来传达关键内容，因为并不是所有用户都能看到工具提示。

5. 示例代码

带有 title 和 alt 属性的 <img> 标签:

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片示例</title>
</head>
<body>
    <img src="scenery.jpg" alt="一张描述美丽风景的图片" title="这是一张描述风景的图片">
</body>
</html>

47. Canvas 和 SVG 有什么区别？

1. 定义和技术基础

Canvas

  • 定义: Canvas 是 HTML5 提供的用于通过 JavaScript 动态绘制图形的一个绘图环境。
  • 技术基础: Canvas 是基于逐像素进行渲染的位图（bitmap）技术。

SVG

  • 定义: SVG（Scalable Vector Graphics）是一种基于 XML 描述的矢量图形格式。
  • 技术基础: SVG 是基于 XML 的矢量图形技术，每个图形元素都是一个独立的 DOM 元素。

2. 渲染方式

Canvas

  • 逐像素渲染: Canvas 的图形是逐像素绘制的，当图形进行缩放时，会出现锯齿或失真，因为它的每个像素点需要重新计算和绘制。
  • 绘制过程: 使用 JavaScript 来控制绘制过程，需要手动管理绘制状态。

SVG

  • 矢量图形: SVG 使用矢量图形进行渲染，这意味着它是基于形状和路径的描述，而不是逐像素绘制。当图形进行缩放时，不会失真或出现锯齿。
  • DOM 集成: SVG 元素是独立的 DOM 元素，可以直接通过 CSS 和 JavaScript 进行样式和事件处理。

3. 适用场景

Canvas

  • 游戏和动画: 适用于高频率更新的场景，如游戏和动画，因为它的逐像素绘制方式可以更高效地进行频繁的图形更新。
  • 图像处理: 适用于需要对图像进行像素级处理的场景，如照片编辑应用。

SVG

  • 图形和图表: 适用于静态图形和图表的展示，如数据可视化，因为它的矢量图形特性可以保证在不同分辨率下的清晰度。
  • 交互图形: 适用于需要对图形元素进行交互的场景，如点击、拖动等，因为每个图形元素都是独立的 DOM 元素，可以方便地添加事件监听。

4. 性能和复杂度

Canvas

  • 性能: 对于复杂和动态变化的场景，Canvas 的性能更优，因为它直接在一个位图上进行操作，而不需要频繁操作 DOM。
  • 复杂度: 需要手动管理绘制的状态和内容，对于复杂的图形场景，代码的复杂度较高。

SVG

  • 性能: 对于静态和简单的图形，SVG 的性能较好，但在处理大量元素和高频更新时，性能会下降，因为它需要频繁操作 DOM。
  • 复杂度: 由于每个图形元素都是独立的 DOM 元素，可以使用现有的 CSS 和 JavaScript 技术进行操作，开发复杂的交互性较高的图形相对容易。

5. 示例代码

Canvas 示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas 示例</title>
</head>
<body>
    <canvas id="myCanvas" width="500" height="500"></canvas>
    <script>
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');

        // 绘制一个矩形
        ctx.fillStyle = 'green';
        ctx.fillRect(10, 10, 100, 100);
    </script>
</body>
</html>

SVG 示例

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SVG 示例</title>
</head>
<body>
    <svg width="500" height="500">
        <!-- 绘制一个矩形 -->
        <rect x="10" y="10" width="100" height="100" fill="green" />
    </svg>
</body>
</html>

6. 总结

  • Canvas: 适合需要高频率更新和像素级操作的场景，如游戏和图像处理，但代码复杂度较高。
  • SVG: 适合静态图形和需要交互的场景，如图表和数据可视化，具有良好的可维护性和可扩展性。

详细资料可以参考： 《SVG 与 HTML5 的 canvas 各有什么优点，哪个更有前途？》

48. 网页验证码是干嘛的，是为了解决什么安全问题？

（1）区分用户是计算机还是人的公共全自动程序。可以防止恶意破解密码、刷票、论坛灌水 （2）有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试 ***

49. 渐进增强和优雅降级的定义

渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级：一开始就根据高版本浏览器构建完整的功能，然后再针对低版本浏览器进行兼容。

50. attribute 和 property 的区别是什么？

在 HTML 和 JavaScript 中，attribute 和 property 是两个经常会用到的概念，它们在 DOM 元素的不同层面上扮演着不同的角色。理解它们的区别对于前端开发者来说是非常重要的。以下是它们的详细区别和关系：

Attribute 和 Property 的定义

1. Attribute（属性）

  • HTML 属性：Attribute 是 HTML 元素在文档中作为标签所拥有的属性。它们定义了元素的初始配置和行为。
  • 示例：在 <input type="text" value="Hello"> 中，type 和 value 都是这个 input 元素的 attributes。

2. Property（属性）

  • JavaScript 属性：Property 是 DOM 元素在 JavaScript 中作为对象所拥有的属性。它们表示元素当前的状态和行为。
  • 示例：在 JavaScript 中，我们可以通过 inputElement.value 来访问或修改 input 元素的当前值。

同步和不同步的情况

1. 标准属性

对于 HTML 标准属性，attribute 和 property 是同步的，也就是说，当你修改一个元素的 attribute，关联的 property 也会自动更新，反之亦然。

  • 示例： 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <input id="myInput" type="text" value="Hello">
    <script>
      var inputElement = document.getElementById('myInput');
      console.log(inputElement.value); // "Hello"
      
      // 修改 attribute
      inputElement.setAttribute('value', 'World');
      console.log(inputElement.value); // "World"
      
      // 修改 property
      inputElement.value = 'JavaScript';
      console.log(inputElement.getAttribute('value')); // "JavaScript"
    </script>

2. 自定义属性

对于自定义属性（即非标准属性），attribute 和 property 是不同步的。修改一个 attribute 不会影响关联的 property，反之亦然。

  • 示例： 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <div id="myDiv" my-custom-attr="customValue"></div>
    <script>
      var divElement = document.getElementById('myDiv');
      
      // 获取 attribute
      console.log(divElement.getAttribute('my-custom-attr')); // "customValue"
      
      // 尝试获取 property（默认情况下是 undefined）
      console.log(divElement.myCustomAttr); // undefined
      
      // 修改 attribute
      divElement.setAttribute('my-custom-attr', 'newValue');
      console.log(divElement.getAttribute('my-custom-attr')); // "newValue"
      console.log(divElement.myCustomAttr); // undefined
      
      // 修改 property
      divElement.myCustomAttr = 'newJSValue';
      console.log(divElement.myCustomAttr); // "newJSValue"
      console.log(divElement.getAttribute('my-custom-attr')); // "newValue"
    </script>

具体区别和作用

1. Attribute 的作用

  • 定义初始状态：Attribute 用于在 HTML 中定义元素的初始状态，例如 <input value="Hello"> 定义了 input 元素的初始值为 "Hello"。
  • 作为标记：Attribute 通常用于标记或描述元素的一些特性，例如 class 和 id。

2. Property 的作用

  • 反映当前状态：Property 用于在 JavaScript 中反映元素的当前状态。例如，通过 inputElement.value 可以获取或设置 input 元素的当前值。
  • 操作和交互：Property 通常用于操作和与 DOM 元素交互，例如 element.innerHTML 可以获取或设置元素的 HTML 内容。

总结

  • Attribute：在 HTML 中定义元素的初始配置，作为标签的一部分存在。
  • Property：在 JavaScript 中定义元素的当前状态，作为对象的一部分存在。
  • 同步性：对于标准属性，attribute 和 property 是同步的；对于自定义属性，它们是不同步的。

通过了解 attribute 和 property 之间的区别，开发者可以更准确地操作和管理 DOM 元素，提高代码的可读性和维护性。 ***

51. 对 web 标准、可用性、可访问性的理解

可用性（Usability）：产品是否容易上手，用户能否完成任务，效率如何，以及这过程中用户的主观感受可好，是从用户的角度来看 产品的质量。可用性好意味着产品质量高，是企业的核心竞争力

可访问性（Accessibility）：Web 内容对于残障用户的可阅读和可理解性

可维护性（Maintainability）：一般包含两个层次，一是当系统出现问题时，快速定位并解决问题的成本，成本低则可维护性好。 二是代码是否容易被人理解，是否容易修改和增强功能。

52. IE 各版本和 Chrome 可以并行下载多少个资源？

（1） IE6 2 个并发 （2） iE7 升级之后的 6 个并发，之后版本也是 6 个 （3） Firefox，chrome 也是6个 ***

53. Flash、Ajax 各自的优缺点，在使用中如何取舍？

Flash： （1） Flash 适合处理多媒体、矢量图形、访问机器 （2） 对 CSS、处理文本上不足，不容易被搜索

Ajax： （1） Ajax 对 CSS、文本支持很好，支持搜索 （2） 多媒体、矢量图形、机器访问不足

共同点： （1） 与服务器的无刷新传递消息 （2） 可以检测用户离线和在线状态 （3） 操作 DOM ***

54. 怎么重构页面？

（1） 编写 CSS （2） 让页面结构更合理化，提升用户体验 （3） 实现良好的页面效果和提升性能 ***

55. 浏览器架构

  • 用户界面
    • 主进程
    • 内核
      • 渲染引擎
      • JS 引擎
        • 执行栈
      • 事件触发线程
        • 消息队列
          • 微任务
          • 宏任务
      • 网络异步线程
      • 定时器线程
  • 用户界面：显示和与用户交互的界面元素。
  • 主进程：负责浏览器窗口和用户界面的管理。
  • 渲染引擎：负责将 HTML 和 CSS 渲染成页面。
  • JS 引擎：执行 JavaScript 代码，处理脚本。
  • 网络线程：处理网络请求和响应。
  • 定时器线程：处理 setTimeout 和 setInterval 等定时器任务。
  • 事件触发线程：处理事件和任务队列。 ***

56. 常用的 meta 标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。

<!DOCTYPE html>  H5标准声明，使用 HTML5 doctype，不区分大小写
<head lang="en"> 标准的 lang 属性写法
<meta charset="utf-8">    声明文档使用的字符编码
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>   优先使用 IE 最新版本和 Chrome
<meta name="description" content="不超过150个字符"/>       页面描述
<meta name="keywords" content=""/>      页面关键词者
<meta name="author" content="name, email@gmail.com"/>    网页作
<meta name="robots" content="index,follow"/>      搜索引擎抓取
<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"> 为移动设备添加 viewport
<meta name="apple-mobile-web-app-title" content="标题"> iOS 设备 begin
<meta name="apple-mobile-web-app-capable" content="yes"/>  添加到主屏后的标题（iOS 6 新增）
是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<meta name="format-detection" content="telphone=no, email=no"/>  设置苹果工具栏颜色
<meta name="renderer" content="webkit">  启用360浏览器的极速模式(webkit)
<meta http-equiv="X-UA-Compatible" content="IE=edge">     避免IE使用兼容模式
<meta http-equiv="Cache-Control" content="no-siteapp" />    不让百度转码
<meta name="HandheldFriendly" content="true">     针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓
<meta name="MobileOptimized" content="320">   微软的老式浏览器
<meta name="screen-orientation" content="portrait">   uc强制竖屏
<meta name="x5-orientation" content="portrait">    QQ强制竖屏
<meta name="full-screen" content="yes">              UC强制全屏
<meta name="x5-fullscreen" content="true">       QQ强制全屏
<meta name="browsermode" content="application">   UC应用模式
<meta name="x5-page-mode" content="app">    QQ应用模式
<meta name="msapplication-tap-highlight" content="no">    windows phone 点击无高光
设置页面不缓存
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">

详细资料可以参考： 《Meta 标签用法大全》 ***

57. css reset 和 normalize.css 有什么区别？

在 Web 开发中，为了解决不同浏览器之间的样式不一致问题，开发者使用了多种方法，其中 CSS Reset 和 Normalize.css 是最常见的两种工具。以下是它们的详细区别和各自的特点：

1. CSS Reset

定义： CSS Reset 的目的是将浏览器的所有默认样式“重置”到统一的样式，以消除不同浏览器之间的样式差异。这样可以确保在不同浏览器中渲染的效果尽可能一致。

特点： - 彻底重置：CSS Reset 通过将大多数 HTML 元素的样式设置为统一的默认值（如 margin: 0、padding: 0、border: 0）来实现一致性。 - 消除默认样式：它消除了浏览器的所有默认样式设置，使得所有元素在不同的浏览器中看起来相同。 - 可能的问题：这种方法可能会移除一些有用的浏览器默认样式，导致开发者需要重新定义所有元素的样式。这可能会增加开发工作量，并且可能会影响性能，因为要为每个元素重新定义样式。

示例： 

1
2
3
4
5
6
7
/* 示例 CSS Reset */
* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}

2. Normalize.css

定义： Normalize.css 的目标是保留浏览器的有用默认样式，并对这些样式进行标准化，以尽可能保持一致性。它不是完全重置所有样式，而是进行一些调整以修复浏览器的 bug 和提升一致性。

特点： - 保留默认样式：Normalize.css 保留了有用的浏览器默认样式，并对这些样式进行调整，以提高跨浏览器的一致性。 - 修复浏览器的 bug：它修复了常见的浏览器 bug，例如 HTML5 元素的显示设置、预格式化文字的 font-size 问题等。 - 减少复杂性：与 CSS Reset 相比，Normalize.css 避免了创建复杂的继承链，使代码更易于理解和维护。 - 模块化：Normalize.css 是模块化的，你可以选择性地移除不需要的部分。 - 详细文档：提供了详细的文档和解释，说明每一行代码的作用和目的，帮助开发者了解其调整的背景和效果。

示例： 

1
2
3
4
5
6
7
8
9
/* 示例 Normalize.css 部分 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

body {
  margin: 0;
}

比较总结

  • 目标：
    • CSS Reset：彻底重置所有默认样式，确保所有浏览器中的元素外观一致。
    • Normalize.css：保留有用的默认样式，并对它们进行标准化以提高一致性。
  • 样式处理：
    • CSS Reset：重置所有元素的样式，可能需要重新定义所有样式。
    • Normalize.css：调整和修复样式问题，保留有用的默认样式，减少样式定义工作。
  • 浏览器兼容性：
    • CSS Reset：消除所有浏览器样式差异，确保一致性，但可能会导致过度重置。
    • Normalize.css：针对特定浏览器问题进行修复，保持较高的一致性和兼容性。
  • 开发工作量：
    • CSS Reset：可能需要更多的样式定义和调整工作。
    • Normalize.css：减少了开发者的样式调整工作，并提供了清晰的文档和解释。

通过使用 Normalize.css，开发者可以在不完全重置所有样式的情况下，得到一致的跨浏览器体验，避免了 CSS Reset 可能带来的过度重置和性能问题。 ***

58. 用于预格式化文本的标签是？

预格式化就是保留文字在源码中的格式 最后显示出来样式与源码中的样式一致 所见即所得。

<pre>定义预格式文本，保持文本原有的格式 ***

59. DHTML 是什么？

DHTML 将 HTML、JavaScript、DOM 以及 CSS 组合在一起，用于创造动态性更强的网页。通过 JavaScript 和 HTML DOM，能 够动态地改变 HTML 元素的样式。

DHTML 实现了网页从 Web 服务器下载后无需再经过服务的处理，而在浏览器中直接动态地更新网页的内容、排版样式和动画的功 能。例如，当鼠标指针移到文章段落中时，段落能够变成蓝色，或者当鼠标指针移到一个超级链接上时，会自动生成一个下拉式子链 接目录等。

包括： （1）动态内容（Dynamic Content）：动态地更新网页内容，可“动态”地插入、修改或删除网页的元件，如文字、图像、标记等。

（2）动态排版样式（Dynamic Style Sheets）：W3C 的 CSS 样式表提供了设定 HTML 标记的字体大小、字形、样式、粗细、文字颜色、行高度、加底线或加中间横线、缩排、与边缘距离、靠左右或置中、背景图片或颜色等排版功能，而“动态排版样式”即可以“动态”地改变排版样式。 ***

60. head 标签中必不少的是？

在 HTML 中，<head> 标签用于定义文档的头部，它包含了文档的元信息和链接到外部资源的引用。尽管 <head> 可以包含多个不同的子标签，只有 <title> 是在 <head> 中绝对必需的。

<head> 中必需的元素

  • <title>：定义文档的标题。这个标题显示在浏览器的标题栏或标签页上，是唯一一个在 <head> 部分中必须存在的元素。没有 <title> 标签，网页将不会有标题显示，可能导致浏览器和搜索引擎的处理出现问题。

其他常见的 <head> 子标签

  • <base>：指定文档中相对 URL 的基本 URL。
  • <link>：定义与文档关联的外部资源，如样式表（CSS）。例如： 
    1
    <link rel="stylesheet" href="styles.css">
  • <meta>：提供文档的元数据，如字符集、作者、描述、关键词等。例如： 
    1
    2
    <meta charset="UTF-8">
    <meta name="description" content="A brief description of the page.">
  • <script>：定义或引用脚本，如 JavaScript 文件。例如： 
    1
    <script src="script.js"></script>
  • <style>：在文档中嵌入 CSS 样式规则。例如： 
    1
    2
    3
    4
    5
    <style>
      body {
        background-color: #f0f0f0;
      }
    </style>

总结

  • 必需：<title> 是在 <head> 部分中唯一必需的元素。
  • 可选：<base>、<link>、<meta>、<script> 和 <style> 可以根据需要添加，用于提供额外的功能和信息。

确保 <title> 标签的存在可以帮助浏览器和搜索引擎正确地显示和处理你的网页。 ***

61. HTML5 新增的表单元素有？

HTML5 引入了一些新的表单元素和功能，扩展了表单的功能和用户交互方式。以下是 HTML5 中新增的表单元素的详细介绍：

1. <datalist>

定义： <datalist> 元素用于定义一个选项列表，以供 <input> 元素的自动完成功能使用。它允许用户从预定义的选项中进行选择，也可以输入自定义的值。

特点： - 选项定义：通过嵌套的 <option> 元素来定义预设的选项。 - 自动完成：当用户在输入框中输入内容时，浏览器会显示 <datalist> 中定义的选项列表，以供用户选择。

示例： 

1
2
3
4
5
6
7
8
9
<label for="fruit">Choose a fruit:</label>
<input list="fruits" id="fruit" name="fruit">

<datalist id="fruits">
  <option value="Apple">
  <option value="Banana">
  <option value="Cherry">
  <option value="Date">
</datalist>

2. <keygen>

定义： <keygen> 元素用于生成一对密钥（公钥和私钥），通常用于安全的客户端身份验证和加密。

特点： - 密钥生成：生成密钥对，私钥保存在客户端，公钥发送到服务器。 - 身份验证：服务器可以使用公钥来验证客户端的身份。 - 过时情况：由于安全性和兼容性问题，<keygen> 元素的使用已逐渐减少，并且在许多现代浏览器中可能已不再支持。

示例： 

1
2
3
<form method="post" action="/submit">
  <keygen name="keypair">
</form>

3. <output>

定义： <output> 元素用于显示计算或脚本的结果。例如，可以用于显示 JavaScript 计算的结果。

特点： - 结果显示：用于显示从脚本中计算得出的结果。 - 关联：可以与 <form> 元素中的计算操作相关联，显示表单的计算结果。

示例： 

1
2
3
4
5
<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
  <input type="number" id="a" name="a" value="0"> +
  <input type="number" id="b" name="b" value="0">
  <output name="result" for="a b">0</output>
</form>

总结

  • <datalist>：定义一个选项列表，供 <input> 元素的自动完成功能使用。
  • <keygen>：生成密钥对用于客户端身份验证（现代浏览器支持逐渐减少）。
  • <output>：用于显示计算或脚本的结果，适用于动态内容的展示。

这些新增的表单元素增强了 HTML5 表单的功能，使得用户交互更为灵活和强大。 ***

62. 在 HTML5 中，哪个方法用于获得用户的当前位置？

在 HTML5 中，可以使用 getCurrentPosition() 方法来获取用户的当前位置。这个方法属于 Geolocation API，它提供了一种获取用户地理位置的标准化方式。以下是关于 getCurrentPosition() 方法的详细信息：

Geolocation API 和 getCurrentPosition() 方法

Geolocation API 是一种浏览器接口，允许 Web 应用程序访问设备的地理位置。它主要有两个方法：getCurrentPosition() 和 watchPosition()。其中，getCurrentPosition() 用于获取当前位置，而 watchPosition() 用于持续跟踪位置变化。

getCurrentPosition() 方法

定义： getCurrentPosition() 方法用于获取用户当前的地理位置。它会尝试使用设备的 GPS、Wi-Fi、IP 地址等信息来确定位置。

语法： 

1
navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options);

  • successCallback：一个函数，当成功获取位置时调用。该函数接收一个 Position 对象作为参数。
  • errorCallback（可选）：一个函数，当获取位置失败时调用。该函数接收一个 PositionError 对象作为参数。
  • options（可选）：一个包含获取位置的选项的对象，如是否使用高精度位置、超时时间等。

Position 对象： Position 对象包含以下属性： - coords：包含位置坐标的对象。 - latitude：纬度。 - longitude：经度。 - altitude（可选）：高度。 - accuracy：位置的精确度。 - altitudeAccuracy（可选）：高度的精确度。 - heading（可选）：朝向。 - speed（可选）：移动速度。 - timestamp：获取位置的时间戳。

PositionError 对象： PositionError 对象包含以下属性： - code：错误代码。 - message：错误消息。

示例代码： 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(success, error, options);
} else {
  console.log("Geolocation is not supported by this browser.");
}

function success(position) {
  const latitude = position.coords.latitude;
  const longitude = position.coords.longitude;
  console.log(`Latitude: ${latitude}, Longitude: ${longitude}`);
}

function error(err) {
  console.warn(`ERROR(${err.code}): ${err.message}`);
}

const options = {
  enableHighAccuracy: true, // 请求高精度位置
  timeout: 5000, // 设置超时时间
  maximumAge: 0 // 位置数据的最大缓存时间
};

关键点

  • 用户权限：浏览器会要求用户授权才能访问其地理位置。用户必须允许访问位置数据，才能成功获取位置。
  • 浏览器支持：大多数现代浏览器都支持 Geolocation API，但在某些浏览器或安全设置下可能会受到限制。
  • 精度和延迟：获取位置的精度和延迟取决于设备和网络条件。使用 enableHighAccuracy 选项可以提高精度，但可能会增加延迟和耗电量。

getCurrentPosition() 方法是获取用户当前位置的标准方法，广泛应用于需要地理位置的 Web 应用程序中，如地图服务、定位功能和位置基础的推荐系统。

63. 文档的不同注释方式？

HTML 的注释方法

CSS 的注释方法 /注释内容/

JavaScript 的注释方法 /* 多行注释方式 / //单行注释方式 **

64. disabled 和 readonly 的区别？

在 HTML 中，disabled 和 readonly 是两个常用于表单元素的属性，它们用于控制用户对表单输入字段的交互权限。尽管它们看起来类似，但在功能和行为上存在一些关键的区别。以下是关于 disabled 和 readonly 属性的详细说明：

disabled 属性

定义： disabled 属性用于禁用表单元素，使其不可编辑且无法与用户交互。这个属性通常用于在特定条件下禁止用户输入或操作表单字段。

特点： - 不可交互：禁用的元素无法被点击、选择或编辑，用户不能与其交互。 - 表单提交：被禁用的元素在表单提交时不会被包含在提交的数据中。换句话说，禁用元素的值不会发送到服务器。 - 样式：通常，禁用的元素在浏览器中会以灰色或其他样式显示，以表明它们处于禁用状态。 - 脚本操作：虽然元素被禁用，但通过 JavaScript 脚本仍然可以改变其值。禁用状态影响的是用户交互，而不是程序对元素的操作。

示例： 

1
<input type="text" name="username" value="JohnDoe" disabled>

readonly 属性

定义： readonly 属性用于设置表单输入字段为只读，用户可以查看其内容，但不能进行修改。与 disabled 属性不同，readonly 只限制了用户的编辑操作，而不会阻止用户与元素进行其他交互。

特点： - 可交互：只读的元素仍然可以获得焦点，用户可以选择和复制内容。 - 表单提交：只读的元素在表单提交时会包含在提交的数据中。换句话说，只读元素的值会被发送到服务器。 - 样式：只读元素的样式通常不会有明显的变化，仍然保持其正常显示状态，除非使用 CSS 进行额外的样式调整。 - 脚本操作：可以通过 JavaScript 脚本改变只读元素的值。只读状态影响的是用户交互，而不是程序对元素的操作。

示例： 

1
<input type="text" name="username" value="JohnDoe" readonly>

关键区别

  1. 用户交互：
    • disabled：用户无法与禁用的元素进行任何交互（点击、输入、选择）。
    • readonly：用户可以选择和复制只读字段的内容，但不能修改它。
  2. 表单提交：
    • disabled：禁用的字段的值不会随表单一起提交。
    • readonly：只读字段的值会随表单一起提交。
  3. 视觉提示：
    • disabled：通常会有明显的视觉提示（如灰色背景）表明元素已禁用。
    • readonly：元素的外观通常不会变化，保持其正常显示状态。
  4. 脚本操作：
    • disabled：通过 JavaScript 可以更改其值，但无法通过用户界面进行更改。
    • readonly：通过 JavaScript 可以更改其值，也可以通过用户界面进行更改（但只读状态仍然存在）。

总结

  • 使用 disabled 属性来完全禁用表单元素，使其无法与用户交互并在表单提交时排除该字段的值。
  • 使用 readonly 属性来限制用户对表单元素内容的编辑权限，但允许内容的选择和复制，并确保该字段的值随表单一起提交。

通过合理使用这两个属性，可以更好地控制用户的输入和交互行为，以满足不同的需求和场景。 ***

65. 主流浏览器内核私有属性 css 前缀？

mozilla 内核 （firefox,flock 等） -moz webkit 内核 （safari,chrome 等） -webkit opera 内核 （opera 浏览器） -o trident 内核 （ie 浏览器） -ms ***

66. 前端性能优化？

前端性能优化旨在提升网页加载速度和用户体验。以下是详细的优化策略，涵盖了页面内容、服务器配置、CSS 和 JavaScript 的优化。

1. 页面内容方面

(1) 减少 HTTP 请求数

  • 文件合并：将多个 CSS 和 JavaScript 文件合并成一个文件，以减少 HTTP 请求次数。
  • CSS 雪碧图：将多个小图标合并成一张大图片，通过 CSS 的 background-position 属性来显示图片的不同部分，减少图片请求次数。
  • 使用 Base64：将小图片转换为 Base64 编码的字符串，直接嵌入到 CSS 文件中，进一步减少 HTTP 请求数量。

(2) 减少 DNS 查询次数

  • DNS 缓存：利用浏览器和操作系统的 DNS 缓存机制，减少重复的 DNS 查询。可以通过优化域名和使用 DNS 预解析等手段来减少 DNS 查询次数。

(3) 设置缓存策略

  • 缓存静态资源：使用 HTTP 缓存头（如 Cache-Control, Expires, ETag）来缓存不常变化的资源。浏览器可以从缓存中读取资源，而不是重新请求服务器，从而减少加载时间。

(4) 使用延迟加载

  • 图片和其他资源延迟加载：只在用户视口中看到的内容上加载资源，使用 Intersection Observer API 或类似的技术来实现懒加载。这可以减少首屏加载的时间，提升页面响应速度。

(5) 资源预加载

  • 预加载：通过 <link rel="preload"> 或 <link rel="prefetch"> 来提前加载用户可能需要的资源，提高资源的响应速度。这有助于在用户需要这些资源时，它们已经准备好并能迅速加载。

2. 服务器方面

(1) 使用 CDN 服务

  • 内容分发网络 (CDN)：将静态资源分发到全球各地的 CDN 节点上，用户请求资源时由离他们最近的节点提供服务，从而提高响应速度和减少延迟。

(2) 资源压缩

  • 启用 Gzip 或 Brotli：在服务器端启用 Gzip 或 Brotli 压缩，以减小传输文件的体积。这些压缩算法可以显著减少 HTML、CSS 和 JavaScript 文件的大小，从而提升加载速度。
  • 优化 Cookie：尽量减少发送的 Cookie 数据量。可以将静态资源（如图片、CSS、JavaScript 文件）放在不同的子域名下，以避免在请求这些资源时携带不必要的 Cookie 数据。

3. CSS 和 JavaScript 方面

(1) 优化 CSS 加载

  • 放置在 <head> 中：将 CSS 文件放在 HTML 文档的 <head> 标签中，以确保在页面渲染之前加载样式表，从而避免“闪烁”效果。
  • 避免使用 @import：尽量避免在 CSS 中使用 @import 来引入其他 CSS 文件，因为它会导致额外的 HTTP 请求并可能增加渲染延迟。

(2) 优化 JavaScript 加载

  • 放置在页面底部：将 JavaScript 文件放在 HTML 文档的底部，或者使用 defer 或 async 属性来避免阻塞页面渲染。defer 属性会使脚本在文档解析完成后执行，而 async 属性会使脚本在加载完成后立即执行。
  • 文件压缩：使用工具（如 UglifyJS、Terser、CSSNano）对 JavaScript 和 CSS 文件进行压缩和混淆，减小文件体积，提高加载速度。

参考资料

总结

前端性能优化包括多个方面的策略，从减少 HTTP 请求数、优化缓存策略、延迟加载资源到服务器端的 CDN 使用和压缩等。通过这些措施，可以显著提升网页加载速度，改善用户体验。

67. Chrome 中的 Waterfall ？

在 Chrome 浏览器中，Waterfall（瀑布图）是开发者工具中的一个重要功能，用于可视化网页加载过程中的网络请求。这种图表可以帮助开发者分析和优化页面的性能，理解各个资源的加载时间和顺序。以下是关于 Waterfall 详细的解释：

Waterfall 图的基本概念

  1. 定义：
    • Waterfall 图是一种图表，用于展示网页加载过程中每个资源的请求和响应时间。它通过时间轴上的条形图来表示每个请求的生命周期，包括发起请求、等待响应、下载数据等阶段。
  2. 组成部分：
    • 时间轴：X 轴表示时间，通常以毫秒为单位。时间轴上展示了从页面加载开始到所有资源加载完成的全过程。
    • 条形图：每个条形图代表一个网络请求（如 HTML、CSS、JavaScript 文件、图像等）。条形图的长度表示该请求的持续时间。
    • 颜色编码：不同类型的请求（如 DNS 查找、TCP 连接、请求发送、等待响应、内容下载）通常使用不同的颜色进行标识。
    • 详细信息：点击条形图可以查看详细的请求信息，如请求头、响应头、请求内容、响应内容、时间分布等。

Waterfall 图的关键指标

  1. DNS 查找时间：
    • 解析域名到 IP 地址的时间。高 DNS 查找时间可能是由于 DNS 服务器响应缓慢或域名解析次数过多。
  2. TCP 连接时间：
    • 建立 TCP 连接的时间。包括 TCP 握手的过程。
  3. 请求发送时间：
    • 从浏览器向服务器发送请求到服务器接收到请求的时间。
  4. 等待时间（TTFB）：
    • 从浏览器发送请求到收到服务器响应的时间，包括网络延迟和服务器处理时间。
  5. 内容下载时间：
    • 从服务器接收到响应到将响应内容下载到浏览器的时间。
  6. 总时间：
    • 从请求开始到资源完全加载完成的时间。

分析 Waterfall 图的技巧

  1. 识别瓶颈：
    • 查找加载时间最长的请求，检查这些请求是否可以优化。例如，较长的 DNS 查找时间可能需要改进 DNS 配置，较长的内容下载时间可能需要优化服务器性能。
  2. 优化资源加载：
    • 检查并优化并行加载的资源。使用合适的缓存策略和资源压缩可以减少加载时间。
  3. 检查依赖关系：
    • 分析资源的加载顺序和依赖关系。确保关键资源（如 CSS 和 JavaScript）优先加载，以避免阻塞页面渲染。
  4. 缩短等待时间：
    • 通过优化服务器响应时间和减少请求次数来缩短等待时间。使用更高效的服务器和内容分发网络（CDN）可以帮助减少等待时间。
  5. 避免资源阻塞：
    • 确保异步加载非关键资源，以避免阻塞页面的主要内容加载。

示例图

在 Waterfall 图中，你可以看到类似如下的条形图：

Waterfall 示例图

参考资料

总结

Waterfall 图是一个强大的工具，用于可视化和分析网页加载过程中的网络请求。通过理解和分析 Waterfall 图，你可以识别性能瓶颈，优化资源加载，改善用户体验。

68. 扫描二维码登录网页是什么原理，前后两个事件是如何联系的？

二维码登录网页的原理涉及生成二维码、与客户端交互、以及安全机制。下面是详细的工作流程和前后事件的联系：

二维码登录的核心原理

  1. 生成二维码：
    • 用户在登录页面上请求扫码登录时，服务器会生成一个唯一的临时标识符（如一个 UUID 或 token），并将其与用户的登录会话相关联。
    • 服务器生成一个包含此标识符的二维码，并将二维码展示给用户。这二维码实际上是一个带有标识符的 URL（例如：https://example.com/qr-login?uid=abcd1234）。
  2. 客户端扫描二维码：
    • 用户使用客户端应用（如微信、支付宝等）扫描这个二维码。二维码中的 URL 被客户端应用解码并发送到服务器。
    • 客户端应用通过这个 URL 向服务器发送请求，传递二维码中的标识符和用户的相关信息（如账户信息）。
  3. 服务器验证用户信息：
    • 服务器接收到来自客户端应用的信息后，会验证用户的身份。如果验证通过，服务器将用户的登录状态与二维码标识符关联起来。
    • 服务器会向登录网页发送用户信息，通知网页显示用户的登录状态。
  4. 用户确认授权：
    • 用户在客户端应用上确认授权登录后，客户端应用将该操作的结果反馈给服务器。
    • 服务器生成一个授权令牌（如 JWT 或 OAuth token），并将其发送回登录网页。
  5. 完成登录：
    • 登录网页接收到授权令牌后，完成用户登录，并可以使用该令牌进行后续的认证和信息交互。
    • 授权令牌通常在一定时间内有效，之后需要重新认证或刷新。
  6. 安全机制：
    • 超时和失效：如果二维码在规定时间内未被扫描，或者用户在授权过程中出现问题，二维码会失效，服务器会删除相关的临时标识符。
    • 网络断开：如果用户的网络断开，二维码登录过程会被中断，可能需要重新生成二维码。
    • 其他设备登录：如果同一个二维码被用于多个设备，或者在其他设备上完成了登录，之前生成的二维码和授权令牌会失效，以防止安全风险。

前后事件的联系

  1. 用户请求登录：
    • 用户访问登录页面并请求扫码登录。
    • 服务器生成临时标识符和二维码。
  2. 二维码展示：
    • 登录页面显示二维码，用户扫描二维码。
  3. 客户端扫描二维码：
    • 客户端应用扫描二维码并发送用户信息和标识符到服务器。
  4. 服务器验证和用户确认：
    • 服务器验证用户信息并将状态通知登录网页。
    • 用户在客户端应用上确认授权，服务器生成授权令牌。
  5. 完成登录：
    • 登录网页接收到授权令牌并完成登录。
  6. 安全处理：
    • 服务器处理超时、网络断开、其他设备登录等情况，确保登录过程的安全性。

示例流程图

  1. 用户访问登录页面
  2. 服务器生成二维码并展示
  3. 用户扫描二维码
  4. 客户端应用发送用户信息到服务器
  5. 服务器验证用户并通知登录网页
  6. 用户在客户端确认授权
  7. 服务器生成并发送授权令牌
  8. 登录网页完成登录并使用令牌

参考资料

通过这种二维码登录的方式，用户可以在移动设备上安全地完成登录操作，同时确保了桌面端的安全性，减少了恶意软件对用户账户的威胁。 *** ## 69. Html 规范中为什么要求引用资源不加协议头http或者https？

在 HTML 规范和现代 Web 开发中，使用协议相对 URL（Protocol-Relative URL）是一种常见的做法。这种做法有助于在不同的协议（HTTP 或 HTTPS）下正确加载资源。以下是详细的解释和原因：

什么是协议相对 URL？

协议相对 URL 是一种 URL 格式，它省略了协议头（如 http: 或 https:），只保留 URL 的路径部分。例如： - 协议相对 URL: //example.com/resource.js - 绝对 URL: https://example.com/resource.js

为什么使用协议相对 URL？

  1. 解决混合内容问题：
    • 混合内容：如果一个页面通过 HTTPS 协议访问，但页面中的某些资源（如脚本、样式表、图像等）通过 HTTP 协议加载，这会导致“混合内容”警告。浏览器会提示用户这些资源是不安全的，因为它们没有加密。
    • 协议相对 URL：通过省略协议头，协议相对 URL 允许浏览器自动使用与页面相同的协议（HTTPS 或 HTTP）来请求资源，从而避免了混合内容警告。
  2. 提高兼容性：
    • 在某些情况下，网页可能会被同时在 HTTP 和 HTTPS 下访问。使用协议相对 URL 可以确保在任何协议下都能正确加载资源，而不需要为每种情况单独指定协议。
    • 这种做法使得网页在不同的协议环境中具有更好的兼容性，尤其是在需要在不确定协议的情况下工作时。
  3. 减少数据量：
    • 省略协议头可以减少 URL 的长度。例如，//example.com/resource.js 比 https://example.com/resource.js 少了 5 个字节。这在大量使用 URL 的情况下可能带来微小的性能提升。

现代 Web 开发中的注意事项

尽管协议相对 URL 在过去被广泛使用，但随着安全标准的提高，特别是对 HTTPS 的普及，一些现代开发实践已逐渐转向使用绝对 HTTPS URL。这是因为：

  1. HTTPS 的普及：
    • 大多数现代网站都使用 HTTPS 协议来提高安全性，因此绝对 HTTPS URL 可以确保资源始终通过安全协议加载。
  2. 浏览器兼容性：
    • 现代浏览器对协议相对 URL 的支持可能会有所不同，特别是在安全性方面。因此，使用绝对 HTTPS URL 可以避免潜在的兼容性问题。
  3. 明确性和安全性：
    • 使用绝对 HTTPS URL 可以明确地指定资源的加载协议，提高了安全性和明确性，避免了在 HTTPS 页面上因加载 HTTP 资源而引发的安全警告。

示例代码

使用协议相对 URL

1
2
<script src="//example.com/scripts/main.js"></script>
<link rel="stylesheet" href="//example.com/styles/main.css">

使用绝对 HTTPS URL

1
2
<script src="https://example.com/scripts/main.js"></script>
<link rel="stylesheet" href="https://example.com/styles/main.css">

参考资料

总结

使用协议相对 URL 是为了确保在不同协议下正确加载资源，同时避免混合内容警告。然而，随着 HTTPS 的广泛应用，推荐使用绝对 HTTPS URL 以确保资源的安全加载和兼容性。 ***