雖然個人認爲有些知識不是必須記憶的，需要的時候可以查閱筆記，但是對於得到面試的機會還是很重要的。
HTML&CSS
1、清除浮動的幾種方式，各自的優缺點
清除浮動：使父元素圍住浮動的子元素，避免對後續元素造成影響。
（1）給父元素設置overflow:hidden;或float:left;或position:absolute;或position:relative;。觸發塊級格式化上下文（BFC），從正常文檔流脫離，父元素本身實現獨立佈局，圍住其中的浮動元素。但專門這樣設置，可能會改變佈局，對於後三者，使block變爲inline-block，父元素寬度變化。
適用於父元素也需要浮動。
（2）在子元素後面添加空的block元素，並設置其樣式爲clear:both。添加了額外的元素，且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選擇器有哪些？優先級如何計算
（1）普通選擇器：通配符選擇器*、標籤選擇器、id選擇器#、類選擇器.、屬性選擇器[]、僞類選擇器:
（2）僞元素選擇器::
（3）組合選擇器：後代選擇器 、子選擇器、兄弟選擇器+、只要前面有某種元素~
優先級：將權重相加。a=行內樣式style，1000；b=id選擇器，100；c=類、僞類和屬性選擇器，10；d=標籤選擇器和僞元素選擇器，1。相同屬性優先級高覆蓋低、後面覆蓋前面，不同屬性合併。
超鏈元素僞類的設置順序:link :visited :hover :active
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、用一個div實現倒三角![]()
div{
width:0;
border-top:10px solid #DD575C;
border-left:5.77px solid transparent;
border-right:5.77px solid transparent;
}
其它方法僅供參考。ASCII碼31是倒三角。
/* 正方形旋轉加截取 */
.parentDiv {
height:50px;
overflow:hidden;
}
.triangleDiv {
position: relative;
height:70.7px;
width:70.7px;
top:-35.4px;
left:19.6px;
background-color:#DD575C;
transform:rotate(45deg);
}
8、盒模型
在網頁中，一個元素佔有空間的大小由幾個部分構成，其中包括元素的內容（content）、內邊距（padding）、邊框（border），外邊距（margin）四個部分。
標準盒子模型 ＝ margin + border + padding + content （content = width | height）
IE盒子模型 ＝ margin + content （content = border + padding + width | height）
box-sizing:content-box|border-box 切換標準模型和IE模型
9、position的absolute和fixed的共同點與不同點
共同點：脫離文檔流，文檔流中沒有它的空間，未設置偏移時在原位置。默認寬度爲內容寬度。
absolute：絕對定位。參照物爲第一個定位元素（非static）/根元素html（與瀏覽器窗口同等大小的首屏區域）。元素隨頁面的滾動而滾動。
fixed：固定定位。參照物是視窗。不隨頁面的滾動而滾動。
10、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;
11、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）、拖放
12、CSS3
選擇器：屬性選擇器、僞類選擇器
盒模型：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
13、<img>的alt和title
alt：描述圖片含義。地址寫錯或網絡狀況不好，無法查看圖像時，顯示該說明。可用於屏幕閱讀軟件和搜索引擎。
title：光標懸浮在圖像上時以提示的方式顯示該特性內容。
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;
16、塊級格式化上下文（BFC）
塊級格式化上下文（BFC，Block formatting context），是一個獨立的渲染區域，是佈局過程中生成塊級盒子的區域，也是浮動元素與其他元素的交互限定區域。下列方式會創建塊級格式化上下文：
根元素
浮動元素，即float不爲none
絕對定位元素，即position爲absolute或fixed
display爲inline-block, table-cell, table-caption, flex, inline-flex
overflow不爲visible（hidden, scroll, auto）
17、input輸入類型並簡述其用途
text：默認，單行文本框，默認寬度爲20字符。
radio：單選按鈕。
checkbox：複選框。
file：輸入字段和“瀏覽”按鈕，供文件上傳。
button：可點擊按鈕。
reset：重置按鈕。
submit：提交按鈕。
image：圖像形式的提交按鈕。
password：密碼字段，該字段中字符被掩碼。
hidden：隱藏的輸入字段。
email：email地址。
tel：電話號碼。
url：url地址。
number：數值。
range：滑動條，包含一定範圍內的數值。
color：選擇顏色。
Date pickers(date, month, week, time, datetime, datetime-local)。
search：搜索字段。
18、Cookie、sessionStorage和localStorage的區別
Cookie是客戶端的會話跟蹤技術，用來記錄信息確定用戶身份。通過document.cookie可以獲取或設置Cookie值。
Cookie由”; ”隔開的鍵值對構成，作用是將網頁中的數據保存到瀏覽器中。Cookie必須從服務器訪問，直接打開html文件則設置Cookie無效。
Cookie有個數（20~50）和大小（4KB左右）的限制。默認情況下，Cookie的生命週期是一次會話，如果通過expires設置了過期時間，過期立即刪除保存的數據。Cookie由每個對服務器的請求來傳遞，使得Cookie速度很慢且效率也不高。安全性問題，明文傳遞。
WebStorage克服了Cookie的一些限制，有兩種API：localStorage（本地存儲，沒有時間限制）和sessionStorage（會話存儲，在瀏覽器關閉後消失）。通過setItem(key, value)、getItem(key)、removeItem(key)、clear()操作數據。要訪問同一個WebStorage對象，頁面必須來自同一個域名（子域名無效），使用同一種協議，在同一個端口上。
WebStorage只能存儲字符串類型，可使用JSON對象的stringify和parse來處理。保存在客戶端，不與服務器進行交互通信。
WebStorage存儲大小一般是5MB。不會傳送到服務器，存儲在本地的數據可以直接獲取，節省了網絡流量，且速度更快。安全性相對Cookie較高。
19、響應式設計的基本技巧和好處
響應式設計以媒體查詢爲基礎，通過統一的設計和代碼實現讓一套Web系統能適配所有可能的終端。不必去爲不同設備定製不同的網站，開發成本降低；資源冗餘，即有些信息被加載，但是不顯示。
（1）佈局技巧及meta標籤
丟棄：無關緊要的div、內聯元素（inline）、少用js或flash、沒用的絕對定位和浮動樣式、不使用100%設置。
使用：HTML5 Doctype和相關指南、重置樣式reset.css、一個簡單的有語義的核心佈局、給重要的網頁元素使用簡單的技巧（如導航菜單）。
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
（2）媒體查詢Medial Queries：根據屏幕大小展示適配的樣式。
（3）字體設置：單位使用rem，相對於根元素的字體大小。
（4）寬度：使用百分比且box-sizing:border-box;，或flex佈局。
（5）圖片：將圖片的最大寬度設置爲100%，背景圖片大小設置爲contain。根據不同屏幕展示不同大小的圖片，將圖片地址保存至data-屬性中。使用精靈圖
img{max-width:100%;height:auto;}
a{
background-image:url('logo.png');
background-repeat:no-repeat;
background-size:contain;
}
20、優雅降級和漸進增強
優雅降級（graceful degradation）：一開始就構建完整的功能，然後再針對低版本瀏覽器進行兼容。
從複雜的現狀開始，試圖減少用戶體驗的供給。
漸進增強（progressive enhancement）：針對低版本瀏覽器進行構建頁面，保證最基本的功能，然後再針對高級瀏覽器進行效果、交互等改進，追加功能達到更好的用戶體驗。
從一個非常基礎的，能夠起作用的版本開始，並不斷擴充，以適應未來環境的需要。
21、label、單選框、單選按鈕的應用場景
在scss中，使用@mixin命令
@mixin left{float:left;margin-left:10px;} 如何調用@mixin
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、操作符
使用加法操作符+時，如果其中一個操作數是字符串，則把另一個操作數也轉換爲字符串，並將兩字符串拼接。
var foo=10+'20'; // '1020'
x||y如果x表達式運行結果轉換爲Boolean值爲false，則返回表達式y的運行結果
(window.foo||(window.foo='bar'));
console.log(window.foo); // 'bar'
指針和賦值運算符的執行順序
var foo={n:1};
var bar=foo; // {n: 1}
foo.x=foo={n:2};
foo.x // undefined
foo // {n: 2}
bar // {n: 1, x: {n: 2}}
3、==和===的區別
===判斷左右兩邊對象或值是否類型相同且值相等。==判斷操作符兩邊對象或值是否相等，類型不同時，使用Number()轉換。例外規則，null==undefined，null/undefined進行==運算時不進行隱式類型轉換。通常把值轉爲Boolean值，進行條件判斷。
[1]==[1] false
var a="123";
var b="123";
var c="4";
var oa=new String("123");
var ob=new String("123"); var oc=oa; a===oa; //false，a爲值類型，oa爲對象類型 oa===ob; //false，不是同一個引用 oa===oc; //true，同一個引用 a===b; //true，值相等，且都是值類型 a===c; //false "99"==99; //true new String("99")==99; //true false=="0"; //true 0==null; //false "undefined"==undefined; //false
4、js各類型在轉換爲Boolean時的規則
5、數值
Number()函數，用於任何數據類型。對於字符串向數值型轉換，數字、浮點數、十六進制數->十進制數，前導0被忽略；””->0；除此之外（包含非數字等）轉換爲NaN。
Number(undefined) // NaN
Number(null) // 0
Number(false) // 0
Number('11') // 11
Number('11.2') // 11.2
Number('011') // 11
Number('0x13') // 19
Number('11a') // NaN
parseInt()，忽略空格，找到第一個非空格字符，直到遇到無效字符。第二個參數爲轉換進制。前導0被忽略。
parseFloat()，前導0被忽略，只解析十進制。如果沒有小數點或小數點後都是0則返回整數。
parseInt('10/01') // 10
parseInt('011') // 11
parseInt('x08') // NaN
parseInt('0x08') // 8
parseInt('11.12a') // 11
parseFloat('11.12a') // 11.12
4、字符串
字符串replace查找字符串替換成目標字符。
第一個參數是RegExp對象或字符串，第二個參數是字符串或函數。要想替換所有字符串，提供正則表達式，指定g標誌，否則只替換第一個滿足要求的字符串。
split(separator,howmany)方法，按分割符將字符串分割成字符串數組。
第一個參數分隔符是字符串或RegExp對象，第二個參數用於指定數組大小，返回數組不會超過既定大小。
"I have a cat".split("").reverse().join("-") // 't-a-c- -a- -e-v-a-h- -I'
5、正則表達式
\d：數字[0-9] \D：[^0-9]
\s：空白字符[\t\n\x0B\f\r] \S
\w：單詞字符[a-zA-Z_0-9] \W
^ 以...開始 $ 以...結束
*：0到多
+：1到多
?：0或1
{n}：匹配確定的n次
{n,}：至少匹配n次
{n,m}：最少匹配n次且最多匹配m次
var reg=/^w+[^d]+$/;
console.log(reg.test('ww_32r')); // true
console.log(reg.test('123_dskr')); // false
console.log(reg.test('w7_d2')); // false
6、比較typeof和instanceof
（1）typeof運算符 typeof 變量名; //返回字符串 可以識別標準類型（Null除外），不能識別具體的對象類型（Function除外）。 （2）instanceof 變量名 instanceof 類型; 判別內置對象類型、自定義對象類型，不能判別標準類型。給定引用類型的實例則返回true，檢測基本類型值返回false。
7、包裝類類型識別
包裝類Boolean、Number、String。所有基本包裝類型的對象（new創建）都會被轉換爲布爾值true，typeof均得到object。
var strObj=new String('abc');
console.log(strObj instanceof String); // true
console.log(typeof strObj=='string'); // false
8、對象的深克隆
function deepClone(obj){}
9、數組
數組的sort()，默認按升序排列，返回排序後的數組。 sort()方法調用每個數組項的toString()方法，比較得到的字符串，即使是數值。sort()方法可以接收一個比較函數作爲參數，指定排序方法。比較函數接收兩個參數，如果第一個參數位於第二個參數之前則返回一個負數，兩個參數相等則返回0，如果第一個參數應該位於第二個參數之後則返回一個正數。
colors.slice(1,4); 截取，取1-3，返回新數組 返回從起始位置到結束位置-1的項；只有一個參數，則至數組末尾；有負數，則與length相加；結束位置小於起始位置則返回空數組。 splice(start, deleteCount[, item1[, item2[, …]]])，從數組中刪除或添加元素，並更改數組內容，返回一個數組，該數組包含從原始數組中刪除的項。
var foo=[];foo[2]=1;foo.push(2);alert(foo.length); // 4
10、數組去重並排序，打印重複字符及次數
10、函數
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
a(); // '函數聲明'
function a(){
console.log("函數聲明");
}
b(); // Uncaught TypeError: b is not a function
var b=function(){
console.log('函數表達式');
}
一個函數實現add(1)(2)(3)和add(1,2)不同的調用方式。
function add(...a){
let sum=0;
for(let num of a){
sum+=num;
}
function s(...b){
for(let num of b){
sum+=num;
}
return s;
}
s.toString=function(){return sum;}
return s;
}
console.log(add(2,3)); // 5
console.log(add(2)(3)); // 5
console.log(add(1)(2,3)(4,5,6)); // 21
11、閉包
閉包是指有權訪問另一個函數作用域中的變量的函數，由函數和與其相關的引用環境組成。閉包允許函數訪問其引用環境中的變量，有可能是外部環境變量，該變量稱爲自由變量。創建閉包的常見方式，在一個函數內部創建另一個函數。
閉包的應用，保存變量現場。閉包只能取得包含函數中任何變量的最後一個值，但可以強制創建另一個匿名函數強制讓閉包的行爲符合預期。
閉包的應用，私有作用域的匿名函數。臨時需要一些變量，就可以使用私有作用域，限制向全局作用域中添加過多的變量和函數。私有變量包括函數的參數、局部變量和在函數內部定義的其他函數。
for(var i=0;i<6;i++){
setTimeout(function(){
console.log(i); // 打印6個6
},1000);
}
// ES6語法可以實現打印1 2 3 4嗎？
var numbers=[0,1,2,3];
var functions=[];
for(var i=0;num=numbers[i],i<numbers.length;i++){
functions.push(function(){
console.log(num); // 打印四個undefined
})
}
for(var j=0;j<functions.length;j++){
functions[j]();
}
// 如何理解？
var funcs=[],
object={a:true,b:true,c:true}
for(let key in object){
funcs.push(function(){
console.log(key)
})
}
funcs.forEach(function(func){
func(); // a b c
})
12、call、apply和bind的區別
函數調用時綁定this值：call()、apply()讓函數在特定的作用域下進行調用，即設置函數體內this對象的值。擴充函數運行的作用域，對象不需要與方法有任何耦合關係。區別僅在於接受參數的方式不同， call()方法傳遞的參數逐個列舉，第一個參數是作用域；apply()方法接收兩個參數，作用域和參數數組。
爲函數綁定this值但並不調用：bind()傳入新作用域，返回新函數，該函數在bind作用域執行。第二個參數是參數列表，與call一致。
var scope='window';
env={
scope:'inner',
getscope:function(){
console.log(this.scope);
}
}
env.getscope(); // 'inner'
env.getscope.apply(window); // 'window'
env.getscope.call(window); // 'window'
env.getscope.bind(window)(); // 'window'
var f=env.getscope;
f(); // 'window'
13、垃圾回收機制和內存管理
js具有自動垃圾回收機制，找出不再使用的變量，垃圾收集器按一定時間間隔（影響性能）釋放其佔用的內存。“標記清除”是目前主流的垃圾回收算法，給當前不使用的值加上標記，再回收內存。另一種算法是“引用計數”，跟蹤記錄所有值被引用的次數，當代碼中存在循環引用現象時會導致問題。及時解除不再使用的全局對象、全局對象屬性及循環引用變量的引用，確保有效回收內存。
14、異步加載JS的方式
使用defer屬性讓腳本在文檔完全呈現之後再順序執行，async屬性同樣讓腳本立即下載延遲執行，但不保證順序。
動態生成<script>標籤
a.XHR注入（通過XMLHttpRequest對象來獲取JS，然後創建一個script元素插入到DOM結構中）;
b.ajax eval(使用ajax得到腳本內容，然後通過eval（xmlhttp.responseText）來運行腳本);
c.iframe等
DOM
1、節點操作
（1）獲取節點 getElementById getElementsByTagName getElementsByClassName
querySelector/querySelectorAll 獲取指定元素的後代元素中符合選擇器的節點，第一個符合條件的元素或所有元素的列表
（2）創建節點 createElement createDocumentFragment
（3）修改節點內容 textContent innerText
（4）插入節點 appendChild insertBefore
（5）刪除節點 removeChild replaceChild
2、樣式操作
（1）增加內聯樣式 element.style.color='red'; element.style.cssText='border-color:red;color:red;';
（2）更新class element.className+='invalid';
（3）更換樣式表
3、offsetWidth/clientWidth/scrollWidth的區別
offsetWidth：元素在水平方向上佔用的空間大小。
clientWidth：元素內容區的寬度加左右內邊距的寬度。
scrollWidth：在沒有滾動條的情況下，元素內容的總寬度。
console.log('one');
setTimeout(function(){
console.log('two');
},0);
console.log('three');
// one three two
對於事件委託，如何爲不同子元素綁定特定的功能
event.target
12、判斷一個字符串中出現次數最多的字符/單詞，統計這個次數
13、去掉一個數組的重複元素
求一個字符串的字節長度