当前位置：首页 > news >正文

杂记 12

news 2025/10/12 6:14:42

1 CORS

CORS（Cross-Origin Resource Sharing，跨域资源共享）是一种浏览器和服务器之间的机制，用于控制不同源之间的资源访问。在理解 CORS 之前，需要先明白 “同源” 的概念：

同源的概念

“同源” 指的是两个 URL 的协议（protocol）、域名（domain）、** 端口（port）** 都完全相同。例如，https://www.example.com 与 https://www.example.com:8080 就不同源，因为端口不同；https://www.example.com 与 http://www.example.com 也不同源，因为协议不同。

为什么需要 CORS

浏览器的同源策略（Same-Origin Policy） 是一种重要的安全机制，它限制了一个源的文档或脚本如何与来自另一个源的资源进行交互，目的是防止恶意网站窃取用户信息。但在现代 Web 开发中，很多场景需要从一个域名（源）去访问另一个域名（源）的资源，比如：

前端应用部署在 https://www.client-site.com，后端 API 部署在 https://api.server-site.com，前端需要向后端 API 发送请求获取数据。
页面中嵌入第三方的字体、图片、脚本等资源，这些资源可能来自不同的域名。

为了让这种跨源访问变得安全且可行，就引入了 CORS 机制。

CORS 的工作原理

CORS 机制是通过在服务器响应中添加一些 HTTP 头信息，来告知浏览器是否允许跨源请求。主要涉及的 HTTP 头有：

Access-Control-Allow-Origin：该头是必须的，它指定了哪些源（域名）可以访问该资源。如果设置为 *，表示允许所有源访问，但在生产环境中，出于安全考虑，通常会指定具体的域名，例如 Access-Control-Allow-Origin: https://www.example.com 。
Access-Control-Allow-Methods：用于指定允许的 HTTP 请求方法，如 GET、POST、PUT、DELETE 等，多个方法用逗号分隔，比如 Access-Control-Allow-Methods: GET, POST 。
Access-Control-Allow-Headers：当请求中包含自定义头部信息时，服务器通过该头指定允许客户端发送的请求头字段。例如 Access-Control-Allow-Headers: Content-Type, Authorization 。
Access-Control-Expose-Headers：默认情况下，浏览器只允许 JavaScript 访问少数几个响应头（如 Cache-Control、Content-Language 等），该头用于指定除了默认之外，还能暴露给客户端 JavaScript 访问的响应头字段。
Access-Control-Max-Age：指定预检请求（preflight request）的结果可以被缓存的最长时间（以秒为单位）。

对于简单请求（比如使用GET、POST 且请求头只有Content-Type ，并且值是 application/x-www-form-urlencoded、multipart/form-data、text/plain 中的一种），浏览器直接发送跨源请求，服务器根据设置的 CORS 头判断是否允许访问；对于非简单请求（比如使用PUT、DELETE 等请求方法，或者自定义了请求头等），浏览器会先发送一个 OPTIONS 方法的预检请求，询问服务器是否允许该实际请求，服务器响应包含 CORS 相关头信息后，浏览器再决定是否发送实际请求。

CORS 的应用场景

前后端分离项目：前端和后端分别部署在不同的域名下，前端通过 CORS 机制向后端请求数据，是 CORS 最常见的应用场景。
第三方 API 集成：当网站需要集成第三方服务（如地图服务、社交媒体登录接口等）时，通过 CORS 可以实现安全的跨域访问。

2 前端工程师

前端工程师求职全攻略：技术栈拆解、竞争力提升与简历模板

一、招聘要求核心技术栈拆解

结合三份前端岗位（正式岗 + 实习岗）要求，核心技术栈可分为基础必备、框架核心、工程化工具、扩展能力四大类，具体如下：

