前端基礎面試題

轉自：

http://www.qdfuns.com/notes/40816/795e40bec4bcf47ca37f983ce62f1ea4.html

HTML+CSS部分

1.行內元素和塊級元素?img算什麼?行內元素怎麼轉化爲塊級元素?
行內元素：和有他元素都在一行上，高度、行高及外邊距和內邊距都不可改變，文字圖片的寬度不可改變，只能容納文本或者其餘行內元素；其中img是行元素
塊級元素：老是在新行上開始，高度、行高及外邊距和內邊距均可控制，能夠容納內斂元素和其餘元素；
行元素轉換爲塊級元素方式：display：block；
2.將多個元素設置爲同一行?清除浮動有幾種方式?
將多個元素設置爲同一行：float，inline-block
清除浮動的方式：方法一：添加新的元素 、應用 clear：both；
  方法二：父級div定義 overflow: hidden；
方法三：利用:after和:before來在元素內部插入兩個元素塊，從面達到清除浮動的效果。
.clear{zoom:1;}
.clear:after{content:」」;clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}
3.怪異盒模型box-sizing？彈性盒模型|盒佈局?
在標準模式下的盒模型：盒子總寬度/高度=width/height+padding+border+margin
在怪異模式下的盒模型下，盒子的總寬度和高度是包含內邊距padding和邊框border寬度在內的，盒子總寬度/高度=width/height + margin = 內容區寬度/高度 + padding + border + margin;
box-sizing有兩個值一個是content-box，另外一個是border-box。
當設置爲box-sizing:content-box時，將採用標準模式解析計算；
當設置爲box-sizing:border-box時，將採用怪異模式解析計算。
4.簡述幾個css hack?
（1）圖片間隙 
在div中插入圖片，圖片會將div下方撐大3px。hack1：將<div>與<img>寫在同一行。hack2：給<img>添加display：block；
dt  li 中的圖片間隙。hack：給<img>添加display：block；
（2）默認高度，IE6如下版本中，部分塊元素，擁有默認高度（低於18px）
hack1：給元素添加：font-size：0；
hack2：聲明：overflow：hidden；
表單行高不一致
hack1：給表單添加聲明：float：left；height： ；border： 0；
鼠標指針
hack：若統一某一元素鼠標指針爲手型：cursor：pointer；
當li內的a轉化塊元素時，給a設置float，IE裏面會出現階梯狀
hack1：給a加display：inline-block；
hack2：給li加float：left；

7.href和src區別?title和alt
    href (Hypertext Reference)指定網絡資源的位置（超文本引用），從而在當前元素或者當前文檔和由當前屬性定義的須要的錨點或資源之間定義一個連接或者關係，在 link和a 等元素上使用。
    src (Source)屬性僅僅嵌入當前資源到當前文檔元素定義的位置，是頁面必不可少的一部分，是引入。在 img、script、iframe 等元素上使用。
  title：既是html標籤，又是html屬性，title做爲屬性時，用來爲元素提供額外說明信息.
   alt：alt是html標籤的屬性，alt屬性則是用來指定替換文字，只能用在img、area和input元素中（包括applet元素），用於網頁中圖片沒法正常顯示時給用戶提供文字說明使其瞭解圖像信息.
8.transform？animation？區別?animation-duration
         Transform:它和width、left同樣，定義了元素不少靜態樣式實現變形、旋轉、縮放、移位及透視等功能，經過一系列功能的組合咱們能夠實現很炫酷的靜態效果（非動畫)。 
    Animation:做用於元素自己而不是樣式屬性,屬於關鍵幀動畫的範疇，它自己被用來替代一些純粹表現的javascript代碼而實現動畫,能夠經過keyframe顯式控制當前幀的屬性值.
animation-duration：規定完成動畫所花費的時間，以秒或毫秒計。
9.nth-of-type | nth-child?
舉例說明：
<ul>
<p>111</p>
<span>222<span>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
li:nth-of-type(2):表示ul下的第二個li元素 
li:nth-child(2)：表示既是li元素又是在ul下的第二個元素（找不到）。
建議通常使用nth-of-type，不容易出問題。
10 .:before 和 ::before 區別?
單冒號(:)用於CSS3僞類，雙冒號(::)用於CSS3僞元素。
對於CSS2以前已有的僞元素，好比:before，單冒號和雙冒號的寫法::before做用是同樣的。
11.如何讓一個div 上下左右居中?
答：有三種方法。
方法1：
.div1{
         width:400px;
         height:400px;
         border:#CCC 1px solid;
         background:#99f;
         position:absolute;
         left:50%;
         top:50%;
         transform: translate(-50%,-50%);
}                        
<div class="div1"></div>
方法2：
.div2{
    width:400px;
    height:400px;
    border:#CCC 1px solid;
    background:#99f;
    position: absolute;
    left:0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}
<div class="div2"></div>
方法3：
.div3{
    width:400px;
    height:400px;
    border:#CCC 1px solid;
    background:#9f9;
    position: absolute;
    left: 50%;
    top:50%;
    margin-left:-200px;
    margin-top: -200px;        
}
<div class="div3"></div>
12.css2.0 和css3.0
答：css3增強了css2的功能，增長了新的屬性和新的標籤，而且刪除了一些冗餘的標籤，在佈局方面減小了代碼量。之前比較複雜的佈局如今一個屬性就搞定了（columns之類的屬性）。在效果方面加入了更多的效果(圓角，動畫之類的)，還有在盒子模型和列表模塊都進行了改進。不過CSS3兼容性很差，只有一些高級版本的瀏覽器支持。
13.彈性盒子模型?flex|box區別?
答：（1）引入彈性盒佈局模型的目的是提供一種更加有效的方式來對一個容器中的條目進行排列、對齊和分配空白空間。即使容器中條目的尺寸未知或是動態變化的，彈性盒佈局模型也能正常的工做。在該佈局模型中，容器會根據佈局的須要，調整其中包含的條目的尺寸和順序來最好地填充全部可用的空間。當容器的尺寸因爲屏幕大小或窗口尺寸發生變化時，其中包含的條目也會被動態地調整。好比當容器尺寸變大時，其中包含的條目會被拉伸以佔滿多餘的空白空間；當容器尺寸變小時，條目會被縮小以防止超出容器的範圍。彈性盒佈局是與方向無關的。在傳統的佈局方式中，block 佈局是把塊在垂直方向從上到下依次排列的；而 inline 佈局則是在水平方向來排列。彈性盒佈局並無這樣內在的方向限制，能夠由開發人員自由操做。
（2）flex和box的區別:
display：box 是老規範，要兼顧古董機子就加上它；
父級元素有display:box;屬性以後。他的子元素裏面加上box-flex屬性。可讓子元素按照父元素的寬度進行必定比例的分佔空間。
flex是最新的，董機老機子不支持的；
父元素設置display:flex後，子元素寬度會隨父元素寬度的改變而改變，而display:box不會。
Android UC瀏覽器只支持display: box語法；而iOS UC瀏覽器則支持兩種方式。

14.viewport 全部屬性 ？
答： (1)width :設置layout viewport的寬度，爲一個正整數，或字符串'device-width';
     (2)initial-scale:設置頁面的初始縮放值，爲一個數字，能夠帶小數。
     (3)minimum-scale:容許用戶的最小縮放值，爲一個數字，能夠帶小數。
     (4)maximum-scale:容許用戶的最大縮放值，爲一個數字，能夠帶小數。
     (5)height:設置layout viewport的高度，這個屬性對咱們並不重要，不多使用
     (6)user-scalable:是否容許用戶進行縮放，值爲‘no’或者‘yes’。
     安卓中還支持：target-densitydpi，表示目標設備的密度等級，做用是決定css中的1px表明多少物理像素
     (7)target-densitydpi:值能夠爲一個數值或者 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 這幾個字符串中的一個
15. 如何理解HTML結構的語義化？
所謂標籤語義化，就是指標籤的含義。語義化的主要目的就是讓你們直觀的認識標籤(markup)和屬性(attribute)的用途和做用，對搜索引擎友好，有了良好的結構和語義咱們的網頁內容便天然容易被搜索引擎抓取，這種符合搜索引擎收索規則的作法，網站的推廣即可以省下很多的功夫，並且可維護性更高，由於結構清晰,十分易於閱讀。這也是搜索引擎優化SEO重要的一步。
16. 僞類選擇器和僞元素？c3中引入的僞類選擇器有？c3中僞元素有?
僞類用一個冒號來表示，而僞元素則用兩個冒號來表示。
僞類選擇器：
因爲狀態是動態變化的，因此一個元素達到一個特定狀態時，它可能獲得一個僞類的樣式；當狀態改變時，它又會失去這個樣式。
僞元素選擇器：
並非針對真正的元素使用的選擇器，而是針對CSS中已經定義好的僞元素使用的選擇器；
c3中引入的僞類選擇器：
:root()選擇器，根選擇器，匹配元素E所在文檔的根元素。在HTML文檔中，根元素始終是<html>。:root選擇器等同於<html>元素。
:not()選擇器稱爲否認選擇器，和jQuery中的:not選擇器如出一轍，能夠選擇除某個元素以外的全部元素。
:empty()選擇器表示的就是空。用來選擇沒有任何內容的元素，這裏沒有內容指的是一點內容都沒有，哪怕是一個空格。
:target()選擇器來對頁面某個target元素(該元素的id被當作頁面中的超連接來使用)指定樣式，該樣式只在用戶點擊了頁面中的超連接，而且跳轉到target元素後起做用。
:first-child()選擇器表示的是選擇父元素的第一個子元素的元素E。簡單點理解就是選擇元素中的第一個子元素，記住是子元素，而不是後代元素。
:nth-child()選擇某個元素的一個或多個特定的子元素。
:nth-last-child()從某父元素的最後一個子元素開始計算，來選擇特定的元素
:nth-of-type(n)選擇器和:nth-child(n)選擇器很是相似，不一樣的是它只計算父元素中指定的某種類型的子元素。
:only-child表示的是一個元素是它的父元素的惟一一個子元素。
:first-line爲某個元素的第一行文字使用樣式。
:first-letter 爲某個元素中的文字的首字母或第一個字使用樣式。
:before  在某個元素以前插入一些內容。
:after  在某個元素以後插入一些內容。 
c3中僞元素：
::first-line選擇元素的第一行，好比說改變每一個段落的第一行文本的樣式
::before和::after這兩個主要用來給元素的前面或後面插入內容，這兩個經常使用"content"配合使用，見過最多的就是清除浮動
::selection用來改變瀏覽網頁選中文的默認效果
1七、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聲明\新增的結構元素\功能元素
18. placeholder?如何在ie8上兼容placeholder這個效果
方法一：
首先判斷瀏覽器是否支持placeholder屬性，若是不支持的話，就遍歷全部input輸入框，獲取placeholder屬性的值填充進輸入框做爲提示信息，同時字體設置成灰色。
當輸入框得到焦點( focus )同時輸入框內文字等於設置的提示信息時，就把輸入框內清空；
當輸入框失去焦點( blur )同時輸入框內文字爲空時，再把獲取的placeholder屬性的值填充進輸入框做爲提示信息，同時字體設置成灰色；
當輸入框內有輸入( keydown )時，此時輸入框內的提示信息已經由focus事件清除，此時只須要把字體再恢復成黑色便可
此方法的缺點是，不適用於加載完DOM時即得到焦點的輸入框，由於在用戶的角度，加載完頁面時看到的得到焦點的那個輸入框，它的提示文字是看不到的。
HTML：
<input type="text" id="uname" name="uname" placeholder="請輸入用戶名"/>

