F2E-Awesome

• 更新時間：2021-02-18
• 難度等級：☆ 為初級，☆☆ 為中級，☆☆☆ 為高級。
• 標簽體系：開發(fā)工具、HMTL5、CSS、JS、主流框架、優(yōu)化、Web服務器端、Serverless、源碼學習、必學原理、前端類庫、移動端、PWA、WebAssembly、小程序、Canvas、WebGL、SVG、Graphql、模塊化編程、算法、排序、加密、數(shù)據(jù)結構、數(shù)據(jù)庫、包管理、Python、設計模式、網(wǎng)絡協(xié)議、函數(shù)式編程、DOM、跨域、事件模型、安全、Git、前端規(guī)范、Nginx、DNS、CDN、V8 引擎、Linux、Electron、抓包工具、Hadoop、測試、容器化、監(jiān)控、瀏覽器、數(shù)據(jù)可視化、前端工程化、物聯(lián)網(wǎng)、消息隊列、開發(fā)模式、微前端、LowCode、架構、AI、面試、ECMAScript標準、前端組織、學習網(wǎng)站、技術雜談

開發(fā)工具

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

HTML5

• 初級 ☆
  • 語義化
  • Audio 和 Video
  • Web Storage
  • HTML5 MDN
  • HTML5 Tricks
  • HTML5 教程手冊
• 中級 ☆☆
  • 離線存儲
  • HTML5 攝像頭
  • HTML5 全屏
  • HTML5 拖放實現(xiàn)
  • 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 頁面滾動阻尼效果實現(xiàn)

CSS

• 初級 ☆
  • CSS 3 簡介
  • CSS 實用概要
  • CSS 實用 Tips
  • CSS 三大特性
  • 盒模型
  • box-sizing
  • IconFont
  • CSS 實現(xiàn)水平垂直居中的 10 種方式
• 中級 ☆☆
  • BFC
  • Flex
  • Grid layout
  • Flexbox vs Grid：基本概念
  • PostCSS
  • 預編譯
    • SASS
    • LESS
    • Stylus
  • CSS3 動畫
    • Animate CSS
    • All Animation CSS3
    • Transform
    • Translate
  • 如何檢測頁面滾動并執(zhí)行動畫
  • 移動端無縫滾動動畫實現(xiàn)
• 高級 ☆☆☆
  • CSS3 動畫原理
  • 探究 CSS 解析原理
  • 詳談層合成（composite）
  • CSS Modules 使用詳解
  • Web 技巧 - 動畫 ☆☆
• 擴展
  • 30s CSS ☆
  • 新手引導動畫的 4 種實現(xiàn)方式

JS

• 初級 ☆
  • JavaScript ES12 新特性搶先體驗 ☆
  • JS 標準參考教程
  • 原型與原型鏈
  • 作用域與作用域鏈
  • Event Loop
  • 閉包
    • 反思閉包
    • 深入淺出 Javascript 閉包
  • call 和 apply
  • 正則表達式
    • 正則表達式真的很騷，可惜你不會寫
  • XHR or Fetch API ?
  • Understanding ECMAScript 6
  • 為什么要有 ES6
  • introduction to ES6 by example
  • ES6 標準入門
  • ECMAScript 6 - 阮一峰
  • 瀏覽器同源政策及其規(guī)避方法
• 中級 ☆☆
  • JS 模板引擎
  • 前端路由跳轉基本原理
  • 垃圾回收
  • JS 內(nèi)存
    • JS 內(nèi)存管理
    • 內(nèi)存管理速成教程
  • 堆和棧
  • 繼承
  • 掌握 JS Stack Trace
  • ES6
    • Generator
      • ES6-Generator 函數(shù)
    • 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 官網(wǎng)
    • 深入 TypeScript 的類型系統(tǒng)
    • TypeScript 總體架構
    • TypeScript 完全手冊
    • 如何用 Decorator 裝飾你的 Typescript？
  • You-Dont-Know-JS
    • Up & Going
    • Scope & Closures
    • this & Object Prototypes
    • Types & Grammar
    • Async & Performance
    • ES6 & Beyond
  • exploring ES6
  • JavaScript 如何工作
    • 對引擎、運行時、調(diào)用堆棧的概述
    • 在 V8 引擎里 5 個優(yōu)化代碼的技巧
    • 內(nèi)存管理 + 處理常見的4種內(nèi)存泄漏
    • 內(nèi)存管理速成教程
    • 事件循環(huán)和異步編程的崛起 + 5個如何更好的使用 async/await 編碼的技巧
    • 深入剖析 WebSockets 和擁有 SSE 技術 的 HTTP/2，以及如何在二者中做出正確的選擇
    • 對比 WebAssembly + 為什么在某些場景下它比 JavaScript 更合適
    • Web Worker 的內(nèi)部構造以及 5 種你應當使用它的場景
