一個優秀的前端都應該閱讀這些文章

前言

的確，有些標題黨了。起因是微信群里，有哥們問我，你是怎麼學習前端的呢？能不能共用一下學習方法。一句話也挺觸動我的，我真的不算是什麼大佬，對於學習前端知識，我也不能說是掌握了什麼捷徑。當然，我個人的學習方法這篇文章已經在寫了，預計這周末會在我個人公眾號發佈。而在此之前，我想展(gong)示(xiang)一下，我平時瀏覽各個技術網站，所記錄下來的文章。如果你能做到每日消化一篇，或許，你只要一年，就能拿下各個大廠 offer！

不由感慨，好文太多！吾等豈能浪費，還整日怨天尤人。

個人好文收藏

收藏截止時間：2019-07-24 11:50:49

typescript

• [ ] TypeScript，初次見面，請多指教
• [x] 可能是你需要的react + typescript 50條規範和經驗
  • 一些使用規範
• [ ] 三千字講清TypeScript與React的實戰技巧

CSS

• [ ] css載入會造成阻塞嗎
• [ ] 不可思議的純 CSS 滾動進度條效果
• [ ] CSS實現水平垂直居中的1010種方式（史上最全）
• [ ] rem佈局解析
• [ ] 佈局的下一次革新
• [ ] 徹底搞懂word-break、word-wrap、white-space
• [ ] 徹底搞懂CSS層疊上下文、層疊等級、層疊順序、z-index
• [ ] css載入會造成阻塞嗎？
• [ ] 從青銅到王者10個css3偽類使用技巧和運用，瞭解一哈
• [ ] CSS性能優化的8個技巧
• [ ] 個人總結（css3新特性）
• [ ] CSS設置居中的方案總結-超全
• [ ] Web開發者需要知道的CSS Tricks
• [ ] CSS 常用技巧

前端工程（架構、軟實力）

• [ ] 前端緩存最佳實踐
• [ ] 寫給前端看的架構文章(1)：MVC VS Flux
• [ ] 前端數據校驗從建模開始
• [ ] 前端也需要瞭解的 JSONP 安全
• [ ] 網站性能優化實戰——從12.67s到1.06s的故事
• [ ] 5 分鐘擼一個前端性能監控工具
• [ ] 瀏覽器頁面資源載入過程與優化
• [ ] 現代化懶載入的方式
• [ ] 用 preload 預載入頁面資源
• [ ] 乾貨!各種常見佈局實現+知名網站實例分析
• [ ] 前端數據結構與演算法
• [ ] 前端工程師為什麼要學習編譯原理？
• [ ] jsonp的原理與實現
• [ ] 懶載入和預載入
• [ ] 50行代碼的MVVM，感受閉包的藝術
• [ ] 不好意思！耽誤你的十分鐘，讓MVVM原理還給你
• [ ] 2018 前端性能優化清單
• [ ] 網頁圖片載入優化方案
• [ ] 把前端監控做到極致
• [ ] 如何優雅處理前端異常
• [ ] 經典面試題：從 URL 輸入到頁面展現到底發生什麼
• [ ] 前端同構渲染的思考與實踐
• [ ] 前端構建秘籍
• [ ] 大型項目前端架構淺談（8000字原創）
• [ ] 一名【合格】前端工程師的自檢清單

React 技術棧

• [ ] React 源碼解析
• [ ] 從零搭建React全家桶框架教程
• [ ] 讓虛擬DOM和DOM-diff不再成為你的絆腳石
• [ ] 《React源碼解析》系列完結！
• [ ] 怎樣學習React？當然是自己動手實現一個React啦
• [ ] 從setState promise化的探討 體會React團隊設計思想
• [ ] React 應用設計之道 - curry 化妙用
• [ ] 如何評價React的新功能Time Slice 和Suspense？
• [ ] React的新引擎—React Fiber是什麼
• [ ] React源碼解析(三):詳解事務與更新隊列
• [ ] React中的Transaction
• [ ] React 源碼剖析系列 － 玩轉 React Transition
• [ ] 如何提高你的 React 應用的性能
• [ ] 將 React 應用優化到 60fps
• [ ] 如何寫出更好的 React 代碼？
• [ ] React中型項目的優化實踐
• [x] React 源碼剖析系列 － 生命周期的管理藝術
  • 生命周期主要通過三種狀態進行管理：MOUNTING、RECEIVE_PROPS、UNMOUNTING
• [x] 深入React的生命周期(上)：出生階段(Mount)
  • 僅生成React組件不會觸發生命周期的調用
  • componentWillMount和render父組件先調用，與componentDidMount順序恰巧相反
