前端面試寶典大全目錄TOC\h\h前端面試寶典\h第一章內(nèi)容提要\h第二章HTML5面試題\h1.H5的新特性有哪些\h2.Label的作用是什么？是怎么用的？\h3.HTML5的form如何關(guān)閉自動(dòng)完成功能\h4.dom如何實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁之間的通信?(阿里)\h5.實(shí)現(xiàn)不使用border畫出1px高的線，在不同瀏覽器的標(biāo)準(zhǔn)模式與怪異模式下都能保持一致的效果\h6.title與h1的區(qū)別、b與strong的區(qū)別、i與em的區(qū)別？\h7.你做的頁面在哪些流覽器測試過？這些瀏覽器的內(nèi)核分別是什么?\h8.每個(gè)HTML文件里開頭都有個(gè)很重要的東西，Doctype，知道這是干什么的嗎？\h9.div+css的布局較table布局有什么優(yōu)點(diǎn)\h10.img的alt與title有何異同？strong與em的異同\h11.簡述一下src與href的區(qū)別\h12.知道的網(wǎng)頁制作會(huì)用到的圖片格式有哪些\h13.在css/js代碼上線之后開發(fā)人員經(jīng)常會(huì)優(yōu)化性能，從用戶刷新網(wǎng)頁開始，一次js請求一般情況下有哪些地方會(huì)有緩存處理\h14.一個(gè)頁面上有大量的圖片（大型電商網(wǎng)站），加載很慢，你有哪些方法優(yōu)化這些圖片的加載，給用戶更好的體驗(yàn)\h15.你如何理解HTML結(jié)構(gòu)的語義化\h16.談?wù)勔郧岸私嵌瘸霭l(fā)做好SEO需要考慮什么\h17.html5有哪些新特性、移除了那些元素\h18.如何處理HTML5新標(biāo)簽的瀏覽器兼容問題\h19.如何區(qū)分HTML和HTML5？\h20.HTML5Canvas元素有什么用\h21.如何在HTML5頁面中嵌入音頻\h22.如何在HTML5頁面中嵌入視頻\h23.HTML5引入什么新的表單屬性\h24.語義化的理解\h25.介紹一下你對瀏覽器內(nèi)核的理解\h26.瀏覽器是怎么對HTML5的離線儲(chǔ)存資源進(jìn)行管理和加載的呢\h27.請描述一下cookies，sessionStorage和localStorage的區(qū)別\h28.csssprite是什么,有什么優(yōu)缺點(diǎn)\h29.canvas如何繪制一個(gè)三角形|正方形\h30.彈性盒子模型?flex|box區(qū)別?\h31.解釋在ie低版本下的怪異盒模型和c3的怪異盒模型和彈性盒模型?\h第三章CSS面試題\h1.盒模型\h2.如何實(shí)現(xiàn)一個(gè)最大的正方形\h3.一行水平居中，多行居左\h4.水平垂直居中\(zhòng)h水平居中\(zhòng)h垂直居中\(zhòng)h單行文本\h行內(nèi)塊級元素\h元素高度不定\h元素高度固定\h總結(jié)\h5.兩欄布局，左邊固定，右邊自適應(yīng)，左右不重疊\h6.如何實(shí)現(xiàn)左右等高布局\h7.畫三角形\h8.link@import導(dǎo)入css\h9.BFC理解\h第四章JS面試題\h1.判斷js類型的方式\h1.typeof\h2.instanceof\h3.Ototype.toString.call()\h4.Array.isArray()\h2.ES5和ES6分別幾種方式聲明變量\h3.閉包的概念？優(yōu)缺點(diǎn)？\h4.淺拷貝和深拷貝\h5.數(shù)組去重的方法\h1.ES6的Set\h2.reduce()\h3.filter()\h6.DOM事件有哪些階段？談?wù)剬κ录淼睦斫鈂h7.js執(zhí)行機(jī)制、事件循環(huán)\h8.介紹下promise.all\h9.async和await\h10.ES6的class和構(gòu)造函數(shù)的區(qū)別\h1.嚴(yán)格模式\h2.不存在提升\h3.方法默認(rèn)是不可枚舉的\h4.class的所有方法（包括靜態(tài)方法和實(shí)例方法）都沒有原型對象prototype，所以也沒有[[construct]]，不能使用new來調(diào)用。\h5.class必須使用new調(diào)用，否則會(huì)報(bào)錯(cuò)。這是它跟普通構(gòu)造函數(shù)的一個(gè)主要區(qū)別，后者不用new也可以執(zhí)行。\h6.ES5和ES6子類this生成順序不同\h7.ES6可以繼承靜態(tài)方法，而構(gòu)造函數(shù)不能\h11.transform、translate、transition分別是什么屬性？CSS中常用的實(shí)現(xiàn)動(dòng)畫方式\h12.介紹一下rAF(requestAnimationFrame)\h13.javascript的垃圾回收機(jī)制講一下\h四種常見的內(nèi)存泄漏：全局變量，未清除的定時(shí)器，閉包，以及dom的引用\h14.對前端性能優(yōu)化有什么了解？一般都通過那幾個(gè)方面去優(yōu)化的？\h第五章JS高頻手寫代碼題\h1.實(shí)現(xiàn)new方法\h2.實(shí)現(xiàn)Promise\h3.實(shí)現(xiàn)一個(gè)call函數(shù)\h4.實(shí)現(xiàn)一個(gè)apply函數(shù)\h5.實(shí)現(xiàn)一個(gè)bind函數(shù)\h6.淺拷貝、深拷貝的實(shí)現(xiàn)\h7.實(shí)現(xiàn)一個(gè)節(jié)流函數(shù)\h8.實(shí)現(xiàn)一個(gè)防抖函數(shù)\h9.instanceof的原理\h10.柯里化函數(shù)的實(shí)現(xiàn)\h11.Object.create的基本實(shí)現(xiàn)原理\h12.實(shí)現(xiàn)一個(gè)基本的EventBus\h13.實(shí)現(xiàn)一個(gè)雙向數(shù)據(jù)綁定\h14.實(shí)現(xiàn)一個(gè)簡單路由\h15.實(shí)現(xiàn)懶加載\h16.rem基本設(shè)置\h17.手寫實(shí)現(xiàn)AJAX\h第六章Vue面試題\h1.Vue雙向綁定原理\h2.描述下vue從初始化頁面--修改數(shù)據(jù)--刷新頁面UI的過程？\h3.你是如何理解Vue的響應(yīng)式系統(tǒng)的?\h4.虛擬DOM實(shí)現(xiàn)原理\h5.既然Vue通過數(shù)據(jù)劫持可以精準(zhǔn)探測數(shù)據(jù)變化,為什么還需要虛擬DOM進(jìn)行diff檢測差異?\h6.Vue中key值的作用？\h7.Vue的生命周期\h8.Vue組件間通信有哪些方式?\h9.watch、methods和computed的區(qū)別?\h10.vue中怎么重置data?\h11.組件中寫name選項(xiàng)有什么作用？\h12.vue-router有哪些鉤子函數(shù)?\h13.route和router的區(qū)別是什么？\h14.說一下Vue和React的認(rèn)識(shí)，做一個(gè)簡單的對比\h15.Vue的nextTick的原理是什么？\h16.Vuex有哪幾種屬性?\h17.vue首屏加載優(yōu)化\h1.把不常改變的庫放到index.html中，通過cdn引入\h2.vue路由的懶加載\h3.不生成map文件\h4.vue組件盡量不要全局引入\h5.使用更輕量級的工具庫\h6.開啟gzip壓縮\h7.首頁單獨(dú)做服務(wù)端渲染\h18.Vue3.0有沒有過了解？\h19.vue-cli替我們做了哪些工作？\h20.MVVM是什么?\h21.MVVM的優(yōu)缺點(diǎn)?\h22.你對Vue生命周期的理解？\h生命周期是什么\h各個(gè)生命周期的作用\h生命周期示意圖\h23.異步請求適合在哪個(gè)生命周期調(diào)用？\h24.Vue組件如何通信？\h25.computed和watch有什么區(qū)別?\h26.Vue是如何實(shí)現(xiàn)雙向綁定的?\h27.Proxy與Object.defineProperty的優(yōu)劣對比?\h28.你是如何理解Vue的響應(yīng)式系統(tǒng)的?\h29.虛擬DOM的優(yōu)劣如何?\h30.虛擬DOM實(shí)現(xiàn)原理?\h31.既然Vue通過數(shù)據(jù)劫持可以精準(zhǔn)探測數(shù)據(jù)變化,為什么還需要虛擬DOM進(jìn)行diff檢測差異?\h32.Vue為什么沒有類似于React中shouldComponentUpdate的生命周期？\h33.Vue中的key到底有什么用？\h第七章HTTP、瀏覽器面試題\h1.瀏覽器存儲(chǔ)的方式有哪些\h2.對前后端跨域可以說一下嗎？如何解決跨域的？\h3.瀏覽器cookie和session的認(rèn)識(shí)。\h4.輸入U(xiǎn)RL發(fā)生什么？\h5.瀏覽器渲染的步驟\h6.頁面渲染優(yōu)化\h7.強(qiáng)制緩存和協(xié)商緩存\h8.GET和POST請求的區(qū)別\h9.HTTP1.0/1.1/2.0及HTTPS\h10.介紹下304過程\h11.HTTP狀態(tài)碼\h12.Web性能優(yōu)化\h第八章數(shù)據(jù)結(jié)構(gòu)和算法\h一.鏈表\h1.簡單的反轉(zhuǎn)鏈表\h2.區(qū)間反轉(zhuǎn)\h3.兩個(gè)一組翻轉(zhuǎn)鏈表\h4.K個(gè)一組翻轉(zhuǎn)鏈表\h5.如何檢測鏈表形成環(huán)？\h6.如何找到環(huán)的起點(diǎn)\h7.合并兩個(gè)有序鏈表\h8.合并K個(gè)有序鏈表\h9.判斷回文鏈表\h二.棧和隊(duì)列\(zhòng)h1.有效括號\h2.多維數(shù)組flatten\h3.普通的層次遍歷\h4.二叉樹的鋸齒形層次遍歷\h5.二叉樹的右視圖\h6.完全平方數(shù)\h7.單詞接龍\h8.優(yōu)先隊(duì)列\(zhòng)h9.關(guān)于堆的說明\h10.實(shí)現(xiàn)一個(gè)最大堆\h11.實(shí)現(xiàn)優(yōu)先隊(duì)列\(zhòng)h12.前K個(gè)高頻元素\h13.合并K個(gè)排序鏈表\h14.什么是雙端隊(duì)列？\h15.滑動(dòng)窗口最大值\h16.棧實(shí)現(xiàn)隊(duì)列\(zhòng)h17.隊(duì)列實(shí)現(xiàn)棧\h三.二叉樹\h1.前序遍歷\h2.中序遍歷\h3.后序遍歷\h4.最大深度\h5.最小深度\h6.對稱二叉樹\h7.二叉樹的最近公共祖先\h8.二叉搜索樹的最近公共祖先\h9.二叉樹的直徑\h10.二叉樹的所有路徑\h11.二叉樹的最大路徑和\h12.驗(yàn)證二叉搜索樹\h13.將有序數(shù)組轉(zhuǎn)換為二叉搜索樹\h14.二叉樹展開為鏈表\h15，不同的二叉搜索樹II前端面試寶典第一章內(nèi)容提要前端程序員目前就業(yè)形勢良好，大前端概念深入人心，大前端最大的特點(diǎn)在于一次開發(fā)，同時(shí)適用于所有平臺(tái)，開發(fā)者不用為一個(gè)APP需要做Android和iOS兩種模式而擔(dān)心。大前端是web統(tǒng)一的時(shí)代，利用web不僅能開發(fā)出網(wǎng)站，更可以開發(fā)手機(jī)端web應(yīng)用和移動(dòng)端應(yīng)用程序。本書是一本解析前端面試題的書，可以幫助求職者更好的準(zhǔn)備面試。本書共包含八章，囊括了目前企業(yè)中常見的面試題類型和考點(diǎn)，包括Html、CSS、Javascript、Vue、計(jì)算機(jī)網(wǎng)絡(luò)、數(shù)據(jù)結(jié)構(gòu)與算法等最常見的面試題。本書通過技術(shù)點(diǎn)解析、代碼輔佐的方式，讓讀者能深刻領(lǐng)會(huì)每個(gè)考點(diǎn)背后的技術(shù)。本書緊扣面試精髓，對各種技術(shù)剖析一針見血，是想找工作的前端程序員和剛畢業(yè)學(xué)生的面試寶典。第二章HTML5面試題1.H5的新特性有哪些畫布(Canvas)API地理(Geolocation)API音頻、視頻API(audio,video)localStorage和sessionStoragewebworker和websocketheader,nav,footer,aside,article,sectionwebworker是運(yùn)行在瀏覽器后臺(tái)的js程序，他不影響主程序的運(yùn)行，是另開的一個(gè)js線程，可以用這個(gè)線程執(zhí)行復(fù)雜的數(shù)據(jù)操作，然后把操作結(jié)果通過postMessage傳遞給主線程，這樣在進(jìn)行復(fù)雜且耗時(shí)的操作時(shí)就不會(huì)阻塞主線程了2.Label的作用是什么？是怎么用的？label標(biāo)簽來定義表單控制間的關(guān)系,當(dāng)用戶選擇該標(biāo)簽時(shí)，瀏覽器會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。<labelfor="Name">Number:</label><inputtype=“text“name="Name"id="Name"/><label>Date:<inputtype="text"name="B"/></label>3.HTML5的form如何關(guān)閉自動(dòng)完成功能給不想要提示的form或某個(gè)input設(shè)置為autocomplete=off4.dom如何實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁之間的通信?(阿里)1）WebSocket、SharedWorker；2）也可以調(diào)用localstorge、cookies等本地存儲(chǔ)方式；localstorge另一個(gè)瀏覽上下文里被添加、修改或刪除時(shí)，它都會(huì)觸發(fā)一個(gè)事件，我們通過監(jiān)聽事件，控制它的值來進(jìn)行頁面信息通信；3）注意quirks：Safari在無痕模式下設(shè)置localstorge值時(shí)會(huì)拋出QuotaExceededError的異常；5.實(shí)現(xiàn)不使用border畫出1px高的線，在不同瀏覽器的標(biāo)準(zhǔn)模式與怪異模式下都能保持一致的效果<divstyle="height:1px;overflow:hidden;background:red"></div>6.title與h1的區(qū)別、b與strong的區(qū)別、i與em的區(qū)別？title屬性沒有明確意義只表示是個(gè)標(biāo)題，H1則表示層次明確的標(biāo)題，對頁面信息的抓取也有很大的影響；strong是標(biāo)明重點(diǎn)內(nèi)容，有語氣加強(qiáng)的含義，使用閱讀設(shè)備閱讀網(wǎng)絡(luò)時(shí)：<strong>會(huì)重讀，而<B>是展示強(qiáng)調(diào)內(nèi)容。i內(nèi)容展示為斜體，me表示強(qiáng)調(diào)的文本；PhysicalStyleElements--自然樣式標(biāo)簽b,i,u,s,preSemanticStyleElements--語義樣式標(biāo)簽strong,em,ins,del,code應(yīng)該準(zhǔn)確使用語義樣式標(biāo)簽,但不能濫用,如果不能確定時(shí)首選使用自然樣式標(biāo)簽。7.你做的頁面在哪些流覽器測試過？這些瀏覽器的內(nèi)核分別是什么?Trident內(nèi)核:IE系列Gecko內(nèi)核:FirefoxWebkit內(nèi)核:SafariBlink內(nèi)核：是基于Webkit內(nèi)核的子項(xiàng)目,使用的瀏覽器有：Chrome/opera等除IE、Firefox、Safari之外的幾乎所有瀏覽器幾乎所有國產(chǎn)雙內(nèi)核瀏覽器（Trident/Blink）如360、獵豹、qq、百度等8.每個(gè)HTML文件里開頭都有個(gè)很重要的東西，Doctype，知道這是干什么的嗎？文檔聲明。聲明位于文檔中的最前面的位置，處于``標(biāo)簽之前。此標(biāo)簽可告知瀏覽器文檔使用哪種HTML或XHTML規(guī)范。（重點(diǎn)：告訴瀏覽器按照何種規(guī)范解析頁面）IE下如不書寫文檔聲明會(huì)使用怪異模式解析網(wǎng)頁導(dǎo)致一系列CSS兼容性問題9.div+css的布局較table布局有什么優(yōu)點(diǎn)正常場景一般都適用div+CSS布局，優(yōu)點(diǎn)：1）結(jié)構(gòu)與樣式分離2）代碼語義性好3）更符合HTML標(biāo)準(zhǔn)規(guī)范4）SEO友好Table布局的適用場景：某種原因不方便加載外部CSS的場景，例如郵件正文，此時(shí)用table布局可以在無css情況下保持頁面布局正常10.img的alt與title有何異同？strong與em的異同alt(alttext):為不能顯示圖像、窗體或applets的用戶代理（UA），alt屬性用來指定替換文字。替換文字的語言由lang屬性指定。(在IE瀏覽器下會(huì)在沒有title時(shí)把a(bǔ)lt當(dāng)成tooltip顯示)title(tooltip):該屬性為設(shè)置該屬性的元素提供建議性的信息。em:表現(xiàn)為斜體，語義表示強(qiáng)調(diào)strong:表現(xiàn)為粗體，語義為強(qiáng)烈語氣，強(qiáng)調(diào)程度超過em11.簡述一下src與href的區(qū)別src用于替換當(dāng)前元素，href用于在當(dāng)前文檔和引用資源之間確立聯(lián)系。src是source的縮寫，指向外部資源的位置，指向的內(nèi)容將會(huì)嵌入到文檔中當(dāng)前標(biāo)簽所在位置；在請求src資源時(shí)會(huì)將其指向的資源下載并應(yīng)用到文檔內(nèi)，例如js腳本，img圖片和frame等元素。<scriptsrc=”js.js”></script>當(dāng)瀏覽器解析到該元素時(shí)，會(huì)暫停其他資源的下載和處理，直到將該資源加載、編譯、執(zhí)行完畢，圖片和框架等元素也如此，類似于將所指向資源嵌入當(dāng)前標(biāo)簽內(nèi)。這也是為什么將js腳本放在底部而不是頭部。href是HypertextReference的縮寫，指向網(wǎng)絡(luò)資源所在位置，建立和當(dāng)前元素（錨點(diǎn)）或當(dāng)前文檔（鏈接）之間的鏈接，如果我們在文檔中添加<linkhref="common.css"rel="stylesheet"/>那么瀏覽器會(huì)識(shí)別該文檔為css文件，就會(huì)并行下載資源并且不會(huì)停止對當(dāng)前文檔的處理。這也是為什么建議使用link方式來加載css，而不是使用@import方式。12.知道的網(wǎng)頁制作會(huì)用到的圖片格式有哪些png-8，png-24，jpeg，gif，svg。但是上面的那些都不是面試官想要的最后答案。面試官希望聽到是Webp。（是否有關(guān)注新技術(shù)，新鮮事物）科普一下Webp：WebP格式，谷歌（google）開發(fā)的一種旨在加快圖片加載速度的圖片格式。圖片壓縮體積大約只有JPEG的2/3，并能節(jié)省大量的服務(wù)器帶寬資源和數(shù)據(jù)空間。FacebookEbay等知名網(wǎng)站已經(jīng)開始測試并使用WebP格式。在質(zhì)量相同的情況下，WebP格式圖像的體積要比JPEG格式圖像小40%13.在css/js代碼上線之后開發(fā)人員經(jīng)常會(huì)優(yōu)化性能，從用戶刷新網(wǎng)頁開始，一次js請求一般情況下有哪些地方會(huì)有緩存處理dns緩存，cdn緩存，瀏覽器緩存，服務(wù)器緩存14.一個(gè)頁面上有大量的圖片（大型電商網(wǎng)站），加載很慢，你有哪些方法優(yōu)化這些圖片的加載，給用戶更好的體驗(yàn)1）圖片懶加載，在頁面上的未可視區(qū)域可以添加一個(gè)滾動(dòng)條事件，判斷圖片位置與瀏覽器頂端的距離與頁面的距離，如果前者小于后者，優(yōu)先加載。2）如果為幻燈片、相冊等，可以使用圖片預(yù)加載技術(shù)，將當(dāng)前展示圖片的前一張和后一張優(yōu)先下載。3）如果圖片為css圖片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技術(shù)。4）如果圖片過大，可以使用特殊編碼的圖片，加載時(shí)會(huì)先加載一張壓縮的特別厲害的縮略圖，以提高用戶體驗(yàn)。5）如果圖片展示區(qū)域小于圖片的真實(shí)大小，則因在服務(wù)器端根據(jù)業(yè)務(wù)需要先行進(jìn)行圖片壓縮，圖片壓縮后大小與展示一致15.你如何理解HTML結(jié)構(gòu)的語義化1）更符合W3C統(tǒng)一的規(guī)范標(biāo)準(zhǔn)，是技術(shù)趨勢。2）沒有樣式時(shí)瀏覽器的默認(rèn)樣式也能讓頁面結(jié)構(gòu)很清晰。3）對功能障礙用戶友好。屏幕閱讀器（如果訪客有視障）會(huì)完全根據(jù)你的標(biāo)記來“讀”你的網(wǎng)頁。4）對其他非主流終端設(shè)備友好。例如機(jī)頂盒、PDA、各種移動(dòng)終端。5）對SEO友好。16.談?wù)勔郧岸私嵌瘸霭l(fā)做好SEO需要考慮什么搜索引擎主要以:外鏈數(shù)量和質(zhì)量,網(wǎng)頁內(nèi)容和結(jié)構(gòu)等來決定某關(guān)鍵字下的網(wǎng)頁搜索排名。前端應(yīng)該注意網(wǎng)頁結(jié)構(gòu)和內(nèi)容方面的情況：1）Meta標(biāo)簽優(yōu)化：主要包括主題（Title)，網(wǎng)站描述(Description)。還有一些其它的隱藏文字比如Author（作者），Category（目錄），Language（編碼語種）等，符合W3C規(guī)范的語義性標(biāo)簽的使用2）如何選取關(guān)鍵詞并在網(wǎng)頁中放置關(guān)鍵詞：搜索就得用關(guān)鍵詞。關(guān)鍵詞分析和選擇是SEO最重要的工作之一。首先要給網(wǎng)站確定主關(guān)鍵詞（一般在5個(gè)上下），然后針對這些關(guān)鍵詞進(jìn)行優(yōu)化，包括關(guān)鍵詞密度（Density），相關(guān)度（Relavancy），突出性（Prominency）等等。17.html5有哪些新特性、移除了那些元素新特性：1）拖拽釋放(Draganddrop)API2）語義化更好的內(nèi)容標(biāo)簽（header,nav,footer,aside,article,section）3）音頻、視頻API(audio,video)4）畫布(Canvas)API5）地理(Geolocation)API6）本地離線存儲(chǔ)localStorage長期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失；7）sessionStorage的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除8）表單控件，calendar、date、time、email、url、search9）新的技術(shù)webworker,websocket,Geolocation移除的元素：1）純表現(xiàn)的元素：basefont，big，center，font,s，strike，tt，u；2）對可用性產(chǎn)生負(fù)面影響的元素：frame，frameset，noframes；18.如何處理HTML5新標(biāo)簽的瀏覽器兼容問題IE8/IE7/IE6支持通過document.createElement方法產(chǎn)生的標(biāo)簽，可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽，瀏覽器支持新標(biāo)簽后，還需要添加標(biāo)簽?zāi)J(rèn)的樣式（當(dāng)然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架）：<!--[ifltIE9]><script>src="/svn/trunk/html5.js"</script><![endif]-->19.如何區(qū)分HTML和HTML5？DOCTYPE聲明新增的結(jié)構(gòu)元素、功能元素20.HTML5Canvas元素有什么用Canvas元素用于在網(wǎng)頁上繪制圖形，該元素標(biāo)簽強(qiáng)大之處在于可以直接在HTML上進(jìn)行圖形操作21.如何在HTML5頁面中嵌入音頻HTML5包含嵌入音頻文件的標(biāo)準(zhǔn)方式，支持的格式包括MP3、Wav和Ogg：<audiocontrols><sourcesrc="jamshed.mp3"type="audio/mpeg">Yourbrowserdoes'ntsupportaudioembeddingfeature.</audio>22.如何在HTML5頁面中嵌入視頻和音頻一樣，HTML5定義了嵌入視頻的標(biāo)準(zhǔn)方法，支持的格式包括：MP4、WebM和Ogg：<videowidth="450"height="340"controls><sourcesrc="jamshed.mp4"type="video/mp4">Yourbrowserdoes'ntsupportvideoembeddingfeature.</video>23.HTML5引入什么新的表單屬性datalistdatetimeoutputkeygendatemonthweektimenumberrangeemailurl24.語義化的理解用正確的標(biāo)簽做正確的事情！html語義化就是讓頁面的內(nèi)容結(jié)構(gòu)化，便于對瀏覽器、搜索引擎解析；在沒有樣式CSS情況下也以一種文檔格式顯示，并且是容易閱讀的。搜索引擎的爬蟲依賴于標(biāo)記來確定上下文和各個(gè)關(guān)鍵字的權(quán)重，利于SEO。使閱讀源代碼的人對網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護(hù)理解25.介紹一下你對瀏覽器內(nèi)核的理解主要分成兩部分：渲染引擎(layoutengineer或RenderingEngine)和JS引擎渲染引擎：負(fù)責(zé)取得網(wǎng)頁的內(nèi)容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計(jì)算網(wǎng)頁的顯示方式，然后會(huì)輸出至顯示器或打印機(jī)。瀏覽器的內(nèi)核的不同對于網(wǎng)頁的語法解釋會(huì)有不同，所以渲染的效果也不相同。所有網(wǎng)頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網(wǎng)絡(luò)內(nèi)容的應(yīng)用程序都需要內(nèi)核JS引擎則：解析和執(zhí)行javascript來實(shí)現(xiàn)網(wǎng)頁的動(dòng)態(tài)效果最開始渲染引擎和JS引擎并沒有區(qū)分的很明確，后來JS引擎越來越獨(dú)立，內(nèi)核就傾向于只指渲染引擎26.瀏覽器是怎么對HTML5的離線儲(chǔ)存資源進(jìn)行管理和加載的呢在線的情況下，瀏覽器發(fā)現(xiàn)html頭部有manifest屬性，它會(huì)請求manifest文件，如果是第一次訪問app，那么瀏覽器就會(huì)根據(jù)manifest文件的內(nèi)容下載相應(yīng)的資源并且進(jìn)行離線存儲(chǔ)。如果已經(jīng)訪問過app并且資源已經(jīng)離線存儲(chǔ)了，那么瀏覽器就會(huì)使用離線的資源加載頁面，然后瀏覽器會(huì)對比新的manifest文件與舊的manifest文件，如果文件沒有發(fā)生改變，就不做任何操作，如果文件改變了，那么就會(huì)重新下載文件中的資源并進(jìn)行離線存儲(chǔ)。離線的情況下，瀏覽器就直接使用離線存儲(chǔ)的資源27.請描述一下cookies，sessionStorage和localStorage的區(qū)別cookie是網(wǎng)站為了標(biāo)示用戶身份而儲(chǔ)存在用戶本地終端（ClientSide）上的數(shù)據(jù)（通常經(jīng)過加密）cookie數(shù)據(jù)始終在同源的http請求中攜帶（即使不需要），記會(huì)在瀏覽器和服務(wù)器間來回傳遞sessionStorage和localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存存儲(chǔ)大小：cookie數(shù)據(jù)大小不能超過4ksessionStorage和localStorage雖然也有存儲(chǔ)大小的限制，但比cookie大得多，可以達(dá)到5M或更大有期時(shí)間：localStorage存儲(chǔ)持久數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非主動(dòng)刪除數(shù)據(jù)sessionStorage數(shù)據(jù)在當(dāng)前瀏覽器窗口關(guān)閉后自動(dòng)刪除cookie設(shè)置的cookie過期時(shí)間之前一直有效，即使窗口或?yàn)g覽器關(guān)閉28.csssprite是什么,有什么優(yōu)缺點(diǎn)概念：將多個(gè)小圖片拼接到一個(gè)圖片中。通過background-position和元素尺寸調(diào)節(jié)需要顯示的背景圖案。優(yōu)點(diǎn)：減少HTTP請求數(shù)，極大地提高頁面加載速度增加圖片信息重復(fù)度，提高壓縮比，減少圖片大小更換風(fēng)格方便，只需在一張或幾張圖片上修改顏色或樣式即可實(shí)現(xiàn)缺點(diǎn)：圖片合并麻煩維護(hù)麻煩，修改一個(gè)圖片可能需要從新布局整個(gè)圖片，樣式29.canvas如何繪制一個(gè)三角形|正方形moveto是移動(dòng)到某個(gè)坐標(biāo)，lineto是從當(dāng)前坐標(biāo)連線到某個(gè)坐標(biāo)。這兩個(gè)函數(shù)加起來就是畫一條直線。畫線要用“筆”，那么MoveTo()把筆要畫的起始位置固定了（x,y）然后要固定終止位置要用到LineTo函數(shù)確定終止位置（xend,yend）,這樣一條線就畫出來了。每次與前面一個(gè)坐標(biāo)相連。stroke()方法會(huì)實(shí)際地繪制出通過moveTo()和lineTo()方法定義的路徑。默認(rèn)顏色是黑色。<!DOCTYPEHTML5><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>畫布</title></head><body><canvasid="myCanvas"width="200"height="100"style="border:1pxsolid#c3c3c3;">Yourbrowserdoesnotsupportthecanvaselement.</canvas><scripttype="text/javascript">varc=document.getElementById("myCanvas");//三角形varcxt=c.getContext("2d");cxt.moveTo(10,10);cxt.lineTo(50,50);cxt.lineTo(10,50);cxt.lineTo(10,10);cxt.stroke();//正方形varcxt2=c.getContext("2d");cxt2.moveTo(60,10);cxt2.lineTo(100,10);cxt2.lineTo(100,50);cxt2.lineTo(60,50);cxt2.lineTo(60,10);cxt2.stroke();</script></body></html>30.彈性盒子模型?flex|box區(qū)別?1）引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個(gè)容器中的條目進(jìn)行排列、對齊和分配空白空間。即便容器中條目的尺寸未知或是動(dòng)態(tài)變化的，彈性盒布局模型也能正常的工作。在該布局模型中，容器會(huì)根據(jù)布局的需要，調(diào)整其中包含的條目的尺寸和順序來最好地填充所有可用的空間。當(dāng)容器的尺寸由于屏幕大小或窗口尺寸發(fā)生變化時(shí)，其中包含的條目也會(huì)被動(dòng)態(tài)地調(diào)整。比如當(dāng)容器尺寸變大時(shí)，其中包含的條目會(huì)被拉伸以占滿多余的空白空間；當(dāng)容器尺寸變小時(shí)，條目會(huì)被縮小以防止超出容器的范圍。彈性盒布局是與方向無關(guān)的。在傳統(tǒng)的布局方式中，block布局是把塊在垂直方向從上到下依次排列的；而inline布局則是在水平方向來排列。彈性盒布局并沒有這樣內(nèi)在的方向限制，可以由開發(fā)人員自由操作。2）flex和box的區(qū)別:display：box是老規(guī)范，要兼顧古董機(jī)子就加上它；父級元素有display:box;屬性之后。他的子元素里面加上box-flex屬性?？梢宰屪釉匕凑崭冈氐膶挾冗M(jìn)行一定比例的分占空間。flex是最新的，董機(jī)老機(jī)子不支持的；父元素設(shè)置display:flex后，子元素寬度會(huì)隨父元素寬度的改變而改變，而display:box不會(huì)。AndroidUC瀏覽器只支持display:box語法；而iOSUC瀏覽器則支持兩種方式。31.解釋在ie低版本下的怪異盒模型和c3的怪異盒模型和彈性盒模型?IE當(dāng)padding+border的值小于width或者h(yuǎn)eight:盒模型的寬度=margin(左右)+width（width已經(jīng)包含了padding和border的值）盒模型的高度=margin(上下)+height（height已經(jīng)包含了padding和border的值）當(dāng)padding+border的值大于width或者h(yuǎn)eight:盒模型的寬度=margin(左右)+padding(左右)+border(左右)盒模型的高度=margin(上下)+padding(上下)+border(上下)+19px（加一個(gè)默認(rèn)行高19px）所以相當(dāng)于是padding+border和width或者h(yuǎn)eight比大小，誰大取誰。以上幾種DOCTYPE都是標(biāo)準(zhǔn)的文檔類型，無論使用哪種模式完整定義DOCTYPE，都會(huì)觸發(fā)標(biāo)準(zhǔn)模式，而如果DOCTYPE缺失則在ie6，ie7，ie8下將會(huì)觸發(fā)怪異模式（quirks模式）CSS3box-sizing有兩個(gè)值一個(gè)是content-box，另一個(gè)是border-box。當(dāng)設(shè)置為box-sizing:content-box時(shí)，將采用標(biāo)準(zhǔn)模式解析計(jì)算，也是默認(rèn)模式；當(dāng)設(shè)置為box-sizing:border-box時(shí)，將采用怪異模式解析計(jì)算；Css3彈性盒模型引入了新的盒子模型—彈性盒模型，該模型決定一個(gè)盒子在其他盒子中的分布方式以及如何處理可用的空間。使用該模型，可以很輕松的創(chuàng)建自適應(yīng)瀏覽器窗口的流動(dòng)布局或自適應(yīng)字體大小的彈性布局。第三章CSS面試題1.盒模型復(fù)制/*紅色區(qū)域的大小是多少？200-20*2-20*2=120*/.box{width:200px;height:200px;padding:20px;margin:20px;background:red;border:20pxsolidblack;box-sizing:border-box;}復(fù)制/*標(biāo)準(zhǔn)模型*/box-sizing:content-box;/*IE模型*/box-sizing:border-box;\h回到頂部2.如何實(shí)現(xiàn)一個(gè)最大的正方形用padding-bottom撐開邊距復(fù)制section{width:100%;padding-bottom:100%;background:#333;}\h回到頂部3.一行水平居中，多行居左復(fù)制<div><span>我是多行文字。我是多行文字。我是多行文字。我是多行文字。我是多行文字。我是多行文字。我是多行文字。我是多行文字。我是多行文字。我是多行文字。</span></div><div><span>我是一行文字</span></div><style>div{text-align:center;}divspan{display:inline-block;text-align:left;}</style>\h回到頂部4.水平垂直居中水平居中1)若是行內(nèi)元素,給其父元素設(shè)置text-align:center,即可實(shí)現(xiàn)行內(nèi)元素水平居中.2)若是塊級元素,該元素設(shè)置margin:0auto即可.3)若子元素包含float:left屬性,為了讓子元素水平居中,則可讓父元素寬度設(shè)置為fit-content,并且配合margin,作如下設(shè)置:.parent{width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;margin:0auto;}復(fù)制代碼fit-content是CSS3中給width屬性新加的一個(gè)屬性值,它配合margin可以輕松實(shí)現(xiàn)水平居中,目前只支持Chrome和Firefox瀏覽器.4)使用flex2012年版本布局,可以輕松的實(shí)現(xiàn)水平居中,子元素設(shè)置如下:.son{display:flex;justify-content:center;}復(fù)制代碼5)使用flex2009年版本,父元素display:box;box-pack:center;如下設(shè)置:.parent{display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-pack:center;display:-moz-box;-moz-box-orient:horizontal;-moz-box-pack:center;display:-o-box;-o-box-orient:horizontal;-o-box-pack:center;display:-ms-box;-ms-box-orient:horizontal;-ms-box-pack:center;display:box;box-orient:horizontal;box-pack:center;}復(fù)制代碼6)使用CSS3中新增的transform屬性,子元素設(shè)置如下:.son{position:absolute;left:50%;transform:translate(-50%,0);}復(fù)制代碼7)使用絕對定位方式,以及負(fù)值的margin-left,子元素設(shè)置如下:.son{position:absolute;width:固定;left:50%;margin-left:-0.5寬度;}復(fù)制代碼8)使用絕對定位方式,以及l(fā)eft:0;right:0;margin:0auto;子元素設(shè)置如下:.son{position:absolute;width:固定;left:0;right:0;margin:0auto;}復(fù)制代碼垂直居中單行文本1)若元素是單行文本,則可設(shè)置line-height等于父元素高度行內(nèi)塊級元素2)若元素是行內(nèi)塊級元素,基本思想是使用display:inline-block,vertical-align:middle和一個(gè)偽元素讓內(nèi)容塊處于容器中央..parent::after,.son{display:inline-block;vertical-align:middle;}.parent::after{content:'';height:100%;}復(fù)制代碼這是一種很流行的方法,也適應(yīng)IE7.元素高度不定3)可用vertical-align屬性,而vertical-align只有在父層為td或者th時(shí),才會(huì)生效,對于其他塊級元素,例如div、p等,默認(rèn)情況是不支持的.為了使用vertical-align,我們需要設(shè)置父元素display:table,子元素display:table-cell;vertical-align:middle;優(yōu)點(diǎn)元素高度可以動(dòng)態(tài)改變,不需再CSS中定義,如果父元素沒有足夠空間時(shí),該元素內(nèi)容也不會(huì)被截?cái)?缺點(diǎn)IE6~7,甚至IE8beta中無效.4)可用Flex2012版,這是CSS布局未來的趨勢.Flexbox是CSS3新增屬性,設(shè)計(jì)初衷是為了解決像垂直居中這樣的常見布局問題.相關(guān)的文章如《\h彈性盒模型Flex指南》父元素做如下設(shè)置即可保證子元素垂直居中:.parent{display:flex;align-items:center;}復(fù)制代碼優(yōu)點(diǎn)內(nèi)容塊的寬高任意,優(yōu)雅的溢出.可用于更復(fù)雜高級的布局技術(shù)中.缺點(diǎn)IE8/IE9不支持需要瀏覽器廠商前綴渲染上可能會(huì)有一些問題5)使用flex2009版..parent{display:box;box-orient:vertical;box-pack:center;}復(fù)制代碼優(yōu)點(diǎn)實(shí)現(xiàn)簡單,擴(kuò)展性強(qiáng)缺點(diǎn)兼容性差,不支持IE6)可用transform,設(shè)置父元素相對定位(position:relative),子元素如下css樣式:.son{position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);}復(fù)制代碼優(yōu)點(diǎn)代碼量少缺點(diǎn)IE8不支持,屬性需要追加瀏覽器廠商前綴,可能干擾其他transform效果,某些情形下會(huì)出現(xiàn)文本或元素邊界渲染模糊的現(xiàn)象.元素高度固定7)設(shè)置父元素相對定位(position:relative),子元素如下css樣式:.son{position:absolute;top:50%;height:固定;margin-top:-0.5高度;}復(fù)制代碼優(yōu)點(diǎn)適用于所有瀏覽器.缺點(diǎn)父元素空間不夠時(shí),子元素可能不可見(當(dāng)瀏覽器窗口縮小時(shí),滾動(dòng)條不出現(xiàn)時(shí)).如果子元素設(shè)置了overflow:auto,則高度不夠時(shí),會(huì)出現(xiàn)滾動(dòng)條.8)設(shè)置父元素相對定位(position:relative),子元素如下css樣式:.son{position:absolute;height:固定;top:0;bottom:0;margin:auto0;}復(fù)制代碼優(yōu)點(diǎn)簡單缺點(diǎn)沒有足夠空間時(shí),子元素會(huì)被截?cái)?但不會(huì)有滾動(dòng)條.總結(jié)水平居中較為簡單,共提供了8種方法,一般情況下text-align:center,marin:0auto;足矣①text-align:center;②margin:0auto;③width:fit-content;④flex⑤盒模型⑥transform⑦⑧兩種不同的絕對定位方法垂直居中,共提供了8種方法.①單行文本,line-height②行內(nèi)塊級元素,使用display:inline-block,vertical-align:middle;加上偽元素輔助實(shí)現(xiàn)③vertical-align④flex⑤盒模型⑥transform⑦⑧兩種不同的絕對定位方法我們發(fā)現(xiàn),flex,盒模型,transform,絕對定位,這幾種方法同時(shí)適用于水平居中和垂直居中.希望對大家有所幫助.5.兩欄布局，左邊固定，右邊自適應(yīng)，左右不重疊flex做自適應(yīng)布局很容易，但兼容性不好，這里統(tǒng)一不用flex布局復(fù)制.left{float:left;width:300px;margin-right:10px;background:red;}.right{overflow:hidden;/*創(chuàng)建BFC*/background:yellow;}\h回到頂部6.如何實(shí)現(xiàn)左右等高布局table布局兼容性最好，當(dāng)然flex布局的align-items:stretch;也行復(fù)制<divclass="layout"><divclass="layoutleft">left</div><divclass="layoutright">center</div></div><style>.layout{display:table;width:100%;}.layoutdiv{display:table-cell;}.layout.left{width:50%;height:200px;background:red;}.layout.right{width:50%;background:yellow;}</style>\h回到頂部7.畫三角形復(fù)制.shape{width:0;height:0;border-left:50pxsolidtransparent;border-right:50pxsolidtransparent;border-top:50pxsolidtransparent;border-bottom:50pxsolidblue;background:white;}\h回到頂部8.link@import導(dǎo)入css1.link是XHTML標(biāo)簽，除了加載CSS外，還可以定義RSS等其他事務(wù)；@import屬于CSS范疇，只能加載CSS2.link引用CSS時(shí)，在頁面載入時(shí)同時(shí)加載；@import需要頁面網(wǎng)頁完全載入以后加載3.link無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持4.link支持使用Javascript控制DOM去改變樣式；而@import不支持\h回到頂部9.BFC理解BFC觸發(fā)條件：1.根元素，即html2.float的值不為none（默認(rèn)）3.position的值為absolute或fixed4.overflow的值不為visible（默認(rèn)）5.display的值為inline-block、table-cell、table-captionBFC特性：1.內(nèi)部的Box會(huì)在垂直方向上一個(gè)接一個(gè)放置。2.Box垂直方向的距離由margin決定，屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊。3.每個(gè)元素的marginbox的左邊，與包含塊borderbox的左邊相接觸。4.BFC的區(qū)域不會(huì)與floatbox重疊。（可用于清浮動(dòng)）5.BFC是頁面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。6.計(jì)算BFC的高度時(shí)，浮動(dòng)元素也會(huì)參與計(jì)算。第四章JS面試題1.判斷js類型的方式1.typeof可以判斷出'string','number','boolean','undefined','symbol'但判斷typeof(null)時(shí)值為'object';判斷數(shù)組和對象時(shí)值均為'object'2.instanceof原理是構(gòu)造函數(shù)的prototype屬性是否出現(xiàn)在對象的原型鏈中的任何位置復(fù)制functionA(){}leta=newA();ainstanceofA//true,因?yàn)镺bject.getPrototypeOf(a)===A.prototype;3.Ototype.toString.call()常用于判斷瀏覽器內(nèi)置對象,對于所有基本的數(shù)據(jù)類型都能進(jìn)行判斷，即使是null和undefined4.Array.isArray()用于判斷是否為數(shù)組\h回到頂部2.ES5和ES6分別幾種方式聲明變量ES5有倆種：var和functionES6有六種：增加四種，let、const、class和import注意：let、const、class聲明的全局變量再也不會(huì)和全局對象的屬性掛鉤\h回到頂部3.閉包的概念？優(yōu)缺點(diǎn)？閉包的概念：閉包就是能讀取其他函數(shù)內(nèi)部變量的函數(shù)。優(yōu)點(diǎn)：1.避免全局變量的污染2.希望一個(gè)變量長期存儲(chǔ)在內(nèi)存中（緩存變量）缺點(diǎn)：1.內(nèi)存泄露（消耗）2.常駐內(nèi)存，增加內(nèi)存使用量\h回到頂部4.淺拷貝和深拷貝淺拷貝復(fù)制//第一層為深拷貝Object.assign()Atotype.slice()擴(kuò)展運(yùn)算符...深拷貝復(fù)制JSON.parse(JSON.stringify())遞歸函數(shù)復(fù)制functioncloneObject(obj){varnewObj={}//如果不是引用類型，直接返回if(typeofobj!=='object'){returnobj}//如果是引用類型，遍歷屬性else{for(varattrinobj){//如果某個(gè)屬性還是引用類型，遞歸調(diào)用newObj[attr]=cloneObject(obj[attr])}}returnnewObj}\h如何實(shí)現(xiàn)一個(gè)深拷貝\h詳細(xì)解析賦值、淺拷貝和深拷貝的區(qū)別\h回到頂部5.數(shù)組去重的方法1.ES6的Set復(fù)制letarr=[1,1,2,3,4,5,5,6]letarr2=[...newSet(arr)]2.reduce()復(fù)制letarr=[1,1,2,3,4,5,5,6]letarr2=arr.reduce(function(ar,cur){if(!ar.includes(cur)){ar.push(cur)}returnar},[])3.filter()復(fù)制//這種方法會(huì)有一個(gè)問題：[1,'1']會(huì)被當(dāng)做相同元素，最終輸入[1]letarr=[1,1,2,3,4,5,5,6]letarr2=arr.filter(function(item,index){//indexOf()方法可返回某個(gè)指定的字符串值在字符串中首次出現(xiàn)的位置returnarr.indexOf(item)===index})\h回到頂部6.DOM事件有哪些階段？談?wù)剬κ录淼睦斫夥譃槿箅A段：捕獲階段--目標(biāo)階段--冒泡階段事件代理簡單說就是：事件不直接綁定到某元素上，而是綁定到該元素的父元素上，進(jìn)行觸發(fā)事件操作時(shí)(例如'click')，再通過條件判斷，執(zhí)行事件觸發(fā)后的語句(例如'alert(e.target.innerHTML)')好處：(1)使代碼更簡潔；(2)節(jié)省內(nèi)存開銷\h回到頂部7.js執(zhí)行機(jī)制、事件循環(huán)JavaScript語言的一大特點(diǎn)就是單線程，同一個(gè)時(shí)間只能做一件事。單線程就意味著，所有任務(wù)需要排隊(duì)，前一個(gè)任務(wù)結(jié)束，才會(huì)執(zhí)行后一個(gè)任務(wù)。如果前一個(gè)任務(wù)耗時(shí)很長，后一個(gè)任務(wù)就不得不一直等著。JavaScript語言的設(shè)計(jì)者意識(shí)到這個(gè)問題，將所有任務(wù)分成兩種，一種是同步任務(wù)（synchronous），另一種是異步任務(wù)（asynchronous），在所有同步任務(wù)執(zhí)行完之前，任何的異步任務(wù)是不會(huì)執(zhí)行的。當(dāng)我們打開網(wǎng)站時(shí)，網(wǎng)頁的渲染過程就是一大堆同步任務(wù)，比如頁面骨架和頁面元素的渲染。而像加載圖片音樂之類占用資源大耗時(shí)久的任務(wù)，就是異步任務(wù)。關(guān)于這部分有嚴(yán)格的文字定義，但本文的目的是用最小的學(xué)習(xí)成本徹底弄懂執(zhí)行機(jī)制，所以我們用導(dǎo)圖來說明：導(dǎo)圖要表達(dá)的內(nèi)容用文字來表述的話：同步和異步任務(wù)分別進(jìn)入不同的執(zhí)行"場所"，同步的進(jìn)入主線程，異步的進(jìn)入EventTable并注冊函數(shù)。當(dāng)指定的事情完成時(shí)，EventTable會(huì)將這個(gè)函數(shù)移入EventQueue。主線程內(nèi)的任務(wù)執(zhí)行完畢為空，會(huì)去EventQueue讀取對應(yīng)的函數(shù)，進(jìn)入主線程執(zhí)行。上述過程會(huì)不斷重復(fù)，也就是常說的EventLoop(事件循環(huán))。我們不禁要問了，那怎么知道主線程執(zhí)行棧為空?。縥s引擎存在monitoringprocess進(jìn)程，會(huì)持續(xù)不斷的檢查主線程執(zhí)行棧是否為空，一旦為空，就會(huì)去EventQueue那里檢查是否有等待被調(diào)用的函數(shù)。換一張圖片也許更好理解主線程的執(zhí)行過程：上圖用文字表述就是：主線程從"任務(wù)隊(duì)列"中讀取事件，這個(gè)過程是循環(huán)不斷的，所以整個(gè)的這種運(yùn)行機(jī)制又稱為EventLoop（事件循環(huán)）。只要主線程空了，就會(huì)去讀取"任務(wù)隊(duì)列"，這就是JavaScript的運(yùn)行機(jī)制。說完JS主線程的執(zhí)行機(jī)制，下面說說經(jīng)常被問到的JS異步中宏任務(wù)（macrotasks）、微任務(wù)（microtasks）執(zhí)行順序。JS異步有一個(gè)機(jī)制，就是遇到宏任務(wù)，先執(zhí)行宏任務(wù)，將宏任務(wù)放入EventQueue，然后再執(zhí)行微任務(wù)，將微任務(wù)放入EventQueue，但是，這兩個(gè)Queue不是一個(gè)Queue。當(dāng)你往外拿的時(shí)候先從微任務(wù)里拿這個(gè)回調(diào)函數(shù)，然后再從宏任務(wù)的Queue拿宏任務(wù)的回調(diào)函數(shù)。如下圖：宏任務(wù)：整體代碼script，setTimeout，setInterval微任務(wù)：Promise，process.nextTick\h參考鏈接：這一次，徹底弄懂JavaScript執(zhí)行機(jī)制\h回到頂部8.介紹下promise.allPromise.all()方法將多個(gè)Promise實(shí)例包裝成一個(gè)Promise對象（p），接受一個(gè)數(shù)組（p1,p2,p3）作為參數(shù)，數(shù)組中不一定需要都是Promise對象，但是一定具有Iterator接口，如果不是的話，就會(huì)調(diào)用Promise.resolve將其轉(zhuǎn)化為Promise對象之后再進(jìn)行處理。使用Promise.all()生成的Promise對象（p）的狀態(tài)是由數(shù)組中的Promise對象（p1,p2,p3）決定的。1.如果所有的Promise對象（p1,p2,p3）都變成fullfilled狀態(tài)的話，生成的Promise對象（p）也會(huì)變成fullfilled狀態(tài)，p1,p2,p3三個(gè)Promise對象產(chǎn)生的結(jié)果會(huì)組成一個(gè)數(shù)組返回給傳遞給p的回調(diào)函數(shù)。2.如果p1,p2,p3中有一個(gè)Promise對象變?yōu)閞ejected狀態(tài)的話，p也會(huì)變成rejected狀態(tài)，第一個(gè)被rejected的對象的返回值會(huì)傳遞給p的回調(diào)函數(shù)。Promise.all()方法生成的Promise對象也會(huì)有一個(gè)catch方法來捕獲錯(cuò)誤處理，但是如果數(shù)組中的Promise對象變成rejected狀態(tài)時(shí)，并且這個(gè)對象還定義了catch的方法，那么rejected的對象會(huì)執(zhí)行自己的catch方法。并且返回一個(gè)狀態(tài)為fullfilled的Promise對象，Promise.all()生成的對象會(huì)接受這個(gè)Promise對象，不會(huì)返回rejected狀態(tài)。\h回到頂部9.async和await主要考察宏任務(wù)和微任務(wù)，搭配promise，詢問一些輸出的順序原理：async和await用了同步的方式去做異步，async定義的函數(shù)的返回值都是promise，await后面的函數(shù)會(huì)先執(zhí)行一遍，然后就會(huì)跳出整個(gè)async函數(shù)來執(zhí)行后面js棧的代碼\h回到頂部10.ES6的class和構(gòu)造函數(shù)的區(qū)別class的寫法只是語法糖，和之前prototype差不多，但還是有細(xì)微差別的，下面看看：1.嚴(yán)格模式類和模塊的內(nèi)部，默認(rèn)就是嚴(yán)格模式，所以不需要使用usestrict指定運(yùn)行模式。只要你的代碼寫在類或模塊之中，就只有嚴(yán)格模式可用?？紤]到未來所有的代碼，其實(shí)都是運(yùn)行在模塊之中，所以ES6實(shí)際上把整個(gè)語言升級到了嚴(yán)格模式。2.不存在提升類不存在變量提升（hoist），這一點(diǎn)與ES5完全不同。復(fù)制newFoo();//ReferenceErrorclassFoo{}3.方法默認(rèn)是不可枚舉的ES6中的class，它的方法（包括靜態(tài)方法和實(shí)例方法）默認(rèn)是不可枚舉的，而構(gòu)造函數(shù)默認(rèn)是可枚舉的。細(xì)想一下，這其實(shí)是個(gè)優(yōu)化，讓你在遍歷時(shí)候，不需要再判斷hasOwnProperty了4.class的所有方法（包括靜態(tài)方法和實(shí)例方法）都沒有原型對象prototype，所以也沒有[[construct]]，不能使用new來調(diào)用。5.class必須使用new調(diào)用，否則會(huì)報(bào)錯(cuò)。這是它跟普通構(gòu)造函數(shù)的一個(gè)主要區(qū)別，后者不用new也可以執(zhí)行。6.ES5和ES6子類this生成順序不同ES5的繼承先生成了子類實(shí)例，再調(diào)用父類的構(gòu)造函數(shù)修飾子類實(shí)例。ES6的繼承先生成父類實(shí)例，再調(diào)用子類的構(gòu)造函數(shù)修飾父類實(shí)例。這個(gè)差別使得ES6可以繼承內(nèi)置對象。7.ES6可以繼承靜態(tài)方法，而構(gòu)造函數(shù)不能\h回到頂部11.transform、translate、transition分別是什么屬性？CSS中常用的實(shí)現(xiàn)動(dòng)畫方式三者屬性說明transform是指變換、變形，是css3的一個(gè)屬性，和width，height屬性一樣；translate是transform的屬性值，是指元素進(jìn)行2D(3D)維度上位移或范圍變換;transition是指過渡效果，往往理解成簡單的動(dòng)畫，需要有觸發(fā)條件。這里可以補(bǔ)充下transition和animation的比較，前者一般定義開始結(jié)束兩個(gè)狀態(tài)，需要有觸發(fā)條件；而后者引入了關(guān)鍵幀、速度曲線、播放次數(shù)等概念，更符合動(dòng)畫的定義，且無需觸發(fā)條件\h回到頂部12.介紹一下rAF(requestAnimationFrame)專門用來做動(dòng)畫，不卡頓，用法和setTimeout一樣。對rAF的闡述\hMDN資料定時(shí)器一直是js動(dòng)畫的核心技術(shù)，但它們不夠精準(zhǔn)，因?yàn)槎〞r(shí)器時(shí)間參數(shù)是指將執(zhí)行代碼放入U(xiǎn)I線程隊(duì)列中等待的時(shí)間，如果前面有其他任務(wù)隊(duì)列執(zhí)行時(shí)間過長，則會(huì)導(dǎo)致動(dòng)畫延遲，效果不精確等問題。所以處理動(dòng)畫循環(huán)的關(guān)鍵是知道延遲多長時(shí)間合適：時(shí)間要足夠短，才能讓動(dòng)畫看起來比較柔滑平順，避免多余性能損耗；時(shí)間要足夠長，才能讓瀏覽器準(zhǔn)備好變化渲染。這個(gè)時(shí)候rAF就出現(xiàn)了，采用系統(tǒng)時(shí)間間隔(大多瀏覽器刷新頻率是60Hz，相當(dāng)于1000ms/60≈16.6ms)，保持最佳繪制效率，不會(huì)因?yàn)殚g隔時(shí)間過短，造成過度繪制，增加開銷；也不會(huì)因?yàn)殚g隔時(shí)間太長，使用動(dòng)畫卡頓不流暢，讓各種網(wǎng)頁動(dòng)畫效果能夠有一個(gè)統(tǒng)一的刷新機(jī)制。并且rAF會(huì)把每一幀中的所有DOM操作集中起來，在一次重繪或回流中就完成。\h詳情：CSS3動(dòng)畫那么強(qiáng)，requestAnimationFrame還有毛線用？\h回到頂部13.javascript的垃圾回收機(jī)制講一下定義：指一塊被分配的內(nèi)存既不能使用，又不能回收，直到瀏覽器進(jìn)程結(jié)束。像C這樣的編程語言，具有低級內(nèi)存管理原語，如malloc()和free()。開發(fā)人員使用這些原語顯式地對操作系統(tǒng)的內(nèi)存進(jìn)行分配和釋放。而JavaScript在創(chuàng)建對象(對象、字符串等)時(shí)會(huì)為它們分配內(nèi)存，不再使用對時(shí)會(huì)“自動(dòng)”釋放內(nèi)存，這個(gè)過程稱為垃圾收集。內(nèi)存生命周期中的每一個(gè)階段:分配內(nèi)存—內(nèi)存是由操作系統(tǒng)分配的，它允許您的程序使用它。在低級語言(例如C語言)中，這是一個(gè)開發(fā)人員需要自己處理的顯式執(zhí)行的操作。然而，在高級語言中，系統(tǒng)會(huì)自動(dòng)為你分配內(nèi)在。使用內(nèi)存—這是程序?qū)嶋H使用之前分配的內(nèi)存，在代碼中使用分配的變量時(shí)，就會(huì)發(fā)生讀和寫操作。釋放內(nèi)存—釋放所有不再使用的內(nèi)存,使之成為自由內(nèi)存,并可以被重利用。與分配內(nèi)存操作一樣,這一操作在低級語言中也是需要顯式地執(zhí)行。四種常見的內(nèi)存泄漏：全局變量，未清除的定時(shí)器，閉包，以及dom的引用1.全局變量不用var聲明的變量，相當(dāng)于掛載到window對象上。如：b=1;解決：使用嚴(yán)格模式2.被遺忘的定時(shí)器和回調(diào)函數(shù)3.閉包4.沒有清理的DOM元素引用\h回到頂部14.對前端性能優(yōu)化有什么了解？一般都通過那幾個(gè)方面去優(yōu)化的？\h前端性能優(yōu)化的七大手段1.減少請求數(shù)量2.減小資源大小3.優(yōu)化網(wǎng)絡(luò)連接4.優(yōu)化資源加載5.減少重繪回流6.性能更好的API7.webpack優(yōu)化第五章JS高頻手寫代碼題1.實(shí)現(xiàn)new方法復(fù)制/**1.創(chuàng)建一個(gè)空對象*2.鏈接到原型*3.綁定this值*4.返回新對象*///第一種實(shí)現(xiàn)functioncreateNew(){letobj={}//1.創(chuàng)建一個(gè)空對象letconstructor=[].shift.call(arguments)//let[constructor,...args]=[...arguments]obj.__proto__=totype//2.鏈接到原型letresult=constructor.apply(obj,arguments)//3.綁定this值//letresult=constructor.apply(obj,args)returntypeofresult==='object'?result:obj//4.返回新對象}functionPeople(name,age){=namethis.age=age}letpeo=createNew(People,'Bob',22)console.log()console.log(peo.age)\h回到頂部2.實(shí)現(xiàn)Promise復(fù)制//未添加異步處理等其他邊界情況//①自動(dòng)執(zhí)行函數(shù)，②三個(gè)狀態(tài)，③thenclassPromise{constructor(fn){//三個(gè)狀態(tài)this.state='pending'this.value=undefinedthis.reason=undefinedletresolve=value=>{if(this.state==='pending'){this.state='fulfilled'this.value=value}}letreject=value=>{if(this.state==='pending'){this.state='rejected'this.reason=value}}//自動(dòng)執(zhí)行函數(shù)try{fn(resolve,reject)}catch(e){reject(e)}}//thenthen(onFulfilled,onRejected){switch(this.state){case'fulfilled':onFulfilled(this.value)breakcase'rejected':onRejected(this.value)breakdefault:}}}\h回到頂部3.實(shí)現(xiàn)一個(gè)call函數(shù)復(fù)制//思路：將要改變this指向的方法掛到目標(biāo)this上執(zhí)行并返回Ftotype.mycall=function(context){if(typeofthis!=='function'){thrownewTypeError('notfunciton')}context=context||windowcontext.fn=thisletarg=[...arguments].slice(1)letresult=context.fn(...arg)deletecontext.fnreturnresult}\h回到頂部4.實(shí)現(xiàn)一個(gè)apply函數(shù)復(fù)制//思路：將要改變this指向的方法掛到目標(biāo)this上執(zhí)行并返回Ftotype.myapply=function(context){if(typeofthis!=='function'){thrownewTypeError('notfunciton')}context=context||windowcontext.fn=thisletresultif(arguments[1]){result=context.fn(...arguments[1])}else{result=context.fn()}deletecontext.fnreturnresult}\h回到頂部5.實(shí)現(xiàn)一個(gè)bind函數(shù)復(fù)制//思路：類似call，但返回的是函數(shù)Ftotype.mybind=function(context){if(typeofthis!=='function'){thrownewTypeError('Error')}let_this=thisletarg=[...arguments].slice(1)returnfunctionF(){//處理函數(shù)使用new的情況if(thisinstanceofF){returnnew_this(...arg,...arguments)}else{return_this.apply(context,arg.concat(...arguments))}}}\h更多介紹：bind方法的實(shí)現(xiàn)\h回到頂部6.淺拷貝、深拷貝的實(shí)現(xiàn)淺拷貝：復(fù)制//1....實(shí)現(xiàn)letcopy1={...{x:1}}//2.Object.assign實(shí)現(xiàn)letcopy2=Object.assign({},{x:1})深拷貝：復(fù)制//1.JOSN.stringify()/JSON.parse()//缺點(diǎn)：拷貝對象包含正則表達(dá)式，函數(shù)，或者undefined等值會(huì)失敗letobj={a:1,b:{x:3}}JSON.parse(JSON.stringify(obj))//2.遞歸拷貝functiondeepClone(obj){letcopy=objinstanceofArray?[]:{}for(letiinobj){if(obj.hasOwnProperty(i)){copy[i]=typeofobj[i]==='object'?deepClone(obj[i]):obj[i]}}returncopy}\h回到頂部7.實(shí)現(xiàn)一個(gè)節(jié)流函數(shù)復(fù)制//思路：在規(guī)定時(shí)間內(nèi)只觸發(fā)一次functionthrottle(fn,delay){//利用閉包保存時(shí)間letprev=Date.now()returnfunction(){letcontext=thisletarg=argumentsletnow=Date.now()if(now-prev>=delay){fn.apply(context,arg)prev=Date.now()}}}functionfn(){console.log('節(jié)流')}addEventListener('scroll',throttle(fn,1000))\h回到頂部8.實(shí)現(xiàn)一個(gè)防抖函數(shù)復(fù)制//思路:在規(guī)定時(shí)間內(nèi)未觸發(fā)第二次，則執(zhí)行functiondebounce(fn,delay){//利用閉包保存定時(shí)器lettimer=nullreturnfunction(){letcontext=thisletarg=arguments//在規(guī)定時(shí)間內(nèi)再次觸發(fā)會(huì)先清除定時(shí)器后再重設(shè)定時(shí)器clearTimeout(timer)timer=setTimeout(function(){fn.apply(context,arg)},delay)}}functionfn(){console.log('防抖')}addEventListe