前端面試題——2017-05-24_ZenDei技術網路在線

更新時間: 2016-3-25 HTML Doctype作用？標準模式與相容模式各有什麼區別? （1）、<!DOCTYPE>聲明位於位於HTML文檔中的第一行，處於 <html> 標簽之前。告知瀏覽器的解析器用什麼文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會導致文檔以相容模式呈現。（2 ...

更新時間: 2016-3-25

HTML

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

  （1）、<!DOCTYPE>聲明位於位於HTML文檔中的第一行，處於 <html> 標簽之前。告知瀏覽器的解析器用什麼文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會導致文檔以相容模式呈現。

  （2）、標準模式的排版 和JS運作模式都是以該瀏覽器支持的最高標準運行。在相容模式中，頁面以寬鬆的向後相容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作。

HTML5 為什麼只需要寫 <!DOCTYPE HTML>？

   HTML5 不基於 SGML，因此不需要對DTD進行引用，但是需要doctype來規範瀏覽器的行為（讓瀏覽器按照它們應該的方式來運行）；

   而HTML4.01基於SGML,所以需要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。

行內元素有哪些？塊級元素有哪些？空(void)元素有那些？

  首先：CSS規範規定，每個元素都有display屬性，確定該元素的類型，每個元素都有預設的display值，如div的display預設值為“block”，則為“塊級”元素；span預設display屬性值為“inline”，是“行內”元素。

  （1）行內元素有：a b span img input select strong（強調的語氣）
  （2）塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

  （3）常見的空元素：
  	<br> <hr> <img> <input> <link> <meta>
  	鮮為人知的是：
  	<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

  不同瀏覽器（版本）、HTML4（5）、CSS2等實際略有差異
  參考: http://stackoverflow.com/questions/6867254/browsers-default-css-for-html-elements

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

  （1）link屬於XHTML標簽，除了載入CSS外，還能用於定義RSS, 定義rel連接屬性等作用；而@import是CSS提供的，只能用於載入CSS;

  （2）頁面被載入的時，link會同時被載入，而@import引用的CSS會等到頁面被載入完再載入;

  （3）import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標簽，無相容問題;

介紹一下你對瀏覽器內核的理解？

  主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
  渲染引擎：負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，然後會輸出至顯示器或印表機。瀏覽器的內核的不同對於網頁的語法解釋會有不同，所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網路內容的應用程式都需要內核。

  JS引擎則：解析和執行javascript來實現網頁的動態效果。

  最開始渲染引擎和JS引擎並沒有區分的很明確，後來JS引擎越來越獨立，內核就傾向於只指渲染引擎。

常見的瀏覽器內核有哪些？

  Trident內核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]
  Gecko內核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
  Presto內核：Opera7及以上。      [Opera內核原為：Presto，現為：Blink;]
  Webkit內核：Safari,Chrome等。   [ Chrome的：Blink（WebKit的分支）]

詳細文章：[瀏覽器內核的解析和對比](http://www.cnblogs.com/fullhouse/archive/2011/12/19/2293455.html)

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

  * HTML5 現在已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增加。
  	  繪畫 canvas;
  	  用於媒介回放的 video 和 audio 元素;
  	  本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失;
        sessionStorage 的數據在瀏覽器關閉後自動刪除;
  	  語意化更好的內容元素，比如 article、footer、header、nav、section;
  	  表單控制項，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]-->

  * 如何區分HTML5： DOCTYPE聲明\新增的結構元素\功能元素

簡述一下你對HTML語義化的理解？

  用正確的標簽做正確的事情。
  html語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜索引擎解析;
  即使在沒有樣式CSS情況下也以一種文檔格式顯示，並且是容易閱讀的;
  搜索引擎的爬蟲也依賴於HTML標記來確定上下文和各個關鍵字的權重，利於SEO;
  使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。

HTML5的離線儲存怎麼使用，工作原理能不能解釋一下？

  在用戶沒有與網際網路連接時，可以正常訪問站點或應用，在用戶與網際網路連接時，更新用戶機器上的緩存文件。
  原理：HTML5的離線存儲是基於一個新建的.appcache文件的緩存機制(不是存儲技術)，通過這個文件上的解析清單離線存儲資源，這些資源就會像cookie一樣被存儲了下來。之後當網路在處於離線狀態下時，瀏覽器會通過被離線存儲的數據進行頁面展示。


  如何使用：
  1、頁面頭部像下麵一樣加入一個manifest的屬性；
  2、在cache.manifest文件的編寫離線存儲的資源；
  	CACHE MANIFEST
  	#v0.11
  	CACHE:
  	js/app.js
  	css/style.css
  	NETWORK:
  	resourse/logo.png
  	FALLBACK:
  	/ /offline.html
  3、在離線狀態時，操作window.applicationCache進行需求實現。

詳細的使用請參考：

HTML5 離線緩存-manifest簡介

有趣的HTML5：離線存儲

瀏覽器是怎麼對HTML5的離線儲存資源進行管理和載入的呢？

  線上的情況下，瀏覽器發現html頭部有manifest屬性，它會請求manifest文件，如果是第一次訪問app，那麼瀏覽器就會根據manifest文件的內容下載相應的資源並且進行離線存儲。如果已經訪問過app並且資源已經離線存儲了，那麼瀏覽器就會使用離線的資源載入頁面，然後瀏覽器會對比新的manifest文件與舊的manifest文件，如果文件沒有發生改變，就不做任何操作，如果文件改變了，那麼就會重新下載文件中的資源併進行離線存儲。
  離線的情況下，瀏覽器就直接使用離線存儲的資源。

詳細請參考：有趣的HTML5：離線存儲

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

  cookie是網站為了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（通常經過加密）。
  cookie數據始終在同源的http請求中攜帶（即使不需要），記會在瀏覽器和伺服器間來回傳遞。
  sessionStorage和localStorage不會自動把數據發給伺服器，僅在本地保存。

  存儲大小：
  	cookie數據大小不能超過4k。
  	sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。

  有期時間：
  	localStorage    存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據；
  	sessionStorage  數據在當前瀏覽器視窗關閉後自動刪除。
  	cookie          設置的cookie過期時間之前一直有效，即使視窗或瀏覽器關閉

