携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情

不同价位 不同地区 小白鼠实习生面试经验（一）

作为一个web前端实习生，我要会点什么？

• 笔者 初探前端实习生市场 第一周体验到了自己的弱小与技术的浅薄
• 那么作为刚入职场尝试的Web前端实习生，公司需要什么样的员工呢？
• 以下笔者做了这周的面经总结，有些问题比较深入，一两句话讲不清楚，所以挂了很多链接，毕竟术业有专攻，很多大佬讲得比我清楚太多。只要把文章大致研读一遍，能总结出自己的话语最好，这也是对自己归纳总结能力的一大挑战。
• 加油，我尽量周更。希望对你我都有所帮助。文中如有不准确，请大佬指正！共勉。

200~250/天 北京（过）

• 面试经验

  1. 简单罗列知识点,对方没有细化问的不需要回答
  2. 项目优先展示自己最亮眼的
  3. 项目难点说明 准备好

• 问的问题：

  1. react 框架优点、和其他框架区别
     • 答：
       1. react 有以下特性：
          1. 声明式设计：React 采用声明范式，可以轻松描述应用。
          2. 高效：React 通过对 DOM 的模拟，最大限度地减少与 DOM 的交互。
          3. 灵活：React 可以与已知的库或框架很好地配合。hooks
       2. react 优点：
          1. 速度快：在 UI 渲染过程中，React 通过在虚拟 DOM 中的微操作来实现对实际 DOM 的局部更新。
          2. 跨浏览器兼容：虚拟 DOM 帮助我们解决了跨浏览器问题，它为我们提供了标准化的 API，甚至在 IE8 中都是没问题的。
          3. 模块化：为你程序编写独立的模块化 UI 组件，这样当某个或某些组件出现问题是，可以方便地进行隔离。
          4. 单向数据流：Flux 是一个用于在 JavaScript 应用中创建单向数据层的架构，它随着 React 视图库的开发而被 Facebook 概念化。
          5. 同构、纯粹的 javascript：因为搜索引擎的爬虫程序依赖的是服务端响应而不是 JavaScript 的执行，预渲染你的应用有助于搜索引擎优化。
          6. 兼容性好：比如使用 RequireJS 来加载和打包，而 Browserify 和 Webpack 适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。
       3. react 缺点：
          1. React 本身只是一个 V 而已，并是一个完整的框架，所以如果是大项目想要一套完整的框架的话，基都需要加上 ReactRouter 和 Flux 才写大型应用。
       4. 参考文献
     • 虚拟 DOM
       • 参考文献
       • 答：
         1. 虚拟 DOM Virtual DOM 只是 js 模拟的 DOM 结构。 虚拟 DOM 是 HTML DOM 的抽象。虚拟 DOM 是由 js 实现的避免 DOM 树频繁更新，通过 js 的对象模拟 DOM 中的节点，然后通过特定的 render 方法将它渲染成真实的节点，数据更新时，渲染得到新的 Virtual DOM，与上一次得到的 Virtual DOM 进行 diff，得到所有需要在 DOM 上进行的变更，然后在 patch 过程中应用到 DOM 上实现 UI 的同步更新。
     • element 和 component 区别
  2. React 中 setState 发生了什么
     • setState 可以完整了解一下！！！
     • 参考文献
     • 答：
       1. 在代码中调用 setState 函数之后，React 会将传入的参数对象与组件当前的状态合并，然后触发调和过程(Reconciliation)。经过调和过程，React 会以相对高效的方式根据新的状态构建 React 元素树并且着手重新渲染整个 UI 界面。在 React 得到元素树之后，React 会自动计算出新的树与老树的节点差异，然后根据差异对界面进行最小化重渲染。在差异计算算法中，React 能够相对精确地知道哪些位置发生了改变以及应该如何改变，这就保证了按需更新，而不是全部重新渲染。如果在短时间内频繁 setState。React 会将 state 的改变压入栈中，在合适的时机，批量更新 state 和视图，达到提高性能的效果。
  3. css 选择器 有哪些？
     • 可以按 优先级 来回答，这样不会漏答，乱答没有调理
     • 参考文献
  4. 显示隐藏的方式
     • 参考文献
       1. display: none：渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。
       2. visibility: hidden：元素在页面中仍占据空间，但是不会响应绑定的监听事件。
       3. opacity: 0：将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。
       4. position: absolute：通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。
       5. z-index: 负值：来使其他元素遮盖住该元素，以此来实现隐藏。
       6. clip/clip-path ：使用元素裁剪的方法来实现元素的隐藏，这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。
       7. transform: scale(0,0)：将元素缩放为 0，来实现元素的隐藏。这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。
  5. es6 的新特性
     • 参考文献
     1. let const var
     2. 箭头函数
     3. 扩展运算符 ...
     4. Proxy
     5. 对象、数组的解构
     6. rest 参数 ...剩余参数
        1. 解构数组 保留剩余参数，只能用在数组最末端
        2. 扩展运算符被用在函数形参上时，它还可以把一个分离的参数序列整合成一个数组
     7. 模板字符串
     8. 字符串处理 API
        1. 存在性判定：includes、startsWith、endsWith
        2. 自动重复：.repeat(3)
     9. Map
     10. Set
  6. 浏览器本地存储
     • 参考文献 链接内还要浏览器缓存
     1. Cookie：
     2. localStorage：
     3. sessionStorage
     4. indexedDB
     5. webSQL（已废弃，旨在通过 js 语句操控 sql 语句完成对数据的读写。）

