第十一天Web前端面試題

1,ES5/ES6 的繼承除了寫法以外還有什么區(qū)別鸯檬?

ES5的繼承實質(zhì)上是先創(chuàng)建子類的實例對象决侈,然后再將父類的方法添加到this上(Parent.apply(this)).

ES6的繼承機制完全不同,實質(zhì)上是先創(chuàng)建父類的實例對象this(所以必須先調(diào)用父類的super()方法)京闰,然后再用子類的構(gòu)造函數(shù)修改this颜及。

ES5的繼承時通過原型或構(gòu)造函數(shù)機制來實現(xiàn)甩苛。

ES6通過class關(guān)鍵字定義類,里面有構(gòu)造方法俏站,類之間通過extends關(guān)鍵字實現(xiàn)繼承讯蒲。子類必須在constructor方法中調(diào)用super方法,否則新建實例報錯肄扎。因為子類沒有自己的this對象墨林,而是繼承了父類的this對象,然后對其進行加工犯祠。如果不調(diào)用super方法旭等,子類得不到this對象。

2衡载,http狀態(tài)碼有哪些搔耕?分別是什么意思?

簡單版:

? ? ? ? 100? Continue? ?繼續(xù)痰娱,一般在發(fā)送post請求時弃榨,已發(fā)送了http header之后服務(wù)端將返回此信息,表示確認(rèn)梨睁,之后發(fā)送具體參數(shù)信息

? ? ? ? 200? OK? ? ? ? ?正常返回信息

? ? ? ? 201? Created? ? 請求成功并且服務(wù)器創(chuàng)建了新的資源

? ? ? ? 202? Accepted? ?服務(wù)器已接受請求鲸睛,但尚未處理

? ? ? ? 301? Moved Permanently? 請求的網(wǎng)頁已永久移動到新位置。

? ? ? ? 302? Found? ? ? ?臨時性重定向坡贺。

? ? ? ? 303? See Other? ?臨時性重定向官辈,且總是使用 GET 請求新的 URI。

? ? ? ? 304? Not Modified 自從上次請求后遍坟,請求的網(wǎng)頁未修改過拳亿。

? ? ? ? 400? Bad Request? 服務(wù)器無法理解請求的格式,客戶端不應(yīng)當(dāng)嘗試再次使用相同的內(nèi)容發(fā)起請求政鼠。

? ? ? ? 401? Unauthorized 請求未授權(quán)风瘦。

? ? ? ? 403? Forbidden? ?禁止訪問。

? ? ? ? 404? Not Found? ?找不到如何與 URI 相匹配的資源公般。

? ? ? ? 500? Internal Server Error? 最常見的服務(wù)器端錯誤万搔。

? ? ? ? 503? Service Unavailable 服務(wù)器端暫時無法處理請求(可能是過載或維護)。

完整版

3官帘,瀏覽器是如何渲染頁面的瞬雹?

瀏覽器從HTTP服務(wù)器獲取html文檔,到呈現(xiàn)頁面給用戶刽虹,會經(jīng)過以下幾個步驟:

簡述瀏覽器渲染過程

解析HTML以構(gòu)建DOM樹:渲染引擎開始解析HTML文檔酗捌,轉(zhuǎn)換樹中的html標(biāo)簽或js生成的標(biāo)簽到DOM節(jié)點,它被稱為 — 內(nèi)容樹。

構(gòu)建渲染樹:解析CSS(包括外部CSS文件和樣式元素以及js生成的樣式)胖缤,根據(jù)CSS選擇器計算出節(jié)點的樣式尚镰,創(chuàng)建另一個樹 — 渲染樹。

布局渲染樹: 從根節(jié)點遞歸調(diào)用哪廓,計算每一個元素的大小狗唉、位置等,給每個節(jié)點所應(yīng)該出現(xiàn)在屏幕上的精確坐標(biāo)涡真。

繪制渲染樹: 遍歷渲染樹分俯,每個節(jié)點將使用UI后端層來繪制。

1哆料、解析文檔構(gòu)建DOM樹

瀏覽器的解析內(nèi)容可以分為三個部分:

HTML/XHTML/SVG:解析這三種文件后缸剪,會生成DOM樹(DOM Tree)

CSS:解析樣式表,生成CSS規(guī)則樹(CSS Rule Tree)

JavaScript:解析腳本东亦,通過DOM API和CSSOM API操作DOM Tree和CSS Rule Tree杏节,與用戶進行交互。

以上三類文件的執(zhí)行順序會根據(jù)其在文檔中的位置及其標(biāo)簽屬性的不同而有異同讥此,具體在后文進行討論拢锹。

2谣妻、構(gòu)建渲染樹

解析文檔完成后萄喳,瀏覽器引擎會將 CSS Rule Tree 附著到DOM Tree 上,并根據(jù)DOM Tree 和 CSS Rule Tree構(gòu)造 Rendering Tree(渲染樹)蹋半。此處需要注意:

