2020年web前端最全面試題及答案_第1頁
2020年web前端最全面試題及答案_第2頁
2020年web前端最全面試題及答案_第3頁
2020年web前端最全面試題及答案_第4頁
2020年web前端最全面試題及答案_第5頁
已閱讀5頁，還剩40頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領

文檔簡介

1、精選優(yōu)質(zhì)文檔-傾情為你奉上2020年web前端最全面試題目及答案目錄HTML篇1,doctype的作用是什么DOCTYPE是html5標準網(wǎng)頁聲明，且必須聲明在HTML文檔的第一行。來告知瀏覽器的解析器用什么文檔標準解析這個文檔，不同的渲染模式會影響到瀏覽器對于 CSS 代碼甚至 JavaScript 腳本的解析文檔解析類型有：l BackCompat：怪異模式，瀏覽器使用自己的怪異模式解析渲染頁面。（如果沒有聲明DOCTYPE，默認就是這個模式）l CSS1Compat：標準模式，瀏覽器使用W3C的標準解析渲染頁面。IE8還有一種介乎于上述兩者之間的近乎標準的模式，但是基本淘汰了。2, 這三

2、種模式的區(qū)別是什么？l 標準模式(standards mode)：頁面按照 HTML 與 CSS 的定義渲染l 怪異模式(quirks mode)模式： 會模擬更舊的瀏覽器的行為l 近乎標準(almost standards)模式： 會實施了一種表單元格尺寸的怪異行為（與IE7之前的單元格布局方式一致），除此之外符合標準定義3, HTML、XHTML、XML有什么區(qū)別l HTML(超文本標記語言): 在html4.0之前HTML先有實現(xiàn)再有標準，導致HTML非?；靵y和松散l XML(可擴展標記語言): 主要用于存儲數(shù)據(jù)和結(jié)構(gòu)，可擴展，大家熟悉的JSON也是相似的作用，但是更加輕量高效，所以XM

3、L現(xiàn)在市場越來越小了l XHTML(可擴展超文本標記語言): 基于上面兩者而來，W3C為了解決HTML混亂問題而生，并基于此誕生了HTML5，開頭加入<!DOCTYPE html>的做法因此而來，如果不加就是兼容混亂的HTML，加了就是標準模式。4, 什么是data-屬性？HTML的數(shù)據(jù)屬性，用于將數(shù)據(jù)儲存于標準的HTML元素中作為額外信息,我們可以通過js訪問并操作它，來達到操作數(shù)據(jù)的目的。5, 你對HTML語義化的理解？語義化是指使用恰當語義的html標簽，讓頁面具有良好的結(jié)構(gòu)與含義，比如<p>標簽就代表段落，<article>代表正文內(nèi)容等等。語義化的

4、好處主要有兩點：l 開發(fā)者友好：使用語義類標簽增強了可讀性，開發(fā)者也能夠清晰地看出網(wǎng)頁的結(jié)構(gòu)，也更為便于團隊的開發(fā)和維護l 機器友好：帶有語義的文字表現(xiàn)力豐富，更適合搜索引擎的爬蟲爬取有效信息，語義類還可以支持讀屏軟件，根據(jù)文章可以自動生成目錄這對于簡書、知乎這種富文本類的應用很重要，語義化對于其網(wǎng)站的內(nèi)容傳播有很大的幫助，但是對于功能性的web軟件重要性大打折扣，比如一個按鈕、Skeleton這種組件根本沒有對應的語義，也不需要什么SEO。6, HTML5與HTML4的不同之處文件類型聲明（<!DOCTYPE>）僅有一型：<!DOCTYPE HTML>。新的解析順序：

5、不再基于SGML。l 新的元素：section, video, progress, nav, meter, time, aside, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, output, rp, rt, ruby, source, summary, wbr。l input元素的新類型：date, email, url等等。l 新的屬性：ping（用于a與area）, charset（用于meta）, async（用于script）。

6、l 全域?qū)傩裕篿d, tabindex, repeat。l 新的全域?qū)傩裕篶ontenteditable, contextmenu, draggable, dropzone, hidden, spellcheck。l 移除元素：acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt7有哪些常用的meta標簽？meta標簽由name和content兩個屬性來定義，來描述一個HTML網(wǎng)頁文檔的元信息，例如作者、日期和時間、網(wǎng)頁描述、關鍵詞、頁面刷新等，除了一些

7、http標準規(guī)定了一些name作為大家使用的共識，開發(fā)者也可以自定義name。l charset，用于描述HTML文檔的編碼形式l http-equiv，顧名思義，相當于http的文件頭作用,比如下面的代碼就可以設置http的緩存過期日期l viewport，移動前端最熟悉不過，Web開發(fā)人員可以控制視口的大小和比例l apple-mobile-web-app-status-bar-style,開發(fā)過PWA應用的開發(fā)者應該很熟悉，為了自定義蘋果工具欄的顏色。8, src和href的區(qū)別？l src是指向外部資源的位置，指向的內(nèi)容會嵌入到文檔中當前標簽所在的位置，在請求src資源時會將其指向的資

