2020春季中高级前端面试记 | 渐进加强题目甄选(上篇)-react&http基础

写在最前面

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

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

面经

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

http和网络相关

• 一、输入一个 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. 断开链接(四次挥手)。

---

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

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

---

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

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

React

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

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

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

---

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

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

---

• 三、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-同源策略和跨域处理
• 面筋系列-http-前端缓存
• 面筋系列-javascript-ES6基础
• 面筋系列-javascript-手写题和基础
• 面筋系列-react-setSate同步异步问题

后续

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