❄寒冬季 我的2022 面试 感悟

晴风_
139 阅读11分钟

感受

也不知道为什么总觉得2022年过的稀里糊涂的，缺点什么，那就写点东西总结一下吧。。。

前端小学生一枚，2022年也是我大学生活的最后一年，来年就要毕业了，所以在22年的年初四月份的时候面试了几家公司，最终选择了杭州的一家电商企业实习。6月份入职，中途也谈了转正的事情，可年底却被告知不予转正(在我回家过年的前一天告知年后不用来了，很突然，整的我年都过的不舒服)。。于是23年初再次开启了面试。。

我记得我第一次来杭州面试前端相关的工作还是在20年末，那时候刚接触前端1年多的时间，也算刚入门，一周拿了三家offer，到22年初的时候再次面试时就发现难度提升了，一个月也只是拿了2家公司的offer。23年嘛.... 嗯 仿佛更难了 还是自己真的欠缺的比较多。。

面试题

总结一些之前印象比较深刻的题目，写写思路，面试也是一种提升自己的方式。

CSS相关

  1. 如何绘制一个三角形，不能使用border的那种形式？
   // 当时回答了一种使用 linear-gradient的方式，但不是对方期待的答案
   // 思路
   方法一 linear-gradient+background-image 渐变填充
   方法二 clip-path:polygon 属性绘制一个多边形
  1. 如何在不能使用宽高、padding、border等方式的情况下实现一个正方形？
   // 这个我确实是不知道，当时想了半天也没想出来
   方法 CSS3 元素aspect-ratio属性 设置元素宽高比如 aspect-ratio: 1/1 就是一个正方形
  1. 下面这串代码哪些元素颜色会变化？
<style>
    span:first-child {
      color: red;
    }
</style>
<body>
  <span>1111</span>
  <div>
    <span>222</span>
    <span>333</span>
  </div>
</body>
答案是 111 和 222 都会变色，因为选择选择器从右向左匹配，先匹配作为first-child的元素 再去匹配 span。
当时知道选择器从右往左匹配 但却没尝试过这种行式，也算是理解的不深刻，只知道一知半解，这一次确实
被好好上了一课。
  1. 用过哪些CSS的框架？
我第一次听说CSS框架这个概念，所以有点懵逼，但其实自己接触的很多都是，可能只是个概念问题。
诸如tailwindcss，Bootstrap等等都是
  1. 还有一些常见的css题型
   1. 盒模型
   2. BFC
   3. Flex属性
   4. 单/多行文本溢出
   5. Line-height默认对其方式
   6. Link与@import的区别
   7. requestAnimationframe
   8. 布局相关等一系列 在开发或者面试中相对常见的题型，多看多总结就行。

js相关

  1. 如何判断是个对象是通过new 实现的？
   可能是我理解存在偏差，我给的答案是获取该对象的原型
   通过Object.getPrototypeOf()方法 或者 obj.__proto__
  1. 了解过哪些继承方式？
   继承没怎么重点复习，所以在这一块吃了点亏，只回答了es6的extends以及基于原型链的两种继承方式
   后面在问到寄生式继承和寄生组合式继承的区别时没有答出来。

👉👉 看这 image.png 3. 垃圾回收机制的了解？

   回答了新生代算法与老生代算法的区别，包括新生代垃圾经历一次scavenge算法之后仍存在会被移动到
   老生代空间中。涉及知识点 垃圾回收机制 scavenge算法。
  1. 对 this(传送门)的理解？
   很多时候只是简单的记住了，考察深得时候还是不太会，看了这篇文章之后对this有了更加深刻的理解
  1. 自己实现bind 方法时要注意什么问题？
   返回的函数可能会被作为构造函数使用，如果作为构造函数使用那么this绑定对象为当前函数的this
   反之则绑定到对应的上下文对象上即可。
  1. try catch 能捕获哪些异常？
    理解一句话 说三遍 很重要 很重要 很重要!!!
    能捕捉到的异常，必须是线程执行已经进入 try catch 但 try catch 未执行完的时候抛出来的
    也就是说当异常抛出时，主协程一定要在try 里边才能被捕获。
    所以为什么 await 可以被异常捕获 因为await之后会让出主协程的执行权，这时会进入 try catch的
    捕获阶段，如果await出现异常 便会被捕获。
    promise不会被try catch捕获的原因是相对于外部的try catch，promise内部函数的异常会被
    reject，或者Promise.prototype.catch 捕获，不管是同步还是异步。而promise的执行回调 内部
    已经被try catch 包裹，并且不会向上抛异常，因此外部异常无法捕获promise的异常，因为它不会往
    上抛。
    异步的脚本错误同样不会被捕获。
  1. js基础部分
   js基础也是前端开发人员的功底了，很多时候很难全部涵盖，所以很多知识点必须是在理解的基础上
   才能做到面试不慌。
   1. 类数组对象转成数组对象的方法
   2. 数据类型转化
   3. map和set的区别
   4. 原型链相关
   5. ES6
   6. 脚本延迟加载的方法与区别
   7. 事件循环等等。

js功底对前端人员来说真的太重要了，因为太杂了，很多时候就算你理解了也会有所忘记，反而面试的时候就有可能被问到。我的做法就是经常看，推荐一个小网站，也有对应的小程序端，好像叫前端面试题宝典。

框架相关