CSS：
.phcolor{ color:#999;}

JS
$(function(){  
  //判斷瀏覽器是否支持placeholder屬性
  supportPlaceholder='placeholder'in document.createElement('input'),
  placeholder=function(input){
    var text = input.attr('placeholder'),
    defaultValue = input.defaultValue;
    if(!defaultValue){
      input.val(text).addClass("phcolor");
    }
    input.focus(function(){
      if(input.val() == text){
        $(this).val("");
      }
    });
    input.blur(function(){
      if(input.val() == ""){
        $(this).val(text).addClass("phcolor");
      }
    });
    //輸入的字符不爲灰色
    input.keydown(function(){
      $(this).removeClass("phcolor");
    });
  };
  //當瀏覽器不支持placeholder屬性時，調用placeholder函數
  if(!supportPlaceholder){
    $('input').each(function(){
      text = $(this).attr("placeholder");
      if($(this).attr("type") == "text"){
        placeholder($(this));
      }
    });
  }
});
方法二：
此方法的思路是作一張含有提示文字的圖片做爲input輸入框的背景圖，初始時得到焦點同時加載背景圖；
當輸入框不爲空時，去掉背景圖；
當輸入框爲空時，加載背景圖；
當用戶鍵盤按鍵且輸入框不爲空( 輸入字符 )時，去掉背景圖；
當用戶鍵盤按鍵且輸入框爲空( 刪除字符 )時，加載背景圖。
此方法的缺點是：須要爲每個提示文字不一樣的input製做背景圖片，而且設置input的樣式。
CSS：
.phbg{ background:url(img/bg.jpg) 0 0 no-repeat;}

JS
$(function(){  
   //判斷瀏覽器是否支持placeholder屬性
   supportPlaceholder='placeholder' in document.createElement('input');
   if(!supportPlaceholder){
     //初始狀態添加背景圖片
     $("#uname").attr("class","phbg");
     //初始狀態得到焦點
     $("#uname").focus;
     function destyle(){
      if($("#uname").val() != ""){
        $("#uname").removeClass("phbg");
      }else{
        $("#uname").attr("class","phbg");
       }
     }
     //當輸入框爲空時，添加背景圖片；有值時去掉背景圖片
     destyle();
     $("#uname").keyup(function(){
      //當輸入框有按鍵輸入同時輸入框不爲空時，去掉背景圖片；有按鍵輸入同時爲空時（刪除字符），添加背景圖片
      destyle();
     });
     $("#uname").keydown(function(){
      //keydown事件能夠在按鍵按下的第一時間去掉背景圖片
      $("#uname").removeClass("phbg");
     });
   }
});
方法三：
使用插件：Placeholders.js
19. 常見兼容性問題？
* 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; 
      +background-color:#a200ff;
      _background-color:#1e0bd1; 
      } 
*  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圖片格式支持很差(引用一段腳本處理)
20.簡述前端優化的方式 舊的雅虎34條|h5新添加的方式
一、儘可能減小HTTP請求次數
二、減小DNS查找次數
三、避免跳轉
四、可緩存的AJAX
五、推遲加載內容
六、預加載
    七、減小DOM元素數量
八、根據域名劃分頁面內容
    九、使iframe的數量最小
十、不要出現404錯誤
十一、使用內容分發網絡
十二、爲文件頭指定Expires或Cache-Control        1三、Gzip壓縮文件內容
1四、配置ETag
1五、儘早刷新輸出緩衝
1六、使用GET來完成AJAX請求
1七、把樣式表置於頂部
1八、避免使用CSS表達式（Expression）
1九、使用外部JavaScript和CSS
20、削減JavaScript和CSS
2一、用<link>代替@import
2二、避免使用濾鏡
2三、把腳本置於頁面底部
2四、剔除重複腳本
21.jquery版本?1.11兼容?
Query 2.x系列和 jQuery 1.x擁有一樣的API，可是再也不支持IE六、七、8。
推薦使用 1.x version，除非你肯定IE六、七、8用戶再也不訪問網站。
jquery1.11屬於1.x 版本，其兼容IE六、七、8，因此也支持IE9.
22.塊級？行內？空元素?
答：行內元素：和有他元素都在一行上，高度、行高及外邊距和內邊距都不可改變，文字圖片的寬度不可改變，只能容納文本或者其餘行內元素
塊級元素：老是在新行上開始，高度、行高及外邊距和內邊距均可控制，能夠容納內斂元素和其餘元素；
空元素：在HTML元素中，沒有內容的 HTML 元素被稱爲空元素。空元素是在開始標籤中關閉的。<br> 就是沒有關閉標籤的空元素。
23.media屬性？screen？All？max-width?min-width?
答：media 屬性規定被連接文檔將顯示在什麼設備上。media 屬性用於爲不一樣的媒介類型規定不一樣的樣式。Screen計算機默認屏幕，all適用於全部設備，max-width超過最大寬度就不執行，min-width必須大於最小寬度才執行。
24.meta標籤的name屬性值？
答：name 屬性主要用於描述網頁，與之對應的屬性值爲content，content中的內容主要是便於搜索引擎機器人查找信息和分類信息用的。meta標籤的name
屬性語法格式是：＜meta name="參數" content="
具體的參數值"＞。其中name屬性主要有如下幾種參數：A 、Keywords(關鍵字)說明：keywords用來告訴搜索引擎你網頁的關鍵字是什麼。B 、description(網站內容描述) 說明：description用來告訴搜索引擎你的網站主要內容.
 C robots(機器人嚮導)說明：
