『壹』 那些陌生又熟悉的前端面試題
過完年需要跳槽的小夥伴還是挺多的，又要開始刷前端面試題了！會不會有一種錯覺，看著這道面試題很熟，但是不知道該如何做？或者有答案又不知道是否正確？或者使用編輯器可以運行出來正確的答案，但是不知道怎麼得來的，這些你都中招了嗎？
JavaScript 語言是一門弱類型語言，存在許多類型錯誤，因此 ES6 引入了嚴格模式概念。
如果不加 『use strict』 常規模式下就是屬於非嚴格模式。
嚴格模式
在 js 文件頂部添加 『use strict』 就屬於嚴格模式，嚴格模式也可以指定在函數內部。
嚴格模式，是為 js 定義來了一種不同的解析與執行模型，在嚴格模式下，ECMAScipt 3 中一些不解和不確定的行為將得到處理，而且會對不安全的操作會拋出異常。『use strict』 會告訴瀏覽器引擎可以切換到嚴格模式執行。
嚴格模式與非嚴格模式區別
常見筆試題：
試試這道筆試題你會做嗎？
要說 js 的深淺拷貝，就不得不提 js 的兩大數據類型：基本數據類型和引用類型。
基本數據類型的變數名和值都存儲在棧中，對於引用類型的變數名存儲在棧中，而值存儲在堆中。由於存儲方式不同，所以導致了他們復制的時候方式不同。
賦值
基本數據類型賦值的時候，創建的基本數據類型會在內存中開辟一個新空間把值復制過來，而引用類型採用的是地址存儲，如果直接把一個引用數據直接賦值給另外一個數據，就相當於直接把自己存儲值的地址給了另外一個變數，所以改變一個的值，也會改變另外一個的值。
深淺拷貝是如何定義的？
假設有 p 和 P 兩個變數，如果P 是拷貝了 p 的，我們通過修改 P 來觀察 p 是否發生改變，如果跟著改變，就是淺拷貝，如果是不改變，就說明是深拷貝。
基本類型復制的時候會開辟新的內存空間，所以兩個值是相互獨立的，引用類型復制的時候就要看是復制的內存地址還是復制一個新的堆。所以深拷貝主要針對的是引用類型的數據。
淺拷貝的常見的方式：
1、直接賦值
2、Object.assign
深拷貝的常見方式：
引用數據類型最常用的就是 Object 和 Array ，引用數據內部的數據也可以是多樣化的，進行深拷貝時，也要適當地根據數據結構進行合適的復制方式，具體的深拷貝方法分別有：
1、數組中只包含基本數據類型
2、對象中只包含基本數據類型
3、對象或數組里含有一層或多層引用數據類型時
深淺拷貝的常見應用主要是數據的增刪改操作。
大廠筆試題：
這是一道關於 this 指向的面試題，接下來我們就說說 this 是如何指向的？
this 對象是運行時基於函數的執行環境綁定的：
看完上述 this 指向解釋，你就可以做上邊的那道面試題了。
如何改變 this 的指向？
call 、bind 和 apply 這三個函數都是用來改變 this 指向的，就是改變函數執行時的上下文。
修改上述面試題：
call 、bind 和 apply 改變 this 指向，最大作用就是實現代碼復用。
至於 call、bind 和 apply 的區別，可以自行去了解下。
有了上邊那個表，事情就變得簡單了！
關系運算符進行運算時，不同類型的值會自動轉化為相同類型值，然後進行
1、兩邊有一個是字元串一個是是數字時，字元串調用 Number 方法，將字元串轉為數字，所以：
2、如果兩邊都是字元串時，按照字元串的 unicode 編碼來轉換的，所以：
3、字元串進項比較時，先比較第一位，如果不相等直接得出結果，如果第一項相等，會繼續使用第二項進行比較。
4、轉為布爾值都為 false 的類型分別有：undefined 、null 、0、NaN、false、『』
5、NaN表示的是非數字，但是這個非數字也是不同的，因此 NaN 不等於 NaN，兩個NaN永遠不可能相等。
6、關系運算有一個數值，將另外一個值也轉為 number 類型。
7、有邏輯運算的，將其他數據類型轉為 boolean 值。
8、直接使用兩個空數組比較，數組地址不同，所以不相等。
評論區可以留下最近你想學習的知識點，或面試題類型！
『貳』 2022前端開發面試記錄（深圳篇）
2022年來到深圳，感覺到了與之前所在城市的差異，心裡多少有點落差。雖然時機不太對吧，但是相信一切都會好起來的，給自己加油呀！
整理了一些面試被問到的問題，雖然很多是無效面試，但是我也強行問了面試官，從他們的回答中猜測了一下他們關注的面試點，所以也算是有點收獲吧，只是浪費了很多簡歷和路費，哭唧唧。
——1、區塊鏈——
1-1、vue生命周期；
1-2、vuex屬性；
1-3、用戶開始登錄到登錄成功都發生了什麼；
1-4、git常用的命令；
——2、金融：vue——
筆試：
2-1、深淺拷貝的區別，為什麼會出現深淺拷貝，淺拷貝的優勢；
2-2、強制中斷 foreach 遍歷；
2-3、多處組件復用；
2-4、你對前端是什麼概念，前端在整個軟體生態內是什麼角色；
2-5、Vue2 中數據變化但視圖沒有發生同步更新，描述一下出現的場景，解決方式，以及該問題發生的可能原因；
2-6、nextTick 是如何確保開發者能夠獲取到最新的 DOM 狀態的；
2-7、如何使用 mixins，有何利弊；
2-8、使用 Hooks 模式開發時，useMemo，useCallback 常用來作為優化的手段。描述一下它們各自的適用場景，以及背後的原理實現?；
2-9、前端從 Jquery 時代演變至如今的三大框架，這種演變的根源是什麼，jquery 解決了什麼問題，如今的三大框架又是為了解決什麼問題出現的？
視頻面試：
2-10、js遍歷樹形結構，每個節點都有一個唯一ID，只能遍歷一次；
2-11、組件封裝的意義；
——3、知識產權：vue2、vue3、ts、react——
3-1、說一說面向對象的理解，包括繼承、封裝、多態等；
3-2、說一說promise；
3-3、webpack優化；
3-4、vuex使用場景；
3-5、描述一下對vue響應式原理的理解；
3-6、vue生命周期；
3-7、父子組件鉤子函數執行順序；
3-8、v-if和v-show；
3-9、js數據類型；
3-10、實現深拷貝；
——4、物流——
4-1、vue生命周期；
4-2、生命周期-修改元素樣式在生命周期的哪個階段；
4-3、生命周期-修改數據在哪個階段；
4-4、生命周期-destroy裡面會做哪些操作；
4-5、怎麼修改title的內容；
4-6、父子組件傳參的具體寫法；
4-7、v-model的多種寫法；
4-8、js數據類型；
4-9、判斷數組的方法；
4-10、實現左邊固定右邊自適應的布局；
4-11、實現div垂直水平居中；
4-12、flex:1；
4-13、flex詳解；
4-14、call,apply,bind是干什麼的；
——5、新興產業——
5-1、封裝路由，怎麼攔截路由；
5-2、瀏覽器緩存有哪些，又問localStorage和sessionStrorage的區別和應用場景；
5-3、瀏覽器強緩存和協商緩存；
5-4、webpack打包機制，構建過程和配置；
5-5、性能優化方法；
5-6、前端的業務和後端的API是怎麼做到數據實時請求的（問的其實是前端對後端API介面的封裝和管理）；
5-7、computed和watch；
5-8、說了幾個關於大屏的應用場景，有沒有做過，怎麼做的；
——6、某水果：vue2、vue3、ts、各種前沿技術都用——
6-1、怎麼封裝一個組件庫/工具類庫，比如vue封裝過什麼復雜組件，jquery封裝過什麼類庫；
6-2、get和post的區別，傳參格式等；
6-3、promise怎麼用的；
6-4、原型鏈，test()的原型鏈；
6-5、websocket；
6-6、es6中的generator；
6-7、es6中的set和map有啥區別，set為什麼能去重；
6-8、項目難點；
——7、醫療健康：vue——
7-1、vue自定義指令配置；
7-2、webpack的理解；
7-3、對node的了解，用過express嗎；
7-4、項目中的拖拽是怎麼做的；
7-5、websocket和socket的區別；
7-6、聽過mqtt嗎，因為沒聽過所以解釋了一下activemq的用法；
7-7、二維地圖的聚合，如果有十萬個點，會做什麼優化；
7-8、地圖實現多個點連成一條線會怎麼做；
7-9、地圖實現一條曲線；
7-10、內網下git怎麼用的；
7-11、openlayers渲染機制；
7-12、父子組件通信方法；
7-13、router中實現攔截；
7-14、對象合並的方法；
7-15、父子組件的生命周期執行順序，渲染階段為什麼會先執行父組件再執行子組件；
7-16、vue生命周期；
7-17、npm run dev, run build可以在項目中的什麼位置找到；
7-18、vue中跳轉頁面的方法；
7-19、mixins用過嗎；
7-20、判斷引用類型的方法；
7-21、js數據類型；
7-22、判斷基本數據類型的方法；
7-23、for in和for of的用法和區別，兩者遍歷的是索引還是屬性值，兩者都可以遍歷對象嗎；
7-24、foreach和map的區別，兩者會不會改變原數組；
7-25、主要用什麼技術棧；
7-26、行內元素和塊級元素的區別，分別都有哪些，行塊級元素有哪些；
7-27、div垂直水平居中，grid知不知道怎麼用；
7-28、splice和slice；
——8、智慧園區：vue2、vue3、ts、uniapp——
8-1、flex了解嗎，flex布局方向，flex:1 0的頁面效果是怎樣的；
8-2、做過移動端嗎，了解uniapp嗎；
8-3、keep-alive；問了一個沒聽明白的，可能和keep-alive有關系；
8-4、vuex中的action；不用vuex，怎麼代替vuex；
8-5、promise.all和promise.on；
8-6、防止表單重復提交；
8-7、async，await的使用；
8-8、vue3和ts的了解；
8-9、防抖怎麼控制時間；
8-10、vue中的data為什麼要設計成一個函數；
——9、智慧工地：vue、uniapp、小程序——
9-1、Vuex是干什麼的；
9-2、openlayers怎麼用的；
9-3、性能優化；
9-4、spa首屏載入優化；
9-5、bundler.js太大，打包怎麼優化；
9-6、加密方式了解多少，比如md5,base64等，一大堆沒聽過的；
9-7、冒泡排序的實現原理；
9-8、js設計模式；
——10、某快遞公司外包——
10-1、一棵樹的數據，給的是列表格式，轉換成樹形結構；
10-2、項目相關的，聊天怎麼做的，拖拽怎麼做的，拖拽的數據怎麼渲染的，拖拽重疊怎麼處理的；
10-3、js設計模式；
——11、三維：vue、cesium——
11-1、一棵樹的數據，給的是列表格式，轉換成樹形結構；
11-2、openlayers怎麼用的，發布過wms嗎，發布流程是怎樣的；
11-3、openlayers轉換經緯度的方法名是什麼；
11-4、cesium常用的函數；
11-5、vue數據雙向綁定原理；
11-6、Vue中data屬性如果改變一個數組的下標，會不會馬上發生變化，不變化可以怎麼解決
11-7、數組常用方法有哪些；
11-8、 map和filter的區別；
11-9、es6常用的方法；
11-10、父子組件通信，兄弟組件通信；
11-11、new具體進行了什麼操作；
——12、醫療：vue、angular——
12-1、js渲染機制和運行機制；
12-2、vue數據綁定原理；
——13、建設行業：vue、uniapp——
筆試：
13-1、||與&運算符；
13-2、垂直居中方案；
13-3、let a=arr, b=a, c=arr.concat(), a[0]=3，列印b和c，應該是深淺拷貝；
13-4、實現font-size:12；
13-5、介面路徑，給一個地址 http://localhost/projectname/resource/index(http://localhost/projectname/resource/index).html ，根據url請求介面路徑寫出完整路徑，』/ geturl.do 』，』 geturl.do 』，』../ geturl.do 』；
13-6、微信小程序流程和主要文件；
13-7、獲取url參數及內容；
13-8、$(function(){}) / (function(){}) / (function(){})()的區別；
13-9、前端優化方案；
面試：
13-10、項目難點；
13-11、git工作流；
13-12、jquery項目會不會用webpack打包；
13-13、webpack優化；
13-14、web優化；
——14、文化：uniapp——
14-1、ssr渲染；
14-2、ajax和axios的區別；
14-3、cookie和session的區別；
14-4、vue生命周期；
14-5、數據請求寫在哪個生命周期中；
14-6、router的history模式和hash模式；
14-7、工作中的開發流程；
14-8、uniapp的開發流程和坑；
14-9、uniapp滑動問題，下滑切換視頻不生效，一般是什麼原因；
14-10、uniapp載入速度慢，點擊載入圖片速度太慢，一般是什麼原因；
——15、企業平台某外包：vue，node，性能優化——
15-1、說一說websocket；
15-2、vue數據雙向綁定原理；
15-3、項目難點；
15-4、對mvvm、mvc、mvp等的理解；
15-5、vue的常見指令；
15-6、computed和watch；
15-7、class和style怎麼綁定；
15-8、ajax和axios的區別；
15-9、axios攔截器，axios的post請求；
15-10、對前端渲染，服務端渲染的理解；
——16、智慧城市：vue，node，three.js——
16-1、vue生命周期；
16-2、vue組件通信方法；
16-3、js的繼承；
16-4、oracle、mysql、sqllite的區別；
16-5、oracle連表查詢；
16-6、openlayers項目場景；
16-7、cesium項目場景；
——17、租房：jquery+layui，vue2——
17-1、筆試：
17-2、foo列印題；
17-3、this列印題；
17-4、變數提升列印題；
17-5、let arr=[1,2,[5,8,[9,[3,5,]7,]20,37]] 把數組扁平化成一個數組，並進行去重升序;
17-6、let a=[1,2,3,4,5,6,7]; let b=[4,5,6]; 求b在a中第一次出現的位置；
17-7、面試：主要問項目
——18、跑腿：vue2，vue3+ts——
18-1、對html5語義化的理解；
18-2、css實現一個三角形；
18-3、css怎麼實現0.5px的線，為什麼有這種需求，涉及到兼容性問題；
18-4、怎麼解決變數提升的問題；
18-5、es6新增了哪些定義變數的方式；
18-6、const定義的變數可以被修改嗎；
18-7、map和filter的區別，會改變原數組嗎；
18-8、es6去重的方法；
18-9、談一談對promise的理解；
18-10、除了鏈式調用，promise還可以怎麼處理同步請求(async/await)；
18-11、對vue響應式原理的理解，核心是什麼；
18-12、對vue生命周期每個階段的理解；
18-13、為什麼要用key，key有什麼作用；
18-14、v-if和v-show；
18-15、Vue中data為什麼是一個函數；
18-16、vue各場景下的傳值方式有哪些，比如父子組件，兄弟組件，祖孫組件；
18-17、對vuex的理解和使用場景；
18-18、vue常見修飾符；
18-19、Vue3用過嗎(因為沒用過，所以就只針對響應式原理說了一下vue3和vue2的區別)；
——19、實業：jquery，vue2，vue3——
筆試：需要解釋
19-1、html5新標簽，css3新特性；
19-2、js+css3實現某元素以50px每秒的速度左移100px；
19-3、css實現左中右布局，不改變文檔流；
19-4、js兼容性有哪些，以及常見的解決方案；
19-5、描述一下事件循環機制eventloop，eventloop解決了什麼問題；
19-6、給了一個題，大概是後端返回的介面數據，data的格式有很多，比如null，對象，數組，字元串等，怎麼處理這種問題；
19-7、前端性能優化方法，首屏頁面怎麼優化；
19-8、用js寫一個方法實現數據去重並排序(用es5和es6+實現)；
19-9、給定一個數組，把數組中為0的往後排，其他值按順序排序; （示例：[1,0,4,0,5,3]轉換結果為[1,3,4,5,0,0]）
19-10、用0，1，2代表紅黃藍三種顏色，實現以下排序，不能用array.sort實現;（示例：[0,1,0,2,0,1,2]轉換結果為[0,0,0,1,1,2,2]）
面試：
19-11、flex布局；flex:1對應的屬性；
19-12、講一下原型鏈； proto 和prototype有什麼區別；字元串有沒有原型；給定一個str，str.test()調用的誰的test方法；
19-13、講一下閉包；什麼情況下才能算是閉包；形成閉包的條件；列了三個題讓你判斷是不是閉包；
19-14、v-if和v-show是干什麼的；應用場景有哪些；給定一對父子組件，默認值是false，另外有一個ajax請求，值發生了以下變化（false true false true true），在v-show和v-if中，父子組件的哪個階段里會請求ajax；
19-15、computed的實現原理，怎麼實現一個computed；
19-16、css中，transform，margin，position的都是怎麼渲染的，渲染機制是什麼；amd，cmd，commonjs了解嗎；
『叄』 騰訊WEB前端筆試題和面試題答案
如下分享是一份完整的騰訊WEB前端筆試題，大家有空可以練一練！
一、耐心填一填!(每空4分，共24分)
1. 為span設置類a與b,應編寫HTML代碼_
_
_________。
2. 設置CSS屬性clear的值為_both___________時可清除左右兩邊浮動。
3. ____li________標簽必須直接嵌套於ul、ol中。
4. CSS屬性_____margin_______可為元素設置外補丁。
5. 設置CSS屬性float的值為___none_________時可取消元素的浮動。
6. 文字居中的CSS代碼是____text-align:center________。
二、精心選一選!(每題4分，共16分)
1. 下列哪個樣式定義後,內聯(非塊狀)元素可以定義寬度和高度( C )
A. display:inline B. display:none C. display:block D. display:inheric
2. 選出你認為最合理的定義標題的方法( C )
A. 文章標題
B.
文章標題
C.
文章標題
D. 文章標題
3. br標簽在XHTML中語義為( A )
A.換行 B.強調 C.段落 D.標題
4. 不換行必須設置( AC )
A.word-break B.letter-spacing C.white-space D.word-spacing
5. 在使用table表現數據時，有時候表現出來的會比自己實際設置的寬度要寬，為此需要設置下面哪些
屬性值( AD )
A. cellpadding=”0″ B. padding:0 C. margin:0 D. cellspacing=”0″
三、判斷對或錯!(每題4分，共24分)
1. CSS屬性font-style 用於設置字體的粗細。 ( × )
2. CSS屬性overflow用於設置元素超過寬度時是否隱藏或顯示滾動條。 ( √ )
3. 在不涉及樣式情況下,頁面元素的優先顯示與結構擺放順序無關。 ( × )
4. 在不涉及樣式情況下,頁面元素的優先顯示與標簽選用無關。 ( √ )
5. display:inline兼容所有的瀏覽器。 ( √ )
6. input屬於窗體元素,層級顯示比flash、其它元素都高。 ( × ) 1 2
『肆』 騰訊WEB前端筆試題和面試題答案
騰訊WEB前端筆試題和面試題答案
能進入騰訊工作是多少人的夢想，下面我為大家搜集的一篇“騰訊WEB前端筆試題和面試題答案”，供大家參考借鑒，希望可以幫助到有需要的朋友!
一、 耐心填一填!(每空4分，共24分)
1. 為span設置類a與b,應編寫HTML代碼_________。
2. 設置CSS屬性clear的值為_both___________時可清除左右兩邊浮動。
3. ____li________標簽必須直接嵌套於ul、ol中。
4. CSS屬性_____margin_______可為元素設置外補丁。
5. 設置CSS屬性float的值為___none_________時可取消元素的浮動。
6. 文字居中的CSS代碼是____text-align:center________。
二、 精心選一選!(每題4分，共16分)
1. 下列哪個樣式定義後,內聯(非塊狀)元素可以定義寬度和高度( C )
A. display:inline B. display:none C. display:block D. display:inheric
2. 選出你認為最合理的定義標題的方法( C )
A. 文章標題
B.
文章標題
C.
文章標題
D. 文章標題
3. br標簽在XHTML中語義為( A )
A.換行 B.強調 C.段落 D.標題
4. 不換行必須設置( AC )
A.word-break B.letter-spacing C.white-space D.word-spacing
5. 在使用table表現數據時，有時候表現出來的'會比自己實際設置的寬度要寬，為此需要設置下面哪些屬性值( AD )
A. cellpadding=”0″ B. padding:0 C. margin:0 D. cellspacing=”0″
三、判斷對或錯!(每題4分，共24分)
1. CSS屬性font-style 用於設置字體的粗細。 ( × )
2. CSS屬性overflow用於設置元素超過寬度時是否隱藏或顯示滾動條。 ( √ )
3. 在不涉及樣式情況下,頁面元素的優先顯示與結構擺放順序無關。 ( × )
4. 在不涉及樣式情況下,頁面元素的優先顯示與標簽選用無關。 ( √ )
5. display:inline兼容所有的瀏覽器。 ( √ )
6. input屬於窗體元素,層級顯示比flash、其它元素都高。 ( × )
;『伍』 前端筆試面試題總結（二）
A. null
B. [null]
C. [{}]
D. [{ name:"Lydia" }]
解析：
註：members被賦值的是person的指針；
正確答案：D
A. f foo(){ foo =10; console.log(foo)}
B. 1
C. 10
D. undefined
解析：
具名的匿名函數，函數名默認指向其本身，且具有隻讀屬性，函數會被當作函數表達式而不是一個標準的函數聲明來處理，函數表達式意味著函數被直接綁定在作用域中，意味著foo只能在被自己代表的位置被調用，不會污染全局作用域。
正確答案：A
解析：
正確答案： 30 24
解析：
正確答案：undefined 10 20
A. { name: "Lydia",age: 21} , ["name","age"]
B. { name: "Lydia",age: 21} , ["name"]
C. { name: "Lydia"} , ["name","age"]
D. { name: "Lydia"} , ["age"]
解析：
註： Object.defineProperty 是ES5提供的一種給對象定義屬性的方式，定義的屬性默認不可以枚舉、遍歷，不可以刪除；可以使用set、get，定義屬性時觸發get，修改屬性值時觸發set，利用其可以實現數據雙向綁定。
Object.keys 返回的是數組，又因 Object.defineProperty 定義的屬性默認不可以枚舉、遍歷，所以只能返回對象的第一個關鍵字；如果想要實現遍歷，可以利用 enumerable:true 實現遍歷，如果想要修改或刪除，可以利用 configurable:true 實現。
正確答案：B
A. "{"level":19,"health":90}"
B. "{"username": "xiao ming"}"
C. "["level","health"]"
D. "{"username":"xiao ming","level":19,"health":90}"
解析：
JSON.stringify(value,replacer) 方法將一個 JavaScript 對象或值轉換為 JSON 字元串，如果指定了一個 replacer 函數，則可以選擇性地替換值，或者指定的 replacer 是數組，則可選擇性地僅包含數組指定的屬性。
正確答案：A
A. 20 , 40 , 80 , 160
B. 20 , 40 , 20 , 40
C. 20 , 20 , 20 , 40
D. NaN , NaN , 20 , 40
解析：
正確答案：C
A. Calculated! 20 Calculated! 20 Calculated! 20
B. Calculated! 20 From cache! 20 Calculated! 20
C. Calculated! 20 From cache! 20 Form cache! 20
D. Calculated! 20 From cache! 20 Error
解析：
註：閉包函數定義： 當一個函數的返回值是另外一個函數，而返回的那個函數如果調用了其父函數內部的其它變數，如果返回的這個函數在外部被執行，就產生了閉包。
表現形式：使函數外部能夠調用函數內部定義的變數。
正確答案：C
A. ['apple','banana']
B. 2
C. true
D. undefined
解析：
註：push()方法的返回值：把指定的值添加到數組後的新長度
正確答案：B
A. "I made it!"
B. Promise {<resolved>: "I made it!"}
C. Promise {<pending>}
D. undefined
解析：
註：promise ES6語法中的非同步操作的API，每一個promise包含三種狀態 pending（掛起）、 resolve（成功）、 reject（失敗）， 而在每一個promise對象包含then 和 catch兩個方法，then方法接收一個函數，用於處理resolve成功方法，而catch方法接收一個函數，用於處理reject失敗的方法。
正確答案：C
『陸』 前端面試，會考什麼問題，筆試的話有什麼
原生xhr怎麼寫（原生ajax）？
1.創建XHR對象
2.向伺服器發送請求
3.伺服器響應
readyState：存有XMLHttpRequest的狀態。XHR對象會經歷5種不同的狀態 0：請求未初始化（new完後）； 1：伺服器連接已建立（對象已創建並初始化，尚未調用send方法）； 2：請求已接收； 3：請求處理中； 4：請求已完成，響應就緒；123456
status：（HTTP狀態碼很多，請自行了解，舉例常見的）
200：請求成功
404：未找到頁面
301：被請求的資源已永久移動到新位置
304：文檔的內容（自上次訪問以來或者根據請求的條件）並沒有改變
503：伺服器超時
『柒』 你遇到的前端面試題都有什麼
大家好，我是王我。
隨著春節的結束，各個行業也普遍開始了上班的節奏， 不過本人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.項目經驗，讓你講講做過的項目，遇到的問題和解決之道
『捌』 大廠前端筆試面試題總結（一）
1.從下列選項中找出正確的列印值
A. 'false','true'
B. '"Lydia"','21'
C. 'true','true'
D. 'undefined','undefined'
解析：
註：const、let、var聲明的變數在使用delete關鍵字進行刪除時是無效的，且其返回值是false。
正確答案：A
2.從下列選項中找出正確的列印值
A. {admin:true,user:{name:"Lydia",age:21}}
B. {admin:true,name:"Lydia",age:21}
C. {admin:true,user:["Lydia",age:21]}
D. {admin:true}
解析：
註： ...user 使用的是ES6的擴展運算符，默認作用是將user的屬性展開平鋪，並且和 admin:true 組成一個新的對象。
如果 const user ={name:"Lydia",age:21,admin:false}; 和前面的屬性有重名時, ... 擴展運算符會把前面的屬性覆蓋掉。列印結果就會為： {admin:false,name:"Lydia",age:21}
正確答案：B
3.從下列選項中找出正確的列印值
A. 10
B. 11
C. Error
D. NaN
解析：從模塊導出的變數是不能被修改的，只能作為一個只讀的變數進行其他文件引入使用。
正確答案：C
4.從下列選項中找出正確的列印值
A. [1,1,2,3,4]
B. [1,2,3,4]
C. {1,1,2,3,4}
D. {1,2,3,4}
解析：
註：Set具有唯一性，輸出時會默認過濾掉重復項。Set是一種新的數據結構並不是數組。
數組的去重、找唯一值都可以利用Set形式
正確答案：D
5.從下列選項中找出正確的列印值
A. "Woof I am Mara" , TypeError
B. "Woof I am Mara" , "Woof I am Mara"
C. "Woof I am Mara" , undefined
D. TypeError , TypeError
解析：
正確答案：A
6.從下列選項中找出正確的列印值
A. "undefined","number"
B. "number","number"
C. "object","number"
D. "number","undefined"
解析：
正確答案：A
7.從下列選項中找出正確的列印值
A. Lamborghini
B. "Maserati"
C. ReferenceError
D. TypeError
解析：
正確答案：B
8.從下列選項中找出正確的列印值
A. "It worked! Hello world!"
B. "Oh no an error: undefined"
C. SyntaxError: can only throw error objects
D. "Oh no an Error: Hello world!"
解析：
正確答案：D
A. []
B. [null,null,null]
C. [undefined, undefined,undefined]
D. [3 × empty]
解析：
正確答案：C
10.從下列選項中找出正確的列印值
A. 42
B. "42"
C. 7
D. NaN
解析：
parseInt(string, radix)函數解析字元串並返回整數。