歷年前端(1~5年經(jīng)驗(yàn))面試題

歷年前端（1~5年經(jīng)驗(yàn)）面試題（一）一、HTML/CSS篇1、href與src區(qū)別？【僅供參考】href（HypertextReference）指定網(wǎng)絡(luò)資源的位置，從而在當(dāng)前元素或者當(dāng)前文檔和由當(dāng)前屬性定義的需要的錨點(diǎn)或資源之間定義一個(gè)鏈接或者關(guān)系。（目的不是為了引用資源，而是為了建立聯(lián)系，讓當(dāng)前標(biāo)簽?zāi)軌蜴溄拥侥繕?biāo)地址。）srcsource（縮寫），指向外部資源的位置，指向的內(nèi)容將會(huì)應(yīng)用到文檔中當(dāng)前標(biāo)簽所在位置。href與src的區(qū)別請(qǐng)求資源類型不同：href指向網(wǎng)絡(luò)資源所在位置，建立和當(dāng)前元素（錨點(diǎn)）或當(dāng)前文檔（鏈接）之間的聯(lián)系。在請(qǐng)求src資源時(shí)會(huì)將其指向的資源下載并應(yīng)用到文檔中，比如JavaScript腳本，img圖片；作用結(jié)果不同：href用于在當(dāng)前文檔和引用資源之間確立聯(lián)系；src用于替換當(dāng)前內(nèi)容；瀏覽器解析方式不同：當(dāng)瀏覽器解析到src,會(huì)暫停其他資源的下載和處理，直到將該資源加載、編譯、執(zhí)行完畢，圖片和框架等也如此，類似于將所指向資源應(yīng)用到當(dāng)前內(nèi)容。這也是為什么建議把js腳本放在底部而不是頭部的原因。2、HTML5為什么只需要寫<!doctypehtm>?【僅供參考】HTML5不基于SGML,因此不需要對(duì)DTD進(jìn)行引用，但是需要D0CTYPE來(lái)規(guī)范瀏覽器的行為（讓瀏覽器按照它們的方式來(lái)運(yùn)行）。而HTM4.01基于SGML,所以需要對(duì)DTD進(jìn)行引用，才能告知瀏覽器文檔所使用的類型。3、行內(nèi)元素有哪些？塊級(jí)元素有哪些？空（void）元素有那些？【僅供參考】定義：CSS規(guī)范規(guī)定，每個(gè)元素都有display屬性，確定該元素的類型，每個(gè)元素都有默認(rèn)的display值，如div的display默認(rèn)值為“block"，則為“塊級(jí)”元素;span默認(rèn)display屬性值為"inline”,是“行內(nèi)”元素。行內(nèi)元素有：abspanimginputselectstrong（強(qiáng)調(diào)的語(yǔ)氣）使用外鏈css和js腳本、結(jié)構(gòu)行為表現(xiàn)的分離、文件下載與頁(yè)面速度更快W3c標(biāo)準(zhǔn)使網(wǎng)站容易維護(hù)、有利于搜索引擎查找13、TypeScript中的類型斷言？【僅供參考】類型斷言可以手動(dòng)指定一個(gè)值的類型//第一種letemployeeCode=<number>code;〃第二種letemployeeCode=codeasnumber14、TypeScript中？.，？？，！：，_,**等符號(hào)的含義？【僅供參考】?.可選鏈??類似與短路或，？?避免了一些意外情況，0,NaN以及〃'[false被視為false值。只有undefind,null被視為false值。!.在變量名后添加！，可以斷言排除undefined和null類型一，聲明該函數(shù)將被傳遞一個(gè)參數(shù)，但您并不關(guān)心它!：待會(huì)分配這個(gè)變量，ts不要擔(dān)心**求嘉15、TypeScript的as語(yǔ)法是什么？【僅供參考】as是TypeScript中類型斷言的附加語(yǔ)法，引入as-語(yǔ)法的原因是原始語(yǔ)法()與JSX沖突letempCode:any=111;letemployeeCode=codeasnumber;16、枚舉和常量枚舉的區(qū)別？【僅供參考】枚舉會(huì)被編譯時(shí)會(huì)編譯成一個(gè)對(duì)象，可以被當(dāng)作對(duì)象使用const枚舉會(huì)在typescript編譯期間被刪除，const枚舉成員在使用的地方會(huì)被內(nèi)聯(lián)進(jìn)來(lái)，避免額外的性能開銷17、TypeScript與JavaScript有什么不同【僅供參考】TypeScript支持ES6它支持強(qiáng)類型或靜態(tài)類型、模塊、可選參數(shù)等。它支持面向?qū)ο蟮木幊谈拍睿珙?、接口、繼承、泛型等。TypeScript有可選的參數(shù)特性。它編譯代碼并在開發(fā)期間突出顯示錯(cuò)誤。TypeScript支持模塊。TypeScript在編譯時(shí)提供了錯(cuò)誤檢查功能。它將編譯代碼，如果發(fā)現(xiàn)任何錯(cuò)誤，它將在運(yùn)行腳本之前突出顯示這些錯(cuò)誤。18、Promise中reject和catch處理上有什么區(qū)別【僅供參考】reject是用來(lái)拋出異常，catch是用來(lái)處理異常reject是Promise的方法，而catch是Promise實(shí)例的方法reject后的東西，一定會(huì)進(jìn)入then中的第二個(gè)回調(diào)，如果then中沒有寫第二個(gè)回調(diào)，則進(jìn)入catch網(wǎng)絡(luò)異常(比如斷網(wǎng))，會(huì)直接進(jìn)入catch而不會(huì)進(jìn)入then的第二個(gè)回調(diào)19、ES6的模板字符串有哪些新特性？并實(shí)現(xiàn)一個(gè)類模板字符串的功能【僅供參考】基本的字符串格式化。將表達(dá)式嵌入字符串中進(jìn)行拼接。用${}來(lái)界定在ES5時(shí)我們通過(guò)反斜杠()來(lái)做多行字符串或者字符串一行行拼接。ES6反引號(hào)('、)就能解決類模板字符串的功能letname='web';letage=10;letstr='你好，${name}已經(jīng)${age}歲了'str=str.replace(/\$\{(["}]*)\}/g,function(){returneval(arguments[1]);))console,log(str);〃你好，web已經(jīng)10歲了20、什么時(shí)候不使用箭頭函數(shù)？說(shuō)出三個(gè)或更多的例子【僅供參考】使用函數(shù)作為構(gòu)造函數(shù)時(shí)(箭頭函數(shù)沒有構(gòu)造函數(shù))要在函數(shù)中使用this/arguments時(shí)，由于箭頭函數(shù)本身不具有this/arguments,因此它們?nèi)Q于外部上下文當(dāng)想要函數(shù)被提升時(shí)（箭頭函數(shù)是匿名的）當(dāng)我們希望函數(shù)中的this指向調(diào)用這個(gè)函數(shù)的對(duì)象時(shí)，也不用箭頭函數(shù)，因?yàn)樵蹅儫o(wú)法保證this即對(duì)象本身。三、Vue/React篇1、什么是ReactFiber?【僅供參考】Fiber是React16中新的協(xié)調(diào)引擎或重新實(shí)現(xiàn)核心算法。它的主要目標(biāo)是支持虛擬DOM的增量渲染。ReactFiber的目標(biāo)是提高其在動(dòng)畫、布局、手勢(shì)、暫停、中止或重用等方面的適用性，并為不同類型的更新分配優(yōu)先級(jí)，以及新的并發(fā)原語(yǔ)。ReactFiber的目標(biāo)是增強(qiáng)其在動(dòng)畫、布局和手勢(shì)等領(lǐng)域的適用性。它的主要特性是增量渲染:能夠?qū)秩竟ぷ鞣指畛蓧K，并將其分散到多個(gè)幀中。2、React中的合成事件是什么？【僅供參考】合成事件是圍繞瀏覽器原生事件充當(dāng)跨瀏覽器包裝器的對(duì)象。它們將不同瀏覽器的行為合并為一個(gè)APE這樣做是為了確保事件在不同瀏覽器中顯示一致的屬性。3、如何在ReactJS的Props上應(yīng)用驗(yàn)證？【僅供參考】當(dāng)應(yīng)用程序在開發(fā)模式下運(yùn)行時(shí)，React將自動(dòng)檢查咱們?cè)诮M件上設(shè)置的所有props,以確保它們具有正確的數(shù)據(jù)類型。對(duì)于不正確的類型，開發(fā)模式下會(huì)在控制臺(tái)中生成警告消息，而在生產(chǎn)模式中由于性能影響而禁用它。強(qiáng)制的props用isRequired定義的。下面是一組預(yù)定義的prop類型:React.PropTypes.stringReact.PropTypes.numberReact.PropTypes.funcReact.PropTypes.nodeReact.PropTypes.bool4、為什么ReactRouterv4中使用switch關(guān)鍵字【僅供參考】雖然＜P＞用于封裝Router中的多個(gè)路由，當(dāng)你想要僅顯示要在多個(gè)定義的路線中呈現(xiàn)的單個(gè)路線時(shí)，可以使用“switch”關(guān)鍵字。使用時(shí)，＜switch＞標(biāo)記會(huì)按順序?qū)⒁讯x的URL與己定義的路由進(jìn)行匹配。找到第一個(gè)匹配項(xiàng)后，它將渲染指定的路徑。從而繞過(guò)其它路線5、什么是高階組件？【僅供參考】高階組件(HOC)是接受一個(gè)組件并返回一個(gè)新組件的函數(shù)?；旧希@是一個(gè)模式，是從React的組合特性中衍生出來(lái)的，稱其為純組件，因?yàn)樗鼈兛梢越邮苋魏蝿?dòng)態(tài)提供的子組件，但不會(huì)修改或復(fù)制輸入組件中的任何行為HOC可以用于以下許多用例代碼重用、邏輯和引導(dǎo)抽象渲染劫持state抽象和操作props處理6、Vue組件間通信有哪幾種方式？【僅供參考】Vue組件間通信是面試?？嫉闹R(shí)點(diǎn)之一，這題有點(diǎn)類似于開放題，你回答出越多方法當(dāng)然越加分，表明你對(duì)Vue掌握的越熟練。Vue組件間通信只要指以下3類通信：父子組件通信、隔代組件通信、兄弟組件通信，下面我們分別介紹每種通信方式且會(huì)說(shuō)明此種方法可適用于哪類組件間通信。props/$emit適用父子組件通信這種方法是Vue組件的基礎(chǔ)，相信大部分同學(xué)耳聞能詳，所以此處就不舉例展開介紹。ref與$parent/$children適用父子組件通信ref：如果在普通的D0M元素上使用，引用指向的就是D0M元素；如果用在子組件上，引用就指向組件實(shí)例Sparent/$children：訪問(wèn)父/子實(shí)例EventBus($emit/$on)適用于父子、隔代、兄弟組件通信這種方法通過(guò)一個(gè)空的Vue實(shí)例作為中央事件總線(事件中心)，用它來(lái)觸發(fā)事件和監(jiān)聽事件，從而實(shí)現(xiàn)任何組件間的通信，包括父子、隔代、兄弟組件。$attrs/$listeners適用于隔代組件通信Sattrs：包含了父作用域中不被prop所識(shí)別（且獲取）的特性綁定（class和style除外）。當(dāng)一個(gè)組件沒有聲明任何prop時(shí)，這里會(huì)包含所有父作用域的綁定（class和style除外）,并且可以通過(guò)v-bind="$attrs”傳入內(nèi)部組件。通常配合inheritAttrs選項(xiàng)一起使用。Slisteners：包含了父作用域中的（不含.native修飾器的）v-on事件監(jiān)聽器。它可以通過(guò)v-on="$listeners”傳入內(nèi)部組件provide/inject適用于隔代組件通信祖先組件中通過(guò)provider來(lái)提供變量，然后在子孫組件中通過(guò)inject來(lái)注入變量。provide/injectAPI主要解決了跨級(jí)組件間的通信問(wèn)題，不過(guò)它的使用場(chǎng)景，主要是子組件獲取上級(jí)組件的狀態(tài)，跨級(jí)組件間建立了一種主動(dòng)提供與依賴注入的關(guān)系。Vuex適用于父子、隔代、兄弟組件通信Vuex是一個(gè)專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式。每一個(gè)Vuex應(yīng)用的核心就是store（倉(cāng)庫(kù)）?！皊tore”基本上就是一個(gè)容器，它包含著你的應(yīng)用中大部分的狀態(tài)（state）oVuex的狀態(tài)存儲(chǔ)是響應(yīng)式的。當(dāng)Vue組件從store中讀取狀態(tài)的時(shí)候，若store中的狀態(tài)發(fā)生變化，那么相應(yīng)的組件也會(huì)相應(yīng)地得到高效更新。改變store中的狀態(tài)的唯一途徑就是顯式地提交（commit）mutation。這樣使得我們可以方便地跟蹤每一個(gè)狀態(tài)的變化。7、Vuex是通過(guò)什么方式提供響應(yīng)式數(shù)據(jù)的？【僅供參考】在Store構(gòu)造函數(shù)中通過(guò)newVue（｛｝）實(shí)現(xiàn)的。利用Vue來(lái)監(jiān)聽state下的數(shù)據(jù)變化，給狀態(tài)（數(shù)據(jù)）添加getter、setter可以監(jiān)聽數(shù)據(jù)改變。8、vue.js的兩個(gè)核心是什么？【僅供參考】數(shù)據(jù)驅(qū)動(dòng)和組件化思想9、Object,defineProperty怎么用，三個(gè)參數(shù)？，有什么作用啊?【僅供參考】Object.defineProperty()方法會(huì)直接在一個(gè)對(duì)象上定義一個(gè)新屬性，或者修改一個(gè)對(duì)象的現(xiàn)有屬性，并返回此對(duì)象。obj：需要定義屬性的對(duì)象prop：需要定義的屬性{}：要定義或修改的屬性描述符。value:〃18〃，//設(shè)置默認(rèn)值(與get()互斥)enumerable:true,〃這一句控制屬性可以枚舉enumerable改為true就可以參與遍歷了默認(rèn)值falsewritable:true,//該屬性是否可寫默認(rèn)值false(與set()互斥)configurable:true,//該屬性是否可被刪除默認(rèn)值falseget//當(dāng)有人讀取prop的時(shí)候get函數(shù)就會(huì)調(diào)用，并且返回就是sss的值set//當(dāng)有人修改prop的時(shí)候set函數(shù)就會(huì)調(diào)用，有個(gè)參數(shù)這個(gè)參數(shù)就是修改后的值10、說(shuō)一下Vue生命周期四個(gè)初始化階段方法【僅供參考】beforeCreate(){},創(chuàng)建vue之前執(zhí)行(數(shù)據(jù)和虛擬D0M樹還沒有加載完成)created(){},創(chuàng)建vue之前執(zhí)行(數(shù)據(jù)已經(jīng)加載好，虛擬D0M樹沒有加載完成)beforeMount0{},頁(yè)面渲染之前執(zhí)行(數(shù)據(jù)和虛擬D0M樹都已經(jīng)加載好，但數(shù)據(jù)這時(shí)并沒有填充)mounted(){},頁(yè)面渲染之后(數(shù)據(jù)已經(jīng)填充完成)11、v-pre的作用【僅供參考】可以讓元素及元素的子元素不編譯解析，這樣可以加快vue的解析速度12、響應(yīng)式原理(變化偵測(cè))【僅供參考】使用發(fā)布訂閱模式將數(shù)據(jù)劫持和模板編譯結(jié)合，實(shí)現(xiàn)雙向綁定1、observer:封裝Object.defineProperty方法用來(lái)劫持對(duì)象屬性的getter和setter,以此來(lái)追蹤數(shù)據(jù)變化。2、讀取數(shù)據(jù)時(shí)觸發(fā)getter來(lái)收集依賴(Watcher)到Dep。3、修改數(shù)據(jù)時(shí)觸發(fā)setter,并遍歷依賴列表，通知所有相關(guān)依賴(Watcher)4、Dep類為依賴找一個(gè)存儲(chǔ)依賴的地方，用來(lái)收集和管理依賴，在getter中收集，在setter中通知。5、Watcher類就是收集的依賴，實(shí)際上是一個(gè)訂閱器，Watcher會(huì)將自己的實(shí)例賦值給window,target(全局變量)上，然后去主動(dòng)訪問(wèn)屬性，觸發(fā)屬性的getter,getter中會(huì)將此Watcher收集到Dep中，Watcher的update方法會(huì)在Dep的通知方法中被調(diào)用，觸發(fā)更新。6、Observer類用來(lái)將一個(gè)對(duì)象的所有屬性和子屬性都變成響應(yīng)式的，通過(guò)遞歸調(diào)用defineReactive來(lái)實(shí)現(xiàn)。7、由于無(wú)法偵測(cè)對(duì)象上新增/刪除屬性，所以提供$set和$deleteAPI5。13、說(shuō)一下V-bind是什么，有什么用？【僅供參考】v-bind：綁定屬性14、說(shuō)一*下vm.$mount()的作用【僅供參考】手動(dòng)地掛載一個(gè)未掛載的實(shí)例15、vue中key值的作用【僅供參考】需要使用key來(lái)給每個(gè)節(jié)點(diǎn)做一個(gè)唯一標(biāo)識(shí)，Diff算法就可以正確的識(shí)別此節(jié)點(diǎn)，找到正確的位置區(qū)插入新的節(jié)點(diǎn)所以一句話，key的作用主要是為了高效的更新虛擬DOM16、談?wù)勀銓?duì)keep-alive的了解？【僅供參考】keep-alive是Vue內(nèi)置的一個(gè)組件，可以使被包含的組件保留狀態(tài)，避免重新渲染，其有以下特性：一般結(jié)合路由和動(dòng)態(tài)組件一起使用，用于緩存組件；提供include和exclude屬性，兩者都支持字符串或正則表達(dá)式，include表示只有名稱匹配的組件會(huì)被緩存，exclude表示任何名稱匹配的組件都不會(huì)被緩存，其中exclude的優(yōu)先級(jí)比include高；對(duì)應(yīng)兩個(gè)鉤子函數(shù)activated和deactivated,當(dāng)組件被激活時(shí)，觸發(fā)鉤子函數(shù)activated,當(dāng)組件被移除時(shí),觸發(fā)鉤子函數(shù)deactivatedo17、v-cloak指令的作用【僅供參考】用于防止閃屏，防止頁(yè)面出現(xiàn){{}}18、說(shuō)一下你對(duì)組件的理解【僅供參考】對(duì)頁(yè)面某一個(gè)區(qū)域進(jìn)行封裝，這個(gè)區(qū)域可以很小，也可以就是整個(gè)頁(yè)面組件本身就是一個(gè)Vue實(shí)例對(duì)象組件必須有且只有一個(gè)根元素1、就是一個(gè)可復(fù)用的vue實(shí)例，可以作用組件對(duì)頁(yè)面進(jìn)行封裝，可以把頁(yè)面的某一個(gè)區(qū)域封裝成一個(gè)組件，然后復(fù)用封裝的區(qū)域可以就是一個(gè)標(biāo)簽，也可以是整個(gè)頁(yè)面2、組件就是一個(gè)可復(fù)用的vue實(shí)例，則vue中有的東西，組件中都可以使用(比如屬性計(jì)算，監(jiān)聽，生命周期)但是組件沒有el這個(gè)選項(xiàng)，并且data是一個(gè)函數(shù)3、組件必需要有一個(gè)根元素標(biāo)簽(不能有兩個(gè))19、舉例說(shuō)明vue事件綁定中有哪些修飾符，分別作用是什么【僅供參考】stop-調(diào)用event.stopPropagation()0prevent-調(diào)用event.preventDefault()ocapture-添加事件偵聽器時(shí)使用capture模式。self-只當(dāng)事件是從偵聽器綁定的元素本身觸發(fā)時(shí)才觸發(fā)回調(diào)。{keyCode|keyAlias)-只當(dāng)事件是從特定鍵觸發(fā)時(shí)才觸發(fā)回調(diào)。.native-監(jiān)聽組件根元素的原生事件。once-只觸發(fā)一次回調(diào)。left-(2.2.0)只當(dāng)點(diǎn)擊鼠標(biāo)左鍵時(shí)觸發(fā)。right-(2.2.0)只當(dāng)點(diǎn)擊鼠標(biāo)右鍵時(shí)觸發(fā)。middle-(2.2.0)只當(dāng)點(diǎn)擊鼠標(biāo)中鍵時(shí)觸發(fā)。passive-(2.3.0)以{passive:true}模式添加偵聽器20、v-model的原理？【僅供參考】我們?cè)趘ue項(xiàng)目中主要使用v-model指令在表單input、textarea、select等元素上創(chuàng)建雙向數(shù)據(jù)綁定，我們知道v-model本質(zhì)上不過(guò)是語(yǔ)法糖，v-model在內(nèi)部為不同的輸入元素使用不同的屬性并拋出不同的事件：text和textarea元素使用value屬性和input事件；checkbox和radio使用checked屬性和change事件；select字段將value作為prop并將change作為事件。以input表單元素為例：<inputv-model=，something'>相當(dāng)于<inputv-bind:value=/，something/zv-on:input二〃something;$event.target,value”〉如果在自定義組件中，v-model默認(rèn)會(huì)利用名為value的prop和名為input的事件，如下所示：父組件：<ModelChildv-model=z/messagez/></ModelChild>子組件：<div>{{value}}</div>props:{value:String},methods:{testl(){this.$emit('input5,'小紅')},),四、Webpack/Rollup篇1、webpack,rollup和parcel對(duì)比？【僅供參考】webpack為處理資源管理和分割代碼而生，可以包含任何類型的文件，靈活，插件多rollup用標(biāo)準(zhǔn)化的格式(es6)來(lái)寫代碼，通過(guò)減少死代碼(tree-shaking)盡可能地縮小包體積parcel超快的打包速度，多線程在多核上并發(fā)編譯，不用任何配置webpack和rollup都需要配config文件，指明entry,output,plugin,transformations二者的細(xì)微區(qū)別在于：rollup有對(duì)import/export所做的nodepolyfills,webpack沒有rollup支持相對(duì)路徑，而webpack沒有，所以得使用path.resolve/path.join兩者實(shí)現(xiàn)tree-shaking的方式也不一樣，這是個(gè)面試點(diǎn)，會(huì)問(wèn)到，實(shí)現(xiàn)方式，哪個(gè)體積更小更徹底，為什么parcel則是完全開箱可用的，不用配置2、Webpack的基本功能有哪些？【僅供參考】代碼轉(zhuǎn)換：TypeScript編譯成JavaScript、SCSS編譯成CSS等等文件優(yōu)化：壓縮JavaScript、CSS、html代碼，壓縮合并圖片等代碼分割：提取多個(gè)頁(yè)面的公共代碼、提取首屏不需要執(zhí)行部分的代碼讓其異步加載模塊合并：在采用模塊化的項(xiàng)目有很多模塊和文件，需要構(gòu)建功能把模塊分類合并成一個(gè)文件自動(dòng)刷新：監(jiān)聽本地源代碼的變化，自動(dòng)構(gòu)建，刷新瀏覽器代碼校驗(yàn)：在代碼被提交到倉(cāng)庫(kù)前需要檢測(cè)代碼是否符合規(guī)范，以及單元測(cè)試是否通過(guò)自動(dòng)發(fā)布：更新完代碼后，自動(dòng)構(gòu)建出線上發(fā)布代碼并傳輸給發(fā)布系統(tǒng)。3、Webpack的打包過(guò)程/打包原理/構(gòu)建流程？【僅供參考】初始化：?jiǎn)?dòng)構(gòu)建，讀取與合并配置參數(shù)，加載plugin,實(shí)例化Compiler編譯：從Entry出發(fā)，針對(duì)每個(gè)Module串行調(diào)用對(duì)應(yīng)的Loader去翻譯文件中的內(nèi)容，再找到該Module依賴的Module,遞歸的進(jìn)行編譯處理輸出：將編譯后的Module組合成Chunk,將Chunk轉(zhuǎn)換成文件，輸出到文件系統(tǒng)中細(xì)節(jié)：WebpackCLI通過(guò)yargs模塊解析CLI參數(shù)，并轉(zhuǎn)化為配置對(duì)象option(單入口：Object,多入口:Array),調(diào)用webpack(option)創(chuàng)建compiler對(duì)象。如果有option,plugin,則遍歷調(diào)用plugin.apply()來(lái)注冊(cè)plugin,判斷是否開啟了watch,如果開啟則調(diào)用compiler,watch,否則調(diào)用compiler.run,開始構(gòu)建。創(chuàng)建Compilation對(duì)象來(lái)收集全部資源和信息，然后觸發(fā)make鉤子。make階段從入口開始遞歸所有依賴，每次遍歷時(shí)調(diào)用對(duì)應(yīng)Loader翻譯文件中內(nèi)容，然后生成AST,遍歷AST找到下個(gè)依賴?yán)^續(xù)遞歸，塊級(jí)元素有：divulollidldtddhlh2h3h4…p空元素：常見：brhrimginputlinkmeta不常見：areabasecolcommandembedkeygenparamsourcetrackwbr4、請(qǐng)你說(shuō)一下WebWorker和WebSocket的作用?！緝H供參考】WebWorker的作用如下：(1)通過(guò)worker=newWorker(url)加載一個(gè)JavaScript文件，創(chuàng)建一■個(gè)Worker,同時(shí)返回一個(gè)Worker實(shí)例(2)用worker.postMessage(data)向Worker發(fā)送數(shù)據(jù)(3)綁定worker,onmessage接收Worker發(fā)送過(guò)來(lái)的數(shù)據(jù)(4)可以使用worker,terminate()終止一個(gè)Worker的執(zhí)行。WebSocket的作用如下。它是Web應(yīng)用程序的傳輸協(xié)議，提供了雙向的、按序到達(dá)的數(shù)據(jù)流。它是HTML5新增的協(xié)議，WebSocket的連接是持久的，它在客戶端和服務(wù)器之間保持雙工連接，服務(wù)器的更新可以及時(shí)推送到客戶端，而不需要客戶端以一定的時(shí)間間隔去輪詢。5、HTML5應(yīng)用程序緩存為應(yīng)用帶來(lái)什么優(yōu)勢(shì)？【僅供參考】應(yīng)用程序緩存為應(yīng)用帶來(lái)3個(gè)優(yōu)勢(shì)。(1)離線瀏覽，讓用戶可在應(yīng)用離線時(shí)(網(wǎng)絡(luò)不可用時(shí))使用它們。(2)速度，讓已緩存資源加載得更快。(3)減少服務(wù)器負(fù)載，讓瀏覽器將只下載服務(wù)器更新過(guò)的資源。6、介紹一下你對(duì)瀏覽器內(nèi)核的理解？【僅供參考】主要分成兩部分：渲染引擎(layoutengineer或RenderingEngine)和JS引擎。渲染引擎：負(fù)責(zé)取得網(wǎng)頁(yè)的內(nèi)容(HTML、XML、圖像等等)、整理訊息(例如加入CSS等)，以及計(jì)算網(wǎng)頁(yè)的顯示方式，然后渲染到用戶的屏幕上。JS引擎則：解析和執(zhí)行javascript來(lái)實(shí)現(xiàn)邏輯和控制D0M進(jìn)行交互。最開始渲染引擎和JS引擎并沒有區(qū)分的很明確，后來(lái)JS引擎越來(lái)越獨(dú)立，內(nèi)核就傾向于只指渲染引擎。根據(jù)入口和模塊之間關(guān)系組裝chunk,輸出到dist中的一個(gè)文件內(nèi)。在以上過(guò)程中，webpack會(huì)在特定的時(shí)間點(diǎn)(使用tapable模塊)廣播特定的事件，插件監(jiān)聽事件并執(zhí)行相應(yīng)的邏輯，并且插件可以調(diào)用webpack提供的api改變webpack的運(yùn)行結(jié)果4、webpack的作用是什么，談?wù)勀銓?duì)它的理解？【僅供參考】現(xiàn)在的前端網(wǎng)頁(yè)功能豐富，特別是SPA(singlepagewebapplication單頁(yè)應(yīng)用)技術(shù)流行后，JavaScript的復(fù)雜度增加和需要一大堆依賴包，還需要解決Scss,Less……新增樣式的擴(kuò)展寫法的編譯工作。所以現(xiàn)代化的前端已經(jīng)完全依賴于webpack的輔助了。現(xiàn)在最流行的三個(gè)前端框架，可以說(shuō)和webpack已經(jīng)緊密相連，框架官方都推出了和自身框架依賴的webpack構(gòu)建工具。react.js+WebPackvue.js+WebPackAngluarJS+WebPack5、HMR熱模塊更新【僅供參考】借助webpack.HotModuleReplacementPlugin(),devServer開啟hot場(chǎng)景1：實(shí)現(xiàn)只刷新css,不影響js場(chǎng)景2：js中實(shí)現(xiàn)熱更新，只更新指定js模塊if(module,hot){module,hot.acceptC./library,js',function(){//Dosomethingwiththeupdatedlibrarymodule…})；6、webpack的工作原理？【僅供參考】WebPack可以看做是模塊打包機(jī)：它做的事情是，分析你的項(xiàng)目結(jié)構(gòu)，找到JavaScript模塊以及其它的一些瀏覽器不能直接運(yùn)行的拓展語(yǔ)言(Sass,TypeScript等)，并將其轉(zhuǎn)換和打包為合適的格式供瀏覽器使用。在3.0出現(xiàn)后，Webpack還肩負(fù)起了優(yōu)化項(xiàng)目的責(zé)任。7、有哪些常見的Plugin?他們是解決什么問(wèn)題的?【僅供參考】html-webpack-plugin：可以復(fù)制一個(gè)有結(jié)構(gòu)的html文件，并自動(dòng)引入打包輸出的所有資源（JS/CSS）clean-webpack-plugin：重新打包自動(dòng)清空dist目錄mini-css-extract-plugin：提取js中的css成單獨(dú)文件optimize-css-assets-webpack-plugin：壓縮cssuglifyjs-webpack-plugin：壓縮jscommons-chunk-plugin：提取公共代碼define-plugin：定義環(huán)境變量8、常見Plugins【僅供參考】HtmlWbpackPlugin自動(dòng)在打包結(jié)束后生成html文件，并引入bundle.jscleanwebPackPlugin打包自動(dòng)刪除上次打包文件9、前端為什么要進(jìn)行打包和構(gòu)建？【僅供參考】代碼層面：體積更小（Tree-shaking、壓縮、合并），加載更快編譯高級(jí)語(yǔ)言和語(yǔ)法（TS、ES6、模塊化、scss）兼容性和錯(cuò)誤檢查（polyfill,postcss,eslint）研發(fā)流程層面：統(tǒng)一、高效的開發(fā)環(huán)境統(tǒng)一的構(gòu)建流程和產(chǎn)出標(biāo)準(zhǔn)集成公司構(gòu)建規(guī)范（提測(cè)、上線）10、webpack的核心概念【僅供參考】Entry：入口，Webpack執(zhí)行構(gòu)建的第一步將從Entry開始，可抽象成輸入。告訴webpack要使用哪個(gè)模塊作為構(gòu)建項(xiàng)目的起點(diǎn)，默認(rèn)為./src/index.jsoutput：出口，告訴webpack在哪里輸出它打包好的代碼以及如何命名，默認(rèn)為./distModule：模塊，在Webpack里一切皆模塊，一個(gè)模塊對(duì)應(yīng)著一個(gè)文件。Webpack會(huì)從配置的Entry開始遞歸找出所有依賴的模塊。Chunk：代碼塊，一個(gè)Chunk由多個(gè)模塊組合而成，用于代碼合并與分割。Loader：模塊轉(zhuǎn)換器，用于把模塊原內(nèi)容按照需求轉(zhuǎn)換成新內(nèi)容。Plugin：擴(kuò)展插件，在Webpack構(gòu)建流程中的特定時(shí)機(jī)會(huì)廣播出對(duì)應(yīng)的事件,插件可以監(jiān)聽這些事件的發(fā)生，在特定時(shí)機(jī)做對(duì)應(yīng)的事情。11、loader的作用【僅供參考】webpack中的loader是一個(gè)函數(shù)，主要為了實(shí)現(xiàn)源碼的轉(zhuǎn)換，所以loader函數(shù)會(huì)以源碼作為參數(shù)，比如，將ES6轉(zhuǎn)換為ES5,將less轉(zhuǎn)換為css,然后再將css轉(zhuǎn)換為js,以便能嵌入到html文件中。12、談?wù)勀銓?duì)Webpack的理解(Webpack是什么？)【僅供參考】Webpack是一個(gè)模塊打包器，可以分析各個(gè)模塊的依賴關(guān)系，最終打包成bundle靜態(tài)文件(js>css>jpg)。webpack是一個(gè)靜態(tài)模塊打包器，當(dāng)webpack處理應(yīng)用程序時(shí)，會(huì)遞歸構(gòu)建一個(gè)依賴關(guān)系圖，其中包含應(yīng)用程序需要的每個(gè)模塊，然后將這些模塊打包成一個(gè)或多個(gè)bundleowebpack就像一條生產(chǎn)線,要經(jīng)過(guò)一系列處理流程(loader)后才能將源文件轉(zhuǎn)換成輸出結(jié)果。這條生產(chǎn)線上的每個(gè)處理流程的職責(zé)都是單一的，多個(gè)流程之間有存在依賴關(guān)系，只有完成當(dāng)前處理后才能交給下一個(gè)流程去處理。插件就像是一個(gè)插入到生產(chǎn)線中的一個(gè)功能,在特定的時(shí)機(jī)對(duì)生產(chǎn)線上的資源做處理。webpack在運(yùn)行過(guò)程中會(huì)廣播事件，插件只需要監(jiān)聽它所關(guān)心的事件，就能加入到這條生產(chǎn)線中，去改變生產(chǎn)線的運(yùn)作。13、有哪些常見的Loader?他們是解決什么問(wèn)題的？【僅供參考】file-loader：把文件輸出到一個(gè)文件夾中，在代碼中通過(guò)相對(duì)URL去引用輸出的文件url-loader：和file-loader類似，但是能在文件很小的情況下以base64的方式把文件內(nèi)容注入到代碼中去source-map-1oader：加載額外的SourceMap文件，以方便斷點(diǎn)調(diào)試image-loader：加載并且壓縮圖片文件babel-loader：把ES6轉(zhuǎn)換成ES5css-loader：加載CSS,支持模塊化、壓縮、文件導(dǎo)入等特性style-loader：把CSS代碼注入到JavaScript中，通過(guò)D0M操作去加載CSSoeslint-loader：通過(guò)ESLint檢查JavaScript代碼14、什么是Tree-sharking?【僅供參考】指打包中去除那些引入了但在代碼中沒用到的死代碼。在wepack中jstreeshaking通過(guò)UglifyJsPlugin來(lái)進(jìn)行，css中通過(guò)purify-CSS來(lái)進(jìn)行。【僅供參考】babel-preset-es2015:babel-preset-es2016:babel-preset-es2017:babel-preset-latest:15、理解babel-preset【僅供參考】babel-preset-es2015:babel-preset-es2016:babel-preset-es2017:babel-preset-latest:可以將es7的代碼編譯為es6.可以將es8的代碼編譯為es7.支持現(xiàn)有所有ECMAScript版本的新特性16、babel相關(guān)：polyfill以及runtime區(qū)別，ESstage含義,preset-env作用等等【僅供參考】polyfill以及runtime區(qū)別babel-polyfill的原理是當(dāng)運(yùn)行環(huán)境中并沒有實(shí)現(xiàn)的一些方法，babel-polyfill會(huì)做兼容。babel-runtime它是將es6編譯成es5去執(zhí)行。我們使用es6的語(yǔ)法來(lái)編寫，最終會(huì)通過(guò)babel-runtime編譯成es5.也就是說(shuō)，不管瀏覽器是否支持ES6,只要是ES6的語(yǔ)法，它都會(huì)進(jìn)行轉(zhuǎn)碼成ES5.所以就有很多冗余的代碼。babel-polyfill它是通過(guò)向全局對(duì)象和內(nèi)置對(duì)象的prototype上添加方法來(lái)實(shí)現(xiàn)的。比如運(yùn)行環(huán)境中不支持Array,prototype.find方法，引入polyfill,我們就可以使用es6方法來(lái)編寫了，但是缺點(diǎn)就是會(huì)造成全局空間污染。babel-runtime:它不會(huì)污染全局對(duì)象和內(nèi)置對(duì)象的原型，比如說(shuō)我們需要Promise,我們只需要importPromisefrom5babel-runtime/core-js/promise'即可，這樣不僅避免污染全局對(duì)象，而且可以減少不必要的代碼。Stage