iframe有那些缺點？

  *iframe會阻塞主頁面的Onload事件；
  *搜索引擎的檢索程式無法解讀這種頁面，不利於SEO;

  *iframe和主頁面共用連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的並行載入。

  使用iframe之前需要考慮這兩個缺點。如果需要使用iframe，最好是通過javascript
  動態給iframe添加src屬性值，這樣可以繞開以上兩個問題。

Label的作用是什麼？是怎麼用的？

  label標簽來定義表單控制間的關係,當用戶選擇該標簽時，瀏覽器會自動將焦點轉到和標簽相關的表單控制項上。

  <label for="Name">Number:</label>
  <input type=“text“name="Name" id="Name"/>

  <label>Date:<input type="text" name="B"/></label>

HTML5的form如何關閉自動完成功能？

  給不想要提示的 form 或某個 input 設置為 autocomplete=off。

如何實現瀏覽器內多個標簽頁之間的通信? (阿裡)

  WebSocket、SharedWorker；
  也可以調用localstorge、cookies等本地存儲方式；

  localstorge另一個瀏覽上下文里被添加、修改或刪除時，它都會觸發一個事件，
  我們通過監聽事件，控制它的值來進行頁面信息通信；
  註意quirks：Safari 在無痕模式下設置localstorge值時會拋出 QuotaExceededError 的異常；

webSocket如何相容低瀏覽器？(阿裡)

  Adobe Flash Socket 、
  ActiveX HTMLFile (IE) 、
  基於 multipart 編碼發送 XHR 、
  基於長輪詢的 XHR

頁面可見性（Page Visibility API）可以有哪些用途？

  通過 visibilityState 的值檢測頁面當前是否可見，以及打開網頁的時間等;
  在頁面被切換到其他後臺進程的時候，自動暫停音樂或視頻的播放；

如何在頁面上實現一個圓形的可點擊區域？

  1、map+area或者svg
  2、border-radius
  3、純js實現 需要求一個點在不在圓上簡單演算法、獲取滑鼠坐標等等

實現不使用 border 畫出1px高的線，在不同瀏覽器的標準模式與怪異模式下都能保持一致的效果。
```
  <div style="height:1px;overflow:hidden;background:red"></div>
```

網頁驗證碼是幹嘛的，是為瞭解決什麼安全問題。

  區分用戶是電腦還是人的公共全自動程式。可以防止惡意破解密碼、刷票、論壇灌水；
  有效防止黑客對某一個特定註冊用戶用特定程式暴力破解方式進行不斷的登陸嘗試。

title與h1的區別、b與strong的區別、i與em的區別？

  title屬性沒有明確意義只表示是個標題，H1則表示層次明確的標題，對頁面信息的抓取也有很大的影響；

  strong是標明重點內容，有語氣加強的含義，使用閱讀設備閱讀網路時：<strong>會重讀，而<B>是展示強調內容。

  i內容展示為斜體，em表示強調的文本；

  Physical Style Elements -- 自然樣式標簽
  b, i, u, s, pre
  Semantic Style Elements -- 語義樣式標簽
  strong, em, ins, del, code
  應該準確使用語義樣式標簽, 但不能濫用, 如果不能確定時首選使用自然樣式標簽。

CSS

介紹一下標準的CSS的盒子模型？低版本IE的盒子模型有什麼不同的？

  （1）有兩種， IE 盒子模型、W3C 盒子模型；
  （2）盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border)；
  （3）區  別： IE的content部分把 border 和 padding計算了進去;

CSS選擇符有哪些？哪些屬性可以繼承？

  *   1.id選擇器（ # myid）
  	2.類選擇器（.myclassname）
  	3.標簽選擇器（div, h1, p）
  	4.相鄰選擇器（h1 + p）
  	5.子選擇器（ul > li）
  	6.後代選擇器（li a）
  	7.通配符選擇器（ * ）
  	8.屬性選擇器（a[rel = "external"]）
  	9.偽類選擇器（a:hover, li:nth-child）

  *   可繼承的樣式： font-size font-family color, UL LI DL DD DT;

  *   不可繼承的樣式：border padding margin width height ;

CSS優先順序演算法如何計算？

  *   優先順序就近原則，同權重情況下樣式定義最近者為準;
  *   載入樣式以最後載入的定位為準;

  優先順序為:
  	同權重: 內聯樣式表（標簽內部）> 嵌入樣式表（當前文件中）> 外部樣式表（外部文件中）。
  	!important >  id > class > tag
  	important 比 內聯優先順序高

CSS3新增偽類有那些？

  	舉例：
  	p:first-of-type	選擇屬於其父元素的首個 <p> 元素的每個 <p> 元素。
  	p:last-of-type	選擇屬於其父元素的最後 <p> 元素的每個 <p> 元素。
      p:only-of-type	選擇屬於其父元素唯一的 <p> 元素的每個 <p> 元素。
  	p:only-child		選擇屬於其父元素的唯一子元素的每個 <p> 元素。
  	p:nth-child(2)	選擇屬於其父元素的第二個子元素的每個 <p> 元素。

  	:after			在元素之前添加內容,也可以用來做清除浮動。
  	:before			在元素之後添加內容
      :enabled  		
  	:disabled 		控製表單控制項的禁用狀態。
  	:checked        單選框或覆選框被選中。

如何居中div？

水平居中：給div設置一個寬度，然後添加margin:0 auto屬性
```
 div{
 	width:200px;
 	margin:0 auto;
  }
```

讓絕對定位的div居中

 div {
 	position: absolute;
 	width: 300px;
 	height: 300px;
 	margin: auto;
 	top: 0;
 	left: 0;
 	bottom: 0;
 	right: 0;
 	background-color: pink;	/* 方便看效果 */
 }

水平垂直居中一

 確定容器的寬高 寬500 高 300 的層
 設置層的外邊距

 div {
 	position: relative;		/* 相對定位或絕對定位均可 */
 	width:500px;
 	height:300px;
 	top: 50%;
 	left: 50%;
 	margin: -150px 0 0 -250px;     	/* 外邊距為自身寬高的一半 */
 	background-color: pink;	 	/* 方便看效果 */

  }

