前端十面
这里是「五年前端三年面试」的真题面试题,笔者收集了各式各样的前端面试题,汇聚到着十篇文章里。不为别的,只为自己被裁要做八股文准备
——2024.4.12
今天你是我的面试官,明天你要查我的面经传
每文共十道题,其中会涉及CSS、手写源码、JavaScript 基础、ES6 特性、React、数据流、工程化、HTTP、微前端、算法等等方面知识,笔者希望靠这十文入职心仪公司
模拟题一
- CSS:BFC 是什么
- 手写源码:防抖与节流
- JavaScript 基础:闭包
- ES6特性:Promise
- React: Fiber 是什么,为什么需要 Fiber
- 数据流: Redux 是什么?
- 浏览器:浏览器输入 url 到页面渲染都经历了什么
- HTTP:HTTP 1、2、3 的区别
- 性能:你常用的性能优化
- 算法题:两数之和
模拟题二
- CSS:flex:1 表示什么
- 手写源码:深拷贝
- JavaScript 基础:原型和原型链
- ES6特性:箭头函数和普通函数的区别
- React: React Hook 实现原理
- React:函数式组件与类组件的区别
- 浏览器:什么是同源策略以及跨源资源共享(CORS)
- 微前端:qiankun 的原理是什么?如何实现 js 沙箱和 css 隔离的
- 应用题:promise.all 中一个接口坏了,怎么保证其他两个正常调用
- 算法题:三数之和
模拟题三
- CSS:如何实现水平垂直居中
- 手写源码:New 操作符
- JavaScript 基础:事件循环
- ES6特性:迭代器和生成器是什么
- React: 虚拟DOM 与 Diff算法
- React:说说 React 的渲染过程
- 浏览器: 浏览器渲染原理
- 工程化:如何提高 webpack 构建速度
- 项目:十万条数据如何优化
- 算法题:反转链表
模拟题四
- CSS:左边宽度已知,右边自适应方案
- 手写源码:Object.create
- JavaScript 基础:继承
- ES6特性:Class
- React: setState 是同步的还是异步
- 数据流:Redux 中间件机制
- 浏览器:内存泄露是什么
- 工程化:split code 代码分割的原理是什么
- 微前端:微前端是什么?有什么用
- 算法题:二叉树的前序遍历
模拟题五
- CSS: CSS 选择器有哪些
- 手写源码:数组去重
- JavaScript 基础:作用域
- ES6特性:Es Module 和 CommonJs
- React: useMemo、useCallback是什么
- React:组件库按需加载原理
- 浏览器:html缓存了怎么更新,js和css缓存是怎么更新的
- 场景题:前端埋点 SDK 设计思路
- 计算机网络:进程和线程的区别
- 算法题:无重复字符的最长子串
模拟题六
- CSS: CSS 优先级是怎么计算的
- 手写源码:手写 apply、call、bind
- JavaScript 基础:谈谈变量提升
- ES6特性:let 和 const
- React:React 中的多次渲染如何优化
- React: useLayoutEffect 和 useEffect 的区别
- HTTP:什么是单点登录(SSO )?如何实现
- 浏览器:Cookie、localStorage、sessionStorage、IndexedDB的区别
- 工程化:webpack 怎么配置多页面
- 算法题:有效的括号
模拟题七
- CSS:双飞翼/圣杯布局
- 手写源码:手写 ajax
- JavaScript 基础:什么是立即执行函数
- ES6特性:Map 和 Set
- React:修改深层对象有什么解决方案
- React: useEffect 第二个参数是对象如何处理
- 浏览器:遇到白屏问题如何分析和解决
- 性能优化:网站首页有大量的图片,加载很慢,如何优化呢(图片懒加载)
- 微前端:如何防止一个应用没有被卸载掉造成内存泄露
- 算法题:全排列
模拟题八
- CSS:CSS 设置元素不可见的几种方法
- 手写源码:实现发布订阅
- JavaScript 基础:垃圾回收机制
- ES6特性:扩展运算符和剩余运算符
- React: react中一个父组件,两个子组件,一个传props,一个不传props,父组件重新渲染,两个子组件会不会都重新渲染
- React17、18、19 更新以及服务端组件
- TS:interface 和 type 的区别
- 浏览器:跨域
- 工程化:项目构建工具有考虑换 vite 吗?vite有什么优势?
- 算法题:最大子序和
模拟题九
- CSS:CSS 样式隔离手段
- 手写源码:柯里化
- JavaScript 基础:数据类型有哪些
- ES6:ES6至ES12的新特性
- React: 说说 React Router 有几种模式?实现原理?
- React:如何实现 react 的 keep alive
- 前端安全:XSS攻击是什么
- 工程化:tree shaking 是什么
- 工程化:webpack 工作原理是什么,工作流程是怎么样的
- 算法题:爬楼梯
模拟题十
- CSS:重绘和回流
- 手写源码:instanceof
- JavaScript 基础:history 和 hash 两种路由最大的区别是什么
- Git: git rebase 和 git merge 有什么区别
- React: React 合成事件是什么
- React: React中父组件如何调用子组件中的方法?
- 代码题:实现 LazyMan
- 浏览器:错误捕获
- 性能优化:当用户反馈页面加载慢,你是前端怎么排查这个问题
- 算法题:合并两个有序数组
其他
- 聊聊你对业务的理解
- 你在工作中有遇到什么难点,怎么解决的
- 做完项目之后你觉得还有哪些可以优化的点?
- 怎么进行新技术的学习?
参考资料
云谦面试提问:算法、闭包、迭代器、Promise、ES 特性、React、数据流、工程化
性能优化方面,比如长列表怎么优化,加载怎么优化,怎么提高项目的可维护性,怎么提高项目的首屏加载速度。
自我介绍(show time,3 分钟展示自己的时间,把最闪亮的你展现出来)
你知道/用过/遇到过 xx 问题么?(不仅会技术的使用,还了解技术的实现原理)
你还有什么问题么?(你对团队的了解、好奇,对未来的个人成长有什么期待?)
刷题: