HTML面試題

1.XHTML和HTML有什麼區別

HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XML的置標語言最主要的不同：XHTML 元素必須被正確地巢狀。XHTML 元素必須被關閉。標籤名必須用小寫字母。XHTML 文件必須擁有根元素。

2.前端頁面有哪三層構成，分別是什麼?作用是什麼?

結構層 Html 表示層 CSS 行為層 js;3.你做的頁面在哪些流覽器測試過?這些瀏覽器的核心分別是什麼?Ie(Ie核心) 火狐（Gecko） 谷歌（webkit,Blink） opera(Presto),Safari(wbkit)

4.什麼是語義化的HTML?

直觀的認識標籤 對於搜尋引擎的抓取有好處，用正確的標籤做正確的事情！html語義化就是讓頁面的內容結構化，便於對瀏覽器、搜尋引擎解析；在沒有樣式CCS情況下也以一種文件格式顯示，並且是容易閱讀的。搜尋引擎的爬蟲依賴於標記來確定上下文和各個關鍵字的權重，利於 SEO。使閱讀原始碼的人對網站更容易將網站分塊，便於閱讀維護理解。

5.HTML5 為什麼只需要寫 !DOCTYPE HTML？

HTML5 不基於 SGML，因此不需要對DTD進行引用，但是需要doctype來規範瀏覽器的行為（讓瀏覽器按照它們應該的方式來執行）；而HTML4.01基於SGML,所以需要對DTD進行引用，才能告知瀏覽器文件所使用的文件型別。

6.Doctype作用？標準模式與相容模式各有什麼區別?

!DOCTYPE宣告位於位於HTML文件中的第一行，處於html 標籤之前。告知瀏覽器的解析器用什麼文件標準解析這個文件。DOCTYPE不存在或格式不正確會導致文件以相容模式呈現。標準模式的排版 和JS運作模式都是以該瀏覽器支援的最高標準執行。在相容模式中，頁面以寬鬆的向後相容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作。

7.html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器相容問題？如何區分 HTML 和HTML5？

HTML5 現在已經不是 SGML 的子集，主要是關於影象，位置，儲存，多工等功能的增加。繪畫 canvas用於媒介回放的 video 和 audio 元素本地離線儲存 localStorage 長期儲存資料，瀏覽器關閉後資料不丟失；sessionStorage 的資料在瀏覽器關閉後自動刪除語意化更好的內容元素，比如 article、footer、header、nav、section表單控制元件，calendar、date、time、email、url、search新的技術webworker, websockt, Geolocation移除的元素純表現的元素：basefont，big，center，font, s，strike，tt，u；對可用性產生負面影響的元素：frame，frameset，noframes；支援HTML5新標籤：IE8/IE7/IE6支援透過document.createElement方法產生的標籤，可以利用這一特性讓這些瀏覽器支援HTML5新標籤，瀏覽器支援新標籤後，還需要新增標籤預設的樣式：

8.請描述一下 cookies，sessionStorage 和 localStorage 的區別？

cookie在瀏覽器和伺服器間來回傳遞。 sessionStorage和localStorage不會sessionStorage和localStorage的儲存空間更大；sessionStorage和localStorage有更多豐富易用的介面；sessionStorage和localStorage各自獨立的儲存空間；

9.如何實現瀏覽器內多個標籤頁之間的通訊?

呼叫localstorge、cookies等本地儲存方式

CSS面試題

1.簡要說一下CSS的元素分類

塊級元素：div,p,h1,form,ul,li;行內元素 : span>,a,label,input,img,strong,em;

2.CSS隱藏元素的幾種方法（至少說出三種）

Opacity:元素本身依然佔據它自己的位置並對網頁的佈局起作用。它也將響應使用者互動;Visibility:與 opacity 唯一不同的是它不會響應任何使用者互動。此外，元素在讀屏軟體中也會被隱藏;Display:display 設為 none 任何對該元素直接打使用者互動操作都不可能生效。此外，讀屏軟體也不會讀到元素的內容。這種方式產生的效果就像元素完全不存在;Position:不會影響佈局，能讓元素保持可以操作;Clip-path:clip-path 屬性還沒有在 IE 或者 Edge 下被完全支援。如果要在你的 clip-path 中使用外部的 SVG 檔案，瀏覽器支援度還要低;

3.CSS清除浮動的幾種方法（至少兩種）

使用帶clear屬性的空元素使用CSS的overflow屬性；使用CSS的:after偽元素；使用鄰接元素處理；

4.CSS居中（包括水平居中和垂直居中）

內聯元素居中方案

水平居中設定：1.行內元素

設定 text-align:center；

2.Flex佈局

設定display:flex;justify-content:center;(靈活運用,支援Chroime，Firefox，IE9+)

垂直居中設定：1.父元素高度確定的單行文字（內聯元素）

設定 height = line-height；

2.父元素高度確定的多行文字（內聯元素）

a:插入 table （插入方法和水平居中一樣），然後設定 vertical-align:middle；b:先設定 display:table-cell 再設定 vertical-align:middle；塊級元素居中方案

水平居中設定：1.定寬塊狀元素

設定 左右 margin 值為 auto；

2.不定寬塊狀元素

a:在元素外加入 table 標籤（完整的，包括 table、tbody、tr、td），該元素寫在 td 內，然後設定 margin 的值為 auto；b:給該元素設定 displa:inine 方法；c:父元素設定 position:relative 和 left:50%，子元素設定 position:relative 和 left:50%；

垂直居中設定：

使用position:absolute（fixed）,設定left、top、margin-left、margin-top的屬性;利用position:fixed（absolute）屬性，margin:auto這個必須不要忘記了;利用display:table-cell屬性使內容垂直居中;使用css3的新屬性transform:translate(x,y)屬性;使用:before元素;

5.寫出幾種IE6 BUG的解決方法

雙邊距BUG float引起的 使用display3畫素問題 使用float引起的 使用dislpay:inline -3px超連結hover 點選後失效 使用正確的書寫順序 link visited hover activeIe z-index問題 給父級新增position:relativePng 透明 使用js程式碼 改Min-height 最小高度 ！Important 解決’select 在ie6下遮蓋 使用iframe巢狀為什麼沒有辦法定義1px左右的寬度容器（IE6預設的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）

6.對於SASS或是Less的瞭解程度？喜歡那個？

語法介紹

7.Bootstrap瞭解程度

特點，排版，外掛的使用;

8.頁面匯入樣式時，使用link和@import有什麼區別？

link屬於XHTML標籤，除了載入CSS外，還能用於定義RSS, 定義rel連線屬性等作用；而@import是CSS提供的，只能用於載入CSS;頁面被載入的時，link會同時被載入，而@import引用的CSS會等到頁面被載入完再載入;import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標籤，無相容問題;

9.介紹一下CSS的盒子模型？

有兩種， IE 盒子模型、標準 W3C 盒子模型；IE的content部分包含了 border 和 pading;盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border).

10.CSS 選擇符有哪些？哪些屬性可以繼承？優先順序演算法如何計算？ CSS3新增偽類有那些？

id選擇器（ # myid）類選擇器（.myclassname）標籤選擇器（div, h1, p）相鄰選擇器（h1 + p）子選擇器（ul > li）後代選擇器（li a）萬用字元選擇器（ * ）屬性選擇器（a[rel = “external”]）偽類選擇器（a: hover, li: nth – child）可繼承的樣式： font-size font-family color, UL LI DL DD DT;不可繼承的樣式：border padding margin width height ;優先順序就近原則，同權重情況下樣式定義最近者為準;優先順序為:JavaScript12!important > id > class > tagimportant 比 內聯優先順序高

11.CSS3有哪些新特性？

CSS3實現圓角（border-radius:8px），陰影（box-shadow:10px），對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform）transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉,縮放,定位,傾斜增加了更多的CSS選擇器 多背景 rgba

JavaScript面試題

1.javascript的typeof返回哪些資料型別

Ｏbject number function boolean underfind;

2.例舉3種強制型別轉換和2種隱式型別轉換?

強制（parseInt,parseFloat,number）隱式（== – ===）；

3.陣列方法pop() push() unshift() shift()