因为我基本用的都是react，所以面试中基本框架类问题都是react居多，vue占极少数。总结一些在面试中遇到了却没答得好的题型。

  1. useEffect的依赖数组如果是自定义的数组，在这个数组变化的时候会不会触发effect？
   当时被问到是，直觉告诉我不会，但是不知道为什么，后面问到解决方法，我回答了一种可以将依赖数组
   放在一个state里面，然后学到了第二种方式，可以将依赖数组变成JSON格式，但是我没有实验成功
   不知道使用方式不对。
  1. 为什么Hooks不能在条件判断中使用？
   原因在一个组件内部可能存在多个hooks，react内部对于包正state能都准确对应相应setState/effect
   会将所有hooks按照顺序执行，有过将hooks放在条件判断里，就会存在条件不成里未执行当前hook
   会导致当前hook之后的hook与其对应的state存在位置偏差导致异常
  1. 说一说你了解的事件机制，不要回答通用答案？
    由于虚拟 DOM 的存在，在 React 中即使绑定一个事件到原生的 DOM 节点，事件也并不是绑定在对应的
    节点上，而是所有的事件都是绑定在根节点上。然后由 React 统一监听和管理，获取事件后再分发到具
    体的虚拟 DOM 节点上。

    在 React 17 之前，所有的事件都是绑定在 document 上的，而从 React 17 开始，所有的事件都绑定
    在整个 App 上的根节点上，这主要是为了以后页面上可能存在多版本 React 的考虑。

    第一，虚拟 DOM render 的时候， DOM 很可能还没有真实地 render 到页面上，所以无法绑定事件。
    第二，React 可以屏蔽底层事件的细节，避免浏览器的兼容性问题。同时呢，对于 React Native 
    这种不是通过浏览器 render 的运行时，也能提供一致的 API。
    
    并且在React中事件采用的合成事件，区别于原生事件，合成事件基于冒泡机制实现，因此
    原生事件阻止冒泡，一定会影响合成事件
    合成事件阻止冒泡，不会影响原生事件，因为原生时间在合成时间之前执行。
  1. 对fiber的理解？ 👉👉 看这
    简单来说fiber出现的原因是为了解决浏览器中js单线程带来的困扰, 在React16之前如果React在进行
    页面渲染时无法终止当前任务去响应更高优先级的事务,fiber出现之后便能够实现异步可中断, 如果
    在渲染时出现优先级更高的任务可以停下当前的渲染任务去响应高优先级的操作，并且在执行完成之
    还能继续执行之前中断的任务。
    fiber还是挺复杂的，需要更加深刻的理解，每个人的见解不同，看自己怎么理解囧
  1. 常见题
    1. 怎么看待Vue与React？(开放题型)
    2. React组件中如何在外层获取到组件内部的某个元素？
    3. React生命周期的理解，创建、更新、销毁分别有哪些钩子？
    4. 对HOC的理解？
    5. 虚拟Dom是什么？怎么实现的虚拟Dom？
    6. 如何在函数式组件中模拟类组件中的生命周期？
    7. 组件通信的多种方式？
    8. React性能优化有哪些手段？

浏览器原理相关

  1. Chrome同一个Host最多允许建立多少个TCP连接？
  Chrome 最多允许对同一个Host 建立六个TCP 连接
  1. GUI线程进行页面渲染的时候，JS线程在干嘛？
   GUI渲染线程和JS引擎线程是互斥的，当JS引擎执行时GUI线程会被挂起，GUI更新会被保存在一个队列
   中等到JS引擎空闲时被执行。
  1. 对浏览器缓存的了解？
   浏览器缓存在一定程度上减轻了服务器的压力，对于静态资源，如果没有更新在第一次请求完成之后
   便会存储在本地，下次需要时如果资源未更新可以直接复用本地的静态资源，减少HTTP请求降低服务器
   的压力。
   
   浏览器缓存分为强缓存和协商缓存，主要区别是强缓存不会向服务器发送请求，协商缓存是在强缓存未
   命中的情况下向服务器发送一次请求，如果资源未更新可复用服务器会响应304状态码，浏览器复用本地
   资源即可。
   强缓存：在资源有效时间内，不会向服务器发送请求，直接命中本地缓存的资源, 通常有两种方式
   Expires 与 Cache-control，服务器通过在响应头中添加Expires属性来指定过期时间或者在
   Cache-Control属性中设置max-age来指定最大有效期，在有效期以及过期时间内都会命中强缓存
   除此之外Cache-Control还可以设置为public、private、no-cache、no-store、max-age、s-maxage等
   分别对应不同缓存策略。
   
   协商缓存：在强缓存未命中或者设置了不使用缓存(如Cache-Control设置为no-store)时触发协商缓存
   主要通过请求头中的Last-Modified(最后一次更新时间，精确到秒) Etag(版本Hash，更新之后重新
   生成) 协商缓存发起请求是会将服务器上一次响应的Last-Modified放在If-Modifed-Since请求头中
   Etag值放入If-None-Match请求头中携带给服务器，服务器会进行对比，如果资源可用则响应304，不
   可用则将新的资源与过期时间，Etag等信息一同响应回来。
  1. 常见题
    1. 从地址栏输入信息开始到页面渲染出来一共经历了哪些阶段？
    2. 浏览器的渲染原理？为什么要用GUI？
    3. 跨域产生的原因？解决方案？
    4. 垃圾回收机制？
    5. 对浏览器存储的了解？

网络相关

   1. TCP/IP协议属于哪一层的协议？
   2. TCP与UDP的区别？
   3. 什么是OSI七层模型?
   4. DNS的查询过程？
   5. TCP连接和断开时的三次握手和四次挥手?
   6. HTTP2.0 性能提升表现在哪些方面?
   7. 状态码
   8. HTTPS与HTTP的区别？
   9. HTTPS的S是什么？
   10. 加密方式的了解?

总结

今年确实挺难混的，希望后面的三月四月能够变成金三银四而不是铜三铁四吧。 无论有多难，生活总要继续。向前看，前方总有路，过于焦虑只会精神内耗更加严重，坦然面对，前方依旧柳暗花明。

avatar
文章
阅读
粉丝