關於這幾次的面試

前幾次的面試，讓我對於一個前端工程師需要掌握的知識體系有了一個全新的認識。之前自己在學習方面一直屬於野路子，沒有一個很規範的學習路徑，往往都是想到什麼就去學什麼。而且基本都是處於會用的那種水平。並沒有真正的做到知其然且知其所以然。面試基本都沒有通過，我自己也明白了自己在那些方面需要深入學習。

知識點

前端面試有很多知識點，因為前端本就涉及到多個方面。當我完全抱著背的想法去應付面試官的問題時，我發現我很懼怕面試官深入的去提問。因為心裡知道，我是不知道的，我只是背的。讓我想到了高中的考試，也很怕考那種證明題，因為對概念和原理，掌握的不透徹。
看了這麼多的優秀的文章，還有一些自己的反省思考。我覺得對於大部分的初級前端來說，要改變自己對於這些知識點的態度，才能更好的去理解這些知識點的原理，面對面試官的話，就算你不懂，你也不會虛，因為你會有自己對於這個關鍵詞的理解。
就像大學的課程一樣，在大一大二思維不成熟的時候，面對那些課程決定它們對於我敲程式碼並沒有什麼作用，有那個時間我還不如多背幾個API。到後面，程式設計的時候會考慮風格，效能，互動等方面的時候，我才發現之前學習的課程都是有用的，只是當時程式設計能力沒有跟上，並沒有動力驅動我們去深入理解並使用。
所以這裡我也覺得，你學的都是有用的，但是有些並不是當時就會發揮作用的。

關於前端面試的幾個知識

關於前端面試會提到的知識點，在我稍微看了一下《webkit技術內幕》之後，我覺得按照瀏覽器核心中的不同功能去理解會有更好的效果。

• 網路
• 資源管理
• 網頁瀏覽
• Javascript 執行
  根據上面四個大概的功能，就可以引匯出我們需要掌握的知識了。

網路

網路部分涉及到的就是HTTP請求，因為我們訪問網頁的過程就是通過特定的URL來獲得相應的資源（資料或檔案）。
那麼關於HTTP就有

• 協議版本
• 請求頭中包含那些屬性，有哪些意義
• 請求方式之間的不同
• 響應狀態碼的含義
• 狀態的管理 cookie的設定和傳遞。
• HTTP協議是TCP協議的一種實現，是應用層的協議，TCP協議則是傳輸層的協議。還可以追溯到IP協議，四層網路模型。

資源管理

通過之前的網路請求，我們可以獲取相應的檔案，那麼這些檔案存放在本地磁碟中。而像檔案上傳，cookie的存放，以及瀏覽器提供的資料庫，都是存放在本地的，瀏覽器提供了一系列的API去操作這些檔案。

• cookie的存放位置，刪除機制。
• 快取的更新機制
• 檔案操作的API
• web資料存放的API( cookie,localstorage,sessionstroage,indexDB…)

網頁的瀏覽

當我們獲取到了一個html檔案，我們開始解析，首先根據檔案的<! doctype>宣告去解析這個網頁，構建DOM樹，這是css也在下載，因為css層疊樣式表,下載成功之後根據多方來源開始計算最終的css效果,然後與DOM樹相結合，形成渲染樹再開始繪製再瀏覽器介面。解析網頁的時候，遇到script的時候會開始執行相應的程式碼，阻塞DOM樹的生成。
那麼這個過程就涉及到了：

• css的計算
• dom樹的生成
• script的阻塞載入
• 頁面的繪製
• 重繪與重排

javascript執行

因為javascript是單執行緒的解釋型語言，從上到下解釋執行。但是js中又有非同步的概念，這就又引出了事件迴圈這個概念：

• 事件迴圈 Event Loop
• 巨集任務（macro-task） 微任務（micro-tack）
• JS執行機制
• 執行緒 和 程式
• js作用域，執行環境

效能

通過瀏覽器的這幾個模組，我們瞭解了一些知識點，但是還有其他的，比如效能。
對於效能的優化，也可以從這幾個方面去理解。效能在前端減少一個頁面載入的時間。

• 通過快取，減少HTTP的檔案傳輸。
• 通過壓縮資源，減少傳輸時間
• 通過優秀的CSS 以及 頁面結構設計 減少 瀏覽器渲染時間。

SE0

對於SEO的話，我們主要是為了在搜尋的時候讓自己的網站排名靠前。那麼我們可以理解一下網路爬蟲，然後對於這方面的優化就會有一個大概的理解。
網頁爬蟲，通過一個入口，訪問符合規則的很多URL，來獲得頁面，通過解析頁面標籤的結構，來存放一些關鍵資訊。
比如網頁head中的title,meta的describe，keywords。還有一些內容，但是因為爬蟲並不是瀏覽器，所以一般不能在遇到script、link這些需要額外發起網路請求的資源並解析，所以對於大部分只是分析靜態的頁面。
那麼，我們就可以知道：

• 規範編寫html結構，便於爬蟲解析
• 關鍵詞，title，內容等資訊要完善
• 減少使用js輸出內容
• 訪問速度要快

總結

對於整個基礎前端知識，我先分析到這裡。因為對於vue react這樣的前端框架我還不是很熟練，在這方面不能提供很好的學習思路。
希望大家能找到適合自己的學習方式並構建屬於自己的知識體系。