面试内容梳理
# 面试记录
提示
这里记录我的面试记录和面试中遇到的一些问题。
# 2020年11月
- promise的内部err可否捕捉
- new 构造函数过程
- Vue中的nextTick
- 垃圾回收
- flex:1
- CSS选择器权重
- position相对布局left、粘性布局
- display、visibility、opacity
- webpack loader/plugin区别、loader使用、图片处理
- 实现一个函数式组件（类似UI框架中的Model.confirm()）
- instanceof的实现原理
- Less与Sass的区别
- 实现三角形
- hooks实现防抖（按钮多次点击提交请求）
- package.json中依赖没有使用到，就不下载
- 如何实现 sass/less 实现单个文件不手动引入文件变量但可以直接使用（babel/webpack）
- EvenLoop
- promise.all的实现
- webpack自己配置打包成一个或多个
- webpack拆包太多的话会有什么问题
- DOM的append方法
- webpack用过哪些插件和loader，如何配置，配置和使用方式，官方使用方式
- 自己写webpack插件
- 如何使用过canvas
# 罗列基本知识内容、常见面试题
提示
整理常见/高阶面试题和面试相关文章，优先理解掌握前端核心知识内容。
# JS基础
- 原型、原型链、原型继承和类继承特点
- BFC、IFC、margin塌陷、布局grid
- sessionStorage、localStorage、cookie、session
- document.ready/load
- 作用域、闭包
- 手写订阅发布模式
- bind原理、new原理
- ES modules和commonjs的区别、AMD、CMD
- 事件
- 绑定事件有多少种方式
- 事件触发的流程，捕获和冒泡
- 捕获阶段能终止吗
- 终止冒泡阶段有哪些
- 如何实现one绑定事件
- 事件委托的原理
- event.target和event.currtager的区别
- 如何获取url中的?后的参数
- 数组断引用的方式有什么
# ES6
- Promise
- promise原理
- catch、then逻辑、all方法
- promise.resolve是干嘛的
- promise.then如何实现链式调用
- promise.then不返还一个promise还能用then吗
- promise.finally的作用，如何自己实现finally
- async/await原理
- promise async 优缺点
- ES6的Proxy和Reflect的区别
- 箭头函数普通函数
- const和let有什么区别
- ES6常用的api有哪些
# React
- setState原理
- react key的原理
- hooks原理以及为什么会出现hooks
- Fiber解决什么问题
- react的fiber节点树是什么数据结构，为什么要用这样的数据结构
- react的虚拟dom和diff描述、React的Diff原理
- react 异步渲染原理，优先级如何划分
- react渲染优化（class，hook）
- react的context的使用场景
- react如何阻止原生默认事件
- react如何实现函数式调用组件，toast.show()
- react新增了什么生命周和删除了什么生命周期，为什么要删除
# Vue
- vue3 的双向绑定原理
- data 函数写法
# Webpack
- webpack的构建流程
- plugins和loader的区别
- webpack的异步加载如何实现
- webpack构建优化方式有哪些
- webpack的分包策略
# 浏览器相关
- 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么
- 浏览器的渲染原理
- 浏览器的渲染过程
- 浏览器的缓存机制
- 关键渲染路径
- 加载原理
- DOM树和渲染树区别
- 回流和重绘、避免回流的方式
- 浏览器的内存回收机制 标记清除还是引用计数？
- eventLoop（浏览器和node）
- web Workers
- dom树节点和渲染树节点一一对应吗，有什么是dom树会有，渲染树不会有的节点
- CSS会阻塞dom解析吗？
- 浏览器显示一个图片有什么方式
- requestIdleCallback是干什么用的
- cookie的samesite属性作用
- js对象循环引用会导致什么问题
# 网络相关
- http2.0的特性
- 状态码
- dns原理、https原理
- Https第一次请求会携带什么
- Option请求的作用
- 协商缓存和强缓存的区别
- Http强缓存和协商缓存用的是什么字段，整体流程是怎样
- http协议中的缓存控制
- 什么文件用强缓存，什么文件用协商缓存
- tcp的三次握手和四次挥手
- https协议握手大概过程
- udp和tcp区别
- keep-alive和多路复用的区别
- 头部压缩原理（hpack算法）
- 跨域方式有什么、如何解决跨域、jsonp的原理
- 什么是简单请求什么复杂请求
- 对称加密和非对称加密的区别
- 非对称加密，私钥和公钥的区别
- https证书的作用
# 安全
- 前端的网络安全如何防御（xss，csrf）
- cookies的保护方式
# 性能优化
- 浏览器白屏原因、白屏优化方案、首屏优化方案
- 长列表优化方案、以及长列表中，如果带搜索功能如何实现
- 在App中如何实现前端资源离线缓存（方案）
# 工作中遇到的难题
# 其他
- png、jpg、webp的区别
- Base64图片有什么问题
- ts的type和interface区别
# 算法
- 算法和数据结构
- 基本常用排序
- 链表操作
- 树结构操作
- 贪心算法
- 回溯算法
- 双指针操作
- 哈希表
- 动态规划（一般为加分题
- 有100匹马，场地只有4条跑道，得出最快的4只马需要多少轮 Lam：100匹马，4个赛道，找出跑最快的4匹马。
- 已知函数fn1会随机返回1-5的整数，要求基于fn1编写fn2，要随机生成1-7，fn2内不能使用系统的随机api，只能调用fn1获取随机数。
# 面经收藏
上次更新: 2022/12/07, 14:14:50
