亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

前端面試題總結(jié)

yangrd / 892人閱讀

摘要：工作中總結(jié)的一些比較重要的前端技能，覺(jué)得在面試中比較合適提問(wèn)，即能查看出面試者的技術(shù)功底，又能考察其知識(shí)體系的廣度。異步編程的考察，其關(guān)鍵字的使用，與的關(guān)系，同時(shí)可以深入考察總共有幾種異步編程的方式。

工作中總結(jié)的一些比較重要的前端技能，覺(jué)得在面試中比較合適提問(wèn)，即能查看出面試者的技術(shù)功底，又能考察其知識(shí)體系的廣度。適用于應(yīng)屆生和工作年限兩年下的同學(xué)，掌握下面的知識(shí)基本滿足工作需求了。更高年限的開(kāi)發(fā)工程師則應(yīng)該更注重架構(gòu)能力而不是具體的技術(shù)細(xì)節(jié)。

HTML5

語(yǔ)義化標(biāo)簽，meta元數(shù)據(jù)標(biāo)簽，考察其對(duì)語(yǔ)義化的理解。

draggale屬性的api，dragstart, drop, dataTransfer等內(nèi)容，考察其對(duì)新技術(shù)的使用。

CSS3

盒子模型是什么，怎么計(jì)算的？
盒子模型指的是瀏覽器將文檔流從視覺(jué)上渲染為不同矩形框的組合，每個(gè)元素都被渲染為一個(gè)矩形框，包含內(nèi)容區(qū)域（文本、圖片等真實(shí)內(nèi)容的區(qū)域）和可選的margin/border/padding三個(gè)區(qū)域，中文名為外邊距、邊框和填充。包含關(guān)系為margin > border > padding > content。
計(jì)算方式為自上而下，4個(gè)盒子區(qū)域的寬度和高度都支持固定值進(jìn)行設(shè)置，同時(shí)margin/padding支持百分比，計(jì)算的高度和寬度值都依據(jù)父元素的content區(qū)域?qū)挾?，content區(qū)域也支持百分比，不過(guò)高度和寬度分別對(duì)應(yīng)父元素content區(qū)域的高度和寬度，border不支持百分比。content區(qū)域的默認(rèn)寬高由盒子類(lèi)型和是否包含有其他盒子來(lái)進(jìn)行計(jì)算，其余區(qū)域均為0。

盒子模型包含幾種類(lèi)型，怎么轉(zhuǎn)換。

盒子模型相關(guān)的一些DOM屬性offsetHeight/offsetTop/scrollHeight/clientHeight分別指什么？

offsetHeight: 包含border、padding和content區(qū)域的高度總和。
offsetTop: 元素border上邊界到父元素content上邊界的距離。
scrollHeight: 沒(méi)有滾動(dòng)條的情況下，元素的offsetHeight總高度。
clientHeight: 瀏覽器視口的高度。

選擇器實(shí)現(xiàn)原理以及其權(quán)重和最右匹配的概念。

圣杯布局（大屏幕分為頂部、底部和中間三個(gè)縱向容器，小屏幕時(shí)橫列為5項(xiàng)）的幾種實(shí)現(xiàn)方式(同時(shí)考察@media媒體查詢(xún))。

bootstrap框架的響應(yīng)式布局實(shí)現(xiàn)原理，考察viewport視口，媒體查詢(xún)的邊界條件。

垂直居中對(duì)齊的方式，考察元素的文字基線。

bootstrap輸入框組怎么實(shí)現(xiàn)，考察:first-child等偽元素和垂直居中對(duì)齊。

Javascript

Js包含的基礎(chǔ)類(lèi)型，null/undefined/boolean/number/string/object/Symbol。array, function, object實(shí)例和原型鏈對(duì)應(yīng)關(guān)系。

數(shù)組的常用函數(shù)，如unshift/slice/map/forEach/filter/some/every/reduce，同時(shí)考察哪些返回新的，哪些修改了原數(shù)組。

嘗試給數(shù)組添加一個(gè)通用方法makeIndexObj，使得可以根據(jù)某個(gè)參數(shù)作為key值重構(gòu)為新對(duì)象。

Object.defineProperty(Array.prototype, "makeIndexObj", {
value: function (key) {
    let result = {};
    this.forEach(item => {
        // 這里借用了jQuery的深度復(fù)制，可以考察其具體的實(shí)現(xiàn)
        result[item[key]] = $.extend(true, {}, item);
    });
return result;
}
});