• 擴展
  • 何謂 JS 挖礦 ☆
  • 30S JS ☆☆
  • 33 Concepts Every JavaScript Developer Should Know
  • ES6 語法偵測 ☆
  • 初探 performance – 監(jiān)控網(wǎng)頁與程序性能
  • 新手引導動畫的4種實現(xiàn)方式 ☆

主流框架

• Angular
  • 依賴注入 ☆
  • 指令 Directive ☆☆
  • 剖析 Angularjs 語法 ☆☆
  • build-your-own-angularjs
• Vue
  • Mint-UI ☆
  • Element.UI ☆
  • VUE2 ☆☆
  • VUEX ☆☆
  • Nuxtjs ☆
    • Nuxtjs 2.0 升級爬坑 ☆
  • Axios ☆
  • Vue-Router
    • Vue-Router 實現(xiàn)原理 ☆☆☆
  • 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 性能優(yōu)化 ☆☆☆
  • 21 項優(yōu)化 React App 性能的技術
  • 淺談React性能優(yōu)化的方向
  • React Hooks
    • 30分鐘精通 React Hooks ☆☆
    • React Hooks-概覽 ☆☆
  • UmiJS ☆☆
  • Next.js ☆☆
    • Next.js 使用指南1－基本規(guī)則
    • Next.js 使用指南2－路由與加載
    • Next.js 使用指南3－高級配置
  • Ts + React + Mobx 實現(xiàn)移動端瀏覽器控制臺
  • 阿里飛冰組件庫 ☆☆
  • 單測
    • React單元測試策略及落地
    • 使用 Jest 和 Enzyme 測試 React 組件
  • 應用
    • 構建大型React應用程序的最佳實踐

優(yōu)化

• 初級 ☆
  • 圖片資源
    • WebP 在項目中的實踐
  • 代碼合并
  • 壓縮
  • 混淆
  • Css sprits
  • 減少 HTTP 請求
  • Gzip
    • GZIP 的壓縮原理與日常應用 ☆☆☆
  • Keep-Alive
  • DNS
• 中級 ☆☆
  • 圖像優(yōu)化原理
  • 高性能網(wǎng)站建設的 14 個原則
  • Web 優(yōu)化之 Request
  • 如何優(yōu)化高德地圖（AMap）Marker 動畫
  • Web前端優(yōu)化及工具集錦
  • 搜索引擎優(yōu)化 SEO
• 高級 ☆☆☆
  • 徹底弄懂 HTTP 機制及原理
  • 緩存
    • HTML5 離線存儲
    • HTML 和 HTTP 頭文件設置
      • HTTP 緩存
      • Meta
      • Expires
      • Cache-Control
      • Last-Modified / If-Modified-Since
      • Etag / If-None-Match
    • Nginx 緩存
    • 關鍵路徑渲染優(yōu)化
    • 關鍵渲染路徑
    • 前端性能優(yōu)化——關鍵渲染路徑 ??
    • Storage
    • indexedDB
    • 瀏覽器存儲之爭
    • Service Worker
    • 從性能優(yōu)化的角度看緩存
    • 聊一聊瀏覽器緩存機制
    • 瀏覽器緩存機制：強緩存、協(xié)商緩存
    • 數(shù)據(jù)存儲：cookie、Storage、indexedDB
    • 離線應用緩存：App Cache => Manifest
  • 服務端緩存
    • 緩存、隊列（Memcached、redis、RabbitMQ）
    • 緩存技術的詳解
    • 緩存淘汰算法--LRU算法
