A. Web前端5道面試題
1.請說明ECMAScript,JavaScript,Jscript之間的關系?
ECMAScript提供腳本語言必須遵守的規則、
細節和准則，是腳本語言的規范。
比如：ES5，ES6就是具體的一js版本。
JavaScript是ECMAScript的一個分支版本,
JavaScript實現了多數ECMA-262中
描述的ECMAScript規范，但存在少數差異。
JScript是微軟公司對ECMA-262語言規范的
一種實現,除了少數例外(這是為了保持向後兼容),
微軟公司宣稱JScript完全實現了ECMA標准.
關系:
JavaScript和JScript都是ECMAScript的版本分支,
二者在語法上沒有多大的區別;
只不過一個是NetScape公司的,一個是微軟的;
IE系列默認是JScript,其它的則反之用JavaScript。
2.頁面載入過程中可能觸發哪些事件?它們的順序是?
頁面載入時，大致可以分為以下幾個步驟：1)開始解析HTML文檔結構2)載入外部樣式表及JavaScript腳本3)解析執行JavaScript腳本4)DOM樹渲染完成5)載入未完成的外部資源6)頁面載入成功
執行順序:1)documentreadystatechange事件2)documentDOMContentLoaded事件3)windowload事件
3.函數中在聲明變數a前使用a會產生錯誤嗎?為什麼?
不會,JS中能夠進行變數作用域提升,
把所有變數、函數的聲明提升到當前
作用域的最前面,但不進行賦值操作;
所以可能造成獲取的值是undefined。
4.什麼是hash,以及hashchange事件?
先了解下什麼是hash:hash即URL中"#"字元後面的部分。
a)使用瀏覽器訪問網頁時，
如果網頁URL中帶有hash，
頁面就會定位到id(或name)
與hash值一樣的元素的位置;
b)hash還有另一個特點，
它的改變不會導致頁面重新載入如橡尺;
c)hash值瀏如清覽器是不會隨請求發送到伺服器端的;
d)通過window.location.hash屬性獲取和設置hash值。
window.location.hash值的變化會直渣高接
反應到瀏覽器地址欄(#後面的部分會發生變化)，同時，瀏覽器地址欄hash值的變化也會觸發
window.location.hash值的變化，
從而觸發onhashchange事件。
再來了解下什麼是hashchange事件:
a)當URL的片段標識符更改時，
將觸發hashchange事件(跟在#符號後面的URL部分，包括#符號)b)
hashchange事件觸發時，
事件對象會有hash改變前的URL(oldURL)和hash改變後的URL(newURL)兩個屬性。
5.什麼是CDN,CDN對於網站有什麼意義,它有什麼樣的缺點?
CDN又稱為內容分發網路;本意在於
盡可能避開互聯網上有可能影響數據
傳輸速度和穩定性的瓶頸和環節，
使內容傳輸的更快、更穩定。
主要目的:
解決因分布、帶寬、伺服器性能帶來的訪問延遲問題，
適用於站點加速、點播、直播等場景。
使用戶可就近取得所需內容，解決Internet網路擁擠的狀況，
提高用戶訪問網站的響應速度和成功率。
缺點:
a)實施復雜,投資大;
b)目前大部分的CDN還只是對靜態內容加速，
對動態加速效果不好;
而雙線對動態加速的效果跟靜態是一樣的。
B. Web前端崗位面試題有哪些
前端面試題匯總，基本上會有四大類問題，具體如下：
一、HTML
1、Doctype作用？嚴格模式與混雜模式如何區分？它們有何意義?
2、HTML5 為什麼只需要寫 <!DOCTYPE HTML>？
3、行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
4、頁面導入樣式時，使用link和@import有什麼區別？
5、介紹一下你對瀏覽器內核的理解？
6、常見的瀏覽器內核有哪些？
7、html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區分 HTML 和 HTML5？
8、簡述一下你對HTML語義化的理解？
9、HTML5的離線儲存怎麼使用，工作原理能不能解釋一下？
10、瀏覽器是怎麼對HTML5的離線儲存資源進行管理和載入的呢？
11、請描述一下 cookies，sessionStorage 和 localStorage 的區別？
12、iframe有那些缺點？
13、Label的作用是什麼？是怎麼用的？（加 for 或 包裹）
14、HTML5的form如何關閉自動完成功能？
15、如何實現瀏覽器內多個標簽頁之間的通信? (阿里)
16、webSocket如何兼容低瀏覽器？(阿里)
17、頁面可見性（Page Visibility）API 可以有哪些用途？
18、如何在頁面上實現一個圓形的可點擊區域？
19、實現不使用 border 畫出1px高的線，在不同瀏覽器的Quirksmode和CSSCompat模式下都能保持同一效果。
20、網頁驗證碼是幹嘛的，是為了解決什麼安全問題？
21、tite與h1的區別、b與strong的區別、i與em的區別？
二、css
1、介紹一下標準的CSS的盒子模型？與低版本IE的盒子模型有什麼不同的？
2、CSS選擇符有哪些？哪些屬性可以繼承？
3、CSS優先順序演算法如何計算？
4、CSS3新增偽類有那些？
5、如何居中div？如何居中一個浮動元素？如何讓絕對定位的div居中？
6、display有哪些值？說明他們的作用。
7、position的值relative和absolute定位原點是？
8、CSS3有哪些新特性？
9、請解釋一下CSS3的Flexbox（彈性盒布局模型）,以及適用場景？
10、用純CSS創建一個三角形的原理是什麼？
11、一個滿屏 品 字布局 如何設計?
三、常見兼容性問題？
1、li與li之間有看不見的空白間隔是什麼原因引起的？有什麼解決辦法？
2、經常遇到的瀏覽器的兼容性有哪些？原因，解決方法是什麼，常用hack的技巧 ？
3、為什麼要初始化CSS樣式。
4、absolute的containing block計算方式跟正常流有什麼不同？
5、CSS里的visibility屬性有個collapse屬性值是幹嘛用的？在不同瀏覽器下以後什麼區別？
6、position跟display、margin collapse、overflow、float這些特性相互疊加後會怎麼樣？
7、對BFC規范(塊級格式化上下文：block formatting context)的理解？
8、CSS權重優先順序是如何計算的？
9、請解釋一下為什麼會出現浮動和什麼時候需要清除浮動？清除浮動的方式
10、移動端的布局用過媒體查詢嗎？
11、使用 CSS 預處理器嗎？喜歡那個？
12、CSS優化、提高性能的方法有哪些？
13、瀏覽器是怎樣解析CSS選擇器的？
14、在網頁中的應該使用奇數還是偶數的字體？為什麼呢？
15、margin和padding分別適合什麼場景使用？
16、抽離樣式模塊怎麼寫，說出思路，有無實踐經驗？[阿里航旅的面試題]
17、元素豎向的百分比設定是相對於容器的高度嗎？
18、全屏滾動的原理是什麼？用到了CSS的那些屬性？
19、什麼是響應式設計？響應式設計的基本原理是什麼？如何兼容低版本的IE？
20、視差滾動效果，如何給每頁做不同的動畫？（回到頂部，向下滑動要再次出現，和只出現一次分別怎麼做？）
21、::before 和 :after中雙冒號和單冒號 有什麼區別？解釋一下這2個偽元素的作用。
22、如何修改chrome記住密碼後自動填充表單的黃色背景 ？
23、你對line-height是如何理解的？
24、設置元素浮動後，該元素的display值是多少？（自動變成display:block）
25、怎麼讓Chrome支持小於12px 的文字？
26、讓頁面里的字體變清晰，變細用CSS怎麼做？（-webkit-font-smoothing: antialiased;）
27、font-style屬性可以讓它賦值為「oblique」 oblique是什麼意思？
28、position:fixed;在android下無效怎麼處理？
29、如果需要手動寫動畫，你認為最小時間間隔是多久，為什麼？（阿里）
30、display:inline-block 什麼時候會顯示間隙？(攜程)
31、overflow: scroll時不能平滑滾動的問題怎麼處理？
32、有一個高度自適應的div，裡面有兩個div，一個高度100px，希望另一個填滿剩下的高度。
33、png、jpg、gif 這些圖片格式解釋一下，分別什麼時候用。有沒有了解過webp？
34、什麼是Cookie 隔離？（或者說：請求資源的時候不要讓它帶cookie怎麼做）
35、style標簽寫在body後與body前有什麼區別？
四、JavaScript
1、介紹JavaScript的基本數據類型。
2、說說寫JavaScript的基本規范？
3、JavaScript原型，原型鏈 ? 有什麼特點？
4、JavaScript有幾種類型的值？（堆：原始數據類型和 棧：引用數據類型），你能畫一下他們的內存圖嗎？
5、Javascript如何實現繼承？
6、Javascript創建對象的幾種方式？
7、Javascript作用鏈域?
8、談談This對象的理解。
9、eval是做什麼的？
10、什麼是window對象? 什麼是document對象?
11、null，undefined的區別？
12、寫一個通用的事件偵聽器函數(機試題)。
13、[「1」, 「2」, 「3」].map(parseInt) 答案是多少？
14、關於事件，IE與火狐的事件機制有什麼區別？ 如何阻止冒泡？
15、什麼是閉包（closure），為什麼要用它？
16、javascript 代碼中的」use strict」;是什麼意思 ? 使用它區別是什麼？
17、如何判斷一個對象是否屬於某個類？
18、new操作符具體幹了什麼呢?
19、用原生JavaScript的實現過什麼功能嗎？
20、Javascript中，有一個函數，執行時對象查找時，永遠不會去查找原型，這個函數是？
21、對JSON的了解？
22、[].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16) }) 能解釋一下這段代碼的意思嗎？
23、js延遲載入的方式有哪些？
24、Ajax 是什麼? 如何創建一個Ajax？
25、同步和非同步的區別?
26、如何解決跨域問題?
27、頁面編碼和被請求的資源編碼如果不一致如何處理？
28、模塊化開發怎麼做？
29、AMD（Moles/Asynchronous-Definition）、CMD（Common MoleDefinition）規范區別？
30、requireJS的核心原理是什麼？（如何動態載入的？如何避免多次載入的？如何 緩存的？）
31、讓你自己設計實現一個requireJS，你會怎麼做？
32、談一談你對ECMAScript6的了解？
33、ECMAScript6 怎麼寫class么，為什麼會出現class這種東西?
34、非同步載入的方式有哪些？
35、documen.write和 innerHTML的區別?
36、DOM操作——怎樣添加、移除、移動、復制、創建和查找節點?
37、.call() 和 .apply() 的含義和區別？
38、數組和對象有哪些原生方法，列舉一下？
39、JS 怎麼實現一個類。怎麼實例化這個類
40、JavaScript中的作用域與變數聲明提升？
41、如何編寫高性能的Javascript？
42、那些操作會造成內存泄漏？
43、JQuery的源碼看過嗎？能不能簡單概況一下它的實現原理？
44、jQuery.fn的init方法返回的this指的是什麼對象？為什麼要返回this？
45、jquery中如何將數組轉化為json字元串，然後再轉化回來？
46、jQuery 的屬性拷貝(extend)的實現原理是什麼，如何實現深拷貝？
47、jquery.extend 與 jquery.fn.extend的區別？
48、jQuery 的隊列是如何實現的？隊列可以用在哪些地方？
49、談一下Jquery中的bind(),live(),delegate(),on()的區別？
50、JQuery一個對象可以同時綁定多個事件，這是如何實現的？
51、是否知道自定義事件。jQuery里的fire函數是什麼意思，什麼時候用？
52、jQuery 是通過哪個方法和 Sizzle 選擇器結合的？（jQuery.fn.find()進入Sizzle）
53、針對 jQuery性能的優化方法？
54、Jquery與jQuery UI有啥區別？
55、JQuery的源碼看過嗎？能不能簡單說一下它的實現原理？
56、jquery 中如何將數組轉化為json字元串，然後再轉化回來？
57、jQuery和Zepto的區別？各自的使用場景？
58、針對 jQuery 的優化方法？
59、Zepto的點透問題如何解決？
60、jQueryUI如何自定義組件?
61、需求：實現一個頁面操作不會整頁刷新的網站，並且能在瀏覽器前進、後退時正確響應。給出你的技術實現方案？
62、如何判斷當前腳本運行在瀏覽器還是node環境中？（阿里）
63、移動端最小觸控區域是多大？
64、jQuery 的 slideUp動畫 ，如果目標元素是被外部事件驅動, 當滑鼠快速地連續觸發外部元素事件, 動畫會滯後的反復執行，該如何處理呢?
65、把 Script 標簽 放在頁面的最底部的body封閉之前 和封閉之後有什麼區別？瀏覽器會如何解析它們？
66、移動端的點擊事件的有延遲，時間是多久，為什麼會有？ 怎麼解決這個延時？（click 有 300ms 延遲,為了實現safari的雙擊事件的設計，瀏覽器要知道你是不是要雙擊操作。）
67、知道各種JS框架(Angular, Backbone, Ember, React, Meteor, Knockout…)么? 能講出他們各自的優點和缺點么?
68、Underscore 對哪些 JS 原生對象進行了擴展以及提供了哪些好用的函數方法？
69、解釋JavaScript中的作用域與變數聲明提升？
70、那些操作會造成內存泄漏？
71、JQuery一個對象可以同時綁定多個事件，這是如何實現的？
72、Node.js的適用場景？
(如果會用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering么?
73、解釋一下 Backbone 的 MVC 實現方式？
74、什麼是「前端路由」?什麼時候適合使用「前端路由」? 「前端路由」有哪些優點和缺點?
75、知道什麼是webkit么? 知道怎麼用瀏覽器的各種工具來調試和debug代碼么?
76、如何測試前端代碼么? 知道BDD, TDD, Unit Test么? 知道怎麼測試你的前端工程么(mocha, sinon, jasmin, qUnit..)?
77、前端templating(Mustache, underscore, handlebars)是幹嘛的, 怎麼用?
78、簡述一下 Handlebars 的基本用法？
79、簡述一下 Handlerbars 的對模板的基本處理流程， 如何編譯的？如何緩存的？
80、用js實現千位分隔符?(來源：前端農民工，提示：正則+replace)
檢測瀏覽器版本版本有哪些方式？
81、我們給一個dom同時綁定兩個點擊事件，一個用捕獲，一個用冒泡，你來說下會執行幾次事件，然後會先執行冒泡還是捕獲
C. 你遇到的前端面試題都有什麼
大家好，我是王我。
隨著春節的結束，各個行業也普遍開始了上班的節奏， 不過本人17號才上班。為什麼？因為長得帥的都上班比較晚。 當然，每到新年結束，又迎來了一批招聘者與面試者，我來說說作為一年工作經驗應該知道的面試題。
HTML篇
1.doctype是什麼？有哪些類型？
2.input有哪些新類型？簡要說明其8用法。
3.HTML5有哪些新特性，移除了哪些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區分HTML和HTML5？
4.bootstrap響應式的原理是什麼？
5.多移動終端頁面適配是如何實現的？
CSS篇
1.如何實現兩列布局，左邊自適應，右邊固定寬度？
2.用CSS畫一個三角形
3.CSS實現字體大寫
4.display有哪些常用的屬性值？分別是什麼意思？
5.position為absolute，relative，fixed的定點位置
6.用三種方法清除浮動
7.請介紹一下margin塌陷問題
js篇
1.什麼是事件冒泡和捕獲？如何阻止事件冒泡？(分別用原生和jquery實現)
2.js創建對象，至少使用三種方法
3.簡述一下事件穿透以及解決辦法
4.用三種方式判斷變數類型是否是數組
5.如何實現對象的拷貝？
6.什麼是閉包？閉包的優缺點。
7.簡述一下ajax請求的過程。
8.簡述一下new一個人構造函數的人過程。
9.為什麼會有跨域？是怎麼解決跨域問題的？簡述一下原理。
10.js原始數據類型有哪些？
11.學一個函數，判斷一個變數是否是字元串
12.typeof有哪些結果？
13.剪頭函數和普通函數有什麼區別？
14.請用三種方法實現數組去重
15.href和src有什麼區別？
jquery篇
1.attr()和prop()有什麼區別？
2.on和bind有什麼區別？js動態添加的dom元素是通過on還是bind？
3.touch和click有什麼區別？
4.window.onload和jquery的ready有什麼區別？
vue篇
1.簡述一下vue的生命周期及其特點
2.vue雙向綁定的原理是什麼？
3.vue的特點有哪些？和jquery有什麼區別？
4.父子組件之間傳遞數據的方法
5.子組件如何共享數據？
6.一般有什麼工具進行數據交互？
7.webpack的原理是什麼？
8.簡述一下$nextTick的用法
瀏覽器篇
1.cookie、sessionStorage、localStorage的區別是什麼？
2.有用過瀏覽器緩存嗎？簡述一下基本的緩存機制
網路篇
1.http和https之間的區別
2.從伺服器的安全考慮，是使用get請求還是post請求？
3.URL請求的過程有哪些？
項目經驗篇
1.項目中遇到的最大挑戰以及解決辦法
2.常見的網頁優化有哪些？
作為一個面試一年以內工作經驗的前端程序員來說，以上的問題能夠倒答如流月薪6k應該不成問題啦。這些面試題也是我在很多面試中感覺經常被問到的題目。
希望大家年後找工作能夠順順利利， 千萬不要跟我一樣哦，只有帥氣就一無所有了。
大家好，我是王我，中國最帥的前端程序員。
前幾次都是各種培訓公司，各種忽悠就不提了，說說後面4次面試的經歷。
第一次是面一個小公司，不過他們好像沒有厲害的前端，來面我的是個後端，一來沒有問我關於js的知識，直接問我以前做過什麼，有沒有經驗，我本人不會吹牛，簡歷也沒怎麼包裝，就是自己把自學的知識和做的幾個小demo弄在上面，也用github掛在頁面上了，不過他根本不點開看，也不問，問我會不會vue，我當時對框架還不了解，他就說他們需要能直接上手開始寫的，所以我第一個就直接掛了。
第二次面試是一個國企，這個問了很多問題，都很基礎，js數據類型，數組操作，事件，大概就是高程的前面幾章看看就差不多都能答到，然後因為他們主要用jq，所以問了很多jq的操作，關於節點的，動畫的，我看鋒利的jq大概看了3遍，也練過多次，所以我答的很熟。然後問了些布局方面的，bootstrap我了解過，又看過css3，所以這方面也沒啥問題，最後在現場做了個題目，主要就是布局然後通過ajax呈現數據。後面聽介紹我面試的說面試官比較滿意，說我jq很熟，一面就過了。可惜後面電話面試不知怎麼回事可能表現的不夠自信，雖然沒問技術，但是我沒啥自信，把沒項目經驗什麼的也不知怎麼就一五一十交代了，估計因為這個掛掉了。
第三次沒問問題，直接就是一套題開做，我在那做了一個多小時。題目就是按照要求一步一步做一個頁面出來，我也搞忘了我當時卡在哪個地方了，坐在那得時候就是做不出來，沒有設計圖，要根據他的描述自己找個設計圖然後做，我第一次遇到這個有點懵，雖然當時沒做出來，不過回來我自己花了幾個小時把它做了。所以這個也是涼了。
第四個問的比較多，數據類型，數組操作，跨域，ajax，閉包，原型鏈，繼承，深拷貝，淺拷貝，模塊amd cmd，基本都是問的js。然後問了html5的新特性 css3 的新特性，遇到過什麼瀏覽器的兼容性問題，怎麼解決的，以後想往什麼方面發展。這個時候我已經會點vue了，照著做了個小demo，不過後來知道公司用的angularjs，面試官也沒看我做的，問也沒問。。以前聽網上說要帶上自己的項目去面試感覺沒起多大效果。
最後總結下如果面的比較初級的崗位，應該主要問js，原型鏈，繼承，閉包，深淺拷貝，ajax，跨域，然後js的基礎知識，對了還有apply和call也問了，html5的新特性了解下就行。主要就是看你js掌握的程度，如果稍微要求高一點的，暫時還沒面過，等以後面過在來回答
1. cookie session 的用途和區別，以及有效期
1、cookie數據存放在客戶的瀏覽器上，session數據放在伺服器上。
2、cookie不是很安全，別人可以分析存放在本地的COOKIE並進行COOKIE欺騙
考慮到安全應當使用session。
3、session會在一定時間內保存在伺服器上。當訪問增多，會比較佔用你伺服器的性能
考慮到減輕伺服器性能方面，應當使用COOKIE。
4、單個cookie保存的數據不能超過4K，很多瀏覽器都限制一個站點最多保存20個cookie。
2. vue的數據綁定原理，mvvm與mvc的區別
MVVM：
m:model數據模型層 v:view視圖層 vm:ViewModel
vue中採用的是mvvm模式，這是從mvc衍生過來的
MVVM讓視圖與viewmodel直接的關系特別的緊密，就是為了解決mvc反饋不及時的問題
圖片說明一下：
說到MVVM就要說一下雙向綁定和數據劫持的原理，
MVC：
m:model數據模型層 v:view視圖層 c:controller控制器
原理： c層需要控制model層的數據在view層進行顯示
MVC兩種方式，圖片說明：
總結：
mvvm與mvc最大的區別：
MVVM實現了view與model的自動同步，也就是model屬性改變的時候， 我們不需要再自己手動操作dom元素去改變view的顯示，而是改變屬性後該屬性對應的view層會自動改變。
不懂得可以復制鏈接查看：
https://www.pianshen.com/article/3716256399/
3. storage 的區別 sessionStorage localStorage
localStorage 的生命周期是永久性的。假若使用localStorage存儲數據，即使關閉瀏覽器，也不會讓數據消失，除非主動的去刪除數據，使用的方法如上所示。localStorage有length屬性
sessionStorage 的生命周期是在瀏覽器關閉前。也就是說，在整個瀏覽器未關閉前，其數據一直都是存在的。sessionStorage也有length屬性，其基本的判斷和使用方法和localStorage的使用是一致的
有一個文本框 通過v-bind綁定了value屬性 值為myname 是我們在vue實例中定義的屬性
傳統我們獲取文本框值方法 可能通過getElementById找到文本框 然後獲取其value屬性
但是vue中直接通過v-bind綁定了value屬性 所以不需要像之前那樣獲取值
所以在後面的按鈕中獲取name值 直接獲取vue實例對象data裡面的myname屬性即可
【數據為尊 ----數據映射到瀏覽器 如果數據v-model後修改（肯定input）然後到數據在有數據映射到瀏覽器頁面 ----映射關系統稱】
緩存路由組件
使用的是vue的一個組件，參考vue的官方文檔
使用這個東西可以保證我們在切換組件的時候，原來顯示的組件不被銷毀
-----【保障組件的數據不會被切換路由而銷毀數據】
Home是對應的組件對象的名字，不是路由的名字
6.多維數組拍平
數組拍平也稱數組扁平化，就是將數組裡面的數組打開，最後合並為一個數組
一紅六種方法吧……
了解的請看： https://www.cnblogs.com/guan-shan/p/10165737.html
7.跨域的原因 解決方案
跨域是指一個域下的文檔或腳本試圖去請求另一個域下的資源，這里跨域是廣義的。
這樣就可以說同源策略----協議---埠---域名
原生的src和href可以解決跨域
代理可以解決
請求頭也可以攜帶瀏覽器提示的也可以解決
一般都是後端解決跨域問題
【別的需要了解看下方鏈接】
https://blog.csdn.net/qq_41604383/article/details/100770100
8.uniApp兼容問題§ 如果你使用cli創建項目（即項目根目錄是package.json），不管用什麼ide，即便是用HBuilderX，切記cli項目的編譯器是在項目下的，HBuilderX不管怎麼升級都不會影響編譯器版本。你需要手動npm update來升級編譯器。以及如果你想要安裝less、scss等預編譯器，也需要自己npm安裝在項目下，而不是在HBuilderX的插件管理里安裝。
§ 如果你使用離線打包，請注意HBuilderX升級後，真機運行基座和雲打包對應引擎跟隨HBuilderX升級，而你的sdk需要手動升級。sdk的版本升級一般滯後HBuilderX正式版升級一兩天。
§ 如果你使用自定義基座，之前製作的自定義基座是不會跟隨HBuilderX升級的，升級HBuilderX後你應該重新製作新版自定義基座。
§ 如果你使用wgt升級，新版HBuilderX編譯的wgt，運行到之前的runtime上，一定要先測試好，看有沒有兼容性問題。如果有問題，就不要wgt升級，整包升級。
§ 考慮到向下兼容，uni-app編譯器在升級為新的自定義組件模式後，同時保留了對老編譯模式的向下兼容。
在HBuilderX alpha版中，App端一定會使用新編譯器，不理會manifest配置。
在HBuilderX 正式版中，新創建的項目會使用新編譯器，老項目不會強制使用，而是開發者自己在manifest里配置開啟。
§ 如果你使用其他ide開發uni-app，會經常因為拼錯單詞而運行失敗，因為經過webpack編譯一道，很多錯誤反應的不夠直觀，排錯時間很長，不如從開始就依賴有良好提示的HBuilderX，避免敲錯單詞。
§ 雲打包的引擎版本說明
HBuilderX Alpha，只有1套雲打包機，不管你的HBuilderX alpha版本多少，對應的打包機一定是最新的alpha版的客戶端引擎。
HBuilderX正式版，有2套打包機，一個是最新正式版，一個是次新正式版。
中間的緊急更新版本沒有獨立打包機。
舉個例子：
HBuilderX 有1.8.0、1.8.1、1.8.2、1.9.0、1.9.1這幾個正式版。
那麼當前可用的打包機有1.9.1和1.8.2這2台。（即每個大版本的最後一個版本）
除了這2個HBuilderX版本外，其他版本的雲打包都指向最新的1.9.1版對應的打包機。（即只保留2個大版本的雲打包機）
【詳情請看】
https://ask.dcloud.net.cn/article/35845
一、HTML
HTML書寫規范
H5新增標簽
HTML渲染過程
二、CSS
css盒子模型概念
css彈性布局概念
三、JavaScript
事件模型
DOM2級事件模型
閉包
原型鏈
四、移動Web開發
常見的布局方案
移動端前端常見的觸摸相關事件touch、tap、swipe等整理
移動端前端手勢事件
移動端頁面渲染優化
GPU渲染
GPU核心渲染過程
五、調試
常用的調試工具
Chrome控制台調試js使用
移動端測試
六、HTTP網路知識
常見的HTTP狀態碼
不同請求類型的區別
WEB緩存方案
——————————
牛客網（www.nowcoder.com）
- 專業IT筆試面試備考平台
- 最全C++JAVA前端等互聯網技術求職題庫
- 全面提升IT編程能力
- 程序員交友聖地
分享了一些Web前端的面試題，限時一小時，你看看自己能夠答出多少道！
放心，這些面試題都是一些非常基礎的知識，只要你在平時認真聽課、學習了，那麼這些面試題肯定不會難道你。
建議：雖然沒有人監督你，但還是希望你不要去尋找答案，脫離網路，拿起紙筆，你試一下自己究竟能夠答出個什麼水平！有沒有真本領？答案盡在這些面試題里！那麼，你准備好了嗎？OK！計時開始！
一、HTML常見題目01、Doctype作用？嚴格模式與混雜模式如何區分？它們有何意義？
02、HTML5為什麼只需要寫？
03、行內元素有哪些？塊級元素有哪些？空(void)元素有那些？
04、頁面導入樣式時，使用link和@import有什麼區別？
05、介紹一下你對瀏覽器內核的理解？
06、常見的瀏覽器內核有哪些？
07、html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？
08、如何區分HTML和HTML5？
09、簡述一下你對HTML語義化的理解？
10、HTML5的離線儲存怎麼使用，工作原理能不能解釋一下？
二、CSS類的題目01、介紹一下標準的CSS的盒子模型？與低版本IE的盒子模型有什麼不同的？
02、CSS選擇符有哪些？哪些屬性可以繼承？
03、CSS優先順序演算法如何計算？
04、CSS3新增偽類有那些？
05、如何居中p？如何居中一個浮動元素？如何讓絕對定位的p居中？
06、display有哪些值？說明他們的作用。
07、position的值relative和absolute定位原點是？
08、CSS3有哪些新特性？
09、請解釋一下CSS3的Flexbox(彈性盒布局模型),以及適用場景？
10、用純CSS創建一個三角形的原理是什麼？
三、Java類的題目
01、介紹Java的基本數據類型。
02、說說寫Java的基本規范？
03、Java原型，原型鏈？有什麼特點？
04、Java有幾種類型的值？(堆：原始數據類型和棧：引用數據類型)，你能畫一下他們的內存圖嗎？
05、Java如何實現繼承？
06、Java創建對象的幾種方式？
07、Java作用鏈域？
08、談談This對象的理解。
09、eval是做什麼的？
10、什麼是window對象？什麼是document對象？
OK，一小時到了，這個時間可不算短了，那麼這些面試題你答出了幾道呢？你寫的答案正確了嗎？現在你可以去翻看答案了。
如果你答出了絕大多數的或者是全部的題，並且答案也正確了，那麼恭喜你……
你這時心裡是不是有點小竊喜，認為自己有能力拿高薪了？雖然我也很想這么告訴你，但事實上這只能表明你的基礎扎實，畢竟這只是一些非常基礎的面試題。騷年~繼續努力吧！
如果你只答出了小部分或者答出了大部分題但答案不正確，那麼我只想說：「騷年，你的水平還差的遠呢。」連這么基礎的題你都打不出來，還想拿高薪？回去再練一段時間吧！
扎實的基礎是你拿高薪的重要武器，如果你連基礎都不扎實，那麼想要攻克「高薪」這個厚實的堡壘，那隻是痴人說夢罷了。
1.前端框架類問題，問你會不會用vue react啊
2.語言類，問你一些JavaScript語言的問題
3.項目經驗，讓你講講做過的項目，遇到的問題和解決之道
D. 有哪些經典的前端開發面試題及答案解析
行元素與塊元素的區別；
如何清除浮動；
定位方式當中，absolute與fixed、relative的區別；
事件的兼容問題；
Ajax是什麼；
如何優化你的頁面；
響應式布局是什麼等等。
經典的前端面試題至少有近百道，在這里也沒辦法全部給你列出來，你可以看看這個（小-程序），裡面有好幾百道面試真題，也有比較好的答案解析。
E. 前端面試會提問到哪些
在面試前端的過程中，有些問題是經常會被提問到的
一、基礎篇
1. 在不使用第三個變數的情況下，如何調換a與b的值？
2. px與em的區別
3. 簡述一下盒模型
4. 頁面導入樣式時，使用link和@import有什麼區別？
5. 簡述一下事件代理
二、HTML常見題目
01、Doctype作用？嚴格模式與混雜模式如何區分？它們有何意義？
02、HTML5為什麼只需要寫？
03、行內元素有哪些？塊級元素有哪些？空(void)元素有哪些？
04、頁面導入樣式時，使用link和@import有什麼區別？
05、介紹一下你對瀏覽器內核的理解？
06、常見的瀏覽器內核有哪些？
07、html5有哪些新特性、移除了哪些元素？如何處理HTML5新標簽的瀏覽器兼容問題？
08、如何區分HTML和HTML5？
09、簡述一下你對HTML語義化的理解？
10、HTML5的離線儲存怎麼使用，工作原理能不能解釋一下？
三、CSS類的題目
01、介紹一下標準的CSS的盒子模型？與低版本IE的盒子模型有什麼不同的？
02、CSS選擇符有哪些？哪些屬性可以繼承？
03、CSS優先順序演算法如何計算？
04、CSS3新增偽類有哪些？
05、如何居中div？如何居中一個浮動元素？如何讓絕對定位的div居中？
06、display有哪些值？說明他們的作用。
07、position的值relative和absolute定位原點是？
08、CSS3有哪些新特性？
09、請解釋一下CSS3的Flexbox(彈性盒布局模型),以及適用場景？
10、用純CSS創建一個三角形的原理是什麼？
四、JavaScript類的題目
01、JavaScript中this是如何工作的
02、請解釋原型繼承的原理。
03、什麼是閉包(closure)，如何使用它，為什麼要使用它？
04、.call 和.apply的區別是什麼？
05、請指出JavaScript 宿主對象(host objects) 和原生對象(native objects) 的區別？
06、請指出以下代碼的區別：function Person(){}、var person = Person()、var person = new Person()？
07、請解釋變數聲明提升(hoisting)。
08、什麼是 「use strict」; ？ 使用它的好處和壞處分別是什麼？
09、什麼是事件循環 (event loop)？
10、請解釋同步 (synchronous) 和非同步 (asynchronous) 函數的區別。
五、開發及性能優化類題目
01、如何規避javascript多人開發函數重名問題？
02、請說出三種減低頁面載入時間的方法.
03、說說你所了解到的Web攻擊技術。
04、說說你說了解的前端性能優化方法？
05、前端開發中，如何優化圖像？圖像格式的區別？
06、瀏覽器是如何渲染頁面的？
07、頁面重構怎麼操作？
08、什麼叫優雅降級和漸進增強？
09、前端需要注意哪些SEO？如何做SEO優化？
10、平時如何管理你的項目？
F. WEB前端面試題
第二章 面試題基礎篇
2.1 HTML面試題
面試題：行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
面試題：頁面導入樣式時，使用link和@import有什麼區別？
面試題：title與h1的區別、b與strong的區別、i與em的區別？
面試題：img標簽的title和alt有什麼區別？
面試題：png、jpg、gif 這些圖片格式解釋一下，分別什麼時候用？
2.2 CSS面試題
面試題：css背景紋路
面試題：介紹一下CSS的盒子模型
面試題：CSS選擇符有哪些？哪些屬性可以繼承？
面試題：CSS優先順序演算法如何計算？
面試題：用CSS畫一個三角形
面試題：一個盒子不給寬度和高度如何水平垂直居中？
面試題：display有哪些值？說明他們的作用。
面試題：對BFC規范(塊級格式化上下文：block formatting context)的理解？
面試題：清除浮動有哪些方式？
面試題：在網頁中的應該使用奇數還是偶數的字體？為什麼呢？
面試題：寫一個左中右布局占滿屏幕，其中左、右倆塊固定寬200，中間自適應寬，要求先載入中間塊，請寫出結構及樣式。
面試題：什麼是CSS reset？
面試題：css sprite是什麼,有什麼優缺點
面試題：display: none;與visibility: hidden;的區別
面試題：position有哪些值?有什麼作用? 【特別多公司問】
面試題：line-height和height有什麼區別？
面試題：opacity 和 rgba區別
2.3 JavaScript基礎面試題
面試題：延遲載入JS有哪些方式？
面試題：JS數據類型有哪些？
面試題：null和undefined的區別
面試題：JS數據類型考題
面試題：==和===有什麼不同
面試題：JS微任務和宏任務
面試題：JS作用域考題
面試題：JS對象考題
面試題：JS作用域+this指向+原型 考題
面試題：JS判斷變數是不是數組，你能寫出哪些方法？
面試題：slice是幹嘛的、splice是否會改變原數組
面試題：JS數組去重
面試題：找出多維數組最大值
面試題：給字元串新增方法實現功能
面試題：找出字元串出現最多次數的字元以及次數
2.4 真正移動端 —— H5/C3面試題
面試題：什麼是語義化標簽
面試題：::before 和 :after中雙冒號和單冒號 有什麼區別？解釋一下這2個偽元素的作用。
面試題：如何關閉iOS鍵盤首字母自動大寫
面試題：怎麼讓Chrome支持小於12px 的文字？
面試題：rem和em有什麼樣區別
面試題：ios系統中元素被觸摸時產生的半透明灰色遮罩怎麼去掉
面試題：webkit表單輸入框placeholder的顏色值能改變嗎？
面試題：禁止ios 長按時不觸發系統的菜單，禁止ios&android長按時下載圖片
面試題：禁止ios和android用戶選中文字
面試題：自適應 [淘寶無線適配]
面試題：響應式
第三章 面試題進階篇
3.1 JavaScript進階面試題
面試題：new操作符具體做了什麼
面試題：閉包 【必須會】
面試題：原型鏈 【必須會】
面試題： JS繼承有哪些方式
面試題：說一下call、apply、bind區別
面試題：sort背後原理是什麼？
面試題：深拷貝和淺拷貝
面試題：localstorage、sessionstorage、cookie的區別
3.2 ES6面試題
面試題：var、let、const區別
面試題：作用域考題
面試題：將下列對象進行合並
面試題：箭頭函數和普通函數有什麼區別？
面試題：Promise有幾種狀態
面試題：find和filter的區別 【大廠】
面試題：some和every的區別 【大廠】
3.3 webpack面試題
面試題：webpack插件
3.4 Git面試題
面試題：git常用命令
面試題：解決沖突
面試題：GitFlow
第四章 面試題框架篇
4.1 區分初中高級的 —— Vue面試題
面試題：Vue2.x 生命周期有哪些？
1.系統自帶八個
2.當一旦進入到某個組件會執行哪些生命周期
3.$el和$data在哪個階段有
4.如果使用keep-alive會多倆個生命周期
5.如果加入keep-alive第一次進入組件會執行哪些生命周期
6.如果加入keep-alive第二次或者第N進入該組件會執行哪些生命周期
面試題：談談你對keep-alive的了解
面試題：v-if和v-show區別
面試題：v-if和v-for優先順序 2.x
面試題：ref是什麼？
面試題：nextTick是什麼？
面試題：Vue中如何做樣式穿透
面試題：scoped原理
面試題：Vuex是單向數據流還是雙向數據流？
面試題：講一下MVVM
面試題：雙向綁定原理
面試題：什麼是虛擬DOM
面試題：key是干什麼？
面試題：diff演算法
面試題：Vue組件傳值
面試題：props和data優先順序誰高？
面試題：computed、methods、watch有什麼區別？
面試題：Vuex
面試題：Vue路由
面試題：Vue項目打包後出現空白頁
4.2 微信小程序面試題
面試題：如何自定義頭部？
面試題：如何自定義底部？
4.3 uni-app面試題
面試題：生命周期
面試題：條件編譯
第五章 面試題性能優化篇
G. 2020年Web前端面試題匯總(一)
今天小編要跟大家分享的文章是關於2020年Web前端面試題匯總。由於內容較多小編分開為大家介紹，今天首先來和小編一起看一看第一部分的內容，希望這些面試題能夠對正准備找Web前端相關工作的小夥伴們有所幫助。
1.說幾條寫JavaScript的基本規范?
1)不要在同一行聲明多個變數;
2)請使用===/!==來比較true/false或者數值;
3)使用對象字面量替代newObject這種形式;
4)減少使用全局函數,全局變數;
5)switch語句必須帶有default分支;
6)if語句必須使用大括弧;
7)for-in循環中的變數;
應該使用var關鍵字明確限定作用域;
從而避免作用域全局污染。
2.說說平衡二叉樹?
平衡二叉搜索樹(Self-balancingbinarysearchtree)
又被稱為AVL樹。
具有以下渣瞎性質：
1)它是一棵空樹或它的左右兩個子樹
的高度差的絕對值不超過1，
並且左右兩個子樹都是一棵平衡二叉樹。
2)平衡二叉樹必定是二叉搜索樹，反之則不一定。
3)平衡二叉樹的常用實現方法有紅黑樹、AVL、
替罪羊樹、Treap、伸展樹等。
最小二叉平衡樹的節點的公式如下：
F(n)=F(n-1)+F(n-2)+1備註：1是根節點，
F(n-1)是左子樹的節點數量，
F(n-2)是右子樹的節點數量。
3.清除浮動和解決垂直外邊距重疊的解決方案?
問題描述:
1)父元素沒有設置寬高，尺寸由子元素撐起;
子元素一旦浮動，父元素高度會發生塌陷。
2)子元素設置margin-top會作用的父元素的margin-top;
此時會造成垂直外邊距重疊。
.clearfix::after,.clearfix::before{
content:''
display:table;
clear:both;
}
4.sessionStorage、localStorage和cookie?
相同點:
都用於瀏覽器端存儲的緩存數據;
不同點:
1)存儲內容是否發送到伺服器端
當設置了Cookie後，數據會發送到伺服器端，
造成一定的寬頻浪費;xxxstorage則會將數據保存
到本地，不會造成寬頻浪費;
2)數據存儲大小不同
Cookie數據不能超過4K，適用於會話標識;
xxxstorage數據存儲可以達到5M;
3)數據存儲的有效期限不同
cookie只在設置了Cookid過期時間
之前一直有效，即使關閉窗口或者瀏覽器;
sessionStorage,僅在關閉瀏覽器之前有效;
localStorage,數據存儲永久有效;
4)作用域不同
cookie和localStorage是在同源同窗口中
都是共享的;
sessionStorage不在不同的瀏覽器窗口
中共享，即使是同一個頁面;
5.判斷一個單詞是否是迴文?
迴文是指把相同的詞彙或句子，
在下文中調換位置或顛倒過來，
產生首尾回環的情景，
叫做迴文，也叫回環。
比如cacac，redivider。
letcheckPalindrom=(str)=>{
returnstr===
str.split('').reverse().join('');
}
6.不藉助臨時變數，進行兩個整數的交換?
輸入a=3,b=1,
輸出a=1,b=3
letswap=(a,b)=>{
b=b-a;
a=a+b;
b=a-b;
return[a,b];
}
7.請寫如蘆空出至少5個html5新增的標簽，並說明其語義和應用場景?
section：定義文檔中的一個章節;
nav：定義只包含導航鏈接的章節;
header：定義頁面或章節的頭部;
它經常包含logo、頁面標題和導航性的目錄。
footer：定義頁面或章節的尾部;
它經常包含版權信息、法律信息鏈接和反饋建議用的地址。
aside：定義和頁面內容關聯度較低的內容，
如果被刪除，剩下的內容仍然很合理。
8.get和post請求在緩存方面的區別?
get請求類似於查找的過程，用戶獲取數據，
可以不用每次都與資料庫連接，所以可以使用緩存。
post不同，post做的一般是修改和刪除的工作，
所以必須與資料庫交互，所以不能使用緩存。
因此get請求適合於請求緩存。
9.如嘩漏何解決非同步回調地獄?
promise、generator、async/await
10.圖片的懶載入和預載入?
預載入：提前載入圖片，
當用戶需要查看時可直接
從本地緩存中渲染。
懶載入：懶載入的主要目的
是作為伺服器前端的優化，
減少請求數或延遲請求數。
兩種技術的本質：
兩者的行為是相反的，
一個是提前載入，
一個是遲緩甚至不載入。
懶載入對伺服器前端有一定
的緩解壓力作用，
預載入則會增加伺服器前端壓力。
11.bind，apply，call的區別?
通過apply和call改變函數的this指向，
這兩個函數的第一個參數都是一樣的，
表示要改變指向的那個對象，
第二個參數，apply是數組，
而call則是arg1,arg2...這種形式。
通過bind改變this作用域
會返回一個新的函數，
這個函數不會馬上執行。
12.js怎麼控制一次載入一張圖片，載入完後再載入下一張?
方法一:
varobj=newImage();
obj.src="#/21.jpg";
obj.onload=function(){
document.getElementById("pic")
.innnerHTML="
}
H. 前端經典面試題(60道前端面試題包含JS、CSS、React、瀏覽器等)
防抖
節流
誤區：我們經常說get請求參數的大小存在限制，而post請求的參數大小是無限制的。
實際上HTTP 協議從未規定 GET/POST 的請求長度限制是多少。對get請求參數的限制是來源與瀏覽器或web伺服器，瀏覽器或web伺服器限制了url的長度。為了明確這個概念，我們必須再次強調下面幾點:
補充補充一個get和post在緩存方面的區別：
可從IIFE、AMD、CMD、CommonJS、UMD、webpack(require.ensure)、ES Mole、
vue和react都是採用diff演算法來對比新舊虛擬節點，從而更新節點。在vue的diff函數中（建議先了解一下diff演算法過程）。在交叉對比中，當新節點跟舊節點 頭尾交叉對比 沒有結果時，會根據新節點的key去對比舊節點數組中的key，從而找到相應舊節點（這里對應的是一個key => index 的map映射）。如果沒找到就認為是一個新增節點。而如果沒有key，那麼就會採用遍歷查找的方式去找到對應的舊節點。一種一個map映射，另一種是遍歷查找。相比而言。map映射的速度更快。vue部分源碼如下：
創建map函數
遍歷尋找
在React中， 如果是由React引發的事件處理（比如通過onClick引發的事件處理），調用setState不會同步更新this.state，除此之外的setState調用會同步執行this.state 。所謂「除此之外」，指的是繞過React通過addEventListener直接添加的事件處理函數，還有通過setTimeout/setInterval產生的非同步調用。
**原因：**在React的setState函數實現中，會根據一個變數isBatchingUpdates判斷是直接更新this.state還是放到隊列中回頭再說，而isBatchingUpdates默認是false，也就表示setState會同步更新this.state，但是， 有一個函數batchedUpdates，這個函數會把isBatchingUpdates修改為true，而當React在調用事件處理函數之前就會調用這個batchedUpdates，造成的後果，就是由React控制的事件處理過程setState不會同步更新this.state 。
虛擬dom相當於在js和真實dom中間加了一個緩存，利用dom diff演算法避免了沒有必要的dom操作，從而提高性能。
具體實現步驟如下：
用 JavaScript 對象結構表示 DOM 樹的結構；然後用這個樹構建一個真正的 DOM 樹，插到文檔當中
當狀態變更的時候，重新構造一棵新的對象樹。然後用新的樹和舊的樹進行比較，記錄兩棵樹差異
把2所記錄的差異應用到步驟1所構建的真正的DOM樹上，視圖就更新了。
結構：display:none: 會讓元素完全從渲染樹中消失，渲染的時候不佔據任何空間, 不能點擊， visibility: hidden:不會讓元素從渲染樹消失，渲染元素繼續占據空間，只是內容不可見，不能點擊 opacity: 0: 不會讓元素從渲染樹消失，渲染元素繼續占據空間，只是內容不可見，可以點擊
繼承：display: none：是非繼承屬性，子孫節點消失由於元素從渲染樹消失造成，通過修改子孫節點屬性無法顯示。visibility: hidden：是繼承屬性，子孫節點消失由於繼承了hidden，通過設置visibility: visible;可以讓子孫節點顯式。
性能：displaynone : 修改元素會造成文檔迴流,讀屏器不會讀取display: none元素內容，性能消耗較大 visibility:hidden: 修改元素只會造成本元素的重繪,性能消耗較少讀屏器讀取visibility: hidden元素內容 opacity: 0 ：修改元素會造成重繪，性能消耗較少
聯系：它們都能讓元素不可見
常用的一般為三種 .clearfix , clear:both , overflow:hidden ;
比較好是 .clearfix ,偽元素萬金油版本,後兩者有局限性.
clear:both :若是用在同一個容器內相鄰元素上,那是賊好的,有時候在容器外就有些問題了, 比如相鄰容器的包裹層元素塌陷
overflow:hidden :這種若是用在同個容器內,可以形成 BFC 避免浮動造成的元素塌陷
概念：將多個小圖片拼接到一個圖片中。通過 background-position 和元素尺寸調節需要顯示的背景圖案。
優點：
缺點：
block 元素特點：
1.處於常規流中時，如果 width 沒有設置，會自動填充滿父容器 2.可以應用 margin/padding 3.在沒有設置高度的情況下會擴展高度以包含常規流中的子元素 4.處於常規流中時布局時在前後元素位置之間（獨佔一個水平空間） 5.忽略 vertical-align
inline 元素特點
1.水平方向上根據 direction 依次布局
2.不會在元素前後進行換行
3.受 white-space 控制
4. margin/padding 在豎直方向上無效，水平方向上有效
5. width/height 屬性對非替換行內元素無效，寬度由元素內容決定
6.非替換行內元素的行框高由 line-height 確定，替換行內元素的行框高由 height , margin , padding , border 決定 7.浮動或絕對定位時會轉換為 block 8. vertical-align 屬性生效
GIF :
JPEG ：
PNG ：
七種數據類型
(ES6之前)其中5種為基本類型: string , number , boolean , null , undefined ,
ES6出來的 Symbol 也是原始數據類型 ，表示獨一無二的值
Object 為引用類型(范圍挺大),也包括數組、函數,
輸出結果是：
工廠模式
簡單的工廠模式可以理解為解決多個相似的問題;
單例模式
只能被實例化(構造函數給實例添加屬性與方法)一次
沙箱模式
將一些函數放到自執行函數裡面,但要用閉包暴露介面,用變數接收暴露的介面,再調用裡面的值,否則無法使用裡面的值
1.字面量
2.Object構造函數創建
3.使用工廠模式創建對象
4.使用構造函數創建對象
HTML中與javascript交互是通過事件驅動來實現的，例如滑鼠點擊事件onclick、頁面的滾動事件onscroll等等，可以向文檔或者文檔中的元素添加事件偵聽器來預訂事件。想要知道這些事件是在什麼時候進行調用的，就需要了解一下「事件流」的概念。
什麼是事件流：事件流描述的是從頁面中接收事件的順序,DOM2級事件流包括下面幾個階段。
addEventListener ： addEventListener 是DOM2 級事件新增的指定事件處理程序的操作，這個方法接收3個參數：要處理的事件名、作為事件處理程序的函數和一個布爾值。最後這個布爾值參數如果是true，表示在捕獲階段調用事件處理程序；如果是false，表示在冒泡階段調用事件處理程序。
IE只支持事件冒泡 。
獲取一個對象的原型，在chrome中可以通過__proto__的形式，或者在ES6中可以通過Object.getPrototypeOf的形式。
那麼Function.proto是什麼么？也就是說Function由什麼對象繼承而來，我們來做如下判別。
我們發現Function的原型也是Function。
我們用圖可以來明確這個關系：
這里來舉個栗子，以 Object 為例，我們常用的 Object 便是一個構造函數，因此我們可以通過它構建實例。
則此時， 實例為instance , 構造函數為Object ，我們知道，構造函數擁有一個 prototype 的屬性指向原型，因此原型為:
這里我們可以來看出三者的關系:
在 JS 中，繼承通常指的便是 原型鏈繼承 ，也就是通過指定原型，並可以通過原型鏈繼承原型上的屬性或者方法。
在函數式編程中，函數是一等公民。那麼函數柯里化是怎樣的呢？
函數柯里化指的是將能夠接收多個參數的函數轉化為接收單一參數的函數，並且返回接收餘下參數且返回結果的新函數的技術。
函數柯里化的主要作用和特點就是參數復用、提前返回和延遲執行。
在一個函數中，首先填充幾個參數，然後再返回一個新的函數的技術，稱為函數的柯里化。通常可用於在不侵入函數的前提下，為函數 預置通用參數 ，供多次重復調用。
call 和 apply 都是為了解決改變 this 的指向。作用都是相同的，只是傳參的方式不同。
除了第一個參數外， call 可以接收一個參數列表， apply 只接受一個參數數組。
bind 和其他兩個方法作用也是一致的，只是該方法會返回一個函數。並且我們可以通過 bind 實現柯里化。
如何實現一個 bind 函數
對於實現以下幾個函數，可以從幾個方面思考
如何實現一個call函數
如何實現一個apply函數
箭頭函數其實是沒有 this 的，這個函數中的 this 只取決於他外面的第一個不是箭頭函數的函數的 this 。在這個例子中，因為調用 a 符合前面代碼中的第一個情況，所以 this 是 window 。並且 this 一旦綁定了上下文，就不會被任何代碼改變。
關於 let 的是否存在變數提升，我們何以用下面的例子來驗證：
let 變數如果不存在變數提升， console.log(name) 就會輸出 ConardLi ，結果卻拋出了 ReferenceError ，那麼這很好的說明了， let 也存在變數提升，但是它存在一個「暫時死區」，在變數未初始化或賦值前不允許訪問。
變數的賦值可以分為三個階段：
關於 let 、 var 和 function ：
依次輸出：undefined -> 10 -> 20
答案: D
colorChange 方法是靜態的。靜態方法僅在創建它們的構造函數中存在，並且不能傳遞給任何子級。由於 freddie 是一個子級對象，函數不會傳遞，所以在 freddie 實例上不存在 freddie 方法：拋出 TypeError 。
1.使用第一次push，obj對象的push方法設置 obj[2]=1;obj.length+=1 2.使用第二次push，obj對象的push方法設置 obj[3]=2;obj.length+=1 3.使用console.log輸出的時候，因為obj具有 length 屬性和 splice 方法，故將其作為數組進行列印 4.列印時因為數組未設置下標為 0 1 處的值，故列印為empty，主動 obj[0] 獲取為 undefined
undefined {n:2}
首先，a和b同時引用了{n:2}對象，接著執行到a.x = a = {n：2}語句，盡管賦值是從右到左的沒錯，但是.的優先順序比=要高，所以這里首先執行a.x，相當於為a（或者b）所指向的{n:1}對象新增了一個屬性x，即此時對象將變為{n:1;x:undefined}。之後按正常情況，從右到左進行賦值，此時執行a ={n:2}的時候，a的引用改變，指向了新對象{n：2},而b依然指向的是舊對象。之後執行a.x = {n：2}的時候，並不會重新解析一遍a，而是沿用最初解析a.x時候的a，也即舊對象，故此時舊對象的x的值為{n：2}，舊對象為 {n:1;x:{n：2}}，它被b引用著。後面輸出a.x的時候，又要解析a了，此時的a是指向新對象的a，而這個新對象是沒有x屬性的，故訪問時輸出undefined；而訪問b.x的時候，將輸出舊對象的x的值，即{n:2}。
在比較相等性，原始類型通過它們的值進行比較，而對象通過它們的引用進行比較。 JavaScript 檢查對象是否具有對內存中相同位置的引用。
我們作為參數傳遞的對象和我們用於檢查相等性的對象在內存中位於不同位置，所以它們的引用是不同的。
這就是為什麼 { age: 18 } === { age: 18 } 和 { age: 18 } == { age: 18 } 返回 false 的原因。
所有對象鍵（不包括 Symbols ）都會被存儲為字元串，即使你沒有給定字元串類型的鍵。這就是為什麼 obj.hasOwnProperty（Ƈ'） 也返回 true 。
上面的說法不適用於 Set 。在我們的 Set 中沒有 「1」 ： set.has（Ƈ'） 返回 false 。它有數字類型 1 ， set.has（1） 返回 true 。
這題考察的是對象的鍵名的轉換。
catch 塊接收參數 x 。當我們傳遞參數時，這與變數的 x 不同。這個變數 x 是屬於 catch 作用域的。
之後，我們將這個塊級作用域的變數設置為 1 ，並設置變數 y 的值。現在，我們列印塊級作用域的變數 x ，它等於 1 。
在 catch 塊之外， x 仍然是 undefined ，而 y 是 2 。當我們想在 catch 塊之外的 console.log(x) 時，它返回 undefined ，而 y 返回 2 。
I. 高級前端面試題目大全(三)
解析： 第 41題
比如 sleep(1000) 意味著等待1000毫秒，可從 Promise、Generator、Async/Await 等角度實現
解析： 第 42 題
解析： 第 43 題
1、客戶端使用https的url訪問web伺服器,要求與伺服器建立ssl連接
2、web伺服器收到客戶端請求後, 會將網站的證書(包含公鑰)傳送一份給客戶端
3、客戶端收到網站證書後會檢查證書的頒發機構以及過期時間, 如果沒有問題就隨機產生一個秘鑰
4、客戶端利用公鑰將會話秘鑰加密, 並傳送給服務端, 服務端利用自己的私鑰解密出會話秘鑰
5、之後伺服器與客戶端使用秘鑰加密傳輸
解析： 第 44 題
解析： 第 45 題
1.使用第一次push，obj對象的push方法設置 obj[2]=1;obj.length+=1
2.使用第二次push，obj對象的push方法設置 obj[3]=2;obj.length+=1
3.使用console.log輸出的時候，因為obj具有 length 屬性和 splice 方法，故將其作為數組進行列印
4.列印時因為數組未設置下標為 0 1 處的值，故列印為empty，主動 obj[0] 獲取為 undefined
解析： 第 46 題
解析： 第 47 題
1、Function.prototype.apply和Function.prototype.call 的作用是一樣的，區別在於傳入參數的不同；
2、第一個參數都是，指定函數體內this的指向；
3、第二個參數開始不同，apply是傳入帶下標的集合，數組或者類數組，apply把它傳給函數作為參數，call從第二個開始傳入的參數是不固定的，都會傳給函數作為參數。
4、call比apply的性能要好，平常可以多用call, call傳入參數的格式正是內部所需要的格式
解析： 第 48 題
解析： 第 49 題
解析： 第 50 題
為什麼在 Vue3.0 採用了 Proxy，拋棄了 Object.defineProperty？
解析： 第 51 題
解析： 第 52 題
解析： 第 53 題
解析： 第 54 題
如下：{1:222, 2:123, 5:888}，請把數據處理為如下結構：[222, 123, null, null, 888, null, null, null, null, null, null, null]。
解析： 第 55 題
解析： 第 56 題
解析： 第 57 題
解析： 第 58 題
解析： 第 59 題
解析： 第 60 題
解析： 第 61 題
解析： 第 62 題
解析： 第 63 題
解析： 第 64 題
解析： 第 65 題
解析： 第 66 題
隨機生成一個長度為 10 的整數類型的數組，例如 [2, 10, 3, 4, 5, 11, 10, 11, 20] ，將其排列成一個新數組，要求新數組形式如下，例如 [[2, 3, 4, 5], [10, 11], [20]] 。
解析： 第 67 題
解析： 第 68 題
解析： 第 69 題
解析： 第 70 題
解析： 第 71 題
[圖片上傳失敗...(image-2eeb30-1575446538468)]
<figcaption></figcaption>
解析： 第 72 題
解析： 第 73 題
解析： 第 74 題
解析： 第 75 題
解析： 第 76 題
示例 1：
示例 2：
解析： 第 77 題
解析： 第 78 題
解析： 第 79 題
解析： 第 80 題
解析： 第 81 題
解析： 第 82 題
解析： 第 83 題
習題： https://blog.csdn.net/qq_37024887/article/details/106784068
解析： 第 84 題
解析： 第 85 題
給定一個整數數組和一個目標值，找出數組中和為目標值的兩個數。
你可以假設每個輸入只對應一種答案，且同樣的元素不能被重復利用。
示例：
解析： 第 86 題
解析： 第 87 題
以下數據結構中，id 代表部門編號，name 是部門名稱，parentId 是父部門編號，為 0 代表一級部門，現在要求實現一個 convert 方法，把原始 list 轉換成樹形結構，parentId 為多少就掛載在該 id 的屬性 children 數組下，結構如下：
解析： 第 88 題
解析： 第 89 題
[圖片上傳失敗...(image-aea64e-1575446538470)]
解析： 第 90 題
解析： 第 91 題
[圖片上傳失敗...(image-21d53f-1575446538470)]
解析： 第 92 題
示例 1：
中位數是 2.0
示例 2：
中位數是(2 + 3) / 2 = 2.5
解析： 第 93 題
解析： 第 94 題
解析： 第 95 題
解析： 第 96 題
解析： 第 97 題
解析： 第 98 題
解析： 第 99 題
解析：[第 100 題]( https://github.com/Advanced-Frontend/Daily-