考察對(duì)象的屬性以及其特征，包括defineProperty和屬性訪問(wèn)器定義屬性的區(qū)別，以及屬性的enumerable, configurable, writable, value, get, set特征，同時(shí)考察深度復(fù)制和功能體邊界檢測(cè)（支持多key值，輸入的是一個(gè)數(shù)組或字符串）。

淺拷貝和深度拷貝的實(shí)現(xiàn)，考察Object.assign(), for in遍歷, $.extend()等。

let, var, const的區(qū)別和優(yōu)劣，考察變量提升，常量實(shí)現(xiàn)方式，同時(shí)深入考察如何實(shí)現(xiàn)真正的不可修改的對(duì)象。

cookie，localstorage, sessionstorage的區(qū)別，考察空間限制，哪些和服務(wù)器交互，常見(jiàn)應(yīng)用場(chǎng)景。

es6箭頭函數(shù) => 的簡(jiǎn)化寫(xiě)法和作用，考察對(duì)參數(shù)的要求和自動(dòng)返回值以及this強(qiáng)制綁定運(yùn)行環(huán)境。

事件捕獲和冒泡的方式，考察addEventListener和attachEvent事件，以及jQuery on/bind/off/die/live等常用方法的區(qū)別和關(guān)系。

兄弟元素內(nèi)容互相覆蓋，事件如何觸發(fā)。考察與冒泡的混淆，以及元素碰撞檢測(cè)。

AJAX的原理以及跨域原理和方法，可以考察瀏覽器和服務(wù)端HTTP通信。

Promise異步編程，考察其基本用法，常用race/all方法，異常捕獲方式。

異步編程Generator的考察，其關(guān)鍵字yield的使用，與Promise的關(guān)系，同時(shí)可以深入考察js總共有幾種異步編程的方式。

this對(duì)象的綁定方式，總共包含有默認(rèn)綁定、隱含綁定、明確綁定、new綁定，每種的應(yīng)用場(chǎng)景闡述和內(nèi)部原理。

閉包，閉包如何產(chǎn)生以及其作用和副作用。

Vue MVVM框架

MVVM框架解決了什么問(wèn)題，帶來(lái)了什么問(wèn)題?？疾霽ue的特性，如雙向數(shù)據(jù)綁定、模塊化、組件化、模板語(yǔ)言等優(yōu)勢(shì)，隱藏實(shí)現(xiàn)細(xì)節(jié)、不利于問(wèn)題追查、過(guò)度封裝影響性能的弊端。是否使用過(guò)官方vue devtools開(kāi)發(fā)工具調(diào)試。

雙向數(shù)據(jù)綁定如何實(shí)現(xiàn)，考察es5 getter/setter方法，以及其對(duì)數(shù)組對(duì)象等完全重寫(xiě)，深入考察設(shè)計(jì)模式
的觀察者模式和訂閱者模式的方式以及區(qū)別。

如何追蹤數(shù)據(jù)變化，數(shù)組的哪些改變方式不能被檢測(cè)到，如直接改變length，元素索引修改，同時(shí)還有對(duì)象的屬性修改。為什么這些不能被檢測(cè)到，因?yàn)楝F(xiàn)有js語(yǔ)言層面不支持，只能對(duì)既有方法進(jìn)行重寫(xiě)。

nextTick的使用場(chǎng)景，為什么會(huì)使用nextTick，事件驅(qū)動(dòng)，同一個(gè)執(zhí)行周期內(nèi)去重回調(diào)事件提高效率減少資源消耗。

組件的優(yōu)勢(shì)，模塊封裝有什么優(yōu)劣，組件如何進(jìn)行模塊化：props down, events up。

單頁(yè)面復(fù)雜應(yīng)用應(yīng)該new多少個(gè)vue對(duì)象，不同vue對(duì)象數(shù)據(jù)如何傳遞，公有函數(shù)如何聲明?？疾炷K的封裝和耦合以及其取舍，引入vuex.js。

vuex和vue-router是否使用過(guò)，都解決了什么問(wèn)題。不深究第三方庫(kù)，只考察廣度和技術(shù)棧以及其理解程度。

綜合知識(shí)