8、源下載并應用到文檔內(nèi)，如js腳本，img圖片和frame等元素。當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，知道將該資源加載、編譯、執(zhí)行完畢，所以一般js腳本會放在底部而不是頭部。l href是指向網(wǎng)絡資源所在位置（的超鏈接），用來建立和當前元素或文檔之間的連接，當瀏覽器識別到它他指向的文件時，就會并行下載資源，不會停止對當前文檔的處理。9知道img的srcset的作用是什么？可以設計響應式圖片，我們可以使用兩個新的屬性srcset 和 sizes來提供更多額外的資源圖像和提示，幫助瀏覽器選擇正確的一個資源。srcset 定義了我們允許瀏覽器選擇的圖像集，以及每個圖像的大小。sizes

9、 定義了一組媒體條件（例如屏幕寬度）并且指明當某些媒體條件為真時，什么樣的圖片尺寸是最佳選擇。所以，有了這些屬性，瀏覽器會：l 查看設備寬度l 檢查 sizes 列表中哪個媒體條件是第一個為真l 查看給予該媒體查詢的槽大小l 加載 srcset 列表中引用的最接近所選的槽大小的圖像10, 還有哪一個標簽能起到跟srcset相似作用？<picture>元素通過包含零或多個 <source> 元素和一個 <img>元素來為不同的顯示/設備場景提供圖像版本。瀏覽器會選擇最匹配的子 <source> 元素

10、，如果沒有匹配的，就選擇 <img> 元素的 src 屬性中的URL。然后，所選圖像呈現(xiàn)在<img>元素占據(jù)的空間中11, script標簽中defer和async的區(qū)別？l defer：瀏覽器指示腳本在文檔被解析后執(zhí)行，script被異步加載后并不會立刻執(zhí)行，而是等待文檔被解析完畢后執(zhí)行。l async：同樣是異步加載腳本，區(qū)別是腳本加載完畢后立即執(zhí)行，這導致async屬性下的腳本是亂序的，對于script有先后依賴關系的情況，并不適用。12, 有幾種前端儲存的方式？cookies、localstorage、sessionstorage、Web S

11、QL、IndexedDB13, 這些方式的區(qū)別是什么？l cookies： 在HTML5標準前本地儲存的主要方式，優(yōu)點是兼容性好，請求頭自帶cookie方便，缺點是大小只有4k，自動請求頭加入cookie浪費流量，每個domain限制20個cookie，使用起來麻煩需要自行封裝l localStorage：HTML5加入的以鍵值對(Key-Value)為標準的方式，優(yōu)點是操作方便，永久性儲存（除非手動刪除），大小為5M，兼容IE8+l sessionStorage：與localStorage基本類似，區(qū)別是sessionStorage當頁面關閉后會被清理，而且與cookie、localStor

12、age不同，他不能在所有同源窗口中共享，是會話級別的儲存方式l Web SQL：2010年被W3C廢棄的本地數(shù)據(jù)庫數(shù)據(jù)存儲方案，但是主流瀏覽器（火狐除外）都已經(jīng)有了相關的實現(xiàn)，web sql類似于SQLite，是真正意義上的關系型數(shù)據(jù)庫，用sql進行操作，當我們用JavaScript時要進行轉(zhuǎn)換，較為繁瑣。l IndexedDB： 是被正式納入HTML5標準的數(shù)據(jù)庫儲存方案，它是NoSQL數(shù)據(jù)庫，用鍵值對進行儲存，可以進行快速讀取操作，非常適合web場景，同時用JavaScript進行操作會非常方便。CSS篇1, CSS選擇器的優(yōu)先級是怎樣的？CSS選擇器的優(yōu)先級是：內(nèi)聯(lián) > ID選擇器

13、 > 類選擇器 > 標簽選擇器到具體的計算層面，優(yōu)先級是由 A 、B、C、D 的值來決定的，其中它們的值計算規(guī)則如下：l A 的值等于 1 的前提是存在內(nèi)聯(lián)樣式, 否則 A = 0;l B 的值等于 ID選擇器 出現(xiàn)的次數(shù);l C 的值等于 類選擇器 和 屬性選擇器 和 偽類 出現(xiàn)的總次數(shù);l D 的值等于 標簽選擇器 和 偽元素 出現(xiàn)的總次數(shù) 。2,link和import的區(qū)別？link屬于XHTML標簽，而import是CSS提供的。頁面被加載時，link會同時被加載，而import引用的CSS會等到頁面被加載完再加載。import只在IE 5以上才能識別，而link是XHTM

14、L標簽，無兼容問題。link方式的樣式權(quán)重高于import的權(quán)重。使用dom控制樣式時的差別。當使用javascript控制dom去改變樣式的時候，只能使用link標簽，因為import不是dom可以控制的2,empxrem區(qū)別？l px：絕對單位，頁面按精確像素展示。l em：相對單位，基準點為父節(jié)點字體的大小，如果自身定義了font-size按自身來計算（瀏覽器默認字體是16px），整個頁面內(nèi)1em不是一個固定的值。l rem：相對單位，可理解為”root em”, 相對根節(jié)點html的字體大小來計算，CSS3新加屬性，chrome/firefox/IE9+支持3,塊級元素水平居中的方法？