技术类别	核心内容	岗位匹配点
基础必备	HTML（含 HTML5 语义化标签）、CSS（含 CSS3Flex/Grid、动画、响应式）、JavaScript（ES6 + 语法：箭头函数、解构、Promise、async/await；DOM/BOM 操作、AJAX/ Fetch）	所有岗位 “熟悉前端基础知识”“精通 HTML/CSS/JS”“解决浏览器兼容性” 要求
框架核心	React（优先级最高，多岗位提及 “React 项目经验加分”“React 开发能力”）、Vue（实习岗 / 通用岗补充要求）、Angular（可选，部分正式岗提及）	正式岗 “VVM 框架开发经验”、实习岗 “熟悉 React/Vue” 要求
工程化工具	构建工具：Webpack（核心）、Gulp/Grunt（补充）；包管理：npm/yarn；代码规范：ESLint、Prettier；版本控制：Git（含 Git Flow 协作流程）	正式岗 “熟练掌握前端工程化开发”“使用 Grunt/Gulp/Webpack” 要求
扩展能力	1. UI 框架：Bootstrap、Pure、Kendo（正式岗明确提及）、Ant Design/Material-UI（React 生态常用，隐性要求）2. 后端基础：接口协作（RESTful API、GraphQL）、Node.js（正式岗 “熟悉 NodeJS” 要求）3. 性能优化：首屏加载优化（懒加载、代码分割）、渲染优化（虚拟 DOM、减少重排重绘）4. 数据可视化：ECharts、D3.js（字节实习岗 “数据可视化” 职责要求）5. 跨端兼容：移动端适配（rem/vw）、浏览器兼容（Autoprefixer、Polyfill）	正式岗 “配合后端完善接口”“优化前端性能”、字节实习岗 “机器学习中台前端构建” 要求

二、提升求职竞争力的技术与软技能

（一）技术能力：从 “达标” 到 “脱颖而出”

框架深度掌握：不仅会用 API，更要理解原理
- React 方向：深入理解虚拟 DOM、Diff 算法、Hooks（useState/useEffect/useContext）、Redux（状态管理）、React Router（路由）、Next.js（服务端渲染 / SSR）；
- 补充项目：开发带用户系统、状态管理的完整项目（如电商前端、后台管理系统），并部署到 GitHub Pages/Vercel。
工程化实战经验
- 搭建前端工程化模板：配置 Webpack 实现代码分割、按需加载、环境变量区分（开发 / 测试 / 生产）；
- 落地规范化流程：用 ESLint+Prettier 统一代码风格，用 Git Hooks（husky）实现提交前代码校验，提升团队协作效率。
针对性场景技术
- 若投递大厂（如字节）：重点补充数据可视化（ECharts/D3.js）、大前端工程（微前端架构）、性能监控（Lighthouse、Sentry）；
- 若投递传统企业 / 中小公司：强化响应式开发、浏览器兼容性解决案例、后台管理系统快速搭建能力（用 Ant Design Pro/Vue Admin Template）。

（二）软技能：匹配岗位 “隐性要求”

团队协作能力：体现 “配合后端完善接口”“与产品 / UI 协作” 要求
- 经历描述需包含：与产品经理对齐需求、与 UI 确认设计还原度（如用 PixelPerfect 工具校验）、与后端联调接口（解决跨域、数据格式问题）的具体案例。
问题解决与抗压能力：匹配 “处理前端工程逻辑”“抗压能力” 要求
- 准备 1-2 个典型问题案例：如 “通过 Webpack tree-shaking + 懒加载将项目首屏加载时间从 5s 优化到 1.8s”“解决 IE 浏览器下 CSS 动画兼容性问题，保证 95% 以上用户正常访问”。
学习与创新能力：呼应 “探索业内先进技术”“热爱创新” 要求
- 主动学习痕迹：如 “跟进 React 18 新特性（Concurrent Mode），并在个人项目中落地实践”“研究 Vite 构建工具，对比 Webpack 并输出技术调研文档”。

三、HR 理想的高度匹配简历模板

个人信息

姓名：XXX
性别：X
学历：XX 大学计算机科学与技术本科（202X 届）/ 在读
电话：138-XXXX-XXXX
邮箱：xxx@xxx.com
GitHub：github.com/xxx（需包含 1-2 个前端项目，含 README 说明）
技术博客：xxx（可选，如掘金、知乎专栏，体现技术总结能力）

求职意向

目标岗位：前端开发工程师（正式岗）/ 前端开发实习生（字节 Data AML 团队优先）
期望城市：XX 市
可到岗时间：202X 年 X 月（实习岗需注明 “每周可实习 5 天，持续 4-6 个月”）

核心技能（与岗位要求一一对应，加粗关键词）