• [x] 深入React的生命周期(下)：更新(Update)
  • 雖然props的更改會引起componentWillReceiveProps的調用；但componentWillReceiveProps的調用並不意味著props真的發生了變化。
• [x] 你真的瞭解React嗎（上）如何設計組件以及重要的生命周期
• [x] React v16.3 版本新生命周期函數淺析及升級方案
• [ ] React ref 的前世今生
• [ ] 談談 react 中的 key
• [ ] React Mixin 的前世今生
• [ ] 你真的瞭解React嗎（中）組件間的通信以及React優化
• [ ] 深入框架本源系列 —— Virtual Dom
• [ ] 探索Virtual DOM的前世今生
• [ ] 深入框架本源系列 —— Virtual Dom
• [x] React 源碼剖析系列 － 不可思議的 react diff
  • 關於兩個list的比較還是比較深入的，可以重點研究
• [x] 淺入淺出圖解domDIff
• [x] 深度剖析：如何實現一個 Virtual DOM 演算法
  • 代碼實現可作為參考
• [x] React 源碼剖析系列 － 解密 setState
  • setState是同步的，事務需要瞭解
• [x] setState的秘密
• [x] setState 之後發生了什麼 —— 淺談 React 中的 Transaction
• [x] 你真的理解setState嗎？
• [ ] React 中的高階組件及其應用場景
• [ ] React 最佳實踐
• [ ] 完全理解React Fiber
• [ ] React Fiber架構
• [ ] React Fiber 架構介紹資料彙總
• [ ] 你不知道的Virtual DOM系列
• [ ] 【譯】通過Recompose庫掌握React函數組件
• [ ] React-Redux源碼分析
• [ ] 源碼看React setState漫談（一）
• [ ] 源碼看React setState漫談（二）
• [ ] 精讀《用160行js代碼實現一個React》
• [ ] 還在用 Redux，要不要試試 GraphQL 和 Apollo
• [ ] React 同構實踐與思考
• [ ] React 實現 Table 的思考
• [ ] React實踐 - Component Generator
• [ ] ReactEurope 2016 小記 - 上
• [ ] ReactEurope 2016 小記 - 下
• [ ] Mobx 思想的實現原理，及與 Redux 對比
• [ ] 組件庫設計實戰 - 複雜組件設計
• [ ] redux middleware 詳解
• [ ] 深入理解 react-router 路由系統
• [ ] Immutable 詳解及 React 中實踐
• [ ] React-Redux源碼分析

webpack/babel

• [ ] Webpack 源碼（一）—— Tapable 和 事件流
• [ ] 手把手教你擼一個 Webpack Loader
• [ ] 面試官: 你瞭解過Babel嗎？寫過Babel插件嗎? 答: 沒有。卒
• [ ] Write Better JavaScript With Webpack
• [ ] 手把手教你擼一個簡易的 webpack
• [x] 帶你走進webpack世界，成為webpack頭號玩家
  • webpack 優化方法講解較多、prod/dev 配置文件、loader/plugin 的簡單編寫介紹
• [ ] webpack打包之後的文件過大的解決方法
• [ ] webpack詳解
• [x] webpack4-用之初體驗，一起敲它十一遍
  • 從零配置，基礎配置，c3 首碼，熱更新、提取公共代碼等
• [x] 基於Webpack搭建React開發環境
  • 簡單借鑒 webpack-merge
• [ ] 入門babel--實現一個es6的class轉換器
• [ ] webpack 中那些最易混淆的 5 個知識點
• [ ] 關於webpack4的14個知識點,童叟無欺

Test

• [ ] ESLint里的規則教會我，無規矩 不編程

JavaScript

• [ ] 發佈訂閱模式，在工作中它的能量超乎你的想象
• [ ] 誰說前端不需要懂-Nginx反向代理與負載均衡
• [ ] CSS世界中那些說起來很冷的知識
• [ ] WebSocket是時候展現你優秀的一面了
• [ ] socket.io讓每個人都可以開發屬於自己的即時通訊
• [ ] WebSocket 是什麼原理？為什麼可以實現持久連接
• [x] JavaScript 如何工作：對引擎、運行時、調用堆棧的概述
  • 瞭解JavaScript調用棧
• [x] 理解 JavaScript 中的執行上下文和執行棧
  • 執行上下文、變數環境、詞法環境 再看一遍
