## 前言 的确，有些标题党了。起因是微信群里，有哥们问我，你是怎么学习前端的呢？能不能共享一下学习方法。一句话也挺触动我的，我真的不算是什么大佬，对于学习前端知识，我也不能说是掌握了什么捷径。当然，我个人的学习方法这篇文章已经在写了，预计这周末会在我个人公众号发布。而在此之前，我想展(gong)示(xiang)一下，我平时浏览各个技术网站，所记录下来的文章。如果你能做到每日消化一篇，或许，你只要一年，就能拿下各个大厂 offer！ 不由感慨，好文太多！吾等岂能浪费，还整日怨天尤人。  ## 个人好文收藏 > 收藏截止时间：2019-07-24 11:50:49 ## typescript - [ ] [TypeScript，初次见面，请多指教](https://zhuanlan.zhihu.com/p/57958328) - [x] [可能是你需要的react + typescript 50条规范和经验](https://juejin.im/post/5ce24f8ae51d45106477bd45) - 一些使用规范 ## CSS - [ ] [css加载会造成阻塞吗](https://segmentfault.com/a/1190000018130499) - [ ] [不可思议的纯 CSS 滚动进度条效果](https://juejin.im/post/5c35953ce51d45523f04b6d2) - [ ] [CSS实现水平垂直居中的1010种方式（史上最全）](https://juejin.im/post/5b9a4477f265da0ad82bf921) - [ ] [rem布局解析](https://juejin.im/post/5b90e07ce51d450e6a2dd140) - [ ] [布局的下一次革新](https://juejin.im/post/5b85586ce51d4538c77a9cc1) - [ ] [彻底搞懂word-break、word-wrap、white-space](https://juejin.im/post/5b8905456fb9a01a105966b4) - [ ] [彻底搞懂CSS层叠上下文、层叠等级、层叠顺序、z-index](https://juejin.im/post/5b876f86518825431079ddd6) - [ ] [css加载会造成阻塞吗？](https://juejin.im/post/5b88ddca6fb9a019c7717096?utm_source=gold_browser_extension) - [ ] [从青铜到王者10个css3伪类使用技巧和运用，了解一哈](https://juejin.im/post/5b6d0c5cf265da0f504a837f) - [ ] [CSS性能优化的8个技巧](https://juejin.im/post/5b6133a351882519d346853f?utm_source=gold_browser_extension) - [ ] [个人总结（css3新特性）](https://juejin.im/post/5a0c184c51882531926e4294) - [ ] [CSS设置居中的方案总结-超全](https://juejin.im/post/5a7a9a545188257a892998ef) - [ ] [Web开发者需要知道的CSS Tricks](https://juejin.im/post/5aab4f985188255582521c57) - [ ] [CSS 常用技巧](https://juejin.im/post/5b1f41246fb9a01e725131fb) ## 前端工程（架构、软实力） - [ ] [前端缓存最佳实践](https://juejin.im/post/5c136bd16fb9a049d37efc47) - [ ] [写给前端看的架构文章(1)：MVC VS Flux](https://zhuanlan.zhihu.com/p/21324696) - [ ] [前端数据校验从建模开始](https://juejin.im/post/5b87c8a5e51d4538e41067a8) - [ ] [前端也需要了解的 JSONP 安全](https://juejin.im/post/5b75b497e51d45666276251d) - [ ] [网站性能优化实战——从12.67s到1.06s的故事](https://juejin.im/post/5b6fa8c86fb9a0099910ac91) - [ ] [5 分钟撸一个前端性能监控工具](https://juejin.im/post/5b7a50c0e51d4538af60d995) - [ ] [浏览器页面资源加载过程与优化](https://juejin.im/post/5a4ed917f265da3e317df515) - [ ] [现代化懒加载的方式](https://juejin.im/post/5a76bb955188257a79247cbd) - [ ] [用 preload 预加载页面资源](https://juejin.im/post/5a7fb09bf265da4e8e785c38) - [ ] [干货!各种常见布局实现+知名网站实例分析](https://juejin.im/post/5aa252ac518825558001d5de) - [ ] [前端数据结构与算法](https://fed.renren.com/2017/07/02/algorithm/) - [ ] [前端工程师为什么要学习编译原理？](https://zhuanlan.zhihu.com/p/31096468) - [ ] [jsonp的原理与实现](https://segmentfault.com/a/1190000007665361) - [ ] [懒加载和预加载](https://juejin.im/post/5b0c3b53f265da09253cbed0) - [ ] [50行代码的MVVM，感受闭包的艺术](https://juejin.im/post/5b1fa77451882513ea5cc2ca) - [ ] [不好意思！耽误你的十分钟，让MVVM原理还给你](https://juejin.im/post/5abdd6f6f265da23793c4458) - [ ] [2018 前端性能优化清单](https://juejin.im/post/5a966bd16fb9a0635172a50a) - [ ] [网页图片加载优化方案](https://zhuanlan.zhihu.com/p/33370207) - [ ] [把前端监控做到极致](https://zhuanlan.zhihu.com/p/32262716) - [ ] [如何优雅处理前端异常](https://zhuanlan.zhihu.com/p/51800345) - [ ] [经典面试题：从 URL 输入到页面展现到底发生什么](https://zhuanlan.zhihu.com/p/57895541) - [ ] [前端同构渲染的思考与实践](https://juejin.im/post/5c821dc45188257e1f2915b1) - [ ] [前端构建秘籍](https://juejin.im/post/5c9075305188252d5c743520) - [ ] [大型项目前端架构浅谈（8000字原创）](https://juejin.im/post/5cea1f705188250640005472) - [ ] [一名【合格】前端工程师的自检清单](https://juejin.im/post/5cc1da82f265da036023b628) ## React 技术栈 - [ ] [React 源码解析](https://zhuanlan.zhihu.com/p/28697362) - [ ] [从零搭建React全家桶框架教程](https://github.com/brickspert/blog/issues/1) - [ ] [让虚拟DOM和DOM-diff不再成为你的绊脚石](https://juejin.im/post/5c8e5e4951882545c109ae9c) - [ ] [《React源码解析》系列完结！](https://juejin.im/post/5a84682ef265da4e83266cc4?utm_medium=fe&utm_source=weixinqun) - [ ] [怎样学习React？当然是自己动手实现一个React啦](https://juejin.im/post/5ad81c24f265da504c168c85) - [ ] [从setState promise化的探讨 体会React团队设计思想](https://zhuanlan.zhihu.com/p/28905707) - [ ] [React 应用设计之道 - curry 化妙用](https://zhuanlan.zhihu.com/p/35833143) - [ ] [如何评价React的新功能Time Slice 和Suspense？](https://www.zhihu.com/question/268028123) - [ ] [React的新引擎—React Fiber是什么](http://www.infoq.com/cn/articles/what-the-new-engine-of-react) - [ ] [React源码解析(三):详解事务与更新队列](https://juejin.im/post/59cc4c4bf265da0648446ce0) - [ ] [React中的Transaction](https://oychao.github.io/2017/09/25/react/16_transaction/) - [ ] [React 源码剖析系列 － 玩转 React Transition](https://zhuanlan.zhihu.com/p/20419592) - [ ] [如何提高你的 React 应用的性能](https://juejin.im/post/5a24fe146fb9a0450e75f3bc) - [ ] [将 React 应用优化到 60fps](https://zhuanlan.zhihu.com/p/24959748) - [ ] [如何写出更好的 React 代码？](https://juejin.im/post/5ae975d26fb9a07aa92588b7) - [ ] [React中型项目的优化实践](https://juejin.im/post/5b207a84f265da6e4c6d08ba) - [x] [React 源码剖析系列 － 生命周期的管理艺术](https://zhuanlan.zhihu.com/p/20312691) - 生命周期主要通过三种状态进行管理：MOUNTING、RECEIVE_PROPS、UNMOUNTING - [x] [深入React的生命周期(上)：出生阶段(Mount)](https://zhuanlan.zhihu.com/p/30757059) - 仅生成React组件不会触发生命周期的调用 - componentWillMount和render父组件先调用，与componentDidMount顺序恰巧相反 - [x] [深入React的生命周期(下)：更新(Update)](https://zhuanlan.zhihu.com/p/30971608) - 虽然props的更改会引起componentWillReceiveProps的调用；但componentWillReceiveProps的调用并不意味着props真的发生了变化。 - [x] [你真的了解React吗（上）如何设计组件以及重要的生命周期](https://zhuanlan.zhihu.com/p/27828773) - [x] [React v16.3 版本新生命周期函数浅析及升级方案](https://juejin.im/post/5ae6cd96f265da0b9c106931) - [ ] [React ref 的前世今生](https://zhuanlan.zhihu.com/p/40462264) - [ ] [谈谈 react 中的 key](https://juejin.im/post/5a7c04746fb9a063461fe700) - [ ] [React Mixin 的前世今生](https://zhuanlan.zhihu.com/p/20361937) - [ ] [你真的了解React吗（中）组件间的通信以及React优化](https://zhuanlan.zhihu.com/p/27828866) - [ ] [深入框架本源系列 —— Virtual Dom](https://juejin.im/post/5b10dd36e51d4506e04cf802) - [ ] [探索Virtual DOM的前世今生](https://zhuanlan.zhihu.com/p/35876032) - [ ] [深入框架本源系列 —— Virtual Dom](https://juejin.im/post/5b10dd36e51d4506e04cf802#heading-2) - [x] [React 源码剖析系列 － 不可思议的 react diff](https://zhuanlan.zhihu.com/p/20346379) - 关于两个list的比较还是比较深入的，可以重点研究 - [x] [浅入浅出图解domDIff](https://juejin.im/post/5ad550f06fb9a028b4118d99) - [x] [深度剖析：如何实现一个 Virtual DOM 算法](https://github.com/livoras/blog/issues/13) - 代码实现可作为参考 - [x] [React 源码剖析系列 － 解密 setState](https://zhuanlan.zhihu.com/p/20328570) - setState是同步的，事务需要了解 - [x] [setState的秘密](https://juejin.im/post/599b8f066fb9a0247637d61b) - [x] [setState 之后发生了什么 —— 浅谈 React 中的 Transaction](https://undefinedblog.com/what-happened-after-set-state/) - [x] [你真的理解setState吗？](https://zhuanlan.zhihu.com/p/39512941) - [ ] [React 中的高阶组件及其应用场景](https://juejin.im/post/5c72b97de51d4545c66f75d5) - [ ] [React 最佳实践](https://segmentfault.com/a/1190000018107137) - [ ] [完全理解React Fiber](http://www.ayqy.net/blog/dive-into-react-fiber/) - [ ] [React Fiber架构](https://juejin.im/entry/5b0245486fb9a07ac23b08ab) - [ ] [React Fiber 架构介绍资料汇总](https://segmentfault.com/a/1190000012834204) - [ ] [你不知道的Virtual DOM系列](https://segmentfault.com/a/1190000016129036) - [ ] [【译】通过Recompose库掌握React函数组件](https://juejin.im/entry/5b7a989651882542b03e5412) - [ ] [React-Redux源码分析](https://juejin.im/post/59cb5eba5188257e84671aca) - [ ] [源码看React setState漫谈（一）](https://segmentfault.com/a/1190000011170740) - [ ] [源码看React setState漫谈（二）](https://segmentfault.com/a/1190000011184268) - [ ] [精读《用160行js代码实现一个React》](https://juejin.im/post/5b0a697f518825389c508872) - [ ] [还在用 Redux，要不要试试 GraphQL 和 Apollo](https://juejin.im/post/5afe7a2c518825673b6243a6) - [ ] [React 同构实践与思考](https://zhuanlan.zhihu.com/p/20669111) - [ ] [React 实现 Table 的思考](https://zhuanlan.zhihu.com/p/20848369) - [ ] [React实践 - Component Generator](https://zhuanlan.zhihu.com/p/21386862) - [ ] [ReactEurope 2016 小记 - 上](https://zhuanlan.zhihu.com/p/21379350) - [ ] [ReactEurope 2016 小记 - 下](https://zhuanlan.zhihu.com/p/21616613) - [ ] [Mobx 思想的实现原理，及与 Redux 对比](https://zhuanlan.zhihu.com/p/25585910) - [ ] [组件库设计实战 - 复杂组件设计](https://zhuanlan.zhihu.com/p/29034015) - [ ] [redux middleware 详解](https://zhuanlan.zhihu.com/p/20597452) - [ ] [深入理解 react-router 路由系统](https://zhuanlan.zhihu.com/p/20381597) - [ ] [Immutable 详解及 React 中实践](https://zhuanlan.zhihu.com/p/20295971) - [ ] [React-Redux源码分析](https://zhuanlan.zhihu.com/p/29723405) ## webpack/babel - [ ] [Webpack 源码（一）—— Tapable 和 事件流](https://segmentfault.com/a/1190000008060440) - [ ] [手把手教你撸一个 Webpack Loader](https://juejin.im/post/5a698a316fb9a01c9f5b9ca0) - [ ] [面试官: 你了解过Babel吗？写过Babel插件吗? 答: 没有。卒](https://juejin.im/post/5a9315e46fb9a0633a711f25) - [ ] [Write Better JavaScript With Webpack](https://forestry.io/blog/write-better-javascript-with-webpack/) - [ ] [手把手教你撸一个简易的 webpack](https://juejin.im/post/5b192afde51d45069c2efe5a) - [x] [带你走进webpack世界，成为webpack头号玩家](https://juejin.im/post/5ac9dc9af265da23884d5543) - webpack 优化方法讲解较多、prod/dev 配置文件、loader/plugin 的简单编写介绍 - [ ] [webpack打包之后的文件过大的解决方法](https://juejin.im/post/5a9d17446fb9a028d374e733) - [ ] [webpack详解](https://juejin.im/post/5aa3d2056fb9a028c36868aa) - [x] [webpack4-用之初体验，一起敲它十一遍](https://juejin.im/post/5adea0106fb9a07a9d6ff6de) - 从零配置，基础配置，c3 前缀，热更新、提取公共代码等 - [x] [基于Webpack搭建React开发环境](https://juejin.im/post/5afc29fa6fb9a07ab379a2ae) - 简单借鉴 webpack-merge - [ ] [入门babel--实现一个es6的class转换器](https://juejin.im/post/5ac1c5bf518825558949f898) - [ ] [webpack 中那些最易混淆的 5 个知识点](https://juejin.im/post/5cede821f265da1bbd4b5630) - [ ] [关于webpack4的14个知识点,童叟无欺](https://juejin.im/post/5cea1e1ae51d4510664d1652) ## Test - [ ] [ESLint里的规则教会我，无规矩 不编程](https://juejin.im/post/5afede99f265da0b82630af8) ## JavaScript - [ ] [发布订阅模式，在工作中它的能量超乎你的想象](https://juejin.im/post/5b125ad3e51d450688133f22) - [ ] [谁说前端不需要懂-Nginx反向代理与负载均衡](https://juejin.im/post/5b01336af265da0b8a67e5c9) - [ ] [CSS世界中那些说起来很冷的知识](https://juejin.im/post/5b406f40e51d45194832b759) - [ ] [WebSocket是时候展现你优秀的一面了](https://juejin.im/post/5bc7f6b96fb9a05d3447eef8) - [ ] [socket.io让每个人都可以开发属于自己的即时通讯](https://juejin.im/post/5bce886af265da0ac07c8ef8) - [ ] [WebSocket 是什么原理？为什么可以实现持久连接](https://juejin.im/entry/5ad6a9f7f265da237840ca13) - [x] [JavaScript 如何工作：对引擎、运行时、调用堆栈的概述](https://juejin.im/post/5a05b4576fb9a04519690d42) - 了解JavaScript调用栈 - [x] [理解 JavaScript 中的执行上下文和执行栈](https://juejin.im/post/5ba32171f265da0ab719a6d7) - 执行上下文、变量环境、词法环境 再看一遍 - [x] [这一次，彻底弄懂 JavaScript 执行机制](https://juejin.im/post/59e85eebf265da430d571f89) - [ ] [JavaScript开发者应懂的33个概念](https://zhuanlan.zhihu.com/p/48049957) - [ ] [前端js实现字符串/图片/excel文件下载](https://segmentfault.com/a/1190000018143902) - [ ] [JavaScript 复杂判断的更优雅写法](https://juejin.im/post/5bdfef86e51d453bf8051bf8) - [ ] [性感的Promise，拥抱ta然后扒光ta](https://juejin.im/post/5ab20c58f265da23a228fe0f) - [ ] [近一万字的ES6语法知识点补充](https://juejin.im/post/5c6234f16fb9a049a81fcca5) - [ ] [深拷贝的终极探索（90%的人都不知道）](https://juejin.im/post/5bc1ae9be51d450e8b140b0c) - [ ] [前端路由跳转基本原理](https://segmentfault.com/a/1190000018081475) - [ ] [九种跨域方式实现原理](https://juejin.im/post/5c23993de51d457b8c1f4ee1) - [ ] [发现 JavaScript 中闭包的强大威力](https://juejin.im/post/5c4e6a90e51d4552266576d2) - [ ] [你可能不熟悉的JS总结](https://segmentfault.com/a/1190000018113011) - [ ] [JavaScript中高阶函数的魅力](https://juejin.im/post/5b8c8a6951882542ee717c86) - [ ] [小邵教你玩转JS面向对象](https://juejin.im/post/5b8a8724f265da435450c591) - [ ] [AST抽象语法树——最基础的javascript重点知识，99%的人根本不了解](https://juejin.im/entry/5b8ba64051882543036711dd) - [ ] [ES6、ES7、ES8特性一锅炖](https://juejin.im/post/5b9cb3336fb9a05d290ee47e) - [ ] [如何在 JavaScript 中更好地使用数组](https://juejin.im/post/5b8d0a74f265da431d0e7ec0) - [ ] [7分钟理解JS的节流、防抖及使用场景](https://juejin.im/post/5b8de829f265da43623c4261) - [ ] [ECMAScript 6 六级考试](https://zhuanlan.zhihu.com/p/29214240) - [ ] [javascript: Airbnb JavaScript 代码规范](https://juejin.im/repo/59dcab3651882530e289f8dd) - [ ] [Promise实现原理（附源码）](https://juejin.im/post/5b83cb5ae51d4538cc3ec354) - [ ] [可能是最好的正则表达式的教程笔记了吧...](https://juejin.im/post/5b5db5b8e51d4519155720d2) - [ ] [一些 JavaScript 中的代码小技巧](https://juejin.im/entry/5b7d68b6e51d4538b35c016d) - [ ] [急速JavaScript全栈教程](https://juejin.im/entry/5b7cc6926fb9a019f47d0ec8) - [ ] [理解异步之美 --- promise与async await （三）](https://juejin.im/post/5b7c021af265da43623c26c6?utm_source=gold_browser_extension) - [ ] [ES9已经来了 Are you ready?](https://juejin.im/post/5b685ed1e51d4533f52859e8) - [ ] [使用原生 JavaScript构建状态管理系统](https://juejin.im/post/5b763528e51d45559e3a5b64) - [ ] [Promise 必知必会（十道题）](https://juejin.im/post/5a04066351882517c416715d) - [ ] [JS正则表达式完整教程（略长）](https://juejin.im/post/5965943ff265da6c30653879) - [ ] [防抖和节流原理分析](https://juejin.im/post/5b7b88d46fb9a019e9767405?utm_medium=fe&utm_source=weixinqun) - [ ] [JavaScript 实用技巧和写法建议](https://juejin.im/post/5a0c199851882531926e4297) - [ ] [编写自己的代码库（javascript常用实例的实现与封装）](https://juejin.im/post/5a2a7a5051882535cd4abfce) - [ ] [import、require、export、module.exports 混合使用详解](https://juejin.im/post/5a2e5f0851882575d42f5609) - [ ] [WebSocket：5分钟从入门到精通](https://juejin.im/post/5a4e6a43f265da3e303c4787) - [ ] [JavaScript 运行原理解析](https://juejin.im/post/5a5d64fbf265da3e243b831f) - [ ] [简单了解JavaScript垃圾回收机制](https://juejin.im/post/5a6b3fcaf265da3e2c385375) - [ ] [一次记住js的6个正则方法](http://varnull.cn/yi-ci-ji-zhu-jsde-6ge-zheng-ze-fang-fa/) - [ ] [几道JS代码手写题以及一些代码实现](https://juejin.im/post/5aa7d82c6fb9a028c522de43) - [ ] [JSBridge的原理](https://juejin.im/post/5abca877f265da238155b6bc) - [ ] [面试官: 你了解前端路由吗?](https://juejin.im/post/5ac61da66fb9a028c71eae1b) - [ ] [深入剖析 JavaScriptCore](https://ming1016.github.io/2018/04/21/deeply-analyse-javascriptcore/?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io) - [ ] [JavaScript闭包的底层运行机制](http://blog.leapoahead.com/2015/09/15/js-closure/) - [ ] [JavaScript 中的多线程 -- Web Worker](https://qiutc.me/post/the-multithread-in-javascript-web-worker.html) - [ ] [解锁多种JavaScript数组去重姿势](https://juejin.im/post/5b0284ac51882542ad774c45) - [ ] [Promise不会？？看这里！！！史上最通俗易懂的Promise！！！](https://juejin.im/post/5afe6d3bf265da0b9e654c4b) - [ ] [前端将数据转化为弹幕效果的实现方式](https://juejin.im/post/5ae56927f265da0b7e0c0968) - [ ] [浅谈 instanceof 和 typeof 的实现原理](https://juejin.im/post/5b0b9b9051882515773ae714) - [ ] [一起学习造轮子（一）：从零开始写一个符合Promises/A+规范的promise](https://juejin.im/post/5b16800fe51d4506ae719bae) - [ ] [前端性能相关：防抖、节流](https://juejin.im/entry/5ad74f065188252ead091937) - [ ] [7种方法实现数组去重](https://juejin.im/post/5aed6110518825671b026bed) - [ ] [如何实现一个HTTP请求库——axios源码阅读与分析](https://juejin.im/post/5aedd4a2f265da0b9d781b85) - [ ] [面试官:既然React/Vue可以用Event Bus进行组件通信,你可以实现下吗?](https://juejin.im/post/5ac2fb886fb9a028b86e328c) - [ ] [高阶函数，你怎么那么漂亮呢！](https://juejin.im/post/5ad6b34a6fb9a028cc61bfb3) - [ ] [面试官:请你实现一个深克隆](https://juejin.im/post/5abb55ee6fb9a028e33b7e0a) - [ ] [前端模块化：CommonJS,AMD,CMD,ES6](https://juejin.im/post/5aaa37c8f265da23945f365c) - [ ] [小邵教你玩转promise源码](https://juejin.im/post/5b6e5cbf51882519ad61b67e) - [ ] [Promise原理讲解 && 实现一个Promise对象](https://juejin.im/post/5aa7868b6fb9a028dd4de672) - [ ] [浅谈 HTTP/2 Server Push](https://zhuanlan.zhihu.com/p/26757514) - [ ] [开发更好用的 JavaScript 模块](https://zhuanlan.zhihu.com/p/31499310) - [ ] [JavaScript复杂判断的更优雅写法](https://zhuanlan.zhihu.com/p/48917912) - [ ] [我从来不理解JavaScript闭包，直到有人这样向我解释它](https://zhuanlan.zhihu.com/p/56490498) - [ ] [重新认识构造函数、原型和原型链](https://juejin.im/post/5c6a9c10f265da2db87b98f3) - [ ] [如何在 Web 关闭页面时发送 Ajax 请求](https://juejin.im/post/5c7e541b6fb9a049e06415a5) - [ ] [用 Proxy 追踪 JavaScript 类](https://juejin.im/post/5c8533e6e51d4561a0778a4c) - [ ] [ 「中高级前端面试」JavaScript手写代码无敌秘籍](https://juejin.im/post/5c9c3989e51d454e3a3902b6) - [ ] [JavaScript的环境模型](https://mp.weixin.qq.com/s/rOxvYS7MdnPAX7FGjpOXnw) - [ ] [面试官(6): 写过『通用前端组件』吗?](https://juejin.im/post/5c02142fe51d4511be77aad7) - [ ] [抱歉，学会 Proxy 真的可以为所欲为](https://zhuanlan.zhihu.com/p/35080324) - [ ] [中级前端工程师必须要掌握的 28 个 JavaScript 技巧](https://juejin.im/post/5cef46226fb9a07eaf2b7516) - [ ] [前端路由原理解析和实现](https://juejin.im/post/5cd8d609e51d456e7b372155) - [ ] [正则表达式不要背](https://juejin.im/post/5cdcd42551882568651554e6) - [ ] [前端必知必会--操作URL的黑科技](https://juejin.im/post/5d038c9051882548ac439933) - [ ] [送你43道JavaScript面试题](https://juejin.im/post/5d0644976fb9a07ed064b0ca) ## Node - [ ] [一篇文章构建你的 NodeJS 知识体系](https://juejin.im/post/5c4c0ee8f265da61117aa527) - [ ] [200 多行代码实现 Websocket 协议](https://segmentfault.com/a/1190000016467409) - [ ] [浏览器与Node的事件循环(Event Loop)有何区别](https://zhuanlan.zhihu.com/p/54882306) - [ ] [NodeJS与模块系统](https://mp.weixin.qq.com/s/uDp0v_1hN0Uzg-EGr1yfgA) ## Flutter - [ ] [Flutter实战视频-移动电商](https://jspang.com/post/FlutterShop.html#toc-4c7) - [ ] [flutter中event_bus实现原理](https://cloud.tencent.com/developer/article/1338289) - [ ] [Flutter 面试知识点集锦](https://juejin.im/post/5cd9875ae51d453d022cb662) ## Http - [ ] [设计一个无懈可击的浏览器缓存方案：关于思路，细节，ServiceWorker，以及HTTP/2](https://zhuanlan.zhihu.com/p/28113197) - [ ] [你应该知道的前端——缓存](https://juejin.im/post/5ae081aaf265da0b767d263a) - [ ] [HTTP 缓存机制一二三](https://zhuanlan.zhihu.com/p/29750583) - [ ] [都9102年了，还问GET和POST的区别](https://segmentfault.com/a/1190000018129846) - [ ] [通过HTTP的HEADER完成各种骚操作](https://juejin.im/post/5b7919345188254312414b9c) - [ ] [九个问题从入门到熟悉HTTPS](https://juejin.im/post/5a2ff29c6fb9a045132aac5a) - [ ] [谈谈 HTTPS](https://juejin.im/post/59e4c02151882578d02f4aca) - [ ] [你敢在post和get上刁难我，就别怪我装逼了](https://juejin.im/post/59fc04ecf265da4317697f26) - [ ] [图解TCP三次握手与四次分手](https://juejin.im/post/5a7835a46fb9a063606eb801) - [ ] [面试带你飞：这是一份全面的 计算机网络基础 总结攻略](https://juejin.im/post/5ad7e6c35188252ebd06acfa) - [ ] [小哥哥,小姐姐,我有一份tcp、http面试指南你要吗？](https://juejin.im/post/5ad4094e6fb9a028d7011069) - [ ] [看图学HTTPS](https://juejin.im/post/5b0274ac6fb9a07aaa118f49) - [ ] [分分钟让你理解HTTPS](https://juejin.im/post/5ad6ad575188255c272273c4) - [ ] [小哥哥,小姐姐,我有一份tcp、http面试指南你要吗？](https://juejin.im/post/5ad4094e6fb9a028d7011069) - [ ] [HTTP2基本概念学习笔记](https://juejin.im/post/5acccf966fb9a028d043c6ec) - [ ] [都2019年了，还问GET和POST的区别](https://zhuanlan.zhihu.com/p/57361216) - [ ] [前端基础篇之HTTP协议](https://juejin.im/post/5cd0438c6fb9a031ec6d3ab2) - [ ] [关于三次握手与四次挥手面试官想考我们什么](https://juejin.im/post/5ccd0dfc6fb9a0324a08bb73) - [ ] [寒冬求职之你必须要懂的Web安全](https://juejin.im/post/5cd6ad7a51882568d3670a8e) - [ ] [前端基础篇之HTTP协议](https://juejin.im/post/5cd0438c6fb9a031ec6d3ab2)- [ ] [你真的了解 Cookie 和 Session 吗](https://juejin.im/post/5cd9037ee51d456e5c5babca) - [ ] [这几个概念你可能还是没搞清require、import和export](https://juejin.im/post/5ccf98eae51d453a4a357e4a) ## 浏览器 - [ ] [前端必须要懂的浏览器缓存机制](https://juejin.im/entry/5ae36365f265da0b886d28c2) - [ ] [浏览器的回流与重绘 (Reflow & Repaint)](https://juejin.im/post/5a9923e9518825558251c96a) - [ ] [深入浅出浏览器渲染原理](https://zhuanlan.zhihu.com/p/53913989) - [ ] [抛弃console.log()，拥抱浏览器Debugger](https://zhuanlan.zhihu.com/p/52077620) ## 面试 - [ ] [Javascript 面试中经常被问到的三个问题！](https://segmentfault.com/a/1190000018257074) - [ ] [破解前端面试（80% 应聘者不及格系列）：从 DOM 说起](https://juejin.im/post/58f558efac502e006c3e5c97) - [ ] [面试的信心来源于过硬的基础](https://segmentfault.com/a/1190000013331105) - [ ] [BAT前端经典面试问题：史上最最最详细的手写Promise教程](https://juejin.im/post/5b2f02cd5188252b937548ab) - [ ] [破解前端面试（80% 应聘者不及格系列）：从闭包说起](https://juejin.im/post/58f1fa6a44d904006cf25d22#heading-0) - [ ] [前端面试题整理](http://blog.poetries.top/FE-Interview-Questions/) - [ ] [中高级前端大厂面试秘籍，为你保驾护航金三银四，直通大厂(上)](https://juejin.im/post/5c64d15d6fb9a049d37f9c20#heading-13) - [ ] [2018大厂高级前端面试题汇总](https://juejin.im/post/5bc92e9ce51d450e8e777136) - [ ] [2018前端面试总结，看完弄懂，工资少说加3K](https://juejin.im/post/5b94d8965188255c5a0cdc02) - [ ] [2018春招前端面试: 闯关记(精排精校)](https://juejin.im/post/5a998991f265da237f1dbdf9) - [ ] [前端面试考点多？看这些文章就够了](https://juejin.im/post/5aae076d6fb9a028cc6100a9) - [ ] [80% 应聘者都不及格的 JS 面试题](https://juejin.im/post/58cf180b0ce4630057d6727c) - [ ] [一次弄懂Event Loop（彻底解决此类面试问题）](https://juejin.im/post/5c3d8956e51d4511dc72c200) - [ ] [中高级前端大厂面试秘籍，为你保驾护航金三银四，直通大厂(上)](https://juejin.im/post/5c64d15d6fb9a049d37f9c20) - [ ] [【半月刊】前端高频面试题及答案汇总](https://juejin.im/post/5c6977e46fb9a049fd1063dc) - [ ] [一道被前端忽略的基础题，不信看你会几题](https://juejin.im/post/5c6a0fa451882562851b3cdd) - [ ] [腾讯校招前端三面,虐完继续撸](https://juejin.im/post/59c907d46fb9a00a4746e2db) - [ ] [2018阿里巴巴前端面试总结](https://juejin.im/post/5ab0da85f265da23866fb9b7) - [ ] [几道高级前端面试题解析](https://juejin.im/post/5aa8a07cf265da238a3022a4) - [ ] [26个精选的JavaScript面试问题](https://zhuanlan.zhihu.com/p/46958191) - [ ] [前端高频面试题及答案汇总](https://juejin.im/post/5c6977e46fb9a049fd1063dc) ## 数据结构与算法 - [ ] [前端笔试&面试爬坑系列---算法](https://juejin.im/post/5b72f0caf265da282809f3b5) - [ ] [漫画：什么是红黑树](https://juejin.im/post/5a27c6946fb9a04509096248) ## 其他 - [ ] [四月前端知识集锦](https://juejin.im/post/5ae95f17f265da0b93481dec) - [ ] [web 项目如何进行 git 多人协作开发](https://segmentfault.com/a/1190000018165757) - [ ] [Chrome插件编写](https://welearnmore.gitbook.io/chrome-extension-book/) - [ ] [用 yeoman 打造自己的项目脚手架](https://juejin.im/post/5b7a24a5e51d4538da22d055) - [ ] [Weex 入坑指南：手把手编译 Playground](https://zhuanlan.zhihu.com/p/25227030) - [ ] [什么是 PWA](https://juejin.im/post/5a9e8ad5f265da23a40456d4) - [ ] [打造属于自己的cnpm/npm安装，生成自定义项目架构](https://juejin.im/post/5a28aead6fb9a0450c494bc6) - [ ] [仿 vue-cli 搭建属于自己的脚手架](https://juejin.im/post/5c94fef7f265da60fd0c15e8#comment) - [ ] [教你从零开始搭建一款前端脚手架工具](https://segmentfault.com/a/1190000006190814) - [ ] [基于node.js的脚手架工具开发经历](https://juejin.im/post/5a31d210f265da431a43330e#heading-14) - [ ] [从零开始搭建脚手架](https://juejin.im/post/5af6f9bd6fb9a07ac90d49eb) - [ ] [react组件从搭建脚手架到在npm发布的步骤实现](https://www.jb51.net/article/154345.htm) ## 结束语 以上包括我已读还未移至已读的记录中（主要是由于感觉还需再度）。所有文章，我都会好好学习，没办法，毕竟比较菜。还有太多需要学习。 欢迎关注我个人微信公众号：全栈前端精选 我会每日推荐各种精选好文，以及每日一道面试题讲解。（今日才开启这个计划） 
前言
的确，有些标题党了。起因是微信群里，有哥们问我，你是怎么学习前端的呢？能不能共享一下学习方法。一句话也挺触动我的，我真的不算是什么大佬，对于学习前端知识，我也不能说是掌握了什么捷径。当然，我个人的学习方法这篇文章已经在写了，预计这周末会在我个人公众号发布。而在此之前，我想展(gong)示(xiang)一下，我平时浏览各个技术网站，所记录下来的文章。如果你能做到每日消化一篇，或许，你只要一年，就能拿下各个大厂 offer！
不由感慨，好文太多！吾等岂能浪费，还整日怨天尤人。
个人好文收藏
typescript
CSS
前端工程（架构、软实力）
React 技术栈
webpack/babel
Test
JavaScript
Node
Flutter
Http
浏览器
面试
数据结构与算法
其他
结束语
以上包括我已读还未移至已读的记录中（主要是由于感觉还需再度）。所有文章，我都会好好学习，没办法，毕竟比较菜。还有太多需要学习。
欢迎关注我个人微信公众号：全栈前端精选
我会每日推荐各种精选好文，以及每日一道面试题讲解。（今日才开启这个计划）