水平垂直居中二

 未知容器的寬高，利用 `transform` 屬性

 div {
 	position: absolute;		/* 相對定位或絕對定位均可 */
 	width:500px;
 	height:300px;
 	top: 50%;
 	left: 50%;
 	transform: translate(-50%, -50%);
 	background-color: pink;	 	/* 方便看效果 */

 }

水平垂直居中三

 利用 flex 佈局
 實際使用時應考慮相容性

 .container {
 	display: flex;
 	align-items: center; 		/* 垂直居中 */
 	justify-content: center;	/* 水平居中 */

 }
 .container div {
 	width: 100px;
 	height: 100px;
 	background-color: pink;		/* 方便看效果 */
 }

display有哪些值？說明他們的作用。

    block       	塊類型。預設寬度為父元素寬度，可設置寬高，換行顯示。
    none        	預設值。象行內元素類型一樣顯示。
    inline      	行內元素類型。預設寬度為內容寬度，不可設置寬高，同行顯示。
    inline-block  預設寬度為內容寬度，可以設置寬高，同行顯示。
    list-item   	象塊類型元素一樣顯示，並添加樣式列表標記。
    table       	此元素會作為塊級表格來顯示。
    inherit     	規定應該從父元素繼承 display 屬性的值。

position的值relative和absolute定位原點是？

    absolute
  	生成絕對定位的元素，相對於值不為 static的第一個父元素進行定位。
    fixed （老IE不支持）
  	生成絕對定位的元素，相對於瀏覽器視窗進行定位。
    relative
  	生成相對定位的元素，相對於其正常位置進行定位。
    static
  	預設值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right z-index 聲明）。
    inherit
  	規定從父元素繼承 position 屬性的值。

CSS3有哪些新特性？

    新增各種CSS選擇器	（: not(.input)：所有 class 不是“input”的節點）
    圓角		    （border-radius:8px）
    多列佈局	    （multi-column layout）
    陰影和反射	（Shadow\Reflect）
    文字特效		（text-shadow、）
    文字渲染		（Text-decoration）
    線性漸變		（gradient）
    旋轉		 	（transform）
    縮放,定位,傾斜,動畫,多背景
    例如:transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:

請解釋一下CSS3的Flexbox（彈性盒佈局模型）,以及適用場景？

   一個用於頁面佈局的全新CSS3功能，Flexbox可以把列表放在同一個方向（從上到下排列，從左到右），並讓列表能延伸到占用可用的空間。
   較為複雜的佈局還可以通過嵌套一個伸縮容器（flex container）來實現。
   採用Flex佈局的元素，稱為Flex容器（flex container），簡稱"容器"。
   它的所有子元素自動成為容器成員，稱為Flex項目（flex item），簡稱"項目"。
   常規佈局是基於塊和內聯流方向，而Flex佈局是基於flex-flow流可以很方便的用來做局中，能對不同屏幕大小自適應。
   在佈局上有了比以前更加靈活的空間。

   具體：http://www.w3cplus.com/css3/flexbox-basics.html

用純CSS創建一個三角形的原理是什麼？

  把上、左、右三條邊隱藏掉（顏色設為 transparent）
  #demo {
    width: 0;
    height: 0;
    border-width: 20px;
    border-style: solid;
    border-color: transparent transparent red transparent;
  }

一個滿屏品字佈局如何設計?

  簡單的方式：
  	上面的div寬100%，
  	下麵的兩個div分別寬50%，
  	然後用float或者inline使其不換行即可

css多列等高如何實現？

  利用padding-bottom|margin-bottom正負值相抵；
  設置父容器設置超出隱藏（overflow:hidden），這樣子父容器的高度就還是它裡面的列沒有設定padding-bottom時的高度，
  當它裡面的任 一列高度增加了，則父容器的高度被撐到裡面最高那列的高度，
  其他比這列矮的列會用它們的padding-bottom補償這部分高度差。

經常遇到的瀏覽器的相容性有哪些？原因，解決方法是什麼，常用hack的技巧？

  * png24位的圖片在iE6瀏覽器上出現背景，解決方案是做成PNG8.

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

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

    浮動ie產生的雙倍距離 #box{ float:left; width:10px; margin:0 0 0 100px;}

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

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

    首先，巧妙的使用“\9”這一標記，將IE游覽器從所有情況中分離出來。
    接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經獨立識別。

    css
        .bb{
            background-color:red;/*所有識別*/
  	      background-color:#00deff\9; /*IE6、7、8識別*/
  	      +background-color:#a200ff;/*IE6、7識別*/
  	      _background-color:#1e0bd1;/*IE6識別*/
        }


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

  *  IE下,even對象有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 {}

li與li之間有看不見的空白間隔是什麼原因引起的？有什麼解決辦法？

  行框的排列會受到中間空白（回車\空格）等的影響，因為空格也屬於字元,這些空白也會被應用樣式，占據空間，所以會有間隔，把字元大小設為0，就沒有空格了。

