{"id":3957,"url":"https://github.com/f2e-awesome/knowledge","name":"knowledge","description":"文档着重构建一个完整的「前端技术架构图谱」，方便 F2E(Front End Engineering又称FEE、F2E) 学习与进阶。","projects_count":569,"last_synced_at":"2026-06-09T07:00:28.582Z","repository":{"id":37663278,"uuid":"133954704","full_name":"f2e-awesome/knowledge","owner":"f2e-awesome","description":"文档着重构建一个完整的「前端技术架构图谱」，方便 F2E(Front End Engineering又称FEE、F2E) 学习与进阶。","archived":false,"fork":false,"pushed_at":"2023-02-28T13:50:04.000Z","size":11987,"stargazers_count":1969,"open_issues_count":1,"forks_count":372,"subscribers_count":97,"default_branch":"master","last_synced_at":"2026-05-23T16:00:20.039Z","etag":null,"topics":["awesome","canvas","css","dns","dom","electron","f2e","graphql","html","javascript","js","nginx","pwa","react","react-native","server","vue","webgl","webpack","webpack4"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/f2e-awesome.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-05-18T12:58:43.000Z","updated_at":"2026-05-19T01:16:24.000Z","dependencies_parsed_at":"2024-01-12T18:38:32.379Z","dependency_job_id":"57770da5-5a9b-4fdb-b755-5d67df0e3d14","html_url":"https://github.com/f2e-awesome/knowledge","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/f2e-awesome/knowledge","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/f2e-awesome%2Fknowledge","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/f2e-awesome%2Fknowledge/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/f2e-awesome%2Fknowledge/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/f2e-awesome%2Fknowledge/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/f2e-awesome","download_url":"https://codeload.github.com/f2e-awesome/knowledge/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/f2e-awesome%2Fknowledge/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34095247,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-09T02:00:06.510Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"created_at":"2024-01-06T20:24:43.573Z","updated_at":"2026-06-09T07:00:28.583Z","primary_language":null,"list_of_lists":false,"displayable":true,"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"\u003e 更新时间：2023-02-24 07:36:26（脚本自动生成，勿手动修改，详见：info.md)\n# F2E-Awesome [![知识共享协议（CC协议）](https://img.shields.io/badge/License-Creative%20Commons-DC3D24.svg)](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh) [![GitHub stars](https://img.shields.io/github/stars/f2e-awesome/knowledge.svg?style=flat\u0026label=Star)](https://github.com/f2e-awesome/knowledge/stargazers) [![GitHub forks](https://img.shields.io/github/forks/f2e-awesome/knowledge.svg?style=flat\u0026label=Fork)](https://github.com/f2e-awesome/knowledge/fork) [![GitHub watchers](https://img.shields.io/github/watchers/f2e-awesome/knowledge.svg?style=flat\u0026label=Watch)](https://github.com/f2e-awesome/knowledge/watchers)\n\n![Tags](https://github.com/f2e-awesome/knowledge/blob/master/img/tags.jpg)\n\n- 难度等级：☆ 为初级，☆☆ 为中级，☆☆☆ 为高级\n- 标签体系：[开发工具](#开发工具)、[前端类库](#前端类库)、[必学原理](#必学原理)、[移动端](#移动端)、[PWA](#PWA)、[WebAssembly](#WebAssembly)、[Canvas](#Canvas)、[小程序](#小程序)、[WebGL](#WebGL)、[SVG](#SVG)、[Elasticsearch](#Elasticsearch)、[HTML5](#HTML5)、[模块化编程](#模块化编程)、[Graphql](#Graphql)、[算法](#算法)、[加密](#加密)、[数据结构](#数据结构)、[包管理](#包管理)、[Python](#Python)、[设计模式](#设计模式)、[数据库](#数据库)、[CSS](#CSS)、[函数式编程](#函数式编程)、[网络协议](#网络协议)、[DOM](#DOM)、[跨域](#跨域)、[Git](#Git)、[事件模型](#事件模型)、[安全](#安全)、[前端规范](#前端规范)、[Nginx](#Nginx)、[DNS](#DNS)、[CDN](#CDN)、[V8](#V8)、[JS](#JS)、[Linux](#Linux)、[Electron](#Electron)、[抓包工具](#抓包工具)、[测试](#测试)、[容器化](#容器化)、[监控](#监控)、[浏览器](#浏览器)、[数据可视化](#数据可视化)、[前端工程化](#前端工程化)、[物联网](#物联网)、[主流框架](#主流框架)、[消息队列](#消息队列)、[DevOps](#DevOps)、[微前端](#微前端)、[LowCode](#LowCode)、[架构](#架构)、[AI](#AI)、[面试](#面试)、[前端组织](#前端组织)、[学习网站](#学习网站)、[技术杂谈](#技术杂谈)、[优化](#优化)、[Web](#Web)、[Serverless](#Serverless)、[源码学习](#源码学习)、[DevOps](#DevOps)、[Web3](#Web3)、[Rust](#Rust)\n### 开发工具\n- [Sublime Text](https://www.sublimetext.com/3) ☆☆\n- [VS Code](https://code.visualstudio.com/Download/) ☆☆☆\n- [Atom](https://atom.io/) ☆☆\n- [WebStorm](https://www.jetbrains.com/webstorm/download/#section=windows) ☆☆☆\n### 前端类库\n- JS 类库\n  - [jQuery](http://api.jquery.com/) ☆\n  - [zepto](http://www.zeptojs.cn/) ☆\n  - [underscore](http://www.css88.com/doc/underscore/) ☆☆\n  - [lodash](https://www.lodashjs.com/) ☆☆\n- UI 库 ☆\n  - [Bulma](https://bulma.io/)\n  - [EasyUI](http://www.jeasyui.net/)\n  - [Bootstrap](http://www.bootcss.com/)\n  - [Meterial Design](https://material.io)\n  - [Wired Elements(手绘风格 UI 库)](https://juejin.im/entry/5b1dd2b2f265da6e0f70b7e1?utm_source=gold_browser_extension)\n  - 移动端\n   - [SUI Mobile](http://m.sui.taobao.org/)\n   - [MUI](http://dev.dcloud.net.cn/mui/)\n- 软件\n  - PS ☆\n  - AI ☆\n  - [精品 MAC 应用分享](http://xclient.info/?t=b4b436fb1b66a3542c9e25e85d474bd51998960d) ☆\n- 视觉网站\n  - [Behance](https://www.behance.net/) ☆☆\n  - [Dribbble](https://dribbble.com/) ☆☆\n- 原型工具\n  - Axure ☆\n  - [Sketch](http://www.sketchcn.com/sketch-chinese-user-manual.html) ☆\n### 必学原理\n- [AST 抽象语法树](http://jartto.wang/2018/11/17/about-ast/) ☆☆\n- [AST 与前端工程化实战](https://mp.weixin.qq.com/s/frZq6DBjK7TYV3hiqSUj3w) ☆☆\n- [编译原理：从 0 写一个 js 解释器](https://zhuanlan.zhihu.com/p/137509746?hmsr=toutiao.io\u0026utm_medium=toutiao.io\u0026utm_source=toutiao.io) ☆\n### 移动端\n- Native App\n  - [React Native](https://facebook.github.io/react-native/) ☆☆\n  - [Weex](http://weex.apache.org) ☆☆\n  - [NativeScript](https://www.nativescript.org/)\n- Hybird App\n  - Ionic ☆☆\n  - Cordova ☆☆\n  - Phonegap ☆☆\n- Web App ☆\n- 响应式布局\n  - rem  ☆\n- webview\n  - 页面通信 ☆\n  - 原理 ☆☆\n- [关于 Hbuilder](http://jartto.wang/2015/02/13/about-hbuilder/) ☆\n- [移动端 Touchend 事件不触发解决方案](http://jartto.wang/2015/06/25/solutions-to-touchend-on-mobile/) ☆\n- [移动Web UI库（H5框架）有哪些](https://blog.csdn.net/u013778905/article/details/78632650) ☆\n- [H5 移动调试全攻略](http://jartto.wang/2018/11/01/mobile-debug/) ☆☆\n- Flutter\n  - [Awesome-Flutter](https://github.com/fluttercnclub/awesome-fluttercn) ☆\n  - [闲鱼Flutter互动引擎系列](https://mp.weixin.qq.com/s/oa-XUzWhhsz37Mj-Y6WkzA) ☆☆\n  - [深入了解 Flutter 的高性能图形渲染](https://mp.weixin.qq.com/s/RNhdYtoQ8RQcjIXJReGZWA) ☆☆☆\n### PWA\n- [官网](https://developers.google.com/web/progressive-web-apps/) ☆☆\n- [第一本 PWA 中文书](https://juejin.im/entry/5a1c394a5188255851326da5) ☆☆\n- [PWA（Progressive Web App）初探总结](https://blog.csdn.net/qq_19238139/article/details/77531191) ☆\n- [讲讲 PWA](https://segmentfault.com/a/1190000012353473)\n- [React 同构应用 PWA 升级指南](https://github.com/happylindz/blog/issues/14?hmsr=toutiao.io\u0026utm_medium=toutiao.io\u0026utm_source=toutiao.io) ☆\n- [9 amazing PWA secrets](https://www.creativebloq.com/features/9-amazing-pwa-secrets) ☆☆☆\n- [awesome-progressive-web-apps](https://github.com/TalAter/awesome-progressive-web-apps) 打造 `PWA` 的资源集合\n- [pwa.rocks](https://pwa.rocks/) 一些优秀的 `PWA` 集合\n### WebAssembly\n- [WebAssembly，Web 的新时代](http://blog.csdn.net/zhangzq86/article/details/61195685) ☆☆\n- [来谈谈 WebAssembly 是个啥？为何说它会影响每一个 Web 开发者？](http://blog.csdn.net/wulixiaoxiao1/article/details/60581397) ☆\n- [WebAssembly 系列（四）WebAssembly 工作原理](https://segmentfault.com/a/1190000008686643) ☆☆☆\n- [如何评论浏览器最新的 WebAssembly 字节码技术？](https://www.zhihu.com/question/31415286) ☆☆\n### Canvas\n- [玩转「Canvas」](https://juejin.im/post/5bfba4d6e51d452fd80f0f0d) ☆\n- [Canvas 实现单机版贪吃蛇](https://juejin.im/post/5b115c54f265da6e65165aef?utm_source=gold_browser_extension) ☆☆☆\n- [用 Canvas 画一个进度盘](https://juejin.im/post/5b25e3396fb9a00e7a3d5161?utm_source=gold_browser_extension) ☆☆\n\n### 小程序\n- [快速上手小程序](http://jartto.wang/2018/01/25/quick-start-mini-programs/) ☆☆\n- [细数小程序的坑](http://jartto.wang/2018/02/08/count-pit-of-mini-programs/) ☆☆\n- [小程序开发 Tips](http://jartto.wang/2018/03/06/tips-of-mini-programs/) ☆☆\n- [Taro 多端统一开发框架](https://github.com/NervJS/taro)\n### WebGL\n- [WebGL技术储备](http://taobaofed.org/blog/2015/12/21/webgl-handbook/) ☆☆\n- [WebGL的实际使用](http://taobaofed.org/blog/2018/05/07/optimizing-page-performance-with-shader/) ☆☆\n- [WebGL 3D版俄罗斯方块](http://www.cnblogs.com/xhload3d/p/9098386.html)  ☆☆☆\n\n### SVG\n- [走进 SVG ](http://jartto.wang/2016/09/10/step-in-svg/) ☆☆\n- [SVG 类库 snap.svg.js](http://snapsvg.io/) ☆☆\n### Elasticsearch\n- [Elasticsearch 官网](https://www.elastic.co/products/elasticsearch)\n- [基于 Elasticsearch 实现搜索建议](https://juejin.im/post/5b5a64c7518825620f57e907)\n### HTML5\n- 初级 ☆\n  - [语义化](https://www.jianshu.com/p/b226910034f2)\n  - [Audio 和 Video](https://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp)\n  - Web Storage\n  - [HTML5 MDN](https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5)\n  - [HTML5 Tricks](https://www.html5tricks.com/category/html5-tutorials)\n  - [HTML5 教程手册](https://www.html.cn/doc/html5/draganddrop/)\n- 中级 ☆☆\n  - 离线存储\n  - [HTML5 摄像头](http://jartto.wang/2017/11/28/h5-user-media/)\n  - [HTML5 全屏](http://jartto.wang/2017/06/25/h5-fullscreen-api/)\n  - [HTML5 拖放实现](http://jartto.wang/2017/10/23/html5-drag/)\n  - [HTML5 全屏滑动组件](http://kele527.github.io/iSlider/)\n  - [HTML5 之地理定位（Geolocation）](http://jartto.wang/2018/11/16/html5-geolocation/)\n  - [HTML5 之消息通知（Web Notification）](http://jartto.wang/2018/10/30/html5-notification/)\n  - [HTML5 之音频合成（SpeechSynthesis）](http://jartto.wang/2018/10/31/h5-SpeechSynthesis/)\n  - [WebSocket](https://github.com/Pines-Cheng/blog/issues/37)\n- 高级 ☆☆☆\n  - Communication\n  - Web Workder\n    - [Web Worker](https://juejin.im/entry/5bcec53f6fb9a05cda77a347?utm_source=gold_browser_extension)\n    - [Web Workers + 5 cases](https://blog.sessionstack.com/how-javascript-works-the-building-blocks-of-web-workers-5-cases-when-you-should-use-them-a547c0757f6a)\n    - [Speedy Introduction to Web Workers](https://auth0.com/blog/speedy-introduction-to-web-workers/)\n  - requestAnimationFrame\n  - requestIdleCallback\n- 扩展\n  - [HTML5 API 大盘点](http://jartto.wang/2016/07/25/make-an-inventory-of-html5-api/) ☆☆\n  - [H5 页面滚动阻尼效果实现](https://juejin.im/post/5b24ffe3f265da59934b33f4?utm_source=gold_browser_extension)\n\n### 模块化编程\n- [CMD](https://github.com/seajs/seajs/issues/242) ☆\n  - [SeaJS](http://yslove.net/seajs/) ☆\n- [AMD](https://github.com/amdjs/amdjs-api/wiki/AMD) ☆\n  - [Requirejs](http://requirejs.org/docs/optimization.html) ☆\n- [JS 模块化编程之彻底弄懂 CommonJS 和 AMD/CMD！](https://www.cnblogs.com/chenguangliang/p/5856701.html) ☆\n- [AMD 和 CMD 的区别有哪些？](https://www.zhihu.com/question/20351507) ☆\n### Graphql\n- [graphql](https://graphql.cn/)\n- [apollo](https://www.apollographql.com/)\n- [apollo-blog](https://dev-blog.apollodata.com/) 需要翻墙\n### 算法\n- [前端数据结构与算法入门](https://mp.weixin.qq.com/s/UgLUXLJ6bSnQ2ZIZnTqLUg) ☆\n- [算法练习](https://leetcode-cn.com/problemset/all/) ☆☆\n- [JavaScript 算法与数据结构](https://github.com/trekhleb/javascript-algorithms/blob/master/README.zh-CN.md) ☆☆☆\n- 算法入门 ☆☆\n  - [算法图解1 - 二分查找和大O表示法](http://jartto.wang/2018/11/22/algorithm1/)\n  - [算法图解2 - 数组和链表](http://jartto.wang/2018/11/25/algorithm2/)\n  - [算法图解3 - 递归，快排](http://jartto.wang/2018/11/26/algorithm3/)\n  - [算法图解4 - 散列表](http://jartto.wang/2018/11/27/algorithm4/)\n  - [算法图解5 - 图和广度优先搜索](http://jartto.wang/2018/11/28/algorithm5/)\n  - [算法图解6 - 狄克斯特拉算法与贪婪算法](http://jartto.wang/2018/11/29/algorithm6/)\n  - [算法图解7 - 动态规划](http://jartto.wang/2018/11/29/algorithm7/)\n- 贪心算法\n- 动态规划\n- 搜索\n- 图论\n- 计算几何\n- 数学\n- 大数问题\n- 矩阵计算\n- [十大经典排序算法动画](https://mp.weixin.qq.com/s/giubE_Jo1NhIqTteeOmj7g)\n\n### 加密\n- [初探加密算法](http://jartto.wang/2017/12/03/exploration-the-encryption/) ☆☆☆\n- [算法分析](https://pan.baidu.com/s/1bYfdZx3o5vL6MRyCit8P8w) 密码: as75 ☆☆☆\n- [程序员实用算法](https://pan.baidu.com/s/1O3iGlPfW-REEW6yRTKw9oQ) 密码: mmap ☆☆☆\n- 对称加密\n  - DES ☆☆☆\n  - 3DES ☆☆☆\n  - TDEA ☆☆☆\n  - Blowfish ☆☆☆\n  - RC2 ☆☆☆\n  - RC4 ☆☆☆\n  - RC5 ☆☆☆\n  - IDEA ☆☆☆\n  - SKIPJACK ☆☆☆\n  - AES ☆☆☆\n- 非对称加密\n  -  RSA ☆☆☆\n  -  ECC（移动设备用） ☆☆☆\n  -  Diffie-Hellman ☆☆☆\n  -  El Gamal ☆☆☆\n  -  DSA（数字签名用） ☆☆☆\n- Hash 加密\n  - MD2 ☆☆☆\n  - MD4 ☆☆☆\n  - MD5 ☆☆☆\n  - HAVAL ☆☆☆\n  - SHA ☆☆☆\n- 综合实践\n  - [OAuth2.0 的四种授权方式](https://mp.weixin.qq.com/s/YaZvBvFx2Ccmw4C2287uog) ☆☆\n### 数据结构\n- 分类\n  - 数组\n  - 栈\n  - 队列\n  - 链表\n  - 树 \n    - 二叉树\n  - 图\n  - 堆\n  - 散列表\n  - 链表\n    - 单向链表\n    - 双向链表\n    - 环链表\n- [Data Structures for Beginners](https://adrianmejia.com/blog/2018/04/28/data-structures-time-complexity-for-beginners-arrays-hashmaps-linked-lists-stacks-queues-tutorial/) ☆☆\n### 包管理\n- npm ☆\n- cnpm ☆\n- yarn ☆\n- homebrew ☆\n- bower ☆\n### Python\n- 初级 ☆\n  - [Python 入门指南](http://www.runoob.com/manual/pythontutorial/docs/html/)\n  - [Python 官方文档](https://www.python.org/)\n  - Python 笔记\n    - [简单语法](http://jartto.wang/2018/06/24/learn-python-3/)\n    - [常用操作](http://jartto.wang/2018/06/12/learn-python-2/)\n    - [Open 文件操作](http://jartto.wang/2018/05/19/learn-python-1/)\n    - ...\n- 中级 ☆☆\n  - [30s Python](http://python.kriadmin.me/) \n  - [爬虫](https://github.com/facert/awesome-spider)\n    - [Scrapy](http://scrapy-chs.readthedocs.io/zh_CN/0.24/intro/overview.html)\n  - Web 框架\n    - Tornado \n    - Jinja2 \n    - Flask \n    - Django \n- 高级 ☆☆☆\n  - [Cook Book](http://python3-cookbook.readthedocs.io/zh_CN/latest/)\n  - 分布式\n      - Celery\n  - 移动端\n      - Kivy\n  - 数据分析\n      - Pandas\n  - 可视化\n    - Matplotlib\n    - Seaborn\n    - Plotly\n    - Bokeh\n  - 机器学习\n    - Tensorflow\n    - PyTorch\n    - MxNet\n### 设计模式\n- [菜鸟-设计模式](http://www.runoob.com/design-pattern/design-pattern-tutorial.html) ☆☆\n- [JavaScript 设计模式](https://juejin.im/entry/5b2929b351882574bd7edddd?utm_source=gold_browser_extension) ☆\n- [常用的 Javascript 设计模式](http://blog.jobbole.com/29454/) ☆☆\n- [23 种设计模式全解析](https://www.cnblogs.com/susanws/p/5510229.html)\n- 创建型模式\n  - 工厂方法\n  - 抽象工厂\n  - 建造者\n  - 原型\n  - 单例\n- 结构型模式\n  - 适配器\n  - 桥接\n  - 组合\n  - 装饰器\n  - 外观\n  - 享元\n  - 代理\n- 行为型模式\n  - 解释器\n  - 模板方法\n  - 责任链\n  - 命令\n  - 迭代器\n  - 中介者\n  - 备忘录\n  - 观察者\n  - 状态\n  - 策略\n  - 访问者\n### 数据库\n- MySQL ☆☆☆\n- Redis ☆☆☆\n  - [Redis 教程](http://www.runoob.com/redis/redis-tutorial.html)\n  - [读完这篇，你一定能真正理解 Redis 持久化](https://mp.weixin.qq.com/s/pIb--1AaJa-RARpdZaNBmA)\n- Memcached ☆☆☆\n  - [Memcached 教程](http://www.runoob.com/memcached/memcached-install.html)\n- [三种基本的存储引擎比较](https://mp.weixin.qq.com/s/Iemp-8dKPGXli6GtRnzFaw) ☆☆☆\n### CSS\n- 初级 ☆\n  - [CSS 3 简介](https://www.html.cn/doc/css3/what/)\n  - [CSS 实用概要](http://jartto.wang/2018/03/06/outline-of-css/)\n  - [CSS 实用 Tips](http://jartto.wang/2017/11/12/f2e-tips/)\n  - [CSS 三大特性](http://jartto.wang/2017/02/08/css-features/)\n  - 盒模型\n  - box-sizing\n  - IconFont\n  - [CSS 实现水平垂直居中的 10 种方式](https://juejin.im/post/5b9a4477f265da0ad82bf921?utm_source=gold_browser_extension)\n- 中级 ☆☆\n  - [BFC](https://zhuanlan.zhihu.com/p/25321647)\n  - [Flex](http://www.runoob.com/w3cnote/flex-grammar.html)\n  - [Grid layout](https://www.jianshu.com/p/441d60be7d8a)\n  - [Flexbox vs Grid：基本概念](https://www.w3cplus.com/css/flexbox-vs-grid-basic-concepts-and-related-attributes.html)\n  - [PostCSS](https://blog.csdn.net/beverley__/article/details/72963369)\n  - 预编译\n    - [SASS](http://sass.bootcss.com/docs/sass-reference/)\n    - [LESS](http://lesscss.cn/)\n    - [Stylus](http://stylus-lang.com/)\n  - CSS3 动画   \n    - [Animate CSS](https://daneden.github.io/animate.css/?)\n    - [All Animation CSS3](http://all-animation.github.io/)\n    - [Transform](http://www.w3school.com.cn/cssref/pr_transform.asp)\n    - [Translate](http://www.w3school.com.cn/cssref/pr_transform.asp)\n  - [如何检测页面滚动并执行动画](http://jartto.wang/2016/08/18/detect-page-scroll-and-execute-animation/)\n  - [移动端无缝滚动动画实现](https://juejin.im/post/5b2b4e3fe51d4558e15b97ed?utm_source=gold_browser_extension)\n- 高级 ☆☆☆\n  - [CSS3 动画原理](http://web.jobbole.com/83549/)\n  - [探究 CSS 解析原理](http://jartto.wang/2017/11/13/Exploring-the-principle-of-CSS-parsing/) \n  - [详谈层合成（composite）](http://jartto.wang/2017/09/29/expand-on-performance-composite/)\n  - [CSS Modules 使用详解](https://blog.csdn.net/xiangzhihong8/article/details/53195926)\n  - [Web 技巧 - 动画](https://juejin.im/post/5d2b49f3f265da1bcb4f5bab) ☆☆\n- 扩展\n  - [30s CSS](https://atomiks.github.io/30-seconds-of-css/) ☆\n  - [新手引导动画的 4 种实现方式](https://juejin.im/post/5bac9bd0e51d450e516296d0)\n\n### 函数式编程\n- [什么是函数式编程思维？](https://www.zhihu.com/question/28292740) ☆☆☆\n- [我眼中的 JavaScript 函数式编程](http://taobaofed.org/blog/2017/03/16/javascript-functional-programing/) ☆☆☆\n- [防抖和节流原理分析](https://juejin.im/post/5b7b88d46fb9a019e9767405)\n- 参数个数 Arity\n- 高阶组件 Higher-Order Functions (HOF)\n- 偏应用函数 Partial Application\n- 柯里化 Currying\n- 闭包 Closure\n- 自动柯里化 Auto Currying\n- 函数合成 Function Composition\n- Continuation\n- 纯函数 Purity\n- 副作用 Side effects\n- 幂等 Idempotent\n- Point-Free Style\n- 断言 Predicate\n- 约定 Contracts\n- 范畴 Category\n- [JavaScript 函数式编程术语大全](http://www.css88.com/archives/7833)\n- ...\n### 网络协议\n- TCP ☆☆☆\n- UDP ☆☆☆\n- [HTTP 协议入门](http://jartto.wang/2016/08/04/Rudimentary-http-protocol/) ☆\n- [HTTP2](http://jartto.wang/2018/03/30/grasp-http2-0/) ☆☆☆\n- HTTPS ☆☆\n  - [一个故事讲完 HTTPS](https://mp.weixin.qq.com/s/StqqafHePlBkWAPQZg3NrA)\n  - [图文还原 HTTPS 原理](https://mp.weixin.qq.com/s/3NKOCOeIUF2SGJnY7II9hA)\n- 计算机网络的 7 层协议 ☆☆☆\n### DOM\n- [JavaScript HTML DOM](http://www.w3school.com.cn/js/js_htmldom.asp) ☆☆\n\n### 跨域\n- [JSONP](https://www.zhihu.com/question/19966531) ☆☆\n- [CORS](http://jartto.wang/2016/06/27/solutions-to-CORS/) ☆☆\n- [Nginx](http://www.nginx.cn/4592.html) ☆☆\n### Git\n- [Git 学习资源汇总](http://jartto.wang/2015/09/08/summarize-the-git/) ☆\n- [Git 常规操作](http://jartto.wang/2017/12/01/git-common-operate/) ☆\n- [如何配置 Git 对应多个 Repository](http://jartto.wang/2017/12/19/one-git-for-more-repository/) ☆\n- [Git 实践系列一：初探](http://jartto.wang/2015/09/07/git-part-1/) ☆\n- [Git 钩子的作用](https://git-scm.com/book/zh/v2/%E8%87%AA%E5%AE%9A%E4%B9%89-Git-Git-%E9%92%A9%E5%AD%90) ☆☆\n- [Git pre-push hook](https://www.jianshu.com/p/7a10d4db97c0) ☆☆\n- [你可能会忽略的 Git 提交规范](http://jartto.wang/2018/07/08/git-commit/) ☆\n- [一个维护版本日志整洁的 Git 提交规范](https://juejin.im/post/5bf7b2e9e51d45213e57be92)\n- [git-flow](https://www.git-tower.com/learn/git/ebook/cn/command-line/advanced-topics/git-flow) ☆☆\n  - [git flow 的使用](https://www.cnblogs.com/lcngu/p/5770288.html) ☆☆\n### 事件模型\n- 观察者模式 ☆☆\n- DOM0 级模型 ☆☆\n- IE 事件模型 ☆☆\n- DOM2 级模型 ☆☆\n- JQuery Event 模型 ☆☆\n- [JS 事件模型](https://segmentfault.com/a/1190000006934031) ☆☆\n### 安全\n- [如何防止 XSS 攻击？](https://juejin.im/post/5bad9140e51d450e935c6d64)\n- [Web 安全之 XSS 和 CSRF](http://jartto.wang/2017/12/15/xss-and-csrf/) ☆☆☆\n- [Web 安全的三个攻防姿势](https://juejin.im/post/59e6b21bf265da43247f861d) ☆☆☆\n- [XSS 的原理分析与解剖](http://netsecurity.51cto.com/art/201408/448305_all.htm) ☆☆☆\n- [对于 XSS 和 CSRF 你究竟了解多少](http://netsecurity.51cto.com/art/201407/446775.htm) ☆☆☆\n- [CSRF 攻击的应对之道](https://www.ibm.com/developerworks/cn/web/1102_niugang_csrf/) ☆☆☆\n- SQL 注入 ☆☆☆\n- HTTPS ☆☆☆\n- 内网渗透 ☆☆☆\n- DDos 攻击 ☆☆☆\n- 点击劫持 ☆☆\n- Session 劫持 ☆☆\n- 短信接口攻击 ☆☆\n- CC \n### 前端规范\n- [ESLint](https://eslint.org) ☆\n- [JSHint](http://www.jslint.com) ☆\n- [styleLint](https://stylelint.io/) ☆\n- [EditorConfig](https://editorconfig.org/)\n- [Airbnb JavaScript](https://github.com/airbnb/javascript?utm_source=gold_browser_extension) **\n- [项目规范化开发探索](https://www.notion.so/57b80f3f75b741e3a54546c20ae5e8e7) *\n- [看看这些被同事喷的 JS 代码风格你写过多少](https://juejin.im/post/5becf928f265da61380ec986) *\n- [谷歌工程实践 - Code Review 标准](https://jimmysong.io/eng-practices/docs/review/reviewer/standard/) **\n### Nginx\n- [Nginx](http://jartto.wang/2017/04/15/nginx-exception-handling/) ☆☆\n- [Nginx 平滑的基于权重轮询算法分析](https://tenfy.cn/2018/11/12/smooth-weighted-round-robin/?hmsr=toutiao.io\u0026utm_medium=toutiao.io\u0026utm_source=toutiao.io) ☆☆☆\n- [Nginx](https://github.com/nginx/nginx) ☆☆☆\n- [Nginx 解决跨域问题](http://www.nginx.cn/4592.html) ☆\n- [关于负载均衡的一切](https://mp.weixin.qq.com/s/xvozZjmn-CvmQMAEAyDc3w) ☆☆\n- [负载均衡的算法](https://mp.weixin.qq.com/s/fkYnkT6PW0I2MS2d2Nh1jg) ☆☆\n- [几种常用负载均衡架构](https://developer.51cto.com/art/201904/595761.htm) ☆☆\n### DNS\n- [DNS 缓存中毒](https://www.toutiao.com/a6652593929738781195/?tt_from=weixin\u0026utm_campaign=client_share\u0026wxshare_count=1\u0026timestamp=1548950293\u0026app=news_article\u0026utm_source=weixin\u0026iid=59860639007\u0026utm_medium=toutiao_ios\u0026group_id=6652593929738781195)\n- [例解 DNS 递归/迭代名称解析原理](http://blog.chinaunix.net/uid-10659021-id-3903144.html) ☆☆☆\n- [浏览器输入网址后台是如何运作的](http://www.chinaz.com/web/2013/0228/293980.shtml) ☆☆\n### CDN\n- [什么是 CDN？](https://www.zhihu.com/question/37353035) ☆☆\n- [CDN 带来这些性能优化](https://juejin.im/post/5d1385b25188253dc975b577?utm_source=gold_browser_extension) ☆☆☆\n\n### V8 引擎\n- [Google V8 引擎运用了哪些优秀的算法？](https://www.zhihu.com/question/22498967) ☆☆☆\n- [V8 引擎详解](https://blog.csdn.net/swimming_in_it_/article/details/78869549) ☆☆☆\n- [Google V8](https://github.com/v8/v8) ☆☆☆\n- [V8 并发标记](https://mp.weixin.qq.com/s/pv_4YRo6KjLiVxLViZTr2Q) ☆☆☆\n- [V8 引擎的 5 个优化技巧](https://blog.sessionstack.com/how-javascript-works-inside-the-v8-engine-5-tips-on-how-to-write-optimized-code-ac089e62b12e) ☆☆☆\n\n### JS\n- 初级 ☆\n  - [JavaScript ES12 新特性抢先体验](https://mp.weixin.qq.com/s/T2IkxRp_PXkhk8T_ciLvjw) ☆\n  - [JS 标准参考教程](https://www.kancloud.cn/kancloud/javascript-standards-reference/46466)\n  - [原型与原型链](https://github.com/mqyqingfeng/Blog/issues/2)\n  - [作用域](https://github.com/mqyqingfeng/Blog/issues/3)与[作用域链](https://github.com/mqyqingfeng/Blog/issues/6)\n  - [Event Loop](https://juejin.im/post/59e85eebf265da430d571f89)\n  - 闭包\n    - [反思闭包](http://jartto.wang/2017/12/18/reflective-closure/)\n    - [深入浅出 Javascript 闭包](https://juejin.im/post/5beee511e51d453b8e543ed6)\n  - [call 和 apply](http://jartto.wang/2016/06/28/appreciation-of-the-call-and-apply/)\n  - [正则表达式](http://jartto.wang/2016/07/03/js-regular-expression/)\n    - [正则表达式真的很骚，可惜你不会写](https://juejin.im/post/5b96a8e2e51d450e6a2de115)\n  - [XHR or Fetch API ?](http://jartto.wang/2017/01/17/xhr-or-fetch-api/)\n  - [Understanding ECMAScript 6](https://oshotokill.gitbooks.io/understandinges6-simplified-chinese/content/chapter_1.html)\n  - [为什么要有 ES6](https://github.com/jeyvie/thoughts/blob/master/docs/why_es6.md)\n  - [introduction to ES6 by example](http://coenraets.org/present/es6/#0)\n  - [ES6 标准入门](http://www.waibo.wang/bible/es6/)\n  - [ECMAScript 6 - 阮一峰](http://javascript.ruanyifeng.com/advanced/ecmascript6.html#)\n  - [浏览器同源政策及其规避方法](http://www.138dish.cn/web/same-origin-policy.html)\n- 中级 ☆☆\n  - [JS 模板引擎](http://jartto.wang/2016/09/15/grasp-a-js-template-engine/)\n  - [前端路由跳转基本原理](https://juejin.im/post/5c52da9ee51d45221f242804?utm_source=gold_browser_extension)\n  - 垃圾回收\n  - JS 内存\n    - [JS 内存管理](https://blog.sessionstack.com/how-javascript-works-memory-management-how-to-handle-4-common-memory-leaks-3f28b94cfbec)\n    - [内存管理速成教程](https://hacks.mozilla.org/2017/06/a-crash-course-in-memory-management/)\n  - 堆和栈\n  - 继承\n  - [掌握 JS Stack Trace](http://jartto.wang/2017/12/09/grasp-js-stack-trace/)\n  - [ES6](http://es6.ruanyifeng.com)\n    - [Generator](https://github.com/jeyvie/understanding-ES6/blob/master/docs/8.1_iterator_generator_base.md)\n      - [ES6-Generator 函数](https://juejin.im/post/5b1751d551882513756f0bdc)\n    - [Promise](https://github.com/jeyvie/understanding-ES6/blob/master/docs/11.Promise.md)\n      - [How do Promises work under the hood?](https://blog.safia.rocks/post/170154422915/how-do-promises-work-under-the-hood)\n      - [JavaScript Promise迷你书](http://liubin.org/promises-book/)\n    - [Module](https://github.com/jeyvie/understanding-ES6/blob/master/docs/13.module.md)\n    - [Class](https://github.com/jeyvie/understanding-ES6/blob/master/docs/9.class.md)\n  - [JavaScript 引擎基础：Shapes 和 Inline Caches](https://juejin.im/entry/5b27a175e51d4558c23231dc?utm_source=gold_browser_extension)\n  - [33 Concepts Every JavaScript Developer Should Know](https://github.com/leonardomso/33-js-concepts?utm_source=gold_browser_extension)\n- 高级 ☆☆☆\n  - TypeScript\n    - [TypeScript 官网](https://www.tslang.cn)\n    - [深入 TypeScript 的类型系统](https://zhuanlan.zhihu.com/p/38081852)\n    - [TypeScript 总体架构](https://github.com/Microsoft/TypeScript/wiki/Architectural-Overview)\n    - [TypeScript 完全手册](https://zhuanlan.zhihu.com/p/83689446?hmsr=toutiao.io\u0026utm_medium=toutiao.io\u0026utm_source=toutiao.io)\n    - [如何用 Decorator 装饰你的 Typescript？](https://mp.weixin.qq.com/s/0JTvJJNX4zwE3-Kl6dMvrA)\n  - You-Dont-Know-JS\n    - [Up \u0026 Going](https://github.com/getify/You-Dont-Know-JS/blob/master/up%20\u0026%20going/README.md#you-dont-know-js-up--going)\n    - [Scope \u0026 Closures](https://github.com/getify/You-Dont-Know-JS/blob/master/scope%20\u0026%20closures/README.md#you-dont-know-js-scope--closures)\n    - [this \u0026 Object Prototypes](https://github.com/getify/You-Dont-Know-JS/blob/master/this%20\u0026%20object%20prototypes/README.md#you-dont-know-js-this--object-prototypes)\n    - [Types \u0026 Grammar](https://github.com/getify/You-Dont-Know-JS/blob/master/types%20\u0026%20grammar/README.md#you-dont-know-js-types--grammar)\n    - [Async \u0026 Performance](https://github.com/getify/You-Dont-Know-JS/blob/master/async%20\u0026%20performance/README.md#you-dont-know-js-async--performance)\n    - [ES6 \u0026 Beyond](https://github.com/getify/You-Dont-Know-JS/blob/master/es6%20\u0026%20beyond/README.md#you-dont-know-js-es6--beyond)\n  - [exploring ES6](http://exploringjs.com/es6/)\n  - JavaScript 如何工作\n    - [对引擎、运行时、调用堆栈的概述](https://juejin.im/post/5a05b4576fb9a04519690d42)\n    - [在 V8 引擎里 5 个优化代码的技巧](https://github.com/xitu/gold-miner/blob/master/TODO/how-javascript-works-inside-the-v8-engine-5-tips-on-how-to-write-optimized-code.md)\n    - [内存管理 + 处理常见的4种内存泄漏](https://github.com/xitu/gold-miner/blob/master/TODO/how-javascript-works-memory-management-how-to-handle-4-common-memory-leaks.md)\n    - [内存管理速成教程](https://mp.weixin.qq.com/s/sVcGRUZqILCVgfhzRyODTg)\n    - [事件循环和异步编程的崛起 + 5个如何更好的使用 async/await 编码的技巧](https://github.com/xitu/gold-miner/blob/master/TODO/how-javascript-works-event-loop-and-the-rise-of-async-programming-5-ways-to-better-coding-with.md)\n    - [深入剖析 WebSockets 和拥有 SSE 技术 的 HTTP/2，以及如何在二者中做出正确的选择](https://github.com/xitu/gold-miner/blob/master/TODO/how-javascript-works-deep-dive-into-websockets-and-http-2-with-sse-how-to-pick-the-right-path.md)\n    - [对比 WebAssembly + 为什么在某些场景下它比 JavaScript 更合适](https://github.com/xitu/gold-miner/blob/master/TODO1/how-javascript-works-a-comparison-with-webassembly-why-in-certain-cases-its-better-to-use-it.md)\n    - [Web Worker 的内部构造以及 5 种你应当使用它的场景](https://github.com/xitu/gold-miner/blob/master/TODO/how-javascript-works-the-building-blocks-of-web-workers-5-cases-when-you-should-use-them.md)\n- 扩展\n  - [何谓 JS 挖矿](http://jartto.wang/2017/11/08/js-dig-ore/) ☆\n  - [30S JS](https://github.com/Chalarangelo/30-seconds-of-code) ☆☆\n  - [33 Concepts Every JavaScript Developer Should Know ](https://github.com/leonardomso/33-js-concepts?utm_source=gold_browser_extension#1-call-stack)\n  - [ES6 语法侦测](https://github.com/ruanyf/es-checker) ☆\n  - [初探 performance – 监控网页与程序性能](https://www.cnblogs.com/zhuyang/p/4789020.html)\n  - [新手引导动画的4种实现方式](https://juejin.im/post/5bac9bd0e51d450e516296d0) ☆\n\n### Linux\n- ls/cd/rm/cat/chmod/chown/useradd/df/du/ps/top/head/tail ☆☆\n- [Linux](http://jartto.wang/2016/06/24/linux-common-operation/) ☆☆\n- [掌握 Linux 命令 Grep ](http://jartto.wang/2016/10/12/grasp-linux-grep/) ☆☆\n- [Linux 实用命令](http://jartto.wang/2016/11/02/linux-common-command/) ☆☆\n- [Mac 下查看端口占用情况](http://jartto.wang/2016/09/28/check-the-system-port-of-mac/) ☆☆\n- [程序员必备的 Linux 基础知识](https://juejin.im/post/5b3b19856fb9a04fa42f8c71) ☆☆\n- 网络操作\n  - curl\n  - netstat\n  - lsof\n  - ifconfig\n  - ssh\n  - tcpdump\n  - iptables\n- grep ☆☆\n- sed ☆☆\n- awk ☆☆☆\n- [commander 将介绍如何利Javascript做为服务端脚本](http://blog.fens.me/nodejs-commander/)\n- chalk 命令行彩色输出\n- [chokidar node文件监控](https://www.npmjs.com/package/chokidar)\n### Electron\n- [初探 Electron - 理论篇](http://jartto.wang/2018/01/03/first-exploration-electron/) ☆☆\n- [初探 Electron - 升华篇](http://jartto.wang/2018/01/04/first-exploration-electron-2/) ☆☆\n- [初探 Electron - 实践篇 1](http://jartto.wang/2018/01/14/first-exploration-electron-3/) ☆☆\n- [初探 Electron - 实践篇 2](http://jartto.wang/2018/01/21/first-exploration-electron-4/) ☆☆\n### 抓包工具\n- [Fiddler](https://www.telerik.com/fiddler) ☆☆\n- [Charles](https://www.charlesproxy.com) ☆☆\n- [HttpWatch](http://www.oneapm.com/lp/bihttpwatch) ☆☆\n- [spy-debugger](https://github.com/wuchangming/spy-debugger) ☆☆\n- 模拟请求\n  - [Postman](https://www.getpostman.com) ☆☆\n### 测试\n- 单元测试\n  - Jest ☆☆☆\n  - [Jasmine](https://jasmine.github.io/) ☆☆☆\n  - [mocha](https://segmentfault.com/a/1190000011362879) ☆☆☆\n  - [chai](http://www.chaijs.com/api/assert/) ☆☆☆\n  - [Karma](http://karma-runner.github.io/2.0/index.html) ☆☆☆\n- 软件测试\n  - [你了解软件测试吗？](http://jartto.wang/2017/11/02/grasp-testing/) ☆☆\n- 自动化测试\n  - [selenium_webdriver](https://www.yiibai.com/selenium/selenium_webdriver.html) ☆☆\n  - [Appium移动自动化测试](https://www.cnblogs.com/fnng/p/4540731.html) ☆☆\n  - [Appium移动自动化测试](https://www.cnblogs.com/fnng/p/4540731.html) ☆☆\n  - [UI 自动化测试](https://github.com/AirtestProject/Airtest) ☆☆☆\n    \u003e网易UI自动化测试框架，开源的，结合AI，自动更新测试用例、自我学习和需求沉淀。智能测试方向！！！！\n- 应用\n  - [React单元测试策略及落地](https://insights.thoughtworks.cn/react-strategies-for-unit-testing/?hmsr=toutiao.io\u0026utm_medium=toutiao.io\u0026utm_source=toutiao.io)\n  - [使用 Jest 和 Enzyme 测试 React 组件](https://mp.weixin.qq.com/s/isZLVenQrAUzA77O4TYVfQ)\n### 容器化\n- Docker\n  - [Docker 边学边用](http://jartto.wang/2020/07/04/learn-docker/) ☆☆\n  - [Docker 构建统一的前端开发环境](https://juejin.im/post/5b127087e51d450686184183?utm_source=gold_browser_extension) ☆☆\n  - [私服推荐 Nexus](http://dockone.io/article/2168) ☆☆☆\n  - [大型企业级推荐 harbor](https://blog.csdn.net/mideagroup/article/details/52053402) ☆☆☆\n  - [Docker 底层技术](https://www.jianshu.com/p/7a1ce51a0eba?hmsr=toutiao.io\u0026utm_medium=toutiao.io\u0026utm_source=toutiao.io) ☆☆☆\n  - [精简 Docker 镜像的五种通用方法](https://mp.weixin.qq.com/s/tMVK62zggVwaqfPsiYGaBg)\n- K8s\n  - [什么是 Kubernetes ](https://mp.weixin.qq.com/s/NqBb4FG5cVkoUkqQu7XOlg) ☆☆\n  - [Kubernetes 架构简介](https://mp.weixin.qq.com/s/WUntex914F98gDo-bnchLA) ☆☆\n  - [一文了解 Kubernetes](http://jartto.wang/2020/07/15/start-k8s/) ☆☆☆\n- [Jenkins](https://jenkins.io) ☆☆☆\n- [前端AB实验设计思路与实现原理](https://fed.taobao.org/blog/taofed/do71ct/frontend-ab-test) ☆☆☆\n### 监控\n- [APM](https://github.com/f2e-awesome/monitoring/blob/master/README.md) ☆☆\n- [前端错误日志收集方案](https://juejin.im/post/5bd2dbc7f265da0af16183f8?utm_source=gold_browser_extension) ☆\n- [前端性能监控系统](https://juejin.im/entry/5b78f88be51d4538a01e9f36) ☆☆\n- [前端代码异常监控实战](https://github.com/happylindz/blog/issues/5) ☆☆\n- [前端一站式异常捕获方案](https://jixianqianduan.com/frontend-weboptimize/2018/02/22/front-end-react-error-capture.html) ☆☆\n- [前端错误收集](https://juejin.im/post/5be2b0f6e51d4523161b92f0) ☆☆\n- [如何精确统计页面停留时长](https://techblog.toutiao.com/2018/06/05/ru-he-jing-que-tong-ji-ye-mian-ting-liu-shi-chang/) ☆\n- [如何优雅处理前端异常？](http://jartto.wang/2018/11/20/js-exception-handling/) ☆\n- [解决 Script Error 的另类思路](https://juejin.im/post/5c00a405f265da610e7fd024) ☆☆\n- [大前端时代前端监控的最佳实践](https://www.evernote.com/l/AUQuMjXPG6RBfaeWb_Y17fVmILKyZmLwgow) ☆☆☆\n- [前端性能监控：window.performance](https://juejin.im/entry/58ba9cb5128fe100643da2cc)\n### 浏览器\n- [再谈 IE 浏览器兼容问题](http://jartto.wang/2016/12/06/talk-about-ie-compatible-over-again/) ☆☆\n- [图解浏览器的基本工作原理](https://zhuanlan.zhihu.com/p/47407398) ☆☆\n- [what-happens-when](https://github.com/alex/what-happens-when)(输入 URL 后浏览器发生了什么) ☆☆\n- [浏览器工作原理](https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/) ☆☆☆\n- [渲染进程的内部工作原理](https://developers.google.com/web/updates/2018/09/inside-browser-part3) ☆☆☆\n- [Compositor 是如何来提高交互性能的？](https://developers.google.com/web/updates/2018/09/inside-browser-part4) ☆☆☆\n- [浏览器内核渲染：重建引擎](https://juejin.im/post/5bbaa7da6fb9a05d3761aafe)\n- [Chrome Devtools](https://medium.com/@tomsu/devtools-tips-day-1-the-console-dollars-3aa0d93e923c) ☆☆☆\n- [Chrome插件(扩展)开发全攻略](https://mp.weixin.qq.com/s/waUg3hx5HsRkyiitJdHudg) ☆\n### 数据可视化\n- 图表 ☆☆\n  - [echarts](http://echarts.baidu.com/option.html#xAxis) \n  - [highcharts](https://www.highcharts.com/products/highcharts/)\n  - [g2](https://antv.alipay.com/g2/demo/index.html)\n- 地图 ☆☆\n  - [Google Map](https://developers.google.com/maps/documentation/javascript/examples/user-editable-shapes?hl=zh-cn) \n  - [Mapbox](https://www.mapbox.com/) \n  - [高德](http://lbs.amap.com/) \n  - [百度](http://api.map.baidu.com/) \n  - [腾讯](http://lbs.qq.com/) \n  - [蜂鸟室内地图](https://www.fengmap.com/) \n- 埋点统计 ☆☆\n  - [揭开 JS 无埋点技术的神秘面纱](https://mp.weixin.qq.com/s/pGP5Oohcban0P1GAzPlAgg)\n### 前端工程化\n- [Web 研发模式演变](https://github.com/lifesinger/blog/issues/184) ☆☆\n- [我们是如何做好前端工程化和静态资源管理](https://aotu.io/notes/2016/07/19/A-little-exploration-of-front-end-engineering/index.html) 京东 ☆☆☆\n- [百度 fis](http://fis.baidu.com/fis3/docs/beginning/intro.html) ☆☆\n- [Scrat](http://scrat-team.github.io/#!/quick-start) ☆☆\n- [Grunt](http://www.gruntjs.net/) ☆☆\n- Gulp ☆☆\n  - [Gulp](https://www.gulpjs.com.cn/)\n  - [Gulp 4](https://fettblog.eu/gulp-4-parallel-and-series/)\n- Webpack\n  - [Webpack 4](https://juejin.im/post/5af8fa806fb9a07ac162876d) ☆☆☆\n    - [Webpack 4 配置最佳实践](https://juejin.im/post/5b304f1f51882574c72f19b0?utm_source=gold_browser_extension)\n  - [如何十倍提高你的 webpack 构建效率](https://blog.csdn.net/u011413061/article/details/51872412?from=timeline\u0026isappinstalled=0) ☆☆☆\n  - webpack 性能优化\n    - [减小前端资源大小](https://github.com/yued-fe/y-translation/blob/master/en/Web-Performance-Optimization-with-webpack/Introduction.md) ☆☆\n    - [利用好持久化缓存](https://github.com/yued-fe/y-translation/blob/master/en/Web-Performance-Optimization-with-webpack/Make-Use-of-Long-term-Caching.md) ☆☆☆\n    - [监控和分析应用](https://github.com/yued-fe/y-translation/blob/master/en/Web-Performance-Optimization-with-webpack/Monitor-and-analyze-the-app.md) ☆☆☆\n- Rollup\n- [Browserify](http://browserify.org/) ☆☆\n- [Parcel](http://jartto.wang/2017/12/11/chattered-about-parcel/) ☆☆\n- Babel\n  - [Babel 插件手册](https://github.com/jamiebuilds/babel-handbook/blob/master/translations/zh-Hans/plugin-handbook.md)\n  - [babel-runtime 使用与性能优化](https://juejin.im/entry/5b108f4c6fb9a01e5868ba3d?utm_source=gold_browser_extension)\n  - [babel-polyfill 使用与性能优化](https://juejin.im/entry/5b108f866fb9a01e49293627?utm_source=gold_browser_extension)\n- [什么是 Kubernetes？](https://mp.weixin.qq.com/s/NqBb4FG5cVkoUkqQu7XOlg) ☆☆\n- [有赞前端质量保障体系](https://juejin.im/post/5d24096ee51d454d1d6285a1?utm_source=gold_browser_extension) ☆☆☆\n- [前端工程实践之可视化搭建系统](https://www.zoo.team/article/luban-one?hmsr=toutiao.io\u0026utm_medium=toutiao.io\u0026utm_source=toutiao.io) ☆☆\n- [前端项目代码质量保障秘藉](https://mp.weixin.qq.com/s/djEyX7zxl51PcYcmP0zfyQ) ☆\n\n### 物联网\n- [ruff](https://baike.baidu.com/item/ruff/19726288?fr=aladdin) ☆☆☆\n- [ruff入门应用开发](https://www.imooc.com/learn/958) ☆☆☆\n- [要想成为一名物联网工程师，需要学习哪些知识？](https://www.zhihu.com/question/31381245)☆\n### 主流框架\n- Angular\n  - [依赖注入](http://jartto.wang/2014/04/24/angularjs-part-7/) ☆\n  - [指令 Directive](http://jartto.wang/2014/04/28/angularjs-part-9/) ☆☆\n  - [剖析 Angularjs 语法](http://jartto.wang/2018/02/01/analysis-of-angularjs/) ☆☆\n  - [build-your-own-angularjs](https://github.com/teropa/build-your-own-angularjs)\n- [Vue](https://cn.vuejs.org/)\n  - [Mint-UI](http://mint-ui.github.io/#!/zh-cn) ☆\n  - [Element.UI](http://element.eleme.io/#/zh-CN/guide/design) ☆\n  - [VUE2](https://cn.vuejs.org/v2/guide/) ☆☆\n  - [VUEX](https://vuex.vuejs.org/) ☆☆\n  - [Nuxtjs](https://www.sitepoint.com/nuxt-js-universal-vue-js/) ☆\n    - [Nuxtjs 2.0 升级爬坑](http://jartto.wang/2019/04/23/update-nuxt2-0/) ☆\n  - [Axios](https://www.jianshu.com/p/df464b26ae58) ☆\n  - Vue-Router\n    - [Vue-Router 实现原理](https://juejin.im/post/5b10b46df265da6e2a08a724?utm_source=gold_browser_extension) ☆☆☆\n  - Vue-Loader ☆☆\n  - [Vue.js 技术揭秘](https://ustbhuangyi.github.io/vue-analysis/) ☆☆☆\n- React\n  - 脚手架 ☆\n    - Create React App\n    - Codesandbox\n    - Rekit\n  - [30 seconds of React](https://github.com/30-seconds/30-seconds-of-react) ☆☆\n  - [How Does React Tell a Class from a Function?](https://overreacted.io/how-does-react-tell-a-class-from-a-function/) ☆☆\n  - [Ant Design](http://jartto.wang/2016/12/14/together-to-learn-ant-design-of-react/) ☆☆\n  - 虚拟 Dom ☆☆\n  - Diff 算法 ☆☆☆\n  - [react-app-rewired](https://github.com/timarney/react-app-rewired)\n  - Dva ☆☆\n  - [探路 Roadhog](http://jartto.wang/2017/04/25/gating-roadhog/) ☆☆\n  - Redux\n    - [深入理解 Redux 中间件](https://juejin.im/post/5b237569f265da59bf79f3e9?utm_source=gold_browser_extension) ☆☆☆\n    - [Redux 中文文档](https://github.com/camsong/redux-in-chinese) ☆☆\n  - [Redux-Saga](https://github.com/superRaytin/redux-saga-in-chinese) ☆☆☆\n  - TakeLatest ☆☆☆\n  - [React 16 新特性](https://baijiahao.baidu.com/s?id=1582848543674223747\u0026wfr=spider\u0026for=pc) ☆☆\n  - React-Router@4 ☆☆\n  - [React 性能优化](http://www.css88.com/react/docs/optimizing-performance.html) ☆☆☆\n  - [21 项优化 React App 性能的技术](https://mp.weixin.qq.com/s/PSYm43GkIR9tZVWpAEWrNA)\n  - [浅谈React性能优化的方向](https://zhuanlan.zhihu.com/p/74229420?utm_source=wechat_session\u0026utm_medium=social\u0026utm_oi=26811677278208\u0026s_r=0)\n  - React Hooks\n    - [30分钟精通 React Hooks](https://juejin.im/post/5be3ea136fb9a049f9121014) ☆☆\n    - [React Hooks-概览](https://juejin.im/post/5c31ccc8f265da6170074785?utm_source=gold_browser_extension) ☆☆\n  - [UmiJS](http://jartto.wang/2018/05/24/taste-of-umi/) ☆☆\n  - Next.js ☆☆\n    - [Next.js 使用指南1－基本规则](http://jartto.wang/2018/05/27/nextjs-1/)\n    - [Next.js 使用指南2－路由与加载](http://jartto.wang/2018/06/01/nextjs-2/)\n    - [Next.js 使用指南3－高级配置](http://jartto.wang/2018/06/08/nextjs-3/)\n  - [Ts + React + Mobx 实现移动端浏览器控制台](https://juejin.im/post/5bf278295188252e89668ed2?utm_source=gold_browser_extension#comment)\n  - [阿里飞冰组件库](https://alibaba.github.io/ice/) ☆☆\n  - 单测\n    - [React单元测试策略及落地](https://insights.thoughtworks.cn/react-strategies-for-unit-testing/?hmsr=toutiao.io\u0026utm_medium=toutiao.io\u0026utm_source=toutiao.io)\n    - [使用 Jest 和 Enzyme 测试 React 组件](https://mp.weixin.qq.com/s/isZLVenQrAUzA77O4TYVfQ)\n  - 应用\n    - [构建大型React应用程序的最佳实践](https://mp.weixin.qq.com/s/XspWR3e7Jm38Q-HJm2Ntvw)\n\n### 消息队列\n- [消息队列常见的 5 个应用场景](https://juejin.im/entry/5b59ce60e51d45198469a003)\n- ActiveMQ\n- RabbitMQ\n- ZeroMQ\n- Kafka\n  - [了解 Kafka](http://jartto.wang/2018/10/12/about-kafka/) ☆☆\n  - [Kafka 入门](https://www.cnblogs.com/likehua/p/3999538.html) ☆☆\n  - [Kafka的架构原理，你真的理解吗？](https://mp.weixin.qq.com/s/kzM19BcDzRk1PpEMadEluA) ☆☆☆\n- MetaMQ\n- RocketMQ\n- [消息队列mq总结](https://blog.csdn.net/HD243608836/article/details/80217591) ☆☆\n- [缓存淘汰算法--LRU算法](https://www.evernote.com/shard/s324/sh/13a3bb3f-372b-4a93-a980-95b4cc225a46/a383727c1d79df40) ☆☆☆\n  \u003e这个是各种消息队列的框架的核心算法，都是这个算法的变形\n### DevOps\n- [DevOps 简介](http://jartto.wang/2018/11/30/about-devops/) ☆\n- [猪八戒网的 DevOps 进化论](https://mp.weixin.qq.com/s/I7hRbZrw1QsS0UP4RZIHOw) ☆☆\n### 微前端\n- [了解什么是微前端](https://mp.weixin.qq.com/s/kZ3GMg0vXQwof8SX8u2EuA) ☆\n- [为什么大公司一定要使用微服务？](https://mp.weixin.qq.com/s/-lxNpu89A9uN_a8f2MiKMw) ☆\n- [微前端如何落地？](https://juejin.im/post/5d1d8d426fb9a07efe2dda40) ☆☆☆\n- [用微前端的方式搭建类单页应用](https://tech.meituan.com/2018/09/06/fe-tiny-spa.html) ☆☆\n- [Bifrost微前端框架及其在美团闪购中的实践](https://mp.weixin.qq.com/s/GgVo5KyZPlEsEeICcPyuLA) ☆☆\n- [张克军：微前端架构体系](https://mp.weixin.qq.com/s/OEfRPKuPmBKvJdD_zMgFuQ) ☆☆☆\n- [EMP for Vue\u0026React 互相远程调用](https://mp.weixin.qq.com/s/KKZYzzTFBVD-rJeWr3Z7cg) ☆☆\n- [字节跳动是如何落地微前端的](https://juejin.cn/post/7016900744695513125?utm_source=gold_browser_extension)☆☆☆\n### LowCode\n- [国内低代码平台](https://github.com/taowen/awesome-lowcode) ☆☆☆\n### 架构\n- [前端架构师入门技能图谱](https://mp.weixin.qq.com/s/fYC1VHibhOoxBpm8NShGWQ) ☆\n- [架构师成神路线图](https://mp.weixin.qq.com/s/X_F_8OfbBDHWcUTPY2THrA) ☆☆\n- [成为一名架构师得学习哪些知识？](https://mp.weixin.qq.com/s?__biz=MzUyNDkzNzczNQ==\u0026mid=2247485986\u0026idx=1\u0026sn=a4fff71f0138861975865ecd97981c7c\u0026chksm=fa24f54acd537c5c00cca8458698c801d9a7ca62e2feb1044a1424e3b8c8f9a51dd0540f7f13\u0026token=93419027\u0026lang=zh_CN#rd) ☆☆\n- [如何画好架构图？](https://mp.weixin.qq.com/s/cqC6djHHjeFzCpFPlJGhxQ) ☆☆\n- [Node.js 微服务实践](https://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==\u0026mid=2651556001\u0026idx=1\u0026sn=601d58dc247d2f9c6f239ed8d950b540\u0026chksm=80255f60b752d676860f98ae5523f018800ed91c24dd19afa1004a97a7bc114df02ca84498ca\u0026xtrack=1\u0026scene=0\u0026subscene=131\u0026clicktime=1552693183\u0026ascene=7\u0026devicetype=android-26\u0026version=2700033b\u0026nettype=cmnet\u0026abtest_cookie=BAABAAoACwASABMABQAmlx4AVpkeAMyZHgDamR4A3JkeAAAA\u0026lang=zh_CN\u0026pass_ticket=58OgcYwPpZPMoZMSeUS45Kh9d%2Fe0tCefEY4WSDl%2BzJM%3D\u0026wx_header=1) ☆☆☆\n- [如何设计微服务](https://mp.weixin.qq.com/s?__biz=MjM5MDE0Mjc4MA==\u0026mid=2651014354\u0026idx=2\u0026sn=9a356f184842908ab5004bdcfef1caac\u0026chksm=bdbebc818ac935977deb94e3f139ce12c17afc4613d5a2535ede91470d9637471c8317c53f4e\u0026mpshare=1\u0026scene=1\u0026srcid=0315aRwo0BPnixJWFnXKlR80#rd) ☆☆☆\n- [各大互联网公司架构演进之路汇总](https://mp.weixin.qq.com/s/K531MIiOWIAvy4sFcbajrQ) ☆☆☆\n- [开发十年，我是如何成长为一名优秀的架构师](https://mp.weixin.qq.com/s/8o4OwgdGwv4g5vUVj-1vfw) ☆☆☆\n- [淘宝从几百到千万级并发的十四次架构演进之路](https://mp.weixin.qq.com/s/a1xUMOOfgCMzcngQ9xNCGw) ☆☆☆\n- [设计图都不会画，还想做架构师？](https://maimai.cn/article/detail?fid=1063405301\u0026efid=yh3ExpigfgCbJagBxj6dXw) ☆☆\n- [12306的技术架构](https://mp.weixin.qq.com/s/Ty49SAs0hxpy_fbwPHBflA) ☆☆☆\n- [一文读懂架构整洁之道](https://mp.weixin.qq.com/s/XAm1MO4RQYtkj3ay-2jT7A) ☆☆☆\n- [如何推动基础架构项目落地](https://zhuanlan.zhihu.com/p/148209120?hmsr=toutiao.io\u0026utm_medium=toutiao.io\u0026utm_source=toutiao.io) ☆☆\n### AI\n- [机器学习模型一览：监督型、半监督型和无监督型](https://mp.weixin.qq.com/s/NQpB_jTl43ft7O02_EXHkw) ☆☆☆\n- [如何在 1 秒内做到大数据精准去重？](https://mp.weixin.qq.com/s/XzVT6K3B3XfgnmTVSrchiA) ☆☆☆\n- [大数据学习资源(Awesome Big Data)](https://mp.weixin.qq.com/s/wnvIADv7GXa6fFjpnzjzXQ) ☆☆☆\n- [Tensorflow.js生态](https://mp.weixin.qq.com/s/LQ8mpNc5_8pU0y9LWfQXjw) ☆☆\n\n### 面试\n- [30s 面试](https://github.com/fejes713/30-seconds-of-interviews#table-of-contents) ☆\n- [面试精选之 http 缓存](https://juejin.im/post/5b3c87386fb9a04f9a5cb037#comment) ☆☆\n- [张一鸣：10年面试2000人，我发现混的好的人，全都有同一个特质](https://mp.weixin.qq.com/s/S9_H4JXslq2_8GxEXVgg3w) ☆\n- [2019 年前端面试都聊啥](https://juejin.im/post/5bf5610be51d452a1353b08d?utm_source=gold_browser_extension) ☆☆\n- [BAT 面试总结](https://juejin.im/post/5befeb5051882511a8527dbe) ☆☆\n- [JavaScript 深入之 bind 的模拟实现](https://juejin.im/post/59093b1fa0bb9f006517b906) ☆☆\n- [前端面试官的套路，你懂吗？](http://jartto.wang/2019/01/06/f2e-interview/) ☆☆\n- [前端 100 问](https://juejin.im/post/5d23e750f265da1b855c7bbe)\n- [一个 TCP 连接上面能发多少个 HTTP 请求](https://www.toutiao.com/a6706021767074284043/?tt_from=weixin\u0026utm_campaign=client_share\u0026wxshare_count=1\u0026timestamp=1561608618\u0026app=news_article\u0026utm_source=weixin\u0026utm_medium=toutiao_ios\u0026req_id=20190627121018010027057145257B9C2\u0026group_id=6706021767074284043)\n- [彻底弄懂前端路由](https://juejin.im/post/5d2d19ccf265da1b7f29b05f?utm_source=gold_browser_extension)\n### 前端组织\n- [360奇舞团](https://75team.com/)\n- [腾讯Web前端团队（Alloy Team）](http://www.alloyteam.com/)\n- [百度Web 前端研发部（FEX）](http://fex.baidu.com/)\n- [淘宝前端团队（FED）](http://taobaofed.org/)\n- [大搜车无线团队](http://f2e.souche.com/)\n- [京东凹凸实验室](https://aotu.io/index.html)\n- [蚂蚁金服·数据体验技术团队](https://juejin.im/user/59659aff5188250cf956e6dd/posts)\n- [前端精读周刊](https://github.com/dt-fe/weekly)\n- [淘系前端团队](https://tophub.today/n/x9ozQE6eXb)\n### 学习网站\n- [Freecodecamp](https://www.freecodecamp.org/)\n- [CodePen](https://codepen.io/)\n- [算法练习](https://leetcode-cn.com/problemset/all/)\n- [Pluralsight](https://www.pluralsight.com/codeschool)\n- [Code School](https://www.codeschool.com/)\n- [慕课网](https://www.imooc.com/)\n- [妙味课堂](https://miaov.com/)\n- [百度传课](https://chuanke.baidu.com/course/_webapp_____.html)\n### 技术杂谈\n- [一个程序员的成长之路 - 剖析别人，总结自己](https://mp.weixin.qq.com/s/zWPjfHiYxx0HH9lE99Yijw) ☆☆☆ \n  \u003e 张云龙，全民直播CTO，也是个前端工程师\n- [秒杀系统优化思路](https://blog.csdn.net/csdn265/article/details/51461466) ☆☆☆\n  \u003e尽量将请求拦截在系统上游（越上游越好）, 读多写少的常用多使用缓存（缓存抗读压力）\n- [客户端高可用建设体系](https://juejin.im/post/5b10afc06fb9a01e39624d3d?utm_source=gold_browser_extension)\n  \u003e2000万日订单背后：美团外卖客户端高可用建设体系\n- [缓存架构设计](https://mp.weixin.qq.com/s/YxGeisz0L9Ja2dwsiZz01w) ☆☆☆\n  \u003e微博应对日访问量百亿级的缓存架构设\n- [前端重构方案](https://mp.weixin.qq.com/s/H9Dvm_5F8hdBrZynlNdlfw) ☆☆\n  \u003e规范、技术选型、性能优化、构建工具、开发效率\n- [Taro - 多端开发框架](https://juejin.im/entry/5b19155bf265da6e083be667?utm_source=gold_browser_extension) ☆☆\n  \u003e京东多端统一开发框架 - Taro\n- [你可能不知道的前端知识点](https://github.com/justjavac/the-front-end-knowledge-you-may-not-know) ☆☆\n- [V8 并发标记](https://mp.weixin.qq.com/s/pv_4YRo6KjLiVxLViZTr2Q) ☆☆☆\n  \u003e引擎V8推出“并发标记”，可节省60%-70%的GC时间\n- [JS 的数据结构](https://www.jianshu.com/p/5e0e8d183102) ☆☆\n  \u003e谁说前端就不需要学习数据结构了？\n- [简话开源协议](http://jartto.wang/2018/06/29/talk-about-license/) ☆\n  \u003e了解开源协议，选择最合适的协议\n- [把前端监控做到极致](https://juejin.im/entry/5b3ed06d6fb9a04fe727e671?utm_source=gold_browser_extension) ☆☆\n  \u003e从 采集、数据处理、分析、报警 4 个维度进一步阐述如何把前端监控做到极致\n- [设计一个百万级的消息推送系统](https://juejin.im/post/5ba97ff95188255c9e02d3e3) ☆☆☆\n  \u003e百万连接其实只是一个形容词，更多的是想表达如何来实现一个分布式的方案，可以灵活的水平拓展从而能支持更多的连接。\n- [蚂蚁金服核心技术：百亿特征实时推荐算法揭秘](https://mp.weixin.qq.com/s/6h9MeBs89hTtWsYSZ4pZ5g)\n  \u003e文章提出一整套创新算法与架构，通过对TensorFlow底层的弹性改造，解决了在线学习的弹性特征伸缩和稳定性问题，并以GroupLasso和特征在线频次过滤等自研算法优化了模型稀疏性\n- [前端登录，这一篇就够了](https://mp.weixin.qq.com/s?__biz=MzIxNTQ2NDExNA==\u0026mid=100000675\u0026idx=1\u0026sn=0cae464adcc549b239c28199f675e6d1\u0026chksm=1796a27e20e12b68815429681d016430fccda916c573941d9e37d9366987295ccce6394db5c7#rd)\n  \u003e文章列举了常见的登录方式，清晰易懂：Cookie + Session 登录、Token 登录、SSO 单点登录、OAuth 第三方登录\n\n\n### 优化\n- 初级 ☆\n  - 图片资源\n    - [WebP 在项目中的实践](https://www.jianshu.com/p/73ca9e8b986a)\n  - 代码合并\n  - 压缩\n  - 混淆\n  - Css sprits\n  - 减少 HTTP 请求\n  - Gzip\n    - [GZIP 的压缩原理与日常应用](https://juejin.im/post/5b793126f265da43351d5125) ☆☆☆\n  - Keep-Alive\n  - DNS\n- 中级 ☆☆\n  - [图像优化原理](https://mp.weixin.qq.com/s/7aK6D0InyJs-BXUcaormKA)\n  - [高性能网站建设的 14 个原则](http://www.cnblogs.com/mdyang/archive/2011/07/12/high-performance-web-sites.html)\n  - [Web 优化之 Request](http://jartto.wang/2018/02/09/optimise-for-web-request/)\n  - [如何优化高德地图（AMap）Marker 动画](http://jartto.wang/2017/08/28/how-to-optimize-marker-of-AMap/)\n  - [Web前端优化及工具集锦](https://www.csdn.net/article/2013-09-23/2817020-web-performance-optimization)\n  - [搜索引擎优化 SEO](https://juejin.im/post/5b163fab5188257d571f1d17?utm_source=gold_browser_extension)\n- 高级 ☆☆☆\n  - [彻底弄懂 HTTP 机制及原理](https://www.cnblogs.com/chenqf/p/6386163.html) \n  - 缓存\n    - [HTML5 离线存储](http://jartto.wang/2016/07/25/make-an-inventory-of-html5-api/)\n    - HTML 和 HTTP 头文件设置\n      - [HTTP 缓存](https://juejin.im/post/5b3c87386fb9a04f9a5cb037#comment)\n      - [Meta](http://laoono.com/2016-05/html-meta-cache.html)\n      - Expires\n      - Cache-Control\n      - Last-Modified / If-Modified-Since\n      - Etag / If-None-Match\n    - Nginx 缓存\n    - [关键路径渲染优化](https://juejin.im/entry/5b16a05fe51d4506b01106d9)\n    - [关键渲染路径](https://juejin.im/post/5c3333036fb9a049f1545d27)\n    - [前端性能优化——关键渲染路径](https://segmentfault.com/a/1190000013767948) 👍\n    - Storage\n    - [indexedDB](https://blog.csdn.net/inter_peng/article/details/49133081)\n    - [浏览器存储之争](http://jartto.wang/2018/12/02/indexeddb/)\n    - [Service Worker](https://www.jianshu.com/p/62338c038c42)\n    - [从性能优化的角度看缓存](https://github.com/amandakelake/blog/issues/43)\n    - [聊一聊浏览器缓存机制](http://jartto.wang/2019/02/14/web-cache/)\n    - [浏览器缓存机制：强缓存、协商缓存](https://github.com/amandakelake/blog/issues/41)\n    - [数据存储：cookie、Storage、indexedDB](https://github.com/amandakelake/blog/issues/13)\n    - [离线应用缓存：App Cache =\u003e Manifest](https://github.com/amandakelake/blog/issues/15)\n  - 服务端缓存\n    - [缓存、队列（Memcached、redis、RabbitMQ）](https://www.cnblogs.com/suoning/archive/2016/08/31/5807247.html)\n    - [缓存技术的详解](https://blog.csdn.net/qq_26517369/article/details/78330694)\n    - [缓存淘汰算法--LRU算法](https://www.evernote.com/l/AUQTo7s_NytKk6mAlbTMIlpGo4NyfB1530A)\n- 扩展\n  - [网站性能优化实战——从 12.67s 到 1.06s 的故事](https://juejin.im/post/5b0b7d74518825158e173a0c) ☆\n  - [用 100 行代码提升 10 倍的性能](https://juejin.im/post/5bec223f5188250c102116b5) ☆☆\n  - [美团网页首帧优化实践](https://juejin.im/post/5bee7dd4e51d451f5b54cbb4) ☆☆\n  - [前端性能提升秘笈！](http://rdc.hundsun.com/portal/article/942.html) ☆☆\n  - [网站优化实战](http://jartto.wang/2019/02/16/web-optimization/) ☆☆☆\n  - [百度APP-Android H5首屏优化实践](https://mp.weixin.qq.com/s/AqQgDB-0dUp2ScLkqxbLZg) ☆☆☆\n  - [VasSonic，让你的 H5 页面首屏秒开](https://my.oschina.net/u/3447988/blog/1512025) ☆☆☆\n  - [Lazy Loading Video Based on Connection Speed](https://medium.com/dailyjs/lazy-loading-video-based-on-connection-speed-e2de086f9095) ☆☆☆\n  - [WebView性能、体验分析与优化](https://tech.meituan.com/2017/06/09/webviewperf.html) ☆☆ \n  - [移动 H5 首屏秒开优化方案探讨](http://blog.cnbang.net/tech/3477/) ☆☆\n  - [手机QQ Hybrid 的架构如何优化演进](https://mp.weixin.qq.com/s/evzDnTsHrAr2b9jcevwBzA) ☆☆☆\n  - [高性能渲染十万条数据(虚拟列表)](https://juejin.im/post/5db684ddf265da4d495c40e5?utm_source=gold_browser_extension) ☆☆\n  - [网站性能指标 - FMP](http://jartto.wang/2020/03/15/about-web-fmp/) ☆☆\n  - [聚焦 Web 性能指标 TTI](http://jartto.wang/2020/03/29/web-tti/) ☆☆\n- 工具\n  - [YSlow](http://yslow.org)\n  - Performance\n  - [Google PageSpeed](https://developers.google.com/speed/pagespeed/)\n  - LightHouse\n\n### Web 服务器端\n- [Nodejs](https://nodejs.org/en/)\n  - 基础 web 框架\n    - [Express](http://www.expressjs.com.cn/) ☆\n    - [Koa](https://koajs.com/)\n      - [阮一峰 Koa 入门教程](http://www.ruanyifeng.com/blog/2017/08/koa.html) ☆\n      - [kick-off-koa](https://github.com/koajs/kick-off-koa) ☆\n      - [koajs examples](https://github.com/koajs/examples) ☆☆\n      - [koa workshop](https://github.com/koajs/workshop) ☆☆\n    - [hapijs](https://hapijs.com/) ☆☆\n    - [restify](http://restify.com/)\n    - [fastify](https://www.fastify.io/)\n    - [thinkjs](https://thinkjs.org/zh-cn/doc/2.2/module.html)\n    - [nextjs](https://zeit.co/blog/next) ☆☆  \n  - node中比较棘手的问题\n    - node内存泄漏排查\n    - node错误处理机制\n    - node.js cluster\n      - [PM2 初体验](http://jartto.wang/2016/06/27/first-experience-of-pm2/) ☆\n      - Forever ☆☆\n  - 高度集成 web 框架\n    - [egg](http://eggjs.org/) ☆☆☆\n    - [nest](https://nestjs.com/) \n    - [thinkjs](https://thinkjs.org/)\n    - [loopback](https://loopback.io/)\n    - [sails](https://sailsjs.com/) ☆☆\n    - nohup ☆☆\n    - Nodejs 事件循环机制: 结合[libuv](http://docs.libuv.org/en/v1.x/design.html)和 nodejs 官网的[blog](https://nodejs.org/en/docs/guides/event-loop-timers-and-nexttick/)\n    - [剖析 nodejs 的事件循环](https://juejin.im/post/5af1413ef265da0b851cce80?utm_source=gold_browser_extension)\n    - [Stream](https://github.com/substack/stream-handbook) ☆☆\n    - [Buffer](https://nodejs.org/api/buffer.html) ☆☆\n    - [多进程](https://nodejs.org/dist/latest-v8.x/docs/api/cluster.html) ☆☆\n    - [eleme node-interview](https://elemefe.github.io/node-interview/#/sections/zh-cn/) ☆☆☆\n    - [node debug](https://github.com/nswbmw/node-in-debugging) ☆☆\n    - 内存相关 ☆☆☆\n    - [js snapshot 相关](http://hello2dj.com/2018/03/05/heapdump%E8%A7%A3%E6%9E%90/) ☆☆☆\n    - [node技术进阶与实践](https://www.evernote.com/l/AURoreJGCE5F8pV7a6YwRrDBJ-gOohmRdhI) ☆☆☆\n- [deno](https://github.com/ry/deno) ☆☆\n- [nexus 搭建 npm 私服](https://www.jianshu.com/p/9085f47726a2) ☆☆☆\n- [Nginx](https://github.com/nginx/nginx) ☆☆☆\n- [nodejs 结合 dubbo 服务 node-zookeeper-dubbo](https://segmentfault.com/a/1190000013145761) ☆☆☆\n- [thrifty -\u003e nodejs实例](http://thrift.apache.org/tutorial/nodejs) ☆☆\n- [nodejs-learning-guide](https://github.com/chyingp/nodejs-learning-guide) ☆☆☆\n- [互联网架构为什么要做服务化？](http://www.open-open.com/lib/view/open1472132696878.html)☆☆\n- [什么是微服务](https://blog.csdn.net/wuxiaobingandbob/article/details/78642020?locationNum=1\u0026fps=1)\n- [服务化架构的演进与实践](https://blog.csdn.net/liubenlong007/article/details/54692241)☆☆\n- [服务化实战之 dubbo、dubbox、motan、thrift、grpc等RPC框架比较及选型](https://blog.csdn.net/liubenlong007/article/details/54692241)☆☆\n- [Nodejs 最佳实践](https://github.com/i0natan/nodebestpractices?utm_source=gold_browser_extension) ☆☆☆\n- [技术栈：为什么 Node 是前端团队的核心技术栈](https://mp.weixin.qq.com/s/dA6M1t957G-nZ-Ir80L1kA) ☆☆☆\n\n### Serverless\n- [Serverless 入门](https://mp.weixin.qq.com/s?__biz=MzA4ODUzNTE2Nw==\u0026mid=2451046912\u0026idx=1\u0026sn=fc7f97c007e325f553e158fee703178f\u0026chksm=87c41b10b0b39206bcc9cff2332fb2e5003ebd1b50d12ccd72585ffc256e98cac7ea878f064c\u0026mpshare=1\u0026scene=1\u0026srcid=\u0026sharer_sharetime=1587861292401\u0026sharer_shareid=93284882dc8dd6a2672e2f228c47df4e#rd) ☆☆\n- [Serverless 掀起新的前端技术变革](https://github.com/nodejh/nodejh.github.io/issues/49) ☆☆☆\n- [当 SSR 遇上 Serverless，轻松实现页面瞬开](https://fed.taobao.org/blog/taofed/do71ct/rax-ssr-serverless-quicker) ☆☆\n- [阿里自研开源框架 Midway Serverless](https://mp.weixin.qq.com/s/5l4xLdTefz8G8EbZNbon0Q) ☆☆☆\n### 源码学习\n- [Lodash 源码分析（一）“Function” Methods](https://segmentfault.com/a/1190000010775719) ☆☆☆\n- [Webpack 源码](https://github.com/youngwind/blog/issues/99) ☆☆☆\n- [React 源码剖析系列 － 不可思议的 react diff](https://zhuanlan.zhihu.com/p/20346379) ☆☆☆\n- [React 源码解析](https://juejin.im/post/5a84682ef265da4e83266cc4#comment) ☆☆☆\n- [逐行阅读 Redux 源码](https://juejin.im/post/5be42fc2e51d451c6a14ce2b) ☆☆\n- [解密 JQuery](http://www.cnblogs.com/aaronjs/p/3444874.html) ☆☆☆\n- [Promise 的实现及解析](https://juejin.im/post/5ab466a35188257b1c7523d2) ☆☆☆\n- [浅析 Redux-Saga 实现原理](https://juejin.im/post/59e083c8f265da43111f3a1f) ☆☆☆\n- [Antd 源码解读](https://juejin.im/post/5a5b6d3c51882573473db9af) ☆☆☆\n- [Vue.js 源码解析](https://github.com/answershuto/learnVue) ☆☆☆\n- [自己动手做一个 Vue](https://github.com/fastCreator/MVVM) ☆☆☆\n- [vue-come-true](https://github.com/coderzzp/vue-come-true) ☆☆☆\n- [Vue.js 源码学习笔记](http://jiongks.name/blog/vue-code-review/) ☆☆☆\n- [高效阅读 Github 源代码](https://juejin.im/entry/5ae731f6f265da0b7e0c0ccb?utm_source=gold_browser_extension) ☆\n- [从头实现一个 koa 框架](https://zhuanlan.zhihu.com/p/35040744) ☆☆☆\n### DevOps\n- [为什么一定要从 DevOps 走向 BizDevOps？](https://mp.weixin.qq.com/s/EYU6oaz-EymVRmq5LmbOag) ☆☆\n\n### Web3.0\n- [Web 3.0的范式、技术和生态 ](https://imzhanghao.com/2022/04/16/web3/#)\n\n### Rust\n- [Rust 相关资源](https://github.com/chenfengyanyu/my-rust-practice/tree/main/rust_source)：定期收集 Rust 最新资源\n- [rustlings](https://github.com/rust-lang/rustlings)：这个项目包含小练习，让你习惯阅读和编写 Rust 代码。\n- [Rust Web全栈开发](https://www.bilibili.com/video/BV1RP4y1G7KF/?p=1\u0026spm_id_from=pageDriver)：杨旭教学视频\n- [Awesome Rust](https://github.com/rust-unofficial/awesome-rust) ：Rust 代码和资源的精选列表\n- [Comprehensive Rust](https://github.com/google/comprehensive-rust)： Google 打造的 Android 系列课\n- [Book|The Rust Programming Language](https://github.com/rust-lang/book)：\"The Rust Programming Language\"\n\n\n","projects_url":"https://awesome.ecosyste.ms/api/v1/lists/f2e-awesome%2Fknowledge/projects"}