目录预览

• 🌟星标重点项目
• CSS
• JavaScript
• typeScript
• webpack/babel
• Nodejs
• 前端框架
• Test
• Http
• 浏览器（重排重绘）
• 数据结构与算法
• Flutter
• 前端工程
• 优质前端博客
• 写作相关
• 其他资料

🌟星标重点项目

• GitHub 全球排名：这个排名很权威 (opens new window)
• GitHub 中文排行榜、高分优秀中文项目 (opens new window)

CSS

• css加载会造成阻塞吗 (opens new window)✔️
• css加载会造成阻塞吗？ (opens new window)
• 不可思议的纯 CSS 滚动进度条效果 (opens new window)
• 面试官：你能实现多少种水平垂直居中的布局（定宽高和不定宽高） (opens new window)
• rem布局解析 (opens new window)
• 布局的下一次革新 (opens new window)
• 彻底搞懂word-break、word-wrap、white-space (opens new window)
• 彻底搞懂CSS层叠上下文、层叠等级、层叠顺序、z-index (opens new window)
• 从青铜到王者10个css3伪类使用技巧和运用，了解一哈 (opens new window)
• CSS性能优化的8个技巧 (opens new window)
• 个人总结（css3新特性） (opens new window)
• CSS设置居中的方案总结-超全 (opens new window)
• Web开发者需要知道的CSS Tricks (opens new window)
• CSS 常用技巧 (opens new window)
• CSS世界中那些说起来很冷的知识 (opens new window)

JavaScript

• ES6 入门教程 (opens new window)
• js中的设计模式 (opens new window)
• 发布订阅模式，在工作中它的能量超乎你的想象 (opens new window)
• 前端技术及常见问题大全 (opens new window)
• AVUE-DATA 可视化数据大屏（演示环境） (opens new window)
• 现代 JavaScript 教程 (opens new window)
• 谁说前端不需要懂-Nginx反向代理与负载均衡 (opens new window)
• WebSocket是时候展现你优秀的一面了 (opens new window)
• socket.io让每个人都可以开发属于自己的即时通讯 (opens new window)
• WebSocket 是什么原理？为什么可以实现持久连接 (opens new window)
• JavaScript 如何工作：对引擎、运行时、调用堆栈的概述 (opens new window)
• 理解 JavaScript 中的执行上下文和执行栈 (opens new window)
• 这一次，彻底弄懂 JavaScript 执行机制 (opens new window)
• JavaScript开发者应懂的33个概念 (opens new window)
• 前端js实现字符串/图片/excel文件下载 (opens new window)
• JavaScript 复杂判断的更优雅写法 (opens new window)
• 性感的Promise，拥抱ta然后扒光ta (opens new window)
• 近一万字的ES6语法知识点补充 (opens new window)
• 深拷贝的终极探索（90%的人都不知道） (opens new window)
• 前端路由跳转基本原理 (opens new window)
• 九种跨域方式实现原理 (opens new window)
• 发现 JavaScript 中闭包的强大威力 (opens new window)
• 你可能不熟悉的JS总结 (opens new window)
• JavaScript中高阶函数的魅力 (opens new window)
• 小邵教你玩转JS面向对象 (opens new window)
• AST抽象语法树——最基础的javascript重点知识，99%的人根本不了解 (opens new window)
• ES6、ES7、ES8特性一锅炖 (opens new window)
• 如何在 JavaScript 中更好地使用数组 (opens new window)
• 7分钟理解JS的节流、防抖及使用场景 (opens new window)
• ECMAScript 6 六级考试 (opens new window)
• javascript: Airbnb JavaScript 代码规范 (opens new window)
• Promise实现原理（附源码） (opens new window)
• 可能是最好的正则表达式的教程笔记了吧... (opens new window)
• 一些 JavaScript 中的代码小技巧 (opens new window)
• 急速JavaScript全栈教程 (opens new window)
• 理解异步之美 --- promise与async await （三） (opens new window)
• ES9已经来了 Are you ready? (opens new window)
• 使用原生 JavaScript构建状态管理系统 (opens new window)
• Promise 必知必会（十道题） (opens new window)
• JS正则表达式完整教程（略长） (opens new window)
• 防抖和节流原理分析 (opens new window)
• JavaScript 实用技巧和写法建议 (opens new window)
• 编写自己的代码库（javascript常用实例的实现与封装） (opens new window)
• import、require、export、module.exports 混合使用详解 (opens new window)
• WebSocket：5分钟从入门到精通 (opens new window)
• JavaScript 运行原理解析 (opens new window)
• 简单了解JavaScript垃圾回收机制 (opens new window)
• 一次记住js的6个正则方法 (opens new window)
• 几道JS代码手写题以及一些代码实现 (opens new window)
• JSBridge的原理 (opens new window)
• 面试官: 你了解前端路由吗? (opens new window)
• 深入剖析 JavaScriptCore (opens new window)
• JavaScript闭包的底层运行机制 (opens new window)
• JavaScript 中的多线程 -- Web Worker (opens new window)
• 解锁多种JavaScript数组去重姿势 (opens new window)
• Promise不会？？看这里！！！史上最通俗易懂的Promise！！！ (opens new window)
• 前端将数据转化为弹幕效果的实现方式 (opens new window)
• 浅谈 instanceof 和 typeof 的实现原理 (opens new window)
• 一起学习造轮子（一）：从零开始写一个符合Promises/A+规范的promise (opens new window)
• 前端性能相关：防抖、节流 (opens new window)
• 7种方法实现数组去重 (opens new window)
• 如何实现一个HTTP请求库——axios源码阅读与分析 (opens new window)
• 面试官:既然React/Vue可以用Event Bus进行组件通信,你可以实现下吗? (opens new window)
• 高阶函数，你怎么那么漂亮呢！ (opens new window)
• 面试官:请你实现一个深克隆 (opens new window)
• 前端模块化：CommonJS,AMD,CMD,ES6 (opens new window)
• 小邵教你玩转promise源码 (opens new window)
• Promise原理讲解 && 实现一个Promise对象 (opens new window)
• 浅谈 HTTP/2 Server Push (opens new window)
• 开发更好用的 JavaScript 模块 (opens new window)
• JavaScript复杂判断的更优雅写法 (opens new window)
• 我从来不理解JavaScript闭包，直到有人这样向我解释它 (opens new window)
• 重新认识构造函数、原型和原型链 (opens new window)
• 如何在 Web 关闭页面时发送 Ajax 请求 (opens new window)
• 用 Proxy 追踪 JavaScript 类 (opens new window)
• 「中高级前端面试」JavaScript手写代码无敌秘籍 (opens new window)
• JavaScript的环境模型 (opens new window)
• 面试官(6): 写过『通用前端组件』吗? (opens new window)
• 抱歉，学会 Proxy 真的可以为所欲为 (opens new window)
• 中级前端工程师必须要掌握的 28 个 JavaScript 技巧 (opens new window)
• 前端路由原理解析和实现 (opens new window)
• 正则表达式不要背 (opens new window)
• 前端必知必会--操作URL的黑科技 (opens new window)
• 送你43道JavaScript面试题 (opens new window)

