一個合格的前端都應該閱讀這些文章

前言

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

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

我的好文收藏

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

typescript

• [ ] TypeScript，初次見面，請多指教

• [x] 多是你須要的react + typescript 50條規範和經驗

  • 一些使用規範

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%的人根本不瞭解
• [ ] ES六、ES七、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面試問題
• [ ] 前端高頻面試題及答案彙總

數據結構與算法

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

其餘

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

結束語

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

歡迎關注我我的微信公衆號：全棧前端精選

我會每日推薦各類精選好文，以及每日一道面試題講解。（今日纔開啓這個計劃）