• 擴展
  • 網(wǎng)站性能優(yōu)化實戰(zhàn)——從 12.67s 到 1.06s 的故事 ☆
  • 用 100 行代碼提升 10 倍的性能 ☆☆
  • 美團網(wǎng)頁首幀優(yōu)化實踐 ☆☆
  • 前端性能提升秘笈！ ☆☆
  • 網(wǎng)站優(yōu)化實戰(zhàn) ☆☆☆
  • 百度APP-Android H5首屏優(yōu)化實踐 ☆☆☆
  • VasSonic，讓你的 H5 頁面首屏秒開 ☆☆☆
  • Lazy Loading Video Based on Connection Speed ☆☆☆
  • WebView性能、體驗分析與優(yōu)化 ☆☆
  • 移動 H5 首屏秒開優(yōu)化方案探討 ☆☆
  • 手機QQ Hybrid 的架構如何優(yōu)化演進 ☆☆☆
  • 高性能渲染十萬條數(shù)據(jù)(虛擬列表) ☆☆
  • 網(wǎng)站性能指標 - FMP ☆☆
  • 聚焦 Web 性能指標 TTI ☆☆
• 工具
  • 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內(nèi)存泄漏排查
    • node錯誤處理機制
    • node.js cluster
      • PM2 初體驗 ☆
      • Forever ☆☆
  • 高度集成 web 框架
    • egg ☆☆☆
    • nest
    • thinkjs
    • loopback
    • sails ☆☆
    • nohup ☆☆
    • Nodejs 事件循環(huán)機制: 結合libuv和 nodejs 官網(wǎng)的blog
    • 剖析 nodejs 的事件循環(huán)
    • Stream ☆☆
    • Buffer ☆☆
    • 多進程 ☆☆
    • eleme node-interview ☆☆☆
    • node debug ☆☆
    • 內(nèi)存相關 ☆☆☆
    • js snapshot 相關 ☆☆☆
    • node技術進階與實踐 ☆☆☆
• deno ☆☆
• nexus 搭建 npm 私服 ☆☆☆
• Nginx ☆☆☆
• nodejs 結合 dubbo 服務 node-zookeeper-dubbo ☆☆☆
• thrifty -> nodejs實例 ☆☆
• nodejs-learning-guide ☆☆☆
• 互聯(lián)網(wǎng)架構為什么要做服務化？☆☆
• 什么是微服務
• 服務化架構的演進與實踐☆☆
• 服務化實戰(zhàn)之 dubbo、dubbox、motan、thrift、grpc等RPC框架比較及選型☆☆
• Nodejs 最佳實踐 ☆☆☆
• 技術棧：為什么 Node 是前端團隊的核心技術棧 ☆☆☆

Serverless

• Serverless 入門 ☆☆
• Serverless 掀起新的前端技術變革 ☆☆☆
• 當 SSR 遇上 Serverless，輕松實現(xiàn)頁面瞬開 ☆☆
• 阿里自研開源框架 Midway Serverless ☆☆☆

源碼學習

• Lodash 源碼分析（一）“Function” Methods ☆☆☆
• Webpack 源碼 ☆☆☆
• React 源碼剖析系列 － 不可思議的 react diff ☆☆☆
• React 源碼解析 ☆☆☆
• 逐行閱讀 Redux 源碼 ☆☆
• 解密 JQuery ☆☆☆
• Promise 的實現(xiàn)及解析 ☆☆☆
• 淺析 Redux-Saga 實現(xiàn)原理 ☆☆☆
• Antd 源碼解讀 ☆☆☆
• Vue.js 源碼解析 ☆☆☆
• 自己動手做一個 Vue ☆☆☆
• vue-come-true ☆☆☆
• Vue.js 源碼學習筆記 ☆☆☆
• 高效閱讀 Github 源代碼 ☆
• 從頭實現(xiàn)一個 koa 框架 ☆☆☆

必學原理

• AST 抽象語法樹 ☆☆
• AST 與前端工程化實戰(zhàn) ☆☆
• 編譯原理：從 0 寫一個 js 解釋器 ☆

前端類庫

• JS 類庫
  • jQuery ☆
  • zepto ☆
  • underscore ☆☆
  • lodash ☆☆
• UI 庫 ☆
  • Bulma
  • EasyUI
  • Bootstrap
  • Meterial Design
  • Wired Elements(手繪風格 UI 庫)
  • 移動端
  • SUI Mobile
  • MUI
• 軟件
  • PS ☆
  • AI ☆
  • 精品 MAC 應用分享 ☆
• 視覺網(wǎng)站
  • Behance ☆☆
  • Dribbble ☆☆
• 原型工具
  • Axure ☆
  • Sketch ☆

移動端

• Native App
  • React Native ☆☆
  • Weex ☆☆
  • NativeScript