robots用來告訴搜索機器人哪些頁面須要索引，哪些頁面不須要索引。content的參數有all,none,index,noindex,follow,nofollow
。默認是all。舉例：＜meta name="robots" content="none"＞D 、author(做者) 
25.通常作手機頁面切圖有幾種方式?
答：三種。響應式佈局，彈性佈局display：flex，利用js編寫設定比例，給根元素設定像素，使用rem爲單位。
px/em/rem有什麼區別？ 爲何一般給font-size 設置的字體爲62.5% 
答：px像素是相對長度單位。像素px是相對於顯示器屏幕分辨率而言的。em是相對長度單位。相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人爲設置，則相對於瀏覽器的默認字體尺寸。一、em的值並非固定的；二、em會繼承父級元素的字體大小。使用rem爲元素設定字體大小時，仍然是相對大小，但相對的只是HTML根元素。這個單位可謂集相對大小和絕對大小的優勢於一身，經過它既能夠作到只修改根元素就成比例地調整全部字體大小，又能夠避免字體大小逐層複合的連鎖反應。
rem是相對於瀏覽器進行縮放的。1rem默認是16px，在響應式佈局中，一個個除來轉換成rem，太麻煩，因此重置rem
body{font-size=62.5%    } 此時1rem = 10px;如果12px則是1.2rem.
26.sass和scss有什麼區別?sass通常怎麼樣編譯的
答：文件擴展名不一樣，Sass 是以「.sass」後綴爲擴展名，而 SCSS 是以「.scss」後綴爲擴展名；語法書寫方式不一樣，Sass 是以嚴格的縮進式語法規則來書寫，不帶大括號({})和分號(;)，而 SCSS 的語法書寫和咱們的 CSS 語法書寫方式很是相似。
27.若是對css進行優化 如何處理？
答：壓縮打包，圖片整合，避免使用Hack，解決兼容問題，使用簡寫，讓CSS能保證往後的維護。
28.如何對css文件進行壓縮合並? gulp ?
答：使用gulp。
一、首頁全局安裝gulp。
1 npm install --global gulp 
二、其次局部安裝gulp。npm install gulp --save-dev
三、在項目根目錄下建立一個名爲 gulpfile.js 的文件
var gulp = require('gulp');
gulp.task('default', function() {
// 將你的默認的任務代碼放在這});
四、運行gulp。（默認的名爲 default 的任務（task）將會被運行，想要單獨執行特定的任務（task），請輸入 gulp <task> <othertask>）
gulp
  合併和壓縮JS、CSS文件
壓縮JS，CSS文件須要引用以下組件：
gulp-minify-css: 壓縮css
29.組件? 模塊化編程？
組件化編程: 將js css html包裝一塊兒提供方法和效果；
模塊化化: 將相同的功能抽取出來 存放在一個位置進行編程
30.圖片和文字在同一行顯示?
1 在css中給div添加上「vertical-align:middle」屬性。 
2 分別把圖片和文字放入不一樣的div中，而後用「margin」屬性進行定位，就能夠使他們顯示在同一行。
3 把圖片設置爲背景圖片。
31.禁止事件冒泡
event.stopPropagation()
32.禁止默認事件
event.preventDefault()
33.a標籤中 active hover link visited 正確的設置順序是什麼?
a標籤的link、visited、hover、active是有必定順序的
a:link  
a:visited  
a:hover 
a:active   
34.a標籤中 如何禁用href 跳轉頁面 或 定位連接 
        e.preventDefault();
        href="javascript:void(0);
35.手機端上 圖片長時間點擊會選中圖片，如何處理?
onselect=function() {
return false
}
36.video標籤的幾個個屬性方法
src：視頻的URL   poster：視頻封面，沒有播放時顯示的圖片   preload：預加載    autoplay：自動播放   loop：循環播放  controls：瀏覽器自帶的控制條    width：視頻寬度    height：視頻高度
37.常見的視頻編碼格式有幾種?視頻格式有幾種?
視頻格式：MPEG-一、MPEG-2和MPEG4 、AVI 、RM、ASF和WMV格式 
視頻編碼格式：H.26四、MPEG-四、MPEG-二、WMA-HD以及VC-1
38.canvas在標籤上設置寬高 和在style中設置寬高有什麼區別？
canvas標籤的width和height是畫布實際寬度和高度，繪製的圖形都是在這個上面。而style的width和height是canvas在瀏覽器中被渲染的高度和寬度。若是canvas的width和height沒指定或值不正確，就被設置成默認值 。
39.border-image？box-sizing?
Border-image : 圖形化邊框
Box-sizing : 屬性容許您以特定的方式定義匹配某個區域的特定元素。
語法 ：box-sizing：content-box | border-box
Content-box : padding和border不被包含在定義的width和height以內。對象的實際寬度等於設置的width值和border、padding之和，即 ( Element width = width + border + padding) 此屬性表現爲標準模式下的盒模型 .
Border-box : padding和border被包含在定義的width和height以內。對象的實際寬度就等於設置的width值，即便定義有border和padding也不會改變對象的實際寬度，即 ( Element width = width ) 此屬性表現爲怪異模式下的盒模型。
40.漸進加強和優雅降級
漸進加強 progressive enhancement：針對低版本瀏覽器進行構建頁面，保證最基本的功能，而後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
優雅降級 graceful degradation：一開始就構建完整的功能，而後再針對低版本瀏覽器進行兼容。
區別：優雅降級是從複雜的現狀開始，並試圖減小用戶體驗的供給，而漸進加強則是從一個很是基礎的，可以起做用的版本開始，並不斷擴充，以適應將來環境的須要。降級（功能衰減）意味着往回看；而漸進加強則意味着朝前看，同時保證其根基處於安全地帶。
「優雅降級」觀點
「優雅降級」觀點認爲應該針對那些最高級、最完善的瀏覽器來設計網站。而將那些被認爲「過期」或有功能缺失的瀏覽器下的測試工做安排在開發週期的最後階段，並把測試對象限定爲主流瀏覽器（如 IE、Mozilla 等）的前一個版本。
在這種設計範例下，舊版的瀏覽器被認爲僅能提供「簡陋卻無妨 (poor, but passable)」 的瀏覽體驗。你能夠作一些小的調整來適應某個特定的瀏覽器。但因爲它們並不是咱們所關注的焦點，所以除了修復較大的錯誤以外，其它的差別將被直接忽略。
「漸進加強」觀點
「漸進加強」觀點則認爲應關注於內容自己。
內容是咱們創建網站的誘因。有的網站展現它，有的則收集它，有的尋求，有的操做，還有的網站甚至會包含以上的種種，但相同點是它們全都涉及到內容。這使得「漸進加強」成爲一種更爲合理的設計範例。這也是它當即被 Yahoo! 所採納並用以構建其「分級式瀏覽器支持 (Graded Browser Support)」策略的緣由所在。
那麼問題來了。如今產品經理看到IE6,7,8網頁效果相對高版本現代瀏覽器少了不少圓角，陰影（CSS3），要求兼容（使用圖片背景，放棄CSS3），你會如何說服他？
41.解釋在ie低版本下的怪異盒模型  和c3的怪異盒模型 和 彈性盒模型?
  IE當padding+border的值小於width或者height:
盒模型的寬度=margin(左右)+width（width已經包含了padding和border的值）
盒模型的高度=margin(上下)+height（height已經包含了padding和border的值）
   當padding+border的值大於width或者height:
盒模型的寬度=margin(左右)+padding(左右)+border(左右)
盒模型的高度=margin(上下)+padding(上下)+border(上下)+19px （加一個默認行高 19px）
  因此至關因而padding+border和width或者height比大小，誰大取誰。
以上幾種DOCTYPE都是標準的文檔類型，不管使用哪一種模式完整定義DOCTYPE，都會觸發標準模式，而若是DOCTYPE缺失則在ie6，ie7，ie8下將會觸發怪異模式（quirks 模式）
CSS3box-sizing有兩個值一個是content-box，另外一個是border-box。
    當設置爲box-sizing:content-box時，將採用標準模式解析計算，也是默認模式；
當設置爲box-sizing:border-box時，將採用怪異模式解析計算；
Css3彈性盒模型引入了新的盒子模型—彈性盒模型，該模型決定一個盒子在其餘盒子中的分佈方式以及如何處理可用的空間。使用該模型，能夠很輕鬆的建立自適應瀏覽器窗口的流動佈局或自適應字體大小的彈性佈局。
42.animation對應的屬性
寫法：animation: name duration timing-function delay iteration-count direction;
下面是對應的屬性的介紹
animation-name        規定須要綁定到選擇器的 keyframe 名稱。。
animation-duration        規定完成動畫所花費的時間，以秒或毫秒計。
animation-timing-function        規定動畫的速度曲線。
animation-delay        規定在動畫開始以前的延遲。
animation-iteration-count        規定動畫應該播放的次數。
animation-direction        規定是否應該輪流反向播放動畫。
43.transition?
    css的transition容許css的屬性值在必定的時間區間內平滑地過渡。這種效果能夠在鼠標單擊、得到焦點、被點擊或對元素任何改變中觸發，並圓滑地以動畫效果改變CSS的屬性值
注意區別transform，transform是進行2D轉換的 如移動，比例化，反過來，旋轉，和拉伸元素。
44.h5新特性？
一、繪畫的 canvas 元素
二、用於媒介回放的 video 和 audio 元素
三、對本地離線存儲的更好的支持
四、新的特殊內容元素，好比 article、footer、header、nav、section
五、新的表單控件，好比 calendar、date、time、email、url、search
45.canvas 如何繪製一個三角形|正方形
 moveto 是移動到某個座標， lineto 是從當前座標連線到某個座標。這兩個函數加起來就是畫一條直線。 畫線要用「筆」，那麼MoveTo()把筆要畫的起始位置固定了（x,y）而後要固定終止位置要用到LineTo函數肯定終止位置（xend,yend）,這樣一條線就畫出來了。 每次與前面一個座標相連 。
stroke() 方法會實際地繪製出經過 moveTo() 和 lineTo() 方法定義的路徑。默認顏色是黑色。
<!DOCTYPE HTML5>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>畫布</title>
  </head> 
<body>
     <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
     Your browser does not support the canvas element.
     </canvas>
     <script type="text/javascript">
         var c=document.getElementById("myCanvas");
//三角形
         var cxt=c.getContext("2d");
         cxt.moveTo(10,10);
         cxt.lineTo(50,50);
         cxt.lineTo(10,50);
         cxt.lineTo(10,10);
         cxt.stroke();
//正方形
         var cxt2=c.getContext("2d");
         cxt2.moveTo(60,10);
         cxt2.lineTo(100,10);
         cxt2.lineTo(100,50);
         cxt2.lineTo(60,50);
         cxt2.lineTo(60,10);
         cxt2.stroke(); 
     </script>
</body>
</html>
4六、所用bootstap版本？
3.0

4七、css清除浮動的幾種方式？
一、父級div定義 height 
二、結尾處加空div標籤 clear:both 
三、父級div定義 僞類:after 和 zoom   
四、父級div定義 overflow:hidden   
五、父級div定義 overflow:auto   
六、父級div 也一塊兒浮動 
七、父級div定義 display:table
4八、爲何要初始化CSS樣式。
由於瀏覽器的兼容問題，不一樣瀏覽器對有些標籤的默認值是不一樣的，若是沒對CSS初始化每每會出現瀏覽器之間的頁面顯示差別。
4九、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
50、解釋下 CSS sprites，以及你要如何在頁面或網站中使用它。
CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的「background-image」，「background- repeat」，「background-position」的組合進行背景定位，background-position能夠用數字能精確的定位出背景圖片的位置。這樣能夠減小不少圖片請求的開銷，由於請求耗時比較長；請求雖然能夠併發，可是也有限制，通常瀏覽器都是6個。對於將來而言，就不須要這樣作了，由於有了`http2`。
5一、什麼是 FOUC（無樣式內容閃爍）？你如何來避免 FOUC？
FOUC - Flash Of Unstyled Content 文檔樣式閃爍
<style type="text/css" media="all">@import "../fouc.css";</style> 
而引用CSS文件的@import就是形成這個問題的罪魁禍首。IE會先加載整個HTML文檔的DOM，而後再去導入外部的CSS文件，所以，在頁面DOM加載完成到CSS導入完成中間會有一段時間頁面上的內容是沒有樣式的，這段時間的長短跟網速，電腦速度都有關係。
解決方法：只要在<head>之間加入一個<link>或者<script>元素就能夠了。
52.a點擊出現框，解決方法:
    a,a:hover,a:active,a:visited,a:link,a:focus{ -webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color: transparent;outline:none;background: none;text-decoration: none;border:none;-webkit-appearance: none; }

JS部分
1.幾種基本數據類型?複雜數據類型?值類型和引用數據類型?堆棧數據結構?
基本數據類型：Undefined、Null、Boolean、Number、String
值類型：數值、布爾值、null、undefined。
引用類型：對象、數組、函數。
堆棧數據結構：是一種支持後進先出(LIFO)的集合,即後被插入的數據,先被取出!
js數組中提供瞭如下幾個方法可讓咱們很方便實現堆棧：
shift:從數組中把第一個元素刪除，並返回這個元素的值。
unshift: 在數組的開頭添加一個或更多元素，並返回新的長度
push:在數組的中末尾添加元素，並返回新的長度
pop:從數組中把最後一個元素刪除，並返回這個元素的值。
2.聲明函數做用提高?聲明變量和聲明函數的提高有什麼區別?
（1）變量聲明提高：變量申明在進入執行上下文就完成了。
      只要變量在代碼中進行了聲明，不管它在哪一個位置上進行聲明， js引擎都會將它的聲明放在範圍做用域的頂部；
（2）函數聲明提高：執行代碼以前會先讀取函數聲明，意味着能夠把函數申明放在調用它的語句後面。
   只要函數在代碼中進行了聲明，不管它在哪一個位置上進行聲明， js引擎都會將它的聲明放在範圍做用域的頂部；
（3）變量or函數聲明：函數聲明會覆蓋變量聲明，但不會覆蓋變量賦值。
      同一個名稱標識a，即有變量聲明var a，又有函數聲明function a() {}，無論兩者聲明的順序，函數聲明會覆蓋變量聲明，也就是說，此時a的值是聲明的函數function a() {}。注意：若是在變量聲明的同時初始化a，或是以後對a進行賦值，此時a的值變量的值。eg: var a; var c = 1; a = 1; function a() { return true; } console.log(a); 
3.判斷數據類型? 
typeof返回的類型都是字符串形式，能夠判斷function的類型；在判斷除Object類型的對象時比較方便。
判斷已知對象類型的方法： instanceof，後面必定要是對象類型，而且大小寫不能錯，該方法適合一些條件選擇或分支。
4.異步編程？
方法1：回調函數，優勢是簡單、容易理解和部署，缺點是不利於代碼的閱讀和維護，各個部分之間高度耦合（Coupling），流程會很混亂，並且每一個任務只能指定一個回調函數。
方法2：時間監聽，能夠綁定多個事件，每一個事件能夠指定多個回調函數，並且能夠「去耦合」（Decoupling），有利於實現模塊化。缺點是整個程序都要變成事件驅動型，運行流程會變得很不清晰。
方法3：發佈/訂閱，性質與「事件監聽」相似，可是明顯優於後者。
方法4：Promises對象，是CommonJS工做組提出的一種規範，目的是爲異步編程提供統一接口。
簡單說，它的思想是，每個異步任務返回一個Promise對象，該對象有一個then方法，容許指定回調函數。
5.事件流?事件捕獲？事件冒泡？
事件流：從頁面中接收事件的順序。也就是說當一個事件產生時，這個事件的傳播過程，就是事件流。
IE中的事件流叫事件冒泡；事件冒泡：事件開始時由最具體的元素接收，而後逐級向上傳播到較爲不具體的節點（文檔）。對於html來講，就是當一個元素產生了一個事件，它會把這個事件傳遞給它的父元素，父元素接收到了以後，還要繼續傳遞給它的上一級元素，就這樣一直傳播到document對象（親測如今的瀏覽器到window對象，只有IE8及下不這樣）；
事件捕獲是不太具體的元素應該更早接受到事件，而最具體的節點應該最後接收到事件。他們的用意是在事件到達目標以前就捕獲它；也就是跟冒泡的過程正好相反，以html的click事件爲例，document對象（DOM級規範要求從document開始傳播，可是如今的瀏覽器是從window對象開始的）最早接收到click事件的而後事件沿着DOM樹依次向下傳播，一直傳播到事件的實際目標；
6.如何清除一個定時器?
window.clearInterval();
window.clearTimeout();
7.如何添加一個dom對象到body中?innerHTML和innerText區別?
body.appendChild(dom元素)；
innerHTML:從對象的起始位置到終止位置的所有內容,包括Html標籤。
innerText:從起始位置到終止位置的內容, 但它去除Html標籤 
分別簡述五個window對象、屬性
成員對象    
window.event    window.document     window.history    
window.screen    window.navigator    window.external
Window對象的屬性以下：
window //窗戶自身
window.self //引用本窗戶window=window.self     
window.name //爲窗戶命名     
window.defaultStatus //設定窗戶狀態欄信息       window.location //URL地址,配備佈置這個屬性能夠打開新的頁面 
8.數據持久化技術(ajax)?簡述ajax流程
1)客戶端產生js的事件
2)建立XMLHttpRequest對象
3)對XMLHttpRequest進行配置
4)經過AJAX引擎發送異步請求
5)服務器端接收請求而且處理請求，返回html或者xml內容
6)XML調用一個callback()處理響應回來的內容
7)頁面局部刷新
9.回調函數?
    回調函數就是一個經過函數指針調用的函數。若是你把函數的指針（地址）做爲參數傳遞給另外一個函數，當這個指針被用來調用其所指向的函數時，咱們就說這是回調函數。回調函數不是由該函數的實現方直接調用，而是在特定的事件或條件發生時由另外的一方調用的，用於對該事件或條件進行響應。
