这里我来盘一盘前端面试中会出现的比较基本的内容——HTML & CSS & Javascript 三件套相关知识@3@ ## HTML 语义化与可访问性（a11y） ### 语义化是什么？常用的语义化标签有哪些？使用语义化标签有哪些好处？语义化，指的是 HTML 的标签应该体现这个元素所扮演的角色或代表的含义，与之相对的，非语义化的标签通常只有样式上的含义。常见的语义化标签有： - 文档结构类：header, nav, main, section, article, aside, footer 等 - 文本语义类：h1~h6, p, strong, em, mark, abbr, blockquote, cite, code, time 等 - 数据表示类：table, thead, tbody, tfoot, th, caption 等 - 表单交互类：form, label, legend, button, input, textarea, fieldset 等 - 媒体相关类：figure, figcaption, audio, video, canvas 等相比于 HTML4 时代的使用 div 和 span 来进行页面布局，HTML5 时代的语义化标签能够让网页的结构更加清晰。语义化 HTML 的优点很显著： - 比如在爬虫抓取时，使用语义化标签能直接通过 h1 标签和 article 标签定位到文章的标题和内容，**有利于 SEO** - 使用语义化标签也能**提升页面的可访问性**，如视障用户在使用阅读器进行页面朗读时，strong 标签会重读，b 标签不会重读，即使它们在页面上的样式都是加粗文字 - 使用语义化标签的 HTML 对于开发者来说，阅读起来也更加轻松，在新人接手代码时能更快的定位到需要修改的位置，而不是从一大堆 div/span 中摸索，**维护成本更低** ### 什么是可访问性（a11y）？可访问性是指让网站和应用能被所有用户使用，包括残障人士，无论用户使用屏幕阅读器、键盘、语音输入，都能正常地获取信息和完成操作。 a11y：accessibility，a 中间 11 个字母 y@28@ 至于为什么要提升可访问性，一方面是要使残障用户受益，另一方面，高可访问性的网页通常也能提升普通用户浏览的体验，而且更加 SEO 友好！ ### 如何提升可访问性 1. 首先是上文提到的语义化标签，语义化标签在设计时一般都对各种情况做了优化，例如 button 标签默认是可以被聚焦，按下回车就可以触发，而使用 div 配合 onClick 事件就需要额外处理才能实现使用键盘触发。 2. 为图片添加 alt 属性，写清图片的含义，装饰性图片用空 alt 或者`aria-hidden="true"`；对于视频和音频，提供对应的文字描述或字幕。 3. 针对表单场景，每一个输入项都要有对应的 label 标签做说明；对于输入框可以使用`aria-describedby`提供额外说明。 4. 确保所有需要交互的组件能通过 tab/shift+tab 来访问，具体的做法是优先使用默认支持聚焦的语义化元素，如果是不支持聚焦的元素，如 div，可以指定它的属性`tabindex="0"`使其能够进入 tab 流。 5. 如果不能使用原生的语义化标签，必要时需要使用 ARIA 辅助属性进行补充。ARIA 指的是*Accessible Rich Internet Applications*，常见的 ARIA 属性有 role(定义元素的角色)，aria-label(提供元素的文本描述)，aria-hidden(让元素在辅助技术下隐藏)等。 6. 文本颜色与背景颜色的对比度应当合适，WCAG 标准给出的比值为对比度>=4.5:1。 7. 在 html 标签上设置正确的 lang 属性。 ## CSS Flex 与 Grid 布局布局永远是做前端绕不开的话题，CSS 为我们提供了比较现代化的两种布局方式：Flex 和 Grid。 ### Flex 布局 Flex 布局可以简单地理解为是在一条线型的轴上进行布局，这个轴我们称为主轴(main axis)，为了方便排布元素，我们将与主轴垂直的轴称为交叉轴(cross axis)。主轴的方向可以由 flex-direction 属性决定，为 row 时是水平方向进行排布，为 column 时则是在垂直方向排布元素。 #### 一、核心概念与术语 - 容器：使用 Flex 布局的容器，内部的元素排列方式根据容器的 flex-direction 决定，Flex 布局的容器 display 属性为 flex 或 inline-flex - 项目(item)：容器的直接子元素 #### 二、容器属性对于一个 class 为 container 的 Flex 容器，可以为其指定以下属性 ```css .container { display: flex; /* 建立 Flex 格式化上下文 */ flex-direction: row; /* row | row-reverse | column | column-reverse */ flex-wrap: nowrap; /* nowrap | wrap | wrap-reverse */ flex-flow: row nowrap; /* 上面两个的缩写 */ justify-content: flex-start; /* 主轴对齐：flex-start | center | space-between | space-around | space-evenly */ align-items: stretch; /* 交叉轴对齐：stretch | flex-start | center | flex-end | baseline */ align-content: stretch; /* 多行时交叉轴行间对齐：与 align-items 不同 */ gap: 12px; /* 行/列间距：gap / row-gap / column-gap */ } ``` #### 三、子项目属性在 Flex 容器下面的直接子项目，可以指定这些属性 ```css .item { order: 0; /* 排序（不影响 DOM 顺序与可访问性阅读顺序） */ flex-grow: 0; /* 有剩余空间时的放大因子 */ flex-shrink: 1; /* 不足空间时的缩小因子 */ flex-basis: auto; /* 初始主轴尺寸：auto | 0 | */ align-self: auto; /* 覆盖 align-items：auto | stretch | center | ... */ /* 常用缩写：flex: */ } ``` 对于属性缩写 flex，有一些比较常见的值： - `flex: 1`：1 1 0 (平均分配空闲空间) - `flex: auto`：1 1 auto (以内容宽高为基础再比例分配) - `flex: none`：0 0 auto (固定大小，不参与伸缩) - `flex: initial`：0 1 auto (默认) ### Grid 布局如果说 Flex 布局是线性的，那么 Grid 布局就是一个平面的布局，他可以同时在行(rows)与列(columns)两个维度去排布元素。 #### 一、核心概念与术语 - 容器：使用 Grid 布局的容器，其 display 属性为 grid 或 inline-grid - 显式网格：用 grid-template-rows/columns/areas 定义的轨道 - 隐式网格：溢出显式网格时，由 grid-auto-rows/columns 自动生成的轨道 - 轨道(track)：一行或一列 - 网格线(line)：轨道之间的分割线 - 单元格(cell)/区域(area)：若干个单元格组成区域 #### 二、容器属性对于一个 class 为 container 的 Grid 容器，可以为其指定以下属性 ```css .container { display: grid; grid-template-columns: 240px 1fr; /* 明确列 */ grid-template-rows: auto 1fr auto; /* 明确行 */ /* 简写：grid: / */ gap: 16px; /* 行/列间距 */ /* row-gap / column-gap 亦可 */ justify-items: stretch; /* 单元格内，水平方向对齐 */ align-items: stretch; /* 单元格内，垂直方向对齐 */ justify-content: stretch; /* 整个网格在容器内的水平对齐 */ align-content: stretch; /* 整个网格在容器内的垂直对齐 */ grid-auto-rows: minmax(100px, auto); /* 隐式行的尺寸 */ grid-auto-flow: row; /* 自动放置方向：row | column | dense */ } ``` #### 三、子项目属性在 Grid 容器下面的直接子项目，可以指定这些属性 ```css .item { grid-column: 2 / 4; /* 列起止（线编号或命名线） */ grid-row: 1 / span 2; /* 行起止；span 表示跨几条轨道 */ /* 简写：grid-area: / / / */ justify-self: start | center | end | stretch; align-self: start | center | end | stretch; /* 简写：place-self:

