前端面試-好難哇~

funnyZhang 發(fā)布于2019-08-22 15:53 / 1491人閱讀

摘要：知識點前端面試有很多知識點，因為前端本就涉及到多個方面。因為對于這樣的前端框架我還不是很熟練，在這方面不能提供很好的學(xué)習(xí)思路。

關(guān)于這幾次的面試

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

知識點

前端面試有很多知識點，因為前端本就涉及到多個方面。當(dāng)我完全抱著背的想法去應(yīng)付面試官的問題時，我發(fā)現(xiàn)我很懼怕面試官深入的去提問。因為心里知道，我是不知道的，我只是背的。讓我想到了高中的考試，也很怕考那種證明題，因為對概念和原理，掌握的不透徹。
看了這么多的優(yōu)秀的文章，還有一些自己的反省思考。我覺得對于大部分的初級前端來說，要改變自己對于這些知識點的態(tài)度，才能更好的去理解這些知識點的原理，面對面試官的話，就算你不懂，你也不會虛，因為你會有自己對于這個關(guān)鍵詞的理解。
就像大學(xué)的課程一樣，在大一大二思維不成熟的時候，面對那些課程決定它們對于我敲代碼并沒有什么作用，有那個時間我還不如多背幾個API。到后面，編程的時候會考慮風(fēng)格，性能，交互等方面的時候，我才發(fā)現(xiàn)之前學(xué)習(xí)的課程都是有用的，只是當(dāng)時編程能力沒有跟上，并沒有動力驅(qū)動我們?nèi)ド钊肜斫獠⑹褂谩?br>所以這里我也覺得，你學(xué)的都是有用的，但是有些并不是當(dāng)時就會發(fā)揮作用的。

關(guān)于前端面試的幾個知識

關(guān)于前端面試會提到的知識點，在我稍微看了一下《webkit技術(shù)內(nèi)幕》之后，我覺得按照瀏覽器內(nèi)核中的不同功能去理解會有更好的效果。

網(wǎng)絡(luò)

資源管理

網(wǎng)頁瀏覽

Javascript 運行

根據(jù)上面四個大概的功能，就可以引導(dǎo)出我們需要掌握的知識了。

網(wǎng)絡(luò)

網(wǎng)絡(luò)部分涉及到的就是HTTP請求，因為我們訪問網(wǎng)頁的過程就是通過特定的URL來獲得相應(yīng)的資源（數(shù)據(jù)或文件）。
那么關(guān)于HTTP就有

協(xié)議版本

請求頭中包含那些屬性，有哪些意義

請求方式之間的不同

響應(yīng)狀態(tài)碼的含義

狀態(tài)的管理 cookie的設(shè)置和傳遞。

HTTP協(xié)議是TCP協(xié)議的一種實現(xiàn)，是應(yīng)用層的協(xié)議，TCP協(xié)議則是傳輸層的協(xié)議。還可以追溯到IP協(xié)議，四層網(wǎng)絡(luò)模型。

資源管理

通過之前的網(wǎng)絡(luò)請求，我們可以獲取相應(yīng)的文件，那么這些文件存放在本地磁盤中。而像文件上傳，cookie的存放，以及瀏覽器提供的數(shù)據(jù)庫，都是存放在本地的，瀏覽器提供了一系列的API去操作這些文件。

cookie的存放位置，刪除機制。

緩存的更新機制

文件操作的API

web數(shù)據(jù)存放的API( cookie,localstorage,sessionstroage,indexDB...)

網(wǎng)頁的瀏覽

當(dāng)我們獲取到了一個html文件，我們開始解析，首先根據(jù)文件的聲明去解析這個網(wǎng)頁，構(gòu)建DOM樹，這是css也在下載，因為css層疊樣式表,下載成功之后根據(jù)多方來源開始計算最終的css效果,然后與DOM樹相結(jié)合，形成渲染樹再開始繪制再瀏覽器界面。解析網(wǎng)頁的時候，遇到script的時候會開始執(zhí)行相應(yīng)的代碼，阻塞DOM樹的生成。
那么這個過程就涉及到了：

css的計算

dom樹的生成

sript的阻塞加載

頁面的繪制

重繪與重排

javascript運行

因為javascript是單線程的解釋型語言，從上到下解釋運行。但是js中又有異步的概念，這就又引出了事件循環(huán)這個概念：

事件循環(huán) Event Loop

宏任務(wù)（macro-task）微任務(wù)（micro-tack）

JS運行機制

線程和進程

js作用域，執(zhí)行環(huán)境

性能

通過瀏覽器的這幾個模塊，我們了解了一些知識點，但是還有其他的，比如性能。
對于性能的優(yōu)化，也可以從這幾個方面去理解。性能在前端減少一個頁面加載的時間。

通過緩存，減少HTTP的文件傳輸。

通過壓縮資源，減少傳輸時間

通過優(yōu)秀的CSS 以及頁面結(jié)構(gòu)設(shè)計減少瀏覽器渲染時間。

SE0

對于SEO的話，我們主要是為了在搜索的時候讓自己的網(wǎng)站排名靠前。那么我們可以理解一下網(wǎng)絡(luò)爬蟲，然后對于這方面的優(yōu)化就會有一個大概的理解。
網(wǎng)頁爬蟲，通過一個入口，訪問符合規(guī)則的很多URL，來獲得頁面，通過解析頁面標簽的結(jié)構(gòu)，來存放一些關(guān)鍵信息。
比如網(wǎng)頁head中的title,meta的describe，keywords。還有一些內(nèi)容，但是因為爬蟲并不是瀏覽器，所以一般不能在遇到script、link這些需要額外發(fā)起網(wǎng)絡(luò)請求的資源并解析，所以對于大部分只是分析靜態(tài)的頁面。
那么，我們就可以知道：

規(guī)范編寫html結(jié)構(gòu)，便于爬蟲解析

關(guān)鍵詞，title，內(nèi)容等信息要完善

減少使用js輸出內(nèi)容

訪問速度要快

總結(jié)

對于整個基礎(chǔ)前端知識，我先分析到這里。因為對于vue react這樣的前端框架我還不是很熟練，在這方面不能提供很好的學(xué)習(xí)思路。
希望大家能找到適合自己的學(xué)習(xí)方式并構(gòu)建屬于自己的知識體系。