First-Interview

前端面试失利

• 主要原因：
  • 缺少前端理论（校内课程没学到，项目应用中也没有特地去学）
  • 准备不足（AI 面试前几乎没有相关知识储备）
  • 不清楚面试问题的方向

针对以上三个问题，考虑到以后大概率不会再面试前端，因此需要做另外的准备。

解决方案

• 查找相关企业的面试题目
• 学习新内容（无论是项目还是课程）时，准备一个技术文档，随时记录相关知识点（如前端理论、框架原理等）
• 了解面试常见问题的方向（如前端性能优化、浏览器渲染原理等），提前复习

具体本次面试的问题

1. 问到 CSS 如何进行优化以减少页面加载时间
2. 问到转换器和路由器的区别
3. HTML 缓存原理
4. 还有些其他问题（忘了）

一下对部分问题的回答：

前端优化

• 主要分三个方向：
  • 网络优化：使用 CDN、压缩资源文件、减少 HTTP 请求等
  • 代码优化：使用懒加载、代码分割、减少 DOM 操作等
  • 框架优化：使用框架的性能优化技巧，如 React 的 PureComponent、Vue 的异步组件等
• 资源加载的加速方法（如图片）：
  • 图片压缩
  • 图片分割（但是需要保存位置高）
  • Sprite 图（将多个小图合并成一张大图，减少 HTTP 请求）
  • CDN 加速（将资源部署到离用户更近的服务器上）
    • UNPKG 加速 CDN
  • 懒加载：也叫延迟加载，指的是在长网页中延迟加载图像（可视区域没有滚到资源需要加载的地方时候，可视区域外的资源就不会加载）
    • 实现：用户滚动时，判断元素是否在可视区域内，如果在则加载，否则不加载
  • iconfont：字体代替图
• 前端（Web）缓存：
  • 浏览器缓存：如 localStorage、sessionStorage、cookies 等
  • HTTP 缓存：分为强缓存和协商缓存
    • 强缓存：浏览器直接使用缓存，不向服务器发送请求
    • 协商缓存：浏览器向服务器发送请求，服务器返回 304 状态码，表示缓存有效
  • 原理：浏览器对缓存发起 http 请求，如果资源存在于缓存且请求头 expires 或 cache-control 中的时间未过期，则直接使用缓存，否则向服务器发送请求。向服务器请求时，通过 last-modified 和 etag 等字段来判断缓存是否有效（有效则依然使用缓存）。