大家好，我是若川，祝大家中秋节快乐。最近组织了源码共读活动《1个月，200+人，一起读了4周源码》，已经有超50+人提交了笔记，群里已经有超1200人，感兴趣的可以点此链接扫码加我微信 ruochuan12 参与。

本文经作者@lxcan 授权转载，未经授权请勿直接转载。
原文标题：《三年经验前端社招——朴朴科技》
原文链接：https://zhuanlan.zhihu.com/p/405785932
文末点击阅读原文直达

前言

本人毕业学校是双非二本，非计算机科班出身，大学时自学的前端相关技能。截止2021年8月，有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 ，是怎么体现安全性的？【描述】
http: 超文本传输协议(Hypertext Transfer Protocol)，是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准（TCP），它是一个在计算机世界里专门在两点之间传输文字、图片、音频、视频等超文本数据的约定和规范。
https 的全称是 Hypertext Transfer Protocol Secure , 它用来在计算机网络上的两个端系统之间进行安全的交换信息(secure communication). HTTPS 是 HTTP 协议的一种扩展，它本身并不保证传输的安全性，那么谁来保证安全性呢？在 HTTPS 中，使用传输层安全性(TLS)或安全套接字层(SSL)对通信协议进行加密。也就是 HTTP + SSL(TLS) = HTTPS。
（TLS(Transport Layer Security) 是 SSL(Secure Socket Layer) 的后续版本，它们是用于在互联网两台计算机之间用于身份验证和加密的一种协议。）
http 和 https 的区别

• 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 模块化是怎么解决循环引用的问题的【描述】
参考 https://es6.ruanyifeng.com/#docs/module-loader#%E5%BE%AA%E7%8E%AF%E5%8A%A0%E8%BD%BD

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、说一下你的职业规划【描述】

最后

朴朴科技致力于研发新零售即时电商领域的标杆系统，朴朴超市定位于一站式移动端30分钟即时配送购物平台。公司技术栈主要是 React+TS，两轮技术面试官挺强的，问的问题覆盖前端各方面，专业，准备约HR面谈薪资的，因为有其他更合适的offer了，被我委婉拒绝了。
往期回顾：

• 三年经验前端社招——Shopee

• 三年经验前端社招——腾讯微保

• 三年经验前端社招——丰巢科技

• 三年经验前端社招——众安保险

• 三年经验前端社招——有赞

天生我材必有用，千金散尽还复来

最近组建了一个湖南人的前端交流群，如果你是湖南人可以加我微信 ruochuan12 私信 湖南 拉你进群。

推荐阅读

1个月，200+人，一起读了4周源码
我读源码的经历

老姚浅谈：怎么学JavaScript？

我在阿里招前端，该怎么帮你（可进面试群）

················· 若川简介 ·················

你好，我是若川，毕业于江西高校。现在是一名前端开发“工程师”。写有《学习源码整体架构系列》10余篇，在知乎、掘金收获超百万阅读。
从2014年起，每年都会写一篇年度总结，已经写了7篇，点击查看年度总结。
同时，最近组织了源码共读活动，帮助1000+前端人学会看源码。公众号愿景：帮助5年内前端人走向前列。

识别上方二维码加我微信、拉你进源码共读群

今日话题

略。欢迎分享、收藏、点赞、在看我的公众号文章~