前端面试题

DOCTYPE 用于告诉浏览器当前文档应按什么标准解析。

• 严格模式：按标准规范渲染。
• 混杂模式：兼容旧浏览器行为。

如果 DOCTYPE 缺失或写法不规范，浏览器可能进入混杂模式。

常见行内元素：

• a
• span
• img
• input

常见块级元素：

• div
• p
• ul
• li
• h1-h6

• link 属于 HTML 标签。
• @import 属于 CSS 语法。
• link 会随页面一起加载。
• @import 通常在页面加载后再处理。
• link 兼容性和可控性通常更好。

• IE：Trident
• Firefox：Gecko
• Chrome / 新版 Edge：Blink
• Safari：WebKit

常见高频点：

• 语义化标签：article、section、header、footer
• 多媒体：audio、video
• 图形：canvas
• 本地存储：localStorage、sessionStorage
• 地理定位：Geolocation
• 新表单类型和属性

语义化就是用正确的标签表达正确的内容结构。

好处：

• 更利于 SEO
• 更利于无障碍访问
• 更方便维护和阅读

• cookie 会随 HTTP 请求发送到服务端。
• sessionStorage 仅在当前会话有效。
• localStorage 持久化更久，浏览器关闭后仍可保留。

通常：

• 登录态、服务端会话相关常涉及 cookie
• 前端本地数据缓存常用 localStorage

通常可以简单记为：

!important > 内联样式 > id > class/属性/伪类 > 标签/伪元素

同优先级下，后定义的样式覆盖先定义的样式。

盒模型由以下部分组成：

• content
• padding
• border
• margin

标准盒模型里，width/height 只表示 content。
某些浏览器旧行为或 box-sizing: border-box 会改变计算方式。

块级元素常见写法：

.box {
  width: 200px;
  margin: 0 auto;
}

如果是更复杂场景，现代布局更常用：

• Flex
• Grid

因为不同浏览器对默认样式处理不同。
Reset 或 Normalize 的目的是减少浏览器默认差异，提升跨浏览器一致性。

• 事件冒泡：事件从目标元素向上层元素传播。
• 阻止冒泡：event.stopPropagation()
• 阻止默认行为：event.preventDefault()

旧版 IE 中还有兼容写法需要注意。

两者都能改变函数执行时的 this。

区别在参数传递方式：

• call(thisArg, a, b, c)
• apply(thisArg, [a, b, c])

闭包是函数和其词法作用域的组合。

常见价值：

• 封装私有变量
• 延长变量生命周期
• 实现函数式编程模式

需要注意：

• 使用不当可能造成内存占用增加

JSONP 利用了 script 标签可以跨域加载资源的特性。

它不是严格意义上的 Ajax，因为：

• 不是通过 XMLHttpRequest / fetch
• 本质上是脚本加载
• 主要用于跨域读取，不支持标准 Ajax 的很多能力

• ==：只比较值，允许类型转换。
• ===：同时比较值和类型。

前端代码里通常更推荐优先使用 ===。

同源策略要求协议、域名、端口三者都相同，浏览器才允许某些资源直接互相访问。

它是浏览器的重要安全机制，用于限制跨站读取。

现代前端最常见写法：

const result = [...new Set(arr)];

• 渐进增强：先保证基础功能，再向高能力浏览器增强体验。
• 优雅降级：先做完整高级效果，再兼容退化到较低能力环境。

现代前端更常提倡渐进增强。

伪数组指有 length 和索引结构，但不具备真正数组方法的对象，例如：

• arguments
• DOM 集合

转换方式：

Array.from(obj)
[].slice.call(obj)
[...obj]

简化流程：

1. DNS 解析
2. 建立连接
3. 发送请求
4. 服务端处理
5. 返回响应
6. 浏览器解析与渲染

如果是 HTTPS，还会额外包含 TLS 握手过程。

快速排序核心是：

1. 选择基准值
2. 把数组分成小于基准和大于基准两部分
3. 递归处理左右子数组

平均时间复杂度是 O(n log n)。