2022,前端应该阅读这些文章

2022,前端应该阅读这些文章_第1张图片

同学们都知道,前端圈变得越来越卷了,各种技术层出不穷,简直让人应接不暇。可能很多跟我一样,一时间,看到这个也想学,看到那个也想学,最终的结果是什么?那就是:啥都没学!

所以笔者花费了几天时间,整理了一下前端必读文章,同时也可以当作是一份知识图谱,用来查漏补缺。

本资料适宜人群:

  • 希望按部就班的、系统的学习前端知识的(初级->中级->高级);
  • 希望对自己的知识图谱进行查漏补缺的;
  • 希望当作面试手册进行知识复盘的;

本文主要是笔者查阅了很多资料并结合自己的理解,整理而成的,请大家积极讨论、批评、补充。

在此鸣谢各位写出以下优秀资料的作者,是你们,带动了整个社区的发展。

HTML

  • 学习 HTML :指南与教程
  • 很不错的html学习资料
  • HTML meta标签总结与属性使用介绍
  • 彻底理解行内元素和块级元素,不必硬背

CSS

  • CSS盒模型完整介绍
  • CSS 选择器,一篇就够了
  • 10 分钟理解 BFC 原理
  • 定位.Position
  • flex 布局的基本概念
  • 你必须懂的css样式权重和优先级
  • 深入理解圣杯布局和双飞翼布局
  • css3新特性
  • 深入理解CSS中的层叠上下文和层叠顺序
  • (史上最全)div居中的几种方法
  • 带你彻底了解CSS浮动
  • 一起搞懂 CSS 水平居中与垂直居中的16个方法
  • 你未必知道的49个CSS知识点
  • 灵活运用CSS开发技巧
  • 我写CSS动画的常用套路
  • 45个值得收藏的 CSS 形状
  • 7种方法解决移动端Retina屏幕1px边框问题
  • 梳理 CSS 模块化
  • CSS性能优化

JavaScript

  • JavaScript教程
  • JS之数组
  • JS之对象
  • 重新介绍 JavaScript
  • 经常被面试官问道的JavaScript数据类型知识你真的懂吗?
  • JS正则表达式完整教程
  • 你还没学会javascript原型和原型链吗?
  • JavaScript继承
  • JavaScript常用八种继承方案
  • JavaScript作用域链
  • JavaScript闭包
  • JavaScript变量对象
  • Javascript this
  • JavaScript:立即执行函数表达式(IIFE)
  • 浅谈 instanceof 和 typeof 的实现原理
  • JavaScript深入之call和apply的模拟实现
  • 细说 call、apply 以及 bind 的区别和用法
  • JavaScript深入之bind的模拟实现
  • JavaScript 深入之浮点数精度
  • JavaScript深入之new的模拟实现
  • 详解JavaScript中的Event Loop(事件循环)机制
  • 这一次,彻底弄懂 JavaScript 执行机制
  • 从浏览器多进程到JS单线程,JS运行机制最全面的一次梳理
  • 麻烦把JS的事件循环给我安排一下
  • 如何写出一个惊艳面试官的深拷贝?
  • JS的防抖与节流
  • 三行代码实现 JS 柯里化
  • 简单理解JavaScript中的柯里化和反柯里化
  • 关于JS中一些重要的api实现, 巩固你的原生JS功底
  • 你不知道的 JSON.stringify() 的威力
  • JavaScript设计模式es6(23种)
  • 一个合格的中级前端工程师需要掌握的 28 个 JavaScript 技巧
  • JS开发必须知道的41个技巧
  • JavaScript 是如何影响 DOM 生成的
  • JavaScript 事件模型
  • 深入了解 JavaScript 内存泄露

