前言 最近两篇面试以及离职相关的文章不容错过哦。 离开蘑菇街后，我最近的一些想法 拼多多和酷家乐面试总结 今年面试还是比较顺的，面了五家公司(酷家乐、拼多多、字节、滴滴、蚂蚁)，都过了。 在文章里我不仅会列出面试题，还会给到一些答题建议，个人能力有限，也不能保证我回答都正确，如果有错误，希望能纠正我。 字节 一面 说一下浏览器缓存 浏览器缓存分为强缓存和协商缓存，强缓存会直接从浏览器里面拿数据，协商缓存会先访问服务器看缓存是否过期，再决定是否从浏览器里面拿数据。 控制强缓存的字段有：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 是如何做的？...

前言 写作是我一直都提倡每个人去做的一件事情，也许你是通过写作来进行总结，也许你是通过写作生计，也许像我一样写文章提升自己的影响力，不管怎么样，工欲善其事必先利其器，今天我将两年以来最好用的一套写作软件配置介绍给大家。 在这篇文章中你可以了解到三个工具： 最好用的 markdown 写作编辑器 mac 平台专属的图床工具 选取合适的工具美化排版 写作软件(Typora) 我使用过很多的 markdown 编辑器，bear、MWeb、UIysses、印象笔记等等，每个都号称最专业的 markdown 软件，但是这些软件对于图片的处理都不是特别满足我的需求。 只有 typora，让文字和图片完美的结合在一起，并且支持将文章复制到其他平台。 接下来，我将介绍一下 Typora 吸引我的几个地方： 1. 所见即所得的特性 实时预览，不需要分两栏。 2. 自定义主题。 你可以从官网下载主题，或者自己写主题。 3. 大纲与文章目录。 自动识别标题，展示出目录。 4. 可以方便的将图片自动上传到自己的图床上 大部分的写作编辑器都需要手动的去将图片上传到图床上，然后再把链接写到编辑器来，这样来回切换很麻烦。typora 可以自动识别图片然后直接上传上自己的图床上。 当你把图片直接拖到编辑器，或者说截屏之后复制到编辑器的时候，就会让你选择是否上传图片，点击上传图片就可以直接上传到图床上，然后将链接替换成图床的链接。 你只需要在偏好设置图像的上传服务设置为 iPic 即可，下面我会介绍 iPic。 上传服务这里还可以选择自定义命令，也就是说你可以自己写一个上传图片的 shell 然后上传到自己的图床上，图片处理非常的强大。 5. 可以直接复制富文本格式(包括主题样式)到公众号或者其他支持富文本的地方。 公众号后台排版其实不是特别好用，另外我们程序员往往喜欢写 markdown 而不是富文本，所以就需要一个将 markdown 转富文本的一个工具，typora 在这方面也很擅长。 图片处理(iPic 和 iPic Move) 怎么获得免费图床 对于图床这个东西，我觉得还是用自己的比较好，或者说付费的图床，而不是选用网上一些免费的，比如微博图床，其他网站的图床(比如掘金)，使用别人的图床虽然免费，但是一旦加了防盗链，你想迁移图片就非常的麻烦(我就踩过这个坑)，那么这个时候免费的其实就更贵了。 所以很早我就开始研究怎么能用上专业的，自己的图床，我就发现了七牛云这个良心云服务商。七牛云对于新用户免费送 10 个 G 的空间，你可以将图片通过对象存储的方式存在七牛云里。而且这些图片还是都可以增加 CDN 的。 具体如何去创建自己的对象存储空间，你可以参考官网教程。 有了图床，如何将图片上传到图床上面去呢？在 Mac 下 iPic 就是一个很好的工具。 iPic iPic 是一个 Markdown 图床上传工具，将你的图片上传到你的图床上后，你可以得到一个 markdown 格式的图片文本，然后你可以直接复制到你的编辑器中。...

前言 离职原因看我这篇文章吧：离开蘑菇街后，我最近的一些想法，然后不得不去找工作恰饭呀。 我目前面了五家公司：滴滴、蚂蚁、拼多多、酷家乐、字节跳动，拼多多和酷家乐基本已拿到 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 里面所有的函数都是闭包，因为有全局环境，所有的函数都可以访问全局变量。 节流怎么实现的...

