雖然個人認為有些知識不是必須記憶的，需要的時候可以查閱筆記，但是對於得到面試的機會還是很重要的。 

HTML&CSS

1、清除浮動的幾種方式，各自的優缺點

清除浮動：使父元素圍住浮動的子元素，避免對後續元素造成影響。

（1）給父元素設定overflow:hidden;或float:left;或position:absolute;或position:relative;。觸發塊級格式化上下文（BFC），從正常文件流脫離，父元素本身實現獨立佈局，圍住其中的浮動元素。但專門這樣設定，可能會改變佈局，對於後三者，使block變為inline-block，父元素寬度變化。

（2）在子元素後面新增空的block元素。添加了額外的元素，且block元素帶有margin等。

（3）在父元素上加clearfix類名，在父元素的最後加塊級元素.（偽元素選擇器），通過clear:both使父元素括住浮動的元素來清除float的影響，使.不可見。常用這種方式，Bootstrap支援clearfix類名。

<style>
  .clearfix::after{content:".";display:block;clear:both;height:0;visibility:hidden;} 
  .clearfix{zoom:1;} /*IE低版本不支援after*/ 
  div{background-color:red;}
  #p1{float:left;background-color:yellow;}
  #p2{float:right;background-color:green;}
</style>

<div class="clearfix">
  <p id="p1">p1</p> 
  <p id="p2">p2</p> 
  <!-- <p style="clear:both"></p> 新增空的p元素，使div可以圍住p1p2，不推薦-->
</div>
 

2、塊級元素水平垂直居中的方法