• Hybird App
  • Ionic ☆☆
  • Cordova ☆☆
  • Phonegap ☆☆
• Web App ☆
• 響應式布局
  • rem ☆
• webview
  • 頁面通信 ☆
  • 原理 ☆☆
• 關于 Hbuilder ☆
• 移動端 Touchend 事件不觸發(fā)解決方案 ☆
• 移動Web UI庫（H5框架）有哪些 ☆
• H5 移動調(diào)試全攻略 ☆☆
• Flutter
  • Awesome-Flutter ☆
  • 閑魚Flutter互動引擎系列 ☆☆
  • 深入了解 Flutter 的高性能圖形渲染 ☆☆☆

PWA

• 官網(wǎng) ☆☆
• 第一本 PWA 中文書 ☆☆
• PWA（Progressive Web App）初探總結 ☆
• 講講 PWA
• React 同構應用 PWA 升級指南 ☆
• 9 amazing PWA secrets ☆☆☆
• awesome-progressive-web-apps 打造 PWA 的資源集合
• pwa.rocks 一些優(yōu)秀的 PWA 集合

WebAssembly

• WebAssembly，Web 的新時代 ☆☆
• 來談談 WebAssembly 是個啥？為何說它會影響每一個 Web 開發(fā)者？ ☆
• WebAssembly 系列（四）WebAssembly 工作原理 ☆☆☆
• 如何評論瀏覽器最新的 WebAssembly 字節(jié)碼技術？ ☆☆

小程序

• 快速上手小程序 ☆☆
• 細數(shù)小程序的坑 ☆☆
• 小程序開發(fā) Tips ☆☆
• Taro 多端統(tǒng)一開發(fā)框架

Canvas

• 玩轉「Canvas」 ☆
• Canvas 實現(xiàn)單機版貪吃蛇 ☆☆☆
• 用 Canvas 畫一個進度盤 ☆☆

WebGL

• WebGL技術儲備 ☆☆
• WebGL的實際使用 ☆☆
• WebGL 3D版俄羅斯方塊 ☆☆☆

SVG

• 走進 SVG ☆☆
• SVG 類庫 snap.svg.js ☆☆

Elasticsearch

• Elasticsearch 官網(wǎng)
• 基于 Elasticsearch 實現(xiàn)搜索建議

Graphql

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

模塊化編程

• CMD ☆
  • SeaJS ☆
• AMD ☆
  • Requirejs ☆
• JS 模塊化編程之徹底弄懂 CommonJS 和 AMD/CMD！ ☆
• AMD 和 CMD 的區(qū)別有哪些？ ☆

算法

• 前端數(shù)據(jù)結構與算法入門 ☆
• 算法練習 ☆☆
• JavaScript 算法與數(shù)據(jù)結構 ☆☆☆
• 算法入門 ☆☆
  • 算法圖解1 - 二分查找和大O表示法
  • 算法圖解2 - 數(shù)組和鏈表
  • 算法圖解3 - 遞歸，快排
  • 算法圖解4 - 散列表
  • 算法圖解5 - 圖和廣度優(yōu)先搜索
  • 算法圖解6 - 狄克斯特拉算法與貪婪算法
  • 算法圖解7 - 動態(tài)規(guī)劃
• 貪心算法
• 動態(tài)規(guī)劃
• 搜索
• 圖論
• 計算幾何
• 數(shù)學
• 大數(shù)問題
• 矩陣計算
• 十大經(jīng)典排序算法動畫

排序

• 交換排序
  • 冒泡排序
  • 快速排序
• 插入排序
  • 直接插入排序
  • 希爾排序
• 選擇排序
  • 直接選擇排序
  • 堆排序
  • 歸并排序

加密

• 初探加密算法 ☆☆☆
• 算法分析 密碼: as75 ☆☆☆
• 程序員實用算法 密碼: mmap ☆☆☆
• 對稱加密
  • DES ☆☆☆
  • 3DES ☆☆☆
  • TDEA ☆☆☆
  • Blowfish ☆☆☆
  • RC2 ☆☆☆
  • RC4 ☆☆☆
  • RC5 ☆☆☆
  • IDEA ☆☆☆
  • SKIPJACK ☆☆☆
  • AES ☆☆☆
• 非對稱加密
  • RSA ☆☆☆
  • ECC（移動設備用） ☆☆☆
  • Diffie-Hellman ☆☆☆
  • El Gamal ☆☆☆
  • DSA（數(shù)字簽名用） ☆☆☆
