写在最前面

• 作为一个练习时长两年半的前端练习生，在这个阳春三月开始了漫漫的面试之路，这里分享一下自己的面试经验和遇到的觉得比较一些值得深入讨论和出现 频率极高 的题目，其中有笔误或者不当的地方欢迎朋友指出。

• 自己的技术栈是：react（16.8+ hooks） + mbox + typescript。 从主要是面的中高级前端的岗位，base: 北京。

面经

• 基础的前端面试题大家应该耳熟能详了，今天来介绍一些面试中遇到能深入探讨和询问的问题问题都是开放性的，考官一般根据你的回答来问下一步问题。下面提供 keywords 中有一些解决方案。其中的题目这种套路「你刚刚回答提到了XXX 能深入讲一下XXX吗,为什么使用XXXX？」，我们尽量去提到自己熟悉的关键词。

http和网络相关

• 1、输入一个 url 发生了什么？
  • 刚刚提到 TCP 的三次握手，其中 https（s是什么？在 tcp 层的起了什么作用）
  • http2 和 https 对比，增加了什么有什么区别？
  • 有哪些安全策略，保护用户信息 (cookie 安全性，token 验证用户登录信息) ?
  • xss, crsf 是什么？怎么预防？
  • 最后浏览器渲染的页面，你能具体说一下前端渲染的流程吗？
  • html/css/js 页面渲染流程
  • 引入 JavaScript 脚本文件的使用使用到 script 标签，其中 defer/async 有什么区别

keywords: http&https&http2 && xss&crsf

知识补充：

1. 输入地址，浏览器解析网址。
2. DNS解析，查询到IP，返回对应的IP。
3. TCP连接(TCP 三次握手 80 端口)。[https 在 TCP 连接之前 SSL/TLS 做了加密，防劫持，需要证书，端口不同 443]
4. 发送http请求。
5. 返回http响应。
6. 浏览器解析渲染页面。
7. 断开连接(四次挥手)。

• 2、什么是同源策略?
  • -> 解决跨域的几个方法(jsonp, cors, nginx)
  • -> 什么场景下有跨域?(iframe, 接口请求，不同域名)
  • -> sso 单点登录问题怎么解决的，同域怎么解决的？不同域，cookie session 共享问题怎么解决的？
  • -> cookie 使用的安全问题
  • -> session 使用 nginx 配置的性能问题

kewords: 跨域解决方案 && 单点登录原理

• 3、页面渲染的时候时常会遇到白屏的时候，我们怎么优化这种情况？
  • 使用缓存？（讲讲浏览器缓存吧，强缓存和协商缓存，每个字段详情和具体的使用情况）
  • 刚刚提到了重定向 304，你能说说 300相关的其他状态码，随便说几个都可以。
  • 刚刚提到浏览器缓存，了解 service work 吗？说说 service 的工作的生命周期和 sw 的好处
  • 除了 service work 还有什么其他的优化方案？（服务端渲染 ssr ，开启 http2 ,按需加载，路由分割 等等）

keywords: service work 和前端缓存 && http 请求头和响应头，状态码 && 白屏优化方案

React

• 1、了解 MVC 吗？也说说什么是 MVVM ？

  • react 是什么设计模式 ？(这里就有埋坑了)
  • 讲讲react 的通信方式？(props render, context, ，全局 store 我这边提到了使用 mbox)
  • 能给我解释一下 mbox 具体的使用场景吗？
  • 刚刚提到了 @observer , 你可以实现一个 JavaScript 的观察者模式吗？。
  • 我们都知道 react 是单向数据流，我这里想实现一个双向绑定可以怎么实现？(了解 Object.defineProperty())

• keywords： 观察者模式 && Object.defineProperty() && MVVM&MVC

• 2、hooks？函数式组件和普通的类组件有什么优劣比较？
  • --> react 生命周期的变化
  • --> 其中 useEffect 和 生命周期对比有什么关系？
  • --> 一般 16+ 我们在哪里优化 render 流程
  • --> 优化方案一： PureComponent(memo)
  • --> 优化方案二：shouldComponentUpdate 中进行深层对比
  • --> hooks 中我们使用 useMemo 优化（www.cnblogs.com/crazycode2/…

keywords: hooks 和 react 生命周期（老） && useMemo

• 3、react 看一道题

state = {
    a: 0;
}

componentDidMount(){
    
    this.setState({
        a: 1
    })
    
    console.log(this.state.a)
}

复制代码

• 结果是怎样的？
  • setState 是同步还是异步的？
  • 如果我想达成 同步/异步该怎么做？
  • 讲讲 render 的渲染流程？(React 的渲染机制——Reconciliation 过程)
  • 了解 fiber 说说你对 fiber 的理解？

keywords: setState 异步?同步 && fiber

参考

• keywords 链接参考
• 2020春季中高级前端面试记 | 渐进增强题目甄选(上篇)
• 面筋系列-http-同源策略和跨域处理
• 面筋系列-react-setSate同步异步问题
• 面筋系列-http-前端缓存

后续

• 下篇会记录一下一些 js 基础题，手写相关的题目，比如promise 和 算法， js 基础运用的相关的题目。