url從輸入到返回都經(jīng)歷了什么過(guò)程？考察范圍非?？植溃?/p> 

 1. 瀏覽器讀取最近瀏覽，自動(dòng)推薦網(wǎng)址.
 2. 拿到url，嘗試讀取緩存。
 3. 緩存不存在，構(gòu)建響應(yīng)頭，發(fā)起請(qǐng)求。其中包括dns解析，tcp建連，發(fā)起http請(qǐng)求。
 4. 服務(wù)器接收到客戶(hù)端請(qǐng)求，解析并處理返回?cái)?shù)據(jù)。
 5. 瀏覽器接收到響應(yīng)頭，讀取狀態(tài)碼等信息，進(jìn)行緩存或讀取緩存或再次發(fā)起請(qǐng)求。
 6. 讀取響應(yīng)體，檢測(cè)數(shù)據(jù)類(lèi)型，進(jìn)行解析。
 7. 渲染頁(yè)面。

在這些過(guò)程中，每一個(gè)都可以深入詢(xún)問(wèn)，如：

 1. 網(wǎng)絡(luò)通信方向dns解析的過(guò)程，一共分為幾次，根域名服務(wù)器、權(quán)威服務(wù)器、代理服務(wù)器等概念。
 2. tcp建連的過(guò)程，三次握手，`syn, ack+syn, ack`，以及斷開(kāi)連接的`wait time state`的作用。
 3. 如何進(jìn)行緩存和格式的控制，請(qǐng)求頭和響應(yīng)頭的主體參數(shù)的作用。
 4. 常見(jiàn)的狀態(tài)碼的含義，如200、304、404、500等，不同分段指向什么錯(cuò)誤。
 5. 瀏覽器的請(qǐng)求控制，對(duì)同一個(gè)域名下最多保持6個(gè)請(qǐng)求，如何復(fù)用連接，keep-alive的作用。
 6. 渲染頁(yè)面的過(guò)程，DOM、BOM、ECMAScript的關(guān)系，什么為阻塞，什么非阻塞。document.ready是準(zhǔn)備好了什么。

頁(yè)面性能優(yōu)化
圖片合并、異步加載、js壓縮、CDN加速等

兼容性
常見(jiàn)的滾輪事件、事件對(duì)象等，主要看個(gè)人遇到的問(wèn)題，不要挑偏僻的問(wèn)。對(duì)兼容性的歷史遺留過(guò)程的了解。出現(xiàn)問(wèn)題常用的解決方案，查文檔常用的網(wǎng)站，如MDN、w3c、segmentfault、stackoverflow、github等官方文檔和程序員交友社區(qū)，考察其善用搜索引擎的能力。

git倉(cāng)庫(kù)管理
如何構(gòu)建新的分支和合并分支，出現(xiàn)沖突如何處理，如何回滾版本。主要考察合作開(kāi)發(fā)代碼的經(jīng)驗(yàn)以及對(duì)倉(cāng)庫(kù)的理解。

算法相關(guān)
都了解什么排序算法，插入排序和快速排序和冒泡排序的事件復(fù)雜度，快速排序的思想，手寫(xiě)快排，快排的最優(yōu)情況和最差情況。js使用了什么排序算法，深入考察for i++和[].forEach的效率，為什么。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/112597.html