• Hash 加密
  • MD2 ☆☆☆
  • MD4 ☆☆☆
  • MD5 ☆☆☆
  • HAVAL ☆☆☆
  • SHA ☆☆☆
• 綜合實踐
  • OAuth2.0 的四種授權方式 ☆☆

數(shù)據(jù)結構

• 分類
  • 數(shù)組
  • 棧
  • 隊列
  • 鏈表
  • 樹
    • 二叉樹
  • 圖
  • 堆
  • 散列表
  • 鏈表
    • 單向鏈表
    • 雙向鏈表
    • 環(huán)鏈表
• Data Structures for Beginners ☆☆

數(shù)據(jù)庫

• 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
  • 數(shù)據(jù)分析
    • Pandas
  • 可視化
    • Matplotlib
    • Seaborn
    • Plotly
    • Bokeh
  • 機器學習
    • Tensorflow
    • PyTorch
    • MxNet

設計模式

• 菜鳥-設計模式 ☆☆
• JavaScript 設計模式 ☆
• 常用的 Javascript 設計模式 ☆☆
• 23 種設計模式全解析
• 創(chuàng)建型模式
  • 工廠方法
  • 抽象工廠
  • 建造者
  • 原型
  • 單例
• 結構型模式
  • 適配器
  • 橋接
  • 組合
  • 裝飾器
  • 外觀
  • 享元
  • 代理
• 行為型模式
  • 解釋器
  • 模板方法
  • 責任鏈
  • 命令
  • 迭代器
  • 中介者
  • 備忘錄
  • 觀察者
  • 狀態(tài)
  • 策略
  • 訪問者

網(wǎng)絡協(xié)議

• TCP ☆☆☆
• UDP ☆☆☆
• HTTP 協(xié)議入門 ☆
• HTTP2 ☆☆☆
• HTTPS ☆☆
  • 一個故事講完 HTTPS
  • 圖文還原 HTTPS 原理
• 計算機網(wǎng)絡的 7 層協(xié)議 ☆☆☆

函數(shù)式編程

• 什么是函數(shù)式編程思維？ ☆☆☆
• 我眼中的 JavaScript 函數(shù)式編程 ☆☆☆
• 防抖和節(jié)流原理分析
• 參數(shù)個數(shù) Arity
• 高階組件 Higher-Order Functions (HOF)
• 偏應用函數(shù) Partial Application
• 柯里化 Currying
• 閉包 Closure
• 自動柯里化 Auto Currying
• 函數(shù)合成 Function Composition
• Continuation
• 純函數(shù) Purity
• 副作用 Side effects
• 冪等 Idempotent
• Point-Free Style
• 斷言 Predicate
• 約定 Contracts
• 范疇 Category
• JavaScript 函數(shù)式編程術語大全
• ...

DOM

• JavaScript HTML DOM ☆☆

跨域

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

事件模型

• 觀察者模式 ☆☆
• DOM0 級模型 ☆☆
• IE 事件模型 ☆☆
• DOM2 級模型 ☆☆
• JQuery Event 模型 ☆☆
• JS 事件模型 ☆☆

安全

• 如何防止 XSS 攻擊？
• Web 安全之 XSS 和 CSRF ☆☆☆
• Web 安全的三個攻防姿勢 ☆☆☆
• XSS 的原理分析與解剖 ☆☆☆
• 對于 XSS 和 CSRF 你究竟了解多少 ☆☆☆
• CSRF 攻擊的應對之道 ☆☆☆
• SQL 注入 ☆☆☆
• HTTPS ☆☆☆
• 內(nèi)網(wǎng)滲透 ☆☆☆
• DDos 攻擊 ☆☆☆
• 點擊劫持 ☆☆
• Session 劫持 ☆☆
• 短信接口攻擊 ☆☆
• CC

Git

• Git 學習資源匯總 ☆
• Git 常規(guī)操作 ☆
• 如何配置 Git 對應多個 Repository ☆
• Git 實踐系列一：初探 ☆
• Git 鉤子的作用 ☆☆
• Git pre-push hook ☆☆
• 你可能會忽略的 Git 提交規(guī)范 ☆
• 一個維護版本日志整潔的 Git 提交規(guī)范
• git-flow ☆☆
  • git flow 的使用 ☆☆

前端規(guī)范

