一个优秀的前端都应该阅读这些文章

前言

的确，有些标题党了。起因是微信群里，有哥们问我，你是怎么学习前端的呢？能不能共享一下学习方法。一句话也挺触动我的，我真的不算是什么大佬，对于学习前端知识，我也不能说是掌握了什么捷径。当然，我个人的学习方法这篇文章已经在写了，预计这周末会在我个人公众号发布。而在此之前，我想展(gong)示(xiang)一下，我平时浏览各个技术网站，所记录下来的文章。如果你能做到每日消化一篇，或许，你只要一年，就能拿下各个大厂 offer！

不由感慨，好文太多！吾等岂能浪费，还整日怨天尤人。

个人好文收藏

收藏截止时间：2019-07-24 11:50:49

typescript

• [ ] typescript，初次见面，请多指教
• [x]
  • 一些使用规范
• [ ] 三千字讲清typescript与react的实战技巧

css

• [ ]
• [ ] 不可思议的纯 css 滚动进度条效果
• [ ] css实现水平垂直居中的1010种方式（史上最全）
• [ ]
• [ ]
• [ ]
• [ ] 彻底搞懂css层叠上下文、层叠等级、层叠顺序、z-index
• [ ]
• [ ]
• [ ] css性能优化的8个技巧
• [ ]
• [ ] css设置居中的方案总结-超全
• [ ] web开发者需要知道的css tricks
• [ ] css 常用技巧

前端工程（架构、软实力）

• [ ]
• [ ] 写给前端看的架构文章(1)：mvc vs flux
• [ ]
• [ ] 前端也需要了解的 jsonp 安全
• [ ]
• [ ]
• [ ]
• [ ]
• [ ]
• [ ]
• [ ]
• [ ]
• [ ]
• [ ]
• [ ] 50行代码的mvvm，感受闭包的艺术
• [ ] 不好意思！耽误你的十分钟，让mvvm原理还给你
• [ ]
• [ ]
• [ ]
• [ ]
• [ ] 经典面试题：从 url 输入到页面展现到底发生什么
• [ ]
• [ ]
• [ ]
• [ ]

react 技术栈

• [ ] react 源码解析
• [ ] 从零搭建react全家桶框架教程
• [ ] 让虚拟dom和dom-diff不再成为你的绊脚石
• [ ] 《react源码解析》系列完结！
• [ ] 怎样学习react？当然是自己动手实现一个react啦
• [ ] 从setstate promise化的探讨 体会react团队设计思想
• [ ] react 应用设计之道 - curry 化妙用
• [ ] 如何评价react的新功能time slice 和suspense？
• [ ] react的新引擎—react fiber是什么
• [ ] react源码解析(三):详解事务与更新队列
• [ ] react中的transaction
• [ ] react 源码剖析系列 － 玩转 react transition
• [ ] 如何提高你的 react 应用的性能
• [ ] 将 react 应用优化到 60fps
• [ ] 如何写出更好的 react 代码？
• [ ] react中型项目的优化实践
• [x] react 源码剖析系列 － 生命周期的管理艺术
  • 生命周期主要通过三种状态进行管理：mounting、receive_props、unmounting
• [x] 深入react的生命周期(上)：出生阶段(mount)
  • 仅生成react组件不会触发生命周期的调用
  • componentwillmount和render父组件先调用，与componentdidmount顺序恰巧相反
• [x] 深入react的生命周期(下)：更新(update)
  • 虽然props的更改会引起componentwillreceiveprops的调用；但componentwillreceiveprops的调用并不意味着props真的发生了变化。
• [x] 你真的了解react吗（上）如何设计组件以及重要的生命周期
• [x] react v16.3 版本新生命周期函数浅析及升级方案
• [ ] react ref 的前世今生
• [ ]
• [ ] react mixin 的前世今生
• [ ] 你真的了解react吗（中）组件间的通信以及react优化
• [ ] 深入框架本源系列 —— virtual dom
• [ ] 探索virtual dom的前世今生
• [ ] 深入框架本源系列 —— virtual dom
• [x] react 源码剖析系列 － 不可思议的 react diff
  • 关于两个list的比较还是比较深入的，可以重点研究
• [x] 浅入浅出图解domdiff
• [x] 深度剖析：如何实现一个 virtual dom 算法
  • 代码实现可作为参考