10.什麼是閉包?*  堆棧溢出有什麼區別？ 內存泄漏? 那些操做會形成內存泄漏？怎麼樣防止內存泄漏？
閉包：就是可以讀取其餘函數內部變量的函數。
堆棧溢出：就是不顧堆棧中分配的局部數據塊大小，向該數據塊寫入了過多的數據，致使數據越界，結果覆蓋了別的數據。常常會在遞歸中發生。
內存泄露是指：用動態存儲分配函數內存空間，在使用完畢後未釋放，致使一直佔據該內存單元。直到程序結束。指任何對象在您再也不擁有或須要它以後仍然存在。
形成內存泄漏：
setTimeout 的第一個參數使用字符串而非函數的話，會引起內存泄漏。
閉包、控制檯日誌、循環（在兩個對象彼此引用且彼此保留時，就會產生一個循環）
防止內存泄露：
一、不要動態綁定事件；
二、不要在動態添加，或者會被動態移除的dom上綁事件，用事件冒泡在父容器監聽事件；
三、若是要違反上面的原則，必須提供destroy方法，保證移除dom後事件也被移除，這點能夠參考Backbone的源代碼，作的比較好；
四、單例化，少建立dom，少綁事件。
11.平時工做中怎麼樣進行數據交互?若是後臺沒有提供數據怎麼樣進行開發?mock數據與後臺返回的格式不一樣意怎麼辦?
由後臺編寫接口文檔、提供數據接口實、前臺經過ajax訪問實現數據交互；
在沒有數據的狀況下尋找後臺提供靜態數據或者本身定義mock數據；
返回數據不統一時編寫映射文件 對數據進行映射。
12 簡述ajax執行流程
基本步驟：
var xhr =null;//建立對象 
if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
}else{
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open(「方式」,」地址」,」標誌位」);//初始化請求 
    xhr.setRequestHeader(「」,」」);//設置http頭信息 
xhr.onreadystatechange =function(){}//指定回調函數 
xhr.send();//發送請求 
13.自執行函數?用於什麼場景？好處
自執行函數:一、聲明一個匿名函數二、立刻調用這個匿名函數。
做用：建立一個獨立的做用域。
好處：防止變量彌散到全局，以避免各類js庫衝突。隔離做用域避免污染，或者截斷做用域鏈，避免閉包形成引用變量沒法釋放。利用當即執行特性，返回須要的業務函數或對象，避免每次經過條件判斷來處理
場景：通常用於框架、插件等場景
14.html和xhtml有什麼區別?
HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XML的標記語言。
    1.XHTML 元素必須被正確地嵌套。2.XHTML 元素必須被關閉。3.標籤名必須用小寫字母。4.空標籤也必須被關閉。5.XHTML 文檔必須擁有根元素。
15. 什麼是構造函數？與普通函數有什麼區別?
構造函數：是一種特殊的方法、主要用來建立對象時初始化對象，總與new運算符一塊兒使用，建立對象的語句中構造函數的函數名必須與類名徹底相同。
與普通函數相比只能由new關鍵字調用，構造函數是類的標示
16. 經過new建立一個對象的時候，函數內部有哪些改變
function Person(){}
Person.prototype.friend = [];
Person.prototype.name = '';
// var a = new Person();
// a.friend[0] = '王琦';
// a.name = '程嬌';
// var b = new Person();
// b.friend？
// b.name?
一、建立一個空對象，而且 this 變量引用該對象，同時還繼承了該函數的原型。 
二、屬性和方法被加入到 this 引用的對象中。
三、新建立的對象由 this 所引用，而且最後隱式的返回 this 。
17.事件委託？有什麼好處?
答：（1）利用冒泡的原理，把事件加到父級上，觸發執行效果
（2）好處：新添加的元素還會有以前的事件；提升性能。
18.window.onload ==? DOMContentLoaded ?
答：通常狀況下，DOMContentLoaded事件要在window.onload以前執行，當DOM樹構建完成的時候就會執行DOMContentLoaded事件，而window.onload是在頁面載入完成的時候，才執行，這其中包括圖片等元素。大多數時候咱們只是想在DOM樹構建完成後，綁定事件到元素，咱們並不須要圖片元素，加上有時候加載外域圖片的速度很是緩慢。
19.節點類型?判斷當前節點類型?
答：1        元素節點                        
    2        屬性節點                        
    3        文本節點                        
    8        註釋節點                        
    9        文檔節點                        
經過nodeObject.nodeType判斷節點類型：其中，nodeObject 爲DOM節點（節點對象）。該屬性返回以數字表示的節點類型，例如，元素節點返回 1，屬性節點返回 2 。
20.如何合併兩個數組？數組刪除一個元素?
答：三種方法。
  （1）var arr1=[1,2,3];
                var arr2=[4,5,6];
                arr1 = arr1.concat(arr2);
                console.log(arr1); 
  （2）var arr1=[1,2,3];
                var arr2=[4,5,6];
                Array.prototype.push.apply(arr1,arr2);
                console.log(arr1);
  （3）var arr1=[1,2,3];
                var arr2=[4,5,6];
                for (var i=0; i < arr2.length; i++) {
                    arr1.push( arr2[i] );
                }
                console.log(arr1);   
21.強制轉換 顯式轉換 隱式轉換?
答：(1)強制類型轉換：
Boolean(0)                // => false - 零
            Boolean(new object())   // => true - 對象
                Number(undefined)       // =>   NaN
                Number(null)              // => 0
                String(null)              // => "null"
parseInt( )
parseFloat( )
JSON.parse( )
JSON.stringify ( )
(2)隱式類型轉換：
在使用算術運算符時，運算符兩邊的數據類型能夠是任意的，好比，一個字符串能夠和數字相加。之因此不一樣的數據類型之間能夠作運算，是由於JavaScript引擎在運算以前會悄悄的把他們進行了隱式類型轉換的
（例如：x+""         //等價於String(x)
                +x                 //等價於Number(x)
                x-0         //同上
                !!x         //等價於Boolean(x),是雙歎號）
   (3)顯式轉換： 
若是程序要求必定要將某一類型的數據轉換爲另外一種類型，則能夠利用強制類型轉換運算符進行轉換，這種強制轉換過程稱爲顯示轉換。
顯示轉換是你定義讓這個值類型轉換成你要用的值類型，是底到高的轉換。例 int 到float就能夠直接轉，
int i=5,想把他轉換成char類型，就用顯式轉換（char）i
22.  var a = true;
         typeof a++          //number
         typeof true++        //錯誤！
         typeof a+1                //number1
         typeof (true)+1        //boolean1
23.jq中如何實現多庫並存?Noconfict
多庫共存就是「$ 」符號的衝突。
方法一：
利用jQuery的實用函數$.noConflict();這個函數歸還$的名稱控制權給另外一個庫，所以能夠在頁面上使用其餘庫。這時，咱們能夠用"jQuery "這個名稱調用jQuery的功能。
$.noConflict();   
jQuery('#id').hide();   
.....  
//或者給jQuery一個別名  
var $j=jQuery  
$j('#id').hide();   
.....

方法二：
(function($){

})(jQuery)
方法三：
jQuery(function($){

})
經過傳遞一個函數做爲jQuery的參數，所以把這個函數聲明爲就緒函數。
咱們聲明$爲就緒函數的參數，由於jQuery老是吧jQuery對象的引用做爲第一個參數傳遞，因此就保證了函數的執行。

24.jq中 get 和 eq有什麼區別？
get() :取得其中一個匹配的元素。num表示取得第幾個匹配的元素，get多針對集合元素，返回的是DOM對象組成的數組
eq():獲取第N個元素，下標都是從0開始，返回的是一個JQuery對象 
25.如何經過原生js 判斷一個元素當前是顯示仍是隱藏狀態?
if( document.getElementById("div").css("display")==='none')
if( document.getElementById("div").css("display")==='block')
$("#div").is(":hidden"); // 判斷是否隱藏
$("#div").is(":visible")
26.jq如何判斷元素顯示隱藏？
第一種：使用CSS屬性
var display =$('#id').css('display');
if(display == 'none'){
   alert("我是隱藏的！");
}

第二種：使用jquery內置選擇器
<div id="test">
<p>僅僅是測試所用</p>
</div>

if($("#test").is(":hidden")){
       $("#test").show();    //若是元素爲隱藏,則將它顯現
}else{
      $("#test").hide();     //若是元素爲顯現,則將其隱藏
}

第三種：jQuery判斷元素是否顯示 是否隱藏
var node=$('#id');
if(node.is(':hidden')){　　//若是node是隱藏的則顯示node元素，不然隱藏
　　node.show();　
}else{
　　node.hide();
}
27.移動端上什麼是點擊穿透?
點擊穿透現象有3種：
點擊穿透問題：點擊蒙層（mask）上的關閉按鈕，蒙層消失後發現觸發了按鈕下面元素的click事件
跨頁面點擊穿透問題：若是按鈕下面剛好是一個有href屬性的a標籤，那麼頁面就會發生跳轉
另外一種跨頁面點擊穿透問題：此次沒有mask了，直接點擊頁內按鈕跳轉至新頁，而後發現新頁面中對應位置元素的click事件被觸發了
解決方案：
一、只用touch
最簡單的解決方案，完美解決點擊穿透問題
把頁面內全部click所有換成touch事件（ touchstart 、’touchend’、’tap’）
二、只用click
下下策，由於會帶來300ms延遲，頁面內任何一個自定義交互都將增長300毫秒延遲
三、tap後延遲350ms再隱藏mask
改動最小，缺點是隱藏mask變慢了，350ms仍是能感受到慢的
四、pointer-events
比較麻煩且有缺陷， 不建議使用
mask隱藏後，給按鈕下面元素添上 pointer-events: none; 樣式，讓click穿過去，350ms後去掉這個樣式，恢復響應
缺陷是mask消失後的的350ms內，用戶能夠看到按鈕下面的元素點着沒反應，若是用戶手速很快的話必定會發現
28.jq綁定事件的幾種方式？on bind
jQuery中提供了四種事件監聽方式，分別是bind、live、delegate、on，對應的解除監聽的函數分別是unbind、die、undelegate、off
Bind( )是使用頻率較高的一種，做用就是在選擇到的元素上綁定特定事件類型的監聽函數;
Live( )能夠對後生成的元素也能夠綁定相應的事件,處理機制就是把事件綁定在DOM樹的根節點上，而不是直接綁定在某個元素上;
Delegate( )採用了事件委託的概念，不是直接爲子元素綁定事件，而是爲其父元素（或祖先元素也可）綁定事件，當在div內任意元素上點擊時，事件會一層層從event target向上冒泡，直至到達你爲其綁定事件的元素；
on( )方法能夠綁定動態添加到頁面元素的事件，on()方法綁定事件能夠提高效率；
29.jq中如何將一個jq對象轉化爲dom對象？
方法一：
jQuery對象是一個數據對象，能夠經過[index]的方法，來獲得相應的DOM對象。 
如：var $v =$("#v") ; //jQuery對象 
var v=$v[0]; //DOM對象 
alert(v.checked) //檢測這個checkbox是否被選中 
方法二：
jQuery自己提供，經過.get(index)方法，獲得相應的DOM對象 
如：var $v=$("#v"); //jQuery對象 
var v=$v.get(0); //DOM對象 
alert(v.checked) //檢測這個checkbox是否被選中
30.jq中有幾種選擇器?分別是什麼?
層疊選擇器、基本過濾選擇器、內容過濾選擇器、可視化過濾選擇器、屬性過濾選擇器、子元素過濾選擇器、表單元素選擇器、表單元素過濾選擇器
31.jq中怎麼樣編寫插件?
第一種是類級別的插件開發：

1.1 添加一個新的全局函數
添加一個全局函數，咱們只需以下定義：
jQuery.foo = function() {  
  alert('This is a test. This is only a test.'); 
};   

1.2 增長多個全局函數
添加多個全局函數，可採用以下定義：
jQuery.foo = function() {  
    alert('This is a test. This is only a test.'); 
}; 
jQuery.bar = function(param) {  
   alert('This function takes a parameter, which is "' + param + '".'); 
};  
調用時和一個函數的同樣的:jQuery.foo();jQuery.bar();或者$.foo();$.bar('bar');

1.3 使用jQuery.extend(object);　
jQuery.extend({     
foo: function() {     
    alert('This is a test. This is only a test.');     
  },     
bar: function(param) {     
    alert('This function takes a parameter, which is "' + param +'".');     
  }    
}); 

1.4 使用命名空間
雖然在jQuery命名空間中，咱們禁止使用了大量的javaScript函數名和變量名。可是仍然不可避免某些函數或變量名將於其餘jQuery插件衝突，所以咱們習慣將一些方法封裝到另外一個自定義的命名空間。
jQuery.myPlugin = {         
foo:function() {         
   alert('This is a test. This is only a test.');         
  },         
  bar:function(param) {         
   alert('This function takes a parameter, which is "' + param + '".');   
  }        
}; 
採用命名空間的函數仍然是全局函數，調用時採用的方法： 
$.myPlugin.foo();        
$.myPlugin.bar('baz');
經過這個技巧（使用獨立的插件名），咱們能夠避免命名空間內函數的衝突。

第二種是對象級別的插件開發

形式1： 
(function($){    
   $.fn.extend({    
    pluginName:function(opt,callback){    
              // Our plugin implementation code goes here.      
    }    
   })    
})(jQuery);   
形式2：
(function($) {      
    $.fn.pluginName = function() {    
         // Our plugin implementation code goes here.    
    };     
})(jQuery);
形參是$，函數定義完成以後,把jQuery這個實參傳遞進去.當即調用執行。這樣的好處是,咱們在寫jQuery插件時,也能夠使用$這個別名,而不會與prototype引發衝突

32.$('div+.ab')和$('.ab+div') 哪一個效率高？
$('div+.ab')效率高
33.$.map和$.each有什麼區別
map()方法主要用來遍歷操做數組和對象，會返回一個新的數組。$.map()方法適用於將數組或對象每一個項目新陣列映射到一個新數組的函數；
each()主要用於遍歷jquery對象，返回的是原來的數組，並不會新建立一個數組。
34.編寫一個 getElementsByClassName 封裝函數?
<body>
  <input type="submit" id = "sub" class="ss confirm btn" value="提交"/>
  <script>
window.onload = function(){
//方法一
        var Opt = document.getElementById('sub');
        var getClass = function(className,tagName){
            if(document.getElementsByTagName){
                var Inp = document.getElementsByTagName(tagName);
                for(var i=0; i<Inp.length; i++){
                    if((new RegExp('(\\s|^)' +className +'(\\s|$)')).test(Inp[i].className)){
                        return Inp[i];
                    }
                }
            }else if(document.getElementsByClassName){
                return document.getElementsByClassName(className);
            }
        }     
//方法二
        var aa = getClass("confirm", "input");
        function getClass(className, targetName){
            var ele = [];
            var all = document.getElementsByTagName(targetName || "*");
            for(var i=0; i<all.length; i++){
                if(all[i].className.match(new RegExp('(\\s|^)'+confirm+'(\\s|$)'))){    
                    ele[ele.length] = all[i];
                }
            }
            return ele;
        }

//方法三
        function getObjsByClass(tagName, className){
            if(document.getElementsByClassName){
                alert("document.getElementsByClassName");
                return document.getElementsByClassName(className);
            }else{
                var el = [];
                var _el = document.getElementsByTagName(tagName);
                for(var i=0; i<_el.length; i++){
                    if(_el[i].className.indexOf(className) > -1){
                        alert(_el[i]);
                        el[_el.length] = _el[i];
                    }
                }
                alert(el);
                return el;
            }
        }
    }
  </script>
</body>
35.簡述下工做流程
我在以前的公司工做流程大概是這樣的：公司定稿會結束之後，會進行簡單的技術研討，而後咱們前端會進行先期的技術準備。前端切圖人員會進行psd設計稿切圖，而且將css文件進行整合。咱們主要編寫JS部分，其中包括搭建前端框架（大項目），編寫js業務和數據持久化操做，咱們也會編寫js插件而且進行封裝方便使用，還有就是編寫JS前端組建和JS測試單元，最後將完成的JS部分與切圖人員提供的HTML頁面進行整合。最後對完成的頁面進行功能測試、頁面兼容、產品還原。而後對產品進行封存，提交測試。若是出現BUG會返回給咱們開發人員進行修改，再提交測試，最後測試成功，進行版本封存。等到程序所有上線的時候進行線上測試。
36.通常使用什麼版本控制工具?svn如何對文件加鎖
svn加鎖目的：爲了不多我的同一時間對同一個文件改動的相互覆蓋，版本控制系統就必須有一套衝突處理機制。
svn加鎖兩種策略：樂觀加鎖：全部簽出的文件都是可讀寫的，對文件的修改沒必要得到文件的鎖，當你修改完文件簽入時，會首先要求你更新本地文件，版本控制系統不會覆蓋你的本地修改，而是會讓你本身合併衝突後簽入。
嚴格加鎖：全部簽出的文件都是隻讀的，任何對文件的修改必需要得到文件的鎖，若是其餘人沒有擁有該文件的鎖，那麼版本控制系統就會受權給你文件的鎖，並將文件設置爲可編輯的。
svn兩種加鎖步驟：樂觀加鎖：選擇你想要獲取鎖定的文件，而後右鍵菜單點擊TortoiseSVN 選取獲取鎖定。
嚴格加鎖：在想要採起嚴格加鎖的文件或目錄上點擊右鍵，使用TortoiseSVN 屬性菜單，點擊新建屬性，選擇須要鎖定。
37. git 和 svn的區別?
SVN是集中式版本控制系統，版本庫是集中放在中央服務器的，而幹活的時候，用的都是本身的電腦，因此首先要從中央服務器哪裏獲得最新的版本，而後幹活，幹完後，須要把本身作完的活推送到中央服務器。集中式版本控制系統是必須聯網才能工做，若是在局域網還能夠，帶寬夠大，速度夠快，若是在互聯網下，若是網速慢的話，就納悶了。

Git是分佈式版本控制系統，那麼它就沒有中央服務器的，每一個人的電腦就是一個完整的版本庫，這樣，工做的時候就不須要聯網了，由於版本都是在本身的電腦上。既然每一個人的電腦都有一個完整的版本庫，那多我的如何協做呢？好比說本身在電腦上改了文件A，其餘人也在電腦上改了文件A，這時，大家兩之間只需把各自的修改推送給對方，就能夠互相看到對方的修改了。
38. jquery和zepto有什麼區別?
1.針對移動端程序，Zepto有一些基本的觸摸事件能夠用來作觸摸屏交互（tap事件、swipe事件），Zepto是不支持IE瀏覽器的，這不是Zepto的開發者Thomas Fucks在跨瀏覽器問題上犯了迷糊，而是通過了認真考慮後爲了下降文件尺寸而作出的決定，就像jQuery的團隊在2.0版中再也不支持舊版的IE（6 7 8）同樣。由於Zepto使用jQuery句法，因此它在文檔中建議把jQuery做爲IE上的後備庫。那樣程序仍能在IE中，而其餘瀏覽器則能享受到Zepto在文件大小上的優點，然而它們兩個的API不是徹底兼容的，因此使用這種方法時必定要當心，並要作充分的測試。
2.Dom操做的區別：添加id時jQuery不會生效而Zepto會生效。
3.zepto主要用在移動設備上，只支持較新的瀏覽器，好處是代碼量比較小，性能也較好。
jquery主要是兼容性好，能夠跑在各類pc，移動上，好處是兼容各類瀏覽器，缺點是代碼量大，同時考慮兼容，性能也不夠好。
39. $(function(){})和window.onload         和 $(document).ready(function(){})
window.onload:用於當頁面的全部元素，包括外部引用文件，圖片等都加載完畢時運行函數內的函數。load方法只能執行一次，若是在js文件裏寫了多個，只能執行最後一個。
$(document).ready(function(){})和$(function(){})都是用於當頁面的標準DOM元素被解析成DOM樹後就執行內部函數。這個函數是能夠在js文件裏屢次編寫的，對於多人共同編寫的js就有很大的優點，由於全部行爲函數都會執行到。並且$(document).ready()函數在HMTL結構加載完後就能夠執行，不須要等大型文件加載或者不存在的鏈接等耗時工做完成才執行，效率高。
40. jq中 attr 和 prop 有什麼區別
對於HTML元素自己就帶有的固有屬性，在處理時，使用prop方法。
對於HTML元素咱們本身自定義的DOM屬性，在處理時，使用attr方法。
41. 簡述下 this 和 定義屬性和方法的時候有什麼區別?Prototype？
this表示當前對象，若是在全局做用範圍內使用this，則指代當前頁面對象window； 若是在函數中使用this，則this指代什麼是根據運行時此函數在什麼對象上被調用。 咱們還能夠使用apply和call兩個全局方法來改變函數中this的具體指向。
prototype本質上仍是一個JavaScript對象。 而且每一個函數都有一個默認的prototype屬性。
在prototype上定義的屬性方法爲全部實例共享，全部實例皆引用到同一個對象，單一實例對原型上的屬性進行修改，也會影響到全部其餘實例。
42. 什麼是預編譯語音|預編譯處理器? 
Sass是一種CSS預處理器語言，經過編程方式生成CSS代碼。由於可編程，因此操控靈活性自由度高，方便實現一些直接編寫CSS代碼較困難的代碼。
同時，由於Sass是生成CSS的語言，因此寫出來的Sass文件是不能直接用的，必須通過編譯器編譯成CSS文件才能使用。
CSS 預處理器是一種語言用來爲 CSS 增長一些編程的的特性，無需考慮瀏覽器的兼容性問題，例如你能夠在 CSS 中使用變量、簡單的程序邏輯、函數等等在編程語言中的一些基本技巧，可讓你的 CSS 更見簡潔，適應性更強，代碼更直觀等諸多好處。最經常使用的css預處理器有sass、less css、 stylus。
43.ajax 和 jsonp ？
ajax和jsonp的區別：
相同點：都是請求一個url
不一樣點：ajax的核心是經過xmlHttpRequest獲取內容
jsonp的核心則是動態添加<script>標籤來調用服務器 提供的js腳本。
44.ajax執行流程？
1. 建立XMLHttpRequest對象,也就是建立一個異步調用對象
2. 建立一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證信息
3. 設置響應HTTP請求狀態變化的函數
4. 發送HTTP請求
5. 獲取異步調用返回的數據
6. 使用JavaScript和DOM實現局部刷新
45.xhr對象 status ? readystate?
status是XMLHttpRequest對象的一個屬性，表示響應的HTTP狀態碼。
readyState是XMLHttpRequest對象的一個屬性，用來標識當前XMLHttpRequest對象處於什麼狀態。
46.readystate 0~4
0：未初始化狀態：此時，已經建立了一個XMLHttpRequest對象
1： 準備發送狀態：此時，已經調用了XMLHttpRequest對象的open方法，而且XMLHttpRequest對象已經準備好將一個請求發送到服務器端
2：已經發送狀態：此時，已經經過send方法把一個請求發送到服務器端，可是尚未收到一個響應
3：正在接收狀態：此時，已經接收到HTTP響應頭部信息，可是消息體部分尚未徹底接收到
4：完成響應狀態：此時，已經完成了HTTP響應的接收
47.說出幾個http協議狀態碼? 200 201 302 304 400 404 500
200：請求成功
201：請求成功而且服務器建立了新的資源
302：服務器目前從不一樣位置的網頁響應請求，但請求者應繼續使用原有位置來響應之後的請求。
304：自從上次請求後，請求的網頁未修改過。服務器返回此響應時，不會返回網頁內容。
400：服務器不理解請求的語法。
404：請求的資源（網頁等）不存在
500： 內部服務器錯誤
48.上一個項目是什麼？主要負責哪些？購物車流程?支付功能?
主要負責哪些就講主要作哪些功能模塊：
    1）商品模塊:
          一、商品列表：商品排序 商品篩選 商品過濾 商品查詢 商品推薦
          二、商品詳情:類型推薦 商品簡介 商品詳情 商品評價 售後維護 
   2)購物車模塊：商品編號、數量、價格、總額、運費、運輸選項、運費總計、從購物車刪除選項、更新數量、結帳、繼續購物、商品描述、庫存信息
