【面试系列】=>面试总结

转载于:https://mp.weixin.qq.com/s/ZSqhmjnb4x0UFQcb_MhEHg

复习准备

  • 关于面试的文章很多,这也是社区一个现状,所以就挑了几篇个人觉得比较好的着重看了一下:

  • 2020年前端面试复习必读文章:这个大佬的思维导图整理的非常好,整个复习流程都是跟着这个导图来的,而且也不用自己到处搜索文章了,相当方便

  • 在阿里我是如何当面试官的 :这篇文章主要是了解一下阿里的面试是怎么样的,面试官关心什么
    面试分享:两年工作经验成功面试阿里P6总结 :实战篇,真实的阿里大佬面试经验

  • 字节跳动今日头条前端面经(4轮技术面+hr面):实战篇,真实的字节大佬面试经验

以上文章个人觉得就够了,能花时间把这些知识啃下来,一般面试就没什么问题了。

简历准备

简历真的非常重要,校招的时候就有这样的感觉,那时候有实习经历和没实习经历简直就是一个天一个地。这次也准备认真准备一下自己的简历。

对于简历,个人认为大厂面试官和 HR 最看重的是两点:

  • 项目经历:做了什么
  • 工作经历:稳定性

这里就不展开说了,社区里也很多优秀的文章。在这个过程中,我主要参考了以下几篇文章,推荐一下:

  • 《大厂面试》面试官看了直呼想要的简历
  • 面试官到底想看什么样的简历?
  • 教你如何写初/高级前端简历【赠简历导图】

面试题整理

这里整理一下我这段时间面试遇到的面试题,按类型分一下,这里只整理了我记录的问题,来不及写答案。。

JavaScript

1. 说说 JavaScript 的数据类型

算是面试官拿一个简单的题给面试者热热身找找感觉吧。

基本数据类型:String、Boolean、Number、Symbol、null、undefined
引用数据类型:Object,如果要细分的话有 Object、Array、Date、RegExp 和 Function

2. 基本数据类型和引用数据类型有什么区别?

很自然地就引出这个题,基本数据类型在被创建时,在栈上给其划分一块内存,将数值直接存储在栈上;引用数据类型在被创建时,首先在栈上创建一个引用,而对象的具体内容都存储在堆内存上,然后由栈上面的引用指向堆中对象的地址。

3. 那基本数据类型和引用数据类型拷贝的时候有什么区别?

由于存储的位置不一样,直接拷贝的时候就会有两种情况:拷贝了值和拷贝了引用,也就是我们常说的深浅拷贝。

对于基本数据类型而言,没有深浅拷贝的概念,都是在栈上新开辟了一块内存给新的值。而对于引用数据类型而言,区别简单来说就是会不会共享堆内存里的值。具体不说了,文章很多,随便看两篇基本都没啥问题。

  • 深拷贝的终极探索(90%的人都不知道)
  • JavaScript 专题之深浅拷贝
  • 目前 JavaScript 的 API 中,哪些是浅拷贝,哪些是深拷贝?

可以看看这篇文章,虽然文章里有一些小问题,不影响整体阅读

JavaScript 基础心法——深浅拷贝

4. 如何实现一个深拷贝?

无非就是 JSON.stringify递归 两种方法,大概说说思路就 OK

5. 通过 JSON.stringify 的方式实现深拷贝,会有什么问题?

如果值是 undefined、function 等,在转换的时候会丢失,所以还是要比较谨慎使用 JSON.stringify 来做深拷贝

6. 通过递归的方式实现深拷贝,会有什么问题?

循环引用和重复引用

数据类型和深浅拷贝的问题问到这里基本差不多了。这里说个小技巧:如果面试官问了第一题,面试官应该心里已经有打算问你深浅拷贝的问题,如果你比较熟悉,也可以尝试主动点往这方面引。

7. 数组去重的方式有哪些(手写)

花里胡哨的也就那几种,主要考察对JavaScript API 是否熟悉,我写了两种:SetHash,面试官也没有多问。

Hash:

