# 「必读」前端必读文章
大家都知道,前端圈变得越来越卷了,各种技术层出不穷,简直让人应接不暇。可能很多跟我一样,一时间,看到这个也想学,看到那个也想学,最终的结果是什么?那就是:啥都没学!
所以花费了几天时间,整理了一下前端必读文章,同时也可以当作是一份知识图谱,用来查漏补缺。
本资料适宜人群:
- 希望按部就班的、系统的学习前端知识的(初级->中级->高级);
- 希望对自己的知识图谱进行查漏补缺的;
- 希望当作面试手册进行知识复盘的;
本文主要是笔者查阅了很多资料并结合自己的理解,整理而成的,请大家积极讨论、批评、补充。
在此鸣谢各位写出以下优秀资料的作者,是你们,带动了整个社区的发展。
# HTML
- 学习 HTML :指南与教程 (opens new window)
- 很不错的html学习资料 (opens new window)
- HTML meta标签总结与属性使用介绍 (opens new window)
- 彻底理解行内元素和块级元素,不必硬背 (opens new window)
# CSS
- CSS盒模型完整介绍 (opens new window)
- CSS 选择器,一篇就够了 (opens new window)
- 10 分钟理解 BFC 原理 (opens new window)
- 定位.Position (opens new window)
- flex 布局的基本概念 (opens new window)
- 你必须懂的css样式权重和优先级 (opens new window)
- 深入理解圣杯布局和双飞翼布局 (opens new window)
- css3新特性 (opens new window)
- 深入理解CSS中的层叠上下文和层叠顺序 (opens new window)
- (史上最全)div居中的几种方法 (opens new window)
- 带你彻底了解CSS浮动 (opens new window)
- 一起搞懂 CSS 水平居中与垂直居中的16个方法 (opens new window)
- 你未必知道的49个CSS知识点 (opens new window)
- 灵活运用CSS开发技巧 (opens new window)
- 我写CSS动画的常用套路 (opens new window)
- 45个值得收藏的 CSS 形状 (opens new window)
- 7种方法解决移动端Retina屏幕1px边框问题 (opens new window)
- 梳理 CSS 模块化 (opens new window)
- CSS性能优化 (opens new window)
# JavaScript
- JavaScript教程 (opens new window)
- JS之数组 (opens new window)
- JS之对象 (opens new window)
- 重新介绍 JavaScript (opens new window)
- 经常被面试官问道的JavaScript数据类型知识你真的懂吗? (opens new window)
- JS正则表达式完整教程 (opens new window)
- 你还没学会javascript原型和原型链吗? (opens new window)
- JavaScript继承 (opens new window)
- JavaScript常用八种继承方案 (opens new window)
- JavaScript作用域链 (opens new window)
- JavaScript闭包 (opens new window)
- JavaScript变量对象 (opens new window)
- Javascript this (opens new window)
- JavaScript:立即执行函数表达式(IIFE) (opens new window)
- 浅谈 instanceof 和 typeof 的实现原理 (opens new window)
- JavaScript深入之call和apply的模拟实现 (opens new window)
- 细说 call、apply 以及 bind 的区别和用法 (opens new window)
- JavaScript深入之bind的模拟实现 (opens new window)
- JavaScript 深入之浮点数精度 (opens new window)
- JavaScript深入之new的模拟实现 (opens new window)
- 详解JavaScript中的Event Loop(事件循环)机制 (opens new window)
- 这一次,彻底弄懂 JavaScript 执行机制 (opens new window)
- 从浏览器多进程到JS单线程,JS运行机制最全面的一次梳理 (opens new window)
- 麻烦把JS的事件循环给我安排一下 (opens new window)
- 如何写出一个惊艳面试官的深拷贝? (opens new window)
- JS的防抖与节流 (opens new window)
- 三行代码实现 JS 柯里化 (opens new window)
- 简单理解JavaScript中的柯里化和反柯里化 (opens new window)
- 关于JS中一些重要的api实现, 巩固你的原生JS功底 (opens new window)
- 你不知道的 JSON.stringify() 的威力 (opens new window)
- JavaScript设计模式es6(23种) (opens new window)
- 一个合格的中级前端工程师需要掌握的 28 个 JavaScript 技巧 (opens new window)
- JS开发必须知道的41个技巧 (opens new window)
- JavaScript 是如何影响 DOM 生成的 (opens new window)
- JavaScript 事件模型 (opens new window)
- 深入了解 JavaScript 内存泄露 (opens new window)
# ES6
- ES6入门教程 (opens new window)
- 1.5万字概括ES6全部特性(已更新ES2020) (opens new window)
- ES6、ES7、ES8、ES9、ES10新特性一览 (opens new window)
- 《深入理解ES6》学习笔记完整版 (opens new window)
- 这一次,彻底弄懂 Promise 原理 (opens new window)
- 要就来45道Promise面试题一次爽到底(1.1w字用心整理) (opens new window)
- 从一道让我失眠的 Promise 面试题开始,深入分析 Promise 实现细节 (opens new window)
- 深入理解 Generators (opens new window)
- 手写一个Promise,Generator,async和 await (opens new window)
# TypeScript
- TypeScript 中文手册 (opens new window)
- TypeScript 入门教程 (opens new window)
- TypeScript,初次见面,请多指教 (opens new window)
- TypeScript 速成教程 (opens new window)
- 了不起的 TypeScript 入门教程 (opens new window)
- 深入理解 TypeScript (opens new window)
- TypeScript 高级用法 (opens new window)
- TypeScript 高级技巧 (opens new window)
- 一文读懂 TypeScript 泛型及应用 (opens new window)
- TypeScript 实践 (opens new window)
- TypeScript - 一种思维方式 (opens new window)
- 从今天开始,拿起 TypeScript 做一个轮子的制造者 (opens new window)
# Vue
- 官方文档V2 (opens new window)
- 官方文档V3 (opens new window)
- Vue-Router (opens new window)
- VueX (opens new window)
- Vue Cli (opens new window)
- Element UI (opens new window)
- Ant Design Vue (opens new window)
- iView (opens new window)
- Vue TypeScript 支持 (opens new window)
- Vue3.0 前的 TypeScript 最佳入门实践 (opens new window)
- Vue3.0全家桶最全入门指南 (opens new window)
- 快速使用Vue3最新的15个常用API (opens new window)
- Vue 开发必须知道的 36 个技巧 (opens new window)
- Vue 项目性能优化 — 实践指南 (opens new window)
- Vue 项目里戳中你痛点的问题及解决办法 (opens new window)
- 封装Vue组件的一些技巧 (opens new window)
- vue中8种组件通信方式, 值得收藏! (opens new window)
- 我在项目中是这样配置Vue的 (opens new window)
- Vue最全知识点,面试必备(基础到进阶,覆盖vue3.0 (opens new window)
- 总结我对Vue项目上线做的一些基本优化 (opens new window)
- 学会这些Vue小技巧,可以早点下班和女神约会了 (opens new window)
- 理解Vue中的computed,watch,methods的区别及源码实现 (opens new window)
- 深入剖析Vue源码 - Vue插槽 (opens new window)
- Vue的computed和watch的细节全面分析 (opens new window)
- Vue nextTick实现原理 (opens new window)
- 彻底搞懂Vue中keep-alive的魔法 (opens new window)
- 解析 vue2 diff 算法 (opens new window)
- vue3.0 diff算法详解(超详细) (opens new window)
- 解读Vue源码 (opens new window)
- Vue 源码精读 (opens new window)
- 深入剖析Vue源码 - 响应式系统构建 (opens new window)
- Vue(v2.6.11)万行源码生啃,就硬刚! (opens new window)
- 带你全面分析vue-router源码 (opens new window)
- Vuex 源码解析 (opens new window)
- 【手把手系列之】实现一个简易版vue2 (opens new window)
- Vue 3 源码导读 (opens new window)
- Vue.js 3.x 源码解析先导 (opens new window)
- Vue3 源码阅读 (opens new window)
- Vue3 源码分析 (opens new window)
# React
- 官方文档 (opens new window)
- React.js 小书 (opens new window)
- React Router (opens new window)
- React Redux (opens new window)
- react 入门必知必会知识点 (opens new window)
- React 开发必须知道的 34 个技巧 (opens new window)
- React全部api解读+基础实践大全 (opens new window)
- 写React Hooks前必读 (opens new window)
- 30分钟精通React Hooks (opens new window)
- 终于搞懂 React Hooks了 (opens new window)
- React Hooks 详解 (opens new window)
- 整理了N个实用案例帮你快速迁移到React Hooks (opens new window)
- 玩转react-hooks,自定义hooks设计模式及其实战 (opens new window)
- React Hooks 最佳实践 (opens new window)
- 由浅到深的React合成事件 (opens new window)
- 年终送给react开发者的八条优化建议 (opens new window)
- React 项目性能分析及优化 (opens new window)
- React异常处理 (opens new window)
- 深入理解 React 高阶组件 (opens new window)
- virtualdom diff算法实现分析 (opens new window)
- 【React深入】setState的执行机制 (opens new window)
- 一文吃透react事件系统原理 (opens new window)
- 一文吃透React高阶组件(HOC) (opens new window)
- 一文吃透react-hooks原理 (opens new window)
- 深入React fiber架构及源码 (opens new window)
- React技术揭秘 (opens new window)
- React源码解析 (opens new window)
- 这可能是最通俗的 React Fiber(时间分片) 打开方式 (opens new window)
- 从路由原理出发,深入阅读理解react-router 4.0的源码 (opens new window)
- React-Redux源码分析 (opens new window)
- 自己动手实现一个React (opens new window)
- Build your own React (opens new window)
- 手写React Router (opens new window)
- Redux/react-redux/redux中间件设计实现剖析 (opens new window)
- React + TypeScript实践 (opens new window)
- TypeScript 在 React 中使用总结 (opens new window)
- 可能是你需要的 React + TypeScript 50 条规范和经验 (opens new window)
- Redux核心原则 (opens new window)
- Redux从设计到源码 (opens new window)
# 计算机网络
- OSI 7层模型和TCP/IP 4层模型 (opens new window)
- TCP 的那些事儿 (opens new window)
- UDP详解 (opens new window)
- HTTP的前世今生 (opens new window)
- 深入理解http2.0协议,看这篇就够了! (opens new window)
- HTTP3.0和QUIC协议那些事 (opens new window)
- 如何通俗易懂的给你讲明白HTTPS? (opens new window)
- HTTP1.0、HTTP1.1 和 HTTP2.0 的区别 (opens new window)
- 图解 HTTP 缓存 (opens new window)
- websocket 协议详解及报文分析 (opens new window)
- Ajax 知识体系大梳理 (opens new window)
- 前端路由的两种模式:hash模式和 history模式 (opens new window)
- 面试官:前端跨页面通信,你知道哪些方法? (opens new window)
# 数据结构与算法
- JavaScript 算法与数据结构 (opens new window)
- 前端该如何准备数据结构和算法? (opens new window)
- 前端工程师如何系统练习数据结构和算法 (opens new window)
- 你可能需要的一份前端算法总结 (opens new window)
- 写给前端的算法进阶指南,我是如何两个月零基础刷200题 (opens new window)
- 斐波那契数列 (opens new window)
- 合并二维有序数组成一维有序数组 (opens new window)
- 链表:反转链表 (opens new window)
- 链表:链表有环 (opens new window)
- 堆栈队列:判断括号字符串是否有效 (opens new window)
- 返回数组中第k个最大元素 (opens new window)
- 找出数组中和为sum的n个数 (opens new window)
- 贪心:具有给定数值的最小字符串 (opens new window)
- 二叉树:最大深度 (opens new window)
- 二叉树:层次遍历 (opens new window)
- 翻转二叉树 (opens new window)
- 剪枝:判断数独是否有效 (opens new window)
- 二分查找:求解平方根 (opens new window)
- 字典树:实现一个字典树 (opens new window)
- 爬楼梯问题 (opens new window)
- 最短距离 (opens new window)
- LRU缓存 (opens new window)
- 实现一个trim方法 (opens new window)
- 大数相加 (opens new window)
- 拍平数组 (opens new window)
- 数组去重 (opens new window)
- 判断是否是回文数 (opens new window)
- 实现一个模板引擎 (opens new window)
- 判断一个数是否是素数 (opens new window)
- 获取n以内所有的素数 (opens new window)
- 实现一个deepClone方法 (opens new window)
- 实现 add(1)(2)(3) (opens new window)
- 实现防抖函数 (opens new window)
- 实现节流函数 (opens new window)
- 实现字符串翻转 (opens new window)
# 工程化
- 前端模块化详解(完整版) (opens new window)
- Tree-Shaking性能优化实践 - 原理篇 (opens new window)
- JS代码是如何被压缩的 (opens new window)
- 再不会webpack敲得代码就不香了 (opens new window)
- 手摸手带你掌握新版Webpack4.0详解 (opens new window)
- Webpack 4 配置最佳实践 (opens new window)
- 再来一打Webpack面试题 (opens new window)
- webpack4 的30个步骤打造优化到极致的 react 开发环境 (opens new window)
- 带你深度解锁Webpack系列(基础篇) (opens new window)
- 带你深度解锁Webpack系列(优化篇) (opens new window)
- 关于webpack4的14个知识点,童叟无欺 (opens new window)
- 细说 webpack 之流程篇 (opens new window)
- 理解webpack原理,手写一个100行的webpack (opens new window)
- webpack-插件机制杂记 (opens new window)
- webpack loader 机制 (opens new window)
- Rollup打包工具的使用(超详细,超基础,附代码截图超简单) (opens new window)
- 前端组件/库打包利器rollup使用与配置实战 (opens new window)
- 关于Rollup那些事 (opens new window)
- Vite 会成为2021年最受欢迎的前端工具吗? (opens new window)
- 备战2021:vite工程化实践,建议收藏 (opens new window)
- Vite 源码分析 (opens new window)
- 下一个时代的打包工具 esbuild (opens new window)
- 从babel讲到AST (opens new window)
- 聊一聊 Babel? (opens new window)
- 不容错过的 Babel7 知识 (opens new window)
- 手把手带你入门 AST 抽象语法树 (opens new window)
- AST详解与运用 (opens new window)
# 性能优化
- 前端性能优化 - 用RAIL模型分析性能 (opens new window)
- 前端性能优化手段 (opens new window)
- 重排和重绘 (opens new window)
- 动画性能 (opens new window)
- 渲染合成层 (opens new window)
- 大量图片加载优化 (opens new window)
- 白屏 (opens new window)
# 图像
- Canvas教程 (opens new window)
- three.js动画教程 (opens new window)
- canvas动画时钟 (opens new window)
- 怎样用JavaScript和HTML5 Canvas绘制图表 (opens new window)
- canvas图表详解系列:柱状图 (opens new window)
- 自己动手绘制一个折线图控件ChartView (opens new window)
- Web中的图像技术总结,前端开发中各种图片引入的优点缺点及实例 (opens new window)
- 14个最好的 JavaScript 数据可视化库 (opens new window)
- 我对web前端与可视化的一些思考 (opens new window)
# 浏览器
- 前端开发的你应该知道的浏览器知识 (opens new window)
- 前端存贮全家桶--cookie、sessionStorage、localStorage、和indexedDB重点合集 (opens new window)
- 一文搞懂V8引擎的垃圾回收 (opens new window)
- 彻底理解浏览器的缓存机制 (opens new window)
- Chrome 浏览器架构 (opens new window)
- 浏览器的工作原理:新式网络浏览器幕后揭秘 (opens new window)
- 浏览器的渲染:过程与原理 (opens new window)
- 如何处理浏览器的断网情况? (opens new window)
- 11道浏览器原理面试题 (opens new window)
# web安全
- 前端安全系列(一):如何防止XSS攻击? (opens new window)
- 前端安全系列之二:如何防止CSRF攻击? (opens new window)
- 【面试篇】寒冬求职之你必须要懂的Web安全 (opens new window)
- 常见六大Web安全攻防解析 (opens new window)
- 一文读懂 Web 安全 (opens new window)
# Node
- Node.js v14.16.1 文档 (opens new window)
- express文档 (opens new window)
- koa文档 (opens new window)
- Egg.js文档 (opens new window)
- 阿里开源框架 Egg.js 入门与实战 (opens new window)
- 中高级前端进阶之极速通关koa2全栈核心内容 (opens new window)
- 前后端分离 Vue + NodeJS(Koa) + MongoDB,从产品到开发 (opens new window)
- 深入了解Nodejs模块机制 (opens new window)
- require() 源码解读 (opens new window)
- Node.js 事件循环 (opens new window)
- 深度剖析cluster模块源码与node.js多进程 (opens new window)
- 深入理解 Node Stream 内部机制 (opens new window)
- Nodejs Stream pipe 的使用与实现原理分析 (opens new window)
- Nodejs 编写守护进程 (opens new window)
- Nodejs进程间通信 (opens new window)
- Node.js 异常捕获的一些实践 (opens new window)
- Deno文档 (opens new window)
# 跨端开发
- React-Native学习指南 (opens new window)
- 一份传男也传女的 React Native 学习笔记 (opens new window)
- React Native 性能优化指南 (opens new window)
- Flutter完整开发实战详解 (opens new window)
- 《Flutter实战》电子书 (opens new window)
- Flutter | 老孟 (opens new window)
- Flutter | 猫哥 (opens new window)
- Flutter | 状态管理指南篇——Provider (opens new window)
- Flutter GetX使用---简洁的魅力! (opens new window)
- 小程序开发:用原生还是选框架(wepy/mpvue/uni-app/taro)? (opens new window)
- Taro入门教程 (opens new window)
- UniAPP 入门教程 (opens new window)
- uni-app的开发经历(持续更新) (opens new window)
# 设计模式
- JavaScript 中常见设计模式整理 (opens new window)
- JavaScript设计模式 (opens new window)
- 前端渣渣唠嗑一下前端中的设计模式(真实场景例子) (opens new window)
- JavaScript设计模式es6(23种) (opens new window)
# Git
- git基本操作,一篇文章就够了! (opens new window)
- Git 常用操作总结 (opens new window)
- git-flow 的工作流程 (opens new window)
- 如何优雅地使用 Git (opens new window)
- 最常见的 Git 问题和操作清单汇总 (opens new window)
- 这才是真正的Git——Git内部原理 (opens new window)
# 书籍
- 你不知道的javascript 上中下
- JavaScript 高级程序设计 第四版
- JavaScript 设计模式与开发实战
- javascript dom编程艺术
- JavaScript忍者秘籍(第2版)
- JavaScript 语言精粹
- ES6 标准入门
- 深入理解 ES6
- CSS 世界
- CSS 权威指南
- CSS揭秘
- Web性能权威指南
- 图解HTTP
- 学习 JavaScript 数据结构与算法
# 其他
- if 我是前端团队 Leader,怎么制定前端协作规范 (opens new window)
- 996 前端人该如何持续学习 (opens new window)
- 程序员如何自我学习和成长? (opens new window)
- 程序员该怎么保护眼睛视力? (opens new window)
- 程序员怎么保护颈椎,腰椎? (opens new window)
- 程序员需要什么样的椅子? (opens new window)
- 程序员下班晚应该怎么锻炼身体? (opens new window)
- 单身程序员如何找对象? (opens new window)
- 程序员如何与HR谈薪资? (opens new window)