49.sessionStorage和localstroage 與 cookie之間有什麼關聯和區別，cookie最大存放多少字節
    三者共同點：都是保存在瀏覽器端，且同源的。
區別:
        一、cookie在瀏覽器和服務器間來回傳遞。而sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存
     二、存儲大小限制也不一樣，cookie數據不能超過4k，sessionStorage和localStorage 但比cookie大得多，能夠達到5M
     三、數據有效期不一樣，sessionStorage：僅在當前瀏覽器窗口關閉前有效，天然也就不可能持久保持；localStorage：始終有效，窗口或瀏覽器關閉也一直保存，所以用做持久數據；cookie只在設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉
     四、做用域不一樣，sessionStorage不在不一樣的瀏覽器窗口中共享，即便是同一個頁面(即數據不共享)；localStorage 在全部同源窗口中都是共享的；cookie也是在全部同源窗口中都是共享的（即數據共享）。
50.ajax中 get 和 post 有什麼區別?
get和post都是數據提交的方式。
get的數據是經過網址問號後邊拼接的字符串進行傳遞的。post是經過一個HTTP包體進行傳遞數據的。
get的傳輸量是有限制的，post是沒有限制的。
get的安全性可能沒有post高，因此咱們通常用get來獲取數據，post通常用來修改數據。
51.Gc機制是什麼？爲何閉包不會被回收變量和函數？
   一、Gc垃圾回收機制;
   二、外部變量沒釋放，因此指向的大函數內的小函數也釋放不了
52.簡述下你理解的面向對象？
   萬物皆對象，把一個對象抽象成類,具體上就是把一個對象的靜態特徵和動態特徵抽象成屬性和方法,也就是把一類事物的算法和數據結構封裝在一個類之中,程序就是多個對象和互相之間的通訊組成的.
  面向對象具備封裝性,繼承性,多態性。
  封裝:隱蔽了對象內部不須要暴露的細節,使得內部細節的變更跟外界脫離,只依靠接口進行通訊.封裝性下降了編程的複雜性. 經過繼承,使得新建一個類變得容易,一個類從派生類那裏得到其非私有的方法和公用屬性的繁瑣工做交給了編譯器. 而 繼承和實現接口和運行時的類型綁定機制 所產生的多態,使得不一樣的類所產生的對象可以對相同的消息做出不一樣的反應,極大地提升了代碼的通用性. 
 總之,面向對象的特性提升了大型程序的重用性和可維護性.
53.this是什麼 在不一樣場景中分別表明什麼
（1）function a(){ this ?}
       This:指向windows
（2） function b(){ return function(){ this ?}}
          b()();         This:指向windows
（3） function c(){ return {s:function(){this}}}
         c().s();         This:指向object
  因爲其運行期綁定的特性，JavaScript 中的 this 含義要豐富得多，它能夠是全局對象、當前對象或者任意對象，這徹底取決於函數的調用方式。
54.你對數據校驗是怎麼樣處理的？jquery.validate？
        通俗的說，就是爲保證數據的完整性，用一種指定的算法對原始數據計算出的一個校驗值。接收方用一樣的算法計算一次校驗值，若是和隨數據提供的校驗值同樣，就說明數據是完整的。 
用正則表達式來處理;
jquery.validate：爲表單驗證插件
55.如何對登陸的帳號密碼進行加密?
  Md5
56.在jq中  mouseover mouseenter mouseout mouseleave 和 hover有什麼關聯?
mouseenter與mouseover：
        不論鼠標指針穿過被選中元素或其子元素，都會觸發mouseover事件。
        只有在鼠標指針穿過被選元素時，纔會觸發mouseentr事件。
mouseout與mouseleave：
        不論鼠標離開被選元素仍是任何子元素，都會觸發mouseout事件。
        只有在鼠標指針離開被選元素時，纔會觸發mouseleave事件。
hover:
        hover是一個符合方法，至關於mouseenter+mouseleave。
57.jsonp原理？ 缺點?
        工做原理：使用script標籤實現跨域訪問，可在url中指定回調函數，獲取JSON數據並在指定的回調函數中執行jquery實現jsop。
        缺點：只支持GET方式的jsonp實現，是一種腳本注入行爲存在必定的安全隱患。若是返回的數據格式有問題或者返回失敗了，並不會報錯。