typeScript

• TypeScript，初次见面，请多指教 (opens new window)
• 可能是你需要的react + typescript 50条规范和经验 (opens new window)

webpack/babel

• 深入浅出 Webpack (opens new window)
• webpack原理 (opens new window)
• 用动画的形式呈现解LeetCode题目的思路 (opens new window)
• JavaScript数据结构和算法 (opens new window)
• Webpack 源码（一）—— Tapable 和 事件流 (opens new window)
• 手把手教你撸一个 Webpack Loader (opens new window)
• 面试官: 你了解过Babel吗？写过Babel插件吗? 答: 没有。卒 (opens new window)
• Write Better JavaScript With Webpack (opens new window)
• 手把手教你撸一个简易的 webpack (opens new window)
• 带你走进webpack世界，成为webpack头号玩家 (opens new window)
• webpack打包之后的文件过大的解决方法 (opens new window)
• webpack详解 (opens new window)
• webpack4-用之初体验，一起敲它十一遍 (opens new window)
• 基于Webpack搭建React开发环境 (opens new window)
• 入门babel--实现一个es6的class转换器 (opens new window)
• webpack 中那些最易混淆的 5 个知识点 (opens new window)
• 关于webpack4的14个知识点,童叟无欺 (opens new window)

Nodejs

• 一篇文章构建你的 NodeJS 知识体系 (opens new window)
• 200 多行代码实现 Websocket 协议 (opens new window)
• 浏览器与Node的事件循环(Event Loop)有何区别 (opens new window)
• NodeJS与模块系统 (opens new window)

前端框架

1. Vue

• Vue源码系列解读-Vue中文社区 (opens new window)
• Vue源码系列-Vue中文社区 (opens new window)

2. React