基础技术：精通 HTML5 语义化标签、CSS3（Flex/Grid/ 动画 / 响应式），熟练掌握 JavaScript ES6+（Promise/async/await/DOM 操作），能独立解决多浏览器兼容性问题；
框架与 UI：深入使用 React（Hooks/Redux/React Router），熟悉 Vue 2/3，熟练运用 Ant Design、Bootstrap 等 UI 框架搭建项目；
工程化：熟练使用 Webpack 构建项目（配置代码分割、懒加载），掌握 npm/yarn 包管理，用 ESLint+Prettier+Git 实现规范化协作；
扩展能力：熟悉 Node.js 基础，能配合后端联调 RESTful API；掌握 ECharts 数据可视化，了解前端性能优化（首屏加载 / 渲染优化）；
软技能：具备系统性思维，能参与项目架构讨论；良好的沟通能力，可高效配合产品、UI、后端团队；抗压能力强，热爱代码与技术创新。

项目经历（STAR 法则：场景 - 任务 - 行动 - 结果，突出与岗位职责匹配的内容）

项目 1：企业级后台管理系统（React+Ant Design+Webpack）

项目背景：为 XX 公司（或课程设计 / 个人项目）开发客户管理与数据统计后台，支持用户权限控制、数据可视化分析，解决原系统操作繁琐、加载慢问题；
核心职责：
1. 负责前端页面开发：根据 UI 高保真设计稿，用 React+Ant Design 实现 15 + 页面（用户列表、数据报表、权限设置等），确保设计还原度 98% 以上；
2. 处理工程逻辑与优化：用 Webpack 配置代码分割、按需加载，引入 React.lazy 实现路由懒加载，将首屏加载时间从 4.2s 优化至 1.5s；
3. 接口协作与问题解决：与后端协作定义 RESTful API，用 Axios 封装请求拦截器（统一处理 Token、错误提示），解决跨域问题，接口联调效率提升 30%；
4. 组件沉淀：封装通用表格、表单组件（支持分页、搜索、校验），后续项目复用率达 60%，减少重复开发；
技术栈：React 18、Redux Toolkit、Ant Design 5.x、Webpack 5、ECharts、Axios、Git；
项目成果：系统上线后稳定运行，支持 50 + 员工日常使用，用户操作效率提升 40%，获团队 “最佳协作贡献”（如有）。

项目 2：个人博客系统（Vue+Node.js+MongoDB）（实习岗可补充，体现全栈思维）

项目背景：搭建个人技术博客，实现文章发布、分类、评论功能，同时学习前后端协作流程；
核心职责：
1. 前端开发：用 Vue 3+Vue Router+Pinia 实现博客页面，用 Tailwind CSS 实现响应式设计，适配 PC / 移动端；
2. 后端配合：用 Node.js+Express 编写简单接口，实现文章 CRUD，理解前后端数据交互逻辑；
技术栈：Vue 3、Pinia、Vue Router、Tailwind CSS、Node.js、MongoDB；
项目成果：博客部署至 Vercel，累计发布 10 + 篇前端技术文章（如《React Hooks 实战总结》），GitHub 项目获 50+Star。

实习经历（如有，优先写与前端相关；无则突出项目中的 “协作”“解决问题” 能力）

实习岗位：前端开发实习生 | XX 公司 | 202X 年 X 月 - 202X 年 X 月

核心工作：
1. 参与公司官网迭代，用 HTML/CSS/JS 实现 3 个新模块（产品介绍、用户案例），兼容 Chrome/Firefox/Edge 浏览器；
2. 协助资深工程师维护 React 项目，修复 5 个 UI 兼容性 bug，优化 2 个页面渲染性能；
3. 与产品经理沟通需求，输出页面交互原型，缩短需求确认时间 15%；
关键成果：参与的官网迭代版本上线后，页面加载速度提升 25%，用户停留时长增加 18%。

教育经历

XX 大学 | 计算机科学与技术 | 本科 | 202X 年 9 月 - 202X 年 6 月（在读 / 毕业）
核心课程：数据结构、计算机网络、JavaScript 程序设计、Web 前端开发（如有高分或相关课程项目，可补充：“Web 前端开发课程设计获校级优秀项目”）

荣誉与证书（可选，优先选与技术相关）

202X 年：XX 大学 “程序设计竞赛” 二等奖（如涉及前端开发）；
202X 年：计算机二级证书（Web 程序设计方向）；
202X 年：GitHub “Frontend Practice” 项目贡献者（如有开源贡献）。