一個在url後面 一個放在虛擬載體裡面有大小限制安全問題應用不同 一個是論壇等只需要請求的，一個是類似修改密碼的;

5.call和apply的區別

Object.call(this,obj1,obj2,obj3)Object.apply(this,arguments)

6.ajax請求時，如何解釋json資料

使用eval parse,鑑於安全性考慮 使用parse更靠譜;

7.事件委託是什麼

讓利用事件冒泡的原理，讓自己的所觸發的事件，讓他的父元素代替執行！

8.閉包是什麼，有什麼特性，對頁面有什麼影響?簡要介紹你理解的閉包

obj.appendChidl()obj.innersetBeforeobj.replaceChildobj.removeChild10.說一下什麼是javascript的同源策略？

JavaScript1234567891011function A(name){ this.name = name; this.sayHello = function(){alert(this.name+” say Hello!”);};}function B(name,id){ this.temp = A; this.temp(name); //相當於new A(); delete this.temp; this.id = id; this.checkId = function(ID){alert(this.id==ID)};}

12.如何阻止事件冒泡和預設事件

JavaScript12345678function stopBubble(e){ if (e && e.stopPropagation) e.stopPropagation() else window.event.cancelBubble=true}return false

13.下面程式執行後彈出什麼樣的結果?

JavaScript12345678910111213141516171819function fn() { this.a = 0; this.b = function() { alert(this.a) }}fn.prototype = { b: function() { this.a = 20; alert(this.a); }, c: function() { this.a = 30; alert(this.a); }}var myfn = new fn();myfn.b();myfn.c();

14.談談This物件的理解。

this是js的一個關鍵字，隨著函式使用場合不同，this的值會發生變化。但是有一個總原則，那就是this指的是呼叫函式的那個物件。this一般情況下：是全域性物件Global。 作為方法呼叫，那麼this就是指這個物件

15.下面程式的結果

JavaScript1234567891011function fun(n,o) { console.log(o) return { fun:function(m){ return fun(m,n); } };}var a = fun(0); a.fun(1); a.fun(2); a.fun(3);var b = fun(0).fun(1).fun(2).fun(3);var c = fun(0).fun(1); c.fun(2); c.fun(3);

//答案：

//a: undefined,0,0,0//b: undefined,0,1,2//c: undefined,0,1,1

16.下面程式的輸出結果

JavaScript123456789var name = "World!";(function () { if (typeof name === "undefined") { var name = "Jack"; console.log("Goodbye " + name); } else { console.log("Hello " + name); }})();

17.瞭解Node麼？Node的使用場景都有哪些？

高併發、聊天、實時訊息推送

18.介紹下你最常用的一款框架

jquery,rn,angular等;

19.對於前端自動化構建工具有了解嗎？簡單介紹一下

Gulp,Grunt等；

20.介紹一下你瞭解的後端語言以及掌握程度

其它

1.對Node的優點和缺點提出了自己的看法？

(優點）因為Node是基於事件驅動和無阻塞的，所以非常適合處理併發請求，因此構建在Node上的代理伺服器相比其他技術實現（如Ruby）的伺服器表現要好得多。此外，與Node代理伺服器互動的客戶端程式碼是由javascript語言編寫的，因此客戶端和伺服器端都用同一種語言編寫，這是非常美妙的事情。（缺點）Node是一個相對新的開源專案，所以不太穩定，它總是一直在變，而且缺少足夠多的第三方庫支援。看起來，就像是Ruby/Rails當年的樣子。

2.你有哪些效能最佳化的方法？

（1） 減少http請求次數：CSS Sprites, JS、CSS原始碼壓縮、圖片大小控制合適；網頁Gzip，CDN託管，data快取 ，圖片伺服器。（2）前端模板 JS+資料，減少由於HTML標籤導致的頻寬浪費，前端用變數儲存AJAX請求結果，每次操作本地變數，不用請求，減少請求次數（3） 用innerHTML代替DOM操作，減少DOM操作次數，最佳化javascript效能。（4） 當需要設定的樣式很多時設定className而不是直接操作style。（5） 少用全域性變數、快取DOM節點查詢的結果。減少IO讀取操作。（6） 避免使用CSS Expression（css表示式)又稱Dynamic properties(動態屬性)。（7） 圖片預載入，將樣式表放在頂部，將指令碼放在底部 加上時間戳。（8） 避免在頁面的主體佈局中使用table，table要等其中的內容完全下載之後才會顯示出來，顯示div+css佈局慢。對普通的網站有一個統一的思路，就是儘量向前端最佳化、減少資料庫操作、減少磁碟IO。向前端最佳化指的是，在不影響功能和體驗的情況下，能在瀏覽器執行的不要在服務端執行，能在快取伺服器上直接返回的不要到應用伺服器，程式能直接取得的結果不要到外部取得，本機內能取得的資料不要到遠端取，記憶體能取到的不要到磁碟取，快取中有的不要去資料庫查詢。減少資料庫操作指減少更新次數、快取結果減少查詢次數、將資料庫執行的操作儘可能的讓你的程式完成（例如join查詢），減少磁碟IO指儘量不使用檔案系統作為快取、減少讀寫檔案次數等。程式最佳化永遠要最佳化慢的部分，換語言是無法“最佳化”的。

3.http狀態碼有那些？分別代表是什麼意思？100-199 用於指定客戶端應相應的某些動作。200-299 用於表示請求成功。300-399 用於已經移動的檔案並且常被包含在定位頭資訊中指定新的地址資訊。400-499 用於指出客戶端的錯誤。400 1、語義有誤，當前請求無法被伺服器理解。401 當前請求需要使用者驗證 403 伺服器已經理解請求，但是拒絕執行它。500-599 用於支援伺服器錯誤。 503 – 服務不可用4.一個頁面從輸入 URL 到頁面載入顯示完成，這個過程中都發生了什麼？（流程說的越詳細越好）

查詢瀏覽器快取DNS解析、查詢該域名對應的IP地址、重定向（301）、發出第二個GET請求進行HTTP協議會話客戶端傳送報頭(請求報頭)文件開始下載文件樹建立，根據標記請求所需指定MIME型別的檔案檔案顯示瀏覽器這邊做的工作大致分為以下幾步：載入：根據請求的URL進行域名解析，向伺服器發起請求，接收檔案（HTML、JS、CSS、圖象等）。解析：對載入到的資源（HTML、JS、CSS等）進行語法解析，建議相應的內部資料結構（比如HTML的DOM樹，JS的（物件）屬性表，CSS的樣式規則等等）

5.你常用的開發工具是什麼，為什麼？

Sublime,Atom,Nodepad++;

6.說說最近最流行的一些東西吧？常去哪些網站？

Node.js、MVVM、React-native,Angular,Weex等CSDN,Segmentfault,部落格園,掘金,Stackoverflow,伯樂線上等

7.介紹下你的專案（如果有的話）？並說一下在做這個專案中運用的技術以及遇到的難題是如何解決的

隨著春節的結束，各個行業也普遍開始了上班的節奏，不過本人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掌握的程度，如果稍微要求高一點的，暫時還沒面過，等以後面過在來回答

分享了一些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、如何居中div？如何居中一個浮動元素？如何讓絕對定位的div居中？

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. 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:ViewModelvue中採用的是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的使用是一致的

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的官方文件

使用這個東西可以保證我們在切換元件的時候，原來顯示的元件不被銷燬

-----【保障元件的資料不會被切換路由而銷燬資料】

<keep-alive include="Home"> Home是對應的元件物件的名字，不是路由的名字

<router-view></router-view>

</keep-alive>

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

前端面試題：

1. 一個200*200的div在不同解析度螢幕上下左右居中，用css實現

<div>

<div>

2. 寫一個左中右佈局佔滿螢幕，其中左右兩塊是固定寬度200 ，中間自適應寬，要求先載入中間塊，請寫出結構及樣式：

<div>我是左邊</div>

<div>我是中間</div>

<div>我是右邊</div>

html,body{ margin: 0px;width: 100%; }

#left,#right{width: 200px;height: 200px;background-color: aqua;

position: absolute;}

