面試相關~

時間 2019-11-16

原文原文鏈接

網上一搜不少面試題，可是有時候感受繁瑣，如今本身也試着將其整理下，後續慢慢新增，但願能給須要的你有所幫助，（初次發文，有些沒注意到的，還請見諒~）

一、一個200*200的div在不一樣分辨率屏幕上下左右居中，用css實現

a、方法一

<div style="width: 500px;height: 500px;margin: 0 auto;">
　　<div style="width:200px;height: 200px;position: absolute;top:0;bottom:0;right:0;left:0;border: 1px solid #ddd;margin:auto;">上下左右居中測試</div>
</div>
 
b、方法二
 
<div style="width:500px;height:500px;border:1px solid green;display:flex;justify-content:center;align-items:center;">
<div style="">上下左右居中</div>
</div>

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

a、方法一（我本身寫的）

<div style="display: flex;">
<div calss="left" style="width:200px;height:200px;">left</div>
<div calss="center" style="flex:1;">center</div>
<div calss="right" style="width:200px;height:200px;">right</div>
</div>
 
b、方法二

　　css:

　　<style>
　　　　#left,#right {width: 200px; height: 200px;background-color: #ffe6b8;position: absolute;top: 120px;}
       #left { left: 0px;}
　　　　#right {right: 0px;}
　　　　#center {margin: 2px 210px;background-color: #eee;height: 200px;}　　
　　</style> html: <div id="left">left</div>
<div id="center">center</div>
<div id="right">right</div>

三、闡述清除浮動的方式（常見）

a、方法一 

直接給父元素設置高度（不推薦）

b、方法二  （父元素設置overflow：hidden ；必須定義width或zoom:1，同時不能定義height）

<div style="overflow:hidden;*zoom:1;">
<div style="float:left">test left</div>
<div style="float:right;">test right</div>
</div>


c、方法三  （父元素內部末尾添加空div  設置clear:both 屬性）
 
<div>
<div style="float:left;">測試test文字闡述清楚浮動</div>
<div style="float:right">測試test文字闡述清楚浮動的幾種方式</div>
<div style="clear:both;"></div>
</div>


d、方法四  （css僞類::after實現清除浮動）

注：IE8以上和非IE瀏覽器才支持:after，zoom(IE專有屬性)可解決ie6,ie7浮動問題  

css:

<style>

.clearfix{
zoom: 1;
}
.clearfix::after{
content:"020";
height:0;
display:block;
visibility: hidden;
clear: both;
}
</style>

html:

<div class="clearfix">
<div style="float:left;">left元素</div>
<div style="float:right;">right 元素</div>
</div>

四、解釋css sprites ，怎麼使用的？

CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的「background-image」，「background- repeat」，「background-position」的組合進行背景定位，background-position能夠用數字能精確的定位出背景圖片的位置。

CSS Sprites爲一些大型的網站節約了帶寬，讓提升了用戶的加載速度和用戶體驗，不須要加載更多的圖片

五、如何用原生js給一個按鈕綁定兩個onclick事件？

 html： <div id="btnClick">test 123</div> script： <script>
            var btn = document.getElementById("btnClick");
            btn.addEventListener("click", myFun1);
            btn.addEventListener("click", myFun2);
            function myFun1() {
                alert("第一次");
            }
            function myFun2() {
                alert("第二次");
            }
        </script>

六、列舉jquery中的選擇器

大體有：基本選擇器、層次選擇器、過濾選擇器、表單選擇器，下面作詳細介紹：javascript

1、基本選擇器

基本選擇器是jQuery中最經常使用也是最簡單的選擇器，它經過元素的id、class和標籤名等來查找DOM元素。


一、ID選擇器 #id

描述：根據給定的id匹配一個元素， 返回單個元素（注：在網頁中，id名稱不能重複）
示例：$("#test") 選取 id 爲 test 的元素

二、類選擇器 .class

描述：根據給定的類名匹配元素，返回元素集合
示例：$(".test") 選取全部class爲test的元素

三、元素選擇器 element

描述：根據給定的元素名匹配元素，返回元素集合
示例：$("p") 選取全部的<p>元素

四、*

描述：匹配全部元素，返回元素集合
示例：$("*") 選取全部的元素

五、selector1，selector2,...,selectorN

描述：將每一個選擇器匹配到的元素合併後一塊兒返回，返回合併後的元素集合
示例：$("p,span,p.myClass") 選取全部<p>,<span>和class爲myClass的<p>標籤的元素集合

2、層次選擇器

層次選擇器根據層次關係獲取特定元素。

一、後代選擇器

示例：$("p span") 選取元素裏的全部的元素（注：後代選擇器選擇父元素全部指定選擇的元素，無論是兒子級，仍是孫子級）

二、子選擇器 $("parent>child")

示例：$("p>span") 選擇元素下的全部元素（注：子選擇器只選擇直屬於父元素的子元素）

三、同輩選擇器 $("prev+next")

描述：選取緊接在prev元素後的next元素，返回元素集合
示例：$(".one+p") 選取class爲one的下一個同輩元素集合

四、同輩選擇器 $("prev~siblings")

描述：選取prev元素後的全部siblings元素，返回元素集合
示例：$("#two~p")選取id爲two的元素後全部同輩元素集合

3、過濾選擇器

1>基本過濾選擇器

一、 :first

描述：選取第一個元素，返回單個元素
示例：$("p:first") 選取全部元素中第一個元素

二、 :last

描述：選取最後一個元素，返回單個元素
示例：$("p:last") 選取全部元素中最後一個元素

三、 :not(selector)

描述：去除全部與給定選擇器匹配的元素，返回元素集合
示例：$("input:not(.myClass)") 選取class不是myClass的<input>元素

四、 :even

描述：選取索引是偶數的全部元素，索引從0開始，返回元素集合

五、 :odd

描述：選取索引是奇數的全部元素，索引從0開始，返回元素集合

六、 :eq(index)

描述：選取索引等於index的元素，索引從0開始，返回單個元素

七、 :gt(index)

描述：選取索引大於index的元素，索引從0開始，返回元素集合

八、 :lt(index)

描述：選取索引小於於index的元素，索引從0開始，返回元素集合

九、 :focus

描述：選取當前獲取焦點的元素

2>內容過濾選擇器

一、:contains(text)

描述：選取含有文本內容爲text的元素，返回元素集合
示例：$("p:contains('我')") 選取含有文本「我」的元素

二、:empty

描述：選取不包含子元素或者文本元素的空元素，返回元素集合
示例：$("p:empty") 選取不包含子元素或者文本元素的空元素（）

三、:has(selector)

描述：選取含有選擇器所匹配的元素的元素，返回元素集合
示例：$("p:has(p)") 選取含有元素的元素（）

四、:parent

描述：選取含有子元素或者文本的元素，返回元素集合
示例：$("p:parent") 選取含有子元素或者文本元素的元素（或者文本）

3>可見性過濾選擇器

一、:hidden

描述：選取全部不可見的元素，返回元素集合

二、:visible

描述：選取全部可見的元素，返回元素集合

4>屬性過濾選擇器（返回元素集合）

一、[attribute]

示例：$("p[id]") 選取擁有id屬性的p元素

二、[attribute=value]

示例：$("input[name=text]") 選取擁有name屬性等於text的input元素

三、[attribute!=value]

示例：$("input[name!=text]") 選取擁有name屬性不等於text的input元素

四、[attribute^=value]

示例：$("input[name^=text]") 選取擁有name屬性以text開始的input元素

五、[attribute$=value]

示例：$("input[name$=text]") 選取擁有name屬性以text結束的input元素

六、[attribute*=value]

示例：$("input[name*=text]") 選取擁有name屬性含有text的input元素

七、[attribute~=value]

示例：$("input[class~=text]") 選取擁有class屬性以空格分割的值中含有text的input元素

八、[attribute1][attribute2][attributeN]

描述：合併多個屬性過濾選擇器

5>表單對象屬性過濾選擇器（返回元素集合）

一、:enabled

描述：選取全部可用元素

二、:disabled

描述：選取全部不可用元素

三、:checked

描述：選取全部被選中的元素（單選框，複選框）

示例：$("input:checked") 選取全部被選中的<input>元素

四、:selected

描述：選取全部被選中的選項元素（下拉列表）

示例：$("select option:selected") 選取全部被選中的選項元素

4、表單選擇器

一、:text

描述：選擇全部的單行文本框

示例：$(":text")選取全部的單行文本框

二、:password

描述：選擇全部的密碼框

三、:button

描述：選擇全部的按鈕

四、:checkbox

描述：選擇全部的多選框

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

定時器：setTimeOut（）和setInterval（）html

區別：前端

 var time=setTimeout(function(){
            //  do sth
            },500)
           setTimeout 只執行一次 ,須要用clearTimeout(time)終止
 var timeSet=setInterval(function(){
                //do sth
            },1000)
           setInterval 重複執行,一直到用clearTimeout(timeSet)終止

八、描述一下 cookies sessionStorage和localstorage區別vue

相同點：都存儲在客戶端

不一樣點：

1.存儲大小
    
2.有效時間

localStorage    存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據；

sessionStorage  數據在當前瀏覽器窗口關閉後自動刪除。

cookie          

設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉

3. 數據與服務器之間的交互方式

 cookie的數據會自動的傳遞到服務器，服務器端也能夠寫cookie到客戶端

 sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。

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

調用localstorge、cookies等本地存儲方式

8.1.2 請你談談Cookie的弊端java

cookie

1.IE6或更低版本最多20個cookie
2.IE7和以後的版本最後能夠有50個cookie。
3.Firefox最多50個cookie
4.chrome和Safari沒有作硬性限制
Opera 會清理近期最少使用的Firefox會隨機清理 4096字節，爲了兼容性，通常不能超過 IE 提供了一種存儲能夠持久化用戶數據，叫作IE5.0就開始支持。每一個數據最多128K，每一個域名下最多1M。這個持久化數據放在緩存中，若是緩存沒有清理，那麼會一直存在。

