面试之道（二）

一、前端路由

前端路由通过 URL 路径匹配对应的代码块，实现页面内容动态切换，而无需浏览器刷新。其核心目标是提升用户体验和优化性能。

1. Hash 路由

• 实现原理：
  利用 URL 中 # 后的哈希值标识路径（如 http://example.com/#/home）。
  • 哈希值变化不会触发页面刷新。
  • 通过 hashchange 事件监听路径变化，动态加载组件。
• 示例代码：

  window.addEventListener('hashchange', () => {
    const path = window.location.hash.slice(1) || '/';
    renderComponent(path);
  });
  

2. History 路由

• 实现原理：
  基于 HTML5 History API（pushState、replaceState）。
  • 直接操作 URL 路径（如 http://example.com/home）。
  • 监听 popstate 事件处理前进/后退操作。
• 示例代码：

  // 修改 URL
  history.pushState({}, '', '/home');
  
  // 监听路径变化
  window.addEventListener('popstate', () => {
    const path = window.location.pathname;
    renderComponent(path);
  });
  

3. 对比与选型

特性	Hash 路由	History 路由
URL 美观性	带 # 符号	无符号，更接近传统 URL
兼容性	支持所有浏览器	需 HTML5 支持
SEO 友好性	较差	较好
服务器配置要求	无需特殊配置	需配置重定向到入口文件

---

二、页面性能优化：减少白屏时间

白屏时间指从输入 URL 到页面首次渲染的时间，优化策略需覆盖全链路：

1. 网络层优化

• DNS 预解析：

  <link rel="dns-prefetch" href="//cdn.example.com">
  

• TCP 连接复用：启用 HTTP/2 多路复用，减少握手耗时。
• CDN 加速：静态资源分发至边缘节点，缩短请求路径。

2. 资源加载优化

• 代码分割：通过 Webpack 动态导入（import()）实现按需加载。
• 图片懒加载：仅加载可视区域内的图片。
• 资源压缩：使用 Gzip/Brotli 压缩 HTML/CSS/JS。

3. 渲染优化

• 减少 DOM 层级：避免嵌套过深的 HTML 结构。
• CSS 选择器优化：避免复杂选择器（如 div:nth-child(3) > a）。
• 延迟 JS 执行：将非关键脚本标记为 async 或 defer。

---

三、移动端开发核心问题

1. 屏幕适配方案

• REM 动态布局：结合 lib-flexible 自动计算根字体大小。
• 媒体查询：针对不同屏幕尺寸定制样式。

  @media screen and (max-width: 320px) {
    .title { font-size: 0.8rem; }
  }
  

2. 浏览器兼容性

• CSS Hack：针对特定浏览器编写覆盖样式。
• Babel 转译：将 ES6+ 代码降级为 ES5。

3. 交互优化

• 手势事件：监听 touchstart、touchmove、touchend 实现滑动、缩放。
• 300ms 延迟：引入 FastClick 库消除点击延迟。

---

四、数据结构：数组、链表、队列与堆

1. 数组 vs 链表

特性	数组	链表
内存结构	连续内存块	离散节点，通过指针连接
访问复杂度	O(1)（随机访问）	O(n)（需遍历）
插入/删除复杂度	O(n)（需移动元素）	O(1)（修改指针）
适用场景	频繁查询、静态数据集	频繁增删、动态数据集

2. 队列 vs 堆

特性	队列	堆
结构特性	先进先出（FIFO）	完全二叉树，父节点优先级高于子节点
插入/删除复杂度	O(1)（队尾入队，队首出队）	O(log n)（调整堆结构）
典型应用	消息队列、广度优先搜索（BFS）	优先级调度、Top K 问题（如大顶堆）

---

五、总结

• 前端路由是单页应用的基石，需根据场景选择 Hash 或 History 模式。
• 性能优化需贯穿网络请求、资源加载、渲染流水线，尤其关注首屏体验。
• 移动端开发需适配多屏幕、优化交互，并解决浏览器兼容性问题。
• 数据结构的选择直接影响算法效率，需结合业务需求权衡利弊。

掌握这些核心技术，可显著提升 Web 应用的流畅度与用户体验。