#left{left: 0;top:0;}

#right{right: 0;top:0;}

#center{margin: 0 200px;background-color: blue;height: 200px;}

或者利用彈性盒子

<style>

* {

margin: 0;

padding: 0;

}

html,

body {

height: 100%;

}

body {

display: flex;

}

.left {

width: 100px;

background-color: rgb(199, 170, 223);

}

.center {

background-color: rgb(151, 228, 148);

flex: 1;

}

.right {

width: 100px;

background-color: rgb(199, 170, 223);

}

</style>

<body>

<div>left</div>

<div>center</div>

<div>right</div>

</body>

3. 闡述清楚浮動的幾種方式（常見問題）

1.父級div定義 height

原理：父級div手動定義height，就解決了父級div無法自動獲取到高度的問題。

優點：簡單、程式碼少、容易掌握

缺點：只適合高度固定的佈局，要給出精確的高度，如果高度和父級div不一樣時，會產生問題

2.父級div定義 overflow:hidden

原理：必須定義width或zoom:1，同時不能定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區域的高度

優點：簡單、程式碼少、瀏覽器支援好

4. 結尾處加空div標籤 clear:both

原理：新增一個空div，利用css提高的clear:both清除浮動，讓父級div能自動獲取到高度

優點：簡單、程式碼少、瀏覽器支援好、不容易出現怪問題

