F2E-Awesome

• 更新时间：2019-07-17
• 难度等级：☆ 为初级，☆☆ 为中级，☆☆☆ 为高级。
• 标签体系：开发工具、HMTL5、CSS、JS、主流框架、优化、Web服务器端、源码学习、前端类库、移动端、PWA、WebAssembly、小程序、Canvas、WebGL、SVG、Graphql、模块化编程、算法、排序、加密、数据结构、数据库、包管理、Python、设计模式、网络协议、函数式编程、DOM、跨域、事件模型、安全、Git、前端规范、Nginx、DNS、CDN、V8 引擎、Linux、Electron、抓包工具、Hadoop、测试、部署、监控、浏览器、数据可视化、前端工程化、物联网、消息队列、开发模式、微前端、架构、面试、ECMAScript标准、前端组织、学习网站、技术杂谈

开发工具

• Sublime Text ☆☆
• VS Code ☆☆☆
• Atom ☆☆
• WebStorm ☆☆☆

HTML5

• 初级 ☆
  • 语义化
  • Audio 和 Video
  • Web Storage
  • HTML5 MDN
  • HTML5 Tricks
  • HTML5 教程手册
• 中级 ☆☆
  • 离线存储
  • HTML5 摄像头
  • HTML5 全屏
  • HTML5 拖放实现
  • HTML5 全屏滑动组件
  • HTML5 之地理定位（Geolocation）
  • HTML5 之消息通知（Web Notification）
  • HTML5 之音频合成（SpeechSynthesis）
  • WebSocket
• 高级 ☆☆☆
  • Communication
  • Web Workder
    • Web Worker
    • Web Workers + 5 cases
    • Speedy Introduction to Web Workers
  • requestAnimationFrame
  • requestIdleCallback
• 扩展
  • HTML5 API 大盘点 ☆☆
  • H5 页面滚动阻尼效果实现

CSS

• 初级 ☆
  • CSS 3 简介
  • CSS 实用概要
  • CSS 实用 Tips
  • CSS 三大特性
  • 盒模型
  • box-sizing
  • IconFont
  • CSS 实现水平垂直居中的 10 种方式
• 中级 ☆☆
  • BFC
  • Flex
  • Grid layout
  • Flexbox vs Grid：基本概念
  • PostCSS
  • 预编译
    • SASS
    • LESS
    • Stylus
  • CSS3 动画
    • Animate CSS
    • All Animation CSS3
    • Transform
    • Translate
  • 如何检测页面滚动并执行动画
  • 移动端无缝滚动动画实现
• 高级 ☆☆☆
  • CSS4
  • CSS3 动画原理
  • 探究 CSS 解析原理
  • 详谈层合成（composite）
  • CSS Modules 使用详解
  • Web 技巧 - 动画 ☆☆
• 扩展
  • 30s CSS ☆
  • 新手引导动画的 4 种实现方式

JS

• 初级 ☆
  • JS 标准参考教程
  • 原型与原型链
  • 作用域与作用域链
  • Event Loop
  • 闭包
    • 反思闭包
    • 深入浅出 Javascript 闭包
  • call 和 apply
  • 正则表达式
    • 正则表达式真的很骚，可惜你不会写
  • XHR or Fetch API ?
  • Understanding ECMAScript 6
  • 为什么要有 ES6
  • introduction to ES6 by example
  • ES6 标准入门
  • ECMAScript 6 - 阮一峰
  • 浏览器同源政策及其规避方法
• 中级 ☆☆
  • JS 模板引擎
  • 前端路由跳转基本原理
  • 垃圾回收
  • JS 内存
    • JS 内存管理
    • 内存管理速成教程
  • 堆和栈
  • 继承
  • 掌握 JS Stack Trace
  • ES6
    • Generator
      • ES6-Generator 函数
    • Promise
      • How do Promises work under the hood?
      • JavaScript Promise迷你书
    • Module
    • Class
  • JavaScript 引擎基础：Shapes 和 Inline Caches
  • 33 Concepts Every JavaScript Developer Should Know