15、l margin:0 auto方法l flex布局，目前主流方法l table方法4, CSS有幾種定位方式？l static: 正常文檔流定位，此時 top, right, bottom, left 和 z-index 屬性無效，塊級元素從上往下縱向排布，行級元素從左向右排列。l relative：相對定位，此時的相對是相對于正常文檔流的位置。l absolute：相對于最近的非 static 定位祖先元素的偏移，來確定元素位置，比如一個絕對定位元素它的父級、和祖父級元素都為relative，它會相對他的父級而產(chǎn)生偏移。l fixed：指定元素相對于屏幕視口（viewport）的位置來指定元

16、素位置。元素的位置在屏幕滾動時不會改變，比如那種回到頂部的按鈕一般都是用此定位方式。l sticky：粘性定位，特性近似于relative和fixed的合體，其在實際應用中的近似效果就是IOS通訊錄滾動的時候的頂屁股。5, 如何理解z-index？CSS 中的z-index屬性控制重疊元素的垂直疊加順序，默認元素的z-index為0，我們可以修改z-index來控制元素的圖層位置，而且z-index只能影響設置了position值的元素。6, 如何理解層疊上下文？是什么？層疊上下文是HTML元素的三維概念，這些HTML元素在一條假想的相對于面向（電腦屏幕的）視窗或者網(wǎng)頁的用戶的z軸上延伸，HT

17、ML元素依據(jù)其自身屬性按照優(yōu)先級順序占用層疊上下文的空間。如何產(chǎn)生？觸發(fā)一下條件則會產(chǎn)生層疊上下文：根元素 (HTML),z-index 值不為 "auto"的 絕對/相對定位，一個 z-index 值不為 "auto"的 flex 項目 (flex item)，即：父元素 display: flex|inline-flex，l opacity 屬性值小于 1 的元素（參考 the specification for opacity），l transform 屬性值不為 "none"的元素，l mix-blend-mode 屬性值不為

18、 "normal"的元素，l filter值不為“none”的元素，l perspective值不為“none”的元素，l isolation 屬性被設置為 "isolate"的元素，l position: fixed7, 清除浮動有哪些方法？l 空div方法：<div style="clear:both;"></div>l Clearfix 方法：上文使用.clearfix類已經(jīng)提到l overflow: auto或overflow: hidden方法，使用BFC8,你對css sprites的理解，好處是什

19、么？是什么 ？雪碧圖也叫CSS精靈， 是一CSS圖像合成技術(shù)，開發(fā)人員往往將小圖標合并在一起之后的圖片稱作雪碧圖。如何操作？使用工具（PS之類的）將多張圖片打包成一張雪碧圖，并為其生成合適的 CSS。 每張圖片都有相應的 CSS 類，該類定義了background-image、background-position和background-size屬性。 使用圖片時，將相應的類添加到你的元素中。好處：減少加載多張圖片的 HTTP 請求數(shù)（一張雪碧圖只需要一個請求）提前加載資源不足：CSS Sprite維護成本較高，如果頁面背景有少許改動，一般就要改這張合并的圖片加載速度優(yōu)勢在http2開啟后蕩然

20、無存，HTTP2多路復用，多張圖片也可以重復利用一個連接通道搞定9, 你對媒體查詢的理解？是什么媒體查詢由一個可選的媒體類型和零個或多個使用媒體功能的限制了樣式表范圍的表達式組成，例如寬度、高度和顏色。媒體查詢，添加自CSS3，允許內(nèi)容的呈現(xiàn)針對一個特定范圍的輸出設備而進行裁剪，而不必改變內(nèi)容本身,非常適合web網(wǎng)頁應對不同型號的設備而做出對應的響應適配。如何使用？媒體查詢包含一個可選的媒體類型和，滿足CSS3規(guī)范的條件下，包含零個或多個表達式，這些表達式描述了媒體特征，最終會被解析為true或false。如果媒體查詢中指定的媒體類型匹配展示文檔所使用的設備類型，并且所有的表達式的值都是tru

21、e，那么該媒體查詢的結(jié)果為true.那么媒體查詢內(nèi)的樣式將會生效。10, 你對盒模型的理解是什么？當對一個文檔進行布局（lay out）的時候，瀏覽器的渲染引擎會根據(jù)標準之一的 CSS 基礎框盒模型（CSS basic box model），將所有元素表示為一個個矩形的盒子（box）。CSS 決定這些盒子的大小、位置以及屬性（例如顏色、背景、邊框尺寸）。盒模型由content（內(nèi)容）、padding（內(nèi)邊距）、border（邊框）、margin（外邊距）組成11, 標準盒模型和怪異盒模型有什么區(qū)別？在W3C標準下，我們定義元素的width值即為盒模型中的content的寬度值，height值即

22、為盒模型中的content的高度值。因此，標準盒模型下：元素的寬度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right而IE怪異盒模型（IE8以下）width的寬度并不是content的寬度，而是border-left + padding-left + content的寬度值 + padding-right + border-right之和，height同理。在怪異盒模型下：元素占據(jù)的寬度 = margin-left + width + margin-r

23、ight雖然現(xiàn)代瀏覽器默認使用W3C的標準盒模型，但是在不少情況下怪異盒模型更好用，于是W3C在css3中加入box-sizing12, 談談對BFC的理解是什么？書面解釋：BFC(Block Formatting Context)這幾個英文拆解Block: Block在這里可以理解為Block-level Box,指的是塊級盒子的標準Formatting context：塊級上下文格式化，它是頁面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，它決定了其子元素將如何定位，以及和其他元素的關系和相互作用BFC是指一個獨立的渲染區(qū)域，只有Block-level Box參與， 它規(guī)定了內(nèi)部的Block-le

