作為一個(gè)java開(kāi)發(fā)工程師，由于實(shí)際工作中內(nèi)容卻有大部分都在前端頁(yè)面部分，并且在開(kāi)發(fā)過(guò)程中越發(fā)感受到前端知識(shí)的欠缺，不僅做不到熟練的實(shí)現(xiàn)一個(gè)漂亮的頁(yè)面，同時(shí)也在頁(yè)面的編寫(xiě)，優(yōu)化及bug排查工作上顯得效率低下，浪費(fèi)了不少時(shí)間。
總結(jié)原因，除了工作經(jīng)驗(yàn)的不足，更本質(zhì)的在于沒(méi)有一個(gè)系統(tǒng)的前端知識(shí)框架。
雖然個(gè)人在職業(yè)定位上偏向后端，但花費(fèi)時(shí)間和精力打下一個(gè)對(duì)于前端的整體知識(shí)框架的基礎(chǔ)還是有必要的，一是在現(xiàn)階段的工作來(lái)說(shuō)，避免有明顯的短板很重要，二是現(xiàn)在大部分后端崗位實(shí)際也要兼顧著開(kāi)發(fā)頁(yè)面，為了提高工作效率是有必要的。
所以下定決心花費(fèi)一些時(shí)間來(lái)學(xué)習(xí)下前端知識(shí)，學(xué)習(xí)的重點(diǎn)也在于系統(tǒng)二字。
前端的知識(shí)，基礎(chǔ)包含了三大部分。 JavaScript 語(yǔ)言、CSS 和 HTML以及瀏覽器的實(shí)現(xiàn)原理和 API。
一，JavaScript
JavaScript語(yǔ)言可以按照文法、語(yǔ)義和運(yùn)行時(shí)來(lái)拆分，這符合編程語(yǔ)言的一般規(guī)律：用一定的詞法和語(yǔ)法，表達(dá)一定語(yǔ)義，從而操作運(yùn)行時(shí)。
文法分為詞法、語(yǔ)法。語(yǔ)法和語(yǔ)義基本是一一對(duì)應(yīng)關(guān)系，在 JavaScript 標(biāo)準(zhǔn)中有一份語(yǔ)法定義表。
運(yùn)行時(shí)分為數(shù)據(jù)結(jié)構(gòu)和算法：數(shù)據(jù)結(jié)構(gòu)包含類(lèi)型和實(shí)例。
類(lèi)型就是它的 7 種基本類(lèi)型和 7 種語(yǔ)言類(lèi)型。
實(shí)例，對(duì) JavaScript 來(lái)說(shuō)類(lèi)似基礎(chǔ)庫(kù)，JavaScipt 的內(nèi)置對(duì)象多達(dá) 150 以上。
算法，就是 JavaScript 的執(zhí)行過(guò)程。執(zhí)行過(guò)程(算法)從大結(jié)構(gòu)到小結(jié)構(gòu)的角度，包括從最頂層的程序與模塊、事件循環(huán)和微任務(wù)，到函數(shù)、再到語(yǔ)句級(jí)的執(zhí)行。
二，HTML 和 CSS
HTML 的標(biāo)簽可以分為很多種。
標(biāo)簽分成下面幾種。
文檔元信息：通常是出現(xiàn)在 head 標(biāo)簽中的元素，包含了描述文檔自身的一些信息；如 title、meta、style、link、base 。
語(yǔ)義相關(guān)：擴(kuò)展了純文本，表達(dá)文章結(jié)構(gòu)、不同語(yǔ)言要素的標(biāo)簽；如 section、nav。
鏈接：提供到文檔內(nèi)和文檔外的鏈接；
替換型標(biāo)簽：引入聲音、圖片、視頻等外部元素替換自身的一類(lèi)標(biāo)簽；如img、video、audio。
表單：用于填寫(xiě)和提交信息的一類(lèi)標(biāo)簽；如 input、button。
表格：表頭、表尾、單元格等表格的結(jié)構(gòu)。如table
HTML 作為標(biāo)記語(yǔ)言跟編程語(yǔ)言不太一樣，沒(méi)有編程語(yǔ)言那么嚴(yán)謹(jǐn)，HTML 重要的語(yǔ)言機(jī)制：實(shí)體、命名空間。
HTML 的補(bǔ)充標(biāo)準(zhǔn)：ARIA，它是 HTML 的擴(kuò)展，在可訪問(wèn)性領(lǐng)域，它有至關(guān)重要的作用。
CSS
css的學(xué)習(xí)主要包含兩部分，語(yǔ)法和功能。
語(yǔ)法結(jié)構(gòu)，比如 @rule、選擇器、單位等等。
功能部分，大致可以分為布局、繪制和交互類(lèi)。
1.布局：正常流和彈性布局。
2.繪制類(lèi)：圖形相關(guān)的和文字相關(guān)的繪制。
3.交互類(lèi)：略
三，瀏覽器的實(shí)現(xiàn)原理和 API
可以按照解析、構(gòu)建 DOM 樹(shù)、計(jì)算 CSS、渲染、合成和繪制的流程來(lái)理解瀏覽器的工作原理。
在 API 部分，從W3C 零散的標(biāo)準(zhǔn)中幾個(gè)大塊的 API ，主要有：事件、DOM、CSSOM ，它們分別覆蓋了交互、語(yǔ)義和可見(jiàn)效果，這是工作中用到的主要內(nèi)容。
以上就是對(duì)于前端的整體基礎(chǔ)知識(shí)的框架，也是一個(gè)對(duì)于前端技術(shù)的整體認(rèn)知。
寫(xiě)在最后，
沒(méi)人能夠記住所有的知識(shí)，前端知識(shí)無(wú)比龐雜，不可避免會(huì)遇到一個(gè)記不住的知識(shí)，當(dāng)有了一個(gè)知識(shí)框架，至少做到能快速定位到它在知識(shí)架構(gòu)中的位置，聯(lián)想到相關(guān)的知識(shí)，知道如何快速查找資料，相比零散的去記憶知識(shí)點(diǎn)，一定是更為科學(xué)的學(xué)習(xí)方法。
