前端基础理论——02

1. 详细阐述 HTML 语义化在 SEO 重要性。

提升搜索引擎理解能力

语义化标签（如 <header>、<article>、<nav>）能明确标识页面内容的层级和主题，帮助搜索引擎爬虫快速抓取核心信息。例如，<h1> 标签中的关键词会被视为页面核心主题，直接影响搜索排名。

优化关键词匹配

语义化标签中的文本（如 <strong>、<em>）会被搜索引擎视为高权重内容。通过合理布局标签，可增强关键词相关性，提高曝光率。

增强页面结构清晰度

使用 <section> 和 <nav> 划分内容模块，建立清晰的层次结构。爬虫通过分析标签间的嵌套关系，可评估页面质量（如内容原创性、信息密度）。

2. 实现一个复杂的 CSS 动画，包含 3D 变换效果，模拟一个旋转的正方体，且正方体的每个面有不同的图案。请描述实现思路并给出关键 CSS 代码。

xml 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* 创建 3D 空间 */
        body {
            perspective: 1000px;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }

        /* 正方体容器 */
        .cube {
            position: relative;
            width: 200px;
            height: 200px;
            transform-style: preserve-3d;
            animation: rotate 10s infinite linear;
        }

        /* 定义旋转动画 */
        @keyframes rotate {
            from {
                transform: rotateX(0deg) rotateY(0deg);
            }
            to {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }

        /* 正方体的每个面 */
        .face {
            position: absolute;
            width: 200px;
            height: 200px;
            opacity: 0.8;
        }

        /* 前面 */
        .front {
            background-color: #ff0000;
            transform: translateZ(100px);
        }

        /* 后面 */
        .back {
            background-color: #00ff00;
            transform: rotateY(180deg) translateZ(100px);
        }

        /* 左面 */
        .left {
            background-color: #0000ff;
            transform: rotateY(-90deg) translateZ(100px);
        }

        /* 右面 */
        .right {
            background-color: #ffff00;
            transform: rotateY(90deg) translateZ(100px);
        }

        /* 上面 */
        .top {
            background-color: #ff00ff;
            transform: rotateX(90deg) translateZ(100px);
        }

        /* 下面 */
        .bottom {
            background-color: #00ffff;
            transform: rotateX(-90deg) translateZ(100px);
        }
    </style>
</head>

<body>
    <div class="cube">
        <div class="face front"></div>
        <div class="face back"></div>
        <div class="face left"></div>
        <div class="face right"></div>
        <div class="face top"></div>
        <div class="face bottom"></div>
    </div>
</body>

</html>

1. JavaScript 引擎是如何进行内存管理的？详细描述垃圾回收机制（如标记清除算法、引用计数算法）的工作原理，以及在实际开发中如何避免内存泄漏。

a. 内存管理流程

内存分配： JavaScript 引擎在创建变量时自动分配内存。原始类型（如 number、string）存储在栈中，引用类型（如对象、数组）存储在堆中
内存使用：变量通过引用访问堆内存中的数据。
内存释放：垃圾回收器自动识别并回收不再使用的内存空间，避免内存泄漏。

b. 垃圾回收机制

标记清除算法（Mark-Sweep）

- 原理：

- - 标记阶段：从根对象（全局变量、当前执行上下文等）出发，递归遍历所有可达对象并标记为"存活"。
  - 清除阶段：遍历堆内存，释放未被标记的对象。

- 优点：解决循环引用问题（如两个对象相互引用但无外部引用）。
- 缺点：产生内存碎片，可能影响后续内存分配效率。

引用计数算法（Reference Counting）

- 原理：跟踪每个对象的引用次数，当引用数为 0 时立即回收。
- 缺点：无法处理循环引用（如 A → B → A），导致内存泄漏。
- 现状：现代浏览器已弃用，仅作为辅助手段。

分代回收（Generational Collection）

- 原理：

- - 新生代 ：存放短生命周期对象，采用 复制算法（将存活对象复制到空闲区，清空原区域）。
  - 老生代 ：存放长生命周期对象，采用 标记-清除 + 标记-整理（整理碎片化内存）。

- 优化：结合 增量标记（将标记任务拆分，减少主线程阻塞）提升性能。

c. 避免内存泄漏

全局变量

- 问题：全局变量始终可达，不会被回收。
- 规避：使用 let/const 替代 var，通过模块化隔离作用域。

闭包未释放

- 问题：闭包保留对外部变量的引用，导致外部变量无法回收。
- 规避：在不需要时手动解除引用（如 closure = null）。

未清理的 DOM 引用与事件监听器

- 问题：移除 DOM 元素后，JavaScript 中仍保留其引用，或未移除事件监听器。
- 规避：

- - 移除 DOM 后手动置空引用（element = null）；
  - 使用 removeEventListener 移出事件监听。

定时器未清除

- 问题：setInterval/setTimeout 未清除会持续占用内存。
- 规避：使用 clearInterval/clearTimeout 及时清理。

循环引用与缓存失控

- 问题：对象间循环引用或缓存无限增长导致内存堆积。
- 规避：

- - 限制缓存大小并设置过期策略。