1. 你遇到的前端面試題都有什麼
大家好，我是王我。
隨著春節的結束，各個行業也普遍開始了上班的節奏， 不過本人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.項目經驗，讓你講講做過的項目，遇到的問題和解決之道
2. web後端開發面試應該注意些什麼
web後端開發面試應該注意些什麼?有哪些題目是值得我們注意的？下面就讓小編告訴你:
面試這幾家公司所遇到的面試/筆試題，目前還能記住的如下。雖然可能絕大部分都是基礎，但希望大家不要只是看看就過去了，最好還是假裝你被問到這個問題，你來把答案說出來或寫出來：（不按公司分了）
python語法以及其他基礎部分
可變與不可變類型；
淺拷貝與深拷貝的實現方式、區別；deep如果你來設計，如何實現；
__new__() 與 __init__()的區別；
你知道幾種設計模式；
編碼和解碼你了解過么；
列表推導list comprehension和生成器的優劣；
什麼是裝飾器；如果想在函數之後進行裝飾，應該怎麼做；
手寫個使用裝飾器實現的單例模式；
使用裝飾器的單例和使用其他方法的單例，在後續使用中，有何區別；
手寫：正則郵箱地址；
介紹下垃圾回收：引用計數/分代回收/孤立引用環；
多進程與多線程的區別；CPU密集型適合用什麼；
進程通信的方式有幾種；
介紹下協程，為何比線程還快；
range和xrange的區別（他妹的我學的py3…）；
由於我有C/C++背景，因此要求用C來手寫：將IP地址字元串（比如「172.0.0.1」）轉為32位二進制數的函數。
演算法排序部分
手寫快排；堆排；幾種常用排序的演算法復雜度是多少；快排平均復雜度多少，最壞情況如何優化；
手寫：已知一個長度n的無序列表，元素均是數字，要求把所有間隔為d的組合找出來，你寫的解法演算法復雜度多少；
手寫：一個列表A=[A1，A2，…,An]，要求把列表中所有的組合情況列印出來；
手寫：用一行Python寫出1+2+3+…+10**8 ；
手寫python：用遞歸的方式判斷字元串是否為迴文；
單向鏈表長度未知，如何判斷其中是否有環；
單向鏈表如何使用快速排序演算法進行排序；
手寫：一個長度n的無序數字元素列表，如何求中位數，如何盡快的估算中位數，你的演算法復雜度是多少；
如何遍歷一個內部未知的文件夾（兩種樹的優先遍歷方式）
網路基礎部分
TCP/IP分別在模型的哪一層；
socket長連接是什麼意思；
select和epoll你了解么，區別在哪；
TCP UDP區別；三次握手四次揮手講一下；
TIME_WAIT過多是因為什麼；
http一次連接的全過程：你來說下從用戶發起request——到用戶接收到response；
http連接方式。get和post的區別，你還了解其他的方式么；
restful你知道么；
狀態碼你知道多少，比如200/403/404/504等等；
資料庫部分
Mysql鎖有幾種；死鎖是怎麼產生的；
為何，以及如何分區、分表；
MySQL的char varchar text的區別；
了解join么，有幾種，有何區別，A LEFT JOIN B，查詢的結果中，B沒有的那部分是如何顯示的（NULL）；
索引類型有幾種，BTree索引和hash索引的區別（我沒答上來這倆在磁碟結構上的區別）；
手寫：如何對查詢命令進行優化；
NoSQL了解么，和關系資料庫的區別；Redis有幾種常用存儲類型；
Linux部分
講一下你常用的Linux/Git命令和作用；
查看當前進程是用什麼命令，除了文件相關的操作外，你平時還有什麼操作命令；
（因為我本人Linux本身就很水，只會基本的操作，所以這部分面試官也基本沒怎麼問。。反正問了就大眼瞪小眼唄）
django項目部分
都是讓簡單的介紹下你在公司的項目，不管是不是後端相關的，主要是要體現出你幹了什麼；
你在項目中遇到最難的部分是什麼，你是怎麼解決的；
你看過django的admin源碼么；看過flask的源碼么；你如何理解開源；
MVC / MTV；
緩存怎麼用；
中間件是幹嘛的；
CSRF是什麼，django是如何避免的；XSS呢；
如果你來設計login，簡單的說一下思路；
session和cookie的聯系與區別；session為什麼說是安全的；
uWSGI和Nginx的作用；
上面就是小編為大家整理的關於web後端開發 面試的文章，希望對大家有幫助。在實際的操作過程中大家可以根據實際情況進行靈活的調整。
3. 介面測試面試題，等你來看
1.你們公司的介面測試流程是？
介面測試我們是在xx項目做的，主要有xx介面，xx介面等
1.首先是從開發那裡拿到API介面文檔，了解介面業務、包括介面地址、介面方式、入參、出參、token鑒權，返回格式等信息。
2.然後使用postman或jmeter工具執行介面測試，一般使用Jmeter的步驟是這樣的：
3.最後調試並執行用力，最後編寫介面測試報告。
4.其實我們做介面的時候也碰到過很多的問題，都是自己獨立解決的，比如返回值亂碼（修改jmeter的配置文件為UTF-8編碼方式），比如需要登陸後才能取得token鑒權編碼並且這個鑒權碼在下面的請求中需要用到（使用正則表達式提取器提取token的值等等。
2.簡述cookie、session及token的區別
1.cookie數據存放在客戶的瀏覽器上，session數據放在伺服器上。而token是介面數據的鑒權碼，一般情況下登錄後才可以獲取到token，然後在每次請求介面時需要帶上token參數。
2.cookie不是很安全，別人可以分析存放在本地的cookie並進行cookie欺騙，考慮到安全應到使用seesion，seesion會在一定時間內保存在伺服器上。當訪問增多，會比較佔用你伺服器的性能，考慮到減輕伺服器性能方面應當使用cookie。
3.可以將登錄信息等重要信息存放為session；其他信息需要保存，可以放在coolie。
3.對於加密介面，如何進行測試？
在調用介面的時候，要搞清楚介面的加密方式是什麼。
如果是對稱加密，要先從開發哪裡獲取對稱密鑰，基於對稱密鑰可以加密請求數據，以及解密響應報文。
如果是非對稱加密，先從開發獲取伺服器公鑰和私鑰，也要知道當前用戶的公鑰和私鑰信息。以便完成介面的數據加密和解密。
4.介面測試執行中比對資料庫嗎？
肯定，因為介面返回值的數據來源於資料庫，介面對數據的操作還要進行深層次的資料庫檢查！
5.如何分析一個bug是前端還是後端
這種情況很容易判斷，先抓包看請求報文，對著介面文檔，看請求報文有沒有問題，有問題就是前端發的數據不對；
請求報文沒問題，那就看返回報文，返回的數據不對那就是後端開發的問題。
6.談談你對HTTP協議的了解？
超文本傳輸協議，埠為80，特點（無記憶功能、快速）是由請求和響應兩部分組成請求由請求頭、請求行、請求正文組成；響應是由響應頭、響應行、響應正文組成，之前我們公司的介面是採用https協議的。
httpshttp+ssl協議埠443面向安全的超文本傳輸協議。
7.get和post請求有什麼區別？
get和post請求都是客戶端向伺服器提交的一種請求方式；
get是明文傳輸參數、傾向於請求伺服器資源。比如打開網站；
post傳輸數據不可見，安全性高，傾向於向伺服器提交數據，比如注冊等。
8.依賴於第三方數據的介面如何進行測試
可以使用SoapUI等工具直接調用第三方數據介面的webservice,通過返回值來查看第三方數據的介面是否調用正常。
也可以利用一些工具來模擬第三方的數據返回，最大限度地降低對第三方數據介面的依賴。
9.介面測試中要注意的測試點有哪些？
介面中返回了圖片地址，要手工去進行圖片的測試（大小、內容）；
介面完成查詢功能的時候，數據返回的排序顯示；
10.介面執行測試返回結果比對哪部分？
之前必須要對比的就是返回狀態碼，其次再去對比返回其它關鍵內容。
11.做介面測試工作的意義是什麼？
這個是開發性題目，面試官主要考察對測試的理解。
根據測試的金字塔模型來說介面測試是測試左移的最方便，最簡單的測試，當然最厲害的測試是做白盒測試，這個是在介面測試之前，相對於單元測試。
12.用過抓包工具嗎？如何使用？
之前在項目中用過fiddler抓包工具進行HTTP協議請求的抓取。
打開fiddler之後，默認瀏覽器配置了127.0.0.18888埠的代理，在fiddler設置好過濾策略後，打開需要進行抓包的網站進行操作，就可以進行抓包。
13.介面測試中需要哪些注意點？
14.postman中設置環境變數有什麼用？
在之前項目中，介面測試測試的環境有開發環境，測試環境等，為了測試的時候方便，就在postman設置環境變數，到時所有介面都引用該環境變數，這樣就不用為了切換環境導致每次都去修改被測系統介面的主機地址；點擊右上角環境變數管理按鈕-新建環境變數，在腳本中使用{undefined{變數名}}去調用。
15.關聯是什麼？如何postman設置關聯？
關聯就是把上一個介面返回值的部分截取出來，作為下一個介面的參數，能讓介面串聯運行。
在postman中設置關聯的步驟如下：
先通過正則表達式提取的方式或json取值的方式把下一個介面需要的信息從上一個介面截取出來；
使用設置全局變數的代碼把取出來的值保存到全局變數；
在下一個介面中，使用{undefined{全局變數}}代替要替換的靜態值。
4. web前端面試題@二（Keeplive、V-show和v-if的區別、同源策略及跨域）
在vue中，我們使用component內置組件或者vue-router切換視圖的時候，由於vue會主動卸載不使用的組件，所以我們不能保存組件之前的狀態，而我們經常能遇到需要保存之前狀態的需求，例如：搜索頁（保存搜索記錄），列表頁（保存之前的瀏覽記錄）等等。
Keep-alive是一個vue的內置組件，它能將不活動的組件保存下來，而不是直接銷毀，當我們再次訪問這個組件的時候，會先從keep-alive中存儲的組件中尋找，如果有緩存的話，直接渲染之前緩存的，如果沒有的話，再載入對應的組件。
作為抽象組件，keep-alive是不會直接渲染在DOM中的。
Keep-alive提供了三種可選屬性
Include-字元串或數組或正則表達式。只有名稱匹配的組件被緩存。
Exclude -字元串或數組或正則表達式。名稱匹配的組件不會被緩存。
Max -數字類型。表示最多可以緩存多少組件實例。
Keep-alive提供了兩個生命鉤子，分別是activated與 deactivated。
因為Keep-alive會將組件保存在內存中，並不會銷毀以及重新創建，所以不會重新調用組件的created等方法，需要用activated與deactivated這兩個生命鉤子來得知當前組件是否處於活動狀態。
V-show有較高的渲染成本，
V-if有較高的切換成本。
V-if是真正的條件渲染，確保切換過程中條件內的事件監聽器和子組件適當的被銷毀和重建。
V-show的元素始終被渲染並保存在dom中，操作的只是display屬性控制演示影藏。
源（origin）—— 就是協議、域名和埠號。若地址裡面的協議、域名和埠號均相同則屬於同源。
同源策略——同源策略是瀏覽器的一個安全功能，不同源的客戶端腳本在沒有明確授權的情況下，不能讀寫對方資源。所以a.com下的js腳本採用ajax讀取b.com裡面的文件數據是會報錯的。
不受同源策略限制的
1.頁面中的鏈接，重定向以及表單提交是不會受到同源策略限制的。
2.跨域資源的引入是可以的。但是js不能讀寫載入的內容。如嵌入到頁面中的<script src="..."></script>，<img>，<link>，<iframe>等。
跨域——只要協議、域名、埠號有一個不同就是跨域。
跨域的原因？（只做了解）
跨域問題來源於JavaScript的同源策略，即只有 協議+主機名+埠號(如存在)相同，則允許相互訪問。為了防止某域名下的介面被其他域名下的網頁非法調用，是瀏覽器對JavaScript施加的安全限制。也就是說JavaScript只能訪問和操作自己域下的資源，不能訪問和操作其他域下的資源。跨域問題是針對JS和ajax的，html本身沒有跨域問題，比如a標簽、script標簽、甚至form標簽（可以直接跨域發送數據並接收數據）等。
1、 Jsonp——
利用script標簽可跨域的特點，在跨域腳本中可以直接回調當前腳本的函數。jsonp是一種常用的跨域手段，和反向代理，服務端做跨域處理相比，jsonp更顯得方便輕巧 jsonp的缺點只能發送get請求。因為script只能發送get請求需要後台配合。此種請求方式應該前後端配合，將返回結果包裝成callback(result)的形式。
2、 Cors——
伺服器設置HTTP響應頭中Access-Control-Allow-Origin值，解除跨域限制。CORS 是一個W3C標准,全稱是"跨域資源共享"（Cross-origin resource sharing），他允許瀏覽器向跨源伺服器發送XMLHttpRequest請求，從而克服 AJAX 只能同源使用的限制
缺點是：目前所有最新瀏覽器都支持該功能，但是萬惡的IE不能低於10
Access-Control-Allow-Origin 這個欄位是必須的,表示接受那些域名的請求(*為所有)、Access-Control-Allow-Credentials 該欄位可選, 表示是否可以發送cookie、Access-Control-Expose-Headers 該欄位可選,XHMHttpRequest對象的方法只能夠拿到六種欄位: Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma ,如果想拿到其他的需要使用該欄位指定。
3、反向代理（Reverse Proxy）{前端獨立就能解決的跨域方案}——
指以代理伺服器來接受internet上的連接請求，然後將請求轉發給內部網路上的伺服器，並將從伺服器上得到的結果返回給internet上請求連接的客戶端，此時代理伺服器對外就表現為一個反向代理伺服器。
5. Web 前端面試
博客園整理了一下，有好的面試題歡迎大家發在評論區喲
1. 閉包
2. 數組去重
3. 原型和原型鏈
4. call,apply,bind三者的區別？
5. 請介紹常見的 HTTP 狀態碼(至少五個)
6. 深淺拷貝
7. 實現(5).add(3).minus(2)輸出6
8. null和undefined區別
9. MVC和MVVC?
10. Vue生命周期
11. Vue數據雙向綁定原理
12. Vue組件傳參
13. 說說各瀏覽器存在的兼容問題
14. router和route
15. active-class屬於Vue哪一個moles,有什麼作用
16. v-if和v-show
17. computed和watch有什麼區別
18.Vue 組件中 data 為什麼必須是函數
19. vue中子組件調用父組件的方法
20. vue中 keep-alive 組件的作用
21. vue中如何編寫可復用的組件？
22. Vue 如何去除url中的 #
23. Vue 中 key 的作用
24. Vue 中怎麼自定義指令
25. Vue 中怎麼自定義過濾器
26. NextTick 是做什麼的
27. Vue 組件 data 為什麼必須是函數
28. 計算屬性computed 和事件 methods 有什麼區別
29. scoped（死夠撲的）
30. vue如何獲取dom?
31. promise
32. vue常用指令有哪些
33.vue-loader是什麼?使用和用途？
34.css樣式局部化，如何讓css只在當前組件起作用?scss和stytus樣式穿透
閉包指有權訪問另一個函數中變數的函數，
MDN: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures
B站視頻： https://www.bilibili.com/video/BV1YJ411R7ap?from=search&seid=18157596230752413126
https://www.jianshu.com/p/9c3547450a52
https://search.bilibili.com/all?keyword=%E5%8E%9F%E5%9E%8B%E9%93%BE%20%E9%BB%91%E9%A9%AC
都是用來改變this指向的
call和apply都是function原型上的方法，每一個函數作為function的實例都可以調用這兩個方法，而這兩個方法都是用來改變this指向的
一般情況下this指向其調用者（）
fun.call(thisArg,arg1,ary2,...)
主要作用可以實現繼承
調用函數，改變this指向
繼承
fun.apply(thisArg,[argsArray])
作用：調用函數，改變函數內部this指向
參數必須是數組
apply主要應用於藉助數學對象等
bind()方法不會調用函數，但可以改變函數內部this指向
fun.bind(thisArg,arg1,arg2,...)
thisArg:在fun函數運行時指定的this值
arg1，arg2:傳遞的其他參數
返回由指定的this值和初始化參數改造的原函數拷貝
call的性能要比apply好一些，尤其當傳遞參數超過3個，後期開發可多用call
時間測試
狀態碼是由 3 位數組成，第一個數字定義了響應的類別，且有五種可能取值:
1xx：指示信息–表示請求已接收，繼續處理。
2xx：成功–表示請求已被成功接收、理解、接受。
3xx：重定向–要完成請求必須進行更進一步的操作。
4xx：客戶端錯誤–請求有語法錯誤或請求無法實現。
5xx：伺服器端錯誤–伺服器未能實現合法的請求。
阮一峰： http://www.ruanyifeng.com/blog/2014/03/undefined-vs-null.html
MVC 是後端中的概念
MVVC中 是前端概念
最終實現V和M數據的同步，因此開發者只需關注業務邏輯，不需要手動操作Dom，mvvm是vue的核心
這兩個不同的結構可以看出兩者的區別，他們的一些屬性是不同的。
active-class 屬於vue-router的樣式方法
當routerlink標簽被點擊時將會應用這個樣式
使用有兩種方法
routerLink標簽內使用
在使用時會有一個Bug
首頁的active會一直被應用
解決辦法
為了解決上面的問題，還需加入一個屬性exact,類似也有兩種方式：
在router-link中寫入exact
在路由js文件,配置active-class
還可以不用exact這種方法去解決，例如
首頁
路由中加入重定向
computed
computed是計算屬性，也就是計算值，它更多用於計算值的場景
computed具有緩存性，computed的值在getter執行後是會緩存的，只有在它依賴的屬性值改變之後，下一次獲取computed的值時重新調用對應的getter來計算
computed適用於計算比較消耗性能的計算場景
watch
watch更多的是[觀察]的作用，類似於某些數據的監聽回調，用於觀察props $emit或者本組件的值，當數據變化時來執行回調進行後續操作
無緩存性，頁面重新渲染時值不變化也會執行
小結
當我們要進行數值計算，而且依賴於其他數據，那麼把這個數據設計為computed
如果你需要在某個數據變化時做一些事情，使用watch來觀察這個數據變化。
去這里看一下blog.csdn.net
vue-router 默認使用 hash 模式，所以在路由載入的時候，項目中的 url 會自帶 #。如果不想使用 #， 可以使用 vue-router 的另一種模式 history
new Router({
mode: 'history',
routes: [ ]
})
需要注意的是，當我們啟用 history 模式的時候，由於我們的項目是一個單頁面應用，所以在路由跳轉的時候，就會出現訪問不到靜態資源而出現 404 的情況，這時候就需要服務端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面
具體參考 官方API
參考 官方文檔-自定義指令
過濾器也同樣接受全局注冊和局部注冊
具體可參考官方文檔 深入響應式原理
我們可以將同一函數定義為一個 method 或者一個計算屬性。對於最終的結果，兩種方式是相同的
不同點：
讓css只在當前組件中起作用
6. Python後端開發工程師面試
第一步：自我介紹
第二步：公司介紹
第三步：技術基礎
第四步：項目介紹
第五步：待遇
自我介紹，簡單直接，姓名，籍貫，大學，工作經歷
示例如下：
你好，面試官，我叫XX，來自XX，本科畢業於XX，主修XX專業，有X年工作經驗，在上一家公司擔任python後端開發工程師的職位。
公司名稱是XX、公司主要做外包軟體、都有軟體定製/商城定製、前端2個後端2個運維1個
主要是根據你簡歷中填寫的技術，根據我的簡歷中所寫的，總結幾點如下：
字典的查詢流程：
不可變對象可哈希， str ， fronzenset ， tuple ，自己實現的類，要重載 __hash__ 方法。
dict內存花銷大，但是查詢速度快，自定義的對象或者python內部的對象都是dict包裝的。
dict的存儲順序和元素添加順序有關，添加順序可能改變已有數據的順序。
集合：是一個可以存放任意數據類型的可變無序的映射集合。
set和dict類似，set的核心也是散列表，但是表元只包含值的引用。 由於散列表的特性，set的元素不能重復，且無序。 內部由哈希實現，查找的時間復雜度為O(1)，所以性能很高，實現了魔法函數 __contains__ 可以使用in來查找。 set的去重是通過兩個函數 __hash__ 和 __eq__ 實現的。
（1）淺拷貝
定義：淺拷貝只是對另外一個變數的內存地址的拷貝，這兩個變數指向同一個內存地址的變數值。
淺拷貝的特點：
（2）深拷貝：
定義：一個變數對另外一個變數的值拷貝。
深拷貝的特點：
Python GC主要使用引用計數（reference counting）來跟蹤和回收垃圾。在引用計數的基礎上，通過「標記-清除」（mark and sweep）解決容器對象可能產生的循環引用問題，通過「分代回收」（generation collectio n）以空間換時間的方法提高垃圾回收效率。
GIL全稱 Global Interpreter Lock ，中文解釋為全局解釋器鎖。它並不是Python的特性，而是在實現python的主流Cpython解釋器時所引入的一個概念，GIL本質上就是一把互斥鎖，將並發運行變成串列，以此來控制同一時間內共享數據只能被一個任務所修改，從而保證數據的安全性。
GIL保護的是解釋器級別的數據，但是用戶自己的數據需要自己加鎖處理。
既然有了GIL的存在，一個進程中同一時刻只有一個線程能夠被執行，無法利用cpu的多核機制，導致多線程用於I/O密集型，多進程用於計算密集型，如金融分析等。
死鎖：兩個或兩個以上的進程或者線程在執行過程中，因為爭奪資源而造成的互相等待現象，若無外力的作用，都將一直處於阻塞狀態，這些互相等待的進程或者線程就被稱為死鎖。
解決方法，使用遞歸鎖（RLock）
這個RLock內部有一個Lock和一個counter變數，counter記錄著acquire的次數，從而使得資源可以被多次require。直到一個線程所有的acquire都被release，其他的線程才能獲得資源。上面的例子如果使用RLock代替Lock，則不會發生死鎖
可以直接認為是linux，畢竟搞後端的多數是和linux打交道。
那麼如何避免粘包問題呢? 歸根結底就是一句話, 明確兩個包之間的邊界.
UDP不存在粘包問題，是由於UDP發送的時候，沒有經過Negal演算法優化，不會將多個小包合並一次發送出去。另外，在UDP協議的接收端，採用了鏈式結構來記錄每一個到達的UDP包，這樣接收端應用程序一次recv只能從socket接收緩沖區中讀出一個數據包。也就是說，發送端send了幾次，接收端必須recv幾次（無論recv時指定了多大的緩沖區）。
存儲可能包含rdbms，nosql以及緩存等，我以mysql,redis舉例**
7. 如何面試app後端開發工程師 知乎
面試題1、Python是如何進行內存管理的？Python的內存管理主要有三種機制：引用計數機制、垃圾回收機制和內存池機制。a.引用計數當給一個對象分配一個新名稱或者將一個對象放入一個容器（列表、元組或字典）時，該對象的引用計數都會增加。當使用del對對象顯示銷毀或者引用超出作用於或者被重新賦值時，該對象的引用計數就會減少。可以使用sys.getrefcount()函數來獲取對象的當前引用計數。多數情況下，引用計數要比我們猜測的大的多。對於不可變數據（數字和字元串），解釋器會在程序的不同部分共享內存，以便節約內存。b.垃圾回收當一個對象的引用計數歸零時，它將被垃圾收集機制處理掉。當兩個對象a和b相互引用時，del語句可以減少a和b的引用計數，並銷毀用於引用底層對象的名稱。然而由於每個對象都包含一個對其他對象的應用，因此引用計數不會歸零，對象也不會銷毀。（從而導致內存泄露）。為解決這一問題，解釋器會定期執行一個循環檢測器，搜索不可訪問對象的循環並刪除它們。c.內存池機制Python提供了對內存的垃圾收集機制，但是它將不用的內存放到內存池而不是返回給操作系統。1）Pymalloc機制。為了加速Python的執行效率，Python引入了一個內存池機制，用於管理對小塊內存的申請和釋放。2）Python中所有小於256個位元組的對象都使用pymalloc實現的分配器，而大的對象則使用系統的malloc。3）對於Python對象，如整數，浮點數和List，都有其獨立的私有內存池，對象間不共享他們的內存池。也就是說如果你分配又釋放了大量的整數，用於緩存這些整數的內存就不能再分配給浮點數。【Python環境】12道Python面試題總結2、什麼是lambda函數？它有什麼好處？lambda表達式，通常是在需要一個函數，但是又不想費神去命名一個函數的場合下使用，也就是指匿名函數lambda函數：首要用途是指點短小的回調函數lambda[arguments]：expression>>>a=lambdax，y：x+y>>>a(3，11)3、Python裡面如何實現tuple和list的轉換？直接使用tuple和list函數就行了，type()可以判斷對象的類型。4、請寫出一段Python代碼實現刪除一個list裡面的重復元素。這個地方用set可以實現。
8. 如何面試後端程序員
計算機網路常見面試點總結
計算機網路常見問題回顧
2.1 TCP、UDP 協議的區別
2.2 在瀏覽器中輸入url地址 ->> 顯示主頁的過程
2.3 各種協議與HTTP協議之間的關系
2.4 HTTP長連接、短連接
2.5 TCP 三次握手和四次揮手
三 Linux
3.1-簡單介紹一下-linux-文件系統？
3.2 一些常見的 Linux 命令了解嗎？
四 MySQL
4.1 說說自己對於 MySQL 常見的兩種存儲引擎：MyISAM與InnoDB的理解
4.2 資料庫索引了解嗎？
4.3 對於大表的常見優化手段說一下
五 Redis
5.1 redis 簡介
5.2 為什麼要用 redis /為什麼要用緩存
5.3 為什麼要用 redis 而不用 map/guava 做緩存?
5.4 redis 和 memcached 的區別
5.5 redis 常見數據結構以及使用場景分析
5.6 redis 設置過期時間
5.7 redis 內存淘汰機制
5.8 redis 持久化機制（怎麼保證 redis 掛掉之後再重啟數據可以進行恢復）
5.9 緩存雪崩和緩存穿透問題解決方案
5.10 如何解決 Redis 的並發競爭 Key 問題
5.11 如何保證緩存與資料庫雙寫時的數據一致性？
六 Java
6.1 Java 基礎知識
6.2 Java 集合框架
6.3 Java多線程
6.4 Java虛擬機
6.5 設計模式
七 數據結構
八 演算法
8.1 舉個栗子（手寫快排）
九 Spring
9.1 Spring Bean 的作用域
9.2 Spring 事務中的隔離級別
9.3 Spring 事務中的事務傳播行為
9.4 AOP
9.5 IOC
不需要寫代碼就能衡量候選人的方法可能有一萬種。我常用的三個主要方法可以覆蓋許多不同的技能。在面試過程中，我們會談論候選人的經驗，要求他們做一些代碼審查，並與別人合作設計一個系統。
下面我會詳細解釋這個過程。
我試圖通過這些方法找到真正能夠勝任技術工作的候選人，並且他們必須能在單純的編程技能之外給團隊帶來價值。通常在一次面試中我能在大約一個小時內覆蓋所有三個部分。我有信心這些信息能讓我找到好的候選人。
1、深入挖掘他們的經驗
許多團隊已經這樣做了。他們會在面試一開始花幾分鍾，詢問候選人之前的工作，他們對工作的態度，等等。大多時候這就像隨意談話一樣。
但這是不對的。
記住這是面試。你需要盡可能地理解他們構建系統時使用的技術。
為了做好這一點，你需要在面試開始之前仔細閱讀他們的簡歷。這不是開玩笑，在面試開始之前至少花上10分鍾仔細閱讀（不是略讀）簡歷，如果花30分鍾時間則最好。要從簡歷中盡可能多了解些他們之前的項目，Google一下看看能否找到他們項目的公開信息。面試時挖掘背景信息所花的時間越少，就越能獲得好的效果。
在面試中，要求候選人談談他最近最感興趣的項目。要練習主動的傾聽，要學會參與。假裝你是他團隊中的一員，或者假裝你們是在做架構審查。你要努力了解他們構建的東西以及構建的方法。這樣做的好處和壞處是什麼？要讓候選人知道，不知道答案無所謂，但重要的是能勾起你的好奇心。
下面是我認為能獲得好的答案的問題：
你在項目中的職責是什麼？這個問題本身並不是決定性的。即使在項目中承擔的職責很小，他們也可能很適合你們的團隊。你的候選人也許正是因為沒能獲得重要的職責而在尋找新的機會。因此，知道他們過去的職責會很有幫助。
你從他人那裡獲得了什麼幫助？無法感受他人的幫助是個極其危險的信號。即使是個人項目，也一定需要別人的幫忙。你肯定不想要一個以自我為中心的同事。
給我介紹下那個功能的工作原理。解釋下數據的來源和去向、存儲方式以及這一切能帶給最終用戶的好處。這個問題的答案足以吸引你的好奇心。
這個項目中最糟糕的技術債務是什麼？好的工程師必須理解他們做出決定時需要付出的代價。問完這個問題，可以繼續詢問他們怎樣改正這些問題，或者尚未改正的理由。
有沒有出過生產環境下的bug或服務中斷？測試下他們是否理解bug的原因，以及團隊解決bug的方法。他們是否提前預期到了bug？下次怎樣才能避免同樣的問題發生？
他們怎樣與代碼的「作者」交流？交流是否有用？是否高效？是否友善？
他們會著重哪些問題？是否能明確表達出他們的疑問？他們是否會立即指出哪些無關緊要的問題？
他們是否善於閱讀自己不熟悉的代碼？
過於糟糕的拉取請求的描述或提交信息；
能用但無法自洽的代碼；
過於復雜的代碼（需要重構的代碼）；
混亂的變數或方法名；
過度設計的代碼（即實際上永遠不會用到的功能）。
這一部分面試能讓你直接了解候選人的經驗。做好這一部分還能讓你了解他們如何感謝別人或責備別人。你將會了解到他們如何在兩難的工程問題上做出抉擇，他們會與你分享最近的教訓，他們與別人溝通技術的能力應該也很明顯。
如果他們選擇了不太適合的項目，可以考慮談論其他項目。所謂不太適合的意思是項目不夠復雜或他們記不清的情況。
注意，這一步要避免詢問類似於「告訴我你解決過的最難的bug」之類的問題。要求別人回憶系統的某一部分的具體原理會帶來大量的虛假負面判斷。人們不可能擁有他們修復的bug相關的一切知識，這種問題會給面試過程帶來很大壓力。
2、讓他們審查你們的代碼
這項活動一半是代碼審查一半是角色扮演。你可以藉此篩選出那些能夠提升團隊整體代碼質量並促進辦公室氛圍的人。
下面是代碼審查過程中需要關注的一些方面：
這個方法需要提前准備很多東西。你需要找到或編寫一段代碼供候選人審查。你還需要為你希望候選人找出的問題創建一個優先順序列表。不要讓面試管當場出題，一定要事先准備好。
在選擇需要審查的代碼時，不要選擇產品代碼。你的候選人沒有你所擁有的背景知識，這樣做實際上是將候選人與你的同事比較，而不是與其他候選人比較。
努力降低代碼示例中的復雜度。面試的時候，候選人沒有太多時間閱讀代碼，而且很可能他們並沒有想到會做代碼審查。熱身就要花很長時間。
在代碼中加入一兩個真實的bug，但不要強調找bug。一般來說，代碼審查並不是個好的找bug方法，特別是審查者從來沒有見過代碼的情況下。能自證的bug（如給需要數組的函數傳遞字元串）最好。在你的優先順序列表中，bug的優先順序應該是最低的，bug應該是給極其優秀的人的加分項。
最後，代碼應該做一些實際的事情。如果你的公司很出名，那可以選擇你的產品簡化版本。但如果你需要花大量時間為候選人提供背景信息的話還是算了。
最好的選擇要麼是虛構的代碼（也許可以選擇本文竭力避免的代碼面試中用到的代碼），要麼是開源代碼中的一個拉取請求。
一旦決定了要審查的代碼，你應該期待候選人找出下面這些東西：
如果代碼中沒有足夠的問題，就多加一些。
這里有個潛在的問題，我還沒有確定的答案。這個問題是：你是否應該提前將代碼發給候選人？
如果你這樣做，就又給那些有空閑時間的人以巨大的優勢。如果不這樣做，就要面臨增加面試壓力的風險。
我傾向於後者。好的面試官可以減輕壓力，方法之一就是讓面試者提前知道他們將做代碼審查，你也可以在審查開始之前介紹你的期望。
9. hr如何面試web前端工程師，該問哪些技術問題
hr如何面試web前端工程師，該問哪些技術問題
一、基本知識
我們生活在網際網路時代，你想知道的任何事情幾乎都能在15分鍾內找到相關資訊。可是，能找到資訊並不等於你會使用它。我認為所有前端工程師至少都應 該掌握某些基本的知識，才能有效地完成自己的工作。如果一遇到問題，就停下工作上網四處搜尋解決方案，怎麼可能保證按期完成工作呢？聽聽，還有誰在說「我 不知道，但我可以上網搜到。」請這些同學把手舉起來，讓大家認識一下（immediately raises a flag for me.）。下面我列出一些基本的知識點，這些都是我認為一名前端工程師（無論工作年頭長短）在沒有任何外來幫助的情況應該知道的。
[list][*]
DOM結構——兩個節點之間可能存在哪些關系以及如何在節點之間任意移動。
[*]
DOM操作——怎樣新增、移除、移動、復制、建立和查詢節點。
[*]
事件——怎樣使用事件以及IE和DOM事件模型之間存在哪些主要差別。
[*]
XMLHttpRequest——這是什麼、怎樣完整地執行一次GET請求、怎樣檢測錯誤。
[*]
嚴格模式與混雜模式——如何觸發這兩種模式，區分它們有何意義。
[*]
盒模型——外邊距、內邊距和邊框之間的關系，IE 8以下版本的瀏覽器中的盒模型有什麼不同。
[*]
塊級元素與行內元素——怎麼用CSS控制它們、它們怎樣影響周圍的元素以及你覺得應該如何定義它們的樣式。
[*]
浮動元素——怎麼使用它們、它們有什麼問題以及怎麼解決這些問題。
[*]
HTML與XHTML——二者有什麼區別，你覺得應該使用哪一個並說出理由。
[*]
JSON——它是什麼、為什麼應該使用它、到底該怎麼使用它，說出實現細節來。
[/list]
重申一下，上述這些知識點都應該是你應該「想都不用想」的東西。我一開始問的所有問題都是想摸清你對所有這些領域知識的掌握程度。雖然上面列出的這些知識點並沒有面面俱到，但我覺得你至少應該掌握這些，才有可能跟我坐到一間辦公室里來。
二、少量提問
我非常贊同面試者問的問題越少越好。反復問應聘者各種問題既不公平，也很無聊。我在任何一次面試中，通常只問三個大問題，但每個問題又會涉及我所能想到的多個方面。回答每個大問題一般要經過幾個步驟，這樣我就可以在每個步驟中穿插著問一些小問題。比如說：
這個問題牽扯到一組我想要考察的基本知識點：DOM結構、DOM操作、事件處理、XHR和JSON。如果我要求你對換一種處理股票價格的方式，或者 讓你在頁面中顯示其他資訊，就可以把更多的知識點包括進來。對於經驗比較豐富應聘者，我也可以自如地擴充套件要考察的知識范圍，最簡單像JOSN與XML的區 別、安全問題、容量問題，等等。
我還希望應聘者給出的任何解決方案中都不要使用庫。我想看到最原生態的程式碼，你就當頁面中沒有包含任何庫。你說你對哪個庫了解多少多少，但我不能把 關於庫的知識作為評判能力的因素，因為庫是會隨時間變化的。我需要的是真正理解庫背後的機制，特別是能夠徒手寫出一個自己的庫的人。
三、解決問題
做為一名前端工程師，最值得高興的事莫過於解決同一個問題會有很多種不同的方法，而你要做的就是找出最合適的方法來。我在提問的時候，經常會在應聘 者解釋完一種方法後問他們還有沒有第二種方法。此時我會跟他們說，假設你的這個方法由於種種原因被否決了，那麼你還能不能給出另一種方法。這樣做可以達到 兩個目的。
首先，可以測試出他們是否在毫無意義地復述書本中的東西。不能不承認，某些人確實有過目不忘的天賦，聽他們在那裡滔滔不絕地講，你會覺得他們什麼都 明白。可是，只要一跟這些人談到怎麼查詢方案無效的原因，以及能否拿出一個新方案來，他們往往就傻眼了。這時候，如果我聽到「我不明白這個方案為什麼不夠 好」之類的反問，心裡立刻就明白我的問題已經超出了他們的能力范圍，而他們只是想拿自己死記硬背的結論來矇混過關。
其次，可以測試出他們已經掌握的（還是那句話，「想都不用想」）瀏覽器技術知識。如果他們對瀏覽器平台的核心知識有較好的理解，想出解決同一問題的不同方案根本沒有那麼難。
對一名前端工程師來說，這絕對是最重要的能力。前端工程師在工作中遇到本該如此卻並未如此的難題（說你啦，IE6），應該說是一件很平常的事。一個方案無效就無計可施的人，做不了前端工程師。
考核應聘者解決問題能力的另一層原因，與我的個人喜好有關。在搞清楚應聘者知道什麼不知道什麼之後，我就會想著問一個他們知識領域之外的問題。這樣 做的目的，就是想看看他們怎樣運用已有的知識解決新問題。在解決問題的每一步，我也准備了一些提示，以防有人會卡殼打艮（在我面前15分鍾一言不發，對我 評價這個人毫無幫助）。我真正感興趣的，是他們能夠從上一步前進到下一步。我希望看到一個人就在我眼前學到新知識。
注意：所有問題都與瀏覽器技術相關。我不相信出幾道抽象的邏輯題，就能夠考出某人解決Web技術問題的能力。在我看來，這無異於讓素描大師畫肖像（或者讓劉翔跟博爾特同場競技），沒有意義，也得不到任何有價值的資訊。
HR一般不會面試太深的問題，主要是了解一下你之前的工作經歷，更多的是你自己描述，中間可能會問一些初級的問題，比如，你為什麼從上一家單位離職等類似問題。
一道web前端工程師面試題，求解答。
這樣的布局用絕對定位實現最合適，ABC的外層用相對定位，里邊各列用絕對定位就可以。至於CBA且B寬度自適應，還是用絕對定位，但只定位C,A分部到兩側，中間的列margin設成左右列的寬度就可以。
web前端工程師如何才能硬氣的跳槽？
web前端開發工程師想要硬氣的跳槽，起碼應該達到以下幾點：
1.掌握扎實的技術基礎，
需要掌握技術包括：HTML、CSS、JavaScript;
HTML是Web程式設計的基礎，HTML也是一種規范，一種標准，它通過標記符號來標記要顯示的網頁中的各個部分。網頁檔案本身是一種文字檔案，通過在文字檔案中新增標記符，可以告訴瀏覽器如何顯示其中的內容。
維護大型的CSS程式碼庫並非易事，特別是那些隨意散漫未經組織的CSS程式碼極易變成一團亂麻，所以，應該掌握CSS命名規范，來幫助開發者編寫優質的程式碼。
2.深入理解前端工程化和元件開發;
需要熟悉web前端框架—— React、Vue.js等，
React為我們提供了直接易用的，以狀態為核心的前端應用開發方式，前端工程師應該會分析React內部工作原理，討論React中簡單元件、類元件等渲染流程。
Vue.js單元測試是應用開發中不可或缺的部分，日常開發中會用到的Vue.js單元測試的例子，所以應該掌握。
3.熟練掌握Web開發相關知識
至少熟悉一門後端語言，例如Node.js、Java、Go等;
Node.js內部原理視非常重要的，應該明白Node.js的主程序是如何啟動的、如何載入內建模組、os包如何實現等等。
4.對技術有熱情，有一定前端架構能力或者技術深度;具備團隊合作意識強，能夠多團隊協作開發;具備企業級大型前端應用開發經驗更佳。
如何識別一個人是web前端工程師
前端工程師需要懂得設計類程式碼和js，有需要了解一些後台語言，例如PHP等。
如何實現成為web前端工程師的夢想
1.入門階段：能夠解決一些問題的水平。有一定的基礎(比如最常見的HTML標簽及其屬性、事件、方法;最常見的CSS屬性;基礎的JavaScript程式設計能力)，能夠完成一些簡單的Web前端研發需求。
2.進階階段：將JavaScript、HTML、CSS之類的編碼幫助手冊里的每個方法/屬性都通讀幾遍!只有將基礎打好，以後的路才能走的順暢。
3.入室：最強程式碼，知道所有能夠解決需求的各種方案，能夠選擇使用最優秀的方案滿足需求。這個級別基本上產品開發程式設計中的程式碼主力。程式設計師應該能夠肯定的回答：對於這個需求而言，我的程式碼就是最優秀的程式碼。
4.注重細節，注意那些當前需求里沒有明文給出的細節：程式碼效能的差異、執行平台(瀏覽器)的差異、需求的隱性擴充套件、程式碼的向後相容等等。
如何了解web前端工程師和UI設計師
web前端工程師是不參與任何的設計，直接將網站美工製作的網站效果圖使用ps按照效果圖進行切片並使用、css、js等程式碼進行網頁的製作，最終編寫出符合w3c標準的相容各個主流瀏覽器的靜態頁面，同時還需要按照後台開發人員的要求留下一些後台資料的介面。所以說網站前端工程師更多的是程式設計而不是設計。
UI設計師一般是學美術或者設計出身，精通photoshop、AI、AE等平面設計工具，其在網站開發過程的中的職責就是按照客戶或者公司的需求設計出符合客戶需求和介面或者顏色符合大眾視覺的網站效果，如根據不同行業的需求設計顏色、設計介面風格等，其工作的最後成果就是網站的效果圖。
web前端工程師進階學習路線如何走
less和sass什麼時候學都行，1,2天就能學會。這個不著急，沒有什麼承上啟下的作用，可以單獨拿出來學。
bootstrap就是一個框架，把最主要的柵格系統看看就好。其他的大概了解能幹啥就行，很多公司，是不讓用bootstrap的，而是用原始碼自己寫。這個用一天的時間沒啥問題。
node.js和angular比較重要，如果學會，算是上了一個台階了。所以重點說說這個。
angular屬於mvvm框架，一開始覺得angular挺復雜的，所以想學一個簡單的，輕量級的，所以決定先學vue。但是在了解的過程中發現，很多的專業名詞，沒聽過，或者理解不透。所以又開始從頭學習node.js。在學習node.js的過程中又開始迷茫，發現了很多JS不懂的地方。
所以，又開始深入研究js的dom，函式，ajax，陣列等。總之用了很長的時間，浪費了很長時間。
最後總結一下啊。其實，沒必要鑽那麼多牛角尖。
先做著vue的例子，不懂的地方，直接略過，很多時候，不理解的不懂的東西，用著用著，突然就能明白。照貓畫虎先把VUE的例子跟著做一遍之後，同時梳理一下涉及到的JS知識點。能自己用vue做出幾個小成品的時候，開始結合js研究node.js。之後再去涉及angular。
angular差不多有個大概了解的時候，反過頭接著學vue，你會發現，又會發現很多新東西。
web前端這個東西特別有意思，當你達到一個高度，返回來再看以前的技術，會發現，哎呀，竟然又能發現新大陸。
廈門web前端工程師培訓哪家好
培訓學校很多，沒有具體的衡量標準的。但是可以從幾方面去選擇：
1 有很多優秀導師的
2 培養出很多優秀學員的
3 只做培訓的，沒有做其他的
4 做的比較久的。
北京WEB前端工程師培訓哪個好
建議找全程面授課程的地方學習，課程體系很重要，現在企業在用人方面講究全棧的前端工程師人才，所在在課程選擇上要慎重，學習內容要基於HTML5，要包含pc端+移動端+後端。這要才能學的系統，就業上才會有所保障。
10. Web前端企業面試題
答：
一、display和visibility的相同與不同點
1、相同點：display和visibility都有講元素隱藏的意思
2、不同點：display是元素隱藏，隱藏的元素不佔文檔流
而visibility隱藏的元素仍然占文檔流
二、display和visibility的屬性值
1、display
2、visibility
答：
在開發過程中經常需要循環遍歷數組或者對象，使用最多的方法 forEach、for…in 、 for…of ，整理一下他們的異同點
for循環
其實除了這三種方法以外還有一種最原始的遍歷，自Javascript誕生起就一直用的 就是for循環，它用來遍歷數組
for循環中可以使用return、break等來中斷循環
結果：
forEach
對數組的每一個元素執行一次提供的函數（不能使用return、break等中斷循環），不改變原數組，無返回值undefined。
輸出結果：
for…in
循環遍歷的值都是數據結構的鍵值
總結一句: for in也可以循環數組但是特別適合遍歷對象
結果：
for…of
它是ES6中新增加的語法，用來循環獲取一對鍵值對中的值
循環一個數組
循環一個普通對象（報錯）
答：
px：像素（Pixel）,相對長度單位。像素px是相對於顯示器屏幕解析度而言的 。--即解析度不同的機型當前對應的距離可能發生變化。(1Inches=xPx)。
所以相對於同一機型來說是一個絕對的長度單位。
em：是相對長度單位。相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置，則相對於瀏覽器的默認字體尺寸 。
以其父級元素為基準來變化長度。所以其演算法不是一個固定的值。
rem：是CSS3新增的一個相對單位（root em，根em） 。
那麼其好用在用可以直接設置HTML的font-size，然後在其子類都是以這個大小為基準變化的值。
在移動設備上，我們常常設置
此方式的目的是為了將當前屏幕(PC)解析度的px轉化成手機端的px，讓px在手機上能夠兼容此方式。
因此，此時看見的12px與PC端的12px無異。但是，如果不寫著個meta的話，那麼，瀏覽器會一直以PC的視圖來決定手機端的px的大小，讓視圖看起來變小了很多。
那麼，響應式頁面則經常配合媒體查詢media 來設置不同解析度下手機的各種不同的配置機構，然後根據父級來變化所有的相對長度。
基礎篇
1.shift
// 刪除原數組的第一項，並返回刪除元素的值，如果數組為空則返回undefined
2.unshift
// 將參數添加到原數組開頭，並返回數組的長度
//註：此方法在ie6.0下
// 測試的返回值始終為undefined，在firefox下測試的返回值為7，所以此方法不可靠
// 一般需要用返回值時可用splice代替
3.pop
// 刪除原數組的最後一項，並返回刪除元素的值；如果數組為空則返回undefined
4.push
// 將參數添加到原數組末尾，並返回數組的長度
5.concat
// 返回一個新數組，是將參數添加到原數組中構成的
6.splice
7.reverse
8.sort(orderfunction)
9.slice(start,end)
10.join(separator)
11.indexOf
12.lastIndexOf
13. Array.isArray()
14. Array.toString()
進階篇
1.forEach
是最為常用的情景，它至於遍歷，可以在獲取當前數據項的前提下，對數據進行修改。它沒有返回值。理解起來也是最容易的。
2.map
map的本意就是映射，也就是將一個值從一種形式映射到另一種形式，比如將key映射到value。它的每一次遍歷都會有一個返回值。這些返回值組合成最終的結果數組。事實就是如此
forEach和map對比
相同點
1）都是循環遍歷數組中的每一項；
2）forEach()和map()匿名函數的參數相同，參數分別是item（當前每一項）、index（索引值）、arr（原數組）；
3）this都是指向調用方法的數組；
4) 只能遍歷數組；
不相同點
1）map()創建了新數組，不改變原數組；forEach()可以改變原數組。
2）遇到空缺的時候map()雖然會跳過，但保留空缺；forEach()遍歷時跳過空缺，不保留空缺。
3）map()按照原始數組元素順序依次處理元素；forEach()遍歷數組的每個元素，將元素傳給回調函數。
3.filter
它致力於從已有的數組中篩選出符合一定條件的數據項，最後的返回值是所有符合條件的數據項構成的數組。它不會修改原來的數組。記住，它的立足點就是篩選。也僅僅是篩選。還有一點需要注意：每一次遍歷都會有一個返回值，它的類型是布爾類型。返回值只有是true，當前遍歷項才會被篩選中。不要試圖在filter中去修改原始數組。
理解: 就是在一堆數據裡面去篩選你需要的數據 或者 剔除你不需要的數據
4.find()
返回通過測試的數組的第一個元素的值,
理解:假如你去一個一群人的地方去找人 你說我找xxb 他要是在那裡就找到 不在那裡就是undefined
在第一次調用 callback 函數時會確定元素的索引范圍，因此在 find 方法開始執行之後添加到數組的新元素將不會被 callback 函數訪問到。如果數組中一個尚未被callback函數訪問到的元素的值被callback函數所改變，那麼當callback函數訪問到它時，它的值是將是根據它在數組中的索引所訪問到的當前值。被刪除的元素仍舊會被訪問到。
語法
array.find(function(value, index, arr),thisValue)
value:必須，代表當前元素，其他四個參數都是可選，index代表當前索引值，arr代表當前的數組，thisValue代表傳遞給函數的值，一般用this值，如果這個參數為空，undefined會傳遞給this值
返回值：返回符合測試條件的第一個數組元素的值，如果沒有符合條件的則返回undefined。
擴展: findIndex()方法的用法與find()方法非常類似，返回第一個符合條件的數組成員的位置，如果所有成員都不符合條件，則返回-1。自己try吧
5.every
理解: 這個就像 上課了 老師說 昨天布置的作業 只要有一個人沒有寫完 今天就不講課 然後挨個檢查 當檢查到有一個沒有寫完的時候 就不檢查了 返回 不講課了(false)
6.some
理解: 相當於在一個數組裡面找你想要的那個數 找到了 就返回true 找不到就返回false
7.rece
它這個方法是接收一個函數作為累加器,將數組中的值(從左向右)開始合並,最總為一個值 然後返回出來,callback
他可以傳四個參數:
1,previousValue:上一次調用回調返回的值,或者是提供的初始值(initialValue)
2,currentValue:數組中當前被處理的元素
3,index:不啰嗦,自己顧名思義去吧
4,array:返回調用rece的數組
彩蛋: 這里附上前幾天某某人比較喜歡的切割字元串的方法
substring() 和 substr()
相同點： 如果只是寫一個參數，兩者的作用都一樣：都是是截取字元串從當前下標以後直到字元串最後的字元串片段。
不同點： 第二個參數
substr(startIndex, lenth) // 第二個參數是截取字元串的長度（從起始點截取某個長度的字元串）；
substring(startIndex, endIndex) // 第二個參數是截取字元串最終的下標 （截取2個位置之間的字元串,『含頭不含尾'）。
1：在使用vue框架的過程中，我們經常需要給一些數據做一些初始化處理，這時候我們常用的就是在created與mounted選項中作出處理。
首先來看下官方解釋，官方解釋說created是在實例創建完成後唄立即調用。在這一步，實例已完成以下配置：數據觀測 (data observer)，屬性和方法的運算，watch/event 事件回調。然而，掛載階段還沒開始，$el 屬性目前不可見。
這話的意思我覺得重點在於說掛架階段還沒開始，什麼叫還沒開始掛載，也就是說，模板還沒有被渲染成html，也就是這時候通過id什麼的去查找頁面元素是找不到的。下面看下實例來證明。
所以，一般creadted鉤子函數主要是用來初始化數據。
2：mounted鉤子函數一般是用來向後端發起請求拿到數據以後做一些業務處理。官方解釋如下：
el 被新創建的 vm.$el 替換，並掛載到實例上去之後調用該鉤子。如果 root 實例掛載了一個文檔內元素，當 mounted 被調用時 vm.$el 也在文檔內。
這意思是該鉤子函數是在掛在完成以後也就是模板渲染完成以後才會被調用。下面看實例
下面是結果
nihao
取到了值，這說明這時候vue模板已經渲染完畢。因此，Dom操作一般是在mounted鉤子函數中進行的
computed:{} 計算屬性，什麼是計算屬性呢，我個人理解就是對數據進行一定的操作，可以包含邏輯處理操作，對計算屬性中的數據進行監控。計算屬性是基於它的以來進行更新的，只有在相關依賴發生改變時側能更新變化，以函數的形式返回結果。然後可以像綁定普通屬性一樣在模板中綁定計算屬性。
總結：
通常created使用的次數多，而mounted通常是在一些插件的使用或者組件的使用中進行操作，比如插件chart.js的使用: var ctx = document.getElementById(ID);通常會有這一步，而如果你寫入組件中，你會發現在created中無法對chart進行一些初始化配置，一定要等這個html渲染完後才可以進行，那麼mounted就是不二之選。
methods:{}中的方法都需要主動去觸發，比如點擊click之類的
而created(){}、mounted(){}、裡面的代碼都是自動去執行的，即vue生命周期到了哪一步就直接去執行對應鉤子函數裡面的代碼了，無需手動去執行
created中主要放初始化獲取數據之類，mounted()中掛載到具體的DOM節點
computed:{} 計算屬性，什麼是計算屬性呢，我個人理解就是對數據進行一定的操作，可以包含邏輯處理操作，對計算屬性中的數據進行監控。計算屬性是基於它的以來進行更新的，只有在相關依賴發生改變時側能更新變化，以函數的形式返回結果。然後可以像綁定普通屬性一樣在模板中綁定計算屬性。
mounted 是生命周期鉤子，vue的生命周期中一個實例的mounted只會運行一次。mounted在vue的渲染模板掛載到$el元素上才會調用，很顯然你export的時候el都么有自然不會運行mounted鉤子函數了。
所有的方法都應該在methods里定義，然後在created或者mounted里 使用this調用方法，用這種方式實現初始化
6、Vue中組件之間的傳參方式有哪些方式？
Vue 組件傳參的八種方式總結
Vue 組件的使用不管是在平常工作還是在面試面試中，都是頻繁出現的。因此系統的梳理一下組件之間的傳參還是非常有必要的
一、props 傳參
子組件定義 props 有三種方式:
// 第一種數組方式
// 第二種對象方式
// 第三種對象嵌套對象方式
第三種對象默認支持 4 種屬性，並且都是非必填的。可以隨意使用
父組件傳參的倆種方式
第一種靜態屬性傳參
注意：
1、在不定義 props 類型的情況下 props 接受到的均為 String。
2、當 props 屬性指定為 Boolean 時，並且只有屬性 key 沒有值 value 時接受到的是 true
第二種動態屬性傳參
注意：
1、需要區分非簡寫形式傳入的值是對象，則會對應 props 中多個值
2、會保留傳入值的類型
3、如果是表達式則獲取到的是表達式的計算結果
二、attrs 和listeners
$attrs
$attrs 會獲取到 props 中未定義的屬性（class 和 style 屬性除外）,支持響應式。常用的場景有倆種：
組件嵌套組件時可以使用 $attrs 來支持過多的屬性支持。比如 elementUI 的 table 組件。支持的屬性十幾個，而平常封裝的時候用的最多的也就一倆個。
屬性默認是添加在父組件上的，有時候想把多餘的屬性添加在子組件上（可以結合 inheritAttrs: false 屬性，讓父屬性不接受多餘的屬性）
$listeners 定義的事件都在子組件的根元素上，有時候想加到其他元素上。就可以使用 $listerners。它包含了父組件中的事件監聽器(除了帶有 .native 修飾符的監聽器)
三、$emit 通知
這里有一道考題: for 循環的時候如何拿到子組件的傳值和 for 中循環的值
答案有倆種，一是 $event, 二是 閉包。只是需要注意 $event 只能獲取到第一個值
四、v-model
這個其實是一種通過 emit，on 的組合方式。優點再於同步值方便,寫法優雅。下面三種寫法其實是一個意思
五、插槽
六、$refs, $root, $parent, $children
$root 獲取根組件
$parent 獲取父組件
$children 獲取子組件(所有的子組件，不保證順序)
$refs 組件獲取組件實例，元素獲取元素
七、project / inject
注意：注入的值是非響應的
八、Vuex
這個相當於單獨維護的一組數據，就不過多的說了。
watch，computed和methods的關系
1.watch和computed都是以Vue的依賴追蹤機制為基礎的 ，它們都試圖處理這樣一件事情：當某一個數據（稱它為依賴數據）發生變化的時候，所有依賴這個數據的「相關」數據「自動」發生變化，也就是自動調用相關的函數去實現數據的變動。
2.對methods:methods裡面是用來定義函數的，很顯然，它需要手動調用才能執行。而不像watch和computed那樣，「自動執行」預先定義的函數
watch和computed各自處理的數據關系場景不同
1. watch 擅長處理的場景： 一個數據影響多個數據
2. computed 擅長處理的場景： 一個數據受多個數據影響
watch用法 監聽下記haiZeiTuan_Name的值，會改變其他所有的值
結果：this.suoLong會變為 '橡膠海賊團索隆',以此類推
computed用法 監聽下記firstName，secName，thirdName的值，會改變luFei_Name的值
methods和computed的區別例子
注意兩次點擊computed返回的時間是相同的！！
1.兩次點擊methods返回的時間是不同的
2.注意兩次點擊computed返回的時間是相同的
【注意】為什麼兩次點擊computed返回的時間是相同的呢？new Date()不是依賴型數據 （不是放在data等對象下的實例數據） ，所以computed只提供了緩存的值，而沒有重新計算
只有符合：1.存在依賴型數據 2.依賴型數據發生改變這兩個條件 ,computed才會重新計算。
參考：http://www.cnblogs.com/penghuwan/p/7194133.html
答：https://codecat.blog.csdn.net/article/details/100031285
1、Promise
Promise 是非同步編程的一種解決方案，比傳統的解決方案——回調函數和事件——更合理和更強大，簡單地說，Promise好比容器，裡面存放著一些未來才會執行完畢（非同步）的事件的結果，而這些結果一旦生成是無法改變的
2、async await
async await也是非同步編程的一種解決方案，他遵循的是Generator 函數的語法糖，他擁有內置執行器，不需要額外的調用直接會自動執行並輸出結果，它返回的是一個Promise對象。
兩者的主要用法、語法就不贅述了，感興趣的同學可以自行查閱 es6中文文檔
兩者的區別
1、Promise的出現解決了傳統callback函數導致的「地域回調」問題，但它的語法導致了它向縱向發展行成了一個回調鏈，遇到復雜的業務場景，這樣的語法顯然也是不美觀的。而async await代碼看起來會簡潔些，使得非同步代碼看起來像同步代碼，await的本質是可以提供等同於」同步效果「的等待非同步返回能力的語法糖，只有這一句代碼執行完，才會執行下一句。
2、async await與Promise一樣，是非阻塞的。
3、async await是基於Promise實現的，可以說是改良版的Promise，它不能用於普通的回調函數。
簡單來看，這兩者除了語法糖不一樣外，他們解決的問題、達到的效果是大同小異的，我們可以在不同的應用場景，根據自己的喜好來選擇使用。