• [x] 這一次，徹底弄懂 JavaScript 執行機制
• [ ] JavaScript開發者應懂的33個概念
• [ ] 前端js實現字元串/圖片/excel文件下載
• [ ] JavaScript 複雜判斷的更優雅寫法
• [ ] 性感的Promise，擁抱ta然後扒光ta
• [ ] 近一萬字的ES6語法知識點補充
• [ ] 深拷貝的終極探索（90%的人都不知道）
• [ ] 前端路由跳轉基本原理
• [ ] 九種跨域方式實現原理
• [ ] 發現 JavaScript 中閉包的強大威力
• [ ] 你可能不熟悉的JS總結
• [ ] JavaScript中高階函數的魅力
• [ ] 小邵教你玩轉JS面向對象
• [ ] AST抽象語法樹——最基礎的javascript重點知識，99%的人根本不瞭解
• [ ] ES6、ES7、ES8特性一鍋燉
• [ ] 如何在 JavaScript 中更好地使用數組
• [ ] 7分鐘理解JS的節流、防抖及使用場景
• [ ] ECMAScript 6 六級考試
• [ ] javascript: Airbnb JavaScript 代碼規範
• [ ] Promise實現原理（附源碼）
• [ ] 可能是最好的正則表達式的教程筆記了吧...
• [ ] 一些 JavaScript 中的代碼小技巧
• [ ] 急速JavaScript全棧教程
• [ ] 理解非同步之美 --- promise與async await （三）
• [ ] ES9已經來了 Are you ready?
• [ ] 使用原生 JavaScript構建狀態管理系統
• [ ] Promise 必知必會（十道題）
• [ ] JS正則表達式完整教程（略長）
• [ ] 防抖和節流原理分析
• [ ] JavaScript 實用技巧和寫法建議
• [ ] 編寫自己的代碼庫（javascript常用實例的實現與封裝）
• [ ] import、require、export、module.exports 混合使用詳解
• [ ] WebSocket：5分鐘從入門到精通
• [ ] JavaScript 運行原理解析
• [ ] 簡單瞭解JavaScript垃圾回收機制
• [ ] 一次記住js的6個正則方法
• [ ] 幾道JS代碼手寫題以及一些代碼實現
• [ ] JSBridge的原理
• [ ] 面試官: 你瞭解前端路由嗎?
• [ ] 深入剖析 JavaScriptCore
• [ ] JavaScript閉包的底層運行機制
• [ ] JavaScript 中的多線程 -- Web Worker
• [ ] 解鎖多種JavaScript數組去重姿勢
• [ ] Promise不會？？看這裡！！！史上最通俗易懂的Promise！！！
• [ ] 前端將數據轉化為彈幕效果的實現方式
• [ ] 淺談 instanceof 和 typeof 的實現原理
• [ ] 一起學習造輪子（一）：從零開始寫一個符合Promises/A+規範的promise
• [ ] 前端性能相關：防抖、節流
• [ ] 7種方法實現數組去重
• [ ] 如何實現一個HTTP請求庫——axios源碼閱讀與分析
• [ ] 面試官:既然React/Vue可以用Event Bus進行組件通信,你可以實現下嗎?
• [ ] 高階函數，你怎麼那麼漂亮呢！
• [ ] 面試官:請你實現一個深克隆
• [ ] 前端模塊化：CommonJS,AMD,CMD,ES6
• [ ] 小邵教你玩轉promise源碼
• [ ] Promise原理講解 && 實現一個Promise對象
• [ ] 淺談 HTTP/2 Server Push
• [ ] 開發更好用的 JavaScript 模塊
• [ ] JavaScript複雜判斷的更優雅寫法
• [ ] 我從來不理解JavaScript閉包，直到有人這樣向我解釋它
• [ ] 重新認識構造函數、原型和原型鏈
• [ ] 如何在 Web 關閉頁面時發送 Ajax 請求
• [ ] 用 Proxy 追蹤 JavaScript 類
• [ ] 「中高級前端面試」JavaScript手寫代碼無敵秘籍
• [ ] JavaScript的環境模型
• [ ] 面試官(6): 寫過『通用前端組件』嗎?
• [ ] 抱歉，學會 Proxy 真的可以為所欲為
• [ ] 中級前端工程師必須要掌握的 28 個 JavaScript 技巧
• [ ] 前端路由原理解析和實現
• [ ] 正則表達式不要背
• [ ] 前端必知必會--操作URL的黑科技
• [ ] 送你43道JavaScript面試題

Node

• [ ] 一篇文章構建你的 NodeJS 知識體系
• [ ] 200 多行代碼實現 Websocket 協議
• [ ] 瀏覽器與Node的事件迴圈(Event Loop)有何區別
• [ ] NodeJS與模塊系統

Flutter

• [ ] Flutter實戰視頻-移動電商
• [ ] flutter中event_bus實現原理
• [ ] Flutter 面試知識點集錦