為什麼要初始化CSS樣式。

  - 因為瀏覽器的相容問題，不同瀏覽器對有些標簽的預設值是不同的，如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。

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

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

  淘寶的樣式初始化代碼：
  body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
  body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
  h1, h2, h3, h4, h5, h6{ font-size:100%; }
  address, cite, dfn, em, var { font-style:normal; }
  code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
  small{ font-size:12px; }
  ul, ol { list-style:none; }
  a { text-decoration:none; }
  a:hover { text-decoration:underline; }
  sup { vertical-align:text-top; }
  sub{ vertical-align:text-bottom; }
  legend { color:#000; }
  fieldset, img { border:0; }
  button, input, select, textarea { font-size:100%; }
  table { border-collapse:collapse; border-spacing:0; }

absolute的containing block(容器塊)計算方式跟正常流有什麼不同？

  無論屬於哪種，都要先找到其祖先元素中最近的 position 值不為 static 的元素，然後再判斷：
  1、若此元素為 inline 元素，則 containing block 為能夠包含這個元素生成的第一個和最後一個 inline box 的 padding box (除 margin, border 外的區域) 的最小矩形；
  2、否則,則由這個祖先元素的 padding box 構成。
  如果都找不到，則為 initial containing block。

  補充：
  1. static(預設的)/relative：簡單說就是它的父元素的內容框（即去掉padding的部分）
  2. absolute: 向上找最近的定位為absolute/relative的元素
  3. fixed: 它的containing block一律為根元素(html/body)，根元素也是initial containing block

CSS里的visibility屬性有個collapse屬性值是幹嘛用的？在不同瀏覽器下以後什麼區別？

對於普通元素visibility:collapse;會將元素完全隱藏,不占據頁面佈局空間,與display:none;表現相同. 如果目標元素為table,visibility:collapse;將table隱藏,但是會占據頁面佈局空間. 僅在Firefox下起作用,IE會顯示元素,Chrome會將元素隱藏,但是占據空間.
position跟display、margin collapse、overflow、float這些特性相互疊加後會怎麼樣？

如果元素的display為none,那麼元素不被渲染,position,float不起作用,如果元素擁有position:absolute;或者position:fixed;屬性那麼元素將為絕對定位,float不起作用.如果元素float屬性不是none,元素會脫離文檔流,根據float屬性值來顯示.有浮動,絕對定位,inline-block屬性的元素,margin不會和垂直方向上的其他元素margin摺疊.

對BFC規範(塊級格式化上下文：block formatting context)的理解？

  （W3C CSS 2.1 規範中的一個概念,它是一個獨立容器，決定了元素如何對其內容進行定位,以及與其他元素的關係和相互作用。）
   一個頁面是由很多個 Box 組成的,元素的類型和 display 屬性,決定了這個 Box 的類型。
   不同類型的 Box,會參與不同的 Formatting Context（決定如何渲染文檔的容器）,因此Box內的元素會以不同的方式渲染,也就是說BFC內部的元素和外部的元素不會互相影響。

css定義的權重

  以下是權重的規則：標簽的權重為1，class的權重為10，id的權重為100，以下例子是演示各種定義的權重值：

  /*權重為1*/
  div{
  }
  /*權重為10*/
  .class1{
  }
  /*權重為100*/
  #id1{
  }
  /*權重為100+1=101*/
  #id1 div{
  }
  /*權重為10+1=11*/
  .class1 div{
  }
  /*權重為10+10+1=21*/
  .class1 .class2 div{
  }

  如果權重相同，則最後定義的樣式會起作用，但是應該避免這種情況出現

請解釋一下為什麼需要清除浮動？清除浮動的方式

清除浮動是為了清除使用浮動元素產生的影響。浮動的元素，高度會塌陷，而高度的塌陷使我們頁面後面的佈局不能正常顯示。

  1、父級div定義height；
  2、父級div 也一起浮動；
  3、常規的使用一個class；
  	.clearfix:before, .clearfix:after {
  	    content: " ";
  	    display: table;
  	}
  	.clearfix:after {
  	    clear: both;
  	}
  	.clearfix {
  	    *zoom: 1;
  	}

  4、SASS編譯的時候，浮動元素的父級div定義偽類:after
  	&:after,&:before{
  	    content: " ";
          visibility: hidden;
          display: block;
          height: 0;
          clear: both;
  	}

  解析原理：
  1) display:block 使生成的元素以塊級元素顯示,占滿剩餘空間;
  2) height:0 避免生成內容破壞原有佈局的高度。
  3) visibility:hidden 使生成的內容不可見，並允許可能被生成內容蓋住的內容可以進行點擊和交互;
  4）通過 content:"."生成內容作為最後一個元素，至於content裡面是點還是其他都是可以的，例如oocss裡面就有經典的 content:".",有些版本可能content 裡面內容為空,一絲冰涼是不推薦這樣做的,firefox直到7.0 content:”" 仍然會產生額外的空隙；
  5）zoom：1 觸發IE hasLayout。

  通過分析發現，除了clear：both用來閉合浮動的，其他代碼無非都是為了隱藏掉content生成的內容，這也就是其他版本的閉合浮動為什麼會有font-size：0，line-height：0。

什麼是外邊距合併？

  外邊距合併指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。
  合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。
  w3school介紹網址： http://www.w3school.com.cn/css/css_margin_collapsing.asp

zoom:1的清除浮動原理?

  清除浮動，觸發hasLayout；
  Zoom屬性是IE瀏覽器的專有屬性，它可以設置或檢索對象的縮放比例。解決ie下比較奇葩的bug。
  譬如外邊距（margin）的重疊，浮動清除，觸發ie的haslayout屬性等。

  來龍去脈大概如下：
  當設置了zoom的值之後，所設置的元素就會就會擴大或者縮小，高度寬度就會重新計算了，這裡一旦改變zoom值時其實也會發生重新渲染，運用這個原理，也就解決了ie下子元素浮動時候父元素不隨著自動擴大的問題。

  Zoom屬是IE瀏覽器的專有屬性，火狐和老版本的webkit核心的瀏覽器都不支持這個屬性。然而，zoom現在已經被逐步標準化，出現在 CSS 3.0 規範草案中。

  目前非ie由於不支持這個屬性，它們又是通過什麼屬性來實現元素的縮放呢？
  可以通過css3裡面的動畫屬性scale進行縮放。

移動端的佈局用過媒體查詢嗎？

假設你現在正用一臺顯示設備來閱讀這篇文章，同時你也想把它投影到屏幕上，或者列印出來，而顯示設備、屏幕投影和列印等這些媒介都有自己的特點，CSS就是為文檔提供在不同媒介上展示的適配方法

當媒體查詢為真時，相關的樣式表或樣式規則會按照正常的級聯規被應用。當媒體查詢返回假，標簽上帶有媒體查詢的樣式表仍將被下載（只不過不會被應用）。

包含了一個媒體類型和至少一個使用寬度、高度和顏色等媒體屬性來限制樣式表範圍的表達式。 CSS3加入的媒體查詢使得無需修改內容便可以使樣式應用於某些特定的設備範圍。
<style> @media (min-width: 700px) and (orientation: landscape){ .sidebar { display: none; } } </style>

使用 CSS 預處理器嗎？喜歡那個？

  SASS (SASS、LESS沒有本質區別，只因為團隊前端都是用的SASS)