160-180 杭州 + 180-190 杭州 一面 （过）

• 主面基础
• es6 新特性
  • es6 新特性合并数组
• react 框架特点
• 项目用到了哪些技术栈？
• 具体问题：

1. JSX
   • 参考文献
   • 按照React 官方的解释，JSX 是一个 JavaScript 的语法扩展，类似于模板语法，或者说是一个类似于 XML 的 ECMAScript 语法扩展，并且具备 JavaScript 的全部功能。
   • JSX 会被编译为 React.createElement()， React.createElement() 将返回一个叫作“React Element”的 JS 对象。
   • JSX 语法写出来的代码更为的简洁，而且代码结构层次更加的清晰。
   • JSX 语法糖允许我们开发人员像写 HTML 一样来写我们的 JS 代码。在降低学习成本的同时还提升了我们的研发效率和研发体验。
2. Promise 在项目中用法
   • 无限滚动
   • 异步请求 Promise.all()
3. async await 执行流程
   • 参考文献
4. 异步 eventloop 是什么？
   1. 宏任务，微任务
   • 一次弄懂Event Loop
5. 工程化webpack流程：plugin、loader
6. css盒模型
   • 参考文献
7. 盒子 垂直水平居中
   • 参考文献
8. 跨域是什么？跨域原因？怎么解决跨域？
   • 参考文献
   • CORS支持所有类型的HTTP请求，是跨域HTTP请求的根本解决方案
   • JSONP只支持GET请求，JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据。
   • 不管是Node中间件代理还是nginx反向代理，主要是通过同源策略对服务器不加限制。
   • 日常工作中，用得比较多的跨域方案是cors和nginx反向代理
9. 组件间通信方式，数据流走向
   • 参考文献
10. Proxy
    • 参考文献
11. 用 TS 后 有什么 感觉？
    • 参考文献
12. react 自带 hooks
    • useMemo 和 useCallback区别
13. 异步为什么出现，Promise怎么做的异步代码同步化？
    • 异步代码同步化
      • Promise.then()
      • async await

南京3-8k(4k) + 杭州180-190 二面 （过）

• 主面react 问项目
  1. React 高阶组件、Render props、hooks?
     • 参考文献
  2. react的生命周期？
     • 参考文献
     1. 组件挂载
     2. 组件更新
     3. 组件卸载
     4. 错误处理
  3. hooks有哪些？
     • 参考文献
     • 数据更新驱动
       1. useState
          • 数据驱动更新
       2. useReducer
          • 订阅状态，创建reducer，更新视图
       3. useSyncExternalStore、useTransition、useDeferredValue
     • 执行副作用
       1. useEffect
       2. useLayoutEffect
       3. useInsertionEffect
     • 状态获取与传递
       1. useContext
       2. useRef
       3. useImperativeHandle
     • 状态派生与保存
       1. useMemo
       2. useCallback
       • 区别：useMemo 和 useCallback 接收的参数都是一样，都是在其依赖项发生变化后才执行，都是返回缓存的值，区别在于 useMemo 返回的是函数运行的结果，useCallback 返回的是函数，这个回调函数是经过处理后的也就是说父组件传递一个函数给子组件的时候，由于是无状态组件每一次都会重新生成新的 props 函数，这样就使得每一次传递给子组件的函数都发生了变化，这时候就会触发子组件的更新，这些更新是没有必要的，此时我们就可以通过 usecallback 来处理此函数，然后作为 props 传递给子组件。
     • 工具 hooks
       1. useDebugValue
       2. useId
  4. redux大致学得怎么样？
     • redux流程介绍
     • redux tooltik
     • 参考文献
  5. 有useContext和useReducer等还有什么方法代替redux？
     • 状态管理工具
     • Flux 、Redux 、Vuex 均为单向数据流
     • Redux 和 Vuex 是基于 Flux 的，Redux 较为泛用，Vuex 只能用于 vue
     • Flux 与 MobX 可以有多个 Store ，Redux 、Vuex 全局仅有一个 Store（单状态树）
     • Redux 、Vuex 适用于大型项目的状态管理，MobX 在大型项目中应用会使代码可维护性变差
     • Redux 中引入了中间件，主要解决异步带来的副作用，可通过约定完成许多复杂工作
     • MobX 是状态管理库中代码侵入性最小的之一，具有细粒度控制、简单可扩展等优势，但是没有时间回溯能力，一般适合应用于中小型项目中
  6. 团队协作git常见指令？
     • git常用指令
  7. 自己封装的比较优秀的组件和，自写工具类函数？
     • 按项目自己捋一遍
  8. flex布局细节：flex:1 具体指什么？
     • flex-shrink:1 flex-grow:1 flex-base:0%
  9. 不同浏览器的适配兼容？
     • 参考文献