優勢：極高的擴展性和可用性
1.經過良好的編程，控制保存在cookie中的session對象的大小。
2.經過加密和安全傳輸技術（SSL），減小cookie被破解的可能性。
3.只在cookie中存放不敏感數據，即便被盜也不會有重大損失。
4.控制cookie的生命期，使之不會永遠有效。偷盜者極可能拿到一個過時的cookie。
缺點：
1.`Cookie`數量和長度的限制。每一個domain最多隻能有20條cookie，每一個cookie長度不能超過4KB，不然會被截掉。

2.安全性問題。若是cookie被人攔截了，那人就能夠取得全部的session信息。即便加密也與事無補，由於攔截者並不須要知道cookie的意義，他只要原樣轉發cookie就能夠達到目的了。

3.有些狀態不可能保存在客戶端。例如，爲了防止重複提交表單，咱們須要在服務器端保存一個計數器。若是咱們把這個計數器保存在客戶端，那麼它起不到任何做用。

8.1.3 瀏覽器本地存儲react

在較高版本的瀏覽器中，sessionStorage和HTML5中提供了globalStorage。

Web Storage包括了兩種存儲方式：localStorage。

sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。

九、計算一個數組arr全部元素的和jquery

方法一：

var arr=[1,2,3,4,5,6,7,8,9];
var totalNum=0; for(var i=0;i<arr.length;i++){ if (typeof arr[i]=="number") { totalNum+=arr[i] } }// console.log(totalNum)

方法二：

function sumNum(arr){
    var totalNum=0;
    for(var i=0;i<arr.length;i++){
        if (typeof arr[i]=="number") {
            totalNum+=arr[i]
        }
    }
    return  totalNum;
}//console.log(sumNum(arr))

十、編寫一個方法去掉數組裏面重複的內容 var arr=[1,2,3,4,5,1,2,3]webpack

方法一：

var arr2=[1,2,3,4,5,1,2,3]
var arrNew=[];
for(var i=0;i<arr2.length;i++){
 if(arrNew.indexOf(arr2[i])==-1){
       arrNew.push(arr2[i]) } } //console.log(arrNew) 定義新的數組去接收



方法二： 雙層循環，外層循環元素，內層循環時比較值 若是有相同的值則跳過，不相同則push進數組 var arr = [1,2,3,4,4,1,1,2,1,1,1];
Array.prototype.distinct = function(){
      var arr = this,
      result = [],
      i,
      j,
      len = arr.length;
      for(i = 0; i < len; i++){
          for(j = i + 1; j < len; j++){
              if(arr[i] === arr[j]){
                 j = ++i;
              }
          }
         result.push(arr[i]);
      }
       return result;
}//console.log(arr.distinct())

十一、document.write和innerHTML的區別

document.write是直接寫入到頁面的內容流，若是在寫以前沒有調用document.open, 瀏覽器會自動調用open。每次寫完關閉以後從新調用該函數，會致使頁面被重寫。

innerHTML則是DOM頁面元素的一個屬性，表明該元素的html內容。你能夠精確到某一個具體的元素來進行更改。若是想修改document的內容，則須要修改document.documentElement.innerElement。

innerHTML將內容寫入某個DOM節點，不會致使頁面所有重繪

十二、box-sizing經常使用的屬性有哪些？分別有什麼做用？

屬性

box-sizing：content-box | box-sizing：border-box、 | box-sizing：inherit

content-box

寬度和高度分別應用到元素的內容框。在寬度和高度以外繪製元素的內邊距和邊框(元素默認效果)。

是box-sizing的默認屬性值
在CSS中定義的寬度和高度就對應到元素的內容框
在CSS中定義的寬度和高度以外繪製元素的內邊距和邊框

　　 border-box

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

　　通俗解釋

content-box 是W3C的標準盒模型元素寬度=內容寬度+padding+border

border-box 是ie的怪異盒模型他的元素寬度等於內容寬度內容寬度包含了padding和border

好比有時候在元素基礎上添加內距padding或border會將佈局撐破可是使用border-box就能夠輕鬆完成

1三、css選擇器有哪些，選擇器的權重的優先級

選擇器類型


　　1.標籤選擇器(如：body,div,p,ul,li)

　　2.類選擇器(如：class="head",class="head_logo")

　　3.ID選擇器(如：id="name",id="name_txt")

　　4.全局選擇器(如：*號)

　　5.組合選擇器(如：.head .head_logo,注意兩選擇器用空格鍵分開)