缺點：不少初學者不理解原理；如果頁面浮動佈局多，就要增加很多空div，讓人感覺很不好

5. 解釋css sprites ，如何使用？

CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片檔案中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進行背景定位，background-position可以用數字能精確的定位出背景圖片的位置。

CSS Sprites為一些大型的網站節約了頻寬，讓提高了使用者的載入速度和使用者體驗，不需要載入更多的圖片

Var btn=document.getElementById(‘btn’);

//事件監聽 繫結多個事件

var btn4 = document.getElementById("btn4");

btn4.addEventListener("click",hello1);

btn4.addEventListener("click",hello2);

function hello1(){undefined

alert("hello 1");

}

function hello2(){undefined

alert("hello 2");

}

7. 拖拽會用到哪些事件

· dragstart:拖拽開始時在被拖拽元素上觸發此事件,監聽器需要設定拖拽所需資料,從作業系統拖拽檔案到瀏覽器時不觸發此事件.

· dragenter:拖拽滑鼠進入元素時在該元素上觸發,用於給拖放元素設定視覺反饋,如高亮

· dragover:拖拽時滑鼠在目標元素上移動時觸發.監聽器透過阻止瀏覽器預設行為設定元素為可拖放元素.

· dragleave:拖拽時滑鼠移出目標元素時在目標元素上觸發.此時監聽器可以取消掉前面設定的視覺效果.

· drag:拖拽期間在被拖拽元素上連續觸發

· drop:滑鼠在拖放目標上釋放時,在拖放目標上觸發.此時監聽器需要收集資料並且執行所需操作.如果是從作業系統拖放檔案到瀏覽器,需要取消瀏覽器預設行為.

· dragend:滑鼠在拖放目標上釋放時,在拖拽元素上觸發.將元素從瀏覽器拖放到作業系統時不會觸發此事件.

8. 請列舉jquery中的選擇器：

9. Javascript中的定時器有哪些？他們的區別及用法是什麼？

setTimeout 只執行一次

setInterval 會一直重複執行

9.請描述一下 cookies sessionStorage和localstorage區別

相同點：都儲存在客戶端

不同點：1.儲存大小

· cookie資料大小不能超過4k。

· sessionStorage和localStorage 雖然也有儲存大小的限制，但比cookie大得多，可以達到5M或更大。

2.有效時間

· cookie 設定的cookie過期時間之前一直有效，即使視窗或瀏覽器關閉

3. 資料與伺服器之間的互動方式

· cookie的資料會自動的傳遞到伺服器，伺服器端也可以寫cookie到客戶端

· sessionStorage和localStorage不會自動把資料發給伺服器，僅在本地儲存。

10.計算一個數組arr所有元素的和

var arr1=[1,2,3,4,5,6,7,8,9];

var sum1=0;

for (var i=0;i<=arr1.length;i++) {

if (typeof arr1[i]=="number") {

sum1+=arr1[i];

}

}