• useEffect 完整指南 (opens new window)
• React 源码解析 (opens new window)
• 从零搭建React全家桶框架教程 (opens new window)
• 让虚拟DOM和DOM-diff不再成为你的绊脚石 (opens new window)
• 《React源码解析》系列完结！ (opens new window)
• 怎样学习React？当然是自己动手实现一个React啦 (opens new window)
• 从setState promise化的探讨 体会React团队设计思想 (opens new window)
• React 应用设计之道 - curry 化妙用 (opens new window)
• 如何评价React的新功能Time Slice 和Suspense？ (opens new window)
• React的新引擎—React Fiber是什么 (opens new window)
• React源码解析(三):详解事务与更新队列 (opens new window)
• React中的Transaction (opens new window)
• React 源码剖析系列 － 玩转 React Transition (opens new window)
• 如何提高你的 React 应用的性能 (opens new window)
• 将 React 应用优化到 60fps (opens new window)
• 如何写出更好的 React 代码？ (opens new window)
• React中型项目的优化实践 (opens new window)
• React 源码剖析系列 － 生命周期的管理艺术 (opens new window)
• 深入React的生命周期(上)：出生阶段(Mount) (opens new window)
• 深入React的生命周期(下)：更新(Update) (opens new window)
• 你真的了解React吗（上）如何设计组件以及重要的生命周期 (opens new window)
• React v16.3 版本新生命周期函数浅析及升级方案 (opens new window)
• React ref 的前世今生 (opens new window)
• 谈谈 react 中的 key (opens new window)
• React Mixin 的前世今生 (opens new window)
• 你真的了解React吗（中）组件间的通信以及React优化 (opens new window)
• 深入框架本源系列 —— Virtual Dom (opens new window)
• 探索Virtual DOM的前世今生 (opens new window)
• 深入框架本源系列 —— Virtual Dom (opens new window)
• React 源码剖析系列 － 不可思议的 react diff (opens new window)
• 浅入浅出图解domDIff (opens new window)
• 深度剖析：如何实现一个 Virtual DOM 算法 (opens new window)
• React 源码剖析系列 － 解密 setState (opens new window)
• setState的秘密 (opens new window)
• setState 之后发生了什么 —— 浅谈 React 中的 Transaction (opens new window)
• 你真的理解setState吗？ (opens new window)
• React 中的高阶组件及其应用场景 (opens new window)
• React 最佳实践 (opens new window)
• 完全理解React Fiber (opens new window)
• React Fiber架构 (opens new window)
• React Fiber 架构介绍资料汇总 (opens new window)
• 你不知道的Virtual DOM系列 (opens new window)
• 【译】通过Recompose库掌握React函数组件 (opens new window)
• React-Redux源码分析 (opens new window)
• 源码看React setState漫谈（一） (opens new window)
• 源码看React setState漫谈（二） (opens new window)
• 精读《用160行js代码实现一个React》 (opens new window)
• 还在用 Redux，要不要试试 GraphQL 和 Apollo (opens new window)
• React 同构实践与思考 (opens new window)
• React 实现 Table 的思考 (opens new window)
• React实践 - Component Generator (opens new window)
• ReactEurope 2016 小记 - 上 (opens new window)
• ReactEurope 2016 小记 - 下 (opens new window)
• Mobx 思想的实现原理，及与 Redux 对比 (opens new window)
• 组件库设计实战 - 复杂组件设计 (opens new window)
• redux middleware 详解 (opens new window)
• 深入理解 react-router 路由系统 (opens new window)
• Immutable 详解及 React 中实践 (opens new window)
• React-Redux源码分析 (opens new window)

Test

• ESLint里的规则教会我，无规矩 不编程 (opens new window)

Http

• 设计一个无懈可击的浏览器缓存方案：关于思路，细节，ServiceWorker，以及HTTP/2 (opens new window)
• 你应该知道的前端——缓存 (opens new window)
• HTTP 缓存机制一二三 (opens new window)
• 都9102年了，还问GET和POST的区别 (opens new window)
• 通过HTTP的HEADER完成各种骚操作 (opens new window)
• 九个问题从入门到熟悉HTTPS (opens new window)
• 谈谈 HTTPS (opens new window)
• 你敢在post和get上刁难我，就别怪我装逼了 (opens new window)
• 图解TCP三次握手与四次分手 (opens new window)
• 面试带你飞：这是一份全面的 计算机网络基础 总结攻略 (opens new window)
• 小哥哥,小姐姐,我有一份tcp、http面试指南你要吗？ (opens new window)
• 看图学HTTPS (opens new window)
• 分分钟让你理解HTTPS (opens new window)
• 小哥哥,小姐姐,我有一份tcp、http面试指南你要吗？ (opens new window)
• HTTP2基本概念学习笔记 (opens new window)
• 都2019年了，还问GET和POST的区别 (opens new window)
• 前端基础篇之HTTP协议 (opens new window)
• 关于三次握手与四次挥手面试官想考我们什么 (opens new window)
• 寒冬求职之你必须要懂的Web安全 (opens new window)
• 前端基础篇之HTTP协议 (opens new window)
• 你真的了解 Cookie 和 Session 吗 (opens new window)
• 这几个概念你可能还是没搞清require、import和export (opens new window)