• 项目二面
  1. 接触React框架的方式？（react的特点优点）
  2. 项目难点，亮点？
  3. 跨域有几种解决方案？
     • JSONP
     • Cors
     • Proxy
     • ...
  4. 有什么功能性的组件吗？
     • 笔者 做了 全局redux管理分区 拖拽组件排序 等功能
     • 后期可扩展，发送评论或者动态类？

  5. 自学路径？

  6. js编译过程原理
     • 【灵魂拷问】当面试官问你JavaScript预编译 - 掘金 (juejin.cn)
  7. cookie,session,token,jwt

上海 280+45（过）

• 主面项目

1. 你有双向持久通信的解决方案吗？
   1. WebSocket
      • 一文吃透 WebSocket 原理 刚面试完，趁热赶紧整理 - 掘金 (juejin.cn)
   2. SSE（先前没了解过，面试官要我去了解一下）
      • SSE
        • SSE与WebSocket有相似功能，都是用来建立浏览器与服务器之间的通信渠道。两者的区别在于：
          • WebSocket是全双工通道，可以双向通信，功能更强；SSE是单向通道，只能服务器向浏览器端发送。
          • WebSocket是一个新的协议，需要服务器端支持；SSE则是部署在 HTTP协议之上的，现有的服务器软件都支持。
          • SSE是一个轻量级协议，相对简单；WebSocket是一种较重的协议，相对复杂。
          • SSE默认支持断线重连，WebSocket则需要额外部署。
          • SSE支持自定义发送的数据类型。
          • SSE不支持CORS，参数url就是服务器网址，必须与当前网页的网址在同一个网域（domain），而且协议和端口都必须相同。WebSocket支持
   3. webSocket(二) 短轮询、长轮询、Websocket、sse - 掘金 (juejin.cn) 透彻明了
2. 有什么生命周期相关的Hooks吗？shouldComponentUpdate有了解吗？
   • 15分钟带你了解前端工程师必知的javascript设计模式(附详细思维导图和源码) - 掘金 (juejin.cn)
   • React 生命周期 接近react源码和底层 无论何时都要去全部解析好框架的全面认识
3. koa 中间件
   1. 封装中间件的参数？
   2. ctx 是什么？
      • 【nodejs】手写简易版 koa 及常用中间件 - 掘金 (juejin.cn)
4. 设计模式接触过哪几种？（笔者用过 单例模式 订阅发布者模式）
   • 实战！聊聊工作中使用了哪些设计模式
   • 类式编程实现单例模式大概说下？
5. react状态获取、传递方法？
   • 2022 年，我们再来谈谈 React 状态管理 - 掘金 (juejin.cn)
6. react-router history 上的 push 和 replace？
   • 浅谈前端路由原理hash和history - 掘金 (juejin.cn)
7. 你的大量数据来自于哪？抓包工具用过什么？
   • 笔者项目api来自于现有web端的网络请求api数据
   • 为了体验真实开发需要数据，本人体验了：
     1. fastmock 伪造假数据
     2. mockjs包 批量生成假数据
     3. fastmock 复制web的JSON数据 初次体验开发时用到的api数据
     4. node koa http请求 api 数据，解决跨域，实现自己的后台数据源引用搭建
        • 跨域有哪几种方案？
        • 九种跨域方式实现原理（完整版） - 掘金 (juejin.cn)
8. localstorage和服务器有交互吗？
   • localstorage 必知必会 - 掘金 (juejin.cn)
9. cookie生成的基本流程？
   • 傻傻分不清之 Cookie、Session、Token、JWT
10. app.jsx里的Suspense有什么用？
    • Suspence 是 笔者在自己项目中 用到的 react 中，包裹页面级路由懒加载React.lazy时的一个声明组件，当页面懒加载正在加载中时，

    <Suspense fallback={<div>loading ... </div>}> 
    

    fallback 内容进行占位
11. 懒加载实现原理？
    • 懒加载原理及手写实现 - 掘金 (juejin.cn)
12. react组件挂载和更新的时候，dom树有没有变化？
    • React 生命周期详解 - 掘金 (juejin.cn)

写在最后

经过第一周面试，笔者发现补全了自己的很多技术盲点。希望评论区有大佬给出系统性复习，解决方案。感谢指导，感谢关注。尽量保持周更，希望和各位共同成长吧！