資訊專(zhuān)欄INFORMATION COLUMN
摘要：知識(shí)點(diǎn)前端面試有很多知識(shí)點(diǎn)，因?yàn)榍岸吮揪蜕婕暗蕉鄠€(gè)方面。因?yàn)閷?duì)于這樣的前端框架我還不是很熟練，在這方面不能提供很好的學(xué)習(xí)思路。
關(guān)于這幾次的面試
前幾次的面試，讓我對(duì)于一個(gè)前端工程師需要掌握的知識(shí)體系有了一個(gè)全新的認(rèn)識(shí)。之前自己在學(xué)習(xí)方面一直屬于野路子，沒(méi)有一個(gè)很規(guī)范的學(xué)習(xí)路徑，往往都是想到什么就去學(xué)什么。而且基本都是處于會(huì)用的那種水平。并沒(méi)有真正的做到知其然且知其所以然。面試基本都沒(méi)有通過(guò)，我自己也明白了自己在那些方面需要深入學(xué)習(xí)。
知識(shí)點(diǎn)前端面試有很多知識(shí)點(diǎn)，因?yàn)榍岸吮揪蜕婕暗蕉鄠€(gè)方面。當(dāng)我完全抱著背的想法去應(yīng)付面試官的問(wèn)題時(shí)，我發(fā)現(xiàn)我很懼怕面試官深入的去提問(wèn)。因?yàn)樾睦镏?，我是不知道的，我只是背的。讓我想到了高中的考試，也很怕考那種證明題，因?yàn)閷?duì)概念和原理，掌握的不透徹。
看了這么多的優(yōu)秀的文章，還有一些自己的反省思考。我覺(jué)得對(duì)于大部分的初級(jí)前端來(lái)說(shuō)，要改變自己對(duì)于這些知識(shí)點(diǎn)的態(tài)度，才能更好的去理解這些知識(shí)點(diǎn)的原理，面對(duì)面試官的話(huà)，就算你不懂，你也不會(huì)虛，因?yàn)槟銜?huì)有自己對(duì)于這個(gè)關(guān)鍵詞的理解。
就像大學(xué)的課程一樣，在大一大二思維不成熟的時(shí)候，面對(duì)那些課程決定它們對(duì)于我敲代碼并沒(méi)有什么作用，有那個(gè)時(shí)間我還不如多背幾個(gè)API。到后面，編程的時(shí)候會(huì)考慮風(fēng)格，性能，交互等方面的時(shí)候，我才發(fā)現(xiàn)之前學(xué)習(xí)的課程都是有用的，只是當(dāng)時(shí)編程能力沒(méi)有跟上，并沒(méi)有動(dòng)力驅(qū)動(dòng)我們?nèi)ド钊肜斫獠⑹褂谩?br>所以這里我也覺(jué)得，你學(xué)的都是有用的，但是有些并不是當(dāng)時(shí)就會(huì)發(fā)揮作用的。
關(guān)于前端面試會(huì)提到的知識(shí)點(diǎn)，在我稍微看了一下《webkit技術(shù)內(nèi)幕》之后，我覺(jué)得按照瀏覽器內(nèi)核中的不同功能去理解會(huì)有更好的效果。
網(wǎng)絡(luò)
資源管理
網(wǎng)頁(yè)瀏覽
Javascript 運(yùn)行
根據(jù)上面四個(gè)大概的功能，就可以引導(dǎo)出我們需要掌握的知識(shí)了。
網(wǎng)絡(luò)網(wǎng)絡(luò)部分涉及到的就是HTTP請(qǐng)求，因?yàn)槲覀冊(cè)L問(wèn)網(wǎng)頁(yè)的過(guò)程就是通過(guò)特定的URL來(lái)獲得相應(yīng)的資源（數(shù)據(jù)或文件）。
那么關(guān)于HTTP就有
協(xié)議版本
請(qǐng)求頭中包含那些屬性，有哪些意義
請(qǐng)求方式之間的不同
響應(yīng)狀態(tài)碼的含義
狀態(tài)的管理 cookie的設(shè)置和傳遞。
HTTP協(xié)議是TCP協(xié)議的一種實(shí)現(xiàn)，是應(yīng)用層的協(xié)議，TCP協(xié)議則是傳輸層的協(xié)議。還可以追溯到IP協(xié)議，四層網(wǎng)絡(luò)模型。
資源管理通過(guò)之前的網(wǎng)絡(luò)請(qǐng)求，我們可以獲取相應(yīng)的文件，那么這些文件存放在本地磁盤(pán)中。而像文件上傳，cookie的存放，以及瀏覽器提供的數(shù)據(jù)庫(kù)，都是存放在本地的，瀏覽器提供了一系列的API去操作這些文件。
cookie的存放位置，刪除機(jī)制。
緩存的更新機(jī)制
文件操作的API
web數(shù)據(jù)存放的API( cookie,localstorage,sessionstroage,indexDB...)
網(wǎng)頁(yè)的瀏覽當(dāng)我們獲取到了一個(gè)html文件，我們開(kāi)始解析，首先根據(jù)文件的聲明去解析這個(gè)網(wǎng)頁(yè)，構(gòu)建DOM樹(shù)，這是css也在下載，因?yàn)?b>css層疊樣式表,下載成功之后根據(jù)多方來(lái)源開(kāi)始計(jì)算最終的css效果,然后與DOM樹(shù)相結(jié)合，形成渲染樹(shù)再開(kāi)始繪制再瀏覽器界面。解析網(wǎng)頁(yè)的時(shí)候，遇到script的時(shí)候會(huì)開(kāi)始執(zhí)行相應(yīng)的代碼，阻塞DOM樹(shù)的生成。
那么這個(gè)過(guò)程就涉及到了：
css的計(jì)算
dom樹(shù)的生成
sript的阻塞加載
頁(yè)面的繪制
重繪與重排
javascript運(yùn)行因?yàn)閖avascript是單線程的解釋型語(yǔ)言，從上到下解釋運(yùn)行。但是js中又有異步的概念，這就又引出了事件循環(huán)這個(gè)概念：
事件循環(huán) Event Loop
宏任務(wù)（macro-task） 微任務(wù)（micro-tack）
JS運(yùn)行機(jī)制
線程 和 進(jìn)程
js作用域，執(zhí)行環(huán)境
性能通過(guò)瀏覽器的這幾個(gè)模塊，我們了解了一些知識(shí)點(diǎn)，但是還有其他的，比如性能。
對(duì)于性能的優(yōu)化，也可以從這幾個(gè)方面去理解。性能在前端減少一個(gè)頁(yè)面加載的時(shí)間。
通過(guò)緩存，減少HTTP的文件傳輸。
通過(guò)壓縮資源，減少傳輸時(shí)間
通過(guò)優(yōu)秀的CSS 以及 頁(yè)面結(jié)構(gòu)設(shè)計(jì) 減少 瀏覽器渲染時(shí)間。
SE0對(duì)于SEO的話(huà)，我們主要是為了在搜索的時(shí)候讓自己的網(wǎng)站排名靠前。那么我們可以理解一下網(wǎng)絡(luò)爬蟲(chóng)，然后對(duì)于這方面的優(yōu)化就會(huì)有一個(gè)大概的理解。
網(wǎng)頁(yè)爬蟲(chóng)，通過(guò)一個(gè)入口，訪問(wèn)符合規(guī)則的很多URL，來(lái)獲得頁(yè)面，通過(guò)解析頁(yè)面標(biāo)簽的結(jié)構(gòu)，來(lái)存放一些關(guān)鍵信息。
比如網(wǎng)頁(yè)head中的title,meta的describe，keywords。還有一些內(nèi)容，但是因?yàn)榕老x(chóng)并不是瀏覽器，所以一般不能在遇到script、link這些需要額外發(fā)起網(wǎng)絡(luò)請(qǐng)求的資源并解析，所以對(duì)于大部分只是分析靜態(tài)的頁(yè)面。
那么，我們就可以知道：
規(guī)范編寫(xiě)html結(jié)構(gòu)，便于爬蟲(chóng)解析
關(guān)鍵詞，title，內(nèi)容等信息要完善
減少使用js輸出內(nèi)容
訪問(wèn)速度要快
總結(jié)對(duì)于整個(gè)基礎(chǔ)前端知識(shí)，我先分析到這里。因?yàn)閷?duì)于vue react這樣的前端框架我還不是很熟練，在這方面不能提供很好的學(xué)習(xí)思路。
希望大家能找到適合自己的學(xué)習(xí)方式并構(gòu)建屬于自己的知識(shí)體系。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/93834.html
摘要：半路出家的前端程序員應(yīng)該不在少數(shù)，我也是其中之一。年，馮馮同事兼師兄看我寫(xiě)太費(fèi)勁，跟我說(shuō)對(duì)面樓在找，問(wèn)我要不要學(xué)，說(shuō)出來(lái)可能有點(diǎn)丟人，但是在那之前，我真得不知道什么是，什么是。 半路出家的前端程序員應(yīng)該不在少數(shù)，我也是其中之一。 為何會(huì)走向前端 非計(jì)算機(jī)專(zhuān)業(yè)的我，畢業(yè)之后，就職于一家電力行業(yè)公司，做過(guò)設(shè)備調(diào)試、部門(mén)助理、測(cè)試，也寫(xiě)過(guò)一段時(shí)間的QT，那三年的時(shí)間，最難過(guò)的不是工作忙不忙，...
摘要：春招前端實(shí)習(xí)面試記錄從就開(kāi)始漸漸的進(jìn)行復(fù)習(xí)，月末開(kāi)始面試，到現(xiàn)在四月中旬基本宣告結(jié)束。上海愛(ài)樂(lè)奇一面盒模型除之外的面向?qū)ο笳Z(yǔ)言繼承因?yàn)槭且曨l面試，只記得這么多，只感覺(jué)考察的面很廣，前端后端移動(dòng)端都問(wèn)了，某方面也有深度。 春招前端實(shí)習(xí)面試記錄(2019.3 ~ 2019.5) 從2019.1就開(kāi)始漸漸的進(jìn)行復(fù)習(xí)，2月末開(kāi)始面試，到現(xiàn)在四月中旬基本宣告結(jié)束。在3月和4月經(jīng)歷了無(wú)數(shù)次失敗，沮...
摘要：還記得剛開(kāi)始學(xué)習(xí)的時(shí)候，內(nèi)存管理前端掘金作為一門(mén)高級(jí)語(yǔ)言，并不像低級(jí)語(yǔ)言那樣擁有對(duì)內(nèi)存的完全掌控。第三方庫(kù)的行代碼內(nèi)實(shí)現(xiàn)一個(gè)前端掘金前言本文會(huì)教你如何在行代碼內(nèi)，不依賴(lài)任何第三方的庫(kù)，用純實(shí)現(xiàn)一個(gè)。 (譯) 如何使用 JavaScript 構(gòu)建響應(yīng)式引擎 —— Part 1：可觀察的對(duì)象 - 掘金原文地址：How to build a reactive engine in JavaSc...
摘要：還記得剛開(kāi)始學(xué)習(xí)的時(shí)候，內(nèi)存管理前端掘金作為一門(mén)高級(jí)語(yǔ)言，并不像低級(jí)語(yǔ)言那樣擁有對(duì)內(nèi)存的完全掌控。第三方庫(kù)的行代碼內(nèi)實(shí)現(xiàn)一個(gè)前端掘金前言本文會(huì)教你如何在行代碼內(nèi)，不依賴(lài)任何第三方的庫(kù)，用純實(shí)現(xiàn)一個(gè)。 (譯) 如何使用 JavaScript 構(gòu)建響應(yīng)式引擎 —— Part 1：可觀察的對(duì)象 - 掘金原文地址：How to build a reactive engine in JavaSc...
摘要：之前張?chǎng)涡癫┛蛯?xiě)的效果講解得不錯(cuò)啊，既然是大神，應(yīng)該能搜出點(diǎn)什么，結(jié)果一搜，還真有。參考感謝張?chǎng)涡襁@篇文章好吧，變換，不過(guò)如此還有一篇寫(xiě)得不錯(cuò)的，幫助理解和屬性最后引用張?chǎng)涡竦囊痪湓?huà)純粹從網(wǎng)上些效果代碼，那永遠(yuǎn)就是的命咯 起因 昨晚在做慕課網(wǎng)的十天精通CSS3課程，其中的綜合練習(xí)是要做一個(gè)3D導(dǎo)航翻轉(zhuǎn)的效果。非常高大上。 以往這些效果我都很不屑，覺(jué)得網(wǎng)上一大堆這些特效的代碼，復(fù)制粘貼就...
閱讀 2090·2021-11-24 09:39
閱讀 2197·2021-09-22 15:50
閱讀 2157·2021-09-22 14:57
閱讀 777·2021-07-28 00:13
閱讀 1137·2019-08-30 15:54
閱讀 2420·2019-08-30 15:52
閱讀 2745·2019-08-30 13:07
閱讀 3911·2019-08-30 11:27