Http

• [ ] 設計一個無懈可擊的瀏覽器緩存方案：關於思路，細節，ServiceWorker，以及HTTP/2
• [ ] 你應該知道的前端——緩存
• [ ] HTTP 緩存機制一二三
• [ ] 都9102年了，還問GET和POST的區別
• [ ] 通過HTTP的HEADER完成各種騷操作
• [ ] 九個問題從入門到熟悉HTTPS
• [ ] 談談 HTTPS
• [ ] 你敢在post和get上刁難我，就別怪我裝逼了
• [ ] 圖解TCP三次握手與四次分手
• [ ] 面試帶你飛：這是一份全面的 電腦網路基礎 總結攻略
• [ ] 小哥哥,小姐姐,我有一份tcp、http面試指南你要嗎？
• [ ] 看圖學HTTPS
• [ ] 分分鐘讓你理解HTTPS
• [ ] 小哥哥,小姐姐,我有一份tcp、http面試指南你要嗎？
• [ ] HTTP2基本概念學習筆記
• [ ] 都2019年了，還問GET和POST的區別
• [ ] 前端基礎篇之HTTP協議
• [ ] 關於三次握手與四次揮手面試官想考我們什麼
• [ ] 寒冬求職之你必須要懂的Web安全
• [ ] 前端基礎篇之HTTP協議- [ ] 你真的瞭解 Cookie 和 Session 嗎
• [ ] 這幾個概念你可能還是沒搞清require、import和export

瀏覽器

• [ ] 前端必須要懂的瀏覽器緩存機制
• [ ] 瀏覽器的迴流與重繪 (Reflow & Repaint)
• [ ] 深入淺出瀏覽器渲染原理
• [ ] 拋棄console.log()，擁抱瀏覽器Debugger

面試

• [ ] Javascript 面試中經常被問到的三個問題！
• [ ] 破解前端面試（80% 應聘者不及格系列）：從 DOM 說起
• [ ] 面試的信心來源於過硬的基礎
• [ ] BAT前端經典面試問題：史上最最最詳細的手寫Promise教程
• [ ] 破解前端面試（80% 應聘者不及格系列）：從閉包說起
• [ ] 前端面試題整理
• [ ] 中高級前端大廠面試秘籍，為你保駕護航金三銀四，直通大廠(上)
• [ ] 2018大廠高級前端面試題彙總
• [ ] 2018前端面試總結，看完弄懂，工資少說加3K
• [ ] 2018春招前端面試: 闖關記(精排精校)
• [ ] 前端面試考點多？看這些文章就夠了
• [ ] 80% 應聘者都不及格的 JS 面試題
• [ ] 一次弄懂Event Loop（徹底解決此類面試問題）
• [ ] 中高級前端大廠面試秘籍，為你保駕護航金三銀四，直通大廠(上)
• [ ] 【半月刊】前端高頻面試題及答案彙總
• [ ] 一道被前端忽略的基礎題，不信看你會幾題
• [ ] 騰訊校招前端三面,虐完繼續擼
• [ ] 2018阿裡巴巴前端面試總結
• [ ] 幾道高級前端面試題解析
• [ ] 26個精選的JavaScript面試問題
• [ ] 前端高頻面試題及答案彙總
• [ ] 這兒有20道大廠面試題等你查收

數據結構與演算法

• [ ] 前端筆試&面試爬坑系列---演算法
• [ ] 漫畫：什麼是紅黑樹

其他

• [ ] 四月前端知識集錦
• [ ] web 項目如何進行 git 多人協作開發
• [ ] Chrome插件編寫
• [ ] 用 yeoman 打造自己的項目腳手架
• [ ] Weex 入坑指南：手把手編譯 Playground
• [ ] 什麼是 PWA
• [ ] 打造屬於自己的cnpm/npm安裝，生成自定義項目架構
• [ ] 仿 vue-cli 搭建屬於自己的腳手架
• [ ] 教你從零開始搭建一款前端腳手架工具
• [ ] 基於node.js的腳手架工具開發經歷
• [ ] 從零開始搭建腳手架
• [ ] react組件從搭建腳手架到在npm發佈的步驟實現

結束語

以上包括我已讀還未移至已讀的記錄中（主要是由於感覺還需再度）。所有文章，我都會好好學習，沒辦法，畢竟比較菜。還有太多需要學習。

歡迎關註我個人微信公眾號：全棧前端精選

學習交流

關註公眾號： 【全棧前端精選】 每日獲取好文推薦。

公眾號內回覆 【1】，加入全棧前端學習群，一起交流。