浏览器（重排重绘）

• 前端必须要懂的浏览器缓存机制 (opens new window)
• 浏览器的回流与重绘 (Reflow & Repaint) (opens new window)
• 深入浅出浏览器渲染原理 (opens new window)
• 抛弃console.log()，拥抱浏览器Debugger (opens new window)

数据结构与算法

• LeetCode题解-博客 (opens new window)
• LeetCode题解-git仓库 (opens new window)
• 前端笔试&面试爬坑系列---算法 (opens new window)
• 漫画：什么是红黑树 (opens new window)
• 精读《算法 - 动态规划》 (opens new window)
• 30-seconds-of-code（里面有很多js代码非常巧妙，我正在将它翻译成中文） (opens new window)

Flutter

• Flutter实战视频-移动电商 (opens new window)
• flutter中event_bus实现原理 (opens new window)
• Flutter 面试知识点集锦 (opens new window)

前端工程

• 前端图解 (opens new window)
• 深入分析MVC、MVP、MVVM、VIPER (opens new window)
• 前端缓存最佳实践 (opens new window)
• 写给前端看的架构文章(1)：MVC VS Flux (opens new window)
• 前端数据校验从建模开始 (opens new window)
• 前端也需要了解的 JSONP 安全 (opens new window)
• 网站性能优化实战——从12.67s到1.06s的故事 (opens new window)
• 5 分钟撸一个前端性能监控工具 (opens new window)
• 浏览器页面资源加载过程与优化 (opens new window)
• 现代化懒加载的方式 (opens new window)
• 用 preload 预加载页面资源 (opens new window)
• 干货!各种常见布局实现+知名网站实例分析 (opens new window)
• 前端数据结构与算法 (opens new window)
• 前端工程师为什么要学习编译原理？ (opens new window)
• jsonp的原理与实现 (opens new window)
• 懒加载和预加载 (opens new window)
• 50行代码的MVVM，感受闭包的艺术 (opens new window)
• 不好意思！耽误你的十分钟，让MVVM原理还给你 (opens new window)
• 2018 前端性能优化清单 (opens new window)
• 网页图片加载优化方案 (opens new window)
• 把前端监控做到极致 (opens new window)
• 如何优雅处理前端异常 (opens new window)
• 经典面试题：从 URL 输入到页面展现到底发生什么 (opens new window)
• 前端同构渲染的思考与实践 (opens new window)
• 前端构建秘籍 (opens new window)
• 大型项目前端架构浅谈（8000字原创） (opens new window)
• 一名【合格】前端工程师的自检清单 (opens new window)

优质前端博客

• ScarSu的个人网站 (opens new window)
• anran758's blog (opens new window)
• 小蘿蔔丁博客 (opens new window)
• UsubeniFantasy博客 (opens new window)
• 木匣子 (opens new window)
• 黄琦雲的博客 (opens new window)
• 前端迷 (opens new window)
• Jay Zangwill的博客 (opens new window)
• 前端工程师 Toweave (opens new window)
• Alili丶前端大爆炸 (opens new window)
• Mayx的博客 (opens new window)
• Jacky's Blog (opens new window)
• 橙光笔记 (opens new window)
• 程沛权 (opens new window)
• CallMeSoul (opens new window)
• HashTang 的个人空间 (opens new window)
• 步步走前端 (opens new window)
• 王亚振-随笔博客 (opens new window)
• 牧云云的博客|算法类 (opens new window)
• Adkinsm博客 (opens new window)
• icodex (opens new window)

写作相关

• 公众号｜博客写作格式化网站 (opens new window)
• 文章头图设计｜稿定设计 (opens new window)
• 文章头图设计｜创客贴 (opens new window)

其他资料

• 编程导航网站 (opens new window)
• 免费计算机编程书籍大全 (opens new window)
• 面试宝典 (opens new window)