CSS優化、提高性能的方法有哪些？

  關鍵選擇器（key selector）。選擇器的最後面的部分為關鍵選擇器（即用來匹配目標元素的部分）；
  如果規則擁有 ID 選擇器作為其關鍵選擇器，則不要為規則增加標簽。過濾掉無關的規則（這樣樣式系統就不會浪費時間去匹配它們了）；
  提取項目的通用公有樣式，增強可復用性，按模塊編寫組件；增強項目的協同開發性、可維護性和可擴展性;
  使用預處理工具或構建工具（gulp對css進行語法檢查、自動補首碼、打包壓縮、自動優雅降級）；

瀏覽器是怎樣解析CSS選擇器的？

  樣式系統從關鍵選擇器開始匹配，然後左移查找規則選擇器的祖先元素。
  只要選擇器的子樹一直在工作，樣式系統就會持續左移，直到和規則匹配，或者是因為不匹配而放棄該規則。

在網頁中的應該使用奇數還是偶數的字體？為什麼呢？

margin和padding分別適合什麼場景使用？

  margin是用來隔開元素與元素的間距；padding是用來隔開元素與內容的間隔。
  margin用於佈局分開元素使元素與元素互不相干；
  padding用於元素與內容之間的間隔，讓內容（文字）與（包裹）元素之間有一段

抽離樣式模塊怎麼寫，說出思路，有無實踐經驗？[阿裡航旅的面試題]
元素豎向的百分比設定是相對於容器的高度嗎？
全屏滾動的原理是什麼？用到了CSS的那些屬性？
什麼是響應式設計？響應式設計的基本原理是什麼？如何相容低版本的IE？
視差滾動效果，如何給每頁做不同的動畫？（回到頂部，向下滑動要再次出現，和只出現一次分別怎麼做？）

::before 和 :after中雙冒號和單冒號有什麼區別？解釋一下這2個偽元素的作用。

  單冒號(:)用於CSS3偽類，雙冒號(::)用於CSS3偽元素。（偽元素由雙冒號和偽元素名稱組成）
  雙冒號是在當前規範中引入的，用於區分偽類和偽元素。不過瀏覽器需要同時支持舊的已經存在的偽元素寫法，
  比如:first-line、:first-letter、:before、:after等，
  而新的在CSS3中引入的偽元素則不允許再支持舊的單冒號的寫法。

  想讓插入的內容出現在其它內容前，使用::before，否者，使用::after；
  在代碼順序上，::after生成的內容也比::before生成的內容靠後。
  如果按堆棧視角，::after生成的內容會在::before生成的內容之上

如何修改chrome記住密碼後自動填充表單的黃色背景？

  input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background-color: rgb(250, 255, 189); /* #FAFFBD; */
    background-image: none;
    color: rgb(0, 0, 0);
  }

你對line-height是如何理解的？
設置元素浮動後，該元素的display值是多少？
```
  自動變成了 display:block
```

怎麼讓Chrome支持小於12px 的文字？

  1、用圖片：如果是內容固定不變情況下，使用將小於12px文字內容切出做圖片，這樣不影響相容也不影響美觀。
  2、使用12px及12px以上字體大小：為了相容各大主流瀏覽器，建議設計美工圖時候設置大於或等於12px的字體大小，如果是接單的這個時候就需要給客戶講解小於12px瀏覽器不相容等事宜。
  3、繼續使用小於12px字體大小樣式設置：如果不考慮chrome可以不用考慮相容，同時在設置小於12px對象設置-webkit-text-size-adjust:none，做到最大相容考慮。
  4、使用12px以上字體：為了相容、為了代碼更簡單 從新考慮權重下相容性。

讓頁面里的字體變清晰，變細用CSS怎麼做？
```
  -webkit-font-smoothing: antialiased;
```
font-style屬性可以讓它賦值為“oblique” oblique是什麼意思？
```
  傾斜的字體樣式
```

position:fixed;在android下無效怎麼處理？

  fixed的元素是相對整個頁面固定位置的，你在屏幕上滑動只是在移動這個所謂的viewport，
  原來的網頁還好好的在那，fixed的內容也沒有變過位置，
  所以說並不是iOS不支持fixed，只是fixed的元素不是相對手機屏幕固定的。
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>

如果需要手動寫動畫，你認為最小時間間隔是多久，為什麼？（阿裡）

  多數顯示器預設頻率是60Hz，即1秒刷新60次，所以理論上最小間隔為1/60＊1000ms ＝ 16.7ms

display:inline-block 什麼時候會顯示間隙？(攜程)

  移除空格、使用margin負值、使用font-size:0、letter-spacing、word-spacing

overflow: scroll時不能平滑滾動的問題怎麼處理？
有一個高度自適應的div，裡面有兩個div，一個高度100px，希望另一個填滿剩下的高度。
png、jpg、gif 這些圖片格式解釋一下，分別什麼時候用。有沒有瞭解過webp？

什麼是Cookie 隔離？（或者說：請求資源的時候不要讓它帶cookie怎麼做）

  如果靜態文件都放在主功能變數名稱下，那靜態文件請求的時候都帶有的cookie的數據提交給server的，非常浪費流量，
  所以不如隔離開。

  因為cookie有域的限制，因此不能跨域提交請求，故使用非主要功能變數名稱的時候，請求頭中就不會帶有cookie數據，
  這樣可以降低請求頭的大小，降低請求時間，從而達到降低整體請求延時的目的。

  同時這種方式不會將cookie傳入Web Server，也減少了Web Server對cookie的處理分析環節，
  提高了webserver的http請求的解析速度。

style標簽寫在body後與body前有什麼區別？

什麼是CSS 預處理器 / 後處理器？

  - 預處理器例如：LESS、Sass、Stylus，用來預編譯Sass或less，增強了css代碼的復用性，
    還有層級、mixin、變數、迴圈、函數等，具有很方便的UI組件模塊化開發能力，極大的提高工作效率。

  - 後處理器例如：PostCSS，通常被視為在完成的樣式表中根據CSS規範處理CSS，讓其更有效；目前最常做的
    是給CSS屬性添加瀏覽器私有首碼，實現跨瀏覽器相容性的問題。

JavaScript

介紹js的基本數據類型。

  Undefined、Null、Boolean、Number、String、
  ECMAScript 2015 新增:Symbol(創建後獨一無二且不可變的數據類型 )

