# knowledge **Repository Path**: yuanyuanjun/knowledge ## Basic Information - **Project Name**: knowledge - **Description**: 文档着重构建一个完整的「前端技术架构图谱」，方便 F2E 学习与进阶。 - **Primary Language**: HTML - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 2 - **Forks**: 0 - **Created**: 2018-08-13 - **Last Updated**: 2025-03-24 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 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&label=Star)](https://github.com/f2e-awesome/knowledge/stargazers) [![GitHub forks](https://img.shields.io/github/forks/f2e-awesome/knowledge.svg?style=flat&label=Fork)](https://github.com/f2e-awesome/knowledge/fork) [![GitHub watchers](https://img.shields.io/github/watchers/f2e-awesome/knowledge.svg?style=flat&label=Watch)](https://github.com/f2e-awesome/knowledge/watchers) ![Tags](https://github.com/f2e-awesome/knowledge/blob/master/img/tags.jpg) - 更新时间：2018-06-12 - 难度等级：☆ 为初级，☆☆ 为中级，☆☆☆ 为高级。 - 标签体系：[HMTL5](#html5)、[CSS](#css)、[JS](#js)、[产品设计](#产品设计)、[移动端](#移动端)、[PWA](#pwa)、[WebAssembly](#webassembly)、[小程序](#小程序)、[Canvas](#canvas)、[WebGL](#webgl)、[SVG](#svg)、[动画](#动画)、[模块化编程](#模块化编程)、[源码学习](#源码学习)、[算法](#算法)、[数据结构](#数据结构)、[主流框架](#主流框架)、[Nodejs](#nodejs)、[Python](#python)、[设计模式](#设计模式)、[网络协议](#网络协议)、[函数式编程](#函数式编程)、[优化](#优化)、[DOM](#dom)、[缓存](#缓存)、[跨域](#跨域)、[事件模型](#事件模型)、[安全](#安全)、[打包构建](#打包构建)、[Git](#git)、[代码规范](#代码规范)、[Nginx](#nginx)、[DNS](#dns)、[CDN](#cdn)、[V8 引擎](#v8-引擎)、[Linux](#linux)、[Electron](#electron)、[抓包工具](#抓包工具)、[测试](#测试)、[部署](#部署)、[浏览器](#浏览器)、[数据可视化](#数据可视化)、[物联网](#物联网)、[技术杂谈](#技术杂谈)、[面试](#面试) ### HTML5 - 初级 ☆ - 语义化 - Audio 和 Video - Web Storage - 中级 ☆☆ - 离线存储 - 地理定位 - [WebSocket](https://github.com/Pines-Cheng/blog/issues/37) - [HTML5 摄像头](http://jartto.wang/2017/11/28/h5-user-media/) - [HTML5 全屏](http://jartto.wang/2017/06/25/h5-fullscreen-api/) - [HTML5 拖放实现](http://jartto.wang/2017/10/23/html5-drag/) - [HTML5 全屏滑动组件](http://kele527.github.io/iSlider/) - 高级 ☆☆☆ - Communication - Web Worker - requestAnimationFrame - requestIdleCallback - 扩展 - [HTML5 API 大盘点](http://jartto.wang/2016/07/25/make-an-inventory-of-html5-api/) ☆☆ ### CSS - 初级 ☆ - [CSS 实用概要](http://jartto.wang/2018/03/06/outline-of-css/) - [CSS 实用 Tips](http://jartto.wang/2017/11/12/f2e-tips/) - [CSS 三大特性](http://jartto.wang/2017/02/08/css-features/) - 盒模型 - box-sizing - IconFont - 中级 ☆☆ - [BFC](https://zhuanlan.zhihu.com/p/25321647) - Flex - Grid layout - PostCSS - 预编译 - SASS - LESS - Stylus - CSS3 动画 - [Animate CSS](https://daneden.github.io/animate.css/?) - [All Animation CSS3](http://all-animation.github.io/) - Transform - Translate - [如何检测页面滚动并执行动画](http://jartto.wang/2016/08/18/detect-page-scroll-and-execute-animation/) - 高级 ☆☆☆ - CSS4 - CSS3 动画原理 - [探究 CSS 解析原理](http://jartto.wang/2017/11/13/Exploring-the-principle-of-CSS-parsing/) - [详谈层合成（composite）](http://jartto.wang/2017/09/29/expand-on-performance-composite/) - [CSS Modules 使用详解](https://blog.csdn.net/xiangzhihong8/article/details/53195926) - 扩展 - [30s CSS](https://atomiks.github.io/30-seconds-of-css/) ☆ ### JS - 初级 ☆ - 原型与原型链 - 作用域与作用域链 - [Event Loop](https://juejin.im/post/59e85eebf265da430d571f89) - [反思闭包](http://jartto.wang/2017/12/18/reflective-closure/) - [call 和 apply](http://jartto.wang/2016/06/28/appreciation-of-the-call-and-apply/) - [正则表达式](http://jartto.wang/2016/07/03/js-regular-expression/) - [XHR or Fetch API ?](http://jartto.wang/2017/01/17/xhr-or-fetch-api/) - [为什么要有 ES6](https://github.com/jeyvie/thoughts/blob/master/docs/why_es6.md) - [introduction to ES6 by example](http://coenraets.org/present/es6/#0) - [ES6 标准入门](http://www.waibo.wang/bible/es6/) - [ECMAScript 6 - 阮一峰](http://javascript.ruanyifeng.com/advanced/ecmascript6.html#) - 中级 ☆☆ - [JS 模板引擎](http://jartto.wang/2016/09/15/grasp-a-js-template-engine/) - 垃圾回收 - 堆和栈 - 继承 - [掌握 JS Stack Trace](http://jartto.wang/2017/12/09/grasp-js-stack-trace/) - [ES6](http://es6.ruanyifeng.com) - [Generator](https://github.com/jeyvie/understanding-ES6/blob/master/docs/8.1_iterator_generator_base.md) - [Promise](https://github.com/jeyvie/understanding-ES6/blob/master/docs/11.Promise.md) - [Module](https://github.com/jeyvie/understanding-ES6/blob/master/docs/13.module.md) - [Class](https://github.com/jeyvie/understanding-ES6/blob/master/docs/9.class.md) - 高级 ☆☆☆ - [TypeScript](https://www.tslang.cn) - You-Dont-Know-JS - [Up & Going](https://github.com/getify/You-Dont-Know-JS/blob/master/up%20&%20going/README.md#you-dont-know-js-up--going) - [Scope & Closures](https://github.com/getify/You-Dont-Know-JS/blob/master/scope%20&%20closures/README.md#you-dont-know-js-scope--closures) - [this & Object Prototypes](https://github.com/getify/You-Dont-Know-JS/blob/master/this%20&%20object%20prototypes/README.md#you-dont-know-js-this--object-prototypes) - [Types & Grammar](https://github.com/getify/You-Dont-Know-JS/blob/master/types%20&%20grammar/README.md#you-dont-know-js-types--grammar) - [Async & Performance](https://github.com/getify/You-Dont-Know-JS/blob/master/async%20&%20performance/README.md#you-dont-know-js-async--performance) - [ES6 & Beyond](https://github.com/getify/You-Dont-Know-JS/blob/master/es6%20&%20beyond/README.md#you-dont-know-js-es6--beyond) - [exploring ES6](http://exploringjs.com/es6/) - JavaScript 如何工作 - [对引擎、运行时、调用堆栈的概述](https://juejin.im/post/5a05b4576fb9a04519690d42) - [在 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) - [内存管理 + 处理常见的4种内存泄漏](https://github.com/xitu/gold-miner/blob/master/TODO/how-javascript-works-memory-management-how-to-handle-4-common-memory-leaks.md) - [事件循环和异步编程的崛起 + 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) - [深入剖析 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) - [对比 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) - [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) - 扩展 - [何谓 JS 挖矿](http://jartto.wang/2017/11/08/js-dig-ore/) ☆ - [30S JS](https://github.com/Chalarangelo/30-seconds-of-code) ☆☆ ### 主流框架 - Angular - [依赖注入](http://jartto.wang/2014/04/24/angularjs-part-7/) ☆ - [指令 Directive](http://jartto.wang/2014/04/28/angularjs-part-9/) ☆☆ - [剖析 Angularjs 语法](http://jartto.wang/2018/02/01/analysis-of-angularjs/) ☆☆ - [Vue](https://cn.vuejs.org/) - [Mint-UI](http://mint-ui.github.io/#!/zh-cn) ☆ - [Element.UI](http://element.eleme.io/#/zh-CN/guide/design) ☆ - [VUE2](https://cn.vuejs.org/v2/guide/) ☆☆ - [VUEX](https://vuex.vuejs.org/) ☆☆ - Axios ☆ - Vue-Router - [Vue-Router 实现原理](https://juejin.im/post/5b10b46df265da6e2a08a724?utm_source=gold_browser_extension) ☆☆☆ - Vue-Loader ☆☆ - [Vue.js 技术揭秘](https://ustbhuangyi.github.io/vue-analysis/) ☆☆☆ - React - [Ant Design](http://jartto.wang/2016/12/14/together-to-learn-ant-design-of-react/) ☆☆ - 虚拟 Dom ☆☆ - Diff 算法 ☆☆☆ - create-react-app ☆☆ - Dva ☆☆ - [探路 Roadhog](http://jartto.wang/2017/04/25/gating-roadhog/) ☆☆ - Redux ☆☆ - Redux-Saga ☆☆☆ - TakeLatest ☆☆☆ - [React 16 新特性](https://baijiahao.baidu.com/s?id=1582848543674223747&wfr=spider&for=pc) ☆☆ - React-Router@4 ☆☆ - [React 性能优化](http://www.css88.com/react/docs/optimizing-performance.html) ☆☆☆ - [UmiJS](http://jartto.wang/2018/05/24/taste-of-umi/) ☆☆ - Next.js ☆☆ - [Next.js 使用指南1－基本规则](http://jartto.wang/2018/05/27/nextjs-1/) - [Next.js 使用指南2－路由与加载](http://jartto.wang/2018/06/01/nextjs-2/) - [Next.js 使用指南3－高级配置](http://jartto.wang/2018/06/08/nextjs-3/) ### 优化 - 初级 ☆ - 合并 - 压缩 - 混淆 - Css sprits - 减少 HTTP 请求 - Gzip - Keep-Alive - DNS - 中级 ☆☆ - [高性能网站建设的 14 个原则](http://www.cnblogs.com/mdyang/archive/2011/07/12/high-performance-web-sites.html) - [Web 优化之 Request](http://jartto.wang/2018/02/09/optimise-for-web-request/) - [如何优化高德地图（AMap）Marker 动画](http://jartto.wang/2017/08/28/how-to-optimize-marker-of-AMap/) - [网站性能优化实战——从 12.67s 到 1.06s 的故事](https://juejin.im/post/5b0b7d74518825158e173a0c) - [Web前端优化及工具集锦](https://www.csdn.net/article/2013-09-23/2817020-web-performance-optimization) - [搜索引擎优化 SEO](https://juejin.im/post/5b163fab5188257d571f1d17?utm_source=gold_browser_extension) - 高级 ☆☆☆ - [彻底弄懂 HTTP 缓存机制及原理](https://www.cnblogs.com/chenqf/p/6386163.html) - 缓存 - [HTML5 离线存储](http://jartto.wang/2016/07/25/make-an-inventory-of-html5-api/) - HTML 和 HTTP 头文件设置 - [Meta](http://laoono.com/2016-05/html-meta-cache.html) - Expires - Last-Modified / If-Modified-Since - Etag / If-None-Match - Nginx 缓存 - [关键路径渲染优化](https://juejin.im/entry/5b16a05fe51d4506b01106d9) - 工具 - [YSlow](http://yslow.org) - Performance - [Google PageSpeed](https://developers.google.com/speed/pagespeed/) ### Web服务器端 - [Nodejs](https://nodejs.org/en/) - 基础 web 框架 - [Express](http://www.expressjs.com.cn/) ☆☆ - [Koa](https://koajs.com/) ☆☆ - [hapijs](https://hapijs.com/) ☆☆ - [restify](http://restify.com/) - [fastify](https://www.fastify.io/) - [thinkjs](https://thinkjs.org/zh-cn/doc/2.2/module.html) - [nextjs](https://zeit.co/blog/next) ☆☆ - 高度集成 web 框架 - [egg](http://eggjs.org/) ☆☆☆ - [nest](https://nestjs.com/) - [thinkjs](https://thinkjs.org/) - [loopback](https://loopback.io/) - [sails](https://sailsjs.com/) ☆☆ - [PM2 初体验](http://jartto.wang/2016/06/27/first-experience-of-pm2/) ☆ - Forever ☆☆ - nohup ☆☆ - Nodejs 事件循环机制: 结合[libuv](http://docs.libuv.org/en/v1.x/design.html)和 nodejs 官网的[blog](https://nodejs.org/en/docs/guides/event-loop-timers-and-nexttick/) - [Stream](https://github.com/substack/stream-handbook) ☆☆ - [Buffer](https://nodejs.org/api/buffer.html) ☆☆ - [多进程](https://nodejs.org/dist/latest-v8.x/docs/api/cluster.html) ☆☆ - [eleme node-interview](https://elemefe.github.io/node-interview/#/sections/zh-cn/) ☆☆☆ - [node debug](https://github.com/nswbmw/node-in-debugging) ☆☆ - 内存相关 ☆☆☆ - [js snapshot 相关](http://hello2dj.com/2018/03/05/heapdump%E8%A7%A3%E6%9E%90/) ☆☆☆ - [deno](https://github.com/ry/deno) ☆☆ - [nexus 搭建 npm 私服](https://www.jianshu.com/p/9085f47726a2) ☆☆☆ - [Nginx](https://github.com/nginx/nginx) ☆☆☆ - 消息队列 ☆☆☆ - [nodejs 结合 dubbo 服务 node-zookeeper-dubbo](https://segmentfault.com/a/1190000013145761) ☆☆☆ - [thrifty -> nodejs实例](http://thrift.apache.org/tutorial/nodejs) ☆☆ - [nodejs-learning-guide](https://github.com/chyingp/nodejs-learning-guide) ☆☆☆ ### 源码学习 - [Lodash 源码分析（一）“Function” Methods](https://segmentfault.com/a/1190000010775719) ☆☆☆ - [Webpack 源码](https://github.com/youngwind/blog/issues/99) ☆☆☆ - [React 源码剖析系列 － 不可思议的 react diff](https://zhuanlan.zhihu.com/p/20346379) ☆☆☆ - [React 源码解析](https://juejin.im/post/5a84682ef265da4e83266cc4#comment) ☆☆☆ - [解密 JQuery](http://www.cnblogs.com/aaronjs/p/3444874.html) ☆☆☆ - [Promise 的实现及解析](https://juejin.im/post/5ab466a35188257b1c7523d2) ☆☆☆ - [浅析 Redux-Saga 实现原理](https://juejin.im/post/59e083c8f265da43111f3a1f) ☆☆☆ - [Antd 源码解读](https://juejin.im/post/5a5b6d3c51882573473db9af) ☆☆☆ - [自己动手做一个 Vue](https://github.com/fastCreator/MVVM) ☆☆☆ - [vue-come-true](https://github.com/coderzzp/vue-come-true) ☆☆☆ - [Vue.js 源码学习笔记](http://jiongks.name/blog/vue-code-review/) ☆☆☆ - [高效阅读 Github 源代码](https://juejin.im/entry/5ae731f6f265da0b7e0c0ccb?utm_source=gold_browser_extension) ☆ - [从头实现一个 koa 框架](https://zhuanlan.zhihu.com/p/35040744) ☆☆☆ ### 产品设计 - 软件 - PS ☆ - AI ☆ - [精品 MAC 应用分享](http://xclient.info/?t=b4b436fb1b66a3542c9e25e85d474bd51998960d) ☆ - 视觉网站 - [Behance](https://www.behance.net/) ☆☆ - [Dribbble](https://dribbble.com/) ☆☆ - 原型工具 - Axure ☆ - [Sketch](http://www.sketchcn.com/sketch-chinese-user-manual.html) ☆ ### 前端类库 - JS 类库 - [jQuery](http://api.jquery.com/) ☆ - [zepto](http://www.zeptojs.cn/) ☆ - [underscore](http://www.css88.com/doc/underscore/) ☆☆ - [lodash](https://www.lodashjs.com/) ☆☆ - UI 库 - [Bulma](https://bulma.io/) - [EasyUI](http://www.jeasyui.net/) ☆ - [Bootstrap](http://www.bootcss.com/) ☆ - [Meterial Design](https://material.io) ☆☆ - [Wired Elements(手绘风格 UI 库)](https://juejin.im/entry/5b1dd2b2f265da6e0f70b7e1?utm_source=gold_browser_extension) ### 移动端 - Native App - [React Native](https://facebook.github.io/react-native/) ☆☆ - [Weex](http://weex.apache.org) ☆☆ - [NativeScript](https://www.nativescript.org/) - Hybird App - Ionic ☆☆ - Cordova ☆☆ - Phonegap ☆☆ - Web App ☆ - 响应式布局 - rem ☆ - webview - 页面通信 ☆ - 原理 ☆☆ - [关于 Hbuilder](http://jartto.wang/2015/02/13/about-hbuilder/) ☆ - [移动端 Touchend 事件不触发解决方案](http://jartto.wang/2015/06/25/solutions-to-touchend-on-mobile/) ☆ ### PWA - [官网](https://developers.google.com/web/progressive-web-apps/) ☆☆ - [第一本 PWA 中文书](https://juejin.im/entry/5a1c394a5188255851326da5) ☆☆ - [PWA（Progressive Web App）初探总结](https://blog.csdn.net/qq_19238139/article/details/77531191) ☆ - [讲讲 PWA](https://segmentfault.com/a/1190000012353473) - [React 同构应用 PWA 升级指南](https://github.com/happylindz/blog/issues/14?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io) ☆ ### WebAssembly - [WebAssembly，Web 的新时代](http://blog.csdn.net/zhangzq86/article/details/61195685) ☆☆ - [来谈谈 WebAssembly 是个啥？为何说它会影响每一个 Web 开发者？](http://blog.csdn.net/wulixiaoxiao1/article/details/60581397) ☆ - [WebAssembly 系列（四）WebAssembly 工作原理](https://segmentfault.com/a/1190000008686643) ☆☆☆ - [如何评论浏览器最新的 WebAssembly 字节码技术？](https://www.zhihu.com/question/31415286) ☆☆ ### 小程序 - [快速上手小程序](http://jartto.wang/2018/01/25/quick-start-mini-programs/) ☆☆ - [细数小程序的坑](http://jartto.wang/2018/02/08/count-pit-of-mini-programs/) ☆☆ - [小程序开发 Tips](http://jartto.wang/2018/03/06/tips-of-mini-programs/) ☆☆ ### Canvas - [Canvas 实现单机版贪吃蛇](https://juejin.im/post/5b115c54f265da6e65165aef?utm_source=gold_browser_extension) ☆☆☆ ### WebGL - [WebGL技术储备](http://taobaofed.org/blog/2015/12/21/webgl-handbook/) ☆☆ - [WebGL的实际使用](http://taobaofed.org/blog/2018/05/07/optimizing-page-performance-with-shader/) ☆☆ - [WebGL 3D版俄罗斯方块](http://www.cnblogs.com/xhload3d/p/9098386.html) ☆☆☆ ### SVG - [走进 SVG ](http://jartto.wang/2016/09/10/step-in-svg/) ☆☆ - [SVG 类库 snap.svg.js](http://snapsvg.io/) ☆☆ ### graphql - [graphql](https://graphql.cn/) - [apollo](https://www.apollographql.com/) - [apollo-blog](https://dev-blog.apollodata.com/) 需要翻墙 ### 模块化编程 - [CMD](https://github.com/seajs/seajs/issues/242) ☆ - [SeaJS](http://yslove.net/seajs/) ☆ - [AMD](https://github.com/amdjs/amdjs-api/wiki/AMD) ☆ - [Requirejs](http://requirejs.org/docs/optimization.html) ☆ - [JS 模块化编程之彻底弄懂 CommonJS 和 AMD/CMD！](https://www.cnblogs.com/chenguangliang/p/5856701.html) ☆ - [AMD 和 CMD 的区别有哪些？](https://www.zhihu.com/question/20351507) ☆ ### 算法 - [初探加密算法](http://jartto.wang/2017/12/03/exploration-the-encryption/) ☆☆☆ - [算法分析](https://pan.baidu.com/s/1bYfdZx3o5vL6MRyCit8P8w) 密码: as75 ☆☆☆ - [程序员实用算法](https://pan.baidu.com/s/1O3iGlPfW-REEW6yRTKw9oQ) 密码: mmap ☆☆☆ - 对称加密 - DES ☆☆☆ - 3DES ☆☆☆ - TDEA ☆☆☆ - Blowfish ☆☆☆ - RC2 ☆☆☆ - RC4 ☆☆☆ - RC5 ☆☆☆ - IDEA ☆☆☆ - SKIPJACK ☆☆☆ - AES ☆☆☆ - 非对称加密 - RSA ☆☆☆ - ECC（移动设备用） ☆☆☆ - Diffie-Hellman ☆☆☆ - El Gamal ☆☆☆ - DSA（数字签名用） ☆☆☆ - Hash 加密 - MD2 ☆☆☆ - MD4 ☆☆☆ - MD5 ☆☆☆ - HAVAL ☆☆☆ - SHA ☆☆☆ ### 数据结构 - 数组 ☆ - 栈 ☆ - 队列 ☆ - 链表 ☆☆ - 树 - 二叉树 ☆☆☆ - 图 ☆☆☆ - 堆 ☆☆☆ - 散列表 ☆☆☆ - 链表 - 单向链表 ☆☆☆ - 双向链表 ☆☆☆ - 环链表 ☆☆☆ - - ... ### 数据库 - MySQL ☆☆☆ - Redis ☆☆☆ - Memcached ☆☆☆ ### 包管理 - npm ☆ - cnpm ☆ - yarn ☆ - homebrew ☆ - bower ☆ ### Python - 初级 ☆ - [Python 入门指南](http://www.runoob.com/manual/pythontutorial/docs/html/) - [Python 官方文档](https://www.python.org/) - 中级 ☆☆ - [30s Python](http://python.kriadmin.me/) - [爬虫](https://github.com/facert/awesome-spider) - [Scrapy](http://scrapy-chs.readthedocs.io/zh_CN/0.24/intro/overview.html) - Web 框架 - Tornado - Jinja2 - Flask - Django - 高级 ☆☆☆ - [Cook Book](http://python3-cookbook.readthedocs.io/zh_CN/latest/) - 分布式 - Celery - 移动端 - Kivy - 数据分析 - Pandas - 可视化 - Matplotlib - Seaborn - Plotly - Bokeh - 机器学习 - Tensorflow - PyTorch - MxNet ### 设计模式 - 单例模式 ☆ - 简单工厂模式 ☆ - 观察者模式 ☆ - 适配器模式 ☆☆ - 代理模式 ☆☆ - 桥接模式 - 外观模式 - 访问者模式 - 策略模式 - 模版方法模式 - 中介者模式 - 迭代器模式 - 备忘录模式 - 职责链模式 - 享元模式 - 状态模式 - [常用的 Javascript 设计模式](http://blog.jobbole.com/29454/) ### 网络协议 - TCP ☆☆☆ - UDP ☆☆☆ - [HTTP 协议入门](http://jartto.wang/2016/08/04/Rudimentary-http-protocol/) ☆ - [HTTP2](http://jartto.wang/2018/03/30/grasp-http2-0/) ☆☆☆ - HTTPS ☆☆☆ - 计算机网络的 7 层协议 ☆☆☆ ### 函数式编程 - [什么是函数式编程思维？](https://www.zhihu.com/question/28292740) ☆☆☆ - [我眼中的 JavaScript 函数式编程](http://taobaofed.org/blog/2017/03/16/javascript-functional-programing/) ☆☆☆ - 参数个数 Arity - 高阶组件 Higher-Order Functions (HOF) - 偏应用函数 Partial Application - 柯里化 Currying - 闭包 Closure - 自动柯里化 Auto Currying - 函数合成 Function Composition - Continuation - 纯函数 Purity - 副作用 Side effects - 幂等 Idempotent - Point-Free Style - 断言 Predicate - 约定 Contracts - 范畴 Category - [JavaScript 函数式编程术语大全](http://www.css88.com/archives/7833) - ... ### DOM - [JavaScript HTML DOM](http://www.w3school.com.cn/js/js_htmldom.asp) ☆☆ ### 跨域 - [JSONP](https://www.zhihu.com/question/19966531) ☆☆ - [CORS](http://jartto.wang/2016/06/27/solutions-to-CORS/) ☆☆ - [Nginx](http://www.nginx.cn/4592.html) ☆☆ ### 事件模型 - 观察者模式 ☆☆ - DOM0 级模型 ☆☆ - IE 事件模型 ☆☆ - DOM2 级模型 ☆☆ - JQuery Event 模型 ☆☆ - [JS 事件模型](https://segmentfault.com/a/1190000006934031) ☆☆ ### 安全 - [Web 安全之 XSS 和 CSRF](http://jartto.wang/2017/12/15/xss-and-csrf/) ☆☆☆ - [Web 安全的三个攻防姿势](https://juejin.im/post/59e6b21bf265da43247f861d) ☆☆☆ - [XSS 的原理分析与解剖](http://netsecurity.51cto.com/art/201408/448305_all.htm) ☆☆☆ - [对于 XSS 和 CSRF 你究竟了解多少](http://netsecurity.51cto.com/art/201407/446775.htm) ☆☆☆ - [CSRF 攻击的应对之道](https://www.ibm.com/developerworks/cn/web/1102_niugang_csrf/) ☆☆☆ - SQL 注入 ☆☆☆ - HTTPS ☆☆☆ - 内网渗透 ☆☆☆ - DDos 攻击 ☆☆☆ - 点击劫持 ☆☆ - Session 劫持 ☆☆ - 短信接口攻击 ☆☆ ### Git - [Git 学习资源汇总](http://jartto.wang/2015/09/08/summarize-the-git/) ☆ - [Git 常规操作](http://jartto.wang/2017/12/01/git-common-operate/) ☆ - [如何配置 Git 对应多个 Repository](http://jartto.wang/2017/12/19/one-git-for-more-repository/) ☆ - [Git 实践系列一：初探](http://jartto.wang/2015/09/07/git-part-1/) ☆ ### 代码规范 - [ESLint](https://eslint.org) ☆ - [JSHint](http://www.jslint.com) ☆ - [styleLint](https://stylelint.io/) ☆ ### Nginx - [Nginx](http://jartto.wang/2017/04/15/nginx-exception-handling/) ☆☆☆ ### DNS - [例解 DNS 递归/迭代名称解析原理](http://blog.chinaunix.net/uid-10659021-id-3903144.html) ☆☆☆ - [浏览器输入网址后台是如何运作的](http://www.chinaz.com/web/2013/0228/293980.shtml) ☆☆ ### CDN - [什么是 CDN？](https://www.zhihu.com/question/37353035) ☆☆ ### V8 引擎 - [Google V8 引擎运用了哪些优秀的算法？](https://www.zhihu.com/question/22498967) ☆☆☆ - [V8 引擎详解](https://blog.csdn.net/swimming_in_it_/article/details/78869549) ☆☆☆ - [Google V8](https://github.com/v8/v8) ☆☆☆ - [V8 并发标记](https://mp.weixin.qq.com/s/pv_4YRo6KjLiVxLViZTr2Q) ### Linux - ls/cd/rm/cat/chmod/chown/useradd/df/du/ps/top/head/tail ☆☆ - [Linux](http://jartto.wang/2016/06/24/linux-common-operation/) ☆☆ - [掌握 Linux 命令 Grep ](http://jartto.wang/2016/10/12/grasp-linux-grep/) ☆☆ - [Linux 实用命令](http://jartto.wang/2016/11/02/linux-common-command/) ☆☆ - [Mac 下查看端口占用情况](http://jartto.wang/2016/09/28/check-the-system-port-of-mac/) ☆☆ - 网络操作 - curl - netstat - lsof - ifconfig - ssh - tcpdump - iptables - grep ☆☆ - sed ☆☆ - awk ☆☆☆ ### Electron - [初探 Electron - 理论篇](http://jartto.wang/2018/01/03/first-exploration-electron/) ☆☆ - [初探 Electron - 升华篇](http://jartto.wang/2018/01/04/first-exploration-electron-2/) ☆☆ - [初探 Electron - 实践篇 1](http://jartto.wang/2018/01/14/first-exploration-electron-3/) ☆☆ - [初探 Electron - 实践篇 2](http://jartto.wang/2018/01/21/first-exploration-electron-4/) ☆☆ ### 抓包工具 - [Fiddler](https://www.telerik.com/fiddler) ☆☆ - [Charles](https://www.charlesproxy.com) ☆☆ - [Postman](https://www.getpostman.com) ☆☆ - [HttpWatch](http://www.oneapm.com/lp/bihttpwatch) ☆☆ ### 测试 - 单元测试 - [Jasmine](https://jasmine.github.io/) ☆☆☆ - [mocha](https://segmentfault.com/a/1190000011362879) ☆☆☆ - [chai](http://www.chaijs.com/api/assert/) ☆☆☆ - [Karma](http://karma-runner.github.io/2.0/index.html) ☆☆☆ - 软件测试 - [你了解软件测试吗？](http://jartto.wang/2017/11/02/grasp-testing/) ☆☆ ### 部署 - Docker - [Docker 构建统一的前端开发环境](https://juejin.im/post/5b127087e51d450686184183?utm_source=gold_browser_extension) ☆☆ - [私服推荐 Nexus](http://dockone.io/article/2168) ☆☆☆ - [大型企业级推荐 harbor](https://blog.csdn.net/mideagroup/article/details/52053402) ☆☆☆ - [Docker 底层技术](https://www.jianshu.com/p/7a1ce51a0eba?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io) ☆☆☆ - [Jenkins](https://jenkins.io) ☆☆☆ ### 浏览器 - [浏览器工作原理](https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/) ☆☆☆ - [what-happens-when](https://github.com/alex/what-happens-when)(输入 URL 后浏览器发生了什么) ☆☆ - [再谈 IE 浏览器兼容问题](http://jartto.wang/2016/12/06/talk-about-ie-compatible-over-again/) ☆☆ ### 数据可视化 - 图表 ☆☆ - [echarts](http://echarts.baidu.com/option.html#xAxis) - [highcharts](https://www.highcharts.com/products/highcharts/) - [g2](https://antv.alipay.com/g2/demo/index.html) - 地图 ☆☆ - [Google Map](https://developers.google.com/maps/documentation/javascript/examples/user-editable-shapes?hl=zh-cn) - [Mapbox](https://www.mapbox.com/) - [高德](http://lbs.amap.com/) - [百度](http://api.map.baidu.com/) - [腾讯](http://lbs.qq.com/) - [蜂鸟室内地图](https://www.fengmap.com/) ### 前端工程化 - [我们是如何做好前端工程化和静态资源管理](https://aotu.io/notes/2016/07/19/A-little-exploration-of-front-end-engineering/index.html) 京东 ☆☆☆ - [百度 fis](http://fis.baidu.com/fis3/docs/beginning/intro.html) ☆☆ - [Scrat](http://scrat-team.github.io/#!/quick-start) ☆☆ - [Grunt](http://www.gruntjs.net/) ☆☆ - [Gulp](https://www.gulpjs.com.cn/) ☆☆ - Webpack - [Webpack 4](https://juejin.im/post/5af8fa806fb9a07ac162876d) ☆☆☆ - [如何十倍提高你的 webpack 构建效率](https://blog.csdn.net/u011413061/article/details/51872412?from=timeline&isappinstalled=0) ☆☆☆ - [Browserify](http://browserify.org/) ☆☆ - [Parcel](http://jartto.wang/2017/12/11/chattered-about-parcel/) ☆☆ - Babel - [babel-runtime 使用与性能优化](https://juejin.im/entry/5b108f4c6fb9a01e5868ba3d?utm_source=gold_browser_extension) - [babel-polyfill 使用与性能优化](https://juejin.im/entry/5b108f866fb9a01e49293627?utm_source=gold_browser_extension) ### 物联网 - [ruff](https://baike.baidu.com/item/ruff/19726288?fr=aladdin) ☆☆☆ - [ruff入门应用开发](https://www.imooc.com/learn/958) ☆☆☆ - [要想成为一名物联网工程师，需要学习哪些知识？](https://www.zhihu.com/question/31381245)☆ ### 技术杂谈 - [一个程序员的成长之路 - 剖析别人，总结自己](https://mp.weixin.qq.com/s/zWPjfHiYxx0HH9lE99Yijw) ☆☆☆ > 张云龙，全民直播CTO，也是个前端工程师 - [秒杀系统优化思路](https://blog.csdn.net/csdn265/article/details/51461466) ☆☆☆ >尽量将请求拦截在系统上游（越上游越好）, 读多写少的常用多使用缓存（缓存抗读压力） - [客户端高可用建设体系](https://juejin.im/post/5b10afc06fb9a01e39624d3d?utm_source=gold_browser_extension) >2000万日订单背后：美团外卖客户端高可用建设体系 - [缓存架构设计](https://mp.weixin.qq.com/s/YxGeisz0L9Ja2dwsiZz01w) ☆☆☆ >微博应对日访问量百亿级的缓存架构设 - [前端重构方案](https://mp.weixin.qq.com/s/H9Dvm_5F8hdBrZynlNdlfw) ☆☆ >规范、技术选型、性能优化、构建工具、开发效率 - [Taro - 多端开发框架](https://juejin.im/entry/5b19155bf265da6e083be667?utm_source=gold_browser_extension) ☆☆ >京东多端统一开发框架 - Taro - [你可能不知道的前端知识点](https://github.com/justjavac/the-front-end-knowledge-you-may-not-know) ☆☆ - [V8 并发标记](https://mp.weixin.qq.com/s/pv_4YRo6KjLiVxLViZTr2Q) ☆☆☆ >引擎V8推出“并发标记”，可节省60%-70%的GC时间 ### 面试 - [30s 面试](https://github.com/fejes713/30-seconds-of-interviews#table-of-contents)