• 高级 ☆☆☆
  • TypeScript
    • TypeScript 官网
    • 深入 TypeScript 的类型系统
    • TypeScript 总体架构
  • You-Dont-Know-JS
    • Up & Going
    • Scope & Closures
    • this & Object Prototypes
    • Types & Grammar
    • Async & Performance
    • ES6 & Beyond
  • exploring ES6
  • JavaScript 如何工作
    • 对引擎、运行时、调用堆栈的概述
    • 在 V8 引擎里 5 个优化代码的技巧
    • 内存管理 + 处理常见的4种内存泄漏
    • 内存管理速成教程
    • 事件循环和异步编程的崛起 + 5个如何更好的使用 async/await 编码的技巧
    • 深入剖析 WebSockets 和拥有 SSE 技术 的 HTTP/2，以及如何在二者中做出正确的选择
    • 对比 WebAssembly + 为什么在某些场景下它比 JavaScript 更合适
    • Web Worker 的内部构造以及 5 种你应当使用它的场景
• 扩展
  • 何谓 JS 挖矿 ☆
  • 30S JS ☆☆
  • 33 Concepts Every JavaScript Developer Should Know
  • ES6 语法侦测 ☆
  • 初探 performance – 监控网页与程序性能
  • 新手引导动画的4种实现方式 ☆

主流框架

• Angular
  • 依赖注入 ☆
  • 指令 Directive ☆☆
  • 剖析 Angularjs 语法 ☆☆
  • build-your-own-angularjs
• Vue
  • Mint-UI ☆
  • Element.UI ☆
  • VUE2 ☆☆
  • VUEX ☆☆
  • Nuxtjs ☆
    • Nuxtjs 2.0 升级爬坑 ☆
  • Axios ☆
  • Vue-Router
    • Vue-Router 实现原理 ☆☆☆
  • Vue-Loader ☆☆
  • Vue.js 技术揭秘 ☆☆☆
• React
  • 脚手架 ☆
    • Create React App
    • Codesandbox
    • Rekit
  • 30 seconds of React ☆☆
  • How Does React Tell a Class from a Function? ☆☆
  • Ant Design ☆☆
  • 虚拟 Dom ☆☆
  • Diff 算法 ☆☆☆
  • react-app-rewired
  • Dva ☆☆
  • 探路 Roadhog ☆☆
  • Redux
    • 深入理解 Redux 中间件 ☆☆☆
    • Redux 中文文档 ☆☆
  • Redux-Saga ☆☆☆
  • TakeLatest ☆☆☆
  • React 16 新特性 ☆☆
  • React-Router@4 ☆☆
  • React 性能优化 ☆☆☆
  • 21 项优化 React App 性能的技术
  • React Hooks
    • 30分钟精通 React Hooks ☆☆
    • React Hooks-概览 ☆☆
  • UmiJS ☆☆
  • Next.js ☆☆
    • Next.js 使用指南1－基本规则
    • Next.js 使用指南2－路由与加载
    • Next.js 使用指南3－高级配置
  • Ts + React + Mobx 实现移动端浏览器控制台
  • 阿里飞冰组件库 ☆☆
  • 单测
    • React单元测试策略及落地
    • 使用 Jest 和 Enzyme 测试 React 组件
  • 应用
    • 构建大型React应用程序的最佳实践

优化

• 初级 ☆
  • 合并
  • 压缩
  • 混淆
  • Css sprits
  • 减少 HTTP 请求
  • Gzip
    • GZIP 的压缩原理与日常应用 ☆☆☆
  • Keep-Alive
  • DNS
• 中级 ☆☆
  • 图像优化原理
  • 高性能网站建设的 14 个原则
  • Web 优化之 Request
  • 如何优化高德地图（AMap）Marker 动画
  • Web前端优化及工具集锦
  • 搜索引擎优化 SEO
• 高级 ☆☆☆
  • 彻底弄懂 HTTP 机制及原理
  • 缓存
    • HTML5 离线存储
    • HTML 和 HTTP 头文件设置
      • HTTP 缓存
      • Meta
      • Expires
      • Cache-Control
      • Last-Modified / If-Modified-Since
      • Etag / If-None-Match
    • Nginx 缓存
    • 关键路径渲染优化
    • 关键渲染路径
    • 前端性能优化——关键渲染路径 👍
    • Storage
    • indexedDB
    • 浏览器存储之争
    • Service Worker
    • 从性能优化的角度看缓存
    • 聊一聊浏览器缓存机制
    • 浏览器缓存机制：强缓存、协商缓存
    • 数据存储：cookie、Storage、indexedDB
    • 离线应用缓存：App Cache => Manifest
  • 服务端缓存
    • 缓存、队列（Memcached、redis、RabbitMQ）
    • 缓存技术的详解
    • 缓存淘汰算法--LRU算法