自我评价（3-4 句话，精准匹配岗位要求）

具备扎实的前端基础与 React 项目实战经验，熟悉前端工程化流程，能独立完成从设计稿到上线的全流程开发；
有良好的系统性思维与团队协作能力，曾多次配合后端、产品团队解决项目难点，抗压能力强；
热爱前端技术，持续关注行业动态（如 React 新特性、Vite 构建工具），善于总结分析，能快速学习并应用新技术；
若投递字节实习：特别关注机器学习中台与数据可视化领域，希望在 Data AML 团队中，将前端技术与 AI 场景结合，贡献价值。

四、简历投递小贴士

关键词匹配：投递不同岗位时，调整 “核心技能”“项目经历” 的表述，例如投递字节实习岗，需突出 “数据可视化（ECharts）”“React 熟练使用”“4-6 个月实习时长”；
成果量化：所有经历尽量用 “数据” 体现价值（如 “优化后加载速度提升 X%”“复用组件减少 X% 开发时间”），避免模糊表述；
附件补充：GitHub 项目需保证可访问、有清晰 README（说明项目功能、技术栈、个人职责），若有线上 demo，可在简历中添加链接（如 “项目 demo：xxx.com”），方便 HR 快速查看。

3 前端工程师其实也要会一点后端是吗？

“具备基础后端能力” 确实是前端工程师的重要加分项，甚至是部分正式岗的隐性必备要求—— 不是要达到专业后端工程师的深度，而是能通过后端基础能力更好地与后端协作、理解业务逻辑，甚至独立解决部分全栈场景问题。下面从 “岗位要求匹配”“需掌握的后端核心能力”“如何在简历中体现” 三个维度展开说明，帮你精准定位学习方向：

一、先明确：岗位对 “后端能力” 的具体要求是什么？

从你提供的招聘信息中，能直接或间接找到 3 个核心匹配点，这决定了前端工程师需要的 “后端能力边界”：

接口协作刚需：正式岗明确要求 “配合后端同学完善接口”，这需要前端能看懂后端提供的接口文档（如 Swagger）、理解 RESTful API 设计规范（GET/POST/PUT/DELETE 的用途）、能独立排查接口联调问题（如跨域、参数格式错误、Token 认证失败）—— 这些都需要后端基础做支撑；
技术栈明确提及：某正式岗直接要求 “熟悉 Node.js”，而 Node.js 是前端工程师切入后端的最便捷工具（语法与 JavaScript 一致，降低学习成本），可用于编写简单接口、处理数据逻辑；
全栈思维加分：字节实习岗提到 “参与机器学习中台前端构建”，这类场景下，前端若能理解后端数据流转逻辑（如大模型训练数据的存储、接口返回的结构化数据来源），能更精准地设计前端数据渲染方案，避免 “只做页面不理解业务” 的局限。

二、前端工程师需掌握的 “后端核心能力”（够用即可，不用深入）

不用追求掌握 Java/Python 等后端主力语言，重点围绕 “配合后端 + 解决前端相关后端问题” 学习，核心分 3 类：

1. Node.js 基础（最核心，与前端无缝衔接）

必学内容：
- 环境搭建（Node.js 安装、npm/yarn 包管理）；
- 核心模块使用（fs文件操作、http模块创建简单服务、express框架编写接口）；
- 数据交互（连接 MySQL/MongoDB 数据库、实现简单的 CRUD 接口，理解 “前端请求→后端接口→数据库” 的完整流程）；
学习目标：能独立编写一个 “用户登录 / 注册” 的后端接口，并用前端 Axios 请求调用 —— 目的是理解后端接口的开发逻辑，后续与后端协作时能更高效（比如知道 “为什么后端要求传 Token”“参数格式为什么必须是 JSON”）。

2. 接口相关知识（协作必备）

必学内容：
- 接口规范：理解 RESTful API 设计（如GET /api/user获取用户列表、POST /api/user创建用户）、接口文档阅读（能看懂参数说明、返回值格式、错误码含义）；
- 常见问题排查：跨域解决（理解 CORS 原理、知道后端需要配置Access-Control-Allow-Origin）、接口认证（Token/JWT 的传递与验证逻辑）、请求异常处理（能通过 Network 面板判断是前端请求参数错，还是后端接口返回错）；
学习目标：与后端联调时，能快速定位 “前端问题” 还是 “后端问题”，避免反复沟通低效协作（比如后端说 “接口没问题”，你能通过 Postman 测试接口，证明是参数格式不匹配）。