相關(guān)文章

  • 前端最強(qiáng)面經(jīng)匯總

    摘要：獲取的對(duì)象范圍方法獲取的是最終應(yīng)用在元素上的所有屬性對(duì)象即使沒(méi)有代碼，也會(huì)把默認(rèn)的祖宗八代都顯示出來(lái)而只能獲取元素屬性中的樣式。因此對(duì)于一個(gè)光禿禿的元素，方法返回對(duì)象中屬性值如果有就是據(jù)我測(cè)試不同環(huán)境結(jié)果可能有差異而就是。 花了很長(zhǎng)時(shí)間整理的前端面試資源，喜歡請(qǐng)大家不要吝嗇star~ 別只收藏，點(diǎn)個(gè)贊，點(diǎn)個(gè)star再走哈~ 持續(xù)更新中……，可以關(guān)注下github 項(xiàng)目地址 https:...

    wangjuntytl 評(píng)論0 收藏0

  • 前端開(kāi)發(fā)面試題鏈接

    摘要：手冊(cè)網(wǎng)超級(jí)有用的前端基礎(chǔ)技術(shù)面試問(wèn)題收集前端面試題目及答案匯總史上最全前端面試題含答案常見(jiàn)前端面試題及答案經(jīng)典面試題及答案精選總結(jié)前端面試過(guò)程中最容易出現(xiàn)的問(wèn)題前端面試題整理騰訊前端面試經(jīng)驗(yàn)前端基礎(chǔ)面試題部分最新前端面試題攻略前端面試前端入 手冊(cè)網(wǎng)：http://www.shouce.ren/post/index 超級(jí)有用的前端基礎(chǔ)技術(shù)面試問(wèn)題收集：http://www.codec...

    h9911 評(píng)論0 收藏0

  • 前端開(kāi)發(fā)面試題鏈接

    摘要：手冊(cè)網(wǎng)超級(jí)有用的前端基礎(chǔ)技術(shù)面試問(wèn)題收集前端面試題目及答案匯總史上最全前端面試題含答案常見(jiàn)前端面試題及答案經(jīng)典面試題及答案精選總結(jié)前端面試過(guò)程中最容易出現(xiàn)的問(wèn)題前端面試題整理騰訊前端面試經(jīng)驗(yàn)前端基礎(chǔ)面試題部分最新前端面試題攻略前端面試前端入 手冊(cè)網(wǎng)：http://www.shouce.ren/post/index 超級(jí)有用的前端基礎(chǔ)技術(shù)面試問(wèn)題收集：http://www.codec...

    snifes 評(píng)論0 收藏0

  • 前端面試 - 收藏集 - 掘金

    摘要：一基礎(chǔ)接口的意義百度規(guī)范擴(kuò)展回調(diào)抽象類(lèi)的意義我的前端面試經(jīng)歷百度前端掘金博主就讀于電子科技大學(xué)，大三狗一枚面試是個(gè)漫長(zhǎng)的過(guò)程，從海投到收獲電話面試，一面二面三面，一個(gè)步驟出錯(cuò)那么后面就宣告終結(jié)。 一道常被人輕視的前端 JS 面試題 - 前端 - 掘金 目錄前言第一問(wèn)第二問(wèn)變量聲明提升函數(shù)表達(dá)式第三問(wèn)第四問(wèn)第五問(wèn)第六問(wèn)構(gòu)造函數(shù)的返回值第七問(wèn)最后前言 年前剛剛離職了，分享下我曾經(jīng)出過(guò)的一道...

    lpjustdoit 評(píng)論0 收藏0

  • 深入理解js

    摘要：詳解十大常用設(shè)計(jì)模式力薦深度好文深入理解大設(shè)計(jì)模式收集各種疑難雜癥的問(wèn)題集錦關(guān)于，工作和學(xué)習(xí)過(guò)程中遇到過(guò)許多問(wèn)題，也解答過(guò)許多別人的問(wèn)題。介紹了的內(nèi)存管理。 延遲加載 (Lazyload) 三種實(shí)現(xiàn)方式 延遲加載也稱(chēng)為惰性加載，即在長(zhǎng)網(wǎng)頁(yè)中延遲加載圖像。用戶(hù)滾動(dòng)到它們之前，視口外的圖像不會(huì)加載。本文詳細(xì)介紹了三種延遲加載的實(shí)現(xiàn)方式。 詳解 Javascript十大常用設(shè)計(jì)模式 力薦~ ...

    caikeal 評(píng)論0 收藏0

  • 求職準(zhǔn)備 - 收藏集 - 掘金

    摘要：一基礎(chǔ)接口的意義百度規(guī)范擴(kuò)展回調(diào)抽象類(lèi)的意義想不想通過(guò)一線互聯(lián)網(wǎng)公司面試文檔整理為電子書(shū)掘金簡(jiǎn)介谷歌求職記我花了八個(gè)月準(zhǔn)備谷歌面試掘金原文鏈接翻譯者 【面試寶典】從對(duì)象深入分析 Java 中實(shí)例變量和類(lèi)變量的區(qū)別 - 掘金原創(chuàng)文章，轉(zhuǎn)載請(qǐng)務(wù)必保留原出處為：http://www.54tianzhisheng.cn/... , 歡迎訪問(wèn)我的站點(diǎn)，閱讀更多有深度的文章。 實(shí)例變量 和 類(lèi)變量...

    cuieney 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<