miracle90 / Interview

前端八股文大全！

theme
cyanosis

螺丝拧得好，火箭少不了

芜湖，起飞！🚀🚀🚀

目录

1. 应用专题
2. 手写题
3. html/css
4. js
5. ts
6. 移动端
7. 微信小程序
8. node
9. 数据结构/算法
10. webpack
11. 网络
12. 浏览器
13. web安全
14. vue
15. react
16. 性能优化
17. 跨端
18. 数据库
19. nginx
20. 设计模式
21. 前端监控
22. 浏览器插件
23. 脚手架
24. 团队、项目、架构、管理
25. 开放题目

应用专题

1. 大文件的分片上传、断点续传及其相关拓展
2. 后端一次给你XX万条数据，除了干一架之外就没别的办法了吗？
3. 虚拟列表是什么?说一下它的实现原理?
4. Promise并发控制
5. 前端导出Excel文件过于庞大怎么处理
6. oauth2.0轻量与完整实现原理
7. mock方案，能够设计出满足各种场景需要的mock数据方案，同时能说出对前后端分离的理解。考虑mock方案的通用性、场景覆盖度，以及代码或工程侵入程度
8. 埋点方案，能够说明白前端埋点方案技术底层实现，以及技术选型原理。能够设计出基于埋点的数据采集和分析方案，关键字包括：分桶策略，采样率，时序性，数据仓库，数据清洗等。
9. 说下你对前端工程化的理解
10. 说一下实现骨架屏的方案？具体思路？
11. 有没有搭建过 CI/CD?说下 CI/CD 搭建的流程?
12. 如果一个页面突然出现一段广告，可能是什么原因，怎么解决?
13. 前端怎样做单元检测?
14. 单元测试如何测试?代码覆盖率如何?
15. 页面埋点怎么实现?
16. 请说明JS进行压缩、合并、打包实现的原理是什么?为什么需要压缩、合并、打包?
17. 组件库设计有什么原则呢?
18. 说一下对 URL 进行编码/解码的实现方式?
19. utf-8 和 asc 码有什么区别?
20. 说一下Taro的编译原理
21. 设计搜索组件(具有自动补全功能组件)，你需要考虑的问题是什么?
22. 说一下对 ESLint 的了解? 如何使用? 它的工作原理?
23. PWA 是什么,对 PWA 有什么了解?
24. 对 to B 和 to C 的业务的理解?
25. 是否了解 glob 库，glob 是如何处理文件的?是否有别的方法?
26. 如何做工程上的优化?
27. 说一下进程和线程的区别?
28. 简单描述静态链接和动态链接的区别，并举例说明
29. 什么是死锁?
30. 微服务和单体应用的区别是什么？
31. 什么是微服务？
32. 用微服务有什么好处？
33. 实现单点登录的原理
34. 扫描二维码登录网页是什么原理，前后两个事件是如何联系的?
35. 项目如何管理模块？
36. 说一下错误监控的实现，错误监控的正确使用方式，日志如何分等级?
37. 封装公共组件需要注意什么?
38. 说出前端框架设计模式(MVVM 或 MVP 或 MVC)的含义以及原理
39. 说一下事件循环机制(node 浏览器)
40. 前端灰度发布

手写题

1. LazyMan
2. 防抖节流
3. 实现一个 compose 函数
4. 大数相加

数据结构/算法

1. 二分查找
2. 写一个 LRU 缓存函数
3. 排序
4. 两个栈实现一个队列
5. 输入两个数组 [1,2,3,2,1], [3,2,1,4,7] 返回公共的并且长度最长子数组的长度

HTML/CSS

JavaScript

1. requestAnimationFram 与 requestIdleCallback 的区别
2. 语义化标签，history api，storage，ajax2.0等。
3. 文档流，重绘重排，flex，BFC，IFC，before/after，动画，keyframe，画三角，优先级矩阵等
4. 数组常用api，reduce、map。。。
5. event loop原理？宏微任务？为什么要区分？node和浏览器在实现loop时候的差别？
6. 继承、作用域、闭包、模块。。。概念融汇贯通
7. axios或同级别网络请求库，知道axios的核心功能。
8. xhr用法
9. 知道网络请求相关技术和技术底层，包括但不限于：
10. content-type，不同type的作用
11. restful设计理念；
12. cors处理方案，以及浏览器和服务端执行流程；口喷
13. 如何完成登陆模块，包括但不限于：登陆表单如何实现；cookie登录态维护方案；token base登录态方案；session概念；