3. 数据库基础（理解数据存储逻辑）

必学内容：
- 关系型数据库（MySQL）：理解 “表”“字段”“主键” 概念，会写简单的SELECT（查询）、INSERT（插入）、UPDATE（更新）SQL 语句；
- 非关系型数据库（MongoDB）：理解 “文档”“集合” 概念，知道如何存储非结构化数据（如用户的多维度信息）；
学习目标：不用会搭建数据库服务，但能理解前端展示的数据 “从哪里来”—— 比如前端渲染的 “用户列表”，是后端从 MySQL 的user表中查询出来的，后续优化前端数据展示时，能提出更合理的需求（如 “能否让后端返回数据时按时间排序，减少前端处理压力”）。

三、如何在简历中体现 “后端能力”？（关键是 “关联前端场景”，不孤立写）

HR 关注的不是 “你会多少后端技术”，而是 “你的后端能力能为前端工作带来什么价值”，所以写简历时要结合前端项目，突出 “后端能力辅助前端工作” 的场景，举例如下：

1. 在 “核心技能” 中补充（简洁明了）

原核心技能基础上，新增 1 条：“后端与接口：熟悉 Node.js，能使用 Express 编写简单 CRUD 接口；理解 RESTful API 规范，可独立排查跨域、Token 认证等接口联调问题；掌握 MySQL 基础 SQL 语句，能理解后端数据存储逻辑。”

2. 在 “项目经历” 中嵌入（体现实际价值）

以之前的 “企业级后台管理系统” 项目为例，补充后端相关贡献：

原项目经历中，新增 1 条职责：“接口协作与问题解决：
1. 基于 Node.js+Express 编写 2 个临时测试接口（用户数据模拟、表格分页数据），解决后端接口未上线时的前端开发阻塞问题，提前 3 天完成页面开发；
2. 联调时发现跨域问题，通过分析后端 CORS 配置，提出 “增加 Access-Control-Allow-Headers 配置 Token 字段” 的解决方案，1 小时内解决联调卡点；
3. 理解 MySQL 表结构，针对 “用户列表查询缓慢” 问题，建议后端增加索引并优化 SQL 查询条件，前端渲染速度提升 20%。”

3. 实习经历 / 个人项目中突出（若有全栈实践）

如果做过 “前端 + Node.js” 的全栈项目（如个人博客），可重点写：

项目：个人博客系统（Vue+Node.js+MongoDB）
后端相关职责：“用 Node.js+Express 搭建后端服务，实现文章 CRUD 接口（支持按分类查询、分页）；连接 MongoDB 数据库，设计 “文章”“用户” 集合结构，确保前端数据请求高效响应；添加 JWT 认证，实现博客登录功能，保证数据安全性。”

总结：前端学后端的 “度”

不用成为 “全栈工程师”，重点是 “能用后端知识解决前端工作中的协作与业务理解问题” —— 掌握 Node.js 基础 + 接口协作 + 数据库常识，既能满足招聘要求中的隐性需求，也能让你在工作中更高效（不用等后端排查简单问题），成为 “更懂业务的前端工程师”，这正是 HR 和业务团队青睐的竞争力。

4 前端八股（示例）

自己大概知道要掌握哪些技术栈，要学习什么方向。

对于前端工程师来说，“背八股” 本质是系统梳理高频面试考点、建立技术知识框架，而非死记硬背。结合你之前关注的 “前端核心技术 + 后端基础”，我会先拆解 “必背的八股分类与核心问题”，再推荐 “权威的学习渠道”，帮你高效备考。

一、前端面试必背八股分类（按岗位高频度排序）

1. 前端基础（HTML/CSS/JS）—— 面试必问，基础分不能丢

这部分是所有前端面试的 “敲门砖”，重点考察对基础知识的理解深度（而非单纯用法），核心问题如下：

