Ariel's Blog

简单是可靠的前提

发表于 分类于 本文字数： 1.2k 阅读时长 ≈ 4 分钟

LRU（Least Recently Used）算法

核心概念

LRU（最近最少使用） 是一种缓存淘汰策略，其核心思想是：当缓存空间不足时，优先淘汰最长时间未被使用的数据。它基于”局部性原理”（程序在一段时间内倾向于访问相同的数据集合）。

工作原理图解

graph LR
    A[访问数据A] --> B[A移动到头部]
    C[访问数据C] --> D[C移动到头部]
    E[缓存满时添加新数据] --> F[淘汰尾部数据D]
阅读全文 »

发表于 更新于 分类于 本文字数： 7.3k 阅读时长 ≈ 27 分钟

第一题：核心与基础

Q：请简述 HTTP/1.1, HTTP/2 和 HTTP/3 在连接管理和性能优化方面的核心区别。你认为这些演进对现代前端开发（尤其是复杂应用）带来了哪些具体影响？在资源加载策略上，你会如何利用这些协议的特性？

A：

  1. 连接管理对比

    • HTTP/1.1：每个域名 6-8 个 TCP 连接，队头阻塞
    • HTTP/2：单连接多路复用，帧优先级控制
    • HTTP/3：QUIC 基于 UDP，解决 TCP 队头阻塞，支持连接迁移

  2. 性能优化差异

    • HTTP/2：Header 压缩（HPACK）、Server Push（需谨慎使用）
    • HTTP/3：TLS 1.3 内置、0-RTT 建连、更灵活的拥塞控制

  3. 前端落地策略

    • 利用多路复用：减少域名分片（反模式 HTTP/1.1），合并小请求 → 权衡缓存粒度
    • 优先级控制：通过 <link rel="preload"> 或 HTTP/2 的依赖树（Dependency Tree）
    • QUIC 优势场景：弱网环境保留会话状态（如地铁扫码场景）

当面试官追问时，需用真实项目经验佐证（如：“我在xx项目通过调整资源优先级，使 LCP 优化 40%”）

阅读全文 »

发表于 分类于 本文字数： 1.2k 阅读时长 ≈ 4 分钟

CSS 经典布局类型详解

圣杯布局 (Holy Grail Layout)

特点：

  • 三栏布局（左右固定宽度，中间自适应）
  • 中间内容优先渲染（SEO 友好）
  • 所有列等高
  • 页头和页脚横跨整个宽度

HTML 结构：

<div class="container">
  <header>Header</header>
  <div class="main">Main Content</div>
  <nav>Left Sidebar</nav>
  <aside>Right Sidebar</aside>
  <footer>Footer</footer>
</div>
阅读全文 »

发表于 更新于 分类于 本文字数： 26k 阅读时长 ≈ 1:36

一、TypeScript 基础与核心概念

1.1 类型系统深入

1.1.1 基本类型与类型推断机制

基本类型（Primitive Types）

类型 描述 示例
string 字符串类型 let name: string = “Alice”
number 数值类型（含整数/浮点数） let age: number = 30
boolean 布尔类型 let isDone: boolean = true
null 空值（需开启 strictNullChecks） let n: null = null
undefined 未定义值 let u: undefined = undefined
symbol 唯一标识符（ES6） const sym: symbol = Symbol()
bigint 大整数（ES2020） let big: bigint = 100n
void 无返回值（函数） function warn(): void { console.log() }
阅读全文 »
0%