前言
的確，有些標題黨了。起因是微信群里，有哥們問我，你是怎么學習前端的呢？能不能共享一下學習方法。一句話也挺觸動我的，我真的不算是什么大佬，對于學習前端知識，我也不能說是掌握了什么捷徑。當然，我個人的學習方法這篇文章已經在寫了，預計這周末會在我個人公眾號發布。而在此之前，我想展(gong)示(xiang)一下，我平時瀏覽各個技術網站，所記錄下來的文章。如果你能做到每日消化一篇，或許，你只要一年，就能拿下各個大廠 offer！
不由感慨，好文太多！吾等豈能浪費，還整日怨天尤人。
個人好文收藏
收藏截止時間：2019-07-24 11:50:49
typescript
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中型項目的優化實踐
- React 源碼剖析系列 － 生命周期的管理藝術
- 生命周期主要通過三種狀態進行管理：MOUNTING、RECEIVE_PROPS、UNMOUNTING
- 深入React的生命周期(上)：出生階段(Mount)
- 僅生成React組件不會觸發生命周期的調用
- componentWillMount和render父組件先調用，與componentDidMount順序恰巧相反
- 深入React的生命周期(下)：更新(Update)
- 雖然props的更改會引起componentWillReceiveProps的調用；但componentWillReceiveProps的調用并不意味著props真的發生了變化。
- 你真的了解React嗎（上）如何設計組件以及重要的生命周期
- React v16.3 版本新生命周期函數淺析及升級方案
- React ref 的前世今生
- 談談 react 中的 key
- React Mixin 的前世今生
- 你真的了解React嗎（中）組件間的通信以及React優化
- 深入框架本源系列 —— Virtual Dom
- 探索Virtual DOM的前世今生
- 深入框架本源系列 —— Virtual Dom
- React 源碼剖析系列 － 不可思議的 react diff
- 關于兩個list的比較還是比較深入的，可以重點研究
- 淺入淺出圖解domDIff
- 深度剖析：如何實現一個 Virtual DOM 算法
- 代碼實現可作為參考
- React 源碼剖析系列 － 解密 setState
- setState是同步的，事務需要了解
- setState的秘密
- setState 之后發生了什么 —— 淺談 React 中的 Transaction
- 你真的理解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
- 帶你走進webpack世界，成為webpack頭號玩家
- webpack 優化方法講解較多、prod/dev 配置文件、loader/plugin 的簡單編寫介紹
- webpack打包之后的文件過大的解決方法
- webpack詳解
- webpack4-用之初體驗，一起敲它十一遍
- 從零配置，基礎配置，c3 前綴，熱更新、提取公共代碼等
- 基于Webpack搭建React開發環境
- 簡單借鑒 webpack-merge
- 入門babel--實現一個es6的class轉換器
- webpack 中那些最易混淆的 5 個知識點
- 關于webpack4的14個知識點,童叟無欺
Test
JavaScript
- 發布訂閱模式，在工作中它的能量超乎你的想象
- 誰說前端不需要懂-Nginx反向代理與負載均衡
- CSS世界中那些說起來很冷的知識
- WebSocket是時候展現你優秀的一面了
- socket.io讓每個人都可以開發屬于自己的即時通訊
- WebSocket 是什么原理？為什么可以實現持久連接
- JavaScript 如何工作：對引擎、運行時、調用堆棧的概述
- 了解JavaScript調用棧
- 理解 JavaScript 中的執行上下文和執行棧
- 執行上下文、變量環境、詞法環境 再看一遍
- 這一次，徹底弄懂 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
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
瀏覽器
面試
- Javascript 面試中經常被問到的三個問題！
- 破解前端面試（80% 應聘者不及格系列）：從 DOM 說起
- 面試的信心來源于過硬的基礎
- BAT前端經典面試問題：史上最最最詳細的手寫Promise教程
- 破解前端面試（80% 應聘者不及格系列）：從閉包說起
- 前端面試題整理
- 中高級前端大廠面試秘籍，為你保駕護航金三銀四，直通大廠(上)
- 2018大廠高級前端面試題匯總
- 2018前端面試總結，看完弄懂，工資少說加3K
- 2018春招前端面試: 闖關記(精排精校)
- 前端面試考點多？看這些文章就夠了
- 80% 應聘者都不及格的 JS 面試題
- 一次弄懂Event Loop（徹底解決此類面試問題）
- 中高級前端大廠面試秘籍，為你保駕護航金三銀四，直通大廠(上)
- 【半月刊】前端高頻面試題及答案匯總
- 一道被前端忽略的基礎題，不信看你會幾題
- 騰訊校招前端三面,虐完繼續擼
- 2018阿里巴巴前端面試總結
- 幾道高級前端面試題解析
- 26個精選的JavaScript面試問題
- 前端高頻面試題及答案匯總
數據結構與算法
其他
- 四月前端知識集錦
- web 項目如何進行 git 多人協作開發
- Chrome插件編寫
- 用 yeoman 打造自己的項目腳手架
- Weex 入坑指南：手把手編譯 Playground
- 什么是 PWA
- 打造屬于自己的cnpm/npm安裝，生成自定義項目架構
- 仿 vue-cli 搭建屬于自己的腳手架
- 教你從零開始搭建一款前端腳手架工具
- 基于node.js的腳手架工具開發經歷
- 從零開始搭建腳手架
- react組件從搭建腳手架到在npm發布的步驟實現
結束語
以上包括我已讀還未移至已讀的記錄中（主要是由于感覺還需再度）。所有文章，我都會好好學習，沒辦法，畢竟比較菜。還有太多需要學習。
