面试

最近在面试的时候经常会问：如何理解重排和重绘？ 我发现很多候选人都没有答道关键点上，感觉是在哪里看到过相关的文章，听起来零零散散，毫无逻辑。 错误示范 一般的面试过程就是这样的： 面试官：如何理解重排和重绘? 候选人：重排就是当页面的结构发生变化了，就会重排，比如改变变字体的大小，增删 DOM 元素这样的。重绘就是页面结构没有变化，只是外观变了，比如改了一下字体颜色、背景颜色这样的。就只会发生重绘。 当然他说的也没错，我也不能直接说他错，就继续引导 面试官：那重排和重绘有什么关系吗？ 候选人：重排一定会导致重绘，重绘不一定会导致重排。 面试官：为什么呢？ 候选人：因为重排结构发生变化了嘛，肯定会导致重绘。 我这时候表情就是这样： 如果你觉得上面的回答很真实，那下面的你确定得好好看看。 接下来一般我不会直接跳过，我会再问一下浏览器关键渲染路径引导一下。 如果不知道的话，我会再引导一下(这个时候其实基本已经放弃了)。 问一下你知道当浏览器加载到一个 HTML 会发生什么事情吗？ 如果还是不知道的话，这下一题了。 如果知道关键渲染路径的，基本引导一下还是可以搞明白，如果不清楚的，肯定是理解不了重排和重绘的。 考点 这道题我一般考察两个点： 浏览器的关键渲染路径。如果答不到这上面，一般这个题就凉了。 性能优化，如果减少重绘和回流，当然这个点肯定也是要基于对 关键渲染路径 的理解（这点不是关键点）。 复习 复习的目的是为了知道考点是啥，简单的给大家复习一下，更详细的内容希望按我介绍的知识点(可以看我文末推荐的文章进行深入学习)，毕竟复习不是上课。 我们可以能知道，写了 HTML、CSS、JavaScript 就可以将页面渲染到屏幕上，但是浏览器是如何把我们的代码渲染到屏幕上的像素点的呢？这就需要了解到这么一个概念 CRP： 关键渲染路径(Critical Rendering Path)是浏览器将 HTML，CSS 和 JavaScript 转换为屏幕上的像素所经历的步骤序列。优化关键渲染路径可提高渲染性能。 大致步骤是这样：在解析 HTML 时会创建 DOM，HTML 可以请求 JavaScript，而 JavaScript 反过来，又可以更改 DOM。HTML 包含或请求样式，依次来构建 CSSOM。浏览器引擎将两者结合起来以创建 Render Tree (渲染树)，Layout(布局)确定页面上所有内容的大小和位置，确定布局后，将像素 Paint (绘制)到屏幕上。 优化关键渲染路径可以缩短首次渲染的时间。了解和优化关键渲染路径对于确保重排和重绘可以每秒 60 帧的速度进行，以确保高效的用户交互并避免讨厌是很重要的。 接下来研究一下详细的过程： 步骤 1. 生成DOM DOM构建是增量的。浏览器从远程下载 Byte => 根据相应的编码 (如 utf8) 转化为字符串 => 通过 AST 解析为 Token => 生成 Node => 生成 DOM。...