　　6.後代選擇器 (如：#head .nav ul li 從父集到子孫集的選擇器)

　　7.羣組選擇器 div,span,img {color:Red} 即具備相一樣式的標籤分組顯示

　　8.繼承選擇器(如：div p,注意兩選擇器用空格鍵分開)

　　9.僞類選擇器(如：就是連接樣式,a元素的僞類，4種不一樣的狀態：link、visited、active、hover。)

　　10.字符串匹配的屬性選擇符(^ $ *三種，分別對應開始、結尾、包含)

　　11.子選擇器 (如：div>p ,帶大於號>)

　　12.CSS 相鄰兄弟選擇器器 (如：h1+p,帶加號+)

優先級

　　一、優先級相同時，則採用就近原則，選擇最後出現的樣式;

　　二、繼承得來的屬性，其優先級最低;

　　!important > 行內樣式>ID選擇器 > 類選擇器 > 標籤 > 通配符 > 繼承 > 瀏覽器默認屬性

1四、js有幾種數據類型，其中基本數據類型有哪些

五種基本類型: Undefined、Null、Boolean、Number和String。

1中複雜的數據類型————Object，Object本質上是由一組無序的名值對組成的。

Object、Array和Function則屬於引用類型

1五、undefined 和 null 區別

null： Null類型，表明「空值」，表明一個空對象指針，使用typeof運算獲得 「object」，因此你能夠認爲它是一個特殊的對象值。

undefined： Undefined類型，當一個聲明瞭一個變量未初始化時，獲得的就是undefined。

null是javascript的關鍵字，能夠認爲是對象類型，它是一個空對象指針，和其它語言同樣都是表明「空值」，不過 undefined 倒是javascript纔有的。
undefined是在ECMAScript第三版引入的，爲了區分空指針對象和未初始化的變量，它是一個預約義的全局變量。沒有返回值的函數返回爲undefined，沒有實參的形參也是undefined。

1六、如何進行網站性能優化

頁面級優化
1. JavaScript 壓縮和模塊打包
2. 按需加載資源
3. 在使用 DOM 操做庫時用上 array-ids
4. 緩存
5. 啓用 HTTP/2
6. 應用性能分析
7. 使用負載均衡方案
8. 爲了更快的啓動時間考慮一下同構
9. 使用索引加速數據庫查詢
10. 使用更快的轉譯方案
11. 避免或最小化 JavaScript 和 CSS 的使用而阻塞渲染
12. 用於將來的一個建議：使用 service workers + 流
13. 圖片編碼優化

1七、什麼是mvvm mvc是什麼區別原理

1、MVC（Model-View-Controller）

MVC是比較直觀的架構模式，用戶操做->View（負責接收用戶的輸入操做）->Controller（業務邏輯處理）->Model（數據持久化）->View（將結果反饋給View）。

MVC使用很是普遍，好比JavaEE中的SSH框架

 

3、MVVM（Model-View-ViewModel）

若是說MVP是對MVC的進一步改進，那麼MVVM則是思想的徹底變革。它是將「數據模型數據雙向綁定」的思想做爲核心，所以在View和Model之間沒有聯繫，經過ViewModel進行交互，

並且Model和ViewModel之間的交互是雙向的，所以視圖的數據的變化會同時修改數據源，而數據源數據的變化也會當即反應view。

1八、px和em rem的區別

px實際上就是像素，用PX設置字體大小時，比較穩定和精確。可是px不支持用戶進行瀏覽器縮放或者不一樣移動端的兼容，由於像素是固定的，屏幕大小是變化的。由此引入了em和rem。

em是根據父元素來對應大小，是一種相對值，並非絕對值，em值 = 1/父元素的font-size*須要轉換的像素值。進行任何元素設置，都有可能須要知道他父元素的大小，這很不方便因此又有了rem。

rem是根據根元素html的font-size來對應大小，1rem = 100px,能夠在根元素html中寫固定像素也能夠寫百分比，而後在具體的標籤上設置rem

1九、優雅降級和漸進加強

漸進加強（Progressive Enhancement）：一開始就針對低版本瀏覽器進行構建頁面，完成基本的功能，而後再針對高級瀏覽器進行效果、交互、追加功能達到更好的體驗。

優雅降級（Graceful Degradation）：一開始就構建站點的完整功能，而後針對瀏覽器測試和修復。好比一開始使用 CSS3 的特性構建了一個應用，而後逐步針對各大瀏覽器進行 hack 使其能夠在低版本瀏覽器上正常瀏覽

20、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新標籤，

  瀏覽器支持新標籤後，還須要添加標籤默認的樣式：

* 固然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
   <!--[if lt IE 9]> 
   <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> 
   <![endif]--> 
 如何區分： DOCTYPE聲明\新增的結構元素\功能元素

新特性：

新的DOCTYPE聲明 <!DOCTYPE html>

　　徹底支持css3

　　video和audio

　　本地存儲

　　語義化標籤

　　canvas 新事件如ondrag onresize

2一、在一個ul裏有10個li，實現點擊對應的li，輸出對應的下標

　　
var lis = document.querySelectorAll('li');
     for(var i=0;i<lis.length;i++){
       lis[i].onclick = (function(a) { return function() { alert(a) } })(i) }//(如如有不理解  請自行查閱javascript 當即執行函數相關知識）

2二、http 和 https 有何區別？如何靈活使用？

http是HTTP協議運行在TCP之上。全部傳輸的內容都是明文，客戶端和服務器端都沒法驗證對方的身份。

https是HTTP運行在SSL/TLS之上，SSL/TLS運行在TCP之上。全部傳輸的內容都通過加密，加密採用對稱加密，但對稱加密的密鑰用服務器方的證書進行了非對稱加密。此外客戶端能夠驗證服務器端的身份，若是配置了客戶端驗證，服務器方也能夠驗證客戶端的身份

2三、常見的HTTP狀態碼

2開頭 （請求成功）表示成功處理了請求的狀態代碼。

200   （成功）  服務器已成功處理了請求。 一般，這表示服務器提供了請求的網頁。
3開頭 （請求被重定向）表示要完成請求，須要進一步操做。 一般，這些狀態代碼用來重定向。

4開頭 （請求錯誤）這些狀態代碼表示請求可能出錯，妨礙了服務器的處理。 
400   （錯誤請求） 服務器不理解請求的語法。 
403   （禁止） 服務器拒絕請求。
404   （未找到） 服務器找不到請求的網頁。
405   （方法禁用） 禁用請求中指定的方法。 

5開頭（服務器錯誤）這些狀態代碼表示服務器在嘗試處理請求時發生內部錯誤。 這些錯誤多是服務器自己的錯誤，而不是請求出錯。

500   （服務器內部錯誤）  服務器遇到錯誤，沒法完成請求。 
502   （錯誤網關） 服務器做爲網關或代理，從上游服務器收到無效響應。 
503   （服務不可用） 服務器目前沒法使用（因爲超載或停機維護）。 一般，這只是暫時狀態。 
504   （網關超時）  服務器做爲網關或代理，可是沒有及時從上游服務器收到請求。 
505   （HTTP 版本不受支持） 服務器不支持請求中所用的 HTTP 協議版本。

2四、react和vue有哪些不一樣，說說你對這兩個框架的見解

相同點

· 都支持服務器端渲染

· 都有Virtual DOM,組件化開發,經過props參數進行父子組件數據的傳遞,都實現webComponent規範

· 數據驅動視圖

· 都有支持native的方案,React的React native,Vue的weex

不一樣點

· React嚴格上只針對MVC的view層,Vue則是MVVM模式

· virtual DOM不同,vue會跟蹤每個組件的依賴關係,不須要從新渲染整個組件樹.而對於React而言,每當應用的狀態被改變時,所有組件都會從新渲染,因此react中會須要shouldComponentUpdate這個生命週期函數方法來進行控制

· 組件寫法不同, React推薦的作法是 JSX + inline style, 也就是把HTML和CSS全都寫進JavaScript了,即'all in js'; Vue推薦的作法是webpack+vue-loader的單文件組件格式,即html,css,jd寫在同一個文件;

· 數據綁定: vue實現了數據的雙向綁定,react數據流動是單向的

· state對象在react應用中不可變的,須要使用setState方法更新狀態;在vue中,state對象不是必須的,數據由data屬性在vue對象中管理

2五、Vue雙向數據綁定的實現

vue.js 則是採用數據劫持結合發佈者-訂閱者模式的方式，經過Object.defineProperty()來劫持各個屬性的setter，getter，在數據變更時發佈消息給訂閱者（文本節點則是做爲訂閱者），在收到消息後執行相應的更新操做。

compile主要作的事情是解析模板指令，將模板中的變量替換成數據，而後初始化渲染頁面視圖，並將每一個指令對應的節點綁定更新函數，添加監聽數據的訂閱者，一旦數據有變更，收到通知，更新視圖

MVVM做爲數據綁定的入口，整合Observer、Compile和Watcher三者，經過Observer來監聽本身的model數據變化，經過Compile來解析編譯模板指令，最終利用Watcher搭起Observer和Compile之間的通訊橋樑，達到數據變化 -> 視圖更新；視圖交互變化(input) -> 數據model變動的雙向綁定效果。

AngularJS 採用「髒值檢測」的方式，數據發生變動後，對於全部的數據和視圖的綁定關係進行一次檢測，識別是否有數據發生了改變。

2六、什麼是Vue的生命週期

Vue 實例從建立到銷燬的過程，就是生命週期。也就是從開始建立、初始化數據、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列過程，咱們稱這是 Vue 的生命週期。

理解：

總共分爲8個階段建立前/後，載入前/後，更新前/後，銷燬前/後。

建立前/後：在beforeCreated階段，vue實例的掛載元素$el和數據對象data都爲undefined，還未初始化。在created階段，vue實例的數據對象data有了，$el尚未。

載入前/後：在beforeMount階段，vue實例的$el和data都初始化了，但仍是掛載以前爲虛擬的dom節點，data.message還未替換。在mounted階段，vue實例掛載完成，data.message成功渲染。

更新前/後：當data變化時，會觸發beforeUpdate和updated方法。

銷燬前/後：在執行destroy方法後，對data的改變不會再觸發周期函數，說明此時vue實例已經解除了事件監聽以及和dom的綁定，可是dom結構依然存在

2七、eval()的做用

把字符串參數解析成JS代碼並運行，並返回執行的結果；

eval("2+3");//執行加運算，並返回運算值。  

eval("varage=10");//聲明一個age變量  

eval的做用域

function a(){  

    eval("var x=1"); //等效於 var x=1;   
    console.log(x); //輸出1  

 }  

a();  

console.log(x);// x is not defined

2八、JS那些操做能形成內存泄漏（參閱地址：https://blog.csdn.net/michael8512/article/details/77888000 || https://blog.csdn.net/li2274221/article/details/25217297）

一、意外的全局變量引發的內存泄露
    function leak(){
        leak="xxx";//leak成爲一個全局變量，不會被回收
    }

二、閉包引發的內存泄露
    
   例： function bindEvent(){
          var obj=document.createElement("XXX");
          obj.onclick=function(){
            //Even if it's a empty function
          }
    }    
    閉包能夠維持函數內局部變量，使其得不到釋放。 上例定義事件回調時，因爲是函數內定義函數，而且內部函數--事件回調的引用外暴了，造成了閉包。
     解決之道，將事件處理函數定義在外部，解除閉包,或者在定義事件處理函數的外部函數中，刪除對dom的引用。

解決法一：
    //將事件處理函數定義在外部
    function onclickHandler(){
      //do something
    }
    function bindEvent(){
      var obj=document.createElement("XXX");
      obj.onclick=onclickHandler;
    }
解決法二：
    //在定義事件處理函數的外部函數中，刪除對dom的引用
    function bindEvent(){
      var obj=document.createElement("XXX");
      obj.onclick=function(){
        //Even if it's a empty function
      }
      obj=null;
    }
解決方法三：
//採用事件委託

<div id="myDiv">
    <input type="button" value="Click me" id="myBtn">
</div>

<script type="text/javascript">
    document.onclick = function(event){
        event = event || window.event;
        if(event.target.id == "myBtn"){
            document.getElementById("myDiv").innerHTML = "Processing...";
        }
    }
</script>


三、沒有清理的DOM元素引用

四、子元素存在引發的內存泄露

五、被遺忘的定時器或者回調

六、IE7/8引用計數使用循環引用產生的問題

2九、什麼是閉包，如何使用它，爲何要使用它？

閉包就是可以讀取其餘函數內部變量的函數。因爲在Javascript語言中，只有函數內部的子函數才能讀取局部變量，所以能夠把閉包簡單理解成「定義在一個函數內部的函數」。

因此，在本質上，閉包就是將函數內部和函數外部鏈接起來的一座橋樑。閉包能夠用在許多地方。它的最大用處有兩個，一個是前面提到的能夠讀取函數內部的變量，另外一個就是讓這些變量的值始終保持在內存中。

使用閉包的注意點：

· 因爲閉包會使得函數中的變量都被保存在內存中，內存消耗很大，因此不能濫用閉包，不然會形成網頁的性能問題，在IE中可能致使內存泄露。解決方法是，在退出函數以前，將不使用的局部變量所有刪除。

· 閉包會在父函數外部，改變父函數內部變量的值。因此，若是你把父函數看成對象（object）使用，把閉包看成它的公用方法（Public Method），把內部變量看成它的私有屬性（private value），這時必定要當心，不要隨便改變父函數內部變量的值。

30、行內元素有哪些?塊級元素有哪些?CSS的盒模型?可繼承的樣式有哪些

行內元素：span,a,var ,em,input,img,img,textarea,var,em,strong,select,

塊級標籤：div,p,h1-h3,ul,ol,dl,li,dd,dt,table,td,tr,form

CSS的盒模型：

　　1）有兩種， IE 盒子模型、標準 W3C 盒子模型；IE的content部分包含了 border 和 pading;

　　2）盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border).

