前端面試-好難哇~

關於這幾回的面試

前幾回的面試，讓我對於一個前端工程師須要掌握的知識體系有了一個全新的認識。以前本身在學習方面一直屬於野路子，沒有一個很規範的學習路徑，每每都是想到什麼就去學什麼。並且基本都是處於會用的那種水平。並無真正的作到知其然且知其因此然。面試基本都沒有經過，我本身也明白了本身在那些方面須要深刻學習。

知識點

前端面試有不少知識點，由於前端本就涉及到多個方面。當我徹底抱着背的想法去應付面試官的問題時，我發現我很害怕面試官深刻的去提問。由於內心知道，我是不知道的，我只是背的。讓我想到了高中的考試，也很怕考那種證實題，由於對概念和原理，掌握的不透徹。
看了這麼多的優秀的文章，還有一些本身的檢討思考。我以爲對於大部分的初級前端來講，要改變本身對於這些知識點的態度，才能更好的去理解這些知識點的原理，面對面試官的話，就算你不懂，你也不會虛，由於你會有本身對於這個關鍵詞的理解。
就像大學的課程同樣，在大一大二思惟不成熟的時候，面對那些課程決定它們對於我敲代碼並無什麼做用，有那個時間我還不如多背幾個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樹的生成
• sript的阻塞加載
• 頁面的繪製
• 重繪與重排

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這樣的前端框架我還不是很熟練，在這方面不能提供很好的學習思路。但願你們能找到適合本身的學習方式並構建屬於本身的知識體系。