前言 最近两篇面试以及离职相关的文章不容错过哦。 离开蘑菇街后，我最近的一些想法 拼多多和酷家乐面试总结 今年面试还是比较顺的，面了五家公司(酷家乐、拼多多、字节、滴滴、蚂蚁)，都过了。 在文章里我不仅会列出面试题，还会给到一些答题建议，个人能力有限，也不能保证我回答都正确，如果有错误，希望能纠正我。 字节 一面 说一下浏览器缓存 浏览器缓存分为强缓存和协商缓存，强缓存会直接从浏览器里面拿数据，协商缓存会先访问服务器看缓存是否过期，再决定是否从浏览器里面拿数据。 控制强缓存的字段有：Expires和Cache-Control，Expires 和 Cache-Control。 控制协商缓存的字段是：Last-Modified / If-Modified-Since 和 Etag / If-None-Match，其中 Etag / If-None-Match的优先级比Last-Modified / If-Modified-Since高。 cookie 与 session 的区别 Session 是在服务端保存的一个数据结构，用来跟踪用户的状态，这个数据可以保存在集群、数据库、文件中； Cookie 是客户端保存用户信息的一种机制，用来记录用户的一些信息，也是实现 Session 的一种方式。 详见：COOKIE和SESSION有什么区别？ 浏览器如何做到 session 的功能的。 其实就是考察 http 怎么处理无状态是怎么处理的，具体可见 COOKIE和SESSION有什么区别？里面的答案。 解释一下：csrf 和 xss XSS：恶意攻击者往 Web 页面里插入恶意 Script 代码，当用户浏览该页之时，嵌入其中 Web 里面的 Script 代码会被执行，从而达到恶意攻击用户的目的。 CSRF：CSRF 攻击是攻击者借助受害者的 Cookie 骗取服务器的信任，可以在受害者毫不知情的情况下以受害者名义伪造请求发送给受攻击服务器，从而在并未授权的情况下执行在权限保护之下的操作。 详见：前端安全面试题 怎么防止 csrf 和 xss 详见：前端安全面试题 跨域的处理方案有哪些 常用的：jsonp、CORS、nginx 代理，完整的大概是九种，可见：九种跨域方式实现原理（完整版） CORS 是如何做的？...

前言 离职原因看我这篇文章吧：离开蘑菇街后，我最近的一些想法，然后不得不去找工作恰饭呀。 我目前面了五家公司：滴滴、蚂蚁、拼多多、酷家乐、字节跳动，拼多多和酷家乐基本已拿到 offer，蚂蚁二面完了，滴滴和字节即将三面，我先把我已经面过的面经先总结出来，其他的不管过没过，这周内我都会总结出来，希望能给到正在找工作同学的帮助。 在文章里我不仅会列出面试题，还会给到一些答题建议，个人能力有限，也不能保证我回答都正确，如果有错误，希望能纠正我。 酷家乐 酷家乐是我最早面的一家公司，还没被裁的那周二刚好面完，结果周五就被裁了，可能这就是冥冥之中吧。 面试的部门是工具组，是酷家乐最核心的部门，四面面试官跟我说我面的组是工具团队中的最核心组，会涉及到一些图像相关的技术，比如 Tree.js、WebGL等，所以这个组其实也挺好的，感觉能学到不少技术。 一面(电话面) 你在项目如何优化的 我在简历里面写到了性能优化相关的，所以这个问题。 你做的项目有什么值得说的 基本上就是考察项目的亮点，可以说一些项目难点是如何解决的，或者介绍一些项目中用到的牛逼的技术。 Ts 有什么优势 讲道理所有现在在网上能查到的优势都是得益于静态语言的优势。 type 和 interface 的区别 这是一个高频题，如果考察 TS，这应该是最容易考察的，网上也都能查到相关的资料，但是很可能忽略一个点：type 只是一个类型别名，并不会产生类型。所以其实 type 和 interface 其实不是同一个概念，其实他们俩不应该用来比较的，只是有时候用起来看着类似。 React 事件机制 我觉得需要答的点： React 为什么要用合成事件 事件机制：注册和分发的过程。这里面至少要说出事件注册都是在元素的最顶层 document 节点上。 参考资料：一文吃透 React 事件机制原理 聊聊 React 的 diff 聊 diff 建议先看看我之前写过的一篇关于虚拟 DOM 的文章：从 React 历史的长河里聊虚拟DOM及其价值，有助于理解 diff 的意义。 diff 的细节可以看我之前写的：详解 React 16 的 Diff 策略 React 优化 可以看之前我写的 React 函数式组件性能优化指南，对于类组件也有对应的 API。 怎么理解闭包 基础中的基础，虽然社招考得不多，但是如果连闭包都理解不了，应该会减分不少。闭包由于在规范里没有定义，所以很多人下的定义不一样，理解的角度也不同，但是自己要有一套正确的理解方式，如果按照我的理解 JavaScript 里面所有的函数都是闭包，因为有全局环境，所有的函数都可以访问全局变量。 节流怎么实现的...