Render Tree和DOM Tree的區(qū)別在于他巨,類似Head或display:node之類的東西不會放在渲染樹中;

將CSS Rule Tree匹配到DOM Tree需要解析CSS的選擇器减江,為了提高該過程的性能染突,DOM樹應(yīng)該盡量小,CSS Selector應(yīng)該盡量使用id和class辈灼,避免過度層疊份企。

3、布局與繪制渲染樹

解析position, overflow, z-index等等屬性巡莹,計算每一個渲染樹節(jié)點的位置和大小司志,此過程被稱為reflow。最后調(diào)用操作系統(tǒng)的Native GUI API完成繪制(repain)降宅。注意:

渲染樹的節(jié)點骂远,在Gecko中稱為frame,而在webkit中稱為renderer腰根;

reflow和repaint是兩個不同的概念激才,其區(qū)別會在后文進行探討。

4,typeof和instanceof相同點與不同點

相同點

typeof和instanceof都用來判斷一個變量的數(shù)據(jù)類型瘸恼。

不同點:

typeof返回值是一個字符串劣挫, 用來說明變量的數(shù)據(jù)類型。

typeof一般只能返回如下六個數(shù)據(jù)類型东帅,null會返回Object揣云,若參數(shù)為引用類型,始終返回object :number, boolean, string, function, object, undefined冰啃。

instanceof返回一個布爾值邓夕。

instanceof一般用來判斷一個變量是否來自某個引用類型的實例,判斷在其原型鏈中是否存在一個構(gòu)造函數(shù)的prototype屬性阎毅,如:

console.log([]instanceofArray);// trueconsole.log([]instanceofObject);// true

可以看到的是[]是來自于Array是沒有問題的焚刚,返回值為true;但是[] instanceof Object也為true是我們不想看到的扇调,這是因為在javascript中矿咕,Object是最頂級的數(shù)據(jù)類型,所有的引用類型最終都會指向Object

對于這種情況狼钮,我們可以使用ES6新增的Array.isArray([])來進行判斷碳柱,也可以通過[].constructor === Array來判斷

5,如何解決回調(diào)地獄熬芜?請手寫代碼

詳情

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末莲镣,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子涎拉,更是在濱河造成了極大的恐慌瑞侮,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,968評論 6 482
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件鼓拧,死亡現(xiàn)場離奇詭異半火,居然都是意外死亡,警方通過查閱死者的電腦和手機季俩,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,601評論 2 382
  • 文/潘曉璐 我一進店門钮糖,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人酌住,你說我怎么就攤上這事店归。” “怎么了赂韵?”我有些...
    開封第一講書人閱讀 153,220評論 0 344
  • 文/不壞的土叔 我叫張陵娱节,是天一觀的道長。 經(jīng)常有香客問我祭示,道長肄满,這世上最難降的妖魔是什么谴古? 我笑而不...
    開封第一講書人閱讀 55,416評論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮稠歉,結(jié)果婚禮上掰担,老公的妹妹穿的比我還像新娘。我一直安慰自己怒炸,他們只是感情好带饱,可當(dāng)我...
    茶點故事閱讀 64,425評論 5 374
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著阅羹,像睡著了一般勺疼。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上捏鱼,一...
    開封第一講書人閱讀 49,144評論 1 285
  • 那天执庐,我揣著相機與錄音,去河邊找鬼导梆。 笑死轨淌,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的看尼。 我是一名探鬼主播递鹉,決...
    沈念sama閱讀 38,432評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼藏斩!你這毒婦竟也來了躏结?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,088評論 0 261
  • 序言:老撾萬榮一對情侶失蹤灾茁,失蹤者是張志新(化名)和其女友劉穎萍启,沒想到半個月后价脾,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體几迄,經(jīng)...
    沈念sama閱讀 43,586評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡导匣,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,028評論 2 325
  • 正文 我和宋清朗相戀三年榜掌,在試婚紗的時候發(fā)現(xiàn)自己被綠了税肪。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片讲坎。...
    茶點故事閱讀 38,137評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡关筒,死狀恐怖描孟,靈堂內(nèi)的尸體忽然破棺而出驶睦,到底是詐尸還是另有隱情,我是刑警寧澤匿醒,帶...
    沈念sama閱讀 33,783評論 4 324
  • 正文 年R本政府宣布场航,位于F島的核電站,受9級特大地震影響廉羔,放射性物質(zhì)發(fā)生泄漏溉痢。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,343評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望孩饼。 院中可真熱鬧髓削,春花似錦、人聲如沸镀娶。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,333評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽梯码。三九已至宝泵,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間轩娶,已是汗流浹背鲁猩。 一陣腳步聲響...
    開封第一講書人閱讀 31,559評論 1 262
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留罢坝,地道東北人廓握。 一個月前我還...
    沈念sama閱讀 45,595評論 2 355
  • 正文 我出身青樓,卻偏偏與公主長得像嘁酿,于是被迫代替她去往敵國和親隙券。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,901評論 2 345

推薦閱讀更多精彩內(nèi)容