• ESLint ☆
• JSHint ☆
• styleLint ☆
• EditorConfig
• Airbnb JavaScript **
• 項目規(guī)范化開發(fā)探索 *
• 看看這些被同事噴的 JS 代碼風格你寫過多少 *
• 谷歌工程實踐 - Code Review 標準 **

Nginx

• Nginx ☆☆
• Nginx 平滑的基于權重輪詢算法分析 ☆☆☆
• Nginx ☆☆☆
• Nginx 解決跨域問題 ☆
• 關于負載均衡的一切 ☆☆
• 負載均衡的算法 ☆☆
• 幾種常用負載均衡架構 ☆☆

DNS

• DNS 緩存中毒
• 例解 DNS 遞歸/迭代名稱解析原理 ☆☆☆
• 瀏覽器輸入網(wǎng)址后臺是如何運作的 ☆☆

CDN

• 什么是 CDN？ ☆☆
• CDN 帶來這些性能優(yōu)化 ☆☆☆

V8 引擎

• Google V8 引擎運用了哪些優(yōu)秀的算法？ ☆☆☆
• V8 引擎詳解 ☆☆☆
• Google V8 ☆☆☆
• V8 并發(fā)標記 ☆☆☆
• V8 引擎的 5 個優(yōu)化技巧 ☆☆☆

Linux

• ls/cd/rm/cat/chmod/chown/useradd/df/du/ps/top/head/tail ☆☆
• Linux ☆☆
• 掌握 Linux 命令 Grep ☆☆
• Linux 實用命令 ☆☆
• Mac 下查看端口占用情況 ☆☆
• 程序員必備的 Linux 基礎知識 ☆☆
• 網(wǎng)絡操作
  • curl
  • netstat
  • lsof
  • ifconfig
  • ssh
  • tcpdump
  • iptables
• grep ☆☆
• sed ☆☆
• awk ☆☆☆
• commander 將介紹如何利Javascript做為服務端腳本
• chalk 命令行彩色輸出
• chokidar node文件監(jiān)控

Electron

• 初探 Electron - 理論篇 ☆☆
• 初探 Electron - 升華篇 ☆☆
• 初探 Electron - 實踐篇 1 ☆☆
• 初探 Electron - 實踐篇 2 ☆☆

抓包工具

• Fiddler ☆☆
• Charles ☆☆
• HttpWatch ☆☆
• spy-debugger ☆☆
• 模擬請求
  • Postman ☆☆

Hadoop生態(tài)

• Google 三駕馬車：GFS、MapReduce 和 Bigtable
• Hadoop 生態(tài)系統(tǒng)
• Hbase
• Hbase 中文參考指南
• HIVE 和 HBASE 區(qū)別

測試

• 單元測試
  • Jest ☆☆☆
  • Jasmine ☆☆☆
  • mocha ☆☆☆
  • chai ☆☆☆
  • Karma ☆☆☆
• 軟件測試
  • 你了解軟件測試嗎？ ☆☆
• 自動化測試
  • selenium_webdriver ☆☆
  • Appium移動自動化測試 ☆☆
  • Appium移動自動化測試 ☆☆
  • UI 自動化測試 ☆☆☆

    網(wǎng)易UI自動化測試框架，開源的，結合AI，自動更新測試用例、自我學習和需求沉淀。智能測試方向！?。。?/p>

• 應用
  • React單元測試策略及落地
  • 使用 Jest 和 Enzyme 測試 React 組件

容器化

• Docker
  • Docker 邊學邊用 ☆☆
  • Docker 構建統(tǒng)一的前端開發(fā)環(huán)境 ☆☆
  • 私服推薦 Nexus ☆☆☆
  • 大型企業(yè)級推薦 harbor ☆☆☆
  • Docker 底層技術 ☆☆☆
  • 精簡 Docker 鏡像的五種通用方法
• K8s
  • 什么是 Kubernetes ☆☆
  • Kubernetes 架構簡介 ☆☆
  • 一文了解 Kubernetes ☆☆☆
• Jenkins ☆☆☆
• 前端AB實驗設計思路與實現(xiàn)原理 ☆☆☆

監(jiān)控