可繼承的樣式： font-size font-family color, UL LI DL DD DT; 不可繼承的樣式：border padding margin width height ;

3一、CSS引入的方式有哪些? link和@import的區別是?

內聯 內嵌 外鏈 導入

區別 ：

　　　　(1) link屬於HTML標籤，而@import是CSS提供的;

　　　　(2) 頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;

　　　　(3) import只在IE5以上才能識別，而link是HTML標籤，無兼容問題; (4) link方式的樣式的權重 高於@import的權重.

前者無兼容性，後者CSS2.1如下瀏覽器不支持
Link 支持使用javascript改變樣式，後者不可

3二、前端頁面有哪三層構成，分別是什麼?做用是什麼?

結構層 Html 表示層 CSS 行爲層 js

3三、什麼是語義化的HTML

直觀的認識標籤對於搜索引擎的抓取有好處

1，去掉或者丟失樣式的時候可以讓頁面呈現出清晰的結構
2，有利於SEO：和搜索引擎創建良好溝通，有助於爬蟲抓取更多的有效信息：爬蟲依賴於標籤來肯定上下文和各個關鍵字的權重；
3，方便其餘設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；
4，便於團隊開發和維護，語義化更具可讀性，是下一步吧網頁的重要動向，遵循W3C標準的團隊都遵循這個標準，能夠減小差別化。