• [x] react 源码剖析系列 － 解密 setstate
  • setstate是同步的，事务需要了解
• [x] setstate的秘密
• [x] setstate 之后发生了什么 —— 浅谈 react 中的 transaction
• [x] 你真的理解setstate吗？
• [ ] react 中的高阶组件及其应用场景
• [ ] react 最佳实践
• [ ] 完全理解react fiber
• [ ] react fiber架构
• [ ] react fiber 架构介绍资料汇总
• [ ] 你不知道的virtual dom系列
• [ ] 【译】通过recompose库掌握react函数组件
• [ ] react-redux源码分析
• [ ] 源码看react setstate漫谈（一）
• [ ] 源码看react setstate漫谈（二）
• [ ] 精读《用160行js代码实现一个react》
• [ ] 还在用 redux，要不要试试 graphql 和 apollo
• [ ] react 同构实践与思考
• [ ] react 实现 table 的思考
• [ ] react实践 - component generator
• [ ] reacteurope 2016 小记 - 上
• [ ] reacteurope 2016 小记 - 下
• [ ] mobx 思想的实现原理，及与 redux 对比
• [ ]
• [ ]
• [ ]
• [ ] immutable 详解及 react 中实践
• [ ] react-redux源码分析

webpack/babel

• [ ] webpack 源码（一）—— tapable 和 事件流
• [ ] 手把手教你撸一个 webpack loader
• [ ] 面试官: 你了解过babel吗？写过babel插件吗? 答: 没有。卒
• [ ] write better javascript with webpack
• [ ]
• [x]
  • webpack 优化方法讲解较多、prod/dev 配置文件、loader/plugin 的简单编写介绍
• [ ]
• [ ]
• [x]
  • 从零配置，基础配置，c3 前缀，热更新、提取公共代码等
• [x] 基于webpack搭建react开发环境
  • 简单借鉴 webpack-merge
• [ ]
• [ ]
• [ ]

test

• [ ] eslint里的规则教会我，无规矩 不编程

javascript

• [ ]
• [ ] 谁说前端不需要懂-nginx反向代理与负载均衡
• [ ] css世界中那些说起来很冷的知识
• [ ] websocket是时候展现你优秀的一面了
• [ ]
• [ ] websocket 是什么原理？为什么可以实现持久连接
• [x] javascript 如何工作：对引擎、运行时、调用堆栈的概述
  • 了解javascript调用栈
• [x] 理解 javascript 中的执行上下文和执行栈
  • 执行上下文、变量环境、词法环境 再看一遍
• [x] 这一次，彻底弄懂 javascript 执行机制
• [ ] javascript开发者应懂的33个概念
• [ ]
• [ ] javascript 复杂判断的更优雅写法
• [ ] 性感的promise，拥抱ta然后扒光ta
• [ ] 近一万字的es6语法知识点补充
• [ ]
• [ ]
• [ ]
• [ ] 发现 javascript 中闭包的强大威力
• [ ] 你可能不熟悉的js总结
• [ ] javascript中高阶函数的魅力
• [ ] 小邵教你玩转js面向对象
• [ ] ast抽象语法树——最基础的javascript重点知识，99%的人根本不了解
• [ ] es6、es7、es8特性一锅炖
• [ ] 如何在 javascript 中更好地使用数组
• [ ] 7分钟理解js的节流、防抖及使用场景
• [ ] ecmascript 6 六级考试
• [ ] javascript: airbnb javascript 代码规范
• [ ] promise实现原理（附源码）
• [ ]
• [ ] 一些 javascript 中的代码小技巧
• [ ] 急速javascript全栈教程
• [ ]
• [ ] es9已经来了 are you ready?
• [ ] 使用原生 javascript构建状态管理系统
• [ ] promise 必知必会（十道题）
• [ ] js正则表达式完整教程（略长）
• [ ]
• [ ] javascript 实用技巧和写法建议
• [ ]
• [ ]
• [ ] websocket：5分钟从入门到精通
• [ ] javascript 运行原理解析
• [ ] 简单了解javascript垃圾回收机制
• [ ]
• [ ] 几道js代码手写题以及一些代码实现
• [ ] jsbridge的原理
• [ ]
• [ ] 深入剖析 javascriptcore
• [ ] javascript闭包的底层运行机制
• [ ] javascript 中的多线程 -- web worker
• [ ] 解锁多种javascript数组去重姿势
• [ ] promise不会？？看这里！！！史上最通俗易懂的promise！！！
• [ ]
• [ ]
• [ ] 一起学习造*（一）：从零开始写一个符合promises/a+规范的promise
• [ ]
• [ ]
• [ ] 如何实现一个http请求库——axios源码阅读与分析
• [ ] 面试官:既然react/vue可以用event bus进行组件通信,你可以实现下吗?
• [ ]
• [ ]
• [ ] 前端模块化：commonjs,amd,cmd,es6
• [ ]
• [ ] promise原理讲解 && 实现一个promise对象
• [ ] 浅谈 http/2 server push
• [ ] 开发更好用的 javascript 模块
• [ ] javascript复杂判断的更优雅写法
• [ ] 我从来不理解javascript闭包，直到有人这样向我解释它
• [ ]
• [ ] 如何在 web 关闭页面时发送 ajax 请求
• [ ] 用 proxy 追踪 javascript 类
• [ ] 「中高级前端面试」javascript手写代码无敌秘籍
• [ ] javascript的环境模型
• [ ]
• [ ] 抱歉，学会 proxy 真的可以为所欲为
• [ ] 中级前端工程师必须要掌握的 28 个 javascript 技巧
• [ ]
• [ ]
• [ ] 前端必知必会--操作url的黑科技
• [ ] 送你43道javascript面试题