58.除了jsonp  還有什麼跨域方式
javascript跨域有兩種狀況： 
一、基於同一父域的子域之間，如：a.c.com和b.c.com 
二、基於不一樣的父域之間，如：www.a.com和www.b.com 
三、端口的不一樣，如：www.a.com:8080和www.a.com:8088 
四、協議不一樣，如：http://www.a.com和https://www.a.com 
對於狀況3和4，須要經過後臺proxy來解決，具體方式以下： 
a、在發起方的域下建立proxy程序 
b、發起方的js調用本域下的proxy程序 
c、proxy將請求發送給接收方並獲取相應數據 
d、proxy將得到的數據返回給發起方的js 
代碼和ajax調用一致，其實這種方式就是經過ajax進行調用的
而狀況1和2除了經過後臺proxy這種方式外，還能夠有多種辦法來解決： 
一、document.domain+iframe（只能解決狀況1）： 
a、在發起方頁面和接收方頁面設置document.domain，並將值設爲父域的主域名(window.location.hostname) 
b、在發起方頁面建立一個隱藏的iframe，iframe的源是接收方頁面 
c、根據瀏覽器的不一樣，經過iframe.contentDocument || iframe.contentWindow.document來得到接收方頁面的內容 
d、經過得到的接收方頁面的內容來與接收方進行交互 
這種方法有個缺點，就是當一個域被攻擊時，另外一個域會有安全漏洞出現。 
59.如何使用storage 對js文件進行緩存
因爲sessionStorage - 針對一個 session 的數據存儲，因此咱們通常利用localStorage儲存js文件，只有在第一次訪問該頁面的時候加載js文件，之後在訪問的時候加載本地localStorage執行
60.如何確保ajax或鏈接不走緩存路徑
   在Ajax中使用Get請求數據不會有頁面緩存的問題，而使用POST請求但是有時候頁面會緩存咱們提交的信息，致使咱們發送的異步請求不能正確的返回咱們想要的數據
$.post(url,data ,ranNum:Math.random()} ,function(data){}）
    ranNum : 這個是防止緩存的核心，每次發起請求都會用Math.random()方法生成一個隨機的數字，這樣子就會刷新url緩存 
61.split() join()?
前者是切割成數組的形式，
後者是將數組轉換成字符串
62.slice()  splice()?
slice() 方法可從已有的數組中返回選定的元素。
splice() 方法向/從數組中添加/刪除項目，而後返回被刪除的項目。
63.typeof？typeof [ ]返回數據類型是？
判斷基本數據類型；var a=[];typeof a輸出object；
原本判斷一個對象類型用typeof是最好的，不過對於Array類型是不適用的，能夠使用 instanceof操做符：
        var arrayStr=new Array("1","2","3","4","5");    
        alert(arrayStr instanceof Array); 
固然以上在一個簡單的頁面佈局裏面是沒有問題的，若是是複雜頁面狀況，入獲取的是frame內部的Array對象，能夠用這個函數判斷：
        function isArray(obj) {      
                 return Object.prototype.toString.call(obj) === '[object Array]';       
        }
64.disabled readyonly?
readonly只針對input(text / password)和textarea有效，
而disabled對於全部的表單元素都有效，當表單元素在使用了disabled後，當咱們將表單以POST或GET的方式提交的話，這個元素的值不會被傳遞出去，而readonly會將該值傳遞出去。
65.同步異步?
一、進程同步：就是在發出一個功能調用時，在沒有獲得結果以前，該調用就不返回。也就是必須一件一件事作,等前一件作完了才能作下一件事
二、異步的概念和同步相對。當一個異步過程調用發出後，調用者不能馬上獲得結果。實際處理這個調用的部件在完成後，經過狀態、通知和回調來通知調用者。
66.promise
Promise的構造函數接收一個參數，是函數，而且傳入兩個參數：resolve，reject，分別表示異步操做執行成功後的回調函數和異步操做執行失敗後的回調函數。
67.函數fn1 函數fn2 函數fn3，若是想在三個函數都執行完成後執行某一個事件應該如何實現?
一、設置事件監聽。
二、回調函數：
function fn1(){
        console.log("執行fn1");
        fn2();
}
function fn2(){
        console.log("執行fn2");
        fn3();
}
function fn3(){
        console.log("執行fn3");
        mou();
}
function mou(){
        console.log("執行某個函數");
}
fn1();
68.JavaScript提供了哪幾種「異步模式        」？
        一、回調函數（callbacks）
        二、事件監聽
        三、Promise對象
69.什麼是移動端的300ms延遲？什麼是點擊穿透？解決方案?
移動端300ms延遲：假定這麼一個場景。用戶在 瀏覽器裏邊點擊了一個連接。因爲用戶能夠進行雙擊縮放或者雙擊滾動的操做，當用戶一次點擊屏幕以後，瀏覽器並不能馬上判斷用戶是確實要打開這個連接，仍是想要進行雙擊操做。所以，瀏覽器 就等待 300 毫秒，以判斷用戶是否再次點擊了屏幕。也就是說，當咱們點擊頁面的時候移動端瀏覽器並非當即做出反應，而是會等上一小會兒纔會出現點擊的效果。
點擊穿透：假如頁面上有兩個元素A和B。B元素在A元素之上。咱們在B元素的touchstart事件上註冊了一個回調函數，該回調函數的做用是隱藏B元素。咱們發現，當咱們點擊B元素，B元素被隱藏了，隨後，A元素觸發了click事件。這是由於在移動端瀏覽器，事件執行的順序是touchstart > touchend > click。而click事件有300ms的延遲，當touchstart事件把B元素隱藏以後，隔了300ms，瀏覽器觸發了click事件，可是此時B元素不見了，因此該事件被派發到了A元素身上。若是A元素是一個連接，那此時頁面就會意外地跳轉。
300ms延遲解決方案：
（1）禁用縮放，在html文檔頭部加meta標籤以下：
         <meta name=」viewport」 content=」user-scalable=no」/>
（2）更改默認的視口寬度 （響應式佈局，消除了站點上可能存在的雙擊綻開的請求）
<meta name=」viewport」 content=」width=device-width」/>
（3）Css touch-action
     touch-action:none;在該元素上的操做不會觸發用戶代理的任何行爲，無需進行3000ms延遲判斷。
（4）FastClick爲解決移動端瀏覽器300毫秒延遲開發的一個輕量級的庫
點擊穿透解決方案：
（1）只用touch
（2）只用click
（3）tap後延遲350ms再隱藏mask
（4）pointer-events
70.變量做用域?
變量做用域：一個變量的做用域是程序源代碼中定義這個變量的區域。全局變量擁有全局做用域，在js代碼中任何地方都是有定義的。在函數內聲明的變量只在函數體內有定義，它們是局部變量，做用域是局部性的。函數參數也是局部變量，它們只在函數體內有定義。
var a = "";
window.b=''」;
function(e) {
        var c= "";
        d="";
        e="";
}
function go() {
        console.info(this);//window
        return function() {
                console.info(this); // window
                return {
                 b:function(){
                        console.info(this); //b的父對象
                    }
             }
        }
}
go()().b();
71.call & apply 二者之間的區別
  call和apply都是改變this指向的方法，區別在於call能夠寫多個參數，而apply只能寫兩個參數，第二個參數是一個數組，用於存放要傳的參數。
72.call和apply 有什麼好處？
用call和apply:實現更好的繼承和擴展，更安全。
73.誰是c的構造函數? 
function ab() {
        this.say = "";
}
ab.constructor = {}
ab.name = '';
var c = new ab();
構造函數默認指向函數自己,ab是一個類,它的構造函數是它自己，而後ab.constructor={};ab的構造函數就指向{}了，c是ab的實例化對象，c的構造函數就是{}。
經過使用new的時候  建立對象 發生了那些改變?
當使用new操做時，會立刻開闢一個塊內存，建立一個空對象，並將this指向這個對象。接着，執行構造函數ab()，對這個空對象進行構造（構造函數裏有什麼屬性和方法都一一給這個空白對象裝配上去，這就是爲什麼它叫構造函數了）。
74.sass和less有什麼區別?
1.編譯環境不同
Sass的安裝須要Ruby環境，是在服務端處理的，而Less是須要引入less.js來處理Less代碼輸出css到瀏覽器，也能夠在開發環節使用Less，而後編譯成css文件，直接放到項目中。
    2.變量符不一相，less是@，而scss是$,並且它們的做用域也不同，less是塊級做用域
    3.輸出設置，Less沒有輸出設置，sass提供4種輸出選項，nested,compact,compressed和expanded
    nested：嵌套縮進的css代碼(默認)
   expanded：展開的多行css代碼
   compact：簡潔格式的css代碼
   compressed：壓縮後的css代碼
   4.sass支持條件語句，能夠使用if{}else{},for{}循環等等，而less不行
   5.引用外部css文件，sass引用外部文件必須以_開頭，文件名若是如下劃線_形狀，sass會認爲該文件是一個引用文件，不會將其編譯爲css文件。less引用外部文件和css中的@import沒什麼差別。
   6.sass和less的工具庫不一樣。sass有工具庫Compass, 簡單說，sass和Compass的關係有點像Javascript和jQuery的關係,Compass是sass的工具庫。在它的基礎上，封裝了一系列有用的模塊和模板，補充強化了sass的功能。less有UI組件庫Bootstrap,Bootstrap是web前端開發中一個比較有名的前端UI組件庫，Bootstrap的樣式文件部分源碼就是採用less語法編寫。
        總結：無論是sass，仍是less，均可以視爲一種基於CSS之上的高級語言，其目的是使得CSS開發更靈活和更強大，sass的功能比less強大,基本能夠說是一種真正的編程語言了，less則相對清晰明瞭,易於上手,對編譯環境要求比較寬鬆。考慮到編譯sass要安裝Ruby,而Ruby官網在國內訪問不了,我的在實際開發中更傾向於選擇less。
75.bootstrap好處？
自適應和響應式佈局，12柵格系統，統一的界面風格和css樣式有利於團隊開發。編寫靈活、穩定、高質量的 HTML 和 CSS 代碼的規範。
76.開發時如何對項目進行管理?gulp?
答：本人開發時，利用gulp等前端工做流管理工具管理項目。
gulp是新一代的前端項目構建工具，你能夠使用gulp及其插件對你的項目代碼（less,sass）進行編譯，還能夠壓縮你的js和css代碼，甚至壓縮你的圖片，可以合併文件，壓縮文件，語法檢查，監聽文件變化，測試，轉換二進制，轉換圖片等一系列功能。gulp僅有少許的API，因此很是容易學習。實現良好的項目管理。
77.壓縮合並目的？http請求的優化方式？
答：1）Web性能優化最佳實踐中最重要的一條是減小HTTP請求。而減小HTTP請求的最主要的方式就是，合併並壓縮JavaScript和CSS文件。
CSS Sprites（CSS精靈）：把全站的圖標都放在一個圖像文件中，而後用CSS的background-image和background-position屬性定位來顯示其中的一小部分。
   合併腳本和樣式表;
   圖片地圖：利用image map標籤訂義一個客戶端圖像映射，（圖像映射指帶有可點擊區域的一幅圖像）具體看：http://club.topsage.com/thread-2527479-1-1.html
  ④圖片js/css等靜態資源放在靜態服務器或CDN服時，儘可能採用不用的域名，這樣能防止cookie不會互相污染，減小每次請求的往返數據。
⑤css替代圖片
⑥緩存一些數據
⑦少用location.reload()：使用location.reload() 會刷新頁面，刷新頁面時頁面全部資源（css，js，img等）會從新請求服務器。建議使用location.href="當前頁url" 代替location.reload() ，使用location.href 瀏覽器會讀取本地緩存資源。
78.ajax請求方式有幾種（8種）？
1）$.get(url,[data],[callback])
2）$.getJSON(url,[data],[callback])
3）$.post(url,[data],[callback],[type])
4）$.ajax(opiton)
5）$.getScript( url, [callback] )
6）jquery對象.load( url, [data], [callback] )
7）serialize() 與 serializeArray()
79.如何copy一個dom元素？
原生Js方法：var div = document.getElementsByTagName('div')[0];
  var clone = div.cloneNode();
Jquery方法：$('div').clone();
在默認狀況下，.clone()方法不會複製匹配的元素或其後代元素中綁定的事件。不過，能夠爲這個方法傳遞一個布爾值參數，將這個參數設置爲true, 就能夠連同事件一塊兒複製，即.clone(true)。
80.數組的排序方法（sort）？排序？漢字排序？
1）數組的排序方法：reverse()和sort()。reverse()方法會對反轉數組項的順序。
Eg:var values = [0, 1, 5, 10, 15];
values.sort();//0,1,10,15,5
var values = [1, 2, 3, 4, 5];
values.reverse();//5,4,3,2,1
js中的排序（詳情參考：http://www.tuicool.com/articles/IjInMbU）
利用sort排序
冒泡排序
快速排序
插入排序
希爾排序
選擇排序
歸併排序
localeCompare() 方法用於字符串編碼的排序
   localeCompare 方法：返回一個值，指出在當前的區域設置中兩個字符串是否相同。