24、vel Box如何布局，并且與這個區(qū)域外部毫不相干.它的作用是在一塊獨立的區(qū)域，讓處于BFC內(nèi)部的元素與外部的元素互相隔離.如何形成？BFC觸發(fā)條件:根元素，即HTML元素l position: fixed/absolutel float 不為nonel overflow不為visiblel display的值為inline-block、table-cell、table-caption作用是什么？l 防止margin發(fā)生重疊l 兩欄布局，防止文字環(huán)繞等l 防止元素塌陷13, 為什么有時候人們用translate來改變位置而不是定位？translate()是transform的一個值。改變tra

25、nsform或opacity不會觸發(fā)瀏覽器重新布局（reflow）或重繪（repaint），只會觸發(fā)復合（compositions）。而改變絕對定位會觸發(fā)重新布局，進而觸發(fā)重繪和復合。transform使瀏覽器為元素創(chuàng)建一個 GPU 圖層，但改變絕對定位會使用到 CPU。 因此translate()更高效，可以縮短平滑動畫的繪制時間。而translate改變位置時，元素依然會占據(jù)其原始空間，絕對定位就不會發(fā)生這種情況。14, 偽類和偽元素的區(qū)別是什么？是什么？偽類（pseudo-class） 是一個以冒號(:)作為前綴，被添加到一個選擇器末尾的關鍵字，當你希望樣式在特定狀態(tài)下才被呈現(xiàn)到指定的元

26、素時，你可以往元素的選擇器后面加上對應的偽類。偽元素用于創(chuàng)建一些不在文檔樹中的元素，并為其添加樣式。比如說，我們可以通過:before來在一個元素前增加一些文本，并為這些文本添加樣式。雖然用戶可以看到這些文本，但是這些文本實際上不在文檔樹中。區(qū)別其實上文已經(jīng)表達清楚兩者區(qū)別了，偽類是通過在元素選擇器上加入偽類改變元素狀態(tài)，而偽元素通過對元素的操作進行對元素的改變。我們通過p:before對這段文本添加了額外的元素，通過 p:first-child改變了文本的樣式。15, 你對flex的理解？web應用有不同設備尺寸和分辨率，這時需要響應式界面設計來滿足復雜的布局需求，F(xiàn)lex彈性盒模

27、型的優(yōu)勢在于開發(fā)人員只是聲明布局應該具有的行為，而不需要給出具體的實現(xiàn)方式，瀏覽器負責完成實際布局，當布局涉及到不定寬度，分布對齊的場景時，就要優(yōu)先考慮彈性盒布局JS篇1, 解釋下變量提升？JavaScript引擎的工作方式是，先解析代碼，獲取所有被聲明的變量，然后再一行一行地運行。這造成的結(jié)果，就是所有的變量的聲明語句，都會被提升到代碼的頭部，這就叫做變量提升（hoisting）。2, 理解閉包嗎？閉包是什么MDN的解釋：閉包是函數(shù)和聲明該函數(shù)的詞法環(huán)境的組合。按照我的理解就是：閉包 =函數(shù)和函數(shù)體內(nèi)可訪問的變量總和閉包的作用閉包最大的作用就是隱藏變量，閉包的一大特性就是內(nèi)部函數(shù)總是可以訪問

28、其所在的外部函數(shù)中聲明的參數(shù)和變量，即使在其外部函數(shù)被返回（壽命終結(jié)）了之后基于此特性，JavaScript可以實現(xiàn)私有變量、特權(quán)變量、儲存變量等我們就以私有變量舉例，私有變量的實現(xiàn)方法很多，有靠約定的（變量名前加_）,有靠Proxy代理的，也有靠Symbol這種新數(shù)據(jù)類型的。但是真正廣泛流行的其實是使用閉包。3, JavaScript的作用域鏈理解嗎？JavaScript屬于靜態(tài)作用域，即聲明的作用域是根據(jù)程序正文在編譯時就確定的，有時也稱為詞法作用域。其本質(zhì)是JavaScript在執(zhí)行過程中會創(chuàng)造可執(zhí)行上下文，可執(zhí)行上下文中的詞法環(huán)境中含有外部詞法環(huán)境的引用，我們可以通過這個引用獲取外部詞

29、法環(huán)境的變量、聲明等，這些引用串聯(lián)起來一直指向全局的詞法環(huán)境，因此形成了作用域鏈。4, ES6模塊與CommonJS模塊有什么區(qū)別？ES6 Module和CommonJS模塊的區(qū)別：CommonJS是對模塊的淺拷貝，ES6 Module是對模塊的引用,即ES6 Module只存只讀，不能改變其值，具體點就是指針指向不能變，類似constimport的接口是read-only（只讀狀態(tài)），不能修改其變量值。 即不能修改其變量的指針指向，但可以改變變量內(nèi)部指針指向,可以對commonJS對重新賦值（改變指針指向），但是對ES6 Module賦值會編譯報錯。ES6 Module和CommonJS模塊