function unique(arr = []) {
  if (arr.length === 0 || arr.length === 1) {
    return arr;
  }
  const newArray = [];
  const hash = {};
  for (let i = 0; i < arr.length; i++) {
    if (!hash[arr[i]]) {
      hash[arr[i]] = 1;
      newArray.push(arr[i]);
    }
  }
  return newArray;
}

Set:

function unique(arr = []) {
  if (arr.length === 0 || arr.length === 1) {
    return arr;
  }
  return [...new Set(arr)];
}

8. 找出数组中最大的数(手写)

我就只写了一种

function getArrayMax(arr = []) {
  if (!arr.length) return;
  if (arr.length === 1) {
    return arr[0];
  }
  return Math.max(...arr);
}

9. 说一下事件循环的理解

宏任务微任务那些,随便搜都是,只推荐一篇经典文章:Tasks, microtasks, queues and schedules

  1. 快排是如何实现的,讲一下思路和复杂度

放两张图,感受一下,更多的动画可以看 https://visualgo.net/zh/sorting
img

11. 如何实现一个观察者模式(手写)

12. 如何实现一个单例模式(手写)

13. 如何解析一个 URL,获取 query 和 hash 的参数(手写)

14. TypeScript 和 JavaScript 最大的区别在哪

CSS

1. flex 如何实现九宫格

width,变 flex-wrap

2. 除了 flex 之外,还能如何实现九宫格

比较老的 float,比较新的 grid,然后展开说下 grid

3. flex: 1 是什么意思

我就说了一下 flex: 1 的作用,然后说了一下 flex 其实有三个值,分别简单说了一下各自的作用,就过了

4. 移动端适配怎么做的,rem 原理是什么,vw 有没有了解

细说移动端 经典的REM布局 与 新秀VW布局

5. 移动端 1px 如何解决

  • 移动端1px解决方案
  • Retina屏的移动设备如何实现真正1px的线?

React/Vue

1. 看你的简历,Vue 和 React 都写的比较多,可以说说 Vue 和 React 的区别吗?

通过自己的理解,从编译、生命周期、数据流、核心思想等方向都介绍了一下吧,这个问题还是需要认真准备一下,我说的时候感觉有点乱,回头我看看写一篇文章专门回答一下这个问题吧

2. 新项目的技术选型,你会从哪些方面来考虑选用 Vue 还是 React?

这个问题我听到就感觉比较谨慎,因为本身就是在创业公司,面临过很多次的技术选型。从 jQueryVueReact,我们也经历了技术栈的更新换代。我们当时在考虑技术选型的时候,我们考虑的不是一个新项目,而是一个未来 2 - 3 年甚至更久的一个长远技术选型,主要看了一下 ReactVue 的一个整体生态和完整度,当然这也包括社区的活跃度。因为我们并没有太多人力做一些框架底层的工作以及一些生态周边配套解决方案,更多的时候是拿一些现有的解决方案来解决我们的业务问题。

我在回答这个问题的时候,更多的时候是通过本身的业务出发回答的,没有过多地回答 ReactVue 框架上的区别对技术选型带来的影响。

3. 说说对虚拟 DOM 的理解

虚拟 DOM 本质上是一个真实 DOM 的抽象 JavaScript 对象。然后展开说了一下虚拟 DOM 的好处,操作 DOM 简单、轻量、跨平台,我特别提了一下跨平台,Vue 2.x 之后引入的虚拟 DOM,也有一部分是为了解决未来跨平台的问题,后来也结合 WEEX 了。

4. 讲讲 React 的生命周期

这个没啥好说的,根据自己的理解说一下那几个生命周期了。也说了一下即将废弃的生命周期以及为什么废弃,就过了。

5. React 函数式组件和类组件有什么区别

6. React 的 diff 和 Vue 的有什么区别

单向双向的区别

7. 列表中的 key 有什么作用

VirtualDOM diff

8. 说说 React Hooks 的理解,它有什么优点

一篇看懂 React Hooks

9. React Hooks 不能出现在条件判断语句中

可以确保每次渲染组件时都以相同的顺序调用 Hook