node

• [ ] 一篇文章构建你的 nodejs 知识体系
• [ ] 200 多行代码实现 websocket 协议
• [ ] 浏览器与node的事件循环(event loop)有何区别
• [ ] nodejs与模块系统

flutter

• [ ] flutter实战视频-移动电商
• [ ]
• [ ] flutter 面试知识点集锦

http

• [ ] 设计一个无懈可击的浏览器缓存方案：关于思路，细节，serviceworker，以及http/2
• [ ]
• [ ] http 缓存机制一二三
• [ ] 都9102年了，还问get和post的区别
• [ ] 通过http的header完成各种骚操作
• [ ] 九个问题从入门到熟悉https
• [ ] 谈谈 https
• [ ]
• [ ] 图解tcp三次握手与四次分手
• [ ]
• [ ]
• [ ] 看图学https
• [ ] 分分钟让你理解https
• [ ]
• [ ] http2基本概念学习笔记
• [ ] 都2019年了，还问get和post的区别
• [ ] 前端基础篇之http协议
• [ ]
• [ ] 寒冬求职之你必须要懂的web安全
• [ ] 前端基础篇之http协议- [ ] 你真的了解 cookie 和 session 吗
• [ ]

浏览器

• [ ]
• [ ] 浏览器的回流与重绘 (reflow & repaint)
• [ ]
• [ ] 抛弃console.log()，拥抱浏览器debugger

面试

• [ ] javascript 面试中经常被问到的三个问题！
• [ ] 破解前端面试（80% 应聘者不及格系列）：从 dom 说起
• [ ]
• [ ] bat前端经典面试问题：史上最最最详细的手写promise教程
• [ ]
• [ ] 前端面试题整理
• [ ]
• [ ]
• [ ] 2018前端面试总结，看完弄懂，工资少说加3k
• [ ]
• [ ]
• [ ] 80% 应聘者都不及格的 js 面试题
• [ ] 一次弄懂event loop（彻底解决此类面试问题）
• [ ]
• [ ]
• [ ]
• [ ]
• [ ]
• [ ]
• [ ] 26个精选的javascript面试问题
• [ ]
• [ ]

数据结构与算法

• [ ]
• [ ]

其他

• [ ]
• [ ]
• [ ] chrome插件编写
• [ ]
• [ ] weex 入坑指南：手把手编译 playground
• [ ] 什么是 pwa
• [ ]
• [ ]
• [ ]
• [ ]
• [ ]
• [ ]

结束语

以上包括我已读还未移至已读的记录中（主要是由于感觉还需再度）。所有文章，我都会好好学习，没办法，毕竟比较菜。还有太多需要学习。

欢迎关注我个人微信公众号：全栈前端精选

学习交流

关注公众号： 【全栈前端精选】 每日获取好文推荐。

公众号内回复 【1】，加入全栈前端学习群，一起交流。