• APM ☆☆
• 前端錯誤日志收集方案 ☆
• 前端性能監(jiān)控系統(tǒng) ☆☆
• 前端代碼異常監(jiān)控實戰(zhàn) ☆☆
• 前端一站式異常捕獲方案 ☆☆
• 前端錯誤收集 ☆☆
• 如何精確統(tǒng)計頁面停留時長 ☆
• 如何優(yōu)雅處理前端異常？ ☆
• 解決 Script Error 的另類思路 ☆☆
• 大前端時代前端監(jiān)控的最佳實踐 ☆☆☆
• 前端性能監(jiān)控：window.performance

瀏覽器

• 再談 IE 瀏覽器兼容問題 ☆☆
• 圖解瀏覽器的基本工作原理 ☆☆
• what-happens-when(輸入 URL 后瀏覽器發(fā)生了什么) ☆☆
• 瀏覽器工作原理 ☆☆☆
• 渲染進程的內(nèi)部工作原理 ☆☆☆
• Compositor 是如何來提高交互性能的？ ☆☆☆
• 瀏覽器內(nèi)核渲染：重建引擎
• Chrome Devtools ☆☆☆
• Chrome插件(擴展)開發(fā)全攻略 ☆

數(shù)據(jù)可視化

• 圖表 ☆☆
  • echarts
  • highcharts
  • g2
• 地圖 ☆☆
  • Google Map
  • Mapbox
  • 高德
  • 百度
  • 騰訊
  • 蜂鳥室內(nèi)地圖
• 埋點統(tǒng)計 ☆☆
  • 揭開 JS 無埋點技術的神秘面紗

前端工程化

• Web 研發(fā)模式演變 ☆☆
• 我們是如何做好前端工程化和靜態(tài)資源管理 京東 ☆☆☆
• 百度 fis ☆☆
• Scrat ☆☆
• Grunt ☆☆
• Gulp ☆☆
  • Gulp
  • Gulp 4
• Webpack
  • Webpack 4 ☆☆☆
    • Webpack 4 配置最佳實踐
  • 如何十倍提高你的 webpack 構建效率 ☆☆☆
  • webpack 性能優(yōu)化
    • 減小前端資源大小 ☆☆
    • 利用好持久化緩存 ☆☆☆
    • 監(jiān)控和分析應用 ☆☆☆
• Rollup
• Browserify ☆☆
• Parcel ☆☆
• Babel
  • Babel 插件手冊
  • babel-runtime 使用與性能優(yōu)化
  • babel-polyfill 使用與性能優(yōu)化
• 什么是 Kubernetes？ ☆☆
• 有贊前端質(zhì)量保障體系 ☆☆☆
• 前端工程實踐之可視化搭建系統(tǒng) ☆☆
• 前端項目代碼質(zhì)量保障秘藉 ☆

物聯(lián)網(wǎng)

• ruff ☆☆☆
• ruff入門應用開發(fā) ☆☆☆
• 要想成為一名物聯(lián)網(wǎng)工程師，需要學習哪些知識？☆

消息隊列

• 消息隊列常見的 5 個應用場景
• ActiveMQ
• RabbitMQ
• ZeroMQ
• Kafka
  • 了解 Kafka ☆☆
  • Kafka 入門 ☆☆
  • Kafka的架構原理，你真的理解嗎？ ☆☆☆
• MetaMQ
• RocketMQ
• 消息隊列mq總結 ☆☆
• 緩存淘汰算法--LRU算法 ☆☆☆

  這個是各種消息隊列的框架的核心算法，都是這個算法的變形

開發(fā)模式

• DevOps 簡介 ☆
• 豬八戒網(wǎng)的 DevOps 進化論 ☆☆

微前端

• 了解什么是微前端 ☆
• 為什么大公司一定要使用微服務？ ☆
• 微前端如何落地？ ☆☆☆
• 用微前端的方式搭建類單頁應用 ☆☆
• Bifrost微前端框架及其在美團閃購中的實踐 ☆☆
• 張克軍：微前端架構體系 ☆☆☆
• EMP for Vue&React 互相遠程調(diào)用 ☆☆

LowCode

• 國內(nèi)低代碼平臺 ☆☆☆

架構