技术模块	高频八股问题	考察核心
HTML	1. HTML5 新增了哪些语义化标签？语义化的好处是什么？2. DOCTYPE 的作用是什么？严格模式与混杂模式的区别？3. img 标签的 alt 和 title 属性区别？如何优化图片加载？	语义化理解、页面渲染机制
CSS	1. 盒模型（标准盒模型 vs 怪异盒模型）的区别？如何切换？2. Flex 布局和 Grid 布局的区别？各自适用场景？3. 垂直居中的实现方式（至少 5 种，分场景说明）？4. CSS 选择器优先级如何计算？!important 的作用与风险？5. 如何解决浏览器兼容性问题？（如 IE 的 CSS hack、Autoprefixer 用法）	布局能力、兼容性思维
JavaScript	1. 原型链是什么？原型继承的实现原理？2. 闭包的定义、用途、可能导致的问题（内存泄漏）？3. 异步编程有哪些方案？（回调函数→Promise→async/await 的演进）4. Event Loop（事件循环）的机制？浏览器与 Node.js 的 Event Loop 区别？5. 深拷贝与浅拷贝的区别？实现深拷贝的方法（手写代码）？6. 防抖（debounce）与节流（throttle）的区别？实现原理与应用场景？7. this 指向问题（全局 / 函数 / 对象 / 箭头函数中的 this）？如何改变 this 指向？	JS 核心原理、异步理解、代码能力

2. 前端框架（React/Vue 为主）—— 匹配岗位 “框架经验” 要求

岗位明确提到 “React 项目经验加分”“VVM 框架开发经验”，这部分是区分候选人能力的关键，重点背 “原理 + 实战” 类问题：

框架	高频八股问题	考察核心
React	1. React 的虚拟 DOM 是什么？为什么比真实 DOM 高效？2. React Diff 算法的原理（同层比较、key 的作用）？3. Hooks 的设计初衷？useState/useEffect 的工作原理？为什么不能在条件语句中使用 Hooks？4. Redux 的工作流程（Action→Reducer→Store→Component）？Redux 中间件（如 redux-thunk/redux-saga）的作用？5. React 组件通信方式（父子 / 兄弟 / 跨层级）？6. React 18 的新特性（如 Concurrent Mode、自动批处理）？	框架底层原理、状态管理、新版本特性
Vue	1. Vue 的响应式原理（Vue2 的 Object.defineProperty vs Vue3 的 Proxy）？2. Vue 的生命周期钩子（创建 / 挂载 / 更新 / 销毁）？各自的使用场景？3. Vue 组件通信方式（props/$emit、vuex/pinia、provide/inject）？4. Vue 的 computed 和 watch 的区别？5. Vue3 的 Composition API vs Vue2 的 Options API？	响应式核心、API 使用场景

3. 前端工程化（匹配 “工程化开发” 要求）

这部分是 “高级前端” 与 “初级前端” 的分水岭，岗位明确要求 “熟练掌握前端工程化”，核心问题围绕 “工具链 + 规范化”：

Webpack 的核心概念（Entry/Output/Loader/Plugin）？如何优化 Webpack 构建速度（如热更新、缓存、Tree-Shaking）？
前端模块化方案（CommonJS/AMD/ES Module）的区别？ES Module 的 import 和 export 与 CommonJS 的 require/module.exports 的差异？
前端规范化有哪些手段？（ESLint 代码检查、Prettier 代码格式化、Git Hooks（husky）提交校验）
什么是微前端？微前端的实现方案（如 Single-SPA、qiankun）？适用场景是什么？
前端部署流程？如何实现 CI/CD（持续集成 / 持续部署）？（如用 GitHub Actions 自动化部署）

4. 后端基础（呼应你关注的 “会一点后端”）

不用深，但要 “能答出与前端协作的逻辑”，高频问题如下：

什么是 RESTful API？设计规范有哪些？（如 URL 用名词、HTTP 方法表示操作、返回统一格式）
跨域问题的产生原因？如何解决？（CORS、JSONP、代理服务器（如 Webpack Dev Server proxy））
Token 和 Session 的区别？JWT（JSON Web Token）的组成与验证流程？
Node.js 的事件循环机制？与浏览器 Event Loop 的区别？
简单说下 MySQL 的索引？为什么索引能提高查询速度？（不用深入，知道 “B + 树索引”“避免全表扫描” 即可）

5. 性能优化（匹配 “优化前端业务” 要求）

几乎所有面试都会问，重点背 “可落地的优化方案”：