*/ } ``` #### 四、轨道尺寸单位与函数在 CSS 中，有一些特定的单位和函数可以用于 Grid 布局中的元素排布 - 固定尺寸：px、rem、%等 - 弹性单位：fr(分数单位，按剩余空间进行分配) - 自适应：auto - 内容驱动：min-content、max-content - 受限弹性：minmax(最小值, 最大值) - 自动重复： - 固定重复：repeat(n, ...) - 填满轨道：repeat(auto-fill, ...) - 折叠空闲空间：repeat(auto-fit, ...) #### 五、命名区域与命名线在 Grid 布局中可以为区域和分割线命名，以实现更加精确的布局控制命名区域的写法 ```css .container { display: grid; grid-template-columns: 240px 1fr; grid-template-rows: 64px 1fr 64px; grid-template-areas: 'header header' 'sidebar main' 'footer footer'; gap: 16px; } .header { grid-area: header; } .sidebar { grid-area: sidebar; } .main { grid-area: main; } .footer { grid-area: footer; } ``` 命名分割线的写法 ```css .container { display: grid; grid-template-columns: [left] 240px [mid] 1fr [right]; } .main { grid-column: mid / right; } /* 使用命名线 */ ``` ## 回流与重绘，浏览器的渲染流程与优化技巧 ### 回流是什么？重绘又是啥？对应的性能开销？回流，指的是浏览器重新计算元素的几何信息（尺寸/位置）。重绘，指的是浏览器重新绘制像素，但是元素的几何信息不变（换色/阴影等）。我们可以看一下现代浏览器的渲染流程，从而了解回流与重绘的作用与性能开销。现代浏览器的渲染流程大致是下面这样： 1. 样式计算 2. 布局（回流） 3. 绘制到像素（重绘） 4. 栅格化 5. 合成（将不同图层拼起来）从上到下，性能开销依次降低，回流 > 重绘 > 仅合成(transform, opacity 等) ### 会触发回流/重绘的操作 #### 触发回流的常见场景 - 几何相关样式变化：`width/height`, `margin/padding`, `border-width`, `position/top/left`, `display`, `font-size`, `line-height`, `white-space`等 - DOM 结构变化：增/删/移节点，改变文档流（例如把元素从 `display:none` 切到可见） - 内容变化：文本数量改变、字体切换导致排版变化 - 滚动条出现/消失 #### 触发重绘的常见场景 - 颜色/背景/阴影：`color`, `background-*`, `box-shadow`, `outline` - `visibility` 切换（隐藏仍占位）通常不布局，但要重绘 - 边框样式变化（不改厚度时多数是重绘） #### 仅触发合成的场景 - 在**单独合成层**上改变 `transform`、`opacity`（以及部分 `filter`）前提：元素已被提升为合成层（由浏览器启发式或 `will-change`、`transform: translateZ(0)` 等 hint 触发）。 ### 减少回流与重绘的小技巧 1. **读写分离**：把**所有读取**布局的操作放在前面，把**所有写入**样式的操作放在后面；或用 rAF/微任务划帧 2. **使用合成层动画**：用 `transform/opacity`，必要时 `will-change` 提示 3. **批量 DOM 更新**： - 用 `documentFragment`/一次性 `innerHTML`、`cloneNode` 后替换 - 对列表渲染采用虚拟列表/按需渲染减少 DOM 数量 4. **避免深层影响**： - 对局部模块加**包含性**：`contain: layout paint;` 或 `contain: content;`（等价于 `layout paint`），限制影响范围 - 仅需绘制隔离时：`contain: paint;` 5. **跳过不可见内容**：`content-visibility: auto;` + `contain-intrinsic-size: 600px;` 为离屏内容跳过布局/绘制（出现时再计算） 6. **避免频繁测量**：对需要的布局信息做缓存；滚动/拖拽中节流（`requestAnimationFrame`/`throttle`） 7. **图片与文本**：给图片设置尺寸属性/占位，避免布局抖动；长文本容器配 `min-width:0; overflow:auto;` 防止撑爆触发大面积回流 8. **避免滥用 `display: none`切换**：`none`→ 可见会强制完整布局；仅隐藏可见性用 `visibility:hidden`（保留占位，通常只重绘） ## Javascript 作用域、闭包以及 this 上面谈了 HTML 和 CSS 的一些小概念，接下来聊聊 Javascript 中比较常出现的作用域和闭包的问题。 ### 作用域在谈论闭包之前，要先了解作用域的概念，而作用域就是指变量、函数的可见性范围，决定了当前执行的代码对哪些变量/函数有访问权。作用域可以分为三种类型： 1. 全局作用域：一般为js脚本的最外层，浏览器环境下为`window`，node环境下为`global` 2. 函数作用域：每个函数的调用都会创建自己的作用域 3. 块级作用域(ES6)：`let`/`const`所定义的变量，其有效范围只在当前的代码块中；`var`定义的变量不受块级作用域限制，会存在变量提升在访问一个变量时，Javascript会从当前的作用域中查找这个变量，逐层向上，最后到全局作用域，如果没有查找到就报错ReferenceError。这个向上查找的作用域链，在函数定义时就可以确定，与它被调用的位置无关。 ### 闭包闭包 = 函数 + 它定义时的作用域。当一个函数作为返回值返回到外部，它仍然会保留定义时的作用域变量访问权，这些变量不会被销毁。闭包可以实现模拟数据的私有化，外部无法直接修改，同时也能实现生成带有记忆的函数。例如： ```javascript function createCounter() { let count = 0; // 外部不可直接访问 return function() { count++; return count; }; } const counter = createCounter(); console.log(counter()); // 1 console.log(counter()); // 2 console.log(counter()); // 3 ``` 这里的`count`被返回值的函数所引用，所以不会被GC。所以在使用闭包时，要注意及时释放资源，避免内存占用过高。 ### this 关键字 `this`的绑定规则，是在运行时进行绑定，由函数的调用方式决定。常见的绑定规则有这些： 1. 默认绑定：非严格模式下指向全局对象，严格模式下指向`undefined` ```javascript function foo() { console.log(this); } foo(); // 浏览器中 -> window ``` 2. 隐式绑定：在对象调用时绑定 ```javascript const obj = { x: 10, foo() { console.log(this.x); } }; obj.foo(); // 10 ``` 3. 显式绑定：使用`call`/`apply`/`bind` ```javascript function greet(msg) { console.log(msg, this.name); } greet.call({ name: 'Alice' }, 'Hi'); // Hi Alice ``` 4. new绑定：构造函数 ```javascript function Person(name) { this.name = name; } const p = new Person('Tom'); console.log(p.name); // Tom ``` 5. 箭头函数绑定：箭头函数的`this`不受`call`/`apply`改变，继承自定义时的外层作用域 ```javascript const obj = { value: 42, foo: () => { console.log(this.value); } }; obj.foo(); // undefined，因为箭头函数里的 this 来自全局 ``` 这几种绑定规则的优先级：new绑定 > 显式绑定 > 隐式绑定 > 默认绑定 ## 事件循环，宏任务微任务机制解析 ### 事件循环简介事件循环，就是浏览器单线程模型执行任务的循环机制，记住下面的顺序就能了解： 1. 先执行当前同步执行栈的内容 2. 清空微任务队列 3. 必要时进行渲染 4. 执行下一个宏任务 5. 再次情况微任务队列 6. ……loop ### 常见的宏任务与微任务 #### 宏任务 - 浏览器：`setTimeout`、`setInterval`、`postMessage`、`MessageChannel`、`I/O`、用户交互事件回调、`onload` 等 - Node.js：`setTimeout`、`setInterval`、`setImmediate`、`I/O`、`close` 回调等 #### 微任务 `Promise.then/catch/finally`、`queueMicrotask`、`MutationObserver`、`async/await` 的继续执行部分 #### requestAnimationFrame `requestAnimationFrame` 在浏览器里属于渲染周期回调（介于微任务清空后、绘制前），不算普通宏任务。 ### Node.js的事件循环机制 ``` ┌───────────────────────────┐ │ timers │ setTimeout / setInterval └───────────────┬───────────┘ ↓ ┌───────────────────────────┐ │ pending callbacks │ 某些系统操作的回调（TCP errors 等） └───────────────┬───────────┘ ↓ ┌───────────────────────────┐ │ idle, prepare │ 内部使用 └───────────────┬───────────┘ ↓ ┌───────────────────────────┐ │ poll │ I/O 回调在这里执行 └───────────────┬───────────┘ ↓ ┌───────────────────────────┐ │ check │ setImmediate 回调 └───────────────┬───────────┘ ↓ ┌───────────────────────────┐ │ close callbacks │ 关闭事件的回调 └───────────────┬───────────┘ ↓ （下一轮循环开始） ``` Node.js 的事件循环阶段之间，还要插入微任务检查。微任务包含： - `process.nextTick`（优先级最高） - `Promise.then / catch / finally` - `queueMicrotask` 执行顺序： 1. 每个宏任务（阶段）执行完毕后，都会清空 nextTick 队列。 2. 然后清空 Promise 等微任务队列。 `setImmediate`与`setTimeout(0)`：前者在 check 阶段，后者在 timers 阶段，顺序取决于 poll 阶段状态。 ## 深拷贝与浅拷贝 ### 浅拷贝浅拷贝的特点： - 拷贝对象的第一层属性值。 - 如果属性是基本类型 → 直接复制值。 - 如果属性是引用类型（对象/数组） → 只复制引用地址。 - 修改拷贝对象里的引用类型，会影响原对象。常见的浅拷贝有如下几种实现方式： `Object.assign`： ```javascript const obj = { a: 1, b: { c: 2 } }; const copy = Object.assign({}, obj); copy.b.c = 99; console.log(obj.b.c); // 99（浅拷贝，引用共享） ``` 展开运算符 `...`： ```javascript const obj = { a: 1, b: { c: 2 } }; const copy = { ...obj }; copy.b.c = 88; console.log(obj.b.c); // 88 ``` `Array.prototype.slice` / `concat`： ```javascript const arr = [1, 2, { x: 3 }]; const copy = arr.slice(); copy[2].x = 99; console.log(arr[2].x); // 99 ``` ### 深拷贝深拷贝的特点： - 不仅复制对象本身，还会递归复制所有子对象。 - 新对象和原对象完全独立，互不影响。常见的深拷贝有如下几种实现方式： JSON 序列化： ```javascript const obj = { a: 1, b: { c: 2 } }; const copy = JSON.parse(JSON.stringify(obj)); copy.b.c = 100; console.log(obj.b.c); // 2 ``` - 忽略 `undefined`、`function`、`Symbol` - 不能处理循环引用 - 日期对象会转成字符串手写递归： ```javascript function deepClone(obj, map = new WeakMap()) { if (obj === null || typeof obj !== 'object') return obj; if (map.has(obj)) return map.get(obj); // 处理循环引用 const copy = Array.isArray(obj) ? [] : {}; map.set(obj, copy); for (let key in obj) { if (obj.hasOwnProperty(key)) { copy[key] = deepClone(obj[key], map); } } return copy; } const a = { x: 1, y: { z: 2 } }; a.self = a; // 循环引用 const b = deepClone(a); console.log(b.y.z); // 2 console.log(b.self === b); // true ``` - 需要手动处理 `Date`、`RegExp` 等特殊对象。 `structuredClone`（现代浏览器 / Node 17+）： ```javascript const obj = { a: 1, b: { c: 2 }, d: new Date() }; const copy = structuredClone(obj); copy.b.c = 42; console.log(obj.b.c); // 2 ``` - 不支持 `function`、`DOM 节点` - Node.js 版本 < 17 无法使用第三方库：lodash `_.cloneDeep`： ```javascript const _ = require('lodash'); const obj = { a: 1, b: { c: 2 } }; const copy = _.cloneDeep(obj); ``` - 稳定可靠，项目中常用。

前端面试小知识第1弹 之 基础回顾

前端面试小知识第1弹之基础回顾