81.簡述一下你理解的面向對象？
面向對象是基於萬物皆對象這個哲學觀點. 把一個對象抽象成類,具體上就是把一個對象的靜態特徵和動態特徵抽象成屬性和方法,也就是把一類事物的算法和數據結構封裝在一個類之中,程序就是多個對象和互相之間的通訊組成的.
  面向對象具備封裝性,繼承性,多態性。
  封裝:隱蔽了對象內部不須要暴露的細節,使得內部細節的變更跟外界脫離,只依靠接口進行通訊.封裝性下降了編程的複雜性. 經過繼承,使得新建一個類變得容易,一個類從派生類那裏得到其非私有的方法和公用屬性的繁瑣工做交給了編譯器. 而 繼承和實現接口和運行時的類型綁定機制 所產生的多態,使得不一樣的類所產生的對象可以對相同的消息做出不一樣的反應,極大地提升了代碼的通用性. 
 總之,面向對象的特性提升了大型程序的重用性和可維護性.
82.如何建立一個對象？
1. 工廠模式
2. 構造函數模式
3. 原型模式
4. 混合構造函數和原型模式
5. 動態原型模式
6. 寄生構造函數模式
7. 穩妥構造函數模式
程序的設計模式?工廠模式?發佈訂閱?
1）設計模式並非某種語言的某塊代碼，設計模式是一種思想，提供給在編碼時候遇到的各類問題是能夠採起的解決方案，更傾向於一種邏輯思惟，而不是萬能代碼塊。
設計模式主要分三個類型:建立型、結構型和行爲型。
建立型模式：單例模式，抽象工廠模式，建造者模式，工廠模式與原型模式。
結構型模式：適配器模式，橋接模式，裝飾者模式，組合模式，外觀模式，享元模式以及代理模式。
行爲型模式：模板方法模式，命令模式，迭代器模式，觀察者模式，中介者模式，備忘錄模式，解釋器模式，狀態模式，策略模式，職責鏈模式和訪問者模式。
2）與建立型模式相似，工廠模式建立對象（視爲工廠裏的產品）是無需指定建立對象的具體類。
工廠模式定義一個用於建立對象的接口，這個接口由子類決定實例化哪個類。該模式使一個類的實例化延遲到了子類。而子類能夠重寫接口方法以便建立的時候指定本身的對象類型。
3）觀察者模式又叫作發佈訂閱模式，它定義了一種一對多的關係，讓多個觀察者對象同時監聽某一個主題對象，這個主題對象的狀態發生改變時就會通知全部觀察着對象。它是由兩類對象組成，主題和觀察者，主題負責發佈事件，同時觀察者經過訂閱這些事件來觀察該主體，發佈者和訂閱者是徹底解耦的，彼此不知道對方的存在，二者僅僅共享一個自定義事件的名稱。
（設計模式實在是過高深了，小夥伴門結合網上實例自行學習，我實在是無能爲力啊）
83.commonjs?requirejs?AMD|CMD|UMD?
1.CommonJS就是爲JS的表現來制定規範，NodeJS是這種規範的實現，webpack 也是以CommonJS的形式來書寫。由於js沒有模塊的功能，因此CommonJS應運而生。但它不能在瀏覽器中運行。
CommonJS定義的模塊分爲:{模塊引用(require)} {模塊定義(exports)} {模塊標識(module)}
2.RequireJS 是一個JavaScript模塊加載器。
        RequireJS有兩個主要方法(method): define()和require()。這兩個方法基本上擁有相同的定義(declaration) 而且它們都知道如何加載的依賴關係，而後執行一個回調函數(callback function)。與require()不一樣的是， define()用來存儲代碼做爲一個已命名的模塊。 所以define()的回調函數須要有一個返回值做爲這個模塊定義。這些相似被定義的模塊叫做AMD (Asynchronous Module Definition，異步模塊定義)。
3.AMD 是 RequireJS 在推廣過程當中對模塊定義的規範化產出
AMD異步加載模塊。它的模塊支持對象 函數 構造器 字符串 JSON等各類類型的模塊。
適用AMD規範適用define方法定義模塊。

4.CMD是SeaJS 在推廣過程當中對模塊定義的規範化產出
AMD與CDM的區別：
（1）對於於依賴的模塊，AMD 是提早執行(好像如今也能夠延遲執行了)，CMD 是延遲執行。
（2）AMD 推崇依賴前置，CMD 推崇依賴就近。
（3）AMD 推崇複用接口，CMD 推崇單用接口。
（4）書寫規範的差別。
5.umd是AMD和CommonJS的糅合。
AMD 瀏覽器第一的原則發展 異步加載模塊。
CommonJS 模塊以服務器第一原則發展，選擇同步加載，它的模塊無需包裝(unwrapped modules)。
這迫令人們又想出另外一個更通用的模式UMD （Universal Module Definition）。但願解決跨平臺的解決方案。
UMD先判斷是否支持Node.js的模塊（exports）是否存在，存在則使用Node.js模塊模式。
8四、js的幾種繼承方式？
        1.使用對象冒充實現繼承   
2.採用call、Apply方法改變函數上下文實現繼承  
3.原型鏈方式繼承
8五、JavaScript原型，原型鏈 ? 有什麼特色？
     在JavaScript中,一共有兩種類型的值,原始值和對象值.每一個對象都有一個內部屬性[[prototype]],咱們一般稱之爲原型.原型的值能夠是一個對象,也能夠是null.若是它的值是一個對象,則這個對象也必定有本身的原型.這樣就造成了一條線性的鏈,咱們稱之爲原型鏈.
      訪問一個對象的原型能夠使用ES5中的Object.getPrototypeOf方法,或者ES6中的__proto__屬性.
      原型鏈的做用是用來實現繼承,好比咱們新建一個數組,數組的方法就是從數組的原型上繼承而來的。
8六、eval是作什麼的？
它的功能是把對應的字符串解析成JS代碼並運行； 應該避免使用eval，不安全，很是耗性能（2次，一次解析成js語句，一次執行）。
8七、null，undefined 的區別？
undefined表示變量聲明但未初始化的值，null表示準備用來保存對象，尚未真正保存對象的值。從邏輯角度看，null表示一個空對象指針。
8八、JSON 的瞭解？
JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。 它是基於JavaScript的一個子集。數據格式簡單, 易於讀寫, 佔用帶寬小。
8九、js延遲加載的方式有哪些？
defer和async、動態建立DOM方式（用得最多）、按需異步載入js
90、ajax 是什麼?        
   異步javascript和XML，是指一種建立交互式網頁應用的網頁開發技術。經過後臺與服務器進行少許數據交換，AJAX能夠使網頁實現異步更新。這意味着能夠在不從新加載整個網頁的狀況下，對網頁的某部分進行更新。
    9一、同步和異步的區別?
    javascript同步表示sync，指：代碼依次執行
    javascript異步表示async，指：代碼執行不按順序，‘跳過’執行，待其餘某些代碼執行完後再來執行，成爲異步。
  9二、 如何解決跨域問題?
Jsonp、iframe、window.name、window.postMessage、服務器上設置代理頁面

9三、異步加載的方式有哪些？
  (1) defer，只支持IE
  (2) async：true
  (3) 建立script，插入到DOM中，加載完畢後callBack
9四、jQuery與jQuery UI 有啥區別？
jQuery是一個js庫，主要提供的功能是選擇器，屬性修改和事件綁定等等。
jQuery UI則是在jQuery的基礎上，利用jQuery的擴展性，設計的插件。提供了一些經常使用的界面元素，諸如對話框、拖動行爲、改變大小行爲等等。
9五、你有哪些性能優化的方法？
  （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佈局慢。
9六、一個頁面從輸入 URL 到頁面加載顯示完成，這個過程當中都發生了什麼？（流程說的越詳細越好）
查找瀏覽器緩存 
DNS解析、查找該域名對應的IP地址、重定向（301）、發出第二個GET請求
進行HTTP協議會話
客戶端發送報頭(請求報頭)
服務器回饋報頭(響應報頭)
html文檔開始下載
文檔樹創建，根據標記請求所需指定MIME類型的文件
文件顯示
    
瀏覽器這邊作的工做大體分爲如下幾步：
    加載：根據請求的URL進行域名解析，向服務器發起請求，接收文件（HTML、JS、CSS、圖象等）。
    解析：對加載到的資源（HTML、JS、CSS等）進行語法解析，建議相應的內部數據結構（好比HTML的DOM樹，JS的（對象）屬性表，CSS的樣式規則等等）
    9七、ajax的缺點
一、ajax不支持瀏覽器back按鈕。
二、安全問題 AJAX暴露了與服務器交互的細節。 
三、對搜索引擎的支持比較弱。
四、破壞了程序的異常機制。
五、不容易調試


argularJS
1.jquery和 angularjs 的區別？
jQuery在DOM上作得很好，能夠根據用戶交互，添加修改DOM元素。AngularJS更關注數據展現自己，更新時會盡量減小對DOM的破壞和重構。AngularJS中不少特色的設計都是出於提升開發者效率的目的。 當一個項目的重點是數據展現和執行，而不是分析，此時可能AngularJS就會更勝一籌。
2.ng的三種服務?哪一個服務能夠在config中進行調用？
Provider factory service
Provider
3.angular一些優化手段
DOM樹要小，DOM的訪問要儘量的少。儘可能避免使用過濾器。當使用ng-repeat時要儘可能避免對全局列表的刷新。儘可能減小綁定。把變量做用範圍限制地越緊密越好，這樣垃圾回收器就能夠更快地回收空間
4.ng中如何進行項目結構的
將相同的數據功能單獨的建立一個文件進行管理維護，方便調用。進行分層開發，分爲controller控制層，filter過濾層，service服務層
5.ng指令中 resctrict  是什麼意思 ？EACM
生效指令
E:元素        A：屬性        C：class        M：註釋
6.ng指令中 scope ? true|false|{} ?分別表明什麼意思?
不設置scope狀況下，link中scope與容器controller公用一塊scope
Scope設置爲true的狀況下，繼承容器的做用域，建立本身的做用域
Scope設置爲false，link中scope與容器controller公用一塊scope
Scope設置爲{}，繼承controller容器scope做用域，可是會生成一塊獨立的做用域空間，不會自動調用父scope的變量或方法
7.ng指令中 transclude 意義?
是否對指令內部包含的內容進行保存 配合ng-transclude使用
8.MVC?MVVM?
MVC :M是指數據模型，V是指用戶界面，C則是控制器。使用MVC的目的是將M和V的實現代碼分離，從而使同一個程序能夠使用不一樣的表現形式。C存在的目的則是確保M和V的同步，一旦M改變，V應該同步更新。
MVVM(Model View ViewModel) :是一種基於MVC和MVP的架構模式，它試圖將用戶界面（UI）從業務邏輯和行爲中更加清晰地分離出來。爲了這個目的，不少例子使用聲明變量綁定來把View層的工做從其餘層分離出來。
9.angular版本?怎麼去兼容 ie8？ng中數據通常放在哪裏?
目前咱們使用的是angularJS 1.5版本，如何去兼容IE8？
ng中數據通常放在控制層。
10.ng的三種服務?區別?
Provider:執行$get方法，能夠在ng的config配置方法中定義變量和參數；
Factory：對$get進行封裝，執行一個函數，返回一個對象；
Service：返回一個構造函數，在注入時進行實例化；
11.ng編程時，大家的項目結構是什麼樣的 ?分別有什麼特色 ?
分爲控制層、過濾層、服務層
控制層：主要處理數據傳輸，頁面渲染，數據綁定
過濾層：對數據進行過濾
服務層：ajax
12.ng-if 跟 ng-show/hide 的區別有哪些？
(1) ng-if 在後面表達式爲 true 的時候才建立這個 dom 節點，ng-show 是初始時就建立了，用 display:block 和 display:none 來控制顯示和不顯示。
(2) ng-if 會（隱式地）產生新做用域，ng-switch 、 ng-include 等會動態建立一塊界面的也是如此。
這樣會致使，在 ng-if 中用基本變量綁定 ng-model，並在外層 div 中把此 model 綁定給另外一個顯示區域，內層改變時，外層不會同步改變，由於此時已是兩個變量了。
<p>{{name}}</p> 
<div ng-if="true"> 
        <input type="text" ng-model="name"> 
