Web前端很難學？html、css t、JavaScrip知識架構圖分享

以前開發者只要掌握 HTML、CSS、JavaScript 三駕馬車就能勝任一份前端的工作了。而現在除了普通的編碼以外，還要考慮如何效能最佳化，如何跨端、跨平臺實現功能，尤其是 AI、5G 技術的來臨，都在加快前端技術的更新，也在逼促開發者要不停的學習，不能的接受新的技術標準。

“學什麼”“怎麼學”其實是我們要著重解決的問題。所以，今天給你梳理一下前端知識框架，幫你把知識點重新做個遍歷，查缺補漏的學習更輕鬆。

我們先來看什麼叫做知識架構？

我們可以把它理解為知識的“目錄”或者索引，它能夠幫助我們把零散的知識組織起來，也能夠幫助我們發現一些知識上的盲區。

本文包含了JavaScript、CSS和HTML以及瀏覽器的實現原理和API，這三個模組涵蓋了一個前端工程師所需要掌握的全部知識。

JavaScript知識架構圖

在JavaScript的模組中，首先我們可以把語言按照文法、語義和執行時來拆分，這符合程式語言的一般規律：用一定的詞法和語法，表達一定語義，從而操作執行時。

執行時可以分為資料結構和演算法部分——資料結構包含型別和例項（內建物件），演算法是執行過程。執行過程應按照從最頂層的事件迴圈和微任務，到函式、再到語句級的執行。

語法和語義基本是一一對應關係，在JavaScript標準中有一份語法定義表，建議隨時拿出來看一看。

HTML 和 CSS知識架構圖

在HTML的部分，我們按照功能和語言來劃分它的知識，HTML的功能主要由標籤來承擔，所以首先要把標籤做一些分類。圖中元素後面的分類，便是我們按照承擔的不同功能，把標籤分成的幾個類別。

除了標籤之外，你還應該把HTML當作一門語言來了解下。較基礎的HTML的語法和幾個重要的語言機制：實體、名稱空間，你一定要掌握。

CSS部分，可以按照語言和功能劃分。

語言部分，@rule、選擇器、單位是三個要關注的部分。

功能部分，可以重點關注佈局（正常流和彈性佈局）、繪製（圖形和文字）以及互動類。

瀏覽器的實現原理和API

瀏覽器的實現原理，是我們深入理解 API 的基礎

從一般的瀏覽器設計出發，按照解析、構建DOM樹、計算CSS、渲染、合成和繪製的流程來學習瀏覽器的工作原理。

在API部分，可以從W3C零散的標準中挑選幾個大塊的API來詳細講解，主要有：事件、DOM、CSSOM幾個部分，他們分別覆蓋了互動、語義和可見效果，這是我們工作中用到的主要內容。

自己是從事了五年的前端工程師，不少人私下問我，2019年前端該怎麼學，方法有沒有？

沒錯，年初我花了一個多月的時間整理出來的學習資料，希望能幫助那些想學習前端，卻又不知道怎麼開始學習的朋友。

這裡推薦一下我的前端學習交流群：784783012，裡面都是學習前端的從最基礎的HTML+CSS+JS【炫酷特效，遊戲，外掛封裝，設計模式】到移動端HTML5的專案實戰的學習資料都有整理，送給每一位前端小夥伴。2019最新技術，與企業需求同步。好友都在裡面學習交流，每天都會有大牛定時講解前端技術!