• 扩展
  • 网站性能优化实战——从 12.67s 到 1.06s 的故事 ☆
  • 用 100 行代码提升 10 倍的性能 ☆☆
  • 美团网页首帧优化实践 ☆☆
  • 前端性能提升秘笈！ ☆☆
  • 网站优化实战 ☆☆☆
  • 百度APP-Android H5首屏优化实践 ☆☆☆
  • VasSonic，让你的 H5 页面首屏秒开 ☆☆☆
  • Lazy Loading Video Based on Connection Speed ☆☆☆
• 工具
  • YSlow
  • Performance
  • Google PageSpeed
  • LightHouse

Web 服务器端

• Nodejs
  • 基础 web 框架
    • Express ☆
    • Koa
      • 阮一峰 Koa 入门教程 ☆
      • kick-off-koa ☆
      • koajs examples ☆☆
      • koa workshop ☆☆
    • hapijs ☆☆
    • restify
    • fastify
    • thinkjs
    • nextjs ☆☆
  • node中比较棘手的问题
    • node内存泄漏排查
    • node错误处理机制
    • node.js cluster
      • PM2 初体验 ☆
      • Forever ☆☆
  • 高度集成 web 框架
    • egg ☆☆☆
    • nest
    • thinkjs
    • loopback
    • sails ☆☆
    • nohup ☆☆
    • Nodejs 事件循环机制: 结合libuv和 nodejs 官网的blog
    • 剖析 nodejs 的事件循环
    • Stream ☆☆
    • Buffer ☆☆
    • 多进程 ☆☆
    • eleme node-interview ☆☆☆
    • node debug ☆☆
    • 内存相关 ☆☆☆
    • js snapshot 相关 ☆☆☆
    • node技术进阶与实践 ☆☆☆
• deno ☆☆
• nexus 搭建 npm 私服 ☆☆☆
• Nginx ☆☆☆
• nodejs 结合 dubbo 服务 node-zookeeper-dubbo ☆☆☆
• thrifty -> nodejs实例 ☆☆
• nodejs-learning-guide ☆☆☆
• 互联网架构为什么要做服务化？☆☆
• 什么是微服务
• 服务化架构的演进与实践☆☆
• 服务化实战之 dubbo、dubbox、motan、thrift、grpc等RPC框架比较及选型☆☆
• Nodejs 最佳实践 ☆☆☆

源码学习

• Lodash 源码分析（一）“Function” Methods ☆☆☆
• Webpack 源码 ☆☆☆
• React 源码剖析系列 － 不可思议的 react diff ☆☆☆
• React 源码解析 ☆☆☆
• 逐行阅读 Redux 源码 ☆☆
• 解密 JQuery ☆☆☆
• Promise 的实现及解析 ☆☆☆
• 浅析 Redux-Saga 实现原理 ☆☆☆
• Antd 源码解读 ☆☆☆
• Vue.js 源码解析 ☆☆☆
• 自己动手做一个 Vue ☆☆☆
• vue-come-true ☆☆☆
• Vue.js 源码学习笔记 ☆☆☆
• 高效阅读 Github 源代码 ☆
• 从头实现一个 koa 框架 ☆☆☆

前端类库

• JS 类库
  • jQuery ☆
  • zepto ☆
  • underscore ☆☆
  • lodash ☆☆
• UI 库 ☆
  • Bulma
  • EasyUI
  • Bootstrap
  • Meterial Design
  • Wired Elements(手绘风格 UI 库)
  • 移动端
  • SUI Mobile
  • MUI
• 软件
  • PS ☆
  • AI ☆
  • 精品 MAC 应用分享 ☆
• 视觉网站
  • Behance ☆☆
  • Dribbble ☆☆
• 原型工具
  • Axure ☆
  • Sketch ☆

移动端

• Native App
  • React Native ☆☆
  • Weex ☆☆
  • NativeScript
• Hybird App
  • Ionic ☆☆
  • Cordova ☆☆
  • Phonegap ☆☆
• Web App ☆
• 响应式布局
  • rem ☆
• webview
  • 页面通信 ☆
  • 原理 ☆☆
• 关于 Hbuilder ☆
• 移动端 Touchend 事件不触发解决方案 ☆
• 移动Web UI库（H5框架）有哪些 ☆
• H5 移动调试全攻略 ☆☆
• Flutter
  • Awesome-Flutter ☆

