個人前端自學之路

最近找工做，順便縷一縷本身是怎麼自學前端的，當複習了。個人學習方法不太好，習慣了應試教育，上來就花大量時間看理論，一邊看一邊疑惑這個到底能夠用來幹什麼？但仍是習慣性的把一個知識點先所有看完，固然看完也忘的差很少了。而後開始實踐，又發現不會的東西依然不少不少，各類預處理器，各類框架，各類方言，看的頭昏腦脹，逐漸失去信心。

結論：代碼寫得少了……加油寫吧，寫就完事兒了_(°:з」∠)_

只簡單的歸納，記錄可在線學習的網站，看過和想看的文章和書籍。

目錄

• 1、web
• 2、HTML和CSS基礎
• 3、CSS進階
• 4、HTML5
• 5、JavaScript
• 6、Ajax
• 7、前端工程化
• 8、MVVM框架
• 9、後端node
• 10、前端動效

1、web

輸入URL到頁面加載完成都發生了什麼？

1. DNS解析
2. 創建TCP鏈接
3. 發送http請求

• http
• https

4. 服務端處理請求併發送http報文
5. 瀏覽器解析渲染頁面

• reflow 和 repaint（很是消耗性能）
  • 減小重繪和重排
• js解析機制：參考

6. 鏈接結束

參考
《Webkit技術內幕》

web緩存

web緩存
網站性能優化實戰
雅虎34條軍規
CDN 與 緩存
瀏覽器與CDN

2、HTML和CSS基礎

• 文檔類型聲明
  • 瀏覽器的標準模式和混雜模式
• 語義化

學習網站：w3school
模板引擎：pug

3、CSS進階

• 盒模型
• 選擇器、優先級算法
• 絕對定位，相對定位
• 清除浮動
• 響應式設計：px、em、rem、vw、vh

CSS3

• 彈性佈局
• 動畫、過渡

預處理器：scss，stylus，less
框架：bootstrap
《精通CSS高級Web標準解決方案》
《CSS權威指南》
《CSS3實用指南》
大漠老師

ps：CSS，emmmm

4、HTML5

• 新的語義化標籤
• 音視頻標籤
• canvas
• web存儲
• 應用緩存

《HTML5 Canvas核心技術 圖形、動畫與遊戲開發》
《HTML5觸摸界面設計與開發》

ps：這裏的知識不太熟，目前沒有用過。

5、JavaScript

1. ECMAScript

• 數據類型、引用類型、基本包裝類型
• 變量和函數聲明提高
• 做用域鏈，執行環境
• this，call，apply，bind
• 原型鏈，建立對象，繼承，閉包

es6

• let和const
• 解構賦值
• 擴展運算符
• Promise
• set和map
• class

2. DOM

• 節點
• 事件冒泡，事件捕獲

3. BOM

• window、location、navigator、screen、history

《JS高級程序設計》
《JavaScript DOM編程藝術》
《Js語言精粹》
《JavaScript設計模式與開發實踐 (曾探) 》
ECMAScript 6 入門
阮一峯老師博客

6、Ajax

• axios、fetch

7、前端工程化

• 模塊
• CommonJS和AMD和CMD
• 先後端分離—SPA，SEC和SSR
• 打包工具：webpack、gulp

參考1
參考2
web組件規範
Webpack 4 Tutorial: from 0 Conf to Production Mode

8、MVVM框架

• vue雙向綁定原理
• diff算法

9、後端node

嘿嘿，這回我沒看理論，跟着寫了些demo
node + mongoDB
koa
koa和數據庫

10、前端動效

svg

快速入門

• GSAP、anime.js

pixiJS

超酷的網站
超酷的網站分解

three.js

Three.js入門指南