</div>
ng-show 不存在此問題，由於它不自帶一級做用域。
避免這類問題出現的辦法是，始終將頁面中的元素綁定到對象的屬性（data.x）而不是直接綁定到基本變量（x）上。
13.ng-repeat迭代數組的時候，若是數組中有相同值，會有什麼問題，如何解決？
會提示 Duplicates in a repeater are not allowed.
加 track by $index 可解決。固然，也能夠 trace by 任何一個普通的值，只要能惟一性標識數組中的每一項便可（創建 dom 和數據之間的關聯）。
14.ng-click 中寫的表達式，能使用 JS 原生對象上的方法嗎？
不止是 ng-click 中的表達式，只要是在頁面中，都不能直接調用原生的 JS 方法，由於這些並不存在於與頁面對應的 Controller 的 $scope 中。
15.factory、service 和 provider 是什麼關係？
共同點：都屬於單例模式
Factory:把 service 的方法和數據放在一個對象裏，並返回這個對象
Service:經過構造函數方式建立 service，返回一個實例化對象
Provider:建立一個可經過 config 配置的 service，$get 中返回的，就是用 factory 建立 service 的內容
從底層實現上來看，service 調用了 factory，返回其實例；factory 調用了 provider，返回其 $get 中定義的內容。factory 和 service 功能相似，只不過 factory 是普通 function，能夠返回任何東西（return 的均可以被訪問，因此那些私有變量怎麼寫，你懂的）；service 是構造器，能夠不返回（綁定到 this 的均可以被訪問）；provider 是增強版 factory，返回一個可配置的 factory。
16.angular 的數據綁定採用什麼機制？詳述原理
髒檢查機制。
雙向數據綁定是 AngularJS 的核心機制之一。當 view 中有任何數據變化時，會更新到 model ，當 model 中數據有變化時，view 也會同步更新，顯然，這須要一個監控。
原理就是，Angular 在 scope 模型上設置了一個 監聽隊列，用來監聽數據變化並更新 view 。每次綁定一個東西到 view 上時 AngularJS 就會往 $watch 隊列裏插入一條 $watch，用來檢測它監視的 model 裏是否有變化的東西。當瀏覽器接收到能夠被 angular context 處理的事件時，$digest 循環就會觸發，遍歷全部的 $watch，最後更新 dom。
17.如何在平級界面模塊間進行通訊
有兩種方法，一種是共用服務，一種是基於事件。
共用服務:
        在 Angular 中，經過 factory 能夠生成一個單例對象，在須要通訊的模塊 a 和 b 中注入這個對象便可。
基於事件:
這個又分兩種方式
        第一種是藉助父 controller。在子 controller 中向父 controller 觸發（$emit）一個事件，而後在父 controller 中監聽（$on）事件，再廣播（$broadcast）給子 controller ，這樣經過事件攜帶的參數，實現了數據通過父 controller，在同級 controller 之間傳播。
        第二種是藉助 $rootScope。每一個 Angular 應用默認有一個根做用域 $rootScope， 根做用域位於最頂層，從它往下掛着各級做用域。因此，若是子控制器直接使用 $rootScope 廣播和接收事件，那麼就可實現同級之間的通訊。
18.一個 angular 應用應當如何良好地分層？
(1) 目錄結構的劃分
對於小型項目，能夠按照文件類型組織
可是對於規模較大的項目，最好按業務模塊劃分
(2)邏輯代碼的拆分
        做爲一個 MVVM 框架，Angular 應用自己就應該按照 模型，視圖模型（控制器），視圖來劃分。
        這裏邏輯代碼的拆分，主要是指儘可能讓 controller 這一層很薄。提取共用的邏輯到 service 中 （好比後臺數據的請求，數據的共享和緩存，基於事件的模塊間通訊等），提取共用的界面操做到 directive 中（好比將日期選擇、分頁等封裝成組件等），提取共用的格式化操做到 filter 中等等。
        在複雜的應用中，也能夠爲實體創建對應的構造函數，好比硬盤（Disk）模塊，可能有列表、新建、詳情這樣幾個視圖，並分別對應的有 controller，那麼能夠建一個 Disk 構造函數，裏面完成數據的增刪改查和驗證操做，有跟 Disk 相關的 controller，就注入 Disk 構造器並生成一個實例，這個實例就具有了增刪改查和驗證方法。這樣既井井有條，又實現了複用（讓 controller 層更薄了）。
19.angular 應用經常使用哪些路由庫，各自的區別是什麼？
Angular1.x 中經常使用 ngRoute 和 ui.router，還有一種爲 Angular2 設計的 new router（面向組件）。
不管是 ngRoute 仍是 ui.router，做爲框架額外的附加功能，都必須以 模塊依賴 的形式被引入。
區別:
ngRoute 模塊是 Angular 自帶的路由模塊，而 ui.router 模塊是基於 ngRoute模塊開發的第三方模塊。
ui.router 是基於 state （狀態）的， ngRoute 是基於 url 的，ui.router模塊具備更強大的功能，主要體如今視圖的嵌套方面。
使用 ui.router 可以定義有明確父子關係的路由，並經過 ui-view 指令將子路由模版插入到父路由模板的 <div ui-view></div> 中去，從而實現視圖嵌套。而在 ngRoute 中不能這樣定義，若是同時在父子視圖中 使用了 <div ng-view></div> 會陷入死循環。
20.若是經過angular的directive規劃一套全組件化體系，可能遇到哪些挑戰？
組件如何與外界進行數據的交互，以及如何經過簡單的配置就能使用
21.分屬不一樣團隊進行開發的 angular 應用，若是要作整合，可能會遇到哪些問題，如何解決？
可能會遇到不一樣模塊之間的衝突。
好比一個團隊全部的開發在 moduleA 下進行，另外一團隊開發的代碼在 moduleB 下，會致使兩個 module 下面的 serviceA 發生了覆蓋。
在 Angular1.x 中並無很好的解決辦法，因此最好在前期進行統一規劃，作好約定，嚴格按照約定開發，每一個開發人員只寫特定區塊代碼。
22.angular 的缺點有哪些？
（1）強約束
        致使學習成本較高，對前端不友好。但遵照 AngularJS 的約定時，生產力會很高，對 Java 程序員友好。
（2）不利於 SEO
        由於全部內容都是動態獲取並渲染生成的，搜索引擎無法爬取。
一種解決辦法是，對於正經常使用戶的訪問，服務器響應 AngularJS 應用的內容；對於搜索引擎的訪問，則響應專門針對 SEO 的HTML頁面。
（3）性能問題
做爲 MVVM 框架，由於實現了數據的雙向綁定，對於大數組、複雜對象會存在性能問題。
23.優化 Angular 應用的性能的辦法？
（1）減小監控項，即減小watcher數量（好比對不會變化的數據採用單向綁定）
（2）主動設置索引（指定 track by，簡單類型默認用自身當索引，對象默認使用 $$hashKey，好比改成 track by item.id）
（3）下降渲染數據量（好比分頁，或者每次取一小部分數據，根據須要再取）
（4）數據扁平化（好比對於樹狀結構，使用扁平化結構，構建一個 map 和樹狀數據，對樹操做時，因爲跟扁平數據同一引用，樹狀數據變動會同步到原始的扁平數據）
24.如何看待 angular 1.2 中引入的 controller as 語法？
最根本的好處
        在 angular 1.2 之前，在 view 上的任何綁定都是直接綁定在 $scope 上的，
        使用 controllerAs，不須要再注入 $scope，controller 變成了一個很簡單的 javascript 對象（POJO），一個更純粹的 ViewModel。
25.詳述 angular 的 「依賴注入」
依賴注入是一種軟件設計模式，目的是處理代碼之間的依賴關係，減小組件間的耦合。
原理：
AngularJS 是經過構造函數的參數名字來推斷依賴服務名稱的，經過 toString() 來找到這個定義的 function 對應的字符串，而後用正則解析出其中的參數（依賴項），再去依賴映射中取到對應的依賴，實例化以後傳入。
一般會使用下面兩種方式注入依賴（對依賴添加的順序有要求）。
（1）數組註釋法        
（2）顯式 $inject
26.如何看待angular2？
（1）相比 Angular1.x，Angular2的改動很大，幾乎算是一個全新的框架。
（2）基於 TypeScript（能夠使用 TypeScript 進行開發），在大型項目團隊協做時，強語言類型更有利。
（3）組件化，提高開發和維護的效率。
（4）還有 module 支持動態加載，new router，promise的原生支持等等。
（5）迎合將來標準，吸納其餘框架的優勢，值得期待，不過同時要學習的東西也更多了（ES next、TS、Rx等）。
27.表達式 {{yourModel}}是如何工做的？
它依賴於 $interpolation服務，在初始化頁面html後，它會找到這些表達式，而且進行標記，因而每碰見一個{{}}，則會設置一個$watch。而$interpolation會返回一個帶有上下文參數的函數，最後該函數執行，則算是表達式$parse到那個做用域上。
28.Angular中的digest週期是什麼？
每一個digest週期中，angular總會對比scope上model的值，通常digest週期都是自動觸發的，咱們也能夠使用$apply進行手動觸發。
29.如何取消 $timeout, 以及中止一個$watch()?
（1）中止 $timeout咱們能夠用cancel：
var customTimeout = $timeout(function () { 
// your code
}, 1000); 
$timeout.cancel(customTimeout);
停掉一個$watch：
// .$watch() 會返回一箇中止註冊的函數
var deregisterWatchFn = $rootScope.$watch(‘someGloballyAvailableProperty', function (newVal) { 
if (newVal) {
  // we invoke that deregistration function, to disable the watch
  deregisterWatchFn();
  ...
}
});
30.列出至少三種實現不一樣模塊之間通訊方式？
一、Service
    二、events,指定綁定的事件
三、使用 $rootScope
四、controller之間直接使用$parent, $$childHead等
五、directive 指定屬性進行數據綁定
31.解釋下什麼是$rootScrope以及和$scope的區別？
通俗的說$rootScrope 是頁面全部$scope的父親。
step1:Angular解析ng-app而後在內存中建立$rootScope。
step2:angular回繼續解析，找到{{}}表達式，並解析成變量。
step3:接着會解析帶有ng-controller的div而後指向到某個controller函數。這個時候在這個controller函數變成一個$scope對象實例。


其它
1.restful規範
認爲一切接口都是資源，每一個資源和每一個資源均可以經過必定的關係進行鏈接或管理。
rest 對接口進行簡單的規範定義，即post，delete,put/patch,get
二、react？
提供虛擬dom節點
三、webpack，gulp？        
Gulp，文件的壓縮打包合併，是一個純粹的工具，並不能將你的css等非js資源模塊化，可是webpack能夠作到這些。
webpack模塊化加載器兼打包工具，能夠把各類資源都做爲模塊來使用和處理，具備前端構建的功能，只不過經過插件實現了構建工具的一些功能。
webpack的優勢以下：
1. webpack 遵循commonJS 的形式，但對 AMD/CMD 的支持也很全面，方便舊項目進行代碼遷移。
2. 能被模塊化的不只僅是 JS ，全部的靜態資源，例如css，圖片等都能模塊化，即以require的方式引入。
3. 開發便捷，能替代部分 grunt/gulp 的工做，好比打包、壓縮混淆、圖片轉base64等。
四、函數的兩個內置對象？
This,arguments
五、佈局方式？
rem,百分比，Flex,meta標籤實現響應式
六、js中建立對象的幾種方式？
構造函數方式；工廠方式；混合模式；代理模式；動態原型方式（推薦使用這種模式）
七、確保瀏覽器不走緩存路線？
一、在ajax發送請求前加上 anyAjaxObj.setRequestHeader("If-Modified-Since","0")
二、在ajax發送請求前加上 anyAjaxObj.setRequestHeader("Cache-Control","no-cache")
三、在URL後面加上一個隨機數： "fresh=" + Math.random();
四、在URL後面加上時間搓："nowtime=" + new Date().getTime();
五、若是是使用jQuery，直接這樣就能夠了$.ajaxSetup({cache:false})，這樣頁面的全部ajax都會執行這條語句就是不須要保存緩存記錄。
八、移動端開發，會發現input在iscroll中不能輸入
使用了iscroll以後，你會發現點擊輸入框時不靈敏，常常沒法聚焦；頁面文字也沒法選擇和複製。這是因爲iscroll要監聽鼠標事件和觸摸事件來進行滾動，因此禁止了瀏覽器的默認行爲，致使上述問題。因此咱們須要稍做修改： 
onBeforeScrollStart: function (e) { 
     var target = e.target; 
     while (target.nodeType != 1) 
          target = target.parentNode; 
     if (target.tagName != ‘SELECT’ && target.tagName != ‘INPUT’ && target.tagName != ‘TEXTAREA’) 
        e.preventDefault(); 
}
九、angularjs中的自定義指令的scope有幾個值，分別表明什麼？
        1.scope設置爲true的狀況下，繼承容器的做用域，建立本身的做用域
        2.設置scope爲false時，link中scope與容器controller公用一塊scope
        3.若是scope設置爲{}對象, 繼承controller容器scope做用域,可是會生成一塊獨立的做用域空間，不會自動調用父scope的變量或方法
當scope設置爲{}時：能夠聲明給scope傳遞變量和值
        3種方式傳遞 = & @
@經過在標籤上定義屬性,在scope使用@屬性名傳遞變量
&經過在標籤上定義屬性，在scope中使用&傳遞進來一個'函數',且只能是函數
=經過在標籤上定義屬性，在父scope上尋找到匹配的變量和函數爲當前的函數屬性進行復制。
十、Node.js的適用場景？
高併發、聊天、實時消息推送