3四、split() join() 的區別

前者是切割成數組的形式，後者是將數組轉換成字符串

3五、數組方法pop() push() unshift() shift()

Push()尾部添加 pop()尾部刪除
Unshift()頭部添加 shift()頭部刪除

3六、如何阻止事件冒泡和默認事件

canceBubble return false

3七、添加刪除替換插入到某個接點的方法

obj.appendChidl()
obj.innersetBefore
obj.replaceChild
obj.removeChild

3八、document load 和document ready的區別

Document.onload 是在結構和樣式加載完才執行js
Document.ready原生種沒有這個方法，jquery中有 $().ready(function)

3九、」==」和「===」的不一樣

前者會自動轉換類型
後者不會

40、position的absolute與fixed共同點與不一樣點

A：共同點：

1.改變行內元素的呈現方式，display被置爲block；2.讓元素脫離普通流，不佔據空間；3.默認會覆蓋到非定位元素上

B不一樣點：

absolute的」根元素「是能夠設置的，而fixed的」根元素「固定爲瀏覽器窗口。當你滾動網頁，fixed元素與瀏覽器窗口之間的距離是不變的。  

補充：display的值，說明他們的做用。position的值， relative和absolute分別是相對於誰進行定位的

1.

 block 象塊類型元素同樣顯示。 inline 缺省值。象行內元素類型同樣顯示。 inline-block 象行內元素同樣顯示，但其內容象塊類型元素同樣顯示。  list-item 象塊類型元素同樣顯示，並添加樣式列表標記。 2. *absolute 生成絕對定位的元素，相對於 static 定位之外的第一個祖先元素進行定位。 *fixed （老IE不支持） 生成絕對定位的元素，相對於瀏覽器窗口進行定位。 *relative 生成相對定位的元素，相對於其在普通流中的位置進行定位。 * static 默認值。沒有定位，元素出如今正常的流中 *（忽略 top, bottom, left, right z-index 聲明）。 * inherit 規定從父元素繼承 position 屬性的值。