前端性能优化的维度有哪些？（首屏加载、页面渲染、接口请求、资源加载）
首屏加载优化的方案？（懒加载（图片 / 路由）、代码分割（Code Splitting）、CDN 加速、压缩资源（Gzip）、预加载（preload/prefetch））
如何减少页面重排（Reflow）和重绘（Repaint）？（如用 transform 代替 top/left、批量操作 DOM、隐藏元素后修改）
浏览器缓存机制（强缓存（Cache-Control/Expires）、协商缓存（ETag/Last-Modified））？如何合理利用缓存？
前端监控有哪些指标？如何实现前端性能监控？（如用 Lighthouse、Performance API、Sentry 错误监控）

二、权威的 “八股学习渠道”（按 “系统性” 排序）

1. 系统性文档（适合建立知识框架，不零散）

《前端面试之道》（GitHub 开源）：https://github.com/azl397985856/fe-interview前端面试的 “百科全书”，从基础到高级全覆盖，问题与答案都很规范，适合第一遍系统梳理。
MDN Web Docs：https://developer.mozilla.org/zh-CN/不是直接给 “八股答案”，但所有前端基础问题的 “标准答案” 都源于 MDN（如 JS 原型链、CSS 盒模型），背完后用 MDN 验证，避免记错。
React/Vue 官方文档：框架类问题的 “权威来源”（如 React Hooks 的规则、Vue 响应式原理），官方文档的解释最准确，比第三方博客更靠谱。

2. 高频面试题汇总（适合针对性刷题，短期提分）

牛客网 - 前端面试题库：https://www.nowcoder.com/intelligentTest包含大量公司的真实面经（字节、阿里、腾讯等），按 “基础 / 框架 / 工程化” 分类，可直接刷 “高频题”，还能看其他候选人的回答思路。
掘金 - 前端面试专栏：https://juejin.cn/column/6950037934497058824掘金的 “前端面试” 专栏会定期更新热门问题（如 React 18 新特性、Vite 原理），文章会结合 “原理 + 代码示例”，容易理解记忆。
“前端八股文” GitHub 仓库：搜索关键词 “前端八股文”，推荐两个高质量仓库：
- https://github.com/yangshun/tech-interview-handbook（偏英文，适合想进外企的同学）
- https://github.com/CavsZhouyou/Front-End-Interview-Notebook（中文，内容全面，带面试技巧）

3. 视频课程（适合 “听不懂文字” 的同学，可视化理解）

B 站 -“前端面试八股文精讲” 系列：推荐 UP 主 “技术蛋老师”“尚硅谷”，他们的视频会把 “原型链”“Event Loop” 等抽象概念用动画演示，比纯文字好记（如 “Event Loop 的执行流程”，看一遍动画就能记住）。
慕课网 -“前端面试通关指南”：适合有一定基础的同学，课程会按 “模块” 讲解，每个知识点配套 “面试题 + 手写代码”（如手写 Promise、手写防抖节流），帮你把 “背” 转化为 “会写”。

三、背八股的 “正确姿势”（避免 “背了就忘”）

“理解 + 输出” 代替 “死记硬背”：比如背 “闭包”，先理解 “函数嵌套函数，内部函数引用外部函数变量” 的结构，再自己写一个闭包案例（如 “计数器”），最后用自己的话总结 “闭包的用途”—— 这样即使记不清原答案，也能通过案例推导。
按 “模块” 刷题，而非零散记忆：每天集中攻克一个模块（如 “今天只背 JS 异步相关问题”），避免一天背 “HTML+React + 工程化”，知识点太杂容易混。
结合项目经历 “落地”：背完 “性能优化” 后，回头看自己的项目：“我之前的项目有没有用懒加载？能不能加 CDN？”—— 把八股和实际项目结合，面试时能举例说明，比单纯背答案更有说服力。
模拟面试 “倒逼记忆”：背完一个模块后，找同学互相提问，或用 “牛客网模拟面试” 功能，强迫自己 “脱稿回答”—— 面试时的紧张感会放大 “记忆漏洞”，提前模拟能暴露不足。

最后提醒：八股是 “基础分”，面试的核心还是 “解决问题的能力”。背完后一定要结合 “手写代码”（如手写深拷贝、手写 React Hooks）和 “项目复盘”（如 “我项目中如何用 Webpack 优化的”），才能真正让 HR 觉得你 “会用”，而非 “只会背”。

查看全文

http://www.dtcms.com/a/469194.html