Stage

StageStage

Stage0-設(shè)想-建議-草案-候選Stage

Stage

StageStage

Stage0-設(shè)想-建議-草案-候選-完成(Proposal)：這是值得跟進(jìn)的。(Draft)：初始規(guī)范。(Candidate)：完成規(guī)范并在瀏覽器上初步實(shí)現(xiàn)。(Finished)：將添加到下一個(gè)年度版本發(fā)布中。17、plugin的作用【僅供參考】plugin是一個(gè)類，類中有一個(gè)apply（）方法，主要用于Plugin的安裝，可以在其中監(jiān)聽一些來(lái)自編譯器發(fā)出的事件，在合適的時(shí)機(jī)做一些事情。18、Plugin（插件）的作用是什么？【僅供參考】Plugin是用來(lái)擴(kuò)展Webpack功能的，通過(guò)在構(gòu)建流程里注入鉤子實(shí)現(xiàn)，它給Webpack帶來(lái)了很大的靈活性。Webpack是通過(guò)plugins屬性來(lái)配置需要使用的插件列表的。plugins屬性是一個(gè)數(shù)組，里面的每一項(xiàng)都是插件的一個(gè)實(shí)例，在實(shí)例化一個(gè)組件時(shí)可以通過(guò)構(gòu)造函數(shù)傳入這個(gè)組件支持的配置屬性。19、什么是bundle,什么是chunk,什么是module【僅供參考】bundle：是由webpack打包出來(lái)的文件chunk：是指webpack在進(jìn)行模塊依賴分析的時(shí)候，代碼分割出來(lái)的代碼塊module：是開發(fā)中的單個(gè)模塊20、怎么配置單頁(yè)應(yīng)用？怎么配置多頁(yè)應(yīng)用？【僅供參考】單頁(yè)應(yīng)用可以理解為webpack的標(biāo)準(zhǔn)模式，直接在entry中指定單頁(yè)應(yīng)用的入口即可，這里不再贅述多頁(yè)應(yīng)用的話，可以使用webpack的AutoWebPlugin來(lái)完成簡(jiǎn)單自動(dòng)化的構(gòu)建，但是前提是項(xiàng)目的目錄結(jié)構(gòu)必須遵守他預(yù)設(shè)的規(guī)范。多頁(yè)應(yīng)用中要注意的是：每個(gè)頁(yè)面都有公共的代碼，可以將這些代碼抽離出來(lái)，避免重復(fù)的加載。比如，每個(gè)頁(yè)面都引用了同一套css樣式表隨著業(yè)務(wù)的不斷擴(kuò)展，頁(yè)面可能會(huì)不斷的追加，所以一定要讓入口的配置足夠靈活，避免每次添加新頁(yè)面還需要修改構(gòu)建配置五、性能/瀏覽器/其他篇1、如何設(shè)置DNS緩存?【僅供參考】在瀏覽器地址欄中輸入U(xiǎn)RL以后，瀏覽器首先要查詢域名（hostname）對(duì)應(yīng)服務(wù)器的IP地址，一般需要耗費(fèi)20~120nls的時(shí)間。DNS查詢完成之前，瀏覽器無(wú)法識(shí)別服務(wù)器IP,因此不下載任何數(shù)據(jù)?；谛阅芸紤]，ISP運(yùn)營(yíng)商、局域網(wǎng)路由、操作系統(tǒng)、客戶端（瀏覽器）均會(huì)有相應(yīng)的DNS緩存機(jī)制。（1）正IE緩存30nlin,可以通過(guò)注冊(cè)表中DnsCacheTimeout項(xiàng)設(shè)置。（2）Firefox混存1min,通過(guò)network.dnsCacheExpiration配置。（3）在Chrome中通過(guò)依次單擊“設(shè)置”一“選項(xiàng)”一“高級(jí)選項(xiàng)”，并勾選“用預(yù)提取DNS提高網(wǎng)頁(yè)載入速度”選項(xiàng)來(lái)配置緩存時(shí)間。2、如何優(yōu)化服務(wù)器端的接口？【僅供參考】具體方法如下。（1）接口合并：如果一個(gè)頁(yè)面需要請(qǐng)求兩部分以上的數(shù)據(jù)接口，則建議合并成一個(gè)以減少HTTP請(qǐng)求數(shù)。（2）減少數(shù)據(jù)量：去掉接口返回的數(shù)據(jù)中不需要的數(shù)據(jù)。（3）緩存數(shù)據(jù)：首次加載請(qǐng)求后，緩存數(shù)據(jù)；對(duì)于非首次請(qǐng)求，優(yōu)先使用上次請(qǐng)求的數(shù)據(jù)，這樣可以提升非首次請(qǐng)求的響應(yīng)速度。3、列舉你知道的Web性能優(yōu)化方法?！緝H供參考】具體優(yōu)化方法如下。（1）壓縮源碼和圖片（JavaScript采用混淆壓縮，CSS進(jìn)行普通壓縮，JPG圖片根據(jù)具體質(zhì)量壓縮為50喧70%,把PNG圖片從24色壓縮成8色以去掉一些PNG格式信息等）。（2）選擇合適的圖片格式（顏色數(shù)多用JPG格式，而很少使用PNG格式，如果能通過(guò)服務(wù)器端判斷瀏覽器支持WebP就用WebP或SVG格式）。（3）合并靜態(tài)資源（減少HTTP請(qǐng)求）（4）把多個(gè)CSS合并為一個(gè)CSS,把圖片組合成雪碧圖。（5）開啟服務(wù)器端的Gzip壓縮（對(duì)文本資源非常有效）。（6）使用CDN（對(duì)公開庫(kù)共享緩存）。（7）延長(zhǎng)靜態(tài)資源緩存時(shí)間。（8）把CSS放在頁(yè)面頭部把JavaScript代碼放在頁(yè)面底部（這樣避免阻塞頁(yè)面渲染而使頁(yè)面出現(xiàn)長(zhǎng)時(shí)間的空白）4、如果一個(gè)頁(yè)面上有大量的圖片（大型電商網(wǎng)站），網(wǎng)頁(yè)加載很慢，可以用哪些方法優(yōu)化這些圖片的加載，從而提升用戶體驗(yàn)？【僅供參考】對(duì)于圖片懶加載，可以為頁(yè)面添加一個(gè)滾動(dòng)條事件，判斷圖片是否在可視區(qū)域內(nèi)或者即將進(jìn)入可視區(qū)域，優(yōu)先加載。如果為幻燈片、相冊(cè)文件等，可以使用圖片預(yù)加載技術(shù)，對(duì)于當(dāng)前展示圖片的前一張圖片和后一張圖片優(yōu)先下載。如果圖片為CSS圖片，可以使用CSSSprite、SVGsprite、Iconfont、Base64等技術(shù)。如果圖片過(guò)大，可以使用特殊編碼的圖片，加載時(shí)會(huì)先加載一張壓縮得特別小的縮略圖，以提高用戶體驗(yàn)。如果圖片展示區(qū)域小于圖片的真實(shí)大小，則應(yīng)在服務(wù)器端根據(jù)業(yè)務(wù)需要先行進(jìn)行圖片壓縮，圖片壓縮后，圖片大小與展示的就一致了。5、如何優(yōu)化服務(wù)器端？【僅供參考】具體方法如下。(1)啟用Gzip壓縮。(2)延長(zhǎng)資源緩存時(shí)間，合理設(shè)置資源的過(guò)期時(shí)間，對(duì)于一些長(zhǎng)期不更新的靜態(tài)資源過(guò)期時(shí)間設(shè)置得長(zhǎng)一些。(3)減少cookie頭信息的大小，頭信息越大，資源傳輸速度越慢。(4)圖片或者CSS、JavaScript文件均可使用CDN來(lái)加速。6、常見的瀏覽器內(nèi)核有哪些？【僅供參考】主要分成兩部分：渲染引擎(layoutengineer或RenderingEngine)和JS引擎。渲染引擎：負(fù)責(zé)取得網(wǎng)頁(yè)的內(nèi)容(HTML.XML、圖像等等)、整理訊息(例如加入CSS等)，以及計(jì)算網(wǎng)頁(yè)的顯示方式，然后會(huì)輸出至顯示器或打印機(jī)。瀏覽器的內(nèi)核的不同對(duì)于網(wǎng)頁(yè)的語(yǔ)法解釋會(huì)有不同，所以渲染的效果也不相同。所有網(wǎng)頁(yè)瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網(wǎng)絡(luò)內(nèi)容的應(yīng)用程序都需要內(nèi)核。JS引擎則：解析和執(zhí)行javascript來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)的動(dòng)態(tài)效果。最開始渲染引擎和JS引擎并沒有區(qū)分的很明確，后來(lái)JS引擎越來(lái)越獨(dú)立，內(nèi)核就傾向于只指渲染引擎。常見內(nèi)核Trident內(nèi)核：IE,MaxThon,TT,TheWorld,360,搜狗瀏覽器等。[又稱MSHTML]Gecko內(nèi)核：Netscape6及以上版本，F(xiàn)F,MozillaSuite/SeaMonkey等Presto內(nèi)核：0pera7及以上。[Opera內(nèi)核原為：Presto,現(xiàn)為：Blink;]Webkit內(nèi)核：Safari,Chrome等。[Chrome的：Blink(WebKit的分支)]7、你知道哪些優(yōu)化性能的方法?【僅供參考】具體方法如下。(1)減少HTTP請(qǐng)求次數(shù),控制CSSSprite、JavaScript與CSS源碼、圖片的大小，使用網(wǎng)頁(yè)Gzip、CDN托管、data緩存、圖片服務(wù)器(2)通過(guò)前端模板JavaScript和數(shù)據(jù)，減少由于HTML標(biāo)簽導(dǎo)致的帶寬浪費(fèi)，在前端用變量保存Ajax請(qǐng)求結(jié)果，每次操作本地變量時(shí)，不用請(qǐng)求，減少請(qǐng)求次數(shù)。(3)用innerhTML代替DOM操作，減少DOM操作次數(shù)，優(yōu)化JavaScript性能。(4)當(dāng)需要設(shè)置的樣式很多時(shí)，設(shè)置className而不是直接操作Style。(5)少用全局變量，緩存DOM節(jié)點(diǎn)查找的結(jié)果，減少I/O讀取操作(6)避免使用CSS表達(dá)式，它又稱動(dòng)態(tài)屬性，(7)預(yù)加載圖片，將樣式表放在頂部，將腳本放在底部，加上時(shí)間戳。(8)避免在頁(yè)面的主體布局中使用表，表要在其中的內(nèi)容完全下載之后才會(huì)顯示出來(lái)，顯示的速度比DIV+CSS布局慢。8、axios和fetch區(qū)別對(duì)比【僅供參考】axios是一個(gè)基于Promise用于瀏覽器和nodejs的HTTP客戶端，本質(zhì)上也是對(duì)原生XHR的封裝，只不過(guò)它是Promise的實(shí)現(xiàn)版本，符合最新的ES規(guī)范，它本身具有以下特征從瀏覽器中創(chuàng)建XMLHttpRequest支持PromiseAPI客戶端支持防止CSRF提供了一些并發(fā)請(qǐng)求的接口(重要，方便了很多的操作)從node,js創(chuàng)建http請(qǐng)求攔截請(qǐng)求和響應(yīng)轉(zhuǎn)換請(qǐng)求和響應(yīng)數(shù)據(jù)取消請(qǐng)求自動(dòng)轉(zhuǎn)換JSON數(shù)據(jù)fetch優(yōu)勢(shì)：語(yǔ)法簡(jiǎn)潔，更加語(yǔ)義化基于標(biāo)準(zhǔn)Promise實(shí)現(xiàn)，支持async/await同構(gòu)方便,使用isomorphic-fetch更加底層，提供的API豐富(request,response)脫離了XHR,是ES規(guī)范里新的實(shí)現(xiàn)方式fetch存在問(wèn)題fetch是一個(gè)低層次的API,你可以把它考慮成原生的XHR,所以使用起來(lái)并不是那么舒服，需要進(jìn)行封裝。fetch只對(duì)網(wǎng)絡(luò)請(qǐng)求報(bào)錯(cuò)，對(duì)400,500都當(dāng)做成功的請(qǐng)求，服務(wù)器返回400,500錯(cuò)誤碼時(shí)并不會(huì)reject,只有網(wǎng)絡(luò)錯(cuò)誤這些導(dǎo)致請(qǐng)求不能完成時(shí)，fetch才會(huì)被rejectofetch默認(rèn)不會(huì)帶cookie,需要添加配置項(xiàng)：fetch（url,{credentials:'include'}）fetch不支持abort,不支持超時(shí)控制,使用setTimeout及Promise,reject的實(shí)現(xiàn)的超時(shí)控制并不能阻止請(qǐng)求過(guò)程繼續(xù)在后臺(tái)運(yùn)行，造成了流量的浪費(fèi)fetch沒有辦法原生監(jiān)測(cè)請(qǐng)求的進(jìn)度，而XHR可以9、TCP傳輸?shù)娜挝帐帧⑺拇螕]手策略【僅供參考】三次握手：為了準(zhǔn)確無(wú)誤地吧數(shù)據(jù)送達(dá)目標(biāo)處，TCP協(xié)議采用了三次握手策略。用TCP協(xié)議把數(shù)據(jù)包送出去后，TCP不會(huì)對(duì)傳送后的情況置之不理，他一定會(huì)向?qū)Ψ酱_認(rèn)是否送達(dá)，握手過(guò)程中使用TCP的標(biāo)志：SYN和ACK發(fā)送端首先發(fā)送一個(gè)帶SYN的標(biāo)志的數(shù)據(jù)包給對(duì)方接收端收到后，回傳一個(gè)帶有SYN/ACK標(biāo)志的數(shù)據(jù)包以示傳達(dá)確認(rèn)信息最后，發(fā)送端再回傳一個(gè)帶ACK的標(biāo)志的數(shù)據(jù)包，代表“握手”結(jié)束如在握手過(guò)程中某個(gè)階段莫明中斷，TCP協(xié)議會(huì)再次以相同的順序發(fā)送相同的數(shù)據(jù)包斷開一個(gè)TCP連接需要“四次揮手”第一次揮手：主動(dòng)關(guān)閉方發(fā)送一個(gè)FIN,用來(lái)關(guān)注主動(dòng)方到被動(dòng)關(guān)閉方的數(shù)據(jù)傳送，也即是主動(dòng)關(guān)閉方告誡被動(dòng)關(guān)閉方：我已經(jīng)不會(huì)再給你發(fā)數(shù)據(jù)了（在FIN包之前發(fā)送的數(shù)據(jù)，如果沒有收到對(duì)應(yīng)的ACK確認(rèn)報(bào)文，主動(dòng)關(guān)閉方依然會(huì)重發(fā)這些數(shù)據(jù)）。但是，此時(shí)主動(dòng)關(guān)閉方還可以接受數(shù)據(jù)第二次揮手：被動(dòng)關(guān)閉方收到FIN包后，發(fā)送一個(gè)ACK給對(duì)方，確認(rèn)序號(hào)收到序號(hào)+1（與SYN相同，一個(gè)FIN占用一個(gè)序號(hào)）第三次揮手：被動(dòng)關(guān)閉方發(fā)送一個(gè)FINO用來(lái)關(guān)閉被動(dòng)關(guān)閉方到主動(dòng)關(guān)閉方的數(shù)據(jù)傳送，也就是告訴主動(dòng)關(guān)閉方，我的數(shù)據(jù)也發(fā)送完了，不會(huì)給你發(fā)送數(shù)據(jù)T第四次揮手：主動(dòng)關(guān)閉方收到FIN后，發(fā)送一個(gè)ACK給被動(dòng)關(guān)閉方，確認(rèn)序號(hào)為收到序號(hào)+1,至此，完成四次揮手10>HTTP和HTTPS,為什么HTTPS安全?【僅供參考】HTTP協(xié)議通常承載與TCP協(xié)議之上，在HTTP和TCP之間添加一個(gè)安全協(xié)議層(SSL或TSL),這個(gè)時(shí)候,就成了我們常說(shuō)的HTTPS默認(rèn)HTTP的端口號(hào)為80,HTTPS的端口號(hào)為443因?yàn)榫W(wǎng)絡(luò)請(qǐng)求需要中間有很多的服務(wù)器路由的轉(zhuǎn)發(fā)，中間的節(jié)點(diǎn)都可能篡改信息，而如果使用HTTPS,密鑰在你和終點(diǎn)站才有，https之所有說(shuō)比http安全，是因?yàn)樗胹sl/tls協(xié)議傳輸。包含證書，流量轉(zhuǎn)發(fā)，負(fù)載均衡，頁(yè)面適配，瀏覽器適配，refer傳遞等，保障了傳輸過(guò)程的安全性11、針對(duì)CSS,如何優(yōu)化性能？【僅供參考】具體優(yōu)化方法如下。(1)正確使用display屬性，display屬性會(huì)影響頁(yè)面的渲染，因此要注意以下幾方面。display:inline后不應(yīng)該再使用width、height、margin、padding和floatodisplay:inline-block后不應(yīng)該再使用floatodisplay:block后不應(yīng)該再使用vertical-align。display:table-*后不應(yīng)該再使用margin或者floato(2)不濫用floato(3)不聲明過(guò)多的font-size。(4)當(dāng)值為。時(shí)不需要單位。(5)標(biāo)準(zhǔn)化各種瀏覽器前綴，并注意以下幾方面。瀏覽器無(wú)前綴應(yīng)放在最后。CSS動(dòng)畫只用(-webkit-無(wú)前綴)兩種即可。其他前綴包括-webkit-、-moz->-ms-、無(wú)前綴(Opera瀏覽器改用blink內(nèi)核，所以-0-被淘汰)(6)避免讓選擇符看起來(lái)像是正則表達(dá)式。高級(jí)選擇器不容易讀懂，執(zhí)行時(shí)間也長(zhǎng)。(7)盡量使用id、class選擇器設(shè)置樣式(避免使用style屬性設(shè)置行內(nèi)樣式)(8)盡量使用CSS3動(dòng)畫。(9)減少重繪和回流。12、談?wù)勑阅軆?yōu)化問(wèn)題?！緝H供參考】可以在以下層面優(yōu)化性能。7、＜img＞的title和alt有什么區(qū)別【僅供參考】通常當(dāng)鼠標(biāo)滑動(dòng)到元素上的時(shí)候顯示alt是＜img＞的特有屬性，是圖片內(nèi)容的等價(jià)描述，用于圖片無(wú)法加載時(shí)顯示、讀屏器閱讀圖片。可提圖片高可訪問(wèn)性，除了純裝飾圖片外都必須設(shè)置有意義的值，搜索引擎會(huì)重點(diǎn)分析。8、title與hl的區(qū)別？【僅供參考】title屬性沒有明確意義只表示是個(gè)標(biāo)題，hl則表示層次明確的標(biāo)題，對(duì)頁(yè)面信息的抓取也有很大的影響。9、標(biāo)準(zhǔn)盒子模型和IE（怪異）盒子模型理解多少？【僅供參考】box-size：content-box是標(biāo)準(zhǔn)盒子模型，實(shí)際的區(qū)域是padding+border+content,content區(qū)域就是設(shè)置的元素寬度，padding和border會(huì)占用外部空間box-size：border-box的話，元素的寬度為padding+border+content,元素設(shè)置了寬度，不會(huì)占用外部空間。10、Float布局有哪些缺陷？如何清除浮動(dòng)?【僅供參考】使用float之后，元素跳出文檔流，容易引發(fā)父容器塌陷，最好的解決方式是給復(fù)用器加上：：after偽類進(jìn)行清除浮動(dòng)11、CSSSprite（雪碧圖，精靈圖）是什么，談?wù)勥@個(gè)技術(shù)的優(yōu)缺點(diǎn)？【僅供參考】就是把很多圖標(biāo)合并到一張圖上，然后根據(jù)圖片的位置（backgroundposition）加上顯示的寬高來(lái)控制具體用哪個(gè)圖標(biāo)，這樣可以減少網(wǎng)絡(luò)請(qǐng)求,但是制作和使用會(huì)顯得復(fù)雜一些。12、解釋浮動(dòng)及其工作原理?！緝H供參考】浮動(dòng)的元素可以向左或向右移動(dòng)，直到它的外邊緣碰到包含元素（父元素）或另一個(gè)浮動(dòng)元素的邊框?yàn)橹?。要想使元素浮?dòng)，必須為元素設(shè)置一個(gè)寬度（Width）o雖然浮動(dòng)元素已不在文檔流中，但是它浮動(dòng)后所處的位置依然在浮緩存利用：緩存Ajax,使用CDN、外部JavaScript和CSS文件緩存，添加Expires頭,在服務(wù)器端配置Etag,減少DNS查找等。請(qǐng)求數(shù)量：合并樣式和腳本，使用CSS圖片精靈，初始首屏之外的圖片資源按需加載，靜態(tài)資源延遲加載。請(qǐng)求帶寬：壓縮文件，開啟GZIP。CSS代碼：避免使用CSS表達(dá)式、高級(jí)選擇器、通配選擇器。JavaScript代碼：用散列表來(lái)優(yōu)化查找，少用全局變量，用innerHTML代替DOM操作，減少DOM操作次數(shù)，優(yōu)化JavaScript性能，用setTimeout避免頁(yè)面失去響應(yīng)，緩存D0M節(jié)點(diǎn)查找的結(jié)果，避免使用with（with會(huì)創(chuàng)建自己的作用域，增加作用域鏈的長(zhǎng)度），多個(gè)變量聲明合并。HTML代碼：避免圖片和iFrame等src屬性為空。src屬性為空，會(huì)重新加載當(dāng)前頁(yè)面，影響速度和效率，盡量避免在HTML標(biāo)簽中寫Style屬性13、網(wǎng)頁(yè)從輸入網(wǎng)址到渲染完成經(jīng)歷了哪些過(guò)程？【僅供參考】大致可以分為如下7步：輸入網(wǎng)址；發(fā)送到DNS服務(wù)器，并獲取域名對(duì)應(yīng)的web服務(wù)器對(duì)應(yīng)的ip地址；與web服務(wù)器建立TCP連接；瀏覽器向web服務(wù)器發(fā)送http請(qǐng)求；web服務(wù)器響應(yīng)請(qǐng)求，并返回指定url的數(shù)據(jù)（或錯(cuò)誤信息，或重定向的新的url地址）;瀏覽器下載web服務(wù)器返回的數(shù)據(jù)及解析html源文件；生成D0M樹，解析css和js,渲染頁(yè)面，直至顯示完成；14、平時(shí)你是如何對(duì)代碼進(jìn)行性能優(yōu)化的？【僅供參考】利用性能分析工具監(jiān)測(cè)性能，包括靜態(tài)Analyze工具和運(yùn)行時(shí)的Profile工具（在Xcode工具欄中依次單擊Product^Profile項(xiàng)可以啟動(dòng)）。比如測(cè)試程序的運(yùn)行時(shí)間，當(dāng)單擊TimeProfiler項(xiàng)時(shí)，應(yīng)用程序開始運(yùn)行，這就能獲取到運(yùn)行整個(gè)應(yīng)用程序所消耗時(shí)間的分布和百分比。為了保證數(shù)據(jù)分析在同一使用場(chǎng)景下的真實(shí)性，一定要使用真機(jī)，因?yàn)榇藭r(shí)模擬器在Mac上運(yùn)行，而Mac上的CPU往往比iOS設(shè)備要快。15、AST是什么【僅供參考】在計(jì)算機(jī)科學(xué)中，抽象語(yǔ)法樹(AbstractSyntaxTree,AST),或簡(jiǎn)稱語(yǔ)法樹(Syntaxtree),是源代碼語(yǔ)法結(jié)構(gòu)的一種抽象表示。它以樹狀的形式表現(xiàn)編程語(yǔ)言的語(yǔ)法結(jié)構(gòu)，樹上的每個(gè)節(jié)點(diǎn)都表示源代碼中的一種結(jié)構(gòu)。babel-cli開始讀取我們的參數(shù)(源文件testl.js、輸出文件testl.babel,js、配置文件.babelrc)babel-core根據(jù)babel-cli的參數(shù)開始編譯BabelParser把我們傳入的源碼解析成ast對(duì)象BabelTraverse(遍歷)模塊維護(hù)了整棵樹的狀態(tài)，并且負(fù)責(zé)替換、移除和添加節(jié)點(diǎn)(也就是結(jié)合我們傳入的插件把es6轉(zhuǎn)換成es5的一個(gè)過(guò)程)BabelGenerator模塊是Babel的代碼生成器，它讀取AST并將其轉(zhuǎn)換為代碼和源碼映射(sourcemaps)o16、對(duì)MutationObserver的理解及應(yīng)用【僅供參考】MutationObserver接口提供了監(jiān)視對(duì)DOM樹所做更改的能力。它被設(shè)計(jì)為舊的MutationEvents功能的替代品，該功能是DOM3Events規(guī)范的一部分。disconnect()阻止MutationObserver實(shí)例繼續(xù)接收的通知，直到再次調(diào)用其observe。方法，該觀察者對(duì)象包含的回調(diào)函數(shù)都不會(huì)再被調(diào)用。observe()配置MutationObserver在DOM更改匹配給定選項(xiàng)時(shí)，通過(guò)其回調(diào)函數(shù)開始接收通知。takeRecords()從MutationObserver的通知隊(duì)列中刪除所有待處理的通知，并將它們返回到MutationRecord對(duì)象的新Array中。17、大文件上傳斷點(diǎn)續(xù)傳【僅供參考】大文件上傳前端上傳大文件時(shí)使用Blob,prototype,slice將文件切片，并發(fā)上傳多個(gè)切片，最后發(fā)送一個(gè)合并的請(qǐng)求通知服務(wù)端合并切片服務(wù)端接收切片并存儲(chǔ)，收到合并請(qǐng)求后使用流將切片合并到最終文件原生XMLHttpRequest的upload,onprogress對(duì)切片上傳進(jìn)度的監(jiān)聽使用Vue計(jì)算屬性根據(jù)每個(gè)切片的進(jìn)度算出整個(gè)文件的上傳進(jìn)度斷點(diǎn)續(xù)傳使用spark-md5根據(jù)文件內(nèi)容算出文件hash通過(guò)hash可以判斷服務(wù)端是否已經(jīng)上傳該文件，從而直接提示用戶上傳成功(秒傳)計(jì)算hash耗時(shí)的問(wèn)題，不僅可以通過(guò)web-workder,還可以參考React的FFiber架構(gòu)，通過(guò)requestldleCallback來(lái)利用瀏覽器的空閑時(shí)間計(jì)算，也不會(huì)卡死主線程通過(guò)XMLHttpRequest的abort方法暫停切片的上傳上傳前服務(wù)端返回已經(jīng)上傳的切片名，前端跳過(guò)這些切片的上傳18、什么是webworker,為什么我們需要他們webworker?【僅供參考】什么是webworker:webworker是一種開啟線程方式；使用Webworkers的原因：通過(guò)使用WebWorker,我們可以在瀏覽器后臺(tái)運(yùn)行Javascript,而不占用瀏覽器自身線程(Webwork實(shí)現(xiàn)多線程)。WebWorker可以提高應(yīng)用的總體性能，并且提升用戶體驗(yàn)?？梢栽谥骶€程的下面通過(guò)webworker開啟一個(gè)子線程子線程的執(zhí)行不會(huì)阻塞主線程執(zhí)行當(dāng)我們需要去代碼一些高運(yùn)算的代碼時(shí)，為了不阻塞主線程，這個(gè)時(shí)則就可以開啟一個(gè)子線程去做這個(gè)事件19、描述瀏覽器的渲染過(guò)程？，DOM樹和渲染樹的區(qū)別？【僅供參考】瀏覽器的渲染過(guò)程：解析HTML構(gòu)建DOM(DOM樹),并行請(qǐng)求css/image/jsCSS文件下載完成，開始構(gòu)建CSSOM(CSSM)CSSOM構(gòu)建結(jié)束后和DOM一起生成RenderTree(渲染樹)布局(Layout)：計(jì)算出每個(gè)節(jié)點(diǎn)在屏幕中的位置顯示(Painting)：通過(guò)顯卡把頁(yè)面畫到屏幕上DOM樹和渲染樹的區(qū)別：D0M樹與HTML標(biāo)簽——對(duì)應(yīng)，包括head和隱藏元素渲染樹不包括head和隱藏元素，大段文本的每一個(gè)行都是獨(dú)立節(jié)點(diǎn)，每一個(gè)節(jié)點(diǎn)都有對(duì)應(yīng)的css屬性20、哪些方法可以提升網(wǎng)站前端性能？【僅供參考】精靈圖合并，減少HTTP請(qǐng)求；壓縮HTML、CSS、JavaScript文件；使用CDN托管靜態(tài)文件；使用localstorage緩存和mainfest應(yīng)用緩存。動(dòng)之前的水平方向上。因?yàn)楦?dòng)元素不在文檔流中，所以文檔流中的塊元素表現(xiàn)得就像浮動(dòng)元素不存在一樣，下面的元素會(huì)填補(bǔ)原來(lái)的位置。有些元素會(huì)在浮動(dòng)元素的下方，但是這些元素的內(nèi)容并不一定會(huì)被浮動(dòng)的元素遮蓋。當(dāng)定位內(nèi)聯(lián)元素時(shí)，要考慮浮動(dòng)元素的邊界，圍繞浮動(dòng)元素放置內(nèi)聯(lián)元素。也可以把浮動(dòng)元素想象成被塊元素忽略的元素，而內(nèi)聯(lián)元素會(huì)關(guān)注的元素。13、哪些css屬性可以繼承？【僅供參考】答案：可繼承：text-alignsfont、color、line-height、letter-spacing、word-spacing、text-indent不可繼承：borderpaddingmarginwidthheight;14、我們會(huì)在寫css的時(shí)候做一些標(biāo)簽選擇器的初始化樣式？為什么？比如：【僅供參考】body,ul,ol,li,p,hl,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;}body{background:#fff;color:#333;font-size:12px;margin-top:5px;font一family:〃SimSun〃,〃宋體“ArialNarrow”;}ul,ol(list-style-type:none;}select,input,img,select{vertical-align:middle;}a{text-decoration:none;}a:link{color:#009;}a:visited{color:#800080;}a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}為了保證默認(rèn)的標(biāo)簽樣式在不同瀏覽器能有一致的效果15、移動(dòng)端lpx邊框怎么設(shè)置【僅供參考】/*方法1*/,border{width:100%;height:Ipx;background:red;)/*方法2*/.border{border-image:url(border,png)}/*方法3*/.border{box-shadow:000Ipx#000;)16、lrem>lem>Ivh、Ipx各自代表的含義？【僅供參考】rem:rem是全部的長(zhǎng)度都相對(duì)于根元素元素。通常做法是給html元素設(shè)置一個(gè)字體大小，然后其他元素的長(zhǎng)度單位就為rem。em:子元素字體大小的em是相對(duì)于父元素字體大小，元素的width/height/padding/margin用em的話是相對(duì)于該元素的font-sizevw/vh:全稱是ViewportWidth和ViewportHeight,視窗的寬度和高度，相當(dāng)于屏幕寬度和高度的1%,不過(guò)，處理寬度的時(shí)候%單位更合適，處理高度的話vh單位更好。px:px像素(Pixel)o相對(duì)長(zhǎng)度單位。像素px是相對(duì)于顯示器屏幕分辨率而言的。17、rgba()和opacity的透明效果有什么不同？【僅供參考】opacity作用于元素以及元素內(nèi)的所有內(nèi)容(包括文字)的透明度rgbaO只作用于元素自身的顏色或其背景色，子元素不會(huì)繼承透明效果18、rgbaO和opacity的透明效果有什么不同？【僅供參考】rgba()和opacity都能實(shí)現(xiàn)透明效果，但它們最大的不同是opacity作用于元素，并且可以設(shè)置元素內(nèi)所有內(nèi)容的透明度；而rgbaO只作用于元素的顏色或其背景色(設(shè)置rgba透明的元素的子元素不會(huì)繼承透明效果)。19、CSS中，自適應(yīng)的單位都有哪些?【僅供參考】自適應(yīng)的單位有以下幾個(gè)百分比：%相對(duì)于視口寬度的單位：WW相對(duì)于視口高度的單位：vh相對(duì)于視口寬度或者高度(取決于哪個(gè)小)的單位：Vm相對(duì)于父元素字體大小的單位：em相對(duì)于根元素字體大小的單位：rem20、CSS3新特性你能說(shuō)出哪些？【僅供參考】新增選擇器p:nth-chiId(n){color:rgba(255,0,0,0.75)}彈性盒模型display:flex;多列布局column-count:5;媒體查詢?media(max-width:480px){.box:{column-count:1;}}個(gè)性化字體?font-face{font-family:BorderWeb;src:url(BORDERWO.eot);}顏色透明度color:rgba(255,0,0,0.75);圓角border-radius:5px;漸變background:linear-gradient(red,green,blue);陰影box-shadow:3px3px3pxrgba(0,64,128,0.3);倒影box-refle