简历篇
基本资料
- 第一栏尽量简洁明了概括基本信息
- 姓名
- 联系方式
- 工作经验
- 学历
- 求职意向
- 英语证书
技能
- 熟练使用前端三剑客（HTML、CSS、JavaScript）
- 熟练使用一门JS框架(React或VUE)
- 熟练使用一门CSS插件(Less或Sass)
- 熟悉或了解过一门模块打包工具（WebPack或Vite）
- 熟悉Git的常规操作，多人合作开发
- 熟悉使用前后端交互（axios、fetch)
- 了解一门后端语言
- 根据需要去面试的公司条件再添加一些技能
公司经历
- 公司名称
- 在职时间
- 担任职务
- 公司简介
- 项目技术
项目经历
- 项目名称
- 项目介绍
- 项目技术
教育经历
- 学校名称
- 学校性质（本科、专科）
- 在校时间
计算机与浏览器常识篇
计算机常识
三次握手和四次挥手
- 第一次握手，发送端首先发送一个带SYN（synchronize）标志的数据包给接收方，第一次的seq序列号是随机产生的，这样是为了网络安全，如果不是随机产生初始序列号，黑客将会以很容易的方式获取到你与其他主机之间的初始化序列号，并且伪造序列号进行攻击
- 第二次握手，接收端收到后，回传一个带有SYN/ACK（acknowledgement）标志的数据包以示传达确认信息SYN 是为了告诉发送端，发送方到接收方的通道没问题；ACK 用来验证接收方到发送方的通道没问题
- 第三次握手，发送端再回传一个带ACK标志的数据包，代表握手结束，若在握手某个过程中某个阶段莫名中断，TCP协议会再次以相同的顺序发送相同的数据包
浏览器常识
输入URL到页面渲染的过程
- 通过DNS解析获得网址的对应IP地址
- 浏览器与远程web服务器 通过TCP三次握手协商来建立一个 TCP/IP 连接
- 浏览器 通过TCP/IP连接 向web服务器 发送一个 HTTP 请求
- 服务器的永久重定向响应
- 浏览器跟踪重定向地址
- 服务器处理请求
- 服务器返回一个 HTTP 响应
- 浏览器渲染:解析HTML、解析CSS、解析JS、Render树
HTTP和HTTPS
HTTP：
- 不安全
- 协议对客户端没有状态存储【没有状态】
- 每次请求需要TCP三次握手四次挥手，和服务器重新建立连接【没有连接】
- 基本的特性，由客户端发起请求，服务端响应
- 简单快速、灵活
- 使用明文、请求和响应不进行确认
HTTPS：
- 安全
- HTTP安全版本，通过SSL或TLS提供加密处理数据、验证对方身份以及数据完整性保护
- 采用混合加密技术，传输过程无法直接查看明文内容【传输加密】
- 通过证书认证客户端访问的是自己的服务器【身份认证】
- 传输过程防止被篡改【数据完整】
HTML篇
H5新增的语义化标签
- 头部标签：header
- 导航标签：nav
- 相似组合块标签：section
- 主标签：main
- 内容区域标签：article
- 声明标签：small
- 挂件标签：aside
- 下标标签：sub
- 上标标签：sup
- 强调语义标签：strong
- 进度标签：progress(value:当前进度 max:总进度)
- 删除线标签：del
- 现价标签：ins
- 时间标签标签：time
- 尾部标签：footer
- 视频标签：video
- 音频标签：audio
Canvas和SVG
- Canvas 是H5中新增的标签
- Canvas 主要是用笔刷来绘制 2D 图形的
- SVG 即可缩放的矢量图形（放大或者缩小不会失真的图形）
- SVG 节点过多时渲染慢，Canvas 性能更好一点，但写起来更复杂
- SVG 支持分层和事件，Canvas 不支持（当前有插件库可以用实现）
行内标签和块级标签
- 块级标签：独占一行，对宽高的属性值生效，如果不给宽度，块级元素就默认为浏览器的宽度，即就是100%宽
- 行内标签：可以多个标签存在一行，完全靠内容撑开宽高
- 常用行内标签：a、span、em、strong、b、i、u、label、br ... ...
- 常用块级标签：p、div、ul、ol、li、dl、dt、dd、h1~h6、form ... ...
iframe（文档的内联框架）
- 浏览器得不到支持，iframe 是不可见
- 可以设置这个标签的src实现嵌套另一个网页
img标签属性
- 宽高：width、height
- 悬浮标题：title
- 未找到图片源的文本：alt
- 图片源：src
标签的搜索引擎优化(SEO)
- 标题标签的使用，h1标签只能出现一次，它是当前页面的主标题。
- strong标签的使用，strong标签对关键词的强调作用仅次于标题标签，用于加粗段落标题或是重点关键词
- title标签可以让搜索引擎更容易找到网站
- meta标签设置 name=“descriptiion” content=“网站描述”
- meta标签设置 name=“keywords” content=“网站关键词”
html全局属性
常用全局属性有：class、hidden、id、lang、style、title、dir、contenteditable等等
CSS篇
JavaScript篇
基础类型
- null、undefined、boolean、number、string、symbol、bigInt
VUE篇
React篇
类组件生命周期
- constructor() // 初始化state
- componentWillMount() // 组件被挂载在DOM之前调用
- componentDidMount() // 挂载在DOM之后调用
- componentWillReceiveProps() // 由props引起的组件更新过程中被调用
- shouldComponentUpdate() // 用于决定组件是否继续执行更新过程,优化组件的性能
- componentDidUpdate() // 组件更新之后被调用
- render() // 渲染UI
- componentWillUnmount() // 组件卸载阶段
hooks钩子函数
- useState();
- useMemo();
- useEffect();
- useContext();
- useRef();
- useCallback();
虚拟DOM实现原理?
- 虚拟DOM是对真实DOM的抽象
- 状态变更时，记录新树和旧树的差异
- 通过key值和真实DOM进行比较后更新到真正的dom中
setState到底是异步还是同步?
- 在代码的本身是同步的，但是在合成事件和钩子函数没法立马拿到值，所以成了“异步”
- setState(partialState, callback)，第二个参数可以拿到更新后的结果
- setTimeout 中是同步的
React组件通信
- 父传子：通过props传参
- 子传父：通过props传入一个回调
- 全局传参：推荐使用Redux、Mobx... ...
redux的几个核心概念
- Store：保存数据的地方，你可以把它看成一个容器，整个应用只能有一个Store。
- State：Store对象包含所有数据，如果想得到某个时点的数据，就要对Store生成快照，这种时点的数据集合，就叫做State。
- Action：State的变化，会导致View的变化。但是，用户接触不到State，只能接触到View。所以，State的变化必须是View导致的。Action就是View发出的通知，表示State应该要发生变化了。
- Action Creator：View要发送多少种消息，就会有多少种Action。如果都手写，会很麻烦，所以我们定义一个函数来生成Action，这个函数就叫Action Creator。
- Reducer：Store收到Action以后，必须给出一个新的State，这样View才会发生变化。这种State的计算过程就叫做Reducer。Reducer是一个函数，它接受Action和当前State作为参数，返回一个新的State。
- dispatch：是View发出Action的唯一方法。
redux与mobx的区别?
-
redux将数据保存在单一的store中，mobx将数据保存在分散的多个store中
-
redux使用plain object保存数据，需要手动处理变化后的操作；mobx适用observable保存数据，数据变化后自动处理响应的操作
-
redux使用不可变状态，这意味着状态是只读的，不能直接去修改它，而是应该返回一个新的状态，同时使用纯函数；mobx中的状态是可变的，可以直接对其进行修改
-
mobx相对来说比较简单，在其中有很多的抽象，mobx更多的使用面向对象的编程思维；redux会比较复杂，因为其中的函数式编程思想掌握起来不是那么容易，同时需要借助一系列的中间件来处理异步和副作用
-
mobx中有更多的抽象和封装，调试会比较困难，同时结果也难以预测；而redux提供能够进行时间回溯的开发工具，同时其纯函数以及更少的抽象，让调试变得更加的容易
什么是高阶组件
- 高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧
- 高阶组件是参数为组件，返回值为新组件的函数
- 高阶组件是一个函数（而不是组件），它接受一个组件作为参数，返回一个新的组件
- 高阶组件有助于提高我们代码的灵活性，逻辑的复用性
webpack篇
Git运用篇
项目深度（开发经验）
学习能力（社区及常规问题解决方案）
社区
- 掘金
- 知乎
- gitHub
- stackoverflow
- gitee
解决问题的方案
- 查看官方文档
- 先去社区查找是否有人遇到相同的问题
- 跟开发同事讨论该功能是否可以变动（考虑开发成本）
- 跟产品了解是否有备用方案
