Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/Jacky-Summer/awesome-frontend-learning-resource

📒 收集整理前端优质文章、学习工具与网站、优质信息源推荐，持续更新...
https://github.com/Jacky-Summer/awesome-frontend-learning-resource

List: awesome-frontend-learning-resource

browser css css3 es6 git http interview javascript react vue webpack

Last synced: 16 days ago
JSON representation

📒 收集整理前端优质文章、学习工具与网站、优质信息源推荐，持续更新...

Host: GitHub
URL: https://github.com/Jacky-Summer/awesome-frontend-learning-resource
Owner: Jacky-Summer
Created: 2020-05-31T15:53:34.000Z (over 4 years ago)
Default Branch: master
Last Pushed: 2023-03-02T01:10:24.000Z (almost 2 years ago)
Last Synced: 2024-11-26T18:02:13.182Z (25 days ago)
Topics: browser, css, css3, es6, git, http, interview, javascript, react, vue, webpack
Homepage:
Size: 97.7 KB
Stars: 14
Watchers: 3
Forks: 1
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

ultimate-awesome - awesome-frontend-learning-resource - 📒 收集整理前端优质文章、学习工具与网站、优质信息源推荐，持续更新. (Other Lists / Monkey C Lists)

README

        # frontend-learning-resource

📒 收集整理前端优质文章、学习工具与网站、优质信息源推荐，持续更新...

近几年，前端的技术文章越来越多，就同一个技术点相关的文章，可以说完全看不过来，其中质量参差不齐，但我们的时间就有限的，不可能看完所有文章。有的内容重复就没必要看，有的优秀技术文章又值得反复看，重温学习。于是，为了以后自己可以方便回顾，以及能帮助各路的学习前端小伙伴，我打算把我阅读过的优质文章一点点分类，还有不错的学习资源融合成合集。阅读优秀的技术文章，可令你事半功倍。