介紹js有哪些內置對象？

 Object 是 JavaScript 中所有對象的父對象

 數據封裝類對象：Object、Array、Boolean、Number 和 String
 其他對象：Function、Arguments、Math、Date、RegExp、Error

 參考：http://www.ibm.com/developerworks/cn/web/wa-objectsinjs-v1b/index.html

說幾條寫JavaScript的基本規範？

 1.不要在同一行聲明多個變數。
 2.請使用 ===/!==來比較true/false或者數值
 3.使用對象字面量替代new Array這種形式
 4.不要使用全局函數。
 5.Switch語句必須帶有default分支
 6.函數不應該有時候有返回值，有時候沒有返回值。
 7.For迴圈必須使用大括弧
 8.If語句必須使用大括弧
 9.for-in迴圈中的變數 應該使用var關鍵字明確限定作用域，從而避免作用域污染。

JavaScript原型，原型鏈 ? 有什麼特點？

 每個對象都會在其內部初始化一個屬性，就是prototype(原型)，當我們訪問一個對象的屬性時，
 如果這個對象內部不存在這個屬性，那麼他就會去prototype里找這個屬性，這個prototype又會有自己的prototype，
 於是就這樣一直找下去，也就是我們平時所說的原型鏈的概念。
 關係：instance.constructor.prototype = instance.__proto__

 特點：
 JavaScript對象是通過引用來傳遞的，我們創建的每個新對象實體中並沒有一份屬於自己的原型副本。當我們修改原型時，與之相關的對象也會繼承這一改變。


  當我們需要一個屬性的時，Javascript引擎會先看當前對象中是否有這個屬性， 如果沒有的話，
  就會查找他的Prototype對象是否有這個屬性，如此遞推下去，一直檢索到 Object 內建對象。
 	function Func(){}
 	Func.prototype.name = "Sean";
 	Func.prototype.getInfo = function() {
 	  return this.name;
 	}
 	var person = new Func();//現在可以參考var person = Object.create(oldObject);
 	console.log(person.getInfo());//它擁有了Func的屬性和方法
 	//"Sean"
 	console.log(Func.prototype);
 	// Func { name="Sean", getInfo=function()}

JavaScript有幾種類型的值？，你能畫一下他們的記憶體圖嗎？

 棧：原始數據類型（Undefined，Null，Boolean，Number、String）
 堆：引用數據類型（對象、數組和函數）

 兩種類型的區別是：存儲位置不同；
 原始數據類型直接存儲在棧(stack)中的簡單數據段，占據空間小、大小固定，屬於被頻繁使用數據，所以放入棧中存儲；
 引用數據類型存儲在堆(heap)中的對象,占據空間大、大小不固定。如果存儲在棧中，將會影響程式運行的性能；引用數據類型在棧中存儲了指針，該指針指向堆中該實體的起始地址。當解釋器尋找引用值時，會首先檢索其在棧中的地址，取得地址後從堆中獲得實體

如何將字元串轉化為數字，例如'12.3b'?

  * parseFloat('12.3b');
  * 正則表達式，'12.3b'.match(/(\d)+(\.)?(\d)+/g)[0] * 1, 但是這個不太靠譜，提供一種思路而已。

如何將浮點數點左邊的數每三位添加一個逗號，如12000000.11轉化為『12,000,000.11』?

  function commafy(num){
  	return num && num
  		.toString()
  		.replace(/(\d)(?=(\d{3})+\.)/g, function($1, $2){
  			return $2 + ',';
  		});
  }

如何實現數組的隨機排序？方法一： ```javascript var arr = [1,2,3,4,5,6,7,8,9,10]; function randSort1(arr){ for(var i = 0,len = arr.length;i < len; i++ ){ var rand = parseInt(Math.random()*len); var temp = arr[rand]; arr[rand] = arr[i]; arr[i] = temp; } return arr; } console.log(randSort1(arr));

  ```
  方法二：
  ```javascript
  		var arr = [1,2,3,4,5,6,7,8,9,10];
  		function randSort2(arr){
  			var mixedArray = [];
  			while(arr.length > 0){
  				var randomIndex = parseInt(Math.random()*arr.length);
  				mixedArray.push(arr[randomIndex]);
  				arr.splice(randomIndex, 1);
  			}
  			return mixedArray;
  		}
  		console.log(randSort2(arr));

  ```
  方法三：
  ```javascript
  		var arr = [1,2,3,4,5,6,7,8,9,10];
  		arr.sort(function(){
  			return Math.random() - 0.5;
  		})
  		console.log(arr);
  ```

Javascript如何實現繼承？

 1、構造繼承
 2、原型繼承
 3、實例繼承
 4、拷貝繼承

 原型prototype機制或apply和call方法去實現較簡單，建議使用構造函數與原型混合方式。
 ```javascript
 		function Parent(){
         	this.name = 'wang';
 		}

 		function Child(){
 			this.age = 28;
 		}
 		Child.prototype = new Parent();//繼承了Parent，通過原型

 		var demo = new Child();
 		alert(demo.age);
 		alert(demo.name);//得到被繼承的屬性

 ```

JavaScript繼承的幾種實現方式？
- 參考：構造函數的繼承，非構造函數的繼承；

