A. 面試Web前端需要注意什麼會面試哪些問題
作為一名HTML5前端工程師，為了工作，為了就業我們免不了要參加各種各樣的面試。為此總結了面試前的注意事項：
第一：注意自己的儀容儀表
面試之前，一定要再次從頭到腳地將自己的儀容儀表檢查一遍。檢查時主要包括，自己的牙縫是不是還有食物殘渣，所以你需要就近找一個衛生間，如果沒有衛生間就近找一個角落也是可以的，但是切記一定不要在大庭廣眾之下。因此，為了給自己整理出著裝的時間請在約定時間前20分鍾到達。
第二：再次檢查面試時所需的資料是否都已帶全
這些資料主要包括：身份證明、學歷文憑證明、個人簡歷、以往作品等等，如果這些東西齊全之後，需要對這些資料做一個整理與排序。因為沒有哪個面試官希望看到面試者拿出一堆「莫名其妙」的東西塞給他，讓他自己再一頁一頁的翻找自己需要的內容，如果說這些資料在面試官手中不小心散落一地，結果可想而知。這樣的求職者在面試官眼中也一定不是一個讓人放心、有條不紊的員工。當然如果檢查時發現資料沒有帶全，也不要緊張。反而你要慶倖幸虧及時檢查，也有足夠的時間組織語言去向面試官解釋。
第三：面試之前將通信工具調成振動或關閉狀態
雖然說面試者與面試官之間是一個平等的關系，但畢竟你是去人家公司求職的，始終處於一個被動的狀態，所以最起碼的尊重還是要做到的。曾經有調查顯示，對於面試過程中接電話或是被電話打斷的求職者，會被HR減分。
第四：等候面試官時，仔細觀察多了解面試公司
在等候面試官時，可以暗自觀察一下公司的大體情況比如員工的著裝風格、公司的LOGO或是貼在牆上的企業文化、公司的環境等等，一來可以在接下來的面試過程中表現出自己對公司的認同感，二來也可以讓自己對求職公司多些了解，以確定是否要接受這里的工作。如果你身邊有公司的資料宣傳架，不妨取一本翻看一下，也會增加HR對你的好感。
第五：放鬆心情，保持自信
面試時一定要保持一定的自信，這樣也會給面試官留下很好的印象。面試只是你步入工作的第一步，即便是失敗了那也是人生重要的經歷。失敗是為了更好的迎接下一個挑戰。
作為一名web前端工程師千萬不要覺得懂技術面試就能萬事大吉了，像以上五點細節性的東西也是一定要掌握的。
面試題系列：
網頁鏈接
B. c# picturebox如何動態添加圖片
pictureBox1.Image=Image.FromFile("d:\test.jpg");
代碼就是這樣，不知為什麼你的不行
privatevoidbutton1_Click(objectsender,EventArgse)
{
pictureBox1.Image=Image.FromFile("D:\chart.png");
}
C. 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同時綁定兩個點擊事件，一個用捕獲，一個用冒泡，你來說下會執行幾次事件，然後會先執行冒泡還是捕獲
D. 阿里p6前端面經
本科畢業，學校既不是211也不是985，我也沒有一畢業就進入大廠工作的經歷。我的職業生涯里一共有10多次面試經歷，阿里我面試了5次，失敗了4次，屢戰屢敗，屢敗屢戰。每當我聽到別人傳奇的經歷，會羨慕別人開掛的人生，也會有小失落，感嘆自己當初沒有做太多的努力，甚至自我懷疑和自我否定。人生中主動裸辭，被動裁員的經歷，曾經讓我在無數的黑夜裡，真的以為人生就這樣了。
在第四次面試阿里失敗後，我開啟了為期2年的自我重塑計劃，梳理 體系化的知識結構 、刻意練習 知識結構化表達 ，學習參考了吸引力法則完善自己的 簡歷人設 。最後在2020.1入職阿里巴巴，成為AE國際體驗技術團隊的P6前端工程師。
在這一段經歷中，我梳理了當時自己的幾個問題，大家看看是否有跟我相似的處境呢？
自我重塑的前提是自我覺醒，意識到自己存在問題，再讓自己走出舒適區，不斷地打碎自己，然後在這個過程中把碎掉的東西重新收拾起來，變成身體的一部分。 這個過程會讓你很痛苦，但如果你克服了，你就蛻變了。薛兆豐教授說過一句話，「生活不會在你都准備好了以後才開始」。面試也一樣，面試考驗的不是那幾輪的面試表現，而是你在長期生活、工作中積累的 硬技能和軟技能 ，這些包括：你的專業能力，框架能力，思維能力，性格和心態，溝通能力，價值觀等等。你只是剛好在這幾輪的面試里表現出了你的這些積累，吸引到了對方，最後拿到了Offer。如果臨時抱佛腳，光背概念和知識點，沒有結合項目深入思考，那麼面試的時候會表現的很空洞，給人的印象只是在堆砌一些關鍵詞，這樣面試掛掉的可能性就很高。
傳說有人問泰勒斯:「何事最難為?」 泰勒斯回答說:「認識你自己。」 隨著年齡的增長，閱歷的豐富，你會漸漸發現，無論是生活還是工作，很多的事情本質是與自己相處，了解自己的性格，發現自己的優缺點，知道自己從哪來，到哪去，最後想成為一個什麼樣的人。
舉個例子，我了解自己的性格是內向性格，而且原生家庭在我童年成長的過程中，讓我有些自卑，甚至我一度懷疑內向是一種性格缺陷。直到我看了一本書，書名叫《內向性格的競爭力》，開始漸漸明白我 自卑的點，來源於我根本不了解自己是什麼 。我也不了解外向性格、內向性格的優勢。外向性格的優勢在於它性格非常開朗，很容易給人一種親和力，自來熟。內向的性格優勢在於它的敏感度，洞察他人情緒，感知他人情緒的能力。內向性格的人都有一個共同的特點，叫做你需要提前充電。比如我們去參加一個面試，內向性格的人像一塊電池，需要提前充電，然後呢，這塊電池只能維持大概1個小時，但是一旦過了1個小時，電池電量用完，你就受不了，你在後半程的面試會感受不太舒服，因為你的性格里就是不太喜歡這樣的環境。
如果大家意識到這一點，在面試的時候你可以更好的去利用。
膽怯的心態，這個是最難克服的。我曾經是膽怯的人，我會把自己包裹起來，裹上一層堅硬的外殼。
這些會直接影響你在他人心中的形象，像阿里P6前端工程師，是一個獨擋一面的角色。如果自己性格膽怯，表現出畏縮畏尾的樣子，那麼即使進阿里了，你在推進項目的時候，會遇到很大的阻礙。這個阻礙一方面來自於你內心的膽怯，另一方面來自於外部壓力。所以這個是必須要克服的。
我克服膽怯的方法很粗暴。利用周末的時間刷了杭州城20多個恐怖密室（漆黑的密室環境，而且有NPC出來嚇人），慢慢把膽子練起來。後來我膽子大到什麼程度呢，我一個人跑到臨安挑戰極限，坐上飛機從10000英尺的高度自由降落，高空跳傘。
所以性格它不是一成不變的，你發現了，克服了，最後你的心態會越來越好，這個就是我想分享的。
這個是最核心的一個能力，同時也是可以讓你快速進入一門新領域的方法。以我現在的認知水平， 知識可以分為三層：知識點、理論、體系。 我們需要可以通過學習知識點 -> 整理理論 -> 形成體系。
輸入： 我們平時信息輸入的渠道，可以是通過看源碼、看書、他人分享的得到關鍵詞，通過關鍵詞搜索可以讓我們更廣泛地獲取信息。在搜索關鍵詞的過程中，我們往往會得到更多的關鍵詞，它可以是A、是B、是C。
構建： 我們需要這些ABC進行分類，構建我們的思維導圖。如果你沒有自己的思維導圖，網上有很多前端的知識圖譜，可以照著學習和搜索，理解每一個知識節點承載的內容，慢慢去構建屬於你自己的思維導圖。前期構建腦圖的過程挺痛苦的，意味你要把每一個知識點去摸清楚，但是一旦你建立好了，往後只需要在現有的腦圖里添加你新的知識節點，學習會越來越輕松。
解釋： 思維導圖構建好了以後，就是輸出，如何向別人解釋一個知識。
以上學習的方法，是我對費曼技巧的個人實踐，費曼技巧也被稱作是終極的學習方法。簡單說它是 「以教為學」，在學習的知識的時候，以別人聽得懂為目標，用最簡單的話把自己的意思表達出來。
關於學習的方法，我還要分享的是，在構建腦圖知識點的時候，我們不妨問自己5個問題？
理清楚了這5個問題，相信你會對這塊知識了解的很全面了。往往在面試的時候，面試官不會這么一板一眼的提問，有時候會問一些開放式的題目，或者一些刁鑽的技術問題，不要慌，他有可能是考察是否能用學到的知識來解釋一下新的例子。所以我們學習還要做最後一步， 把所學的知識都忘掉，剩下的思維能力才是你的。
掌握學習的方法還不夠，我們還要常常做一些階段性回顧，以一個項目為周期或者以半年為周期（周期時間可以自己把握），把人生當中的關鍵節點梳理出來，這不只是為了面試時快速反應，也是為了更加幫助你認識自己。
我們投遞簡歷失敗，有一部分原因在於，我們對自己定位不夠清晰。當前 P6 水平投遞 P7 崗位，那麼掛掉的概率就更高了。我們需要了解阿里崗位職級是怎麼樣的。阿里巴巴社招一般層級是從P6開始，往往工作經驗3年是一個分界點。
了解崗位職級，可以幫助我們認清當前水平處在哪一個層次，知道通往一下層次需要掌握哪些技能。比如我是P6，那麼我在寫簡歷或者面試的時候，盡可能在展示當前層次水平之外，會額外展示掌握的P7的一些能力，讓面試官看到你的潛力和亮點，你是具備快速通往下一層次的能力的。
阿里的面試按流程來的，你開始面試就會進入流程，在流程里的簡歷，除了面試官其他人是看不到。每個流程通常有5輪面試，4輪技術面和1輪HR面，面試官會根據你的水平層級和個人情況，決定要不要安排筆試和交叉面。面試的前兩輪是電話面試，後幾輪是現場面試。在投遞的簡歷的時候，盡量找人內推，內推的優勢在於內推人可以給你做信用背書，查看你的面試進度。如果不是走內推渠道，是阿里員工主動采蜜打電話邀請你面試，說明你的簡歷或者過去的歷史評價，是具有一定吸引力的，不然也不會打電話給你。接到電話後，可以跟面試官確認電話面試的時間，你可以在這段時間內，開始面試前的准備。
面試前需要做哪些准備呢？
形象建設分為 聲音形象、外在形象、內在形象 。
聲音形象： 為什麼我要講聲音形象呢？因為前幾輪的面試都是電話面試，面試官看不到你，你的語速、語調、語氣，都會影響電話那頭對你的判斷。
聲音影響面試的問題有哪些呢？
那我們要做的是盡可能的讓我們的語速保持勻速的水平，一分鍾200字左右，然後用胸腔偏下的位置發聲，用氣息推動喉嚨，這樣的發出的聲音雄渾有力，不會顯得沉悶，反而有些磁性。
外在形象： 針對現場面試的，簡單、干練、不邋遢就好。
內在形象： 聲音形象，外在形象都是淺層的吸引，最致命的吸引是人格吸引，是你的內在形象。我們在自我認識的環節，梳理過了「關鍵」信息，在面試的時候，就派上用場了，把那些能夠呈現你內在形象的案例展示給面試官，通過例子證明自己，你就是這樣的一個人，簡單說就是：「 我不要我覺得，我要你覺得 」。內在形象有哪些呢？自信、踏實、皮實、樂觀等等
簡歷為避免排版混亂，使用PDF格式。書寫原則： 可以適度包裝，但是不要造假 。造假涉及到誠信問題，你在技術面混過去了，後面第三方背景調查的時候，會驗證你說的情況，一旦打上不誠信的標簽，你就永遠進不了阿里了。在寫簡歷的時候，多關注一下對方招聘崗位的JD，崗位職責和需要的技術棧是什麼。了解這些後，盡可能在書寫簡歷的時候，展示你和招聘崗位所需重合的技能。如果當前掌握的技能和目標崗位有一定差距，那需要花時間提升不足，補齊這塊差距。不同公司的前端崗位的職責或技術方向不同，往往要准備多份簡歷去匹配不同公司崗位的情況。
我的簡歷的內容排版很簡潔，寫了基本信息，專業技能、項目經歷，最後才是教育背景。對於社招來說，你在大學期間發生的事情已經不是那麼重要了。重要的是你目前 掌握的技能和項目經歷 ，這兩塊是要重點描寫的。專業技能按掌握、熟悉、了解程度依次羅列。亮點項目是之前你梳理過的，詳細寫，附帶數據描述成果更具說服力。其他不重要的項目可以簡單描述技術棧，一筆帶過。這么做的目的就是一眼讓面試官看到你的優勢和核心競爭力。推薦一些好的簡歷模板，比如 WonderCV、五百丁。簡歷不用太花里胡哨，簡單明了，能夠清晰的表達你的內容即可。
面試前自我模擬面試可以增加你的自信心，自我介紹、面試的一些的話術都可以提前准備好，然後可以講給別人聽、講給自己聽。或者找一個水平在你之上的前輩對你進行一次模擬面試，收集面試反饋，針對模擬面試時卡頓、忘詞的知識點，重新記憶和解釋，然後不斷的重復上面步驟，直到你能可以用自己的話說出知識點的核心內容。
溝通的原則： 客觀描述事實，不做主觀臆斷 。具體有哪些情況呢？三說和三不說。
面試的時候，可以嘗試引導面試官。 每個面試官的喜好，出題的角度都不一樣，這個我們是無法預測的，但是我們可以去引導對方問一些問題。比如他問到某一個知識點A的時候，我們在回答A的同時，引申出和A有聯系的知識點B或C。回答的重心放在知識點A上，B或C是你在回答A的時候順帶那麼一提，它就像一個魚鉤，來引導面試官來問我們擅長的、准備好的知識。
渲染情緒： 在面試的時候多感知對方的情緒，在適當的時候，用一些你准備好的事跡，引發對方共情。之前我們梳理過一些「關鍵信息」，有一些失敗經歷或高光時刻是很容易讓人產生共鳴的。
反問階段：如果你不知道問些什麼，有保守一點的問法是，去問問對方團隊的情況，團隊在組織定位是怎麼樣的、技術棧是什麼、有哪些人員梯度，當前遇到什麼痛點問題等等。這些問題你傳遞出來的信息是，我對當前崗位所處的團隊，所做的事情非常感興趣。之前我在一家公司現場面試的時候，就主動提出帶我在公司轉轉，了解公司的產品形態。這也是一個向對方表達興趣的技巧。
面試的時候考察什麼？技術一面，重點考察基礎和知識廣度，上探你的技術天花板，下探計算機底層原理。一面常見的考察點有哪些呢？
技術一面專業能力佔了80%，軟素質佔了20%。如果過了技術一面，說明你的基礎各方面是很不錯的。接下來技術二面會重點考察你的工程能力、設計能力、規劃能力。二面通常會從你的項目開始問，這個時候你梳理的亮點項目就派上用場了。二面常見的考察點有哪些呢？
這些都是考察范圍，技術二面專業佔了60%，軟素質佔了40%。到了技術三面的時候，會聊一聊技術格局、視野、人生規劃、軟技能考察，這部分多展示你的大局觀，比如業務上的大圖，技術上的大圖，你長期或短期的人生規劃等等。
2.2.6 描述項目（STAR法則）
我分享一個描述的、項目的方法，叫做STAR法則，他有五個要素，情境(situation)、目標（target）、行動(action)、結果(result)，我把他擴展了一下，技術面或者hr面的時候描述項目的時候，可以按這個套路來。
2.2.6 面試復盤
面試後記得主動添加面試官的微信，這是免費的性價比很高的人脈。加完微信能做哪些事？
面試後還需要復盤， 復盤結果和情緒 。拿一張白紙記錄你在面試中答好的/不好的知識點，還有你的在情緒佔比，緊張、開心、嚴肅是不是佔了面試中大部分情緒。每一次面試都像一面鏡子，照出你的短板，然後你把短板改掉，就離目標越來越近了。擁有這種面試意識，面試的次數多了，你會從害怕面試變得愛上面試。
分享一本軟體能的書 《金字塔原理》 ，是麥肯錫咨詢公司第一位女性顧問：芭芭拉·明托，寫的一本關於邏輯思路的書。裡面介紹了一些方法，幫助我們怎麼去 自下而上的構建邏輯金字塔 ，或者是 自上而下的表達金字塔 。
書的內容介紹我不做具體的描述了，感興趣的同學可以自行搜索。
我們在提升硬技能的同時，也要注重提升軟技能。技術很重要，但是它是我們實現想法的語言工具。在這之上， 使用工具的方法，比工具本身更關鍵 ，我們要清楚真正的修煉是什麼？ 永遠都是內在的東西，軟性的東西 。比如說你的思維能力，耐心，聰明，情商，遇到挫折時的內心復原力。這些技能是可以伴隨你漫長的一生的，終身受用的，那麼我們就應該為此投資。
我在工作前2年是處於一個迷茫的狀態，沒有自己的規劃。真正讓我發生改變的是，突然有一天我回家，父母的頭發都白了，那一刻我意識到自己該學會長大，該為未來做點什麼了。從那以後，我每天的狀態就是，白天公司工作謀生存，晚上自我提升謀發展。在工作第3年的時候，自我感覺准備差不多了，開始去阿裡面試，所以才有了那段裸辭的經歷。當然我摔的很慘，也重新認識了自己。
我們做一個時間切片，把過去的自己和現在的自己對比，你會我發現當時所經歷的，覺得很困難的事，現在看來都不是事。給自己的人生列個目標，知道自己想成為什麼樣的人，實現目標，自己的差距就會越來越小。
還有什麼想了解的可以
有想了解更多的小夥伴可以加Q群 鏈接 裡面看一下，應該對你們能夠有所幫助
E. Web前端最全面試寶典- Html篇
HTML
1.對WEB標准以及W3C的理解與認識
標簽閉合、標簽小寫、不亂嵌套、提高搜索機器人搜索幾率、使用外 鏈css和js腳本、結構行為表現的分離、文件下載與頁面速度更快、內容能被更多的用戶所訪問、內容能被更廣泛的設備所訪問、更少的代碼和組件，容易維 護、改版方便，不需要變動頁面內容、提供列印版本而不需要復制內容、提高網站易用性；
2.xhtml和html有什麼區別
HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XML的置標語言
最主要的不同：
XHTML 元素必須被正確地嵌套。
XHTML 元素必須被關閉。
標簽名必須用小寫字母。
XHTML 文檔必須擁有根元素。
3.Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義?
用於聲明文檔使用那種規范（html/Xhtml）一般為 嚴格 過度 基於框架的html文檔
加入XMl聲明可觸發，解析方式更改為IE5.5 擁有IE5.5的bug
4.行內元素有哪些?塊級元素有哪些?
塊級元素：div p h1 h2 h3 h4 form ul
行內元素: a b br i span input select
5.HTML全局屬性(global attribute)有哪些
參考資料：MDN: html global attribute或者W3C HTML global-attributes
accesskey
:設置快捷鍵，提供快速訪問元素如aaa在windows下的firefox中按alt + shift + a
可激活元素
class
:為元素設置類標識，多個類名用空格分開，CSS和javascript可通過class屬性獲取元素
contenteditable
: 指定元素內容是否可編輯
contextmenu
: 自定義滑鼠右鍵彈出菜單內容
data-*
: 為元素增加自定義屬性
dir
: 設置元素文本方向
draggable
: 設置元素是否可拖拽
dropzone
: 設置元素拖放類型： , move, link
hidden
: 表示一個元素是否與文檔。樣式上會導致元素不顯示，但是不能用這個屬性實現樣式效果
id
: 元素id，文檔內唯一
lang
: 元素內容的的語言
spellcheck
: 是否啟動拼寫和語法檢查
style
: 行內css樣式
tabindex
: 設置元素可以獲得焦點，通過tab可以導航
title
: 元素相關的建議信息
translate
: 元素和子孫節點內容是否需要本地化
6.什麼是web語義化,有什麼好處
web語義化是指通過HTML標記表示頁麵包含的信息，包含了HTML標簽的語義化和css命名的語義化。 HTML標簽的語義化是指：通過使用包含語義的標簽（如h1-h6）恰當地表示文檔結構 css命名的語義化是指：為html標簽添加有意義的class，id補充未表達的語義，如Microformat通過添加符合規則的class描述信息 為什麼需要語義化：
去掉樣式後頁面呈現清晰的結構
盲人使用讀屏器更好地閱讀
搜索引擎更好地理解頁面，有利於收錄
便團隊項目的可持續運作及維護
7.html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區分 HTML 和 HTML5？
新特性：
HTML5 現在已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增加。
拖拽釋放(Drag and drop) API
語義化更好的內容標簽（header,nav,footer,aside,article,section）
音頻、視頻API(audio,video)
畫布(Canvas) API
地理(Geolocation) API
本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；
sessionStorage 的數據在瀏覽器關閉後自動刪除
表單控制項，calendar、date、time、email、url、search
新的技術webworker, websocket, Geolocation
移除的元素：
純表現的元素：basefont，big，center，font, s，strike，tt，u；
對可用性產生負面影響的元素：frame，frameset，noframes；
支持HTML5新標簽：
IE8/IE7/IE6支持通過 document.createElement 方法產生的標簽，可以利用這一特性讓這些瀏覽器支持 HTML5 新標簽，瀏覽器支持新標簽後，還需要添加標簽默認的樣式（當然最好的方式是直接使用成熟的框架、使用最多的是html5shiv框架）：
如何區分：
DOCTYPE聲明新增的結構元素、功能元素
8. HTML5 存儲類型有什麼區別？
HTML5 能夠本地存儲數據，在之前都是使用 cookies 使用的。HTML5 提供了下面兩種本地存儲方案：
localStorage - 沒有時間限制的數據存儲，數據永遠不會過期，關閉瀏覽器也不會丟失
sessionStorage - 針對一個 session 的數據存儲，同一個會話中的頁面才能訪問並且當會話結束後數據也隨之銷毀。
9. HTML5 標准提供了哪些新的API？
1：canvas，不用多說，可以畫出很多絢麗的圖形，甚至可以直接做出偽3D游戲。
2：媒體控制，也很好理解(直譯就是回放功能，假如只用html5.0以下的標簽寫，以前的音樂播放是不可能實現滾動條的。)
3：離線網頁程序，可以把資源文件完全緩存在客戶端，並且通過js的一些方法清空緩存
4：文檔編輯，應該是更好的支持對文檔的編輯。
5：拖動，可以將文件拖動到某些區域上傳
6：跨文檔請求，websocket，一種更加高效的通訊方式
7：歷史管理，可以通過js管理和插入歷史記錄
8：MIME頭自定義
9：客戶端數據存儲，localstoage sessionstoage
10：地理位置共享
11：本地資料庫
12：索引資料庫
10.HTML5 應用程序緩存和瀏覽器緩存有什麼區別？
HTML5 引入了應用程序緩存，這意味著 web 應用可進行緩存，並可在沒有網際網路連接時進行訪問。
應用程序緩存為應用帶來三個優勢：
離線瀏覽 - 用戶可在應用離線時使用它們
速度 - 已緩存資源載入得更快
減少伺服器負載 - 瀏覽器將只從伺服器下載更新過或更改過的資源。
11.常用那幾種瀏覽器測試？有哪些內核(Layout Engine)?
(Q1)瀏覽器：IE，Chrome，FireFox，Safari，Opera。
(Q2)內核：Trident，Gecko，Presto，Webkit。
12.請描述一下 cookies，sessionStorage 和 localStorage 的區別？
cookie在瀏覽器和伺服器間來回傳遞。 sessionStorage和localStorage不會
sessionStorage和localStorage的存儲空間更大；
sessionStorage和localStorage有更多豐富易用的介面；
sessionStorage和localStorage各自獨立的存儲空間；
13.如何實現瀏覽器內多個標簽頁之間的通信?
調用localstorge、cookies等本地存儲方式
14.請寫出localStorage對象的常用方法。
存儲 - localStorage.setItem(key, value) - 如果key存在，更新value
獲取 - localStorage.getItem(key) - 如果key不存在，返回null
刪除 - localStorage.removeItem(key) - 刪除key對應的數據
全部清除 - localStorage.clear() - 清空localStorage中所有數據
遍歷 - localStorage.length
遍歷 - localStorage.key(index)
15.如何在HTML5中啟用應用程序緩存？
<html manifest="fileName.appcache">
每個指定了manifest的頁面在用戶對其訪問時都會被緩存。
.appcache是manifest文件的擴展名
16.html5 離線存儲
Html5的一個重要特性就是離線存儲，所謂的離線存儲就是將一些資源文件保存在本地，這樣後續的頁面重新載入將使用本地資源文件，在離線情況下可以繼續訪問web應用，同時通過一定的手法（更新相關文件或者使用相關API），可以更新、刪除離線存儲等操作。
Html5的離線存儲使用一個manifest文件來標明哪些文件是需要被存儲的，使用如 <html manifest='offline.manifest'> 來引入一個manifest文件，這個文件的路徑可以是相對的，也可以是絕對的，如果你的web應用很多，而且希望能集中管理manifest文件，那麼靜態文件伺服器是個不錯的選擇。
17.HTML5 Canvas 元素有什麼用？
Canvas 元素用於在網頁上繪制圖形，該元素標簽強大之處在於可以直接在 HTML 上進行圖形操作
F. 史上最全前端vue面試題！推薦收藏
1.為什麼會形成跨域？
不是一個源的文件操作另一個源的文件就會形成跨域。當請求端的協議、域名、埠號和伺服器的協議、域名、埠號有一個不一致就會發生跨域。
解決方法：安裝插件
Pip install django-cors-headers
2.vuex的工作流程？
① 在vue組件裡面，通過dispatch來出發actions提交修改數據的操作。
② 然後再通過actions的commit來出發mutations來修改數據。
③ mutations接收到commit的請求，就會自動通過Mutate來修改state（數據中心裏面的數據狀態）裡面的數據。
④ 最後由store觸發每一個調用它的組件更新。
3.vuex是什麼？怎麼使用？
vuex是一個專為vue.js應用程序開發的狀態管理模式。使用:store,getters,mutations,actions,moles詳細使用寫法請見：https://blog.csdn.net/qq_33226029/article/details/109628600?spm=1001.2014.3001.5502
4.vuex中的數據在頁面刷新後數據消失怎麼解決？
使用sessionStorage或localStorage存儲數據;也可以引入vuex-persist插件
5.在vue中，如何阻止事件冒泡和默認行為？
在綁定事件時，在指令後邊加上修飾符.stop來阻止冒泡，.prevent來阻止默認行為
6.深拷貝與淺拷貝？
假設B復制A，修改A的時候，看B是否變化：B變了是淺拷貝（修改堆內存中的同一個值），沒變是深拷貝（修改堆內存中不同的值）。淺拷貝只是增加了一個指針指向已存在的內存地址，深拷貝是增加了一個指針並申請了一個新的內存，使這個增加的指針指向這個新的內存。深拷貝和淺拷貝最根本的區別在於是否真正獲取一個對象的復制實體，而不是引用。
7.vue的生命周期？
beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyedactived deactived （keep-alive）組件是否激活調用
8. keep-alive: 組件緩存
https://juejin.cn/post/6844903624099758094
router.js中:
meta: {keepAlive:true} // 需要被緩存
鉤子執行順序：created -> mounted -> actived
include表示需要緩存的頁面；exclude表示不需要緩存的頁面。如果兩個同時設置，exclude優先順序更 改，則組件不會被緩存。
應用場景： 用戶在某個列表頁面選擇篩選條件過濾出一份數據列表，由列表頁面進入數據詳情頁面，再返回 該列表頁，我們希望列表頁可以保留用戶的篩選狀態。
9.vue傳值方式？
props $emit() $on() $parent $children $listener $attr
10. $on 兄弟組件傳值
$emit 分發
$on 監聽
$off 取消監聽
$once 一次性監聽一個事件
在js文件中定義一個中央事件匯流排Bus，並暴露出來
具體的實現方式：
使用Bus的時候在接收Bus的組件的beforeDestroy函數中銷毀Bus，否則會一直疊加調用這個方法。
應用場景：「退出登錄」 -> ①點擊退出登錄；②修改密碼後自動退出登錄
11.組件跨級傳值
$attrs a->b->c
$listeners 監聽
12.vue事件修飾符有哪些？
.stop .prevent .self .once .passive .sync
13.箭頭函數中的this？
不具有this綁定，但函數體可以使用this，這個this指向的是箭頭函數當前所處的詞法環境中的this對象。
15.為什麼vue組件中data必須是一個函數？
如果不是函數的話，每個組件的data都是內存的同一個地址，一個數據改變了其他也改變了，當他是一個函數時，每個組件實例都有自己的作用域，每個實例相互獨立，就不會互相影響。
16.v-if 和 v-show區別？
v-if 是對標簽的創建與銷毀， v-show 則僅在初始化時載入一次，v-if 開銷相對來說比v-show 大；
v-if 是惰性的；v-show 做的僅是簡單的css切換。
17.v-text 與 v-html區別？
v-text 用於普通文本，不能解析html；
v-html 反之。
18.v-for key的作用？
使用v-for更新渲染過的數據，它默認用「就地復用」策略。如果數據項的順序改變，vue將不是移動DOM元素來匹配數據項的改變，而是簡單地復用此處每個元素，並確保在特定索引下顯示已被渲染過的每個元素。key屬性類型只能是string或number。
key的特殊屬性主要用在虛擬DOM演算法，在新舊node對比時辨識VNods。如不使用key，vue會使用一種最大限度減少動態元素並且盡可能的嘗試修復/再利用相同類型元素的演算法，它會基於key的變化重新排列元素順序。
19.Scss是什麼？在vue-cli中安裝步驟？有哪幾大特性？
npm 下載loader （sass-loader,css-loader,node-sass）,在webpack中配置extends屬性（加.scss拓展） Vscode中可在擴展中下載;
特性：可以用變數，可以用混合器，可以嵌套等。
20.vue獲取dom？
ref
21.vue初始化頁面閃動問題？
webpack、vue-router
v-cloak css:[v-cloak]:display:none
22.什麼是vue-router？
vue router 是官方路由管理器。
主要功能：路由嵌套，模塊化 基於組件路由配置，路由參數、查詢、通配符，細粒度導航控制，自定義的滾動條行為等。
23.vue路由傳參，接收？
傳： this.$router.push({path:'', query(params):{}})
接：this.$router.query.xxx
24.防抖和節流？
節流是一定時間內執行一次函數，多用在scroll事件上；
防抖是在一定時間內執行最後一次的函數，多用在input輸入操作，表單提交等。
25.如何讓scss只在當前組件中起作用？
G. Web前端面試的常見面試題匯總
今天小編要跟大家分享的文章是關於參加Web前端面試的常見面試題匯總。准備參加Web前端面試的小夥伴們來和小編一起看一看吧，希望則寬本篇文章能夠對大家有所幫助。1.漸進增強與優雅降級
漸進增強
並不是一種技術，而是一種設計思想。各個瀏覽器的渲染能力各不相同，要做一個每個人都能看到的網頁、感受到的體驗都一致的網站幾乎不可能。但還是得網站的可訪問性，保證用戶在任何環境下都能正常訪問網頁得核心內容或能使用基本功能(避免網頁打不開、排版錯誤等)，並為他們提供當前條件下最好的體驗，這就是漸進增強得核心思想。
優雅降級也是一種設計思想，為了保證在高版本瀏覽器中提供最好的體驗，碰到低版本瀏覽器再降級進行兼容處理，使其能正常瀏覽。
這兩種思想的區別在於：
1.漸進增強是向上兼容，優雅降級是向下兼容;
2.漸進增強是從簡單到復雜，優雅降級是從復雜到簡單;
3.漸進增強關注的是內容(保證核心內容)，優雅降級關注的是瀏覽體驗(為了兼容低版本瀏覽器)
2.DOCTYPE
作用
DTD(DocumentTypeDefinition，文檔類型定義)是一系列的語法規則，用來定義XML或(X)HTML
的文檔類型。瀏覽器會使用它來判斷文檔類型，決定何種協議來解析，以及切換瀏覽模式。
DOCTYPE是用來聲明文檔類型和DTD
規范的，一個主要的用途便是文件的合法性驗證。如果文檔代碼不合法，那麼瀏覽器解析時便會出現一些差錯。
HTML5的文檔類型聲明：
HTML4.01Strict(HTML4.01嚴格模式)的DTD包含所有HTML
元素和屬性，但不包括展示性的和棄用的元素(如font)，它的文檔類型聲明：
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
標准模式與怪異模式
怪異模式(Quirks
Mode)用於模擬舊瀏覽器的行為。早期的網站並不會遵循完整的規好卜范，隨著瀏覽器支持越來越多的規范，在那些舊的瀏覽器中開發的頁面在顯示時會友盯穗被破壞。為了向後兼容，瀏覽器發明了怪異模式，一行錯誤或無效的
DOCTYPE都會觸發怪異模式。
瀏覽器使用文件開頭的DOCTYPE來決定用怪異模式處理或標准模式處理。DOCTYPE
可以確保不同瀏覽器以相同的方式解析文檔，以及執行相同的渲染模式。
怪異模式與標准模式的主要區別：
1.怪異模式的寬度和高度會包含padding和border。標准模式不包含，標准模式下可以通過設置box-sizing:
border-box將標准盒模型轉化成怪異模式下的盒模型。
2.怪異模式下，當內容超出容器高度時，會將容器拉伸，而不是溢出。
3.怪異模式下，在表格中的字體樣式(如font-size)不會繼承。
4.怪異模式下顏色值必須使用十六進制標記法。
3.語義化
HTML5
中的語義化就是讓元素、屬性或屬性值有含義，更准確地標記特定類型的內容。對元素語義化的目的是為了讓元素的語義和呈現分離，元素只負責文檔內容的結構與含義，而CSS
樣式控制內容的呈現，像元素，沒有語義但卻能將字體變粗，這類元素違背了語義化的目的，將會被廢棄。
優點
·使得HTML文檔結構清晰、布局合理、主體突出、可讀性更強。
·有利於SEO，搜索引擎根據標簽來確定上下文和各個關鍵字的權重。
·方便其他設備解析，如盲人閱讀器根據語義渲染網頁。
·有利於開發和維護，語義化更具可讀性，代碼更好維護，與CSS3關系更和諧。
語義化標簽
·
·footer內容的頁腳，通常包含該章節作者、版權數據或者與文檔相關的鏈接等信息;
·article
文檔、頁面、應用或網站中的獨立結構，是可獨立分配的、可復用的結構，如在發布中，它可能是論壇帖子、雜志或新聞文章、博客、用戶提交的評論、互動式組件，或者其他獨立的內容項目;
·nav描述一個含有多個超鏈接的區域，該區域包含跳轉到其他頁面或頁面內部其他部分的鏈接列表;
·section表示文檔中的一個區域(或節)，比如，內容中的一個專題組;
·main定義文檔的主要內容，該內容在文檔中應當是獨一無二的，不包含任何在文檔中重復的內容，比如側邊欄，導航欄鏈接，版權信息，網站
logo，搜索框(搜索框作為文檔的主要內容);
·aside
表示一個和其餘頁面內容幾乎無關的部分，被認為是獨立於該內容的一部分且可以被單獨的拆分出來而不會影響整體。通常表現為側邊欄或嵌入內容。
4.超鏈接偽類
:link、:visited、:active和:hover的聲明順序是怎樣的?
:link表示未訪問的鏈接狀態;
:visited表示已訪問狀態;:active表示激活狀態(滑鼠按下);:hover表示懸停狀態。
推薦順序是LVHA，即:link:visited:hover:active。理由如下：
·當滑鼠懸停在未訪問的鏈接上時，:link和:hover都會命中，如果:hover在:link
之前聲明，那麼(:hover)就會被覆蓋;
·當滑鼠懸停在已訪問的連接上時，:visited和:hover都會命中，如果:hover在:visited
之前聲明，那麼(:hover)就會被覆蓋;
·當滑鼠單擊鏈接時，:active和:hover都會命中，我們大多是想讓:hover只在懸停時展示樣式，按下滑鼠時使用:active
樣式，因此:active在:hover之後聲明;
·綜上，:hover應在:link和:visited之後，在:active之前，因此active在最後。而:link和
:visited兩者的順序無所謂，互不影響。
5.CSS常見的長度單位
CSS中除了px長度單位之外，還有下面幾個長度單位：
·pc六分之一英寸，1pc=12pt=1/6*1in=16px;
·pt一磅，72分之一英寸。1pt=1/12_1pc=1/72_1in≈1.33px;
·in一英寸，1in=2.54cm=96px;
·ex在含有「X」字母的字體中，它是該字體的小寫字母的高度。對於很多字體來說，1ex≈0.5em;
·em1em等於父級元素的字體大小，2em就是父級元素字體大小的二倍;
·rem當用在根元素()的font-size上面時，它代表了它的初始值;
·ch代表元素所用字體font中「0」這一字形的寬度;
·vh1vh相當於視口高度的1%，100vh就是視口的高度;
·vw1vw相當於視口寬度的1%，100vw就是視口的寬度;
·vmax視口高度vw和寬度vh兩者中的最小值
·vmin視口高度vw和寬度vh兩種中的最大值;
·%相對於父級元素的大小來確定;
參考：CSS
CSSpercentage[2]
6.事件對象
冒泡與捕獲
事件冒泡與捕獲是事件處理的兩種機制，主要描述當在一個元素上有兩個相同類型的事件處理器被激活會發生什麼。
在點擊子元素時，瀏覽器運行了兩種不同的階段：捕獲階段和冒泡階段。捕獲階段的行為：
·瀏覽器檢查元素的最外層祖先，是否在捕獲階段中注冊了一個onclick事件處理程序，如果是，則運行它;
·
然後，它移動到中單擊元素的下一個祖先元素，並執行相同的操作，然後是單擊元素再下一個祖先元素，依此類推，直到到達實際點擊的元素;
而冒泡與捕獲恰恰相反：
·瀏覽器檢查實際點擊的元素是否在冒泡階段中注冊了一個onclick事件處理程序，如果是，則運行它;
·然後它移動到下一個直接的祖先元素，並做同樣的事情，然後是下一個，等等，直到它到達元素;
而現代瀏覽器在默認情況下，所有事件處理程序都在冒泡階段進行注冊。因此上面代碼在點擊子元素時會先執行子元素綁定的事件，然後向上冒泡，觸發父元素綁定的事件。
addEventListener函數的第三個參數是個布爾值。含義：
·當布爾值是false時(這也是默認值)，表示向上冒泡觸發事件;
·當布爾值是true時，表示向下捕獲觸發事件;
不能冒泡的事件
有些事件是不會冒泡的。比如：
·blur元素失去焦點時觸發，focusout事件也是失去焦點時觸發，但可以冒泡;
·focus元素獲取焦點時觸發;
·mouseenter滑鼠移動到元素上時會觸發該事件，與之對應的是mouseover事件，但會冒泡;
·mouseleave滑鼠離開元素時觸發，與之對應的是mouseout，但會冒泡;
事件冒泡可以讓我們利用事件委託，尤其是處理大量子元素時，如果給每個子元素都綁定事件，這是不優雅的，可以將事件綁定到父元素上，並讓子節點上發生的事件冒泡到父節點上，利用
e.target屬性可以獲取到當前觸發事件的子元素。
事件對象中的方法
·stopPropagation()阻止事件冒泡，當設置後，點擊該元素時父元素綁定的事件就不會再觸發;
·preventDefault()阻止默認事件的發生;
·stopImmediatePropagation()它用來阻止監聽同一事件的其他事件監聽器被調用以及阻止事件冒泡，比如給同一個div
元素綁定多個click事件(使用addEventListener方法可以注冊多個)，當在第二個事件函數中調用
stopImmediatePropagation方法時，點擊div元素時，後面注冊的click將不會被觸發，而且還會阻止事件冒泡;
比如下面的例子，給p綁定多個click事件，在第二個事件函數中調用stopImmediatePropagation，第三個click
事件就不會觸發，因為也阻止了冒泡，因此父元素的click事件也不會觸發。
paragraph