前端面試官常問的問題有哪些？
1、重繪和重排的關系： 重繪不會引起重排，但重排一定會引起重繪，一個元素的重排通常會帶來一系列的反應，甚至觸發整個文檔的重排和重繪，性能代價是高昂的。愛掏網 - it200.com 2、重繪的概念： 重繪是一個元素外觀的改變所觸發的瀏覽器行為，例如改變visibility、outline、背景色等屬性。愛掏網 - it200.com
瀏覽器會根據元素的新屬性重新繪制，使元素呈現新的外觀。愛掏網 - it200.com
由于瀏覽器的流布局，對渲染樹的計算通常只需要遍歷一次就可以完成。愛掏網 - it200.com 但table及其內部元素除外，它可能需要多次計算才能確定好其在渲染樹中節點的屬性值，比同等元素要多花兩倍時間，這就是我們盡量避免使用table布局頁面的原因之一。愛掏網 - it200.com 3、觸發重排的情況： 頁面渲染初始化時；瀏覽器窗口改變尺寸；元素尺寸改變時；元素位置改變時；元素內容改變時；添加或刪除可見的DOM元素時。愛掏網 - it200.com 4、redux的缺點： （1）一個組件所需要的數據，必須_父組件傳過來，而不能像flux中直接從store取。愛掏網 - it200.com
（2）當一個組件相關數據更新_，即使父組件不需要用到這個組件，父組件還是會重新render,可能會有效率影響，或者需要寫復雜的shouldComponentUpdate進行判斷。愛掏網 - it200.com 5、對MVC和MVVM的理解： （1）mvc：View傳送指令到Controller Controller完成業務邏輯后，要求Model改變狀態Model將新的數據發送到View，用戶得到反饋所有通信都是單向的。愛掏網 - it200.comAngular它采用雙向綁定（data-binding）：View的變動，自動反映在ViewModel，反之亦然。愛掏網 - it200.com
組成部分Model、View、ViewModel （2）View：UI界面ViewModel：它是View的抽象，負責View與Model之間信息轉換，將View的Command傳送到Model；Model：數據訪問層。愛掏網 - it200.com
你遇到的前端面試題都有什么？
大家好，我是王我。愛掏網 - it200.com 隨著春節的結束，各個行業也普遍開始了上班的節奏， 不過本人17號才上班。愛掏網 - it200.com
為什么？因為長得帥的都上班比較晚。愛掏網 - it200.com
當然，每到新年結束，又迎來了一批招聘者與面試者，我來說說作為一年工作經驗應該知道的面試題。愛掏網 - it200.com HTML篇 1.doctype是什么？有哪些類型？ 2.input有哪些新類型？簡要說明其8用法。愛掏網 - it200.com 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.什么是閉包？閉包的優缺點。愛掏網 - it200.com 7.簡述一下ajax請求的過程。愛掏網 - it200.com
8.簡述一下new一個人構造函數的人過程。愛掏網 - it200.com 9.為什么會有跨域？是怎么解決跨域問題的？簡述一下原理。愛掏網 - it200.com 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應該不成問題啦。愛掏網 - it200.com
這些面試題也是我在很多面試中感覺經常被問到的題目。愛掏網 - it200.com 希望大家年后找工作能夠順順利利， 千萬不要跟我一樣哦，只有帥氣就一無所有了。愛掏網 - it200.com 大家好，我是王我，中國最帥的前端程序員。愛掏網 - it200.com
前幾次都是各種培訓公司，各種忽悠就不提了，說說后面4次面試的經歷。愛掏網 - it200.com 第一次是面一個小公司，不過他們好像沒有厲害的前端，來面我的是個后端，一來沒有問我關于js的知識，直接問我以前做過什么，有沒有經驗，我本人不會吹牛，簡歷也沒怎么包裝，就是自己把自學的知識和做的幾個小demo弄在上面，也用github掛在頁面上了，不過他根本不點開看，也不問，問我會不會vue，我當時對框架還不了解，他就說他們需要能直接上手開始寫的，所以我第一個就直接掛了。愛掏網 - it200.com 第二次面試是一個國企，這個問了很多問題，都很基礎，js數據類型，數組操作，事件，大概就是高程的前面幾章看看就差不多都能答到，然后因為他們主要用jq，所以問了很多jq的操作，關于節點的，動畫的，我看鋒利的jq大概看了3遍，也練過多次，所以我答的很熟。愛掏網 - it200.com
然后問了些布局方面的，bootstrap我了解過，又看過css3，所以這方面也沒啥問題，最后在現場做了個題目，主要就是布局然后通過ajax呈現數據。愛掏網 - it200.com后面聽介紹我面試的說面試官比較滿意，說我jq很熟，一面就過了。愛掏網 - it200.com可惜后面電話面試不知怎么回事可能表現的不夠自信，雖然沒問技術，但是我沒啥自信，把沒項目經驗什么的也不知怎么就一五一十交代了，估計因為這個掛掉了。愛掏網 - it200.com 第三次沒問問題，直接就是一套題開做，我在那做了一個多小時。愛掏網 - it200.com
題目就是按照要求一步一步做一個頁面出來，我也搞忘了我當時卡在哪個地方了，坐在那得時候就是做不出來，沒有設計圖，要根據他的描述自己找個設計圖然后做，我第一次遇到這個有點懵，雖然當時沒做出來，不過回來我自己花了幾個小時把它做了。愛掏網 - it200.com所以這個也是涼了。愛掏網 - it200.com 第四個問的比較多，數據類型，數組操作，跨域，ajax，閉包，原型鏈，繼承，深拷貝，淺拷貝，模塊amd cmd，基本都是問的js。愛掏網 - it200.com然后問了html5的新特性 css3 的新特性，遇到過什么瀏覽器的兼容性問題，怎么解決的，以后想往什么方面發展。愛掏網 - it200.com
這個時候我已經會點vue了，照著做了個小demo，不過后來知道公司用的angularjs，面試官也沒看我做的，問也沒問。愛掏網 - it200.com以前聽網上說要帶上自己的項目去面試感覺沒起多大效果。愛掏網 - it200.com 最后總結下如果面的比較初級的崗位，應該主要問js，原型鏈，繼承，閉包，深淺拷貝，ajax，跨域，然后js的基礎知識，對了還有apply和call也問了，html5的新特性了解下就行。愛掏網 - it200.com
主要就是看你js掌握的程度，如果稍微要求高一點的，暫時還沒面過，等以后面過在來回答 1. COOKIE session 的用途和區別，以及有效期 1、COOKIE數據存放在客戶的瀏覽器上，session數據放在服務器上。愛掏網 - it200.com 2、COOKIE不是很安全，別人可以分析存放在本地的COOKIE并進行COOKIE欺騙 考慮到安全應當使用session。愛掏網 - it200.com 3、session會在一定時間內保存在服務器上。愛掏網 - it200.com
當訪問增多，會比較占用你服務器的性能 考慮到減輕服務器性能方面，應當使用COOKIE。愛掏網 - it200.com 4、單個COOKIE保存的數據不能超過4K，很多瀏覽器都限制一個站點最多保存20個COOKIE。愛掏網 - it200.com 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層會自動改變。愛掏網 - it200.com
不懂得可以復制鏈接查看： https://www.pianshen.com/article/3716256399/ 3. storage 的區別 sessionStorage localStorage localStorage 的生命周期是永久性的。愛掏網 - it200.com假若使用localStorage存儲數據，即使關閉瀏覽器，也不會讓數據消失，除非主動的去刪除數據，使用的方法如上所示。愛掏網 - it200.comlocalStorage有length屬性 sessionStorage 的生命周期是在瀏覽器關閉前。愛掏網 - it200.com也就是說，在整個瀏覽器未關閉前，其數據一直都是存在的。愛掏網 - it200.com
sessionStorage也有length屬性，其基本的判斷和使用方法和localStorage的使用是一致的 4.v-model雙向數據原理 有一個文本框 通過v-bind綁定了value屬性 值為myname 是我們在vue實例中定義的屬性 傳統我們獲取文本框值方法 可能通過getElementById找到文本框 然后獲取其value屬性 但是vue中直接通過v-bind綁定了value屬性 所以不需要像之前那樣獲取值 所以在后面的按鈕中獲取name值 直接獲取vue實例對象data里面的myname屬性即可 【數據為尊 ----數據映射到瀏覽器 如果數據v-model后修改（肯定input）然后到數據在有數據映射到瀏覽器頁面 ----映射關系統稱】 5.keepAlive用過嗎？什么作用？ 緩存路由組件 使用的是vue的一個組件，參考vue的官方文檔 使用這個東西可以保證我們在切換組件的時候，原來顯示的組件不被銷毀 -----【保障組件的數據不會被切換路由而銷毀數據】 Home是對應的組件對象的名字，不是路由的名字 6.多維數組拍平 數組拍平也稱數組扁平化，就是將數組里面的數組打開，最后合并為一個數組 一紅六種方法吧…… 了解的請看： https://www.cnblogs.com/guan-shan/p/10165737.html 7.跨域的原因 解決方案 跨域是指一個域下的文檔或腳本試圖去請求另一個域下的資源，這里跨域是廣義的。愛掏網 - it200.com 這樣就可以說同源策略----協議---端口---域名 原生的src和href可以解決跨域 代理可以解決 請求頭也可以攜帶瀏覽器提示的也可以解決 一般都是后端解決跨域問題 【別的需要了解看下方鏈接】 https://blog.csdn.net/qq_41604383/article/details/100770100 8.uniApp兼容問題 § 如果你使用cli創建項目（即項目根目錄是package.json），不管用什么ide，即便是用HBuilderX，切記cli項目的編譯器是在項目下的，HBuilderX不管怎么升級都不會影響編譯器版本。愛掏網 - it200.com你需要手動npm update來升級編譯器。愛掏網 - it200.com
以及如果你想要安裝less、scss等預編譯器，也需要自己npm安裝在項目下，而不是在HBuilderX的插件管理里安裝。愛掏網 - it200.com § 如果你使用離線打包，請注意HBuilderX升級后，真機運行基座和云打包對應引擎跟隨HBuilderX升級，而你的sdk需要手動升級。愛掏網 - it200.comsdk的版本升級一般滯后HBuilderX正式版升級一兩天。愛掏網 - it200.com § 如果你使用自定義基座，之前制作的自定義基座是不會跟隨HBuilderX升級的，升級HBuilderX后你應該重新制作新版自定義基座。愛掏網 - it200.com
§ 如果你使用wgt升級，新版HBuilderX編譯的wgt，運行到之前的runtime上，一定要先測試好，看有沒有兼容性問題。愛掏網 - it200.com如果有問題，就不要wgt升級，整包升級。愛掏網 - it200.com § 考慮到向下兼容，uni-app編譯器在升級為新的自定義組件模式后，同時保留了對老編譯模式的向下兼容。愛掏網 - it200.com
在HBuilderX alpha版中，App端一定會使用新編譯器，不理會manifest配置。愛掏網 - it200.com 在HBuilderX 正式版中，新創建的項目會使用新編譯器，老項目不會。愛掏網 - it200.com
vue常見面試題
1.什么是vue的生命周期？ Vue實例從創建到銷毀的過程，就是生命周期。愛掏網 - it200.com也就是從開始創建、初始化數據、編譯模板、掛載DOM->渲染、更新->渲染、卸載等一系列過程，我們稱這是Vue的生命周期。愛掏網 - it200.com
2.vue生命周期的作用是什么？ 它的生命周期中有多個事件鉤子，讓我們在控制整個vue實例的過程時更容易形成好的邏輯。愛掏網 - it200.com
3.Vue生命周期總共有幾個階段？ 它可以總共分為8個階段：創建前/后,載入前/后，更新前/后，銷毀前/銷毀后 4.第一次頁面加載會觸發那幾個鉤子？ 第一次頁面加載時會觸發beforeCreate,created,beforeMount,mounted 5.DOM渲染在哪個周期中就已經完成？ DOM渲染在mounted中就已經完成了 6.生命周期鉤子的一些使用方法： 1.beforecreate:可以在加個loading事件，在加載實例是觸發 2.created:初始化完成時的事件寫在這里，如在這結束loading事件，異步請求也適宜在這里調用 3.mounted:掛載元素，獲取到dom節點 4.updated:如果對數據統一處理，在這里寫上相應函數 5.beforeDestroy:可以一個確認停止事件的確認框 6.nextTick:更新數據后立即操作dom 7.v-show與v-if的區別 v-show是css切換，v-if是完整的銷毀和重新創建使用頻繁切換時用v-show,運行時較少改變時用v-if V-if=’false’v-if是條件渲染，當false的時候不會渲染 使用v-if的時候，如果值為false，那么頁面將不會有這個html標簽生成 v-show則是不管值是為true還是false，html元素都會存在，只是css中的display顯示或隱藏 v-show 僅僅控制元素的顯示方式，將 display 屬性在 block 和 none 來回切換；而v-if會控制這個 DOM 節點的存在與否。愛掏網 - it200.com當我們需要經常切換某個元素的顯示/隱藏時，使用v-show會更加節省性能上的開銷；當只需要一次顯示或隱藏時，使用v-if更加合理。愛掏網 - it200.com 8.開發中常用的指令有哪些? v-model:一般用在表達輸入，很輕松的實現表單控件和數據的雙向綁定v-html：更新元素的innerHTML v-show與v-if：條件渲染，注意二者區別 v-on:click:可以簡寫為@click,@綁定一個事件。愛掏網 - it200.com如果事件觸發了，就可以指定事件的處理函數 v-for：基于源數據多次渲染元素或模板 v-bind:當表達式的值改變時，將其產生的連帶影響，響應式地作用于DOM語法 v-bind:title=”msg”簡寫：title="msg" 9.綁定class的數組用法 1.對象方法v-bind:class="{'orange':isRipe, 'green':isNotRipe}” 2.數組方法v-bind:class="[class1,class2]" 3.行內v-bind:px'}”10.路由跳轉方式1.router-link標簽會渲染為標簽，咋填template中的跳轉都是這種；2.另一種是編輯是導航，也就是通過js跳轉比如router.push('/home') 12. computed和watch有什么區別 computedcomputed是計算屬性，也就是計算值，它更多用于計算值的場景 computed具有緩存性，computed的值在getter執行后是會緩存的，只有在它依賴的屬性值改變之后，下一次獲取computed的值時重新調用對應的getter來計算 computed適用于計算比較消耗性能的計算場景 watch watch更多的是[觀察]的作用，類似于某些數據的監聽回調，用于觀察props $emit或者本組件的值，當數據變化時來執行回調進行后續操作 無緩存性，頁面重新渲染時值不變化也會執行 小結 當我們要進行數值計算，而且依賴于其他數據，那么把這個數據設計為computed 如果你需要在某個數據變化時做一些事情，使用watch來觀察這個數據變化。愛掏網 - it200.com
13. vue組件的scoped屬性的作用 在style標簽上添加scoped屬性，以表示它的樣式作用于當下的模塊，很好的實現了樣式私有化的目的；但是也得慎用：樣式不易（可）修改，而很多時候，我們是需要對公共組件的樣式做微調的； 解決辦法： ①：使用混合型的css樣式：（混合使用全局跟本地的樣式） /* 全局樣式 */ /* 本地樣式 */ ②：深度作用選擇器（>>>）如果你希望 scoped 樣式中的一個選擇器能夠作用得“更深”，例如影響子組件，你可以使用 >>> 操作符： .a >>> .b { /* ... */ } 14. vue是漸進式的框架的理解：( 主張最少,沒有多做職責之外的事 ) Vue的核心的功能，是一個視圖模板引擎，但這不是說Vue就不能成為一個框架。愛掏網 - it200.com如下圖所示，這里包含了Vue的所有部件，在聲明式渲染（視圖模板引擎）的基礎上，我們可以通過添加組件系統、客戶端路由、大規模狀態管理來構建一個完整的框架。愛掏網 - it200.com更重要的是，這些功能相互獨立，你可以在核心功能的基礎上任意選用其他的部件，不一定要全部整合在一起。愛掏網 - it200.com
可以看到，所說的“漸進式”，其實就是Vue的使用方式，同時也體現了Vue的設計的理念在我看來，漸進式代表的含義是：主張最少。愛掏網 - it200.com視圖模板引擎 每個框架都不可避免會有自己的一些特點，從而會對使用者有一定的要求，這些要求就是主張，主張有強有弱，它的強勢程度會影響在業務開發中的使用方式。愛掏網 - it200.com 比如說，Angular，它兩個版本都是強主張的，如果你用它，必須接受以下東西： 必須使用它的模塊機制- 必須使用它的依賴注入- 必須使用它的特殊形式定義組件（這一點每個視圖框架都有，難以避免） 所以Angular是帶有比較強的排它性的，如果你的應用不是從頭開始，而是要不斷考慮是否跟其他東西集成，這些主張會帶來一些困擾。愛掏網 - it200.com
Vue可能有些方面是不如React，不如Angular，但它是漸進的，沒有強主張，你可以在原有大系統的上面，把一兩個組件改用它實現，當jQuery用；也可以整個用它全家桶開發，當Angular用；還可以用它的視圖，搭配你自己設計的整個下層用。愛掏網 - it200.com也可以函數式，都可以，它只是個輕量視圖而已，只做了自己該做的事，沒有做不該做的事，僅此而已。愛掏網 - it200.com 漸進式的含義，我的理解是：沒有多做職責之外的事。愛掏網 - it200.com
15.vue.js的兩個核心是什么(數據驅動、組件系統。愛掏網 - it200.com)數據驅動:Object.defineProperty和存儲器屬性: getter和setter（所以只兼容IE9及以上版本），可稱為基于依賴收集的觀測機制,核心是VM，即ViewModel，保證數據和視圖的一致性。愛掏網 - it200.com16.vue常用修飾符修飾符分為：一般修飾符，事件修身符，按鍵、系統①一般修飾符： .lazy：v-model 在每次 input 事件觸發后將輸入框的值與數據進行同步 。愛掏網 - it200.com你可以添加 lazy 修飾符，從而轉變為使用 change 事件進行同步