ts

移动端

1. 移动端适配方案具体实现以及对比

node

1. pm2

webpack

1. webpack、rollup、gulp、vite的区别，以及它们的适用场景
2. webpack5新特性
3. webpack基础配置
4. webpack打包结果的代码结构和
5. webpack的执行流程
6. index.js，runtime.js是干嘛的
7. webpack打包链路
8. plugin生命周期
9. 怎么写一个plugin和loader
10. 常见loader做了什么事情，能几句话说明白，比如babel-loader，vue-loader
11. 能结合性能优化聊webpack配置怎么做，能清楚说明白核心要点有哪些，并说明解决什么问题，需要哪些外部依赖，比如cdn，接入层等
12. 了解异步模块加载的实现原理，核心逻辑

babel

1. 这个babel插件的适用场景有哪些
2. 开发这个babel插件遇到了哪些问题，怎么解决的
3. 为什么会想到用babel方案去开发这个插件，调研流程是怎么样的
4. 这个插件还有哪些可以优化的地方，怎么优化
5. babel的preset和pollyfill可以互相替代吗，为什么可以/不可以
6. babel7相较于之前做了哪些优化

网络

1. websocket用法，包括但不限于：鉴权，房间分配，心跳机制，重连方案等。
2. http
3. https
4. udp/tcp
5. http2
6. http3
7. cdn
8. dns
9. websocket、socket

浏览器

• 浏览器缓存

web安全

1. 对称加密
2. xss
3. csrf

vue

1. Vue 的双向绑定机制

react

1. react常用生命周期
2. react常见优化方案
3. react大致实现思路，实现一个简化版的react
4. 对比react和js控制原生dom的差异
5. diff算法大致实现思路
6. 对state和props有自己的使用心得，结合受控组件、hoc等特性描述，需要说明各种方案的适用场景。
7. 能说明白为什么要实现fiber，以及可能带来的坑。
8. 能说明白为什么要实现hook。
9. 能说明白为什么要用immutable，以及用或者不用的考虑。
10. 知道react不常用的特性，比如context，portal。
11. 能用自己的理解说明白react like框架的本质，能说明白如何让这些框架共存。

性能优化

1. 说一下项目性能优化过程中，是怎样充分利用 chrome 调试工具的?
2. 请问如何进行首页加载优化?
3. 如何加快页面渲染速度，都有哪些方式？
4. 写出常用的页面优化实现方案？

跨端

1. 移动端api请求与socket如何通过native发送，知道如何与native进行数据交互，知道ios与安卓jsbridge实现原理。
2. 移动端webview和基础能力
3. iOS端uiwebview与wkwebview差异
4. webview资源加载优化方案
5. webview池管理方案
6. native路由

nginx

1. 前端到底用nginx来做啥

前端监控

脚手架

团队、项目、架构、管理

1. 曾经做过的最有挑战的两个项目
2. 项目脚手架搭建，及如何以工具形态共享。
3. 团队eslint规范如何设计，及如何统一更新。
4. 工具化打包发布流程，包括本地调试、云构建、线上发布体系、一键部署能力。同时，方案不仅限于前端工程部分，包含相关服务端基础设施，比如cdn服务搭建，接入层缓存方案设计，域名管控等。
5. 客户端缓存及预加载方案。

开放题目

1. 你是怎么看待做后台管理系统的？很多人觉得它没有难点，你觉得呢？
2. 未来的职业规划是什么样的？
3. 对当前新的技术有了解吗？
4. 对客户端知识有了解吗？
5. 为什么要离职？
6. 上家公司做了哪些事情以及做事的流程
7. 未来职业规划
8. 感兴趣的工作方向