40.1 display:none和visibility:hidden的區別？

display:none  隱藏對應的元素，在文檔佈局中再也不給它分配空間，它各邊的元素會合攏，就當他歷來不存在。

visibility:hidden  隱藏對應的元素，可是在文檔佈局中仍保留原來的空間。

4一、爲何要初始化CSS樣式？CSS3有哪些新特性？

初始化樣式：
  由於瀏覽器的兼容問題，不一樣瀏覽器對有些標籤的默認值是不一樣的，若是沒對CSS初始化每每會出現瀏覽器之間的頁面顯示差別。

    固然，初始化樣式會對SEO有必定的影響，但魚和熊掌不可兼得，但力求影響最小的狀況下初始化。

*最簡單的初始化方法就是： * {padding: 0; margin: 0;} （不建議）

CSS3新特性：

CSS3實現圓角（border-radius），陰影（box-shadow），

對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform）

transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉,縮放,定位,傾斜

增長了更多的CSS選擇器  多背景 rgba 

在CSS3中惟一引入的僞元素是::selection.

媒體查詢，多欄佈局

border-image

4二、Doctype做用? 嚴格模式與混雜模式如何區分？它們有何意義?

（1）、<!DOCTYPE> 聲明位於文檔中的最前面，處於 <html> 標籤以前。告知瀏覽器以何種模式來渲染文檔。 

（2）、嚴格模式的排版和 JS 運做模式是  以該瀏覽器支持的最高標準運行。

（3）、在混雜模式中，頁面以寬鬆的向後兼容的方式顯示。模擬老式瀏覽器的行爲以防止站點沒法工做。

（4）、DOCTYPE不存在或格式不正確會致使文檔以混雜模式呈現。   

 你知道多少種Doctype文檔類型？

 該標籤可聲明三種 DTD 類型，分別表示嚴格版本、過渡版本以及基於框架的 HTML 文檔。
 HTML 4.01 規定了三種文檔類型：Strict、Transitional 以及 Frameset。
 XHTML 1.0 規定了三種 XML 文檔類型：Strict、Transitional 以及 Frameset。
 Standards （標準）模式（也就是嚴格呈現模式）用於呈現遵循最新標準的網頁，而 Quirks（包容）模式（也就是鬆散呈現模式或者兼容模式）用於呈現爲傳統瀏覽器而設計的網頁。

4三、HTML與XHTML——兩者有什麼區別

1.全部的標記都必需要有一個相應的結束標記

2.全部標籤的元素和屬性的名字都必須使用小寫

3.全部的XML標記都必須合理嵌套

4.全部的屬性必須用引號""括起來

5.把全部<和&特殊符號用編碼表示