javascript創建對象的幾種方式？

 javascript創建對象簡單的說,無非就是使用內置對象或各種自定義對象，當然還可以用JSON；但寫法有很多種，也能混合使用。


 1、對象字面量的方式

 	person={firstname:"Mark",lastname:"Yun",age:25,eyecolor:"black"};

 2、用function來模擬無參的構造函數

 	function Person(){}
 	var person=new Person();//定義一個function，如果使用new"實例化",該function可以看作是一個Class
 	person.name="Mark";
 	person.age="25";
 	person.work=function(){
 	alert(person.name+" hello...");
 	}
 	person.work();

 3、用function來模擬參構造函數來實現（用this關鍵字定義構造的上下文屬性）

 	function Pet(name,age,hobby){
 	   this.name=name;//this作用域：當前對象
 	   this.age=age;
 	   this.hobby=hobby;
 	   this.eat=function(){
 	      alert("我叫"+this.name+",我喜歡"+this.hobby+",是個程式員");
 	   }
 	}
 	var maidou =new Pet("麥兜",25,"coding");//實例化、創建對象
 	maidou.eat();//調用eat方法


 4、用工廠方式來創建（內置對象）

 	 var wcDog =new Object();
 	 wcDog.name="旺財";
 	 wcDog.age=3;
 	 wcDog.work=function(){
 	   alert("我是"+wcDog.name+",汪汪汪......");
 	 }
 	 wcDog.work();


 5、用原型方式來創建

 	function Dog(){

 	 }
 	 Dog.prototype.name="旺財";
 	 Dog.prototype.eat=function(){
 	 alert(this.name+"是個吃貨");
 	 }
 	 var wangcai =new Dog();
 	 wangcai.eat();


 5、用混合方式來創建

 	function Car(name,price){
 	  this.name=name;
 	  this.price=price;
 	}
 	 Car.prototype.sell=function(){
 	   alert("我是"+this.name+"，我現在賣"+this.price+"萬元");
 	  }
 	var camry =new Car("凱美瑞",27);
 	camry.sell();

Javascript作用鏈域?

 全局函數無法查看局部函數的內部細節，但局部函數可以查看其上層的函數細節，直至全局細節。
 當需要從局部函數查找某一屬性或方法時，如果當前作用域沒有找到，就會上溯到上層作用域查找，
 直至全局函數，這種組織形式就是作用域鏈。

談談This對象的理解。
this總是指向函數的直接調用者（而非間接調用者）；
如果有new關鍵字，this指向new出來的那個對象；
在事件中，this指向觸發這個事件的對象，特殊的是，IE中的attachEvent中的this總是指向全局對象Window；

eval是做什麼的？

 它的功能是把對應的字元串解析成JS代碼並運行；
 應該避免使用eval，不安全，非常耗性能（2次，一次解析成js語句，一次執行）。
 由JSON字元串轉換為JSON對象的時候可以用eval，var obj =eval('('+ str +')');

什麼是window對象? 什麼是document對象?

 window對象是指瀏覽器打開的視窗。
 document對象是Documentd對象（HTML 文檔對象）的一個只讀引用，window對象的一個屬性。

null，undefined 的區別？

 null 		表示一個對象是“沒有值”的值，也就是值為“空”；
 undefined 	表示一個變數聲明瞭沒有初始化(賦值)；

 undefined不是一個有效的JSON，而null是；
 undefined的類型(typeof)是undefined；
 null的類型(typeof)是object；


 Javascript將未賦值的變數預設值設為undefined；
 Javascript從來不會將變數設為null。它是用來讓程式員表明某個用var聲明的變數時沒有值的。

 typeof undefined
 	//"undefined"
 	undefined :是一個表示"無"的原始值或者說表示"缺少值"，就是此處應該有一個值，但是還沒有定義。當嘗試讀取時會返回 undefined；
 	例如變數被聲明瞭，但沒有賦值時，就等於undefined

 typeof null
 	//"object"
 	null : 是一個對象(空對象, 沒有任何屬性和方法)；
 	例如作為函數的參數，表示該函數的參數不是對象；

 註意：
 	在驗證null時，一定要使用　=== ，因為 == 無法分別 null 和　undefined
 	null == undefined // true
 	null === undefined // false

 再來一個例子：

 	null
 	Q：有張三這個人麽？
 	A：有！
 	Q：張三有房子麽？
 	A：沒有！

 	undefined
 	Q：有張三這個人麽？
 	A：有！
 	Q: 張三有多少歲？
 	A: 不知道（沒有被告訴）

參考閱讀：undefined與null的區別

寫一個通用的事件偵聽器函數。

 	// event(事件)工具集，來源：github.com/markyun
 	markyun.Event = {
 		// 頁面載入完成後
 		readyEvent : function(fn) {
 			if (fn==null) {
 				fn=document;
 			}
 			var oldonload = window.onload;
 			if (typeof window.onload != 'function') {
 				window.onload = fn;
 			} else {
 				window.onload = function() {
 					oldonload();
 					fn();
 				};
 			}
 		},
 		// 視能力分別使用dom0||dom2||IE方式 來綁定事件
 		// 參數： 操作的元素,事件名稱 ,事件處理程式
 		addEvent : function(element, type, handler) {
 			if (element.addEventListener) {
 				//事件類型、需要執行的函數、是否捕捉
 				element.addEventListener(type, handler, false);
 			} else if (element.attachEvent) {
 				element.attachEvent('on' + type, function() {
 					handler.call(element);
 				});
 			} else {
 				element['on' + type] = handler;
 			}
 		},
 		// 移除事件
 		removeEvent : function(element, type, handler) {
 			if (element.removeEventListener) {
 				element.removeEventListener(type, handler, false);
 			} else if (element.datachEvent) {
 				element.detachEvent('on' + type, handler);
 			} else {
 				element['on' + type] = null;
 			}
 		},
 		// 阻止事件 (主要是事件冒泡，因為IE不支持事件捕獲)
 		stopPropagation : function(ev) {
 			if (ev.stopPropagation) {
 				ev.stopPropagation();
 			} else {
 				ev.cancelBubble = true;
 			}
 		},
 		// 取消事件的預設行為
 		preventDefault : function(event) {
 			if (event.preventDefault) {
 				event.preventDefault();
 			} else {
 				event.returnValue = false;
 			}
 		},
 		// 獲取事件目標
 		getTarget : function(event) {
 			return event.target || event.srcElement;
 		},
 		// 獲取event對象的引用，取到事件的所有信息，確保隨時能使用event；
 		getEvent : function(e) {
 			var ev = e || window.event;
 			if (!ev) {
 				var c = this.getEvent.caller;
 				while (c) {
 					ev = c.arguments[0];
 					if (ev && Event == ev.constructor) {
 						break;
 					}
 					c = c.caller;
 				}
 			}
 			return ev;
 		}
 	};