document.write(sum1);

//====================================

function sum2(arr){

var all=0;

for (var i=0;i<arr.length;i++) {

if (typeof arr[i]=="number") {

all+=arr[i];

}

}

return all;

}

document.write(sum2([1,2,3,4]));

11.編寫一個方法去掉數組裡面 重複的內容 var arr=[1,2,3,4,5,1,2,3]

一個數組去重的簡單實現

var arr = ["abc","abcd","sss","2","d","t","2","ss","f","22","d"];

//定義一個新的陣列

var s = [];

//遍歷陣列

for(var i = 0;i<arr.length;i++){

if(s.indexOf(arr[i]) == -1){ //判斷在s陣列中是否存在，不存在則push到s陣列中

s.push(arr[i]);

}

}

console.log(s);

//輸出結果：["abc", "abcd", "sss", "2", "d", "t", "ss", "f", "22"]

方法二：用sort() 然後相鄰比較也可以實現

12.document.write和innerHTML的區別：

document.write是直接寫入到頁面的內容流，如果在寫之前沒有呼叫document.open, 瀏覽器會自動呼叫open。每次寫完關閉之後重新呼叫該函式，會導致頁面被重寫。

innerHTML則是DOM頁面元素的一個屬性，代表該元素的html內容。你可以精確到某一個具體的元素來進行更改。如果想修改document的內容，則需要修改document.documentElement.innerElement。

innerHTML將內容寫入某個DOM節點，不會導致頁面全部重繪

innerHTML很多情況下都優於document.write，其原因在於其允許更精確的控制要重新整理頁面的那一個部分。

13.ajax的步驟

什麼是ajax?

ajax(非同步javascript xml) 能夠重新整理區域性網頁資料而不是重新載入整個網頁。

如何使用ajax?

第一步，建立xmlhttprequest物件，var xmlhttp =new XMLHttpRequest（);XMLHttpRequest物件用來和伺服器交換資料。

var xhttp;

if (window.XMLHttpRequest) {

//現代主流瀏覽器

xhttp = new XMLHttpRequest();

} else {

// 針對瀏覽器，比如IE5或IE6

xhttp = new ActiveXObject("Microsoft.XMLHTTP");

}

第二步，使用xmlhttprequest物件的open（）和send（）方法傳送資源請求給伺服器。

第三步，使用xmlhttprequest物件的responseText或responseXML屬性獲得伺服器的響應。

第四步，onreadystatechange函式，當傳送請求到伺服器，我們想要伺服器響應執行一些功能就需要使用onreadystatechange函式，每次xmlhttprequest物件的readyState發生改變都會觸發onreadystatechange函式

14.xml和json的區別，請用四個詞語來形容

· JSON相對於XML來講，資料的體積小，傳遞的速度更快些

· JSON與JavaScript的互動更加方便，更容易解析處理，更好的資料互動

· XML對資料描述性比較好；

· JSON的速度要遠遠快於XML

15.清楚浮動的方法？(多次出現在面試題)

1.父級div定義 height

原理：父級div手動定義height，就解決了父級div無法自動獲取到高度的問題。

優點：簡單、程式碼少、容易掌握

缺點：只適合高度固定的佈局，要給出精確的高度，如果高度和父級div不一樣時，會產生問題

2，結尾處加空div標籤 clear:both

原理：新增一個空div，利用css提高的clear:both清除浮動，讓父級div能自動獲取到高度

優點：簡單、程式碼少、瀏覽器支援好、不容易出現怪問題

缺點：不少初學者不理解原理；如果頁面浮動佈局多，就要增加很多空div，讓人感覺很不好

3，父級div定義 偽類:after 和 zoom

原理：IE8以上和非IE瀏覽器才支援:after，原理和方法2有點類似，zoom(IE轉有屬性)可解決ie6,ie7浮動問題

優點：瀏覽器支援好、不容易出現怪問題（目前：大型網站都有使用，如：騰迅，網易，新浪等等）

缺點：程式碼多、不少初學者不理解原理，要兩句程式碼結合使用才能讓主流瀏覽器都支援

4，父級div定義 overflow:hidden