<style>
  .parent{background:#ddd;height:200px;width:300px;}
  .child{background:#666;color:#fff;font:30px/2 'microsoft yahei';}
</style>
<div class="parent">
  <div class="child">DEMO</div>
</div>

父元素和子元素的大小不確定。

（1）table-cell+inline-block

相容IE6,7需要把結構換為<table>，通過display:inline; zoom:1;模擬inline-block。

.parent{display:table-cell; text-align:center; vertical-align:middle;}
.child{display:inline-block;}

（2） relative+absolute+transform

絕對定位脫離文件流，不會對其它元素產生影響。transform是CSS3新增內容，對IE6,7,8可能沒法相容，在高版本瀏覽器需要加字首。

.parent{position:relative;}
.child{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}

（3）flex

IE6,7,8可能沒法相容flex。

.parent{display:flex; justify-content:center; align-items:center;}

如果子元素大小確定。

.parent{position:relative;}
.child{
  width:100px; height:100px;
  position:absolute; top:0; right:0; bottom:0; left:0; margin:auto;
}

3、CSS選擇器有哪些？優先順序如何計算

普通選擇器：萬用字元選擇器*、標籤選擇器、id選擇器#、類選擇器.、屬性選擇器[]、偽類選擇器:

偽元素選擇器::

組合選擇器：後代選擇器 、子選擇器、兄弟選擇器+、只要前面有某種元素~

優先順序：將權重相加。a=行內樣式style，1000；b=id選擇器，100；c=類、偽類和屬性選擇器，10；d=標籤選擇器和偽元素選擇器，1。相同屬性優先順序高覆蓋低、後面覆蓋前面，不同屬性合併。

4、px、em和rem的區別

px，畫素，相對於顯示器螢幕解析度而言；

em，相對長度單位，相對於當前物件內文字的字型大小，若字型大小未顯式設定，則相對於瀏覽器預設的字型大小；

rem，相對長度單位，相對於html根元素的字型大小。

5、display:none和visibility:hidden的區別

display:none設定元素不顯示，是徹底消失，不在文件流中佔位，瀏覽器也不會解析該元素。visibility:hidden是視覺上消失，可理解為透明度為0的效果，在文件流中佔位，瀏覽器會解析該元素。

使用visibility:hidden比display:none效能上要好。display:none切換顯示時，頁面產生迴流reflow（頁面中的部分元素需要改變規模尺寸、佈局、顯示隱藏等，頁面重新構建）。而visibility:hidden切換是否顯示時則不會引起迴流，只是元素的外觀被改變，且在沒有改變佈局的情況下發生。

6、用一個div寫出三條橫線的小圖示

div{
  height:5px;
  width:30px;
  background-color:#DD575C;
  background-clip:content-box;
  padding-top:5px;
  padding-bottom:5px;
  border-top:#DD575C solid 5px;
  border-bottom:#DD575C solid 5px;
}

7、盒模型

在網頁中，一個元素佔有空間的大小由幾個部分構成，其中包括元素的內容（content）、內邊距（padding）、邊框（border），外邊距（margin）四個部分。

標準盒子模型 ＝ margin + border + padding + content （content =  width | height）

IE盒子模型 ＝ margin + content （content = border + padding + width | height）

8、優雅降級和漸進增強

優雅降級（graceful degradation）：一開始就構建完整的功能，然後再針對低版本瀏覽器進行相容。

    從複雜的現狀開始，試圖減少使用者體驗的供給。

漸進增強（progressive enhancement）：針對低版本瀏覽器進行構建頁面，保證最基本的功能，然後再針對高階瀏覽器進行效果、互動等改進，追加功能達到更好的使用者體驗。

    從一個非常基礎的，能夠起作用的版本開始，並不斷擴充，以適應未來環境的需要。

9、sprite精靈圖

把設計稿上的小圖示拼合到同一張圖片中，減少網路請求，提升網頁載入速度。

①排列常用橫向排列和縱向排列。 ②圖片之間必須保留孔隙，小圖示20畫素。如果更改按鈕大小，CSS裡背景圖位置屬性不須改變；容錯，如果CSS設定錯誤，不會導致下面圖片露出來。③合併原則：同屬於一個模組、大小相近、色彩相近。只本頁用到的圖片合併、集中使用，有狀態的圖示合併。④IE6不支援PNG24半透明，存兩份：高階瀏覽器PNG24 sprite.png、IE6 PNG-8 sprite_ie.png。

background-image:url("/images/x.png");
background-repeat:no-repeat;
background-position:20px 60px;
background-size:10px 10px;

10、HTML5

表現頁面中的章節結構：<header><footer><nav><aside><article><section>

嵌入資源：<video><audio><canvas><svg>

新的<input>型別：email、url、number、tel、search、range、color、date

新的表單元素（datalist、keygen、output）和屬性

getCurrentPosition()、web儲存（localStorage、sessionStorage）、拖放

11、CSS3

選擇器：屬性選擇器、偽類選擇器

盒模型：box-shadow、box-shadow、box-sizing

邊框：border-radius、border-image

背景：background-image、background-size、background-origin、background-clip、漸變

文字特效：text-shadow、text-overflow、word-wrap、word-break、字型@font-face

2D/3D轉換：transform、transform-origin、transform-style、perspective、perspective-origin、backface-visibility

過渡和動畫：transition、animation、@keyframes

多列布局：column-count、column-width、column-fill、column-gap、column-rule、column-span

使用者介面：resize、outline-offset

彈性盒子：flex

12、<img>的alt和title

alt：描述圖片含義。地址寫錯或網路狀況不好，無法檢視影象時，顯示該說明。可用於螢幕閱讀軟體和搜尋引擎。

title：游標懸浮在影象上時以提示的方式顯示該特性內容。

13、label、單選框、單選按鈕的應用場景

 

14、href和src的區別

href標識超文字引用，在當前元素和引用資源之間建立聯絡。<link><a>。當瀏覽器解析到css檔案時會下載，但不會停止對當前文件的處理。

src引用資源，指向外部資源的位置，將外部資源下載並替換當前元素。用在<img><script><iframe>。當瀏覽器解析到含src的標籤時，會暫停其它資源的下載和處理，直至將該資源載入、編譯、執行完畢，將該元素所指向的資源巢狀至當前標籤內。

15、盒子內陰影和外陰影

box-shadow: inset? 水平偏移 垂直偏移 模糊半徑? 陰影大小? 顏色?（？表示可選；水平、垂直偏移可正可負；顏色預設為文字顏色；這些引數可有多組，用,隔開）

外陰影box-shadow:3px 3px 5px 2px;      內陰影box-shadow:inset 0 0 5px red;

Javascript

1、var變數宣告

變數宣告語句會被“提前”至指令碼或函式的頂部，但初始化的操作還在原來var語句的位置執行，在宣告語句之前變數的值是undefined。

<script>
  var a=100;
  function test(){
    alert(a); // undefined
    var a=10;
    alert(a); // 10
  }
  test();
</script>

(function() {
  var a=b=5;
})();
console.log(b); // 5
console.log(a); // Uncaught ReferenceError: a is not defined

2、閉包

<script>
  for(var i=0;i<6;i++){
    setTimeout(function(){
      console.log(i); // 列印6個6
    },1000);      
  }
</script>

3、函式

var m=1; 
function add(n){ 
  return n=n+1; 
} 
y=add(m); // 4
function add(n) { 
  return n=n+3; 
} 
z=add(m); // 4

3、非同步載入JS的方式

使用defer屬性讓指令碼在文件完全呈現之後再順序執行，async屬性同樣讓指令碼立即下載延遲執行，但不保證順序。

 

垃圾回收機制和記憶體管理

js具有自動垃圾回收機制，找出不再使用的變數，垃圾收集器按一定時間間隔（影響效能）釋放其佔用的記憶體。“標記清除”是目前主流的垃圾回收演算法，給當前不使用的值加上標記，再回收記憶體。另一種演算法是“引用計數”，跟蹤記錄所有值被引用的次數，當代碼中存在迴圈引用現象時會導致問題。及時解除不再使用的全域性物件、全域性物件屬性及迴圈引用變數的引用，確保有效回收記憶體。

 

判斷一個字串中出現次數最多的字元，統計這個次數

判斷一句話中出現次數最多的單詞

編寫一個方法 去掉一個數組的重複元素

jQuery

1、jQuery事件委託方法bind、live、delegate、on之間的區別

 

 

2、JavaScript window.onload事件和jQuery ready函式的不同

 

工程相關

 

 

2、你經常遇到的bug解決方法

 

3、如何進行網站效能優化

 

sessionStorage、localStorage和cookie之間的區別

HTML5 提供了兩種在客戶端儲存資料的新方法：

• localStorage - 沒有時間限制的資料儲存
• sessionStorage - 針對一個 session 的資料儲存

之前，這些都是由 cookie 完成的。但是 cookie 不適合大量資料的儲存，因為它們由每個對伺服器的請求來傳遞，這使得 cookie 速度很慢而且效率也不高。

在 HTML5 中，資料不是由每個伺服器請求傳遞的，而是隻有在請求時使用資料。它使在不影響網站效能的情況下儲存大量資料成為可能。

對於不同的網站，資料儲存於不同的區域，並且一個網站只能訪問其自身的資料。

HTML5 使用 JavaScript 來儲存和訪問資料。