• 前端架構師入門技能圖譜 ☆
• 架構師成神路線圖 ☆☆
• 成為一名架構師得學習哪些知識？ ☆☆
• 如何畫好架構圖？ ☆☆
• Node.js 微服務實踐 ☆☆☆
• 如何設計微服務 ☆☆☆
• 各大互聯(lián)網(wǎng)公司架構演進之路匯總 ☆☆☆
• 開發(fā)十年，我是如何成長為一名優(yōu)秀的架構師 ☆☆☆
• 淘寶從幾百到千萬級并發(fā)的十四次架構演進之路 ☆☆☆
• 設計圖都不會畫，還想做架構師？ ☆☆
• 12306的技術架構 ☆☆☆
• 一文讀懂架構整潔之道 ☆☆☆
• 如何推動基礎架構項目落地 ☆☆

AI

• 機器學習模型一覽：監(jiān)督型、半監(jiān)督型和無監(jiān)督型 ☆☆☆
• 如何在 1 秒內(nèi)做到大數(shù)據(jù)精準去重？ ☆☆☆
• 大數(shù)據(jù)學習資源(Awesome Big Data) ☆☆☆
• Tensorflow.js生態(tài) ☆☆

面試

• 30s 面試 ☆
• 面試精選之 http 緩存 ☆☆
• 張一鳴：10年面試2000人，我發(fā)現(xiàn)混的好的人，全都有同一個特質(zhì) ☆
• 2019 年前端面試都聊啥 ☆☆
• BAT 面試總結 ☆☆
• JavaScript 深入之 bind 的模擬實現(xiàn) ☆☆
• 前端面試官的套路，你懂嗎？ ☆☆
• 前端 100 問
• 一個 TCP 連接上面能發(fā)多少個 HTTP 請求
• 徹底弄懂前端路由

ECMAScript標準

• ECMAScript 標準 最新版 ☆☆☆
• ECMAScript 標準 歷史版本 ☆☆☆

前端組織

• 360奇舞團
• 騰訊Web前端團隊（Alloy Team）
• 百度Web 前端研發(fā)部（FEX）
• 淘寶前端團隊（FED）
• 大搜車無線團隊
• 京東凹凸實驗室
• 螞蟻金服·數(shù)據(jù)體驗技術團隊
• 前端精讀周刊
• 淘系前端團隊

學習網(wǎng)站

• Freecodecamp
• CodePen
• 算法練習
• Pluralsight
• Code School
• 慕課網(wǎng)
• 妙味課堂
• 百度傳課

技術雜談

• 一個程序員的成長之路 - 剖析別人，總結自己 ☆☆☆

  張云龍，全民直播CTO，也是個前端工程師

• 秒殺系統(tǒng)優(yōu)化思路 ☆☆☆

  盡量將請求攔截在系統(tǒng)上游（越上游越好）, 讀多寫少的常用多使用緩存（緩存抗讀壓力）

• 客戶端高可用建設體系

  2000萬日訂單背后：美團外賣客戶端高可用建設體系

• 緩存架構設計 ☆☆☆

  微博應對日訪問量百億級的緩存架構設

• 前端重構方案 ☆☆

  規(guī)范、技術選型、性能優(yōu)化、構建工具、開發(fā)效率

• Taro - 多端開發(fā)框架 ☆☆

  京東多端統(tǒng)一開發(fā)框架 - Taro

• 你可能不知道的前端知識點 ☆☆
• V8 并發(fā)標記 ☆☆☆

  引擎V8推出“并發(fā)標記”，可節(jié)省60%-70%的GC時間

• JS 的數(shù)據(jù)結構 ☆☆

  誰說前端就不需要學習數(shù)據(jù)結構了？

• 簡話開源協(xié)議 ☆

  了解開源協(xié)議，選擇最合適的協(xié)議

• 把前端監(jiān)控做到極致 ☆☆

  從 采集、數(shù)據(jù)處理、分析、報警 4 個維度進一步闡述如何把前端監(jiān)控做到極致

• 設計一個百萬級的消息推送系統(tǒng) ☆☆☆

  百萬連接其實只是一個形容詞，更多的是想表達如何來實現(xiàn)一個分布式的方案，可以靈活的水平拓展從而能支持更多的連接。

• 螞蟻金服核心技術：百億特征實時推薦算法揭秘

  文章提出一整套創(chuàng)新算法與架構，通過對TensorFlow底層的彈性改造，解決了在線學習的彈性特征伸縮和穩(wěn)定性問題，并以GroupLasso和特征在線頻次過濾等自研算法優(yōu)化了模型稀疏性

• 前端登錄，這一篇就夠了

  文章列舉了常見的登錄方式，清晰易懂：Cookie + Session 登錄、Token 登錄、SSO 單點登錄、OAuth 第三方登錄