30、的共同點：CommonJS和ES6 Module都可以對引入的對象進行賦值，即對對象內(nèi)部屬性的值進行改變。5,js有哪些類型？JavaScript的類型分為兩大類，一類是原始類型，一類是復雜(引用）類型。原始類型:l booleanl nulll undefinedl numberl stringl symbol復雜類型:l Object6, null與undefined的區(qū)別是什么？null表示為空，代表此處不應該有值的存在，一個對象可以是null，代表是個空對象，而null本身也是對象。undefined表示不存在，JavaScript是一門動態(tài)類型語言，成員除了表示存在的空值外，還有可能

31、根本就不存在（因為存不存在只在運行期才知道），這就是undefined的意義所在。7, 談談你對原型鏈的理解？這個問題關鍵在于兩個點，一個是原型對象是什么，另一個是原型鏈是如何形成的原型對象絕大部分的函數(shù)(少數(shù)內(nèi)建函數(shù)除外)都有一個prototype屬性,這個屬性是原型對象用來創(chuàng)建新對象實例,而所有被創(chuàng)建的對象都會共享原型對象,因此這些對象便可以訪問原型對象的屬性。原型鏈原因是每個對象都有 _proto_ 屬性，此屬性指向該對象的構(gòu)造函數(shù)的原型。對象可以通過 _proto_與上游的構(gòu)造函數(shù)的原型對象連接起來，而上游的原型對象也有一個_proto_，這樣就形成了原型

32、鏈。8, 談一談你對this的了解？this的指向不是在編寫時確定的,而是在執(zhí)行時確定的，同時，this不同的指向在于遵循了一定的規(guī)則。首先，在默認情況下，this是指向全局對象的，比如在瀏覽器就是指向window。其次，如果函數(shù)被調(diào)用的位置存在上下文對象時，那么函數(shù)是被隱式綁定的。再次，顯示改變this指向，常見的方法就是call、apply、bind最后，也是優(yōu)先級最高的綁定 new 綁定。用 new 調(diào)用一個構(gòu)造函數(shù)，會創(chuàng)建一個新對象, 在創(chuàng)造這個新對象的過程中,新對象會自動綁定到Person對象的this上，那么 this 自然就指向這個新對象。9, 那么箭頭函數(shù)的this指向哪里？箭

33、頭函數(shù)不同于傳統(tǒng)JavaScript中的函數(shù),箭頭函數(shù)并沒有屬于自己的this,它的所謂的this是捕獲其所在上下文的 this 值，作為自己的 this 值,并且由于沒有屬于自己的this,而箭頭函數(shù)是不會被new調(diào)用的，這個所謂的this也不會被改變.10, async/await是什么？async 函數(shù)，就是 Generator 函數(shù)的語法糖，它建立在Promises上，并且與所有現(xiàn)有的基于Promise的API兼容。Async聲明一個異步函數(shù)(async function someName().)自動將常規(guī)函數(shù)轉(zhuǎn)換成Promise，返回值也是一個Promise對象只有async函數(shù)內(nèi)部

34、的異步操作執(zhí)行完，才會執(zhí)行then方法指定的回調(diào)函數(shù)異步函數(shù)內(nèi)部可以使用awaitAwait暫停異步的功能執(zhí)行(var result = await someAsyncCall()😉放置在Promise調(diào)用之前，await強制其他代碼等待，直到Promise完成并返回結(jié)果只能與Promise一起使用，不適用與回調(diào)只能在async函數(shù)內(nèi)部使用11, async/await相比于Promise的優(yōu)勢？代碼讀起來更加同步，Promise雖然擺脫了回調(diào)地獄，但是then的鏈式調(diào)用也會帶來額外的閱讀負擔Promise傳遞中間值非常麻煩，而async/await幾乎是同步的寫法，非常優(yōu)雅錯

35、誤處理友好，async/await可以用成熟的try/catch，Promise的錯誤捕獲非常冗余調(diào)試友好，Promise的調(diào)試很差，由于沒有代碼塊，你不能在一個返回表達式的箭頭函數(shù)中設置斷點，如果你在一個.then代碼塊中使用調(diào)試器的步進(step-over)功能，調(diào)試器并不會進入后續(xù)的.then代碼塊，因為調(diào)試器只能跟蹤同步代碼的每一步。12, JavaScript的參數(shù)是按照什么方式傳遞的？基本類型傳遞方式由于js中存在復雜類型和基本類型,對于基本類型而言,是按值傳遞的.復雜類型按引用傳遞?我們將外部a作為一個對象傳入test函數(shù).按共享傳遞復雜類型之所以會產(chǎn)生這種特性,原因就是在傳遞過

36、程中,對象a先產(chǎn)生了一個副本a,這個副本a并不是深克隆得到的副本a,副本a地址同樣指向?qū)ο骯指向的堆內(nèi)存.13, 聊一聊如何在JavaScript中實現(xiàn)不可變對象？實現(xiàn)不可變數(shù)據(jù)有三種主流的方法l 深克隆，但是深克隆的性能非常差，不適合大規(guī)模使用l Immutable.js，Immutable.js是自成一體的一套數(shù)據(jù)結(jié)構(gòu)，性能良好，但是需要學習額外的APIl immer，利用Proxy特性，無需學習額外的api，性能良好14, JavaScript的基本類型和復雜類型是儲存在哪里的？基本類型儲存在棧中，但是一旦被閉包引用則成為常住內(nèi)存，會儲存在內(nèi)存堆中。復雜類型會儲存在內(nèi)存堆中。Vue篇1,

37、 你對MVVM的理解?MVVM 模式，顧名思義即 Model-View-ViewModel 模式。它萌芽于2005年微軟推出的基于 Windows 的用戶界面框架 WPF ，前端最早的 MVVM 框架 knockout 在2010年發(fā)布。l Model 層: 對應數(shù)據(jù)層的域模型，它主要做域模型的同步。通過 Ajax/fetch 等 API 完成客戶端和服務端業(yè)務 Model 的同步。在層間關系里，它主要用于抽象出 ViewModel 中視圖的 Model。l View 層:作為視圖模板存在，在 MVVM 里，整個 View 是一個動態(tài)模板。除了定義結(jié)構(gòu)、布局外，它展示的是 ViewModel

38、層的數(shù)據(jù)和狀態(tài)。View 層不負責處理狀態(tài)，View 層做的是 數(shù)據(jù)綁定的聲明、 指令的聲明、 事件綁定的聲明。l ViewModel 層:把 View 需要的層數(shù)據(jù)暴露，并對 View 層的 數(shù)據(jù)綁定聲明、 指令聲明、 事件綁定聲明 負責，也就是處理 View 層的具體業(yè)務邏輯。ViewModel 底層會做好綁定屬性的監(jiān)聽。當 ViewModel 中數(shù)據(jù)變化，View 層會得到更新；而當 View 中聲明了數(shù)據(jù)的雙向綁定（通常是表單元素），框架也會監(jiān)聽 View 層（表單）值的變化。一旦值變化，View 層綁定的 ViewModel 中的數(shù)據(jù)也會得到自動更新。2, MVVM的優(yōu)缺點?優(yōu)點:分

39、離視圖（View）和模型（Model）,降低代碼耦合，提高視圖或者邏輯的重用性: 比如視圖（View）可以獨立于Model變化和修改，一個ViewModel可以綁定不同的"View"上，當View變化的時候Model不可以不變，當Model變化的時候View也可以不變。你可以把一些視圖邏輯放在一個ViewModel里面，讓很多view重用這段視圖邏輯提高可測試性: ViewModel的存在可以幫助開發(fā)者更好地編寫測試代碼自動更新dom: 利用雙向綁定,數(shù)據(jù)更新后視圖自動更新,讓開發(fā)者從繁瑣的手動dom中解放缺點:Bug很難被調(diào)試: 因為使用雙向綁定的模式，當你看到界面異常了

40、，有可能是你View的代碼有Bug，也可能是Model的代碼有問題。數(shù)據(jù)綁定使得一個位置的Bug被快速傳遞到別的位置，要定位原始出問題的地方就變得不那么容易了。另外，數(shù)據(jù)綁定的聲明是指令式地寫在View的模版當中的，這些內(nèi)容是沒辦法去打斷點debug的一個大的模塊中model也會很大，雖然使用方便了也很容易保證了數(shù)據(jù)的一致性，當時長期持有，不釋放內(nèi)存就造成了花費更多的內(nèi)存對于大型的圖形應用程序，視圖狀態(tài)較多，ViewModel的構(gòu)建和維護的成本都會比較高3, 你對Vue生命周期的理解？ Vue 實例有一個完整的生命周期，也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模版、掛載Dom -> 渲染、更新

41、 -> 渲染、卸載等一系列過程，我們稱這是Vue的生命周期4, 異步請求適合在哪個生命周期調(diào)用？官方實例的異步請求是在mounted生命周期中調(diào)用的，而實際上也可以在created生命周期中調(diào)用5, Vue組件如何通信？l props/$emit+v-on: 通過props將數(shù)據(jù)自上而下傳遞，而通過$emit和v-on來向上傳遞信息。l EventBus: 通過EventBus進行信息的發(fā)布與訂閱l vuex: 是全局數(shù)據(jù)管理庫，可以通過vuex管理全局的數(shù)據(jù)流l $attrs/$listeners: Vue2.4中加入的$attrs/$listeners可以進行跨級的組件通信l pro

42、vide/inject：以允許一個祖先組件向其所有子孫后代注入一個依賴，不論組件層次有多深，并在起上下游關系成立的時間里始終生效，這成為了跨組件通信的基礎6, computed和watch有什么區(qū)別?computed:computed是計算屬性,也就是計算值,它更多用于計算值的場景computed具有緩存性,computed的值在getter執(zhí)行后是會緩存的，只有在它依賴的屬性值改變之后，下一次獲取computed的值時才會重新調(diào)用對應的getter來計算computed適用于計算比較消耗性能的計算場景watch:更多的是觀察的作用,類似于某些數(shù)據(jù)的監(jiān)聽回調(diào),用于觀察props $e

43、mit或者本組件的值,當數(shù)據(jù)變化時來執(zhí)行回調(diào)進行后續(xù)操作無緩存性，頁面重新渲染時值不變化也會執(zhí)行小結(jié):當我們要進行數(shù)值計算,而且依賴于其他數(shù)據(jù)，那么把這個數(shù)據(jù)設計為computed如果你需要在某個數(shù)據(jù)變化時做一些事情，使用watch來觀察這個數(shù)據(jù)變化7, Vue是如何實現(xiàn)雙向綁定的?利用Object.defineProperty劫持對象的訪問器,在屬性值發(fā)生變化時我們可以獲取變化,然后根據(jù)變化進行后續(xù)響應,在vue3.0中通過Proxy代理對象進行類似的操作。8, Proxy與Object.defineProperty的優(yōu)劣對比?Proxy的優(yōu)勢如下:l Proxy可以直接監(jiān)聽對象而非屬性l

44、Proxy可以直接監(jiān)聽數(shù)組的變化l Proxy有多達13種攔截方法,不限于apply、ownKeys、deleteProperty、has等等是Object.defineProperty不具備的l Proxy返回的是一個新對象,我們可以只操作新的對象達到目的,而Object.defineProperty只能遍歷對象屬性直接修改l Proxy作為新標準將受到瀏覽器廠商重點持續(xù)的性能優(yōu)化，也就是傳說中的新標準的性能紅利Object.defineProperty的優(yōu)勢如下:l 兼容性比較好9, 你是如何理解Vue的響應式系統(tǒng)的?任何一個 Vue Component 都有一個與之對應的 Watcher

45、 實例。Vue 的 data 上的屬性會被添加 getter 和 setter 屬性。當 Vue Component render 函數(shù)被執(zhí)行的時候, data 上會被 觸碰(touch), 即被讀, getter 方法會被調(diào)用, 此時 Vue 會去記錄此 Vue component 所依賴的所有 data。(這一過程被稱為依賴收集)data 被改動時（主要是用戶操作）, 即被寫, setter 方法會被調(diào)用, 此時 Vue 會去通知所有依賴于此 data 的組件去調(diào)用他們的 render 函數(shù)進行更新。10, 既然Vue通過數(shù)據(jù)劫持可以精準探測數(shù)據(jù)變化,為什么還需要虛擬DOM進行diff檢測

46、差異?現(xiàn)代前端框架有兩種方式偵測變化,一種是pull一種是pushl pull: 其代表為React,我們可以回憶一下React是如何偵測到變化的,我們通常會用setStateAPI顯式更新,然后React會進行一層層的Virtual Dom Diff操作找出差異,然后Patch到DOM上,React從一開始就不知道到底是哪發(fā)生了變化,只是知道有變化了,然后再進行比較暴力的Diff操作查找哪發(fā)生變化了，另外一個代表就是Angular的臟檢查操作。l push: Vue的響應式系統(tǒng)則是push的代表,當Vue程序初始化的時候就會對數(shù)據(jù)data進行依賴的收集,一但數(shù)據(jù)發(fā)生變化,響應式系統(tǒng)就會立刻得

47、知,因此Vue是一開始就知道是在哪發(fā)生變化了,但是這又會產(chǎn)生一個問題,如果你熟悉Vue的響應式系統(tǒng)就知道,通常一個綁定一個數(shù)據(jù)就需要一個Watcher,一但我們的綁定細粒度過高就會產(chǎn)生大量的Watcher,這會帶來內(nèi)存以及依賴追蹤的開銷,而細粒度過低會無法精準偵測變化,因此Vue的設計是選擇中等細粒度的方案,在組件級別進行push偵測的方式,也就是那套響應式系統(tǒng),通常我們會第一時間偵測到發(fā)生變化的組件,然后在組件內(nèi)部進行Virtual Dom Diff獲取更加具體的差異,而Virtual Dom Diff則是pull操作,Vue是push+pull結(jié)合的方式進行變化偵測的11, Vue為什么沒

48、有類似于React中shouldComponentUpdate的生命周期？根本原因是Vue與React的變化偵測方式有所不同React是pull的方式偵測變化,當React知道發(fā)生變化后,會使用Virtual Dom Diff進行差異檢測,但是很多組件實際上是肯定不會發(fā)生變化的,這個時候需要用shouldComponentUpdate進行手動操作來減少diff,從而提高程序整體的性能.Vue是pull+push的方式偵測變化的,在一開始就知道那個組件發(fā)生了變化,因此在push的階段并不需要手動控制diff,而組件內(nèi)部采用的diff方式實際上是可以引入類似于shouldComponentUpda

49、te相關生命周期的,但是通常合理大小的組件不會有過量的diff,手動優(yōu)化的價值有限,因此目前Vue并沒有考慮引入shouldComponentUpdate這種手動優(yōu)化的生命周期12, Vue中的key到底有什么用？key是為Vue中的vnode標記的唯一id,通過這個key,我們的diff操作可以更準確、更快速diff算法的過程中,先會進行新舊節(jié)點的首尾交叉對比,當無法匹配的時候會用新節(jié)點的key與舊節(jié)點進行比對,然后超出差異.diff程可以概括為：oldCh和newCh各有兩個頭尾的變量StartIdx和EndIdx，它們的2個變量相互比較，一共有4種比較方式。如果4種比較都沒匹配，如果設置

50、了key，就會用key進行比較，在比較的過程中，變量會往中間靠，一旦StartIdx>EndIdx表明oldCh和newCh至少有一個已經(jīng)遍歷完了，就會結(jié)束比較,這四種比較方式就是首、尾、舊尾新頭、舊頭新尾.準確: 如果不加key,那么vue會選擇復用節(jié)點(Vue的就地更新策略),導致之前節(jié)點的狀態(tài)被保留下來,會產(chǎn)生一系列的bug.快速: key的唯一性可以被Map數(shù)據(jù)結(jié)構(gòu)充分利用,相比于遍歷查找的時間復雜度O(n),Map的時間復雜度僅僅為O(1).React篇1, React最新的生命周期是怎樣的?React 16之后有三個生命周期被廢棄(但并未刪除)l componentWillM

51、ountl componentWillReceivePropsl componentWillUpdate官方計劃在17版本完全刪除這三個函數(shù)，只保留UNSAVE_前綴的三個函數(shù)，目的是為了向下兼容，但是對于開發(fā)者而言應該盡量避免使用他們，而是使用新增的生命周期函數(shù)替代它們目前React 16.8 +的生命周期分為三個階段,分別是掛載階段、更新階段、卸載階段掛載階段:constructor: 構(gòu)造函數(shù)，最先被執(zhí)行,我們通常在構(gòu)造函數(shù)里初始化state對象或者給自定義方法綁定thisgetDerivedStateFromProps: static getDerivedStateFromP

52、rops(nextProps, prevState),這是個靜態(tài)方法,當我們接收到新的屬性想去修改我們state，可以使用getDerivedStateFromPropsrender: render函數(shù)是純函數(shù)，只返回需要渲染的東西，不應該包含其它的業(yè)務邏輯,可以返回原生的DOM、React組件、Fragment、Portals、字符串和數(shù)字、Boolean和null等內(nèi)容componentDidMount: 組件裝載之后調(diào)用，此時我們可以獲取到DOM節(jié)點并操作，比如對canvas，svg的操作，服務器請求，訂閱都可以寫在這個里面，但是記得在componentWillUnmount中取消訂閱更

53、新階段:getDerivedStateFromProps: 此方法在更新個掛載階段都可能會調(diào)用shouldComponentUpdate: shouldComponentUpdate(nextProps, nextState),有兩個參數(shù)nextProps和nextState，表示新的屬性和變化之后的state，返回一個布爾值，true表示會觸發(fā)重新渲染，false表示不會觸發(fā)重新渲染，默認返回true,我們通常利用此生命周期來優(yōu)化React程序性能render: 更新階段也會觸發(fā)此生命周期getSnapshotBeforeUpdate: getSnapshotBefore

54、Update(prevProps, prevState),這個方法在render之后，componentDidUpdate之前調(diào)用，有兩個參數(shù)prevProps和prevState，表示之前的屬性和之前的state，這個函數(shù)有一個返回值，會作為第三個參數(shù)傳給componentDidUpdate，如果你不想要返回值，可以返回null，此生命周期必須與componentDidUpdate搭配使用componentDidUpdate: componentDidUpdate(prevProps, prevState, snapshot),該方法在getSnapshotBeforeUpdate

55、方法之后被調(diào)用，有三個參數(shù)prevProps，prevState，snapshot，表示之前的props，之前的state，和snapshot。第三個參數(shù)是getSnapshotBeforeUpdate返回的,如果觸發(fā)某些回調(diào)函數(shù)時需要用到 DOM 元素的狀態(tài)，則將對比或計算的過程遷移至 getSnapshotBeforeUpdate，然后在 componentDidUpdate 中統(tǒng)一觸發(fā)回調(diào)或更新狀態(tài)。卸載階段:componentWillUnmount: 當我們的組件被卸載或者銷毀了就會調(diào)用，我們可以在這個函數(shù)里去清除一些定時器，取消網(wǎng)絡請求，清理無效的DOM元素等垃圾清理工作2, Rea

56、ct的請求應該放在哪個生命周期中?React的異步請求到底應該放在哪個生命周期里,有人認為在componentWillMount中可以提前進行異步請求,避免白屏,其實這個觀點是有問題的.由于JavaScript中異步事件的性質(zhì)，當您啟動API調(diào)用時，瀏覽器會在此期間返回執(zhí)行其他工作。當React渲染一個組件時，它不會等待componentWillMount它完成任何事情 - React繼續(xù)前進并繼續(xù)render,沒有辦法“暫?！变秩疽缘却龜?shù)據(jù)到達。而且在componentWillMount請求會有一系列潛在的問題,首先,在服務器渲染時,如果在 componentWillMount 里獲取數(shù)據(jù)，

57、fetch data會執(zhí)行兩次，一次在服務端一次在客戶端，這造成了多余的請求,其次,在React 16進行React Fiber重寫后,componentWillMount可能在一次渲染中多次調(diào)用.目前官方推薦的異步請求是在componentDidmount中進行.如果有特殊需求需要提前請求,也可以在特殊情況下在constructor中請求:react 17之后componentWillMount會被廢棄,僅僅保留UNSAFE_componentWillMount3, setState到底是異步還是同步?先給出答案: 有時表現(xiàn)出異步,有時表現(xiàn)出同步setState只在合成事件和鉤子函數(shù)中是“異步”的，在原生事件和setTimeout 中都是同步的。setState 的“異步”并不是說內(nèi)部由異步代碼實現(xiàn)，其實本身執(zhí)行的過程和代碼都是同步的，只是合成事件和鉤

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論