10. 什么是高阶组件?

  • 高阶组件(HOC)应该是无副作用的纯函数,且不应该修改原组件

  • 高阶组件(HOC)不关心你传递的数据(props)是什么,并且被包装组件不关心数据来源

  • 高阶组件(HOC)接收到的 props 应该透传给被包装组件

11. React 的高阶组件和 Vue 的 mixins 是一个类型的东西吗?Vue 中是否可以实现类似 React 的高阶组件

高阶组件本质就是高阶函数,React 的组件是一个纯粹的函数,所以高阶函数对React来说非常简单。

Vue 更像是高度封装的函数,在更高的层面 Vue能够让你轻松的完成一些事情,但与高度的封装相对的就是损失一定的灵活,你需要按照一定规则才能使系统更好的运行。

12. Vue 的双向绑定是如何实现的

数据劫持和发布订阅

13. Vue 如何收集依赖

14. Vue 的父子组件挂载顺序是怎么样的

created -> 子created -> 子mounted -> 父mounted

15. Vue 的 computed 和 watch 是怎么实现的

16. Vue 的 template 是如何编译的

vue-loader 里有专门处理 templateloader,最终本质上还是 createElement

17. Vue 3.0 和 2.x 有什么区别

definePropertyproxy,更开放的 APIts 等等…

18. defineProperty 有什么缺点,为什么 Vue 3.0 之后改用 proxy

数组、对象的监听

19. 我不是前端,你如何向我介绍 Vue,让我能够尽可能多的了解它

工程化

1. webpack 和 rollup 的区别

webpack 适用于大型复杂的前端站点构建,rollup 适用于基础库的打包

2. 说说 webpack 的 loader 和 plugin

loader 解析模块,plugin 扩展功能

3. esbuild 有没有了解

下一代构建工具,是使用 go编写的,未来的趋势会更多使用非 JavaScript 语言来编写前端工具,优点是快。

4. CommonJS 和 ESM 有什么区别

这个就不展开说了,找两篇关于 JavaScript 模块的文章看看就 OK

5. vite 和 snowpack 有了解吗,unbundle 有什么好处

个人理解会是未来构建工具的一种趋势,在构建速度/热更新速度上都比目前 webpack 的方案快非常多,大幅度提高前端开发效率。

6. webpack 的热更新原理大概介绍一下

本地起服务,通过文件内容 hash 来判断是否更新,客户端收到更新消息后会取拉取最新代码进行更新

7. vue-loader 做了哪些事情

webpack 用于处理 .vue 文件的 loader,解析代码,分别处理其中的 template/style/script…

8. tree sharking 是什么

ESM,代码体积优化,CommonJS 不支持

9. webpack4 相对于之前做了哪些优化

10. 项目中,你使用 webpack 做了哪些优化

使用 happypack 加速构建
通过 analyze 插件分析构建产物大小,优化体积
chunk
dll

11. 如何发布一个 npm 包,如何发布一个 beta 包,如何修改一个正式包为 beta 包

npm publish
npm publish --tag beta
npm dist-tag add my-package@0.0.1-beta.0 beta
12. npm 包的版本号是如何规范的

参考 https://semver.org/lang/zh-CN/,这里提了一下 break change 以及不规范的 npm版本号会带来什么影响

13. DefinePlugin 的作用是什么

定义全局变量,可以用于不同环境的代码删除

14. 你们团队的项目脚手架是如何实现的

使用 Yeoman 开发的脚手架,介绍了一下 Yeoman 的能力,以及为什么要用它而不是直接用现成的 cra 和 vue-cli

15. Babel 的原理是什么

编译器。分为三个阶段:

parse:词法分析 语法分析

transform:转换ast

generate:生成代码

后端

1. Koa 和 Express 有什么区别

  • 异步:callback 和 promise
  • 中间件:线性模型和洋葱模型

2. 说说 Koa 的中间件原理
在这里插入图片描述

洋葱模型示意图
3. 常用的 Node API 有哪些

4. SSR 是如何实现的

5. serverless 有了解吗

6. 说说 node 的执行机制(单线程)

