前端學習路線

時間  2021-08-12
標籤 css html 前端 vue html5 react jquery webpack git es6 欄目 CSS 简体版
原文   原文鏈接

前言


經過對前端知識進行一個評級，肯定如今階段，而後提供清晰的學習路線，完成進階。但願能夠經過這篇文章，能夠幫助你們少走彎路。css

目標：html

  1. 瞭解本身的實力
  2. 明確不一樣階段的學習路線

大綱

  • 對前端知識進行一次評級
  • level1階段
  • level2階段
  • JavaScript進階
  • Vue進階
  • 瀏覽器原理
  • 數據結構與算法
  • 設計模式
  • 網絡
  • 性能優化
  • 前端工程化
  • 其餘
  • 總結
  • 後續文章的輸出規劃
  • 參考資料

對前端知識進行一次評級(定級賽)

level1 :

沒有接觸過前端，對於前端沒有什麼概念 前端

level2 :

使用js,css,html能夠完成簡單頁面的還原，可是還不會使用庫 vue

level3 :

使用庫，好比說vue,jquery完成普通業務的開發，好比說一些活動落地頁和後臺管理頁面 html5

level4:

能夠熟練的進行平時的業務開發，可是對於JS高階，源碼，瀏覽器原理，數據結構與算法，設計模式，網絡,前端工程之類的東西很迷茫，只知道一些大概的名詞。這個時候，咱們就須要根據我的喜愛來進行深刻的研究了 react

level5:

這個層次我還沒達到，大概是一些架構，總體把控，大型項目構建，項目管理，資源分配等等能力了吧。
這是一個由術轉道的過程，已經不在專一於哪個端，而在於對總體的把控了。（對這個階段沒有什麼認知，小聲逼逼）
jquery

level6:

頸椎病康復指南
webpack

level1階段

這一階段，須要補充一些基礎的前端知識，能夠看點入門書籍git

  • 《Head First HTML與CSS（第2版）》



最好的入門書。看兩遍就對HTML & CSS 有個大概印象了es6

  • 《JavaScript DOM編程藝術》



最好的JS入門書籍，一目瞭然地告訴你如何用JS操做DOM（這是瀏覽器端編程的基本功），還灌輸了最符合標準的編程理念

  • 《JavaScript高級程序設計（第3版）》




學習基礎的JavaSrcipt語法

基礎的話能夠看1-,8,10,11,13,21，22，23,24章節

level2階段


這一階段是對於一些類庫的使用

  • 《JavaScript高級程序設計（第3版）》

    • 沒錯，就是它，你仍是須要再看一遍

  • 《鋒利的jQuery》



  • 入門必備，講JS最著名的庫——jQuery的，快速入門的書。光會原生JS不夠，還要會用庫，

  • Vue

  • Vue對於新手仍是比較友好的（只看過Vue，不敢逼逼）。這個直接看官網的教程就能夠了

  • 官網教程

  • 《ES6 入門教程》

  • 線上版地址
  • 起碼過一遍，瞭解ES6的基礎用法，代理那一部分能夠先不看

JavaScript進階

這一部分，能夠分紅倆個部分

  • 對於JS的高階用法
  • 對於原理的掌握

高階用法



原理的掌握

  • 《JavaScript高級程序設計（第3版）》
    • 沒錯，就是它，你仍是須要再看一遍（這已是第n遍了）
  • 《ES6 入門教程》
  • 《你不知道的JavaScript》系列
    • 《你不知道的JavaScript(上卷)》
      • 內容：做用域和閉包以及this和對象原型
      • 重要性： 這本書能夠重點看下
    • 《你不知道的JavaScript(中卷)》
      • 內容：類型、語法、異步和性能
      • 關於類型，語法部分講得還能夠
      • 異步的話能夠去看《ES6標準入門》
      • 性能部分的話，不推薦看
    • 《你不知道的JavaScript(下卷)》
      • 內容：JavaScript入門知識和對ES6及將來發展趨勢的展望
      • JavaScript入門知識部分能夠看下，是對前倆本的總結以及一些語法的內容
      • ES6部分的話不推薦看
  • 《深刻理解ES6》
    • 這本書能夠在看完《ES6 入門教程》以後去看    
  • 《JavaScript 忍者祕籍》
    • 必定要買第二版

Vue進階

  • 剖析 Vue.js 內部運行機制
    • vue內部的基礎原理的理解，初級程度
  • 《深刻淺出Vue.js》，
    • 做者每單介紹一個部分的時候，都會由最簡單抽象的一個demo，一步一步變成框架實際的樣子，最後拿你寫的demo和框架實際的對比，分析雙方優缺點。
  • Vue.js 技術揭祕
    • 源碼解析，中等程度
  • vue全面解析
    • 超級詳細 - 逐行級別的分析
    • 下載代碼，而後使用elegant分支

瀏覽器原理

數據結構與算法



盜一張圖
最近在學習數據結構與算法之美，上面是王爭老師推薦的書單，能夠按照需求去讀對應的書籍

設計模式

  • 《JavaScript設計模式與開發實踐》



  • 推薦看下

  •  湯姆大叔的博客

    • 深刻理解JavaScript系列 裏面包含有各類深刻以及設計模式

網絡

  • 《圖解http》
    • 知足平常的基本使用
    • 入門級別
  • 《圖解 tcp 協議》
    • 入門級別
  • 極客時間-透視 HTTP 協議 
    • 這個課程經過歷史，定義，安全，性能等多個方面講解了http協議
    • 能夠比較全面的瞭解網絡知識
  • TCP/IP 詳解（第一卷）
    • 深刻講解的TCP/IP

性能優化

推薦的三本書籍，比較全面的進行性能優化
瀏覽器的優化能夠看谷歌和MDN部分，比較深刻，也和前端的比較貼近

  • 《高性能網站建設指南》
  • 《高性能網站建設進階指南》
  • 《Web性能權威指南》
  • 谷歌開發團隊的性能優化
    • 針對瀏覽器部分進行性能優化，裏面從關鍵 RAIL 指標進行性能優化的分析，能夠作參考
  • MDN性能優化
    • 和谷歌相似，從瀏覽器角度進行性能優化

前端工程化

這部分還在計劃學習中，這裏能夠參考LienJack的前端工程化部分

  • 使用和基本概念
    • 瞭解 loader、plugin，而且掌握一些基本經常使用的
    • 瞭解 babel

參考資料：玩轉webpack

  • 學會優化
    • 體積優化：tree shaking、按需引入，代碼切割
    • 打包速度優化：緩存、多線程打包、優化打包路徑

參考資料：

  1. 原理

其餘

總結

經過上面的介紹，你們應該對不一樣的階段有了清晰的路線了吧，但願你們能夠在往後的職業生涯繼續馳騁吧。（申明，本文不是前端勸退文章）

後續文章的輸出規劃

在最近的學習過程當中，發如今網絡，瀏覽器，性能優化,JS進階等部分不一樣的知識發生了好多的交叉，接下來想經過URL到渲染完成這道經典問題，來梳理一下這些知識，構建前端的知識體系。

這一系列的主體脈絡會按照從輸入URL到頁面加載的過程？如何由一道題完善本身的前端知識體系！來寫，不一樣點是會比這篇文章更加詳細，也會從基礎，安全，性能等角度來看待這一過程。

若是以爲還不錯的話，能夠點贊，加收藏，來關注這一系列文章的輸出。歡迎你們監督（催更）。

再次感謝

參考資料

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程