前言 被裁之后我就一直在家复习，面试，所以就一直没有写文章，没有太多心思搭理公众号，现在也拿了两个 offer 了，所以开始回到正途。 胎死腹中的 Vue 3.0 Beta 文章 4 月 17 日，早上我收到了浪浪(浪里行舟)的消息，给我发了一个微博消息，尤大在微博上宣布发布 Vue 3.0 Beta 了，然后跟我说这是热点，让我写一篇文章，我就暂停了前一天晚上定时发的文章，准备写一篇详细介绍 Vue 3.0 Beta 所发布的东西。 所以当天我早早的来到了公司，希望在上班前能搞定，然后就开始翻阅 vue-next 的文档以及草案，想从根源去探究 vue 3.0 Beta 能给我们带来什么。 没过多久，在我们技术部的群里有人就 @ 了所有人，让我们去看下邮件，邦哥(化名)发了一封邮件，每个人都要看一下。 我由于还在写文章，收集资料，就没那么快去看邮件，不一会儿，突然安静的 9L 就开始叽叽喳喳，议论纷纷，这时我感觉应该是一件大事儿。 我就迅速打开了邮件，第一段就描述着公司在今天要优化 140+ 的人，第二段描述着公司的核心方向，直播和品牌特卖，在这个时候，我已经能意识到，我可能要被优化了，也许我们组绝大部分人都会被优化，因为我们组基本是做内部系统的，跟核心业务极大的偏离。 我也加入到他们叽叽喳喳的氛围中，放下了手上所有的事情，和旁边的同事讨论着裁员的事情。 被裁 大概在十一点左右的时候，我左手边的一个应届生小声的说，我凉了，HR 让我去 11 楼一趟，然后我将这个事情传达给了我们的一个小群，以及我对接的后端，并询问他他们组的情况。 没想到聊着聊着，他跟我留下了一句，我中了，我先上去了。 接下来就眼睁睁的看着身边的人一个一个的都被喊上去，从工作一年的到两年的(包括我)，再到四年的，以及更多的。 到中午的时候，我们组只留下一个人没沟通了，是一个工作了四年多的老员工了，就坐在我旁边，他很慌，因为大家都拿着赔偿金(n+1.5)，他也想有。 一直等到一点、两点、三点、四点，五点，他放弃了，成为了我们这层楼我们组唯一个留下的。 后面就开始办理离职手续，交接项目，晚上我们整个前端到旁边的修舍酒店进行聚餐，虽然离别时悲伤的，但是被裁的人拿到高于常规的赔偿，是幸运的。 这次裁员对于应届生来说是最惨的，他们工作年限不久，不到一年，对于社招来说，是非常的吃亏的。工作年限不够，而且整个大环境来说又不好，现在又被裁没有工作，大公司很少会招工作年限这么短的，去小公司又有可能被压价。 唉，不想写这些消极情绪的了，在这被裁的两周里，空闲下来我也思考了很多，接下来说一些我的见解，希望能给到大家帮助。 定时更新简历 之前我在知乎上看到一个 HR 的回答里面说到，不管你跳不跳槽，其实都可以定时更新自己的简历。 我是比较赞成他的说法的，我倾向于半年更新一次简历，因为在更新简历的过程中你会去思考，去总结你在之前的这半年里，你做了什么有价值的东西，有没有什么亮点。 一旦发现在这半年里没有做出什么成绩，那么你也许需要在后面的时间里调整自己的工作方式，思考为什么没有值得写在简历里面的东西，然后给自己定目标，做规划，尽量在半年后可以有一些亮点可以跟别人吹。 多做总结 总结这个东西，其实每个人都会觉得应该做，但是很少人真正的去执行，也许是因为太忙，也许是因为懒，也许是因为觉得他不重要。 我相信很多人会有这样的感觉，当别人问你做的项目有没有什么难度，在做的时候遇到了什么困难，以及怎么解决的。你会感觉都已经做出来了，感觉没什么难的了。 其实在我看来，这其实就是没有及时的总结导致的。 我的建议是当你遇到难题并解决之后，马上记下来，因为这个时候是你最有动力，也是最清醒的时刻，一旦你想后面有空了再记，那么基本上就是不会记了。 另外就是每个项目完结之后也需要进行总结，遇到的问题，项目的架构，项目的价值等等，这些东西是以后可以跟面试官聊项目的资本。如果不记下来，当你写简历的时候，很可能会把关键的地方忘掉。 忙一点的公司挺好 可能对于这一点很多人会觉得我政治不正确，觉得理想的工作不应该是朝九晚六，到点下班么。 但是我最近在观察那些发展得好的企业，加班都比较严重，比如阿里、腾讯、字节跳动、拼多多等，当然这些公司都会给你更高的薪水。 为什么我会绝对忙的公司其实挺好呢？主要是因为公司发展迅速，意味着就会扩大生产，那么就需要更多的劳动力，但是对于招聘合适的人又是一个急不得的事儿，所以留在公司的人可能会很忙，得干超出正常一个人所干的事儿。 这样其实你可以有更多需求做，也许是重复的，也许是新的东西，不管怎么样，一旦你代码写得多，你能更可能发现到别人发现不到的痛点，也会给公司做更多的贡献，其实对于成长是有帮助的。 可能有人会觉得我只是一个打工的，在规定的时间把东西做完，下班时间再去学习，其实这种方式对于大部分人来说不是特别的高效，因为学习这件事其实是反人性的，下班了也许你更多的时间会用于其他娱乐中。 再说一下对于比较闲的公司，也许很多人都想去，比如外企，相对国内的大厂来说要轻松很多，但是闲的公司很容易让人养成懒的习惯，特别是对于工作不久的，一旦养成了懒惰的习惯，就会危害自己一辈子。 我希望这一点不要跟我争论，如果你希望去不忙的公司，你去就行了，也不用说服我。...