PWA

• 官网 ☆☆
• 第一本 PWA 中文书 ☆☆
• PWA（Progressive Web App）初探总结 ☆
• 讲讲 PWA
• React 同构应用 PWA 升级指南 ☆
• 9 amazing PWA secrets ☆☆☆
• awesome-progressive-web-apps 打造 PWA 的资源集合
• pwa.rocks 一些优秀的 PWA 集合

WebAssembly

• WebAssembly，Web 的新时代 ☆☆
• 来谈谈 WebAssembly 是个啥？为何说它会影响每一个 Web 开发者？ ☆
• WebAssembly 系列（四）WebAssembly 工作原理 ☆☆☆
• 如何评论浏览器最新的 WebAssembly 字节码技术？ ☆☆

小程序

• 快速上手小程序 ☆☆
• 细数小程序的坑 ☆☆
• 小程序开发 Tips ☆☆
• Taro 多端统一开发框架

Canvas

• 玩转「Canvas」 ☆
• Canvas 实现单机版贪吃蛇 ☆☆☆
• 用 Canvas 画一个进度盘 ☆☆

WebGL

• WebGL技术储备 ☆☆
• WebGL的实际使用 ☆☆
• WebGL 3D版俄罗斯方块 ☆☆☆

SVG

• 走进 SVG ☆☆
• SVG 类库 snap.svg.js ☆☆

Elasticsearch

• Elasticsearch 官网
• 基于 Elasticsearch 实现搜索建议

Graphql

• graphql
• apollo
• apollo-blog 需要翻墙

模块化编程

• CMD ☆
  • SeaJS ☆
• AMD ☆
  • Requirejs ☆
• JS 模块化编程之彻底弄懂 CommonJS 和 AMD/CMD！ ☆
• AMD 和 CMD 的区别有哪些？ ☆

算法

• 算法练习 ☆☆
• JavaScript 算法与数据结构 ☆☆☆
• 算法入门 ☆☆
  • 算法图解1 - 二分查找和大O表示法
  • 算法图解2 - 数组和链表
  • 算法图解3 - 递归，快排
  • 算法图解4 - 散列表
  • 算法图解5 - 图和广度优先搜索
  • 算法图解6 - 狄克斯特拉算法与贪婪算法
  • 算法图解7 - 动态规划
• 贪心算法
• 动态规划
• 搜索
• 图论
• 计算几何
• 数学
• 大数问题
• 矩阵计算

排序

• 交换排序
  • 冒泡排序
  • 快速排序
• 插入排序
  • 直接插入排序
  • 希尔排序
• 选择排序
  • 直接选择排序
  • 堆排序
  • 归并排序

加密

• 初探加密算法 ☆☆☆
• 算法分析 密码: as75 ☆☆☆
• 程序员实用算法 密码: mmap ☆☆☆
• 对称加密
  • DES ☆☆☆
  • 3DES ☆☆☆
  • TDEA ☆☆☆
  • Blowfish ☆☆☆
  • RC2 ☆☆☆
  • RC4 ☆☆☆
  • RC5 ☆☆☆
  • IDEA ☆☆☆
  • SKIPJACK ☆☆☆
  • AES ☆☆☆
• 非对称加密
  • RSA ☆☆☆
  • ECC（移动设备用） ☆☆☆
  • Diffie-Hellman ☆☆☆
  • El Gamal ☆☆☆
  • DSA（数字签名用） ☆☆☆
• Hash 加密
  • MD2 ☆☆☆
  • MD4 ☆☆☆
  • MD5 ☆☆☆
  • HAVAL ☆☆☆
  • SHA ☆☆☆

数据结构

• 分类
  • 数组
  • 栈
  • 队列
  • 链表
  • 树
    • 二叉树
  • 图
  • 堆
  • 散列表
  • 链表
    • 单向链表
    • 双向链表
    • 环链表
• Data Structures for Beginners ☆☆

数据库

• MySQL ☆☆☆
• Redis ☆☆☆
  • Redis 教程
  • 读完这篇，你一定能真正理解 Redis 持久化
• Memcached ☆☆☆
  • Memcached 教程
• 三种基本的存储引擎比较 ☆☆☆

包管理

• npm ☆
• cnpm ☆
• yarn ☆
• homebrew ☆
• bower ☆

Python

