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

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

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

 

 

我的好文收藏

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

typescript

• TypeScript，初次見面，請多指教
• 多是你須要的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中型項目的優化實踐
• 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

• ESLint裏的規則教會我，無規矩 不編程

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%的人根本不瞭解
• 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發佈的步驟實現

結束語

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