前端练级攻略（我是怎么拿到微信 offer 的）

持续更新中。。。

前言

又到了一年一度的校招季，身边有好几个朋友来问我要面经，前端的知识点又特别多而零碎，因而就想梳理汇总一下，方便朋友复习，也供各位 FEer 查缺补漏，文中涉及的文章如有侵权，请联系删除。

因为我的的经验有限，图中的知识点可能并不能被彻底覆盖，欢迎你们补充~

前端练级知识体系

知识点思惟导图

算法基础

不少同类的文章都喜欢把算法放在最后，但我把它放在最前面，由于算法是计算机的基础学科，并且它经常能拓宽咱们编码的思路。固然提高算法能力最快速的方式仍是去 LeetCode 刷上个几百道算法题~

《JavaScript实现简单二叉查找树》

本文主要讲述了二叉树的前序遍历、中序遍历、后序遍历以及二叉查找树的 JS 实现方式，可是并无 AVL 树和红黑树的实现，有点小遗憾，不过在前端面试中基本上也不会涉及，因此仍是很值得在大厂面试前复习一下的~

《十大经典排序算法总结》

排序是每一个程序员都应该掌握的基础算法(我指的并非 Array.sort 啊喂ヽ(●-`Д´-)ノ)，文中不只给出了各类经典排序算法的实现以及时空间复杂度，还配上了动图来描述算法的排序过程，能够说是很是良心了。

《前端该如何准备数据结构和算法？》

JS基础

《ECMAScript 6入门》

良心做者，有实体书的状况下还开源了电子书，不论是在开发工做，仍是面试复习都很是值得多刷的基础，在下完整地刷了3遍以上，每次看完都有新的收获。

《JavaScript深刻系列》《JavaScript专题系列》

这两个专题总共有35篇文章，基本上涵盖了 JS 大部分重点，描述的语言也通俗易懂，从 this 、闭包到继承、柯里化都有说起，很是适合用来学习基础。

《Promise原理讲解(遵循Promise/A+规范)》

不少大厂的面试官在没有好的面试题能够问的时候，都特别喜欢让你手写一个 Promise (别问我是怎么知道的，说多了都是泪)，这篇文章是讲解 Promise 实现比较完整详细的，推荐看完之后本身实现一遍。

《前端 100 问》

这篇文章是 github 一个 1.2w 多 stars 的项目汇总的高频面试题，里面不只有 JS 基础，还有各类比较常见的面试题。

网络基础

《从输入URL到页面加载的过程？如何由一道题完善本身的前端知识体系！》

经典的一道网络面试题，不管是前端仍是后端都有涉及，包括请求线程如何发起请求、客户端与服务器的 http 交互、缓存、页面渲染和 JS 引擎。

《小哥哥,小姐姐,我有一份tcp、http面试指南你要吗？》

上文的简化版，若是以为第一篇看起来太吃力，能够从这篇看起，由浅入深。

《多是全网最全的http面试答案》

讲解了各类 restful 请求的区别，以及 HTTP/2.0 的各类新特性和优点，还有一些常见状态码的区别。

浏览器相关

《图解浏览器的基本工做原理》

详细地解释说明了浏览器的各个线程，是怎么结合在一块儿工做的，最终呈现网页的过程。

《从浏览器渲染原理，说一说如何实现高效的动画》

浏览器是怎么渲染页面的，同时咱们应该如何更优雅地实现页面的动画效果。

网络安全

《程序员必需要了解的web安全》

浏览器的安全策略，什么是 csrf 和 xss 攻击，以及对这两种攻击方式的应对。

《详解 Cookie，Session，Token》

既然聊到了网络安全，就必然会涉及到用户验证，Session 和 Token 验证是比较经常使用到的，特别是 Token 的实现必定要烂熟于心。

《干货！防运营商劫持》

在小公司工做的时候常常遇到页面被劫持的问题，大部分的解决方案都在文章里面有所说起。

Framework

《实现双向绑定Proxy比defineproperty优劣如何?》

Vue 3.0 与 2.0 实现双向数据绑定的对比，若是你的技术栈中有 Vue ，基本上是绕不过去的一道题。

《解析vue2.0的diff算法》

同上，diff 算法也是框架必问的一道题，除了实现算法和时间复杂度优化外，最好能本身手写出来(手动狗头)~

《【React深刻】从Mixin到HOC再到Hook》

详细地介绍了 React 的 Mixin 、高阶组件和最新的 ReactHook，同时对比了他们的优缺点。

《SPA路由机制详解（看不懂不要钱~~）》

SPA 路由的两种实现方式(hash 和 history)，文章介绍了二者之间的异同，已经在实际运用中的取舍。

性能优化

《咱们应该作些力所能及的优化》

一些常见的 webpack 配置用于优化代码，以及雅虎34条军规，虽然可能有些优化可能不适用了，可是思想仍是值得学习的。

《让老板虎躯一震的前端技术，KPI杀手》

企鹅辅导课程详情页的一次 PWA 优化实践，对 PWA 不太了解的同窗值得一看。

《科普一下 CORS 以及如何节省一次 OPTIONS 请求》

跨域是开发过程当中常常遇到的问题，有时候咱们会发现请求会发起两次，多了一次 OPTIONS ，有时候这多出来的一次请求是能够被优化掉的。

写在最后

这份练级攻略可能并不能彻底适合除我之外的其余人，在下也还在前端的路上不断摸索前行，若是你有更好的方法方式或者意见建议，欢迎在评论区留下足迹~

若是对你有帮助，欢迎点赞、收藏、评论三连~

(PS: 深圳 shopee 正在招聘前端、后台、测试、设计、产品等互联网职位，有意者可简历至：tianpei.liang@shopee.com)