["1", "2", "3"].map(parseInt) 答案是多少？

 parseInt() 函數能解析一個字元串，並返回一個整數，需要兩個參數 (val, radix)，
 其中 radix 表示要解析的數字的基數。【該值介於 2 ~ 36 之間，並且字元串中的數字不能大於radix才能正確返回數字結果值】;
 但此處 map 傳了 3 個 (element, index, array),我們重寫parseInt函數測試一下是否符合上面的規則。

 function parseInt(str, radix) {
     return str+'-'+radix;
 };
 var a=["1", "2", "3"];
 a.map(parseInt);  // ["1-0", "2-1", "3-2"] 不能大於radix

 因為二進位裡面，沒有數字3,導致出現超範圍的radix賦值和不合法的進位解析，才會返回NaN
 所以["1", "2", "3"].map(parseInt) 答案也就是：[1, NaN, NaN]

 詳細解析：http://blog.csdn.net/justjavac/article/details/19473199

事件是？IE與火狐的事件機制有什麼區別？如何阻止冒泡？

  1. 我們在網頁中的某個操作（有的操作對應多個事件）。例如：當我們點擊一個按鈕就會產生一個事件。是可以被 JavaScript 偵測到的行為。
  2. 事件處理機制：IE是事件冒泡、Firefox同時支持兩種事件模型，也就是：捕獲型事件和冒泡型事件；
  3. ev.stopPropagation();（舊ie的方法 ev.cancelBubble = true;）

什麼是閉包（closure），為什麼要用它？

 閉包是指有權訪問另一個函數作用域中變數的函數，創建閉包的最常見的方式就是在一個函數內創建另一個函數，通過另一個函數訪問這個函數的局部變數,利用閉包可以突破作用鏈域，將函數內部的變數和方法傳遞到外部。

 閉包的特性：

 1.函數內再嵌套函數
 2.內部函數可以引用外層的參數和變數
 3.參數和變數不會被垃圾回收機制回收

 //li節點的onclick事件都能正確的彈出當前被點擊的li索引
  <ul id="testUL">
     <li> index = 0</li>
     <li> index = 1</li>
     <li> index = 2</li>
     <li> index = 3</li>
 </ul>
 <script type="text/javascript">
   	var nodes = document.getElementsByTagName("li");
 	for(i = 0;i<nodes.length;i+= 1){
 	    nodes[i].onclick = (function(i){
 	              return function() {
 	                 console.log(i);
 	              } //不用閉包的話，值每次都是4
 	            })(i);
 	}
 </script>



 執行say667()後,say667()閉包內部變數會存在,而閉包內部函數的內部變數不會存在
 使得Javascript的垃圾回收機制GC不會收回say667()所占用的資源
 因為say667()的內部函數的執行需要依賴say667()中的變數
 這是對閉包作用的非常直白的描述

   function say667() {
 	// Local variable that ends up within closure
 	var num = 666;
 	var sayAlert = function() {
 		alert(num);
 	}
 	num++;
 	return sayAlert;
 }

  var sayAlert = say667();
  sayAlert()//執行結果應該彈出的667

javascript 代碼中的"use strict";是什麼意思 ? 使用它區別是什麼？

 use strict是一種ECMAscript 5 添加的（嚴格）運行模式,這種模式使得 Javascript 在更嚴格的條件下運行,

 使JS編碼更加規範化的模式,消除Javascript語法的一些不合理、不嚴謹之處，減少一些怪異行為。
 預設支持的糟糕特性都會被禁用，比如不能用with，也不能在意外的情況下給全局變數賦值;
 全局變數的顯示聲明,函數必須聲明在頂層，不允許在非函數代碼塊內聲明函數,arguments.callee也不允許使用；
 消除代碼運行的一些不安全之處，保證代碼運行的安全,限制函數中的arguments修改，嚴格模式下的eval函數的行為和非嚴格模式的也不相同;

 提高編譯器效率，增加運行速度；
 為未來新版本的Javascript標準化做鋪墊。

如何判斷一個對象是否屬於某個類？

   使用instanceof （待完善）
    if(a instanceof Person){
        alert('yes');
    }

new操作符具體幹了什麼呢?

 	 1、創建一個空對象，並且 this 變數引用該對象，同時還繼承了該函數的原型。
   	 2、屬性和方法被加入到 this 引用的對象中。
 	 3、新創建的對象由 this 所引用，並且最後隱式的返回 this 。

 var obj  = {};
 obj.__proto__ = Base.prototype;
 Base.call(obj);

用原生JavaScript的實現過什麼功能嗎？

Javascript中，有一個函數，執行時對象查找時，永遠不會去查找原型，這個函數是？

 hasOwnProperty

 javaScript中hasOwnProperty函數方法是返回一個布爾值，指出一個對象是否具有指定名稱的屬性。此方法無法檢查該對象的原型鏈中是否具有該屬性；該屬性必須是對象本身的一個成員。
 使用方法：
 object.hasOwnProperty(proName)
 其中參數object是必選項。一個對象的實例。
 proName是必選項。一個屬性名稱的字元串值。

 如果 object 具有指定名稱的屬性，那麼JavaScript中hasOwnProperty函數方法返回 true，反之則返回 false。

JSON 的瞭解？

 JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。
 它是基於JavaScript的一個子集。數據格式簡單, 易於讀寫, 占用帶寬小
 如：{"age":"12", "name":"back"}

 JSON字元串轉換為JSON對象:
 var obj =eval('('+ str +')');
 var obj = str.parseJSON();
 var obj = JSON.parse(str);

 JSON對象轉換為JSON字元串：
 var last=obj.toJSONString();
 var last=JSON.stringify(obj);

[].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)}) 能解釋一下這段代碼的意思嗎？

js延遲載入的方式有哪些？

 defer和async、動態創建DOM方式（用得最多）、按需非同步載入js

Ajax 是什麼? 如何創建一個Ajax？

 ajax的全稱：Asynchronous Javascript And XML。
 非同步傳輸+js+xml。
 所謂非同步，在這裡簡單地解釋就是：向伺服器發送請求的時候，我們不必等待結果，而是可以同時做其他的事情，等到有了結果它自己會根據設定進行後續操作，與此同時，頁面是不會發生整頁刷新的，提高了用戶體驗。

 (1)創建XMLHttpRequest對象,也就是創建一個非同步調用對象
 (2)創建一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證信息
 (3)設置響應HTTP請求狀態變化的函數
 (4)發送HTTP請求
 (5)獲取非同步調用返回的數