每次面試的題目都總結在一個小本本上，很不方便，有小伙伴推薦寫博客，我就來總結一下近期遇到的面試題目。
1、解釋html語義化？
回答：用正確的標簽做正確的事情。html語義化讓頁面的內容結構化、結構更清晰、便於對瀏覽器、搜索引擎解析；
即使在沒有css樣式的情況下，也以一種文檔格式顯示，並且是容易閱讀的；
搜索引擎的爬蟲也依賴於html標記來確定上下文和各個關鍵字的權重，利於SEO;
使閱讀代碼的人對網站更容易對網站分塊，便於閱讀維護理解。
2、塊級元素與行內元素的區別？各自有哪些？
回答：css規范規定，每個元素都有一個display屬性,確定該元素的類型，如div的display默認值為“block”，則為“塊級”元素；span默認display屬性值為“inline”，是“行內”元素。
區別：第一：塊級元素會獨占一行，其寬度自動填充父元素寬度；行內元素不會獨占一行，相鄰的行內元素會排列在一行里，直到一行拍不下，才會換行。
第二：塊級元素可以設置width、height，行內元素設置無效。（塊級元素即使設置了width寬度，也是獨占一行）。
第三：塊級元素可以設置margin、padding，行內元素水平方向有效，豎直方向無效。（例如：margin-left,margin-right、padding-left、padding-right有效）。
塊級元素：div、ul、li、ol、dl、dt、dd、h1、h2、h3、h4...p、table form fieldset dir-目錄列表 menu
行內元素：a b span img strong select label sub sup textarea input
空元素：br hr img input link meta
3、DOCTYPE的作用？標准模式和兼容模式各有什么區別？為什么html5只需要寫<!doctype html>?
回答：（1）、<!doctype>聲明位於html文檔中的第一行，處於<html>標簽之前。告知瀏覽器的解析器用什么文檔標准解析這個文檔。DOCTYPE不存在或者格式不正確會導致文檔以兼容模式呈現。
（2）、標准模式的排版和js運作模式都是以該瀏覽器支持的最高標准運行；在兼容模式下，頁面以寬松的向后兼容的方式顯示，模擬老式瀏覽器的行為以防止站點無法工作。
（3）、HTML不基於SGML，因此不需要對DTD進行引用，但是需要doctype來規范瀏覽器的行為（讓瀏覽器按照他們應該的方式來運行）；
而html4.01基於SGML，所以需要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。
4、link和@import的區別？
回答：（1）、link屬於xhtml標簽，除了加載css之外，還能用於定義rss,定義rel連接屬性等作用；而@import是css提供的，只能用於加載css;
（2）、頁面被加載時，link會同時被加載；而@import引用的css會等到頁面被加載完后再加載。
（3）、@import是css2.1提出的，只有在IE5以上才能被識別，而link是xhtml標簽，無兼容問題。
5、HTML5有哪些新特性？移除了哪些元素？如何處理html5新標簽的瀏覽器兼容問題？如何區分html和html5?
回答：（1）、h5不是SGML的子集，主要是關於圖像、位置、存儲、多任務等功能的增加。
繪畫canvas；用於媒介回放的video和audio元素；語義化更好的內容元素：article、footer、header、nav、section；本地離線存儲localStorage長期存儲數據，瀏覽器關閉后數據不丟失；sessionStorage的數據在瀏覽器關閉后自動刪除；表單控件增添calendar、date、time、email、url、search;新的技術Webworker,Websocket,Geolocation。
（2）、移除的元素：純表現的元素：basefont\big\center\font\s\u;對可用性產生負面影響的元素：frame\frameset\noframes;
（3）、處理和html5新標簽的瀏覽器兼容問題：
當在頁面中使用html5新標簽時，可能得到三種不同的情況：
1>結果1：新標簽被當做錯誤處理並且忽略，在DOM構建時會當作這個標簽不存在；
2>結果2：新標簽當作錯誤處理，並在DOM構建時，這個新標簽會被構造成行內元素；
3>結果3：新標簽被識別為html5標簽，然后用DOM節點對其進行替換。
不能識別html5標簽而不能使用，解決辦法如下：
1>方法1：實現標簽被識別
通過document.creatElement(tagname)方法讓瀏覽器識別新標簽，瀏覽器支持標簽后，還可以為新標簽增添css樣式。
2>方法2：javascript解決方案
a)使用html5shim:
在head中調用一下代碼：(也可以下載到自己的網站上進行調用，但是必須在head中)
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
b)使用kill IE6
在</body>之前調用以下代碼：
<script src="http://letskillie6.googlecode.com/svn/trunk/letskillie6.zh_CN.pack.js"></script>
（4）、區分html和html5:doctype聲明、新增的結構元素|功能元素。
6、css選擇符？優先級算法？哪些屬性可以繼承？
回答：（1）、id選擇器；（2）、類選擇器；（3）、標簽選擇器；（4）、相鄰選擇器（h1+p）;（5）、子選擇器（ul>li）;（6）、后代選擇器（li a）；（7）、通配符選擇器（*）；（8）、屬性選擇器（a[rel="external"]）;（9）、偽類選擇器（a:hover）;
可繼承的屬性：font-size/font-family/color/UL LI Dl DD DT;
不可繼承的樣式：border/margin/padding/height/width/display/position/float/left...;
優先級：！important>id>class>tag>*; !important比內聯優先級高；內聯樣式表（標簽內部）>嵌入樣式表（當前文件中）>外部樣式表（外部文件中）
7、描述cookies,sessionStorage,localStorage的區別？
回答：（1）、cookie是網站用於標識用戶的身份而儲存在用戶本地終端（client side）上的數據（通常經過加密）；cookie數據始終在同源的http中攜帶（即使不需要），即會在瀏覽器和服務器間來回傳遞；（2）、sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。
（3）、存儲大小：cookie數據大小不能超過4k;sessionStorage和localStorage雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。
（4）、有效時間：localStorage存儲持久數據，瀏覽器關閉后數據不丟失除非主動刪除數據；
sessionStorage數據在當前瀏覽器關閉后刪除；
cookie 設置的cookie過期時間之前一直有效，即使窗口或者瀏覽器關閉。
8、javascript有幾種數據類型？划一下他們的內存圖？
回答： 棧:原始數據類型（number、string、Boolean、null、undefined）;
堆：引用數據類型（對象、數組、和函數）；
兩種類型的區別：存儲位置不同：原始數據類型存儲在棧中的簡單數據段，占據空間小，大小固定，屬於被頻繁使用數據，所以放入棧中存儲；
引用數據類型存儲在堆中的對象，占據空間大，大小不固定。如果存儲在棧中將會影響程序運行的性能；引用數據類型在棧中存儲了指針，該指針指向堆中該實體的起始地址。當解釋器尋找引用值時，會首先檢索其在棧中的地址，取得地址后從堆中獲得實體。
9、href和src的區別？
回答：(1)、href表示超文本引用，用於建立當前元素和文檔之間的鏈接。常用的有link、a上使用，當前文檔和引用資源之間確立聯系，並行下載資源。
(2)、src是sourse的縮寫，src指向的文檔會嵌入到文檔中當前標簽所在的位置。主要是引入，常用與img,script等元素上，替換當前元素，當瀏覽器解析該元素時，會暫停其他資源的下載和處理，直到完畢。
10、javascript中call()和apply()方法的區別？
回答：ECMAScript規范給所有函數都定義了這兩個方法call()和apply()。
call()方法定義：調用一個對象的一個方法，以另一個對象替換當前對象。
apply()方法定義：應用某一對象的一個方法，用另一個對象替換當前對象。
兩者的區別在與參數：call()和apply()的第一個參數都是要調用的函數的對象，call()的剩余參數是傳遞給要調用的函數的值，而apply()只有兩個參數，第一個是對象，第二個是數組，這個數組就是該函數的參數。
11、javascript原型？原型鏈？以及如何實現繼承？
回答：每個對象都會在內部初始化一個屬性，就是prototype（原型），當我們訪問一個對象的屬性時，如果這個對象內部不存在這個屬性，那么他就會去prototype里面找這個屬性，這個prototype又會有自己的prototype，於是就這樣一直找下去，就是原型鏈的概念。
如何實現繼承：
1》構造繼承：比如：現在有一個”動物“對象的構造函數
function Animal(){ this.species = "動物"; }
還有一個”貓“對象的構造函數
function Cat(name,color){ this.name = name; this.color = color; }
”貓“繼承”動物“
構造函數綁定：使用call()或者apply()方法，將父對象的構造函數綁定在子對象上，即在子對象構造函數中加一行：
function Cat(name,color){ Animal.apply(this, arguments); this.name = name; this.color = color; } var cat1 = new Cat("大毛","黃色"); alert(cat1.species); // 動物
2》原型繼承：如果”貓“的prototype對象，指向一個animal的實例，那么所有貓的實例就可以繼承animal了。
Cat.prototype = new Animal(); Cat.prototype.constructor = Cat; var cat1 = new Cat("大毛","黃色"); alert(cat1.species); // 動物
3》實例繼承：
4》拷貝繼承：
原型prototype機制或apply和call方法去實現比較簡單，建議使用構造方式和原型混合方式。
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);//得到被繼承的屬性
12、前端性能優化的方法？
回答：（1）、當需要設置的樣式很多時設置className而不是直接操作style。
（2）、避免在頁面的主題布局中使用table，table要等其中的內容完全下載之后才會顯示出來，顯示比div+css布局慢。
（3）、用innerHTML代替DOM操作，減少DOM操作次數，優化javascript性能。
（4）、減少http請求次數：CSS Sprites，JS、CSS源碼壓縮，圖片大小控制合適；網頁GZIP壓縮，CDN托管，data緩存，圖片服務器。
（5）、圖片預加載，將樣式表放在頂部，將腳本放在底部，加上時間戳。
（6）、前端模板 JS+數據，減少由於html標簽導致的貸款浪費，前端用變量保存AJAX請求結果，每次操作本地數據，減少請求次數。
（7）、少用全局變量，緩存DOM節點查找的結果。減少IO（輸入/輸出）讀取操作。
（8）、避免使用CSS Expression(css 表達式)又稱動態屬性（Dynamic properties）。
（9）、減少DOM操作；部署前，圖片壓縮、代碼壓縮；優化js代碼結構，減少冗余代碼；減少http請求，合理設置http緩存；使用內容分發cdn加速；靜態資源緩存；圖片延遲加載；
13、介紹一下標准的CSS的盒子模型？低版本的IE的盒子模型有什么不同？
回答：（1）、有兩種：IE盒子模型、w3c盒子模型；（2）、盒模型：content(內容)、padding（內邊距）、margin（外邊距）、 border（邊框）；（3）：區別：IE的content把padding和border計算了進去。
14、如何居中div?
回答：（1）、水平居中：給DIV設置一個寬度，然后添加margin:0 auto屬性。
div{ width:200px; margin:0 auto; }
（2）、讓絕對定位的div居中：
div { position: absolute; width: 300px; height: 300px; margin: auto; top: 0; left: 0; bottom: 0; right: 0; background-color: pink; /* 方便看效果 */ }
（3）、水平垂直居中一：
確定容器的寬高 寬500 高 300 的層 設置層的外邊距 div { position: relative; /* 相對定位或絕對定位均可 */ width:500px; height:300px; top: 50%; left: 50%; margin: -150px 0 0 -250px; /* 外邊距為自身寬高的一半 */ background-color: pink; /* 方便看效果 */ }
（4）、水平垂直居中二：
未知容器的寬高，利用 `transform` 屬性 div { position: absolute; /* 相對定位或絕對定位均可 */ width:500px; height:300px; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: pink; /* 方便看效果 */ }
（5）、水平垂直居中三：
利用 flex 布局 實際使用時應考慮兼容性 .container { display: flex; align-items: center; /* 垂直居中 */ justify-content: center; /* 水平居中 */ } .container div { width: 100px; height: 100px; background-color: pink; /* 方便看效果 */ }
15、position的值定位原點是？
回答：（1）、absolute：生成絕對定位的元素，相對於值不為static的第一個父元素進行定位。
（2）、relative：生成相對定位的元素，相對於元素正常位置進行定位。
（3）、fixed（老IE不支持）：生成絕對定位的元素，相對於瀏覽器窗口進行定位。
（4）、static：默認值，沒有定位，元素出現在正常的流中。
（5）、inherit:規定從父元素繼承position的值。
16：清除浮動的幾種方式？為什么要清除浮動呢？
回答：（1）、添加新的元素，應用clear:both;（額外標簽法）
.clear{clear:both; height: 0; line-height: 0; font-size: 0}
（2）、父級div定義overflow:auto;
（3）、使用：after方法，作用與浮動元素的父元素。（偽元素）
.clearfix:after{ content:"";//設置內容為空 height:0;//高度為0 line-height:0;//行高為0 display:block;//將文本轉為塊級元素 visibility:hidden;//將元素隱藏 clear:both//清除浮動 } .clearfix{ zoom:1;為了兼容IE(觸發IE的haslayout屬性)
}
（4）、使用雙偽元素
.clearfix:before,.clearfix:after { content: ""; display: block; clear: both; } .clearfix { zoom: 1; }
原因：如果一個盒子中有一個子盒子，並且父盒子沒有設置高，子盒子在父盒子中設置了浮動，那么將來父盒子的高度就是0，下面的元素就會自動部位。（所以可以給父級DIV定義height；也可以父級DIV一起浮動）。
（當設置了zoom的值之后，所設置的元素就會就會擴大或者縮小，高度寬度就會重新計算了，這里一旦改變zoom值時其實也會發生重新渲染，運用這個原理，也就解決了ie下子元素浮動時候父元素不隨着自動擴大的問題。）
17、css定義的權重？
回答：權重的規則：標簽的權重為1，class的權重為10，id的權重為100，如下所示：（ps:如果權重相同，則最后定義的樣式會起作用，但是要避免這樣的情況）
/*權重為1*/ div{ } /*權重為10*/ .class1{ } /*權重為100*/ #id1{ } /*權重為100+1=101*/ #id1 div{ } /*權重為10+1=11*/ .class1 div{ } /*權重為10+10+1=21*/ .class1 .class2 div{ }
18、javascript作用域和閉包？
回答：變量作用域：包括全局變量和局部變量（函數內部可以直接讀取全局變量&函數外部自然不能讀取函數內部的局部變量）。
（1）、函數作用域：函數的局部變量僅對函數內部可見。
（2）、詞法作用域：函數的嵌套關系是定義的時候決定的，而不是調用的時候決定的，即嵌套關系是詞法分析時確定的，而非運行時決定。
（3）、全局作用域：在最外層定義的變量，全局對象的變量，任何地方隱匿定義的變量。
（4）、沒有塊級作用域。
閉包：就是能夠讀取其他函數內部變量的函數。也可以理解成”定義在一個函數內部的函數”；
閉包的用途就是一可以讀取函數內部的變量，二就是讓這些變量的值始終保存在內存中。（內存會消耗過大，所以不能濫用閉包）。
簡單的閉包例子：
function f1(){ var n=999; function f2(){ alert(n); } return f2; } var result=f1(); result(); // 999
19、AJAX的步驟？
回答：（1）、創建ajax對象；（2）、發出HTTP請求；（3）、接收服務器傳回的數據；（4）、更新網頁數據。
20、一個頁面上兩個div左右鋪滿整個瀏覽器，要保證左邊的div一直為100px，右邊的div跟隨瀏覽器大小變化（比如瀏覽器為500，右邊就為400；如果瀏覽器為900，右邊為800）？
回答：（1）、浮動布局：
<div id="left">left sidebar</div> <div id="content">Main Content</div> <style type="text/css"> *{ margin: 0; padding: 0; } #left{ float: left; width: 220px; background-color: green; } #content{ background-color: orange; margin-left: 220px; } </style>
21、一個頁面從輸入URL到頁面加載顯示完成，這個過程發生了什么？（流程說的越詳細越好）
回答：輸入地址
（1）、瀏覽器查找域名的IP地址，這一步包括DNS具體的查找過程（包括：瀏覽器緩存-》系統緩存-》路由器緩存...）（2）、瀏覽器向web服務器發送一個HTTP請求；（3）、服務器的永久重定向響應（從http://example.com到http://www.example.com）；（5）、瀏覽器跟蹤重定向地址；（6）、服務器處理請求；（7）、服務器返回一個HTTP響應；（8）、瀏覽器顯示HTML；（9）、瀏覽器發送請求獲取嵌入在HTML中的 資源（如圖片、音頻、視頻、css、js等等）；（10）、瀏覽器發送異步請求。
22、JS跨域請求的方式，能寫幾種寫幾種?
回答：（1）、通過jsonp跨域；
（2）、通過修改document.domain來跨子域；
（3）、使用window.name來進行跨域；
（4）、使用HTML5新引進的window.postMessage方法來進行跨域（ie6 7不支持）；
（5）、CORS需要服務器設置header:Access-Control-Allow-Origin；
（6）、nginx反向代理 這個方法可以不用目標服務器配合，不過需要搭建一個中轉nginx服務器，用於轉發請求。