• 初级 ☆
  • Python 入门指南
  • Python 官方文档
  • Python 笔记
    • 简单语法
    • 常用操作
    • Open 文件操作
    • ...
• 中级 ☆☆
  • 30s Python
  • 爬虫
    • Scrapy
  • Web 框架
    • Tornado
    • Jinja2
    • Flask
    • Django
• 高级 ☆☆☆
  • Cook Book
  • 分布式
    • Celery
  • 移动端
    • Kivy
  • 数据分析
    • Pandas
  • 可视化
    • Matplotlib
    • Seaborn
    • Plotly
    • Bokeh
  • 机器学习
    • Tensorflow
    • PyTorch
    • MxNet

设计模式

• 菜鸟-设计模式 ☆☆
• JavaScript 设计模式 ☆
• 常用的 Javascript 设计模式 ☆☆
• 23 种设计模式全解析
• 创建型模式
  • 工厂方法
  • 抽象工厂
  • 建造者
  • 原型
  • 单例
• 结构型模式
  • 适配器
  • 桥接
  • 组合
  • 装饰器
  • 外观
  • 享元
  • 代理
• 行为型模式
  • 解释器
  • 模板方法
  • 责任链
  • 命令
  • 迭代器
  • 中介者
  • 备忘录
  • 观察者
  • 状态
  • 策略
  • 访问者

网络协议

• TCP ☆☆☆
• UDP ☆☆☆
• HTTP 协议入门 ☆
• HTTP2 ☆☆☆
• HTTPS ☆☆
  • 一个故事讲完 HTTPS
  • 图文还原 HTTPS 原理
• 计算机网络的 7 层协议 ☆☆☆

函数式编程

• 什么是函数式编程思维？ ☆☆☆
• 我眼中的 JavaScript 函数式编程 ☆☆☆
• 防抖和节流原理分析
• 参数个数 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 函数式编程术语大全
• ...

DOM

• JavaScript HTML DOM ☆☆

跨域

• JSONP ☆☆
• CORS ☆☆
• Nginx ☆☆

事件模型

• 观察者模式 ☆☆
• DOM0 级模型 ☆☆
• IE 事件模型 ☆☆
• DOM2 级模型 ☆☆
• JQuery Event 模型 ☆☆
• JS 事件模型 ☆☆

安全

• 如何防止 XSS 攻击？
• Web 安全之 XSS 和 CSRF ☆☆☆
• Web 安全的三个攻防姿势 ☆☆☆
• XSS 的原理分析与解剖 ☆☆☆
• 对于 XSS 和 CSRF 你究竟了解多少 ☆☆☆
• CSRF 攻击的应对之道 ☆☆☆
• SQL 注入 ☆☆☆
• HTTPS ☆☆☆
• 内网渗透 ☆☆☆
• DDos 攻击 ☆☆☆
• 点击劫持 ☆☆
• Session 劫持 ☆☆
• 短信接口攻击 ☆☆

Git

• Git 学习资源汇总 ☆
• Git 常规操作 ☆
• 如何配置 Git 对应多个 Repository ☆
• Git 实践系列一：初探 ☆
• Git 钩子的作用 ☆☆
• Git pre-push hook ☆☆
• 你可能会忽略的 Git 提交规范 ☆
• 一个维护版本日志整洁的 Git 提交规范
• git-flow ☆☆
  • git flow 的使用 ☆☆

前端规范

• ESLint ☆
• JSHint ☆
• styleLint ☆
• EditorConfig
• Airbnb JavaScript **
• 项目规范化开发探索 *
• 看看这些被同事喷的 JS 代码风格你写过多少 *

Nginx

• Nginx ☆☆
• Nginx 平滑的基于权重轮询算法分析 ☆☆☆
• Nginx ☆☆☆
• Nginx 解决跨域问题 ☆
• 关于负载均衡的一切 ☆☆

DNS

• DNS 缓存中毒
• 例解 DNS 递归/迭代名称解析原理 ☆☆☆
• 浏览器输入网址后台是如何运作的 ☆☆

CDN

• 什么是 CDN？ ☆☆

V8 引擎

• Google V8 引擎运用了哪些优秀的算法？ ☆☆☆
• V8 引擎详解 ☆☆☆
• Google V8 ☆☆☆
• V8 并发标记 ☆☆☆
• V8 引擎的 5 个优化技巧 ☆☆☆

Linux

