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

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

前言

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

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

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

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

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

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

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

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

一面

1、说一个你印象最深刻的项目？遇到了什么问题？怎么解决的？有什么成果？【描述】

2、有个长列表上万行，怎么做优化？【描述】
懒加载或者虚拟滚动

3、图片资源怎么做优化？【描述】【举例】
压缩、雪碧图、svg、base64、iconfont

• 首屏图片优先加载，等首屏图片加载完全后再去加载非首屏图片。

• 对大部分图片，特别是轮播广告中的图片进行按设备尺寸裁剪，减少图片体积，减少网络开销，加快下载速率。

4、懒加载的话，如果异步请求返回很慢 1-3 秒，怎么优化？【描述】
后端处理，缓存

5、做过哪些 webpack 打包体积优化？具体怎么做怎么配置的？【描述】【举例】

• 压缩代码

• 提取公共资源

• tree-shaking

• scope-hoisting

• 图片压缩

• 动态Polyfill

6、你觉得 webpack 里面最难配置是哪些？【举例】
多入口打包、loader配置、external、tree-shaking等说几个

7、浏览器加载网页的主要步骤包括哪些？【描述】
（1）通过DNS进行域名解析得到域名映射的IP地址
（2）向此IP地址发起TCP的3次握手，取得连接
（3）建立TCP连接后发起http请求
（4）服务器响应http请求，浏览器得到html代码
（5）浏览器解析html代码，并请求html代码中的资源（如 js、css、图片等）
（6）浏览器对页面进行渲染，最终呈现给用户

8、浏览器对页面进行渲染，是怎么渲染的？DOM 树和 CSSOM 树是怎么构建的？【描述】
渲染过程：
（1）构建DOM树，将浏览器无法直接理解和使用的HTML，转换为浏览器能够理解的结构--DOM 树。
（2）构建CSSOM，把 CSS 转换为浏览器能理解的结构(styleSheets)，并转换样式表中的属性值，使其标准化，计算出 DOM 树中每个节点的具体样式（根据继承规则和层叠规则）。
（3）创建 Layout 布局树，确定DOM 元素的几何位置信息，遍历 DOM 树中的所有可见节点，加入到布局树（display：none不包含），并计算布局树节点的坐标位置。
（4）构建图层树，如果页面有复杂的效果，如常见的页面滚动，或者使用 z 轴排序等，为了更加方便地实现这些效果，渲染引擎还需要为特定的节点生成专用的图层，并生成一棵对应的图层树（LayerTree）。
（5）Paint 图层绘制，把一个图层的绘制拆分成很多小的绘制指令，然后再把这些指令按照顺序组成一个待绘制列表（联想自己画画）。
（6）tiles：将图层转换成图块。
（7）光栅化：通过进程实现图块转换成位图。
（8）display：浏览器进程拿到 DrawQuad 信息生成页面显示。

9、在html头部head 通过 link 外部引入一个样式文件，会阻塞渲染吗？【描述】
css样式解析不会阻塞渲染

10、CDN 加速原理是什么？它和外链引入js这种有什么区别？【描述】
CDN 即内容分发网络。CDN 的基本原理是广泛采用各种缓存服务器，将这些缓存服务器分布到用户访问相对集中的地区或网络中，在用户访问网站时，利用全局负载技术将用户的访问指向距离最近的工作正常的缓存服务器上，由缓存服务器直接响应用户请求。

CDN 的适用场景：
解决因分布、带宽、服务器性能带来的访问延迟问题,适用于网站站点/应用加速、点播、直播、视音频点播、大文件下载分发加速、移动应用加速等场景

11、防抖和节流是什么？怎么实现？有哪些应用场景？【描述】【伪代码】
常见问题

12、vue-router 有几种模式？分别说下他们的实现原理？【描述】
两种模式
- hash模式：利用 window 的 hashchange 事件，监听到 hash 改变后拿到对应的路由组件，更新DOM
- history模式：利用 history.pushState 事件改变浏览器地址栏，以及 window 的 popstate 事件监听浏览器的前进后退事件，更新DOM

13、说下 vue 响应式原理【描述】

14、说下 vue 都有哪些生命周期钩子函数？都在什么阶段触发的？【描述】

15、vue 如果一个父组件嵌套了子组件，它们的加载顺序是什么？触发生命周期的顺序又是什么？【描述】
先创建父组件，再创建子组件；先挂载子组件，再挂载父组件。

16、说下 Diff 算法的执行过程【描述】
DOM操作是很耗性能的，因此需要尽量减少DOM操作。找出本次DOM必须更新的节点来更新，其他的不更新，这个“找出”的过程，就需要diff算法。diff算法主要执行过程：

• patch(container, vnode) ，首次渲染，将 container 转为 vnode，并对比新旧 VNode 是否相同节点然后更新DOM

• patch(vnode, newVnode) ，数据改变二次渲染，对比新旧 VNode 是否相同节点然后更新DOM

• createElm(vnode, insertedVnodeQueue)，先执行用户的 init 钩子函数，然后把 vnode 转换成真实 DOM（此时没有渲染到页面），最后返回新创建的 DOM

• updateChildren(elm, oldCh, ch, insertedVnodeQueue), 如果 VNode 有子节点，并且与旧VNode子节点不相同则执行 updateChildren()，比较子节点的差异并更新到DOM

17、用过哪些ES6的新特性【举例】

18、ES6 的 Map 有什么特性？可以设置重复的key吗？Map 有顺序吗【描述】
Map最主要的特性就是可以设置任意数据类型的key。key不能重复，后续会覆盖之前的，有顺序。

19、可以改变原数组的方法有哪些【举例】
push, pop, unshift, shift, splice, sort, reverse
20、怎么收集一个二维数组里的重复元素？【描述】
先拍平数组，再遍历数组，判断当前元素的前后索引值，如果前后索引值不一样就是重复的

21、怎么判断一个元素是否为数组？【描述】
（1）Array.isArray() 方法
（2）arr instanceof Array
（3）Object.prototype.toString.call(obj) === '[object Array]'

22、最近在学什么新技术？【描述】

23、你近期的职业规划？有具体去做计划吗？你觉得怎样才算是一个高级开发？【描述】

24、你有什么问题要问我的？【描述】

最后

深圳市丰巢网络技术有限公司，所处行业是物联网，物流平台，电商平台。这家一面是视频面试，面了大概一个小时，有些问题不记得了，感觉有几个问题没答好，面试一轮游，不管怎样，菜是原罪，继续加油吧~
往期回顾：

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

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

• 三年经验前端社招——慧择网

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

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

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

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

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

推荐阅读

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

老姚浅谈：怎么学JavaScript？

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

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

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

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

今日话题

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