我也在前端路上不断努力，也喜欢写博客，希望产出好的技术文章，我的博客地址：[Blog](https://github.com/Jacky-Summer/personal-blog)

> 技术文章的链接都会直接放原博客地址，纯属分享知识之用，如有侵权，请联系删除。

---

## 好文推荐

### CSS

- [干货!各种常见布局实现+知名网站实例分析](https://juejin.im/post/5aa252ac518825558001d5de)

- [深入浅出介绍各种 CSS 布局概念及技术](https://marvin1023.github.io/css-layout/)

- [关于 CSS-BFC 深入理解](https://juejin.im/post/5909db2fda2f60005d2093db)

- [CSS 知识点及技巧整理](https://juejin.im/post/5a954add6fb9a06348538c0d)

- [1.5 万字 CSS 基础拾遗（核心知识、常见需求）](https://juejin.cn/post/6941206439624966152)

- [个人总结（css3 新特性）](https://juejin.cn/post/6844903518520901639)

### JavaScript

- [这一次，彻底弄懂 JavaScript 执行机制](https://juejin.im/post/59e85eebf265da430d571f89)

- [JS 原型链与继承别再被问倒了](https://juejin.cn/post/6844903475021627400)

- [从浏览器多进程到 JS 单线程，JS 运行机制最全面的一次梳理](https://juejin.im/post/6844903553795014663)

- [破解前端面试（80% 应聘者不及格系列）：从闭包说起](https://juejin.im/post/58f1fa6a44d904006cf25d22)

- [「吊打面试官」一篇文章彻底搞定【JavaScript闭包】](https://juejin.cn/post/6888150116138483719)

- [八段代码彻底掌握 Promise](https://juejin.im/post/6844903488695042062)

- [JavaScript 复杂判断的更优雅写法](https://juejin.im/post/6844903705058213896)

- [【建议星星】要就来 45 道 Promise 面试题一次爽到底(1.1w 字用心整理)](https://juejin.im/post/6844904077537574919)

- [一篇不是标题党的 CommonJS 和 ES6 模块规范讲解](https://juejin.cn/post/6844904145443356680)

- [import、require、export、module.exports 混合使用详解](https://juejin.cn/post/6844903520865386510)

- [【干货】js 数组详细操作方法及解析合集](https://juejin.cn/post/6844903614918459406)

- [1.5 万字概括 ES6 全部特性(已更新 ES2020)](https://juejin.cn/post/6844903959283367950)

### TypeScript

- [一份不可多得的 TS 学习指南（1.8W 字）](https://juejin.cn/post/6872111128135073806)

- [一文读懂 TypeScript 泛型及应用（ 7.8K 字）](https://juejin.cn/post/6844904184894980104)

- [TS 常见问题整理（60 多个，持续更新 ing](https://juejin.cn/post/6844904055039344654)

### React

- [「react 进阶」年终送给 react 开发者的八条优化](https://juejin.cn/post/6908895801116721160)

- [「react 进阶」一文吃透 react-hooks 原理](https://juejin.cn/post/6944863057000529933)

- [你真的理解 setState 吗？](https://juejin.cn/post/6844903636749778958)

- [这可能是最通俗的 React Fiber(时间分片) 打开方式](https://juejin.cn/post/6844903975112671239)

- [烤透 React Hook](https://juejin.cn/post/6867745889184972814)

- [React 性能优化 | 包括原理、技巧、Demo、工具使用](https://juejin.cn/post/6935584878071119885)

- [TypeScript 备忘录：如何在 React 中完美运用？](https://juejin.cn/post/6910863689260204039)

- [这可能是全网最全的 react 性能优化知识锦集](https://mp.weixin.qq.com/s/tTdLEg2Bu3WswAj8UEVi8w)

- [我对 React 实现原理的理解](https://juejin.cn/post/7117051812540055588)

- [「万字总结」🍒动画 + 大白话讲清楚React渲染原理](https://juejin.cn/post/7121378029682556958)

- [「React进阶」 React全部api解读+基础实践大全(夯实基础2万字总结)](https://juejin.cn/post/6950063294270930980)

- [86张脑图，一口气看完 React](https://juejin.cn/post/7085145274200358949)

- React SSR

  - [React SSR 详解【近 1W 字】+ 2个项目实战](https://juejin.cn/post/6844904017487724557)

- 深入 React 原理的系列教程

  - [React技术揭秘](https://react.iamkasong.com/)

  - [图解React原理系列](https://7kms.github.io/react-illustration-series/)

  - [React 原理解析](https://yuchengkai.cn/react/)

  - [React 源码解析](https://react.jokcy.me/)

  - [人人都能读懂的react源码解析](https://juejin.cn/post/6920788310877028365)

### Vue

- [Vue 开发必须知道的 36 个技巧【近 1W 字】](https://juejin.im/post/6844903959266590728)

- [Vue 项目里戳中你痛点的问题及解决办法（更新）](https://juejin.im/post/6844903632815521799)

### Webpack

- Webpack 打包原理

  - [Webpack 揭秘——走向高阶前端的必经之路](https://juejin.cn/post/6844903685407916039)

  - [「搞点硬货」从源码窥探 Webpack4.x 原理](https://juejin.cn/post/6844904046294204429)

  - [[万字总结] 一文吃透 Webpack 核心原理](https://juejin.cn/post/6949040393165996040)

  - [Webpack5 核心打包原理全流程解析](https://juejin.cn/post/7031546400034947108)

- 系列教程

  - [史上最走心 webpack4.0 中级教程——配置之外你应该知道的事](https://www.cnblogs.com/dashnowords/p/9572755.html)

  - [重学 webpack——webpack5.0](https://blog.csdn.net/qq_17175013/category_11156046.html)

  - [精通 Webpack 核心原理](https://juejin.cn/column/6978684601921175583)

  - [重学 webpack——webpack5.0](https://blog.csdn.net/qq_17175013/category_11156046.html?spm=1001.2014.3001.5482)

- 热更新原理

  - [Webpack HMR 原理解析](https://zhuanlan.zhihu.com/p/30669007)

  - [搞懂 webpack 热更新原理](https://github.com/careteenL/webpack-hmr)

  - [轻松理解 webpack 热更新原理](https://juejin.cn/post/6844904008432222215)

### 前端工程化

- [手把手带你入门前端工程化——超详细教程](https://juejin.im/post/6892003555818143752)

### 前端工具

- [web 调试优化-chrome 开发者工具不完全指南](https://juejin.cn/post/6844903508760608776)

### 前端安全

- [XSS 与 CSRF](https://juejin.cn/post/6844903502968258574)

### 浏览器

- [从输入 URL 到页面加载的过程？如何由一道题完善自己的前端知识体系！](https://juejin.im/post/6844903574535667719)

- [一次搞定前端“核心主线”——从输入 URL 到页面展示发生了什么](https://zhuanlan.zhihu.com/p/190320054)

- [深入理解浏览器的缓存机制](https://juejin.cn/post/6844904023665934349)

- [「前端进阶」从多线程到Event Loop全面梳理](https://juejin.cn/post/6844903919789801486)

- [浏览器工作原理与实践](https://blog.poetries.top/browser-working-principle/guide/part1/lesson01.html)

### 网络

- [深入理解 HTTPS 工作原理](https://juejin.cn/post/6844903830916694030)

- [关于 TCP/IP，必知必会的十个问题](https://juejin.cn/post/6844903490595061767)

- [（建议精读）HTTP 灵魂之问，巩固你的 HTTP 知识体系](https://juejin.cn/post/6844904100035821575)

- [面试官，不要再问我三次握手和四次挥手](https://zhuanlan.zhihu.com/p/86426969)

- [浅谈 HTTPS、SSL、数字证书](https://blog.csdn.net/aganliang/article/details/84380512)

### 性能优化

- [我是如何让公司后台管理系统焕然一新的(上) -性能优化](https://juejin.im/post/6844903789388890119)

- [前端性能优化 24 条建议（2020）](https://juejin.cn/post/6892994632968306702)

- [写给中高级前端关于性能优化的 9 大策略和 6 大指标](https://juejin.cn/post/6981673766178783262)

### 埋点监控

- [一文摸清前端监控实践要点](https://juejin.cn/column/7097156230489047047)

### Git

- [Git 实战手册](https://juejin.im/post/6844904047598632967)

- [三年 Git 使用心得 & 常见问题整理](https://juejin.im/post/6844904191203213326)

- [如何优雅地使用 Git](https://juejin.im/post/6844903546104135694)

- [《吐血整理》一篇文章教你学废 Git 版本管理](https://juejin.cn/post/6844904101675794439)

- [给自己点时间再记记这 200 条 Git 命令](https://segmentfault.com/a/1190000022491558)

- [Git 中文教程](https://geeeeeeeeek.github.io/git-recipes/)

### 算法与数据结构

- [我接触过的前端数据结构与算法](https://juejin.cn/post/6844903485968744461)

- [前端该如何准备数据结构和算法？](https://juejin.cn/post/6844903919722692621)

### 前端体系

- [15 张前端高清知识地图，强烈建议收藏](https://juejin.cn/post/6976157870014332935)

- [写给初中级前端的高级进阶指南](https://juejin.cn/post/6844904103504527374)

### 汇总文章

- [一个合格(优秀)的前端都应该阅读这些文章](https://juejin.im/post/6844903896637259784)

- [8 年前端开发的知识点沉淀(不知道会多少字，一直写下去吧...)](https://juejin.im/post/6844903870276042759)

- [1024 巨献！！一文看尽前端过去一年的精华沉淀（700 篇好文大汇总）](https://juejin.im/post/6844903976068972552)

- [前端进阶指南](https://juejin.cn/post/6977258091662278669)

### 面试相关

- [金九银十，你准备好面试了吗? (附 30w 字前端面试题总结)](https://juejin.cn/post/6996841019094335519)

### 经验总结

### 其它

- [前端业务开发的通用经验 - 质量保障](https://juejin.cn/post/6856375724979257352)

## 技术视野

- [如何不基于构建工具优雅的实现模块导入？](https://mp.weixin.qq.com/s/iXWfkcqvFZTlx63Uro6jMw)