• ls/cd/rm/cat/chmod/chown/useradd/df/du/ps/top/head/tail ☆☆
• Linux ☆☆
• 掌握 Linux 命令 Grep ☆☆
• Linux 实用命令 ☆☆
• Mac 下查看端口占用情况 ☆☆
• 程序员必备的 Linux 基础知识 ☆☆
• 网络操作
  • curl
  • netstat
  • lsof
  • ifconfig
  • ssh
  • tcpdump
  • iptables
• grep ☆☆
• sed ☆☆
• awk ☆☆☆
• commander 将介绍如何利Javascript做为服务端脚本
• chalk 命令行彩色输出
• chokidar node文件监控

Electron

• 初探 Electron - 理论篇 ☆☆
• 初探 Electron - 升华篇 ☆☆
• 初探 Electron - 实践篇 1 ☆☆
• 初探 Electron - 实践篇 2 ☆☆

抓包工具

• Fiddler ☆☆
• Charles ☆☆
• HttpWatch ☆☆
• spy-debugger ☆☆
• 模拟请求
  • Postman ☆☆

Hadoop生态

• Google 三驾马车：GFS、MapReduce 和 Bigtable
• Hadoop 生态系统
• Hbase
• Hbase 中文参考指南
• HIVE 和 HBASE 区别

测试

• 单元测试
  • Jest☆☆☆
  • Jasmine ☆☆☆
  • mocha ☆☆☆
  • chai ☆☆☆
  • Karma ☆☆☆
• 软件测试
  • 你了解软件测试吗？ ☆☆
• 自动化测试
  • selenium_webdriver ☆☆
  • Appium移动自动化测试 ☆☆
  • Appium移动自动化测试 ☆☆
  • UI自动化测试 ☆☆☆

    网易UI自动化测试框架，开源的，结合AI，自动更新测试用例、自我学习和需求沉淀。智能测试方向！！！！

• 应用
  • React单元测试策略及落地
  • 使用 Jest 和 Enzyme 测试 React 组件

部署

• Docker
  • Docker 构建统一的前端开发环境 ☆☆
  • 私服推荐 Nexus ☆☆☆
  • 大型企业级推荐 harbor ☆☆☆
  • Docker 底层技术 ☆☆☆
  • 精简 Docker 镜像的五种通用方法
• 什么是 Kubernetes ☆☆
• Jenkins ☆☆☆

监控

• APM ☆☆
• 前端错误日志收集方案 ☆
• 前端性能监控系统 ☆☆
• 前端代码异常监控实战 ☆☆
• 前端一站式异常捕获方案 ☆☆
• 前端错误收集 ☆☆
• 如何精确统计页面停留时长 ☆
• 如何优雅处理前端异常？ ☆
• 解决 Script Error 的另类思路 ☆☆
• 大前端时代前端监控的最佳实践 ☆☆☆
• 前端性能监控：window.performance

浏览器

• 再谈 IE 浏览器兼容问题 ☆☆
• 图解浏览器的基本工作原理 ☆☆
• what-happens-when(输入 URL 后浏览器发生了什么) ☆☆
• 浏览器工作原理 ☆☆☆
• 渲染进程的内部工作原理 ☆☆☆
• Compositor 是如何来提高交互性能的？ ☆☆☆
• 浏览器内核渲染：重建引擎
• Chrome Devtools ☆☆☆

数据可视化

• 图表 ☆☆
  • echarts
  • highcharts
  • g2
• 地图 ☆☆
  • Google Map
  • Mapbox
  • 高德
  • 百度
  • 腾讯
  • 蜂鸟室内地图
• 埋点统计 ☆☆
  • 揭开 JS 无埋点技术的神秘面纱

前端工程化

• Web 研发模式演变 ☆☆
• 我们是如何做好前端工程化和静态资源管理 京东 ☆☆☆
• 百度 fis ☆☆
• Scrat ☆☆
• Grunt ☆☆
• Gulp ☆☆
  • Gulp
  • Gulp 4
• Webpack
  • Webpack 4 ☆☆☆
    • Webpack 4 配置最佳实践
  • 如何十倍提高你的 webpack 构建效率 ☆☆☆
  • webpack 性能优化
    • 减小前端资源大小 ☆☆
    • 利用好持久化缓存 ☆☆☆
    • 监控和分析应用 ☆☆☆
• Rollup
• Browserify ☆☆
• Parcel ☆☆
• Babel
  • Babel 插件手册
  • babel-runtime 使用与性能优化
  • babel-polyfill 使用与性能优化
