個人前端自學之路

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

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

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

目錄

  • 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請求
  1. 服務端處理請求併發送http報文
  2. 瀏覽器解析渲染頁面
  1. 鏈接結束

參考
《Webkit技術內幕》vue

web緩存

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

2、HTML和CSS基礎

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

學習網站:w3school
模板引擎:pugwebpack

3、CSS進階

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

CSS3

  • 彈性佈局
  • 動畫、過渡

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

ps:CSS,emmmmgit

4、HTML5

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

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

ps:這裏的知識不太熟,目前沒有用過。github

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入門指南

相關文章
相關標籤/搜索