原理：必須定義width或zoom:1，同時不能定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區域的高度

優點：簡單、程式碼少、瀏覽器支援好

缺點：不能和position配合使用，因為超出的尺寸的會被隱藏。

16.box-sizing常用的屬性有哪些？分別有什麼作用？

屬性值

· box-sizing：content-box

· box-sizing：border-box

· box-sizing：inherit

content-box

· 這是box-sizing的預設屬性值

· 是CSS2.1中規定的寬度高度的顯示行為

· 在CSS中定義的寬度和高度就對應到元素的內容框

· 在CSS中定義的寬度和高度之外繪製元素的內邊距和邊框

border-box

· 在CSS中微元素設定的寬度和高度就決定了元素的邊框盒

· 即為元素在設定內邊距和邊框是在已經設定好的寬度和高度之內進行繪製

· CSS中設定的寬度和高度減去邊框和內間距才能得到元素內容所佔的實際寬度和高度

(Q1)box-sizing: content-box|border-box|inherit;

(Q2)content-box:寬度和高度分別應用到元素的內容框。在寬度和高度之外繪製元素的內邊距和邊框(元素預設效果)。

border-box:元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。透過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。

17.css選擇器有哪些，選擇器的權重的優先順序

選擇器型別

1、ID　　#id

2、class　　.class

3、標籤　　p

4、通用　　*

5、屬性　　[type="text"]

6、偽類　　：hover

7、偽元素　　::first-line

8、子選擇器、相鄰選擇器

三、權重計算規則

1. 第一等：代表內聯樣式，如: style=””，權值為1000。

2. 第二等：代表ID選擇器，如：#content，權值為0100。

3. 第三等：代表類，偽類和屬性選擇器，如.content，權值為0010。

4. 第四等：代表型別選擇器和偽元素選擇器，如div p，權值為0001。

5. 萬用字元、子選擇器、相鄰選擇器等的。如*、>、+,權值為0000。

6. 繼承的樣式沒有權值。

18. 塊級元素水平垂直居中的方法有哪些（三個方法）

讓div等塊級元素水平和垂直都居中，即永遠處於螢幕的正中央，當我們做如登入塊時非常有用！

　實現一、原理：要讓div等塊級元素水平和垂直居中，必需知道該div等塊級元素的寬度和高度，然後設定位置為絕對位置，距離頁面視窗左邊框和上邊框的距離設定為50%，這個50%就是指頁面視窗的寬度和高度的50%，最後將該div等塊級元素分別左移和上移，左移和上移的大小就是該div等塊級元素寬度和高度的一半。

CSS程式碼：

.mycss{

width:300px;

height:200px;

position:absolute;

left:50%;

top:50%;

margin:-100px 0 0 -150px }

實現二原理：利用CSS的margin設定為auto讓瀏覽器自己幫我們水平和垂直居中。

CSS程式碼：

.mycss{

position: absolute;

left: 0px;

right: 0;

top: 0;

bottom: 0;

margin: auto;

height: 200px;

width: 300px;

}

jQuery實現水平和垂直居中

　原理：jQuery實現水平和垂直居中的原理就是透過jQuery設定div等塊級元素的CSS，獲取div等塊級元素的左、上的邊距偏移量，邊距偏移量的演算法就是用頁面視窗 的寬度減去該div等塊級元素的寬度，得到的值再除以2即左偏移量，右偏移量演算法相同。注意div等塊級元素的CSS設定要在resize()方法中完成，就是每次改變視窗大 小時，都要執行設定div等塊級元素的CSS。

jquery程式碼：

$(window).resize(function(){

$(".myblock").css({

position: "absolute",

left: ($(window).width() - $(".myblock").outerWidth())/2,

top: ($(window).height() - $(".myblock").outerHeight())/2 });

});

此外在頁面載入時，就需要呼叫resize()方法

$(function(){

$(window).resize();

});

java開發技術學習教程及學習路線

http://www.atguigu.com/download.shtml

H5全棧前端開發技術學習教程及學習路線

http://www.atguigu.com/html5_video.shtml

大資料開發技術學習教程及學習路線

http://www.atguigu.com/bigdata_video.shtml