三年前端朴朴科技面试经历，期望薪资18K

文章末尾扫描二维码领取地址

本人毕业学校是双非二本，非计算机科班出身，大学时自学的前端相关技能。有3年前端开发经验，技术栈为 vue 全家桶，求职意向城市是深圳。想着找一个更大的平台寻求发展（技术沉淀、涨薪），所以出来接受社会的毒打了。。。

本文的目的是记录自己的面试经历，各位路过的兄dei也可以参考一下，也让自己有个回顾和反思。路漫漫其修远兮，吾将上下而求索

下面的题目，都会标明每一题的性质，部分题目也会给出一些参考思路和参考回答，希望各位大佬不吝赐教~

• 描述：对概念、过程的描述，纯理论性问答题为主

• 举例：说出应用场景，或者是自己团队实践的情况

• 伪代码：写代码，但不需要跑起来，甚至可以随便写伪代码，主要目的是描述思路

• 编程：真正的写代码，需要跑起来，有测试用例，要看到效果

HR面的话，是一些日常、项目回顾（少说技术细节）、职业规划、你的优势和缺点、为什么跑路、为什么选择这边、目前薪资和职级、期望薪资，HR面基本离不开这些问题

一面

1、项目问题，深挖细节，说几个做过的项目中，你觉得比较复杂的功能【描述】

2、h5 首页为什么做成了服务端渲染？【描述】

3、打包结果优化，具体做了哪些优化【描述】【举例】

4、vue 中 beforeCreate 和 created 的区别【描述】

5、vue 中用过哪些修饰器？【举例】

事件修饰符.stop.prevent.capture.self.once.passive

按键修饰符.enter.tab.delete (捕获“删除”和“退格”键).esc.space.up.down.left.right

其他常用的修饰符.trim.number.lazy.sync

6、vue 中 computed 和 watch 的区别【描述】

computed 一般用于简化模板中变量的调用watch 一般用于监听数据的变化，做一些逻辑处理或者异步处理，可以深度监听、立即执行computed 和 watch 在源码里都是通过 Watcher 类创建出来的，初始化时，先创建 computed 再创建 watch 。数据改变时，先执行 computed 再执行 watch

7、vue 中 key 的作用是什么？【描述】

Key 的作用：主要用来在虚拟 DOM 的 diff 算法中，在新旧节点的对比时辨别 vnode ，使用 key 时，Vue 会基于 key 的变化重新排列元素顺序，尽可能的复用页面元素，只找出必须更新的DOM，最终可以减少DOM操作。常见的列子是结合 v-for 来进行列表渲染，或者用于强制替换元素/组件。

设置 Key 的好处：（1）数据更新时，可以尽可能的减少DOM操作；（2）列表渲染时，可以提高列表渲染的效率，提高页面的性能；

8、比如，在 v-for 时写了 key ，将第二个元素和第三个元素交换了顺序，实际的 diff 算法怎样的【描述】

9、有没有做过组件的抽离和组件库的开发？具体做了什么工作【描述】

10、内部组件库，怎么本地开发和调试？怎么上线？本地调试有哪些方式【描述】【举例】

11、聊一聊浏览器的渲染机制，浏览器是怎么解析和渲染html的？【描述】

12、js 异步加载的方式？defer 和 async 的区别？【描述】（1）defer 是在HTML解析完之后才会执行，如果是多个，按照加载的顺序依次执行（2）async 是在加载完之后立即执行，如果是多个，执行顺序和加载顺序无关

13、重定向的状态码有哪些？它们的区别是什么？【描述】【举例】

14、https 相较 http ，是怎么体现安全性的？【描述】

https 协议需要 ca 证书，费用较高

http 数据信息是明文传输，https 则是具有安全性的 ssl 加密传输协议。

使用不同的链接方式，端口也不同，一般而言，http 协议的端口为 80 , https 的端口为 443

http 的连接很简单，是无状态的；https 协议是由 http + ssl 协议构建的可进行加密传输、身份认证的网络协议，比 http 协议安全

15、https 证书的作用是什么？【描述】

CA 的全称是 Certificate Authority，证书认证机构，你必须让 CA 颁布具有认证过的公钥，才能解决公钥的信任问题。

存在一个数字签名的认证问题。因为私钥是自己的，公钥是谁都可以发布，所以必须发布经过认证的公钥，才能解决公钥的信任问题。

16、讲一下js原型链【描述】

17、由构造函数创建的实例对象，和构造函数本身，他们的原型链有什么区别？【描述】

18、讲一下闭包？实际开发中有什么应用？【描述】【举例】

19、flex 布局相关都有哪些属性？含义是什么？flex 属性对应哪几个属性【描述】

20、flex-grow 和 flex-shrink 代表什么含义【描述】

flex-grow 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。flex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

21、CommonJS 与 ESModule 的区别【描述】

22、Tree-shaking 原理【描述】

23、ESModule 模块化是怎么解决循环引用的问题的【描述】

24、你对 react 怎么看待？【描述】

25、你是通过什么手段去学习前端技术的？【描述】

二面

1、最近在学习什么新技术？Vue3.0做了哪些优化【描述】

2、说一个你做过印象最深刻的项目【描述】

3、对于首屏加速，你有哪些方案【描述】

4、路由懒加载有哪些方式【描述】

5、说一下你对模块化的理解，CommonJS 和 ESModule 有什么区别？【描述】

CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。

CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。

CommonJS 模块的 require() 是同步加载模块，ES6 模块的 import 命令是异步加载，有一个独立的模块依赖的解析阶段。

6、打包结果里面出现重复包的情况，怎么解决【描述】

7、有哪些手段可以加快 webpack 打包速度【描述】

使用高版本的webpack (使用webpack4)

多线程/多实例构建：HappyPack(不维护了) thread-loader

缩小打包作用域

充分利用缓存提升二次构建速度

DLLPlugin 提前打包、分包，避免反复编译浪费时间

8、移动端开发，是怎么适配的？有没有办法在打包时将 px 转换为 rem【描述】

9、描述一下 Vue 中 template 模板编译的过程【描述】

10、说下 vue-router 的实现原理【描述】

11、有没有方案，当 history.pushState 改变了浏览器地址栏后，监听到地址改变【描述】

利用观察者模式- 重写 history 方法，并添加 window.addHistoryListener 事件机制

12、你觉得怎样才算是一个高标准的组件库【描述】

13、组件库的文档是怎么开发的？【描述】

手工维护方案：建工程手动引用组件，书写示例和说明

elementUI 方案：示例和说明按照一定规则写在md文件中，调用md-loader将md文件转成相应的页面

Storybook 方案：Storybook是UI组件的开发环境。它允许您浏览组件库，查看每个组件的不同状态，以及交互式开发和测试组件。

14、组件库怎么进行本地开发调试？【描述】

（1）本地写demo（2）本地编译，拷贝到业务系统，替换 node_module 下的静态资源进行测试

15、求实现：有个请求，10秒内可以重试3次，如果3次都失败，就抛出异常【伪代码】

利用 setTimeout 和 Promise.race 实现

16、说一下你的职业规划【描述】

tips: 微信搜一搜查看更多面试经验