• 什么是 Kubernetes？
• 有赞前端质量保障体系

物联网

• ruff ☆☆☆
• ruff入门应用开发 ☆☆☆
• 要想成为一名物联网工程师，需要学习哪些知识？☆

消息队列

• 消息队列常见的 5 个应用场景
• ActiveMQ
• RabbitMQ
• ZeroMQ
• Kafka
  • 了解 Kafka ☆☆
  • Kafka 入门 ☆☆
  • Kafka的架构原理，你真的理解吗？ ☆☆☆
• MetaMQ
• RocketMQ
• 消息队列mq总结 ☆☆
• 缓存淘汰算法--LRU算法 ☆☆☆

  这个是各种消息队列的框架的核心算法，都是这个算法的变形

开发模式

• DevOps 简介 ☆
• 猪八戒网的 DevOps 进化论 ☆☆

微前端

• 微前端如何落地？ ☆☆☆
• 用微前端的方式搭建类单页应用

架构

• 架构师成神路线图 ☆☆
• 成为一名架构师得学习哪些知识？ ☆☆
• 如何画好架构图？ ☆☆
• Node.js 微服务实践 ☆☆☆
• 如何设计微服务 ☆☆☆
• 各大互联网公司架构演进之路汇总 ☆☆☆
• 开发十年，我是如何成长为一名优秀的架构师 ☆☆☆
• 淘宝从几百到千万级并发的十四次架构演进之路 ☆☆☆

面试

• 30s 面试 ☆
• 面试精选之 http 缓存 ☆☆
• 张一鸣：10年面试2000人，我发现混的好的人，全都有同一个特质 ☆
• 2019 年前端面试都聊啥 ☆☆
• BAT 面试总结 ☆☆
• JavaScript 深入之 bind 的模拟实现 ☆☆
• 前端面试官的套路，你懂吗？ ☆☆
• 前端 100 问
• 一个 TCP 连接上面能发多少个 HTTP 请求
• 彻底弄懂前端路由

ECMAScript标准

• ECMAScript 标准 最新版 ☆☆☆
• ECMAScript 标准 历史版本 ☆☆☆

前端组织

• 360奇舞团
• 腾讯Web前端团队（Alloy Team）
• 百度Web 前端研发部（FEX）
• 淘宝前端团队（FED）
• 大搜车无线团队
• 京东凹凸实验室
• 蚂蚁金服·数据体验技术团队
• 前端精读周刊

学习网站

• Freecodecamp
• CodePen
• 算法练习
• Pluralsight
• Code School
• 慕课网
• 妙味课堂
• 百度传课

技术杂谈

• 一个程序员的成长之路 - 剖析别人，总结自己 ☆☆☆

  张云龙，全民直播CTO，也是个前端工程师

• 秒杀系统优化思路 ☆☆☆

  尽量将请求拦截在系统上游（越上游越好）, 读多写少的常用多使用缓存（缓存抗读压力）

• 客户端高可用建设体系

  2000万日订单背后：美团外卖客户端高可用建设体系

• 缓存架构设计 ☆☆☆

  微博应对日访问量百亿级的缓存架构设

• 前端重构方案 ☆☆

  规范、技术选型、性能优化、构建工具、开发效率

• Taro - 多端开发框架 ☆☆

  京东多端统一开发框架 - Taro

• 你可能不知道的前端知识点 ☆☆
• V8 并发标记 ☆☆☆

  引擎V8推出“并发标记”，可节省60%-70%的GC时间

• JS 的数据结构 ☆☆

  谁说前端就不需要学习数据结构了？

• 简话开源协议 ☆

  了解开源协议，选择最合适的协议

• 把前端监控做到极致 ☆☆

  从 采集、数据处理、分析、报警 4 个维度进一步阐述如何把前端监控做到极致

• 设计一个百万级的消息推送系统 ☆☆☆

  百万连接其实只是一个形容词，更多的是想表达如何来实现一个分布式的方案，可以灵活的水平拓展从而能支持更多的连接。

• 蚂蚁金服核心技术：百亿特征实时推荐算法揭秘

  文章提出一整套创新算法与架构，通过对TensorFlow底层的弹性改造，解决了在线学习的弹性特征伸缩和稳定性问题，并以GroupLasso和特征在线频次过滤等自研算法优化了模型稀疏性