6.給全部屬性賦一個值

7.不要在註釋內容中使「--」

8.圖片必須有說明文字

4四、常見兼容性問題？

* png24位的圖片在iE6瀏覽器上出現背景，解決方案是作成PNG8.也能夠引用一段腳本處理.

* 瀏覽器默認的margin和padding不一樣。解決方案是加一個全局的*{margin:0;padding:0;}來統一。

* IE6雙邊距bug:塊屬性標籤float後，又有橫行的margin狀況下，在ie6顯示margin比設置的大。 

* 浮動ie產生的雙倍距離（IE6雙邊距問題：在IE6下，若是對元素設置了浮動，同時又設置了margin-left或margin-right，margin值會加倍。）
  #box{ float:left; width:10px; margin:0 0 0 100px;} 

 這種狀況之下IE會產生20px的距離，解決方案是在float的標籤樣式控制中加入 ——_display:inline;將其轉化爲行內屬性。(_這個符號只有ie6會識別)

*  漸進識別的方式，從整體中逐漸排除局部。 

  首先，巧妙的使用「\9」這一標記，將IE遊覽器從全部狀況中分離出來。 
  接着，再次使用「+」將IE8和IE七、IE6分離開來，這樣IE8已經獨立識別。

 css .bb{ background-color:#f1ee18;/*全部識別*/ .background-color:#00deff\9; /*IE六、七、8識別*/ +background-color:#a200ff;/*IE六、7識別*/ _background-color:#1e0bd1;/*IE6識別*/ } 

*  IE下,可使用獲取常規屬性的方法來獲取自定義屬性,
   也可使用getAttribute()獲取自定義屬性;
   Firefox下,只能使用getAttribute()獲取自定義屬性. 
   解決方法:統一經過getAttribute()獲取自定義屬性.

* IE下,event對象有x,y屬性,可是沒有pageX,pageY屬性; 
  Firefox下,event對象有pageX,pageY屬性,可是沒有x,y屬性.

* 解決方法：（條件註釋）缺點是在IE瀏覽器下可能會增長額外的HTTP請求數。

* Chrome 中文界面下默認會將小於 12px 的文本強制按照 12px 顯示, 
  可經過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決.

* 超連接訪問事後hover樣式就不出現了 被點擊訪問過的超連接樣式不在具備hover和active瞭解決方法是改變CSS屬性的排列順序: L-V-H-A : a:link {} a:visited {} a:hover {} a:active {} 
* 怪異模式問題：漏寫DTD聲明，Firefox仍然會按照標準模式來解析網頁，但在IE中會觸發怪異模式。爲避免怪異模式給咱們帶來沒必要要的麻煩，最好養成書寫DTD聲明的好習慣。如今可使用[html5](http://www.w3.org/TR/html5/single-page.html)推薦的寫法：`<doctype html>`

* 上下margin重合問題
ie和ff都存在，相鄰的兩個div的margin-left和margin-right不會重合，可是margin-top和margin-bottom卻會發生重合。
解決方法，養成良好的代碼編寫習慣，同時採用margin-top或者同時採用margin-bottom。
* ie6對png圖片格式支持很差(引用一段腳本處理)

4五、iframe的優缺點？

優勢：
    解決加載緩慢的第三方內容如圖標和廣告等的加載問題
    Security sandbox
    並行加載腳本
缺點：
    *iframe會阻塞主頁面的Onload事件；
    *即時內容爲空，加載也須要時間
    *沒有語意

cookie

1.IE6或更低版本最多20個cookie 2.IE7和以後的版本最後能夠有50個cookie。 3.Firefox最多50個cookie 4.chrome和Safari沒有作硬性限制

Opera 會清理近期最少使用的Firefox會隨機清理 4096字節，爲了兼容性，通常不能超過 IE 提供了一種存儲能夠持久化用戶數據，叫作IE5.0就開始支持。每一個數據最多128K，每一個域名下最多1M。這個持久化數據放在緩存中，若是緩存沒有清理，那麼會一直存在。

優勢：極高的擴展性和可用性

1.經過良好的編程，控制保存在cookie中的session對象的大小。
2.經過加密和安全傳輸技術（SSL），減小cookie被破解的可能性。
3.只在cookie中存放不敏感數據，即便被盜也不會有重大損失。
4.控制cookie的生命期，使之不會永遠有效。偷盜者極可能拿到一個過時的cookie。

缺點：

1.`Cookie`數量和長度的限制。每一個domain最多隻能有20條cookie，每一個cookie長度不能超過4KB，不然會被截掉。 2.安全性問題。若是cookie被人攔截了，那人就能夠取得全部的session信息。即便加密也與事無補，由於攔截者並不須要知道cookie的意義，他只要原樣轉發cookie就能夠達到目的了。 3.有些狀態不可能保存在客戶端。例如，爲了防止重複提交表單，咱們須要在服務器端保存一個計數器。若是咱們把這個計數器保存在客戶端，那麼它起不到任何做用。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。