ES6

  • ES6入门教程
  • 1.5万字概括ES6全部特性(已更新ES2020)
  • ES6、ES7、ES8、ES9、ES10新特性一览
  • 《深入理解ES6》学习笔记完整版
  • 这一次,彻底弄懂 Promise 原理
  • 要就来45道Promise面试题一次爽到底(1.1w字用心整理)
  • 从一道让我失眠的 Promise 面试题开始,深入分析 Promise 实现细节
  • 深入理解 Generators
  • 手写一个Promise,Generator,async和 await

TypeScript

  • TypeScript 中文手册
  • TypeScript 入门教程
  • TypeScript,初次见面,请多指教
  • TypeScript 速成教程
  • 了不起的 TypeScript 入门教程
  • 深入理解 TypeScript
  • TypeScript 高级用法
  • TypeScript 高级技巧
  • 一文读懂 TypeScript 泛型及应用
  • TypeScript 实践
  • TypeScript - 一种思维方式
  • 从今天开始,拿起 TypeScript 做一个轮子的制造者

Vue

  • 官方文档V2
  • 官方文档V3
  • Vue-Router
  • VueX
  • Vue Cli
  • Element UI
  • Ant Design Vue
  • iView
  • Vue TypeScript 支持
  • Vue3.0 前的 TypeScript 最佳入门实践
  • Vue3.0全家桶最全入门指南
  • 快速使用Vue3最新的15个常用API
  • Vue 开发必须知道的 36 个技巧
  • Vue 项目性能优化 — 实践指南
  • Vue 项目里戳中你痛点的问题及解决办法
  • 封装Vue组件的一些技巧
  • vue中8种组件通信方式, 值得收藏!
  • 我在项目中是这样配置Vue的
  • Vue最全知识点,面试必备(基础到进阶,覆盖vue3.0
  • 总结我对Vue项目上线做的一些基本优化
  • 学会这些Vue小技巧,可以早点下班和女神约会了
  • 理解Vue中的computed,watch,methods的区别及源码实现
  • 深入剖析Vue源码 - Vue插槽
  • Vue的computed和watch的细节全面分析
  • Vue nextTick实现原理
  • 彻底搞懂Vue中keep-alive的魔法
  • 解析 vue2 diff 算法
  • vue3.0 diff算法详解(超详细)
  • 解读Vue源码
  • Vue 源码精读
  • 深入剖析Vue源码 - 响应式系统构建
  • Vue(v2.6.11)万行源码生啃,就硬刚!
  • 带你全面分析vue-router源码
  • Vuex 源码解析
  • 【手把手系列之】实现一个简易版vue2
  • Vue 3 源码导读
  • Vue.js 3.x 源码解析先导
  • Vue3 源码阅读
  • Vue3 源码分析

React

  • 官方文档
  • React.js 小书
  • React Router
  • React Redux
  • react 入门必知必会知识点
  • React 开发必须知道的 34 个技巧
  • React全部api解读+基础实践大全
  • 写React Hooks前必读
  • 30分钟精通React Hooks
  • 终于搞懂 React Hooks了
  • React Hooks 详解
  • 整理了N个实用案例帮你快速迁移到React Hooks
  • 玩转react-hooks,自定义hooks设计模式及其实战
  • React Hooks 最佳实践
  • 由浅到深的React合成事件
  • 年终送给react开发者的八条优化建议
  • React 项目性能分析及优化
  • React异常处理
  • 深入理解 React 高阶组件
  • virtualdom diff算法实现分析
  • 【React深入】setState的执行机制
  • 一文吃透react事件系统原理
  • 一文吃透React高阶组件(HOC)
  • 一文吃透react-hooks原理
  • 深入React fiber架构及源码
  • React技术揭秘
  • React源码解析
  • 这可能是最通俗的 React Fiber(时间分片) 打开方式
  • 从路由原理出发,深入阅读理解react-router 4.0的源码
  • React-Redux源码分析
  • 自己动手实现一个React
  • Build your own React
  • 手写React Router
  • Redux/react-redux/redux中间件设计实现剖析
  • React + TypeScript实践
  • TypeScript 在 React 中使用总结
  • 可能是你需要的 React + TypeScript 50 条规范和经验
  • Redux核心原则
  • Redux从设计到源码

计算机网络

  • OSI 7层模型和TCP/IP 4层模型
  • TCP 的那些事儿
  • UDP详解
  • HTTP的前世今生
  • 深入理解http2.0协议,看这篇就够了!
  • HTTP3.0和QUIC协议那些事
  • 如何通俗易懂的给你讲明白HTTPS?
  • HTTP1.0、HTTP1.1 和 HTTP2.0 的区别
  • 图解 HTTP 缓存
  • websocket 协议详解及报文分析
  • Ajax 知识体系大梳理
  • 前端路由的两种模式:hash模式和 history模式
  • 面试官:前端跨页面通信,你知道哪些方法?

数据结构与算法

  • JavaScript 算法与数据结构
  • 前端该如何准备数据结构和算法?
  • 前端工程师如何系统练习数据结构和算法
  • 你可能需要的一份前端算法总结
  • 写给前端的算法进阶指南,我是如何两个月零基础刷200题
  • 斐波那契数列
  • 合并二维有序数组成一维有序数组
  • 链表:反转链表
  • 链表:链表有环
  • 堆栈队列:判断括号字符串是否有效
  • 返回数组中第k个最大元素
  • 找出数组中和为sum的n个数
  • 贪心:具有给定数值的最小字符串
  • 二叉树:最大深度
  • 二叉树:层次遍历
  • 翻转二叉树
  • 剪枝:判断数独是否有效
  • 二分查找:求解平方根
  • 字典树:实现一个字典树
  • 爬楼梯问题
  • 最短距离
  • LRU缓存
  • 实现一个trim方法
  • 大数相加
  • 拍平数组
  • 数组去重
  • 判断是否是回文数
  • 实现一个模板引擎
  • 判断一个数是否是素数
  • 获取n以内所有的素数
  • 实现一个deepClone方法
  • 实现 add(1)(2)(3)
  • 实现防抖函数
  • 实现节流函数
  • 实现字符串翻转

工程化

  • 前端模块化详解(完整版)
  • Tree-Shaking性能优化实践 - 原理篇
  • JS代码是如何被压缩的
  • 再不会webpack敲得代码就不香了
  • 手摸手带你掌握新版Webpack4.0详解
  • Webpack 4 配置最佳实践
  • 再来一打Webpack面试题
  • webpack4 的30个步骤打造优化到极致的 react 开发环境
  • 带你深度解锁Webpack系列(基础篇)
  • 带你深度解锁Webpack系列(优化篇)
  • 关于webpack4的14个知识点,童叟无欺
  • 细说 webpack 之流程篇
  • 理解webpack原理,手写一个100行的webpack
  • webpack-插件机制杂记
  • webpack loader 机制
  • Rollup打包工具的使用(超详细,超基础,附代码截图超简单)
  • 前端组件/库打包利器rollup使用与配置实战
  • 关于Rollup那些事
  • Vite 会成为2021年最受欢迎的前端工具吗?
  • 备战2021:vite工程化实践,建议收藏
  • Vite 源码分析
  • 下一个时代的打包工具 esbuild
  • 从babel讲到AST
  • 聊一聊 Babel?
  • 不容错过的 Babel7 知识
  • 手把手带你入门 AST 抽象语法树
  • AST详解与运用

性能优化

  • 前端性能优化 - 用RAIL模型分析性能
  • 前端性能优化手段
  • 重排和重绘
  • 动画性能
  • 渲染合成层
  • 大量图片加载优化
  • 白屏

图像

  • Canvas教程
  • three.js动画教程
  • canvas动画时钟
  • 怎样用JavaScript和HTML5 Canvas绘制图表
  • canvas图表详解系列:柱状图
  • 自己动手绘制一个折线图控件ChartView
  • Web中的图像技术总结,前端开发中各种图片引入的优点缺点及实例
  • 14个最好的 JavaScript 数据可视化库
  • 我对web前端与可视化的一些思考

浏览器

  • 前端开发的你应该知道的浏览器知识
  • 前端存贮全家桶--cookie、sessionStorage、localStorage、和indexedDB重点合集
  • 一文搞懂V8引擎的垃圾回收
  • 彻底理解浏览器的缓存机制
  • Chrome 浏览器架构
  • 浏览器的工作原理:新式网络浏览器幕后揭秘
  • 浏览器的渲染:过程与原理
  • 如何处理浏览器的断网情况?
  • 11道浏览器原理面试题

web安全

  • 前端安全系列(一):如何防止XSS攻击?
  • 前端安全系列之二:如何防止CSRF攻击?
  • 【面试篇】寒冬求职之你必须要懂的Web安全
  • 常见六大Web安全攻防解析
  • 一文读懂 Web 安全

Node

  • Node.js v14.16.1 文档
  • express文档
  • koa文档
  • Egg.js文档
  • 阿里开源框架 Egg.js 入门与实战
  • 中高级前端进阶之极速通关koa2全栈核心内容
  • 前后端分离 Vue + NodeJS(Koa) + MongoDB,从产品到开发
  • 深入了解Nodejs模块机制
  • require() 源码解读
  • Node.js 事件循环
  • 深度剖析cluster模块源码与node.js多进程
  • 深入理解 Node Stream 内部机制
  • Nodejs Stream pipe 的使用与实现原理分析
  • Nodejs 编写守护进程
  • Nodejs进程间通信
  • Node.js 异常捕获的一些实践
  • Deno文档

跨端开发

  • React-Native学习指南
  • 一份传男也传女的 React Native 学习笔记
  • React Native 性能优化指南
  • Flutter完整开发实战详解
  • 《Flutter实战》电子书
  • Flutter | 老孟
  • Flutter | 猫哥
  • Flutter | 状态管理指南篇——Provider
  • Flutter GetX使用---简洁的魅力!
  • 小程序开发:用原生还是选框架(wepy/mpvue/uni-app/taro)?
  • Taro入门教程
  • UniAPP 入门教程
  • uni-app的开发经历(持续更新)

设计模式

  • JavaScript 中常见设计模式整理
  • JavaScript设计模式
  • 前端渣渣唠嗑一下前端中的设计模式(真实场景例子)
  • JavaScript设计模式es6(23种)

Git

  • git基本操作,一篇文章就够了!
  • Git 常用操作总结
  • git-flow 的工作流程
  • 如何优雅地使用 Git
  • 最常见的 Git 问题和操作清单汇总
  • 这才是真正的Git——Git内部原理

书籍

  • 你不知道的javascript 上中下
  • JavaScript 高级程序设计 第四版
  • JavaScript 设计模式与开发实战
  • javascript dom编程艺术
  • JavaScript忍者秘籍(第2版)
  • JavaScript 语言精粹
  • ES6 标准入门
  • 深入理解 ES6
  • CSS 世界
  • CSS 权威指南
  • CSS揭秘
  • Web性能权威指南
  • 图解HTTP
  • 学习 JavaScript 数据结构与算法

其他

  • if 我是前端团队 Leader,怎么制定前端协作规范
  • 996 前端人该如何持续学习
  • 程序员如何自我学习和成长?
  • 程序员该怎么保护眼睛视力?
  • 程序员怎么保护颈椎,腰椎?
  • 程序员需要什么样的椅子?
  • 程序员下班晚应该怎么锻炼身体?
  • 单身程序员如何找对象?
  • 程序员如何与HR谈薪资?

学习路线图

最后

我是觉非,花了几天时间,整理了这份资料,如果觉得对你有所帮助的话,请给我点个赞吧

你可能感兴趣的