7. 为什么说 node 是高性能的

8. node 为什么支持高并发

  • 执行速度快:运行在 Chrome V8 引擎上
  • 异步:libuv 事件循环
  • 适用 I/O 密集的网络应用开发:解决网络应用开发 I/O 的性能瓶颈
    9. 说说 MVC 的思想
Model–view–controller

10. 说说 ORM 的优点

本质上是对 SQL 语句的一种抽象,方便(语句清晰),安全(一定程度防注入)

11. MySQL 和 MongoDB 有什么区别

关系型数据库和非关系数据库

12. 依赖注入是什么

网络

1. 从输入 URL 到页面渲染,其中发生了什么

这个问题真的很大,可以说很多东西,因为在问这个问题之前面试官在聊网络,所以这个问题我也就回答了网络方面相关的,至于浏览器渲染相关的我就随便带了一下就过了

2. HTTP 和 HTTPS 有什么区别

从安全的角度说呗

3. 说说 HTTP 的状态码

随便说了几个常见的状态码,一般面试官问这个,其实是准备找几个常见的状态码问你具体什么意思,所以你就说自己比较了解的几个就好了,如果完全没了解过的,就别给自己挖坑了

4. 304 状态码是什么意思

缓存

5. 浏览器的三级缓存策略了解吗

先在内存中查找,如果有就加载
如果内存中不存在,则在硬盘中查找,如果有就加载
如果硬盘中也没有,那么就进行网络请求
请求获取的资源缓存到硬盘和内存

6. 说说浏览器的缓存,强缓存是什么

7. websocket 是怎么建立链接的

8. HTTPS 是如何保证网络安全的

9. HTTP 如何实现长连接

keep-alive

算法(手写)

  1. 回形打印矩阵

  2. 找出最长子字符串

  3. 数组中的第 K 个最大元素

  4. 用 JavaScript 实现一个链表

  5. 从上到下打印二叉树

其它
1. 介绍一个你觉得比较有亮点的项目

说了一个从 0 到 1 的项目,并且在这个项目中,我沉淀了一套目前公司统一使用的脚手架工具以及一个 UI 组件库。由于是 0 到 1 的项目,项目周期中遇到了一些协作的问题,我也主动承担了一些 PM 的角色,去推动项目正常运行,保证了项目正常上线,获得业务上下游团队的好评。

2. 在创业公司,一个前端项目的生命周期是怎么样的

在网上也看到了一些大厂的工作流程,相比来说,我们这边的流程相对来说,大的骨干都有,但是小的地方就显得不够规范。比如 Code Review、发布管控、灰度回滚能力等,目前在我们的研发生命周期中,这些能力都只是 “能用” 的阶段,目前我们也在加强规范建设。

3. 在团队中,你是如何制定编码规范的,如何推动规范落地的

根据目前业界常用的编码规范,制定了编码规范,以及一套 ESLint/StyleLint/CommitLintd 静态检查工具,当然还有 Prettier ,然后就是推广大家用,用的过程中再迭代这套编码规范。

4. 你还有什么问题想问我的

  • 不要频繁跳槽
    文章开始的时候有提到「不要频繁跳槽」,这里谈谈个人的看法。

对于面试官和 HR 来说,「频繁跳槽」意味着两点:

你的稳定性不足,得承担给你发了 offer 之后你来到公司过了一段时间又跑路的风险,所以会是减分项
你没有足够的沉淀,技术和业务的沉淀是要时间的,对业务有深入的理解才能思考如何通过技术手段来解决业务上的问题
对于个人来说,「频繁跳槽」意味着:

一直在准备面试,一直在刷题,没有一个专项学习的时间段
技术栈一直在变,一直在适应,没法更深入的理解
对业务不理解,对团队不熟悉,恶性循环,又想跳槽

总结

  • 这篇文章主要还是记录一下自己这段时间以来的一些经历,希望对大家能有帮助。之后也会输出一些「全干工程师」的技术文章在这里,感兴趣的朋友可以先关注。

  • 当然,如果有空,我也会将我对上面面试题的回答都整理一下,发在社区上。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值