文章首发于个人网站：前端桃园 很多人总是抱怨面试官问一些平时不常用的知识点，比如算法呀，网络(TCP)等等，也就是大家常说的：面试造火箭，工作拧螺丝。 但是有没有想过为什么整个前端圈，或者绝大部分面试，不仅是前端，各种职位都是这样呢？难道就没人来解决这个问题吗？ 我觉得，事实上，这是一种合理的行为，并不是因为存在即合理，而是本来就应该这样，接下来我以两个方面阐述我的观点。 一、 考验对专业知识的掌握的扎实程度 在张鑫旭的十问十答里的一个问题是，「前端开发基础扎实的标准是什么？」 这里面他对「扎实」的解释我觉得很适合来答这个问题。 「扎」其实可以理解为深度，你可以想象一个用一根针，扎你的皮肤，对一个点的压力，可以让你痛不欲生。 那么如何理解知识的深度呢？ 我还是拿前端面试来举例，比如考一个快速排序，很多人就觉得这有什么好考的嘛，平时又用不到，引擎底层已经写好了 sort 方法，什么数量级用什么排序底层也已经实现好了，没必要考了呀。 但是其实面试官并不是想考你快排的代码是如何写的，说实话，花个十分钟，最多半小时，一个快排的代码你肯定可以记住。但是其实考察快排的真正原因可能不仅仅是考察代码，而是考察它的思想，分而治之(分治法)，划分算法的运用。 另外可能会再问你，它的时间复杂度是多少，如何计算等这些问题，这些问题也不是来考你这一个算法的计算，而是通过这一个算法来看你知道怎么算时间复杂度不？以此来引导你为什么快速排序快，为什么同样是分治法的归并排序没有这么快。等等相关的算法方面的知识。 面试官所考察的问题只是各种底层思想的一个运用，通过这个实例应用来考察对底层思想的理解程度。所以很多时候大厂的面试总是从浅入深的问问题，直到把你问到不知道为止。 再谈谈「实」，实则可以理解为满，考察知识的广度。 想象一下什么样的情况你才会说一个东西实，给你一晚装满的米饭，并且还压一压，再放进去一些米饭，直到压不下去了为止，这个时候你会说满满的一晚米饭，很实在。 所以对「实」的理解就可以理解为满，全。 如何来体现你对知识的广度呢，也就是实。 比如可以考察一些你平时不常用的，但是你也许会用到的知识点。比如一些简单的算法和数据结构，链表呀，网络里面的 tcp/ip 协议族呀，函数式编程呀等等，一些 html5 的特性(比如 web-compoennt)等等。 你可能在平时编程中没用到，或者大多数前端工程师平时不会用到，但是这些是基本功是需要知道的，比如 React 源码中就用到一些简单的数据结构，链表(Fiber 树就是用链表的结构存的，是一个单链表，以及里面还有循环列表的增删改查)，如果不知道树可以用链表存，如何对链表进行操作，那么可能你看源码就很成问题。里面还有一些位运算等，位运算平时也不常用吧，但是 fb 的工程师就用它来解决实际问题。 再比如 web-component，这已经是 w3c 提出的一个前端组件化的标准了，我国也有大佬用 web-component 实现了一些库，比如腾讯出的 OMI。 地址： https://github.com/Tencent/omi 所以狼叔在 「2019 大前端技术趋势深度解读」里提到可能他是下一代框架的标准。 我们前端变化得快，新东西也多，如何不跟上时代，多了解(主要了解，不是每个新东西都要去深究，因为你没那么多时间，大多数时间还是要用在平时用得到的地方)一些新东西。跟不上时代，也行就会慢慢的被淘汰，所以现在前端招聘基本上都会需要你会一门框架，不管是 React 、Vue、Angular，这些都是趋势，数据驱动，不再是以前拿起 jQuery 就是干了。 小节 在工作中常用的知识点，那些是最重要的，那么大家都会这些，**如果你不知道点，别人不知道的东西，这些东西比别人掌握得更深一点，面试官为什么要你？**也许你还是个双非（非982、211）。 我觉得在任何领域都适合一个定律，就是「T」字形发展，先把专业搞深一点，然后往两边扩展。 二、醉翁之意不在题 另外面试官也许会考你一些软技能，考你的不仅仅是面试题完成了那么简单。这点注意，越简单的题越不简单(好好理解这句话)。 我拿我自己的经历来举例，之前做小米的笔试题(是那种把题目发给你，两天内做好了发给他)的时候，有一道题是：求最大公约数的题目。 很多人看到这道题觉得很简单嘛，几行代码就搞定了，当时跟我一起做笔试题的几位竞争者也是，他们就写了一个算法。 而我当时想到，我觉得面试官在检查这道题的时候如果看代码还是有点麻烦，所以我就写了一个界面，界面上提供了可以点击的数字，还有输入框，还有几个计算按钮，一个结果框，用户可以通过点击数字，或者在输入框里输入数字进行计算最大公约数，还做了一些错误提示等。 这相当于做了一个应用，一个可以给用户使用的应用，所以最后因为这道题，我被录取了。 我被录取的原因，这些都是进去之后，老大告诉我的，当时很惊讶，竟然是因为这个。 所以之后我就越来越注重用户体验，多一些思考，让别人用自己做的东西的时候更舒服，更方便。 我期望的面试官 声明：我没当过面试官，所以以上内容大多是我思考(猜测)的，也可以用说用一种合理的解释，来解释了现在这种现象。 我期望的面试官是这样的，或者说如果我以后当了面试官我会怎么做。 作为面试官不是把面试者考倒，而是尽量挖掘面试者擅长的地方，然后去打破砂锅问到底的看对擅长的地方研究有多深，考察深度。 在考察的时候先考察广度，再考察深度，从广度的问题中提取擅长的点，然后再问下去。 一些小提示 一般面试官不会因为你某道题没答出来就否定你的。 面试官不喜欢简历上写的啥都会，一问每个知识点都掌握得很浅。 对于平时常用的框架，至少要知道核心原理。 这些是之前我们组面试官在讨论的时候提到的，希望能给大家帮助。...