译者序 最近在研究 JavaScript 基础性的东西，但是看到对于执行上下文的解释我发现有两种，一种是执行上下文包含：scope(作用域)、variable object(变量对象)、this value(this 值)，另外一个种是包含：lexical environment(词法环境)、variable environment(变量环境)、this value(this 值)。 后面我查阅了不少博客以及 ES3 和 ES5 的规范才了解到，第一种是 ES3 的规范，经典书籍《JavaScript高级程序设计》第三版就是这样解释的，也是网上广为流传的一种，另一种是 ES5 的规范。 然后我接着又去翻了 ES2018 中的，发现又有变化了，已经增加了更多的内容了，考虑到这部分内容颇为复杂，准备后面再进行总结分享，查资料的时候看到这篇讲执行上下文(ES5 )的还不错，所以就翻译出来先分享给大家。 以后看到变量对象、活动对象知道是 ES3 里面的内容，而如果是词法环境、变量环境这种词就是 ES5 以后的内容。 以下是正文： 什么是执行上下文？ 简而言之，执行上下文是计算和执行 JavaScript 代码的环境的抽象概念。每当 Javascript 代码在运行的时候，它都是在执行上下文中运行。 执行上下文的类型 JavaScript 中有三种执行上下文类型。 全局执行上下文 — 这是默认或者说基础的上下文，任何不在函数内部的代码都在全局上下文中。它会执行两件事：创建一个全局的 window 对象（浏览器的情况下），并且设置 this 的值等于这个全局对象。一个程序中只会有一个全局执行上下文。 函数执行上下文 — 每当一个函数被调用时, 都会为该函数创建一个新的上下文。每个函数都有它自己的执行上下文，不过是在函数被调用时创建的。函数上下文可以有任意多个。每当一个新的执行上下文被创建，它会按定义的顺序（将在后文讨论）执行一系列步骤。 Eval 函数执行上下文 — 执行在 eval 函数内部的代码也会有它属于自己的执行上下文，但由于 JavaScript 开发者并不经常使用 eval，所以在这里我不会讨论它。 执行栈 执行栈，也就是在其它编程语言中所说的“调用栈”，是一种拥有 LIFO（后进先出）的数据结构，被用来存储代码运行时创建的所有执行上下文。 当 JavaScript 引擎第一次遇到你的脚本时，它会创建一个全局的执行上下文并且压入当前执行栈。每当引擎遇到一个函数调用，它会为该函数创建一个新的执行上下文并压入栈的顶部。 引擎会执行处于栈顶的执行上下文的函数。当该函数执行结束时，执行上下文从栈中弹出，控制流程到达当前栈中的下一个上下文。 让我们通过下面的代码示例来理解： let a = 'Hello World!...