自从我发过几篇关于面试经历的文章，由于我面试结果还不错，所有很多人来询问我一些面试相关的问题， 我这里给到 5 点建议，希望对大家有帮助。 1. 简历里应该惜字如金 简历简历，可以分为简和历。简，简单简洁之意，历，经历，总体就是简单的表达自己的经历。 我看到一些人的简历写了四、五页，甚至十来页的都有，每个项目把细节都写出来了，甚至还把项目截图给贴在了简历里面，生怕面试官不能理解需求，我建议最多不超过 2 页，亮点能写两页就已经很牛逼了。 我相信有很多人工作了很多年，经历的项目很多，其实不需要把所有的项目都列出来，简历里是要展示自己的亮点，牛逼的点，这个亮点、牛逼的点事相对的，相对于自己所做的东西里面的，不是客观的牛逼(如果有当然更好，那必然也是你相对的里面的亮点，不冲突)。 这句话意味着两层意思： 很多人觉得自己的项目没有亮点的问题，因为你是那这别人更高的标准来衡量自己，所以你相对于别人没有亮点，这样你就写不出一份简历。 多个亮点类似的项目合并，或者只写一个，因为都是为了给面试官展示这一个亮点，写多了就是浪费空间，简历上面的字很珍贵。 第一层让你的简历有东西可写(增加)，第二层是让你把简历写得更优质(减少)。 2. 简历应该是你设计过的 「设计简历」可能对这个词有点迷惑，可能你第一感觉是设计得好看一点，其实我想表达的设计是一种「圈套」，给面试设计的「圈套」，下面我会举例子让你明白这个「圈套」是什么。 我举两个点：技术要点和项目经历。 技术要点(就是自己会哪些技术)和项目经历相信是简历里面必不可少的内容，但是也许你可能忽略了哪些应该写。 之前我给别人看简历的时候，我就会问他们写的技术点三个问题 你对这个技术点的掌握程度是什么样的？ 你对这个技术点准备了哪些问题？ 当问到了相关技术点的时候，你能回答到哪个层次？仅仅了解、用过一两次、熟练使用、还是掌握原理。。。 当你能清楚的回答完这三个问题之后，你对你自己的水平就有了一定的认识，同时你对自己是否符合这个岗位有了一定的判断。我的目的就是让你了解自己的水平，然后才能针对性的去复习，查漏补缺，自己心里要有一杆秤，自己把这个知识点掌握到这个程度，能不能胜任这个岗位。 当你了解了之后，然后根据你自己是否有充足的复习时间，你就可以去设计你的技术要点部分了，只写你准备好了的技术点，这个准备好了不是说掌握得很深才叫准备好了，就算是只能回答几个简单的问题也算是准备好了，就是你想准备，然后自己也去复习了的，这就叫准备好了，这样你在面试的时候才会胸有成竹。 这就是在套路面试官问你准备好的问题，因为技术官基本只会问你简历里面提到的技术点，所以自己要对自己简历里面的技术点有充足的准备(把一些常见的面试题刷一些也是非常有帮助的)。 第二点设计就是对于项目经历部分。项目经历这部分没有人比你更熟悉，所以如果问到项目经历应该是你的地盘，是你给面试官展示你的项目有多牛逼，你在里面发挥了多大的价值，带来了多大的成果，你要非常自信的去给他讲解。 你的自信来源于什么？你非常了解这个项目的需求(为什么要做这个项目)、项目价值(做了之后怎么样了)，以及整个项目的技术方案，架构体系(怎么做的)，最重要的是你负责的或者参与的。 同时，你再把你在项目中遇到的一些**难点，和解决方案总结下来，**那么项目这块就是你的主战场了。 划重点：上面我所说的，最好最好是要准备，也就是说最好你要写下来，然后可以没事儿自己问自己上面的这些问题，然后自己去回答。 你可能会说，哇，那要准备好多东西哦，所以说啊，项目不用写太多，就把觉得自己最牛逼的、最熟悉的两、三个项目总结下来就够了，在项目这块比的不是数量，而是质量。 ** 项目经历这块在面试的时候面试官会问你一些问题，比如一些其他的解决方案，如果当时想到了，或者面完了想到了，记得补充进去。 3. 选常用的东西去准备 前端的技能要求很多，就算解决同一个问题的解决方案也会有很多个，比如解决视图的，就有 React、Vue，构建的就有 Webpack、Rollup、Parcel ，React 状态管理也有 Redux、Mbox、unstate 等。 如果你的脑袋里面都装着这些东西，那么你肯定是复习不完的了，我的建议是把你项目用常用的东西好好准备，尽量不要让面试官把你常用的东西还问倒了，如果你平时用的东西你都没有掌握得好，你觉得面试官会觉得你平时不用的东西掌握好了吗？ 4. 准备一份自我介绍 准备一份自我介绍，不是简简单单的准备，而是自己要写下来，然后对着稿子练习一下。可能你会觉得很麻烦，有必要吗？我说两点： 自我介绍是每个面试官，每场面试都会问的，没有哪个面试题有如此高的频率，100% 中的面试题不值得去好好准备吗？ 上面我说了简历是去套路面试官问哪些东西？而自我介绍就是去套路面试官怎么去问的一个很好的方式，因为往往面试官会在你自我介绍之后，会问几个你自我介绍里面所包含的东西，自我介绍的结尾，也许就是面试题的开始。 这个一个很好的引导面试官怎么问的方式。 5. 职业规划 职业规划这个，其实也是一个高频面试题，不管是面试官还是 HR，都喜欢问的一个问题，这个题没有标准答案，我说一下我的一些看法。 职业规划我觉得可以从三个方面去谈： 我想做什么？(兴趣、价值观等方面) 我能做什么？(你的知识、技术、经历等方面来支持) 环境支持我做什么(意味着未来)？(外部环境，公司、团队) 大致你可以像这样去回答，我的兴趣是 XXX，优势是 XXX，因此我选择了前端，这是一个可以将我的兴趣和工作结合起来的行业，是我非常喜欢的，所以我会很用心对待这个工作。我之前做过 XX，有了 XX 的经验，然后觉得很有意思，想继续深挖(当然你也可以说，我之前一直在做 XXX，以后想换一种 XXX 技术)。近期我打算研究 XXX，后续可以在 XXX 上独当一面，独立负责 XXXX 事务,解决 XXXX 问题。谈到远期规划，我会根据环境的变化，工作内容的变化，以及我自身能力的变化，不断进行调整的。...