為了方便各位熱愛前端的小夥伴能夠更加便捷的學習到前端，好程式設計師特意為大家整理100道獨家HTML5大前端面試題！希望能給你帶來幫助！
一、Doctype的作用?嚴格模式和混雜模式的區分，以及如何觸發這2種模式?
<!DOCTYPE>>聲明位於文檔中的最前面，處於<html>標籤之前。告知瀏覽器的解析器，用什麼文檔類型規範來解析這個文檔。
DOCTYPE不存在或格式不正確會導致文檔以混雜模式呈現。
嚴格模式就是瀏覽器根據web標準去解析頁面，是一種要求嚴格的DTD，不允許使用任何表現層的語法，
混雜模式是一種向後兼容的解析方法。
觸發標準模式或者說嚴格模式很簡單，就是Html前申明正確的DTD，出發混雜模式可以在html文檔開始不聲明DTD，或者在DOCTYPE前加入XML聲明
二、請寫出至少20個HTML5標籤
<article> <aside> <audio> <canvas> <datalist> <command> <details> <embed> <figcaption> <figure> <footer> <header> <hgroup> <keygen> <mark> <nav> <section> <time> <video> <summary> <meter> <output> <progress> <source>
三、語義化的理解？
1.html語義化就是讓頁面的內容結構化，便於對瀏覽器、搜尋引擎解析；
2.在沒有樣式CCS情況下也以一種文檔格式顯示，並且是容易閱讀的。
3.搜尋引擎的爬蟲依賴於標記來確定上下文和各個關鍵字的權重，利於SEO。
4.使閱讀原始碼的人對網站更容易將網站分塊，便於閱讀維護理解。
四、列舉5種IE haslayout的屬性及其值
haslayout是Windows Internet Explorer渲染引擎的一個內部組成部分。在Internet Explorer中，一個元素要麼自己對自身的內容進行計算大小和組織，要麼依賴於父元素來計算尺寸和組織內容。為了調節這兩個不同的概念，渲染引擎採用了hasLayout的屬性，屬性值可以為true或false。當一個元素的hasLayout屬性值為true時，我們說這個元素有一個布局（layout）
部分的IE顯示的錯誤，都可以通過激發元素的haslayout屬性來修正。可以通過設置css尺寸屬性(width/height)等來激發元素的haslayout，使其「擁有布局」。如下所示，通過設置以下css屬性即可。
* display: inline一block* height: (任何值除了auto)* float: (left 或 right)* position: absolute* width: (任何值除了auto)* writing一mode: tb一rl；（實現文字可以垂直顯示，具體意義可百度了解）
* zoom: (除 normal 外任意值)
Internet Explorer 7 還有一些額外的屬性(不完全列表):
* min一height: (任意值)* max一height: (除 none 外任意值)* min一width: (任意值)* max一width: (除 none 外任意值)* overflow: (除 visible 外任意值)* overflow一x: (除 visible 外任意值)* overflow一y: (除 visible 外任意值)* position: fixed
五、簡述jpg，gif，png-8，png-24的區別，及其各自的使用場景
gif、jpg、png格式的圖片在網站製作中的區別
Gif格式特點:
1.透明性,Gif是一種布爾透明類型，既它可以是全透明，也可以是全不透明，但是它並沒有半透明（alpha透明）。
2.動畫,Gif這種格式支持動畫。
3.無損耗性,Gif是一種無損耗的圖像格式，這也意味著你可以對gif圖片做任何操作也不會使得圖像質量產生損耗。
4.水平掃描,Gif是使用了一種叫作LZW的算法進行壓縮的，當壓縮gif的過程中，像素是由上到下水平壓縮的，這也意味著同等條件下，橫向的gif圖片比豎向的gif圖片更加小。例如500*10的圖片比10*500的圖片更加小
5.間隔漸進顯示,Gif支持可選擇性的間隔漸進顯示
由以上特點看出只有256種顏色的gif圖片不適合照片，但它適合對顏色要求不高的圖形（比如說圖標，圖表等），它並不是最優的選擇，我們會在後面中看到png是最優的選擇。
Jpeg（jpg）格式特點:
1.透明性,它並不支持透明。
2.動畫,它也不支持動畫。
3.損耗性,除了一些比如說旋轉（僅僅是90、180、270度旋轉），裁切，從標準類型到先進類型，編輯圖片的原數據之外，所有其它操作對jpeg圖像的處理都會使得它的質量損失。所以我們在編輯過程一般用png作為過渡格式。
4.隔行漸進顯示,它支持隔行漸進顯示（但是ie瀏覽器並不支持這個屬性，但是ie會在整個圖像信息完全到達的時候顯示）。
由上可以看出Jpeg是最適web上面的攝影圖片和數位照相機中。
Png格式特點:
1.類型,Png這種圖片格式包括了許多子類，但是在實踐中大致可以分為256色的png和全色的png，你完成可以用256色的png代替gif，用全色的png代替jpeg
2.透明性,Png是完全支持alpha透明的（透明，半透明，不透明），儘管有兩個怪異的現象在ie6（下面詳細討論）
3.動畫,它不支持動畫
PNG圖片格式現在包含三種類型：
1.PNG8256色PNG的別名
2.PNG24全色PNG的別名
3.PNG32全色PNG的別名
基本上PNG32就是PNG24，但是附帶了全alpha通道。就是說每個像素上不僅存儲了24位真色彩信息還存儲了8位的alpha通道信息，就如同GIF能存儲透明和不透明信息一樣。當我們把圖片放到不太搭配的背景上的時候，透明PNG圖片的邊緣會顯示得更加平滑。
當然，我也知道你的想法，「但是Photoshop也能生成帶透明通道的PNG圖片！」我也知道，它只是表面上這麼說是PNG24，讓我也產生困惑了。
作為一個傷感的Fireworks倡導者，我只使用PNG32支持附帶alpha通道的真色彩圖片。不管怎樣，如果你習慣使用Photoshop，你就應該知道，Photoshop在「存儲為WEB格式」中只提供PNG8和PNG24兩種PNG格式。
我敢肯定你經常會勾選「支持透明」選項，以獲得帶有透明度的PNG圖片，但是這樣你就獲取了一張PNG32圖片。——Photoshop只是覺得把PNG32這個名稱給隱藏掉了。。。。
對png8的誤解
Png8的在ie中的怪異表現：
半透明的png8在ie6以下的瀏覽器顯示為全透明。
Alpha透明的全色PNG（png32）在ie6中會出現背景顏色（通常是灰色）。
由上面可以總結：
（a）全透明的png8可以在任一瀏覽器正常顯示（就像gif一樣）。半透明的png8在除了ie6及其以下的瀏覽器下錯誤的顯示成全透明，其它瀏覽器都能正常顯示半透明。這個bug並不需要特殊對待，因為在不支持半透明的瀏覽器下只是顯示為全透明，對用戶體驗影響不大，它反而是透明gif的加強版。
（b）第二個bug沒有什麼好的方法解決，只能通過影響性能的方法AlphaImageLoader與需要加特殊標籤（VML）。
因此得出結論就是：請使用PNG8。
Png8的軟體問題：
Photoshop只能導出布爾透明的PNG8。
Fireworks既能導出布爾透明的PNG8，也能導出alpha透明的PNG8.
六、能夠設置文本加粗的樣式屬性是什麼？
字體加粗（font一weight）
功能：用於設置字體筆劃的粗細。
屬性值：正常度一normal
相對度一bold,bolder,light,lighter
漸變度一100,200,300,400(相當於normal),500,600,700(相當於bold、lighter、bolder、以及數值100－900。
語法為：h1{font一weight:屬性值}
七、Html和xhtml有什麼區別?
html是一種基本的web網頁設計語言，xhtml是一個基於XML的置標語言。
最主要的不同:
XHTML元素必須正確的被嵌套，元素必須關閉，標籤必須小寫，必須有根元素。
八、算法題：有一個長度為n一1的數組，包含1一n中不重複的亂序的數，求尋找範圍內不在數組中的數，考慮空間佔用，性能優化，溢出等情況，至少寫兩個算法
當n不太大時，可以考慮求和。先算出1~n的所有數的和，然後減去數組中出現的所有自然數的和。時間複雜度為O(n)，空間複雜度O(1)。這種方法的缺點是n不能太大，n比較大時，求和容易溢出。
用位圖。從頭到尾的掃描整個數組，把出現的數相應的位設置為1.然後再掃描位圖，找出不為1的那一位，即為要找的數。這種方法的時間複雜度為O(n),空間複雜度為O(n)。
異或有個很巧妙的地方：同一變量和該變量與另一變量的異或值的異或等於這個變量自身。所以我們可以把1~n的所有數異或，再把數組中出現的所有數異或，然後再把這兩個異或的結果異或，最後得到的值即為我們要找的值。這樣時間複雜度為O(n),空間複雜度為O（1）。在空間上比第二種方法要好，而且不會出現第一種方法中所說的溢出問題。
九、實現以下方法（與標準一致）
Element.prototype.getElementsByClassName：
Element.prototype.getElementsByClassName = function(searchClass, node, tag) {
if (document.getElementsByClassName) {
var nodes = (node || document).getElementsByClassName(searchClass),
result = [];
for (var i = 0; node = nodes[i++]; ) {
if (tag !== "*" && node.tagName === tag.toUpperCase()) {
result.push(node);
}
}
return result;
} else {
node = node || document;
tag = tag || "*";
var classes = searchClass.split(" "),
elements = (tag === "*" && node.all) ? node.all : node.getElementsByTagName(tag),
patterns = [],
current,
match;
var i = classes.length;
while (一一i >= 0) {
patterns.push(new RegExp("(^|\\s)" + classes[i] + "(\\s|$)"));
}
var j = elements.length;
while (一一j >= 0) {
current = elements[j];
match = false;
for (var k = 0, kl = patterns.length; k < kl; k++) {
match = patterns[k].test(current.className);
if (!match)
break;
}
if (match)
result.push(current);
}
return result;
}
}
Function.prototype.bind：
Function.prototype.bind = function (oThis) {
if (typeof this !== "function") {
throw new TypeError("bind function error");
}
var aArgs = Array.prototype.slice.call(arguments,1),
fToBind = this,
fBound = function () {
return fToBind.apply(oThis || window,aArgs.concat(Array.prototype.slice.call(arguments)));
};
return fBound;
};
十、編寫一個方法去掉一個數組的重複元素
1.遍歷數組法
最簡單的去重方法，實現思路：新建一新數組，遍歷傳入數組，值不在新數組就加入該新數組中；注意點：判斷值是否在數組的方法「indexOf」是ECMAScript5方法，IE8以下不支持，需多寫一些兼容低版本瀏覽器代碼，源碼如下：
// 最簡單數組去重法
function unique1(array){
var n = [ ]; //一個新的臨時數組
//遍歷當前數組
for(var i = 0; i < array.length; i++){
//如果當前數組的第i已經保存進了臨時數組，那麼跳過，
//否則把當前項push到臨時數組裡面
if (n.indexOf(array[i]) == 一1) n.push(array[i]);
}
return n;
}
// 判斷瀏覽器是否支持indexOf ，indexOf 為ecmaScript5新方法 IE8以下（包括IE8， IE8只支持部分ecma5）不支持
if (!Array.prototype.indexOf){
// 新增indexOf方法
Array.prototype.indexOf = function(item){
var result = 一1, a_item = null;
if (this.length == 0){
return result;
}
for(var i = 0, len = this.length; i < len; i++){
a_item = this[i];
if (a_item === item){
result = i;
break;
}
}
return result;
}
}
2.對象鍵值對法
該方法執行的速度比其他任何方法都快，就是佔用的內存大一些；實現思路：新建一js對象以及新數組，遍歷傳入數組時，判斷值是否為js對象的鍵，不是的話給對象新增該鍵並放入新數組。注意點：判斷是否為js對象鍵時，會自動對傳入的鍵執行「toString()」，不同的鍵可能會被誤認為一樣；例如：a[1]、a["1"]。解決上述問題還是得調用「indexOf」。
//速度最快，佔空間最多（空間換時間）
// 速度最快， 佔空間最多（空間換時間）
function unique2(array){
var n = {}, r = [], len = array.length, val, type;
for (var i = 0; i < array.length; i++) {
val = array[i];
type = typeof val;
if (!n[val]) {
n[val] = [type];
r.push(val);
} else if (n[val].indexOf(type) < 0) {
n[val].push(type);
r.push(val);
}
}
return r;
}
3.數組下標判斷法
還是得調用「indexOf」性能跟方法1差不多，實現思路：如果當前數組的第i項在當前數組中第一次出現的位置不是i，那麼表示第i項是重複的，忽略掉。否則存入結果數組。
function unique3(array){
var n = [array[0]]; //結果數組
//從第二項開始遍歷
for(var i = 1; i < array.length; i++) {
//如果當前數組的第i項在當前數組中第一次出現的位置不是i，
//那麼表示第i項是重複的，忽略掉。否則存入結果數組
if (array.indexOf(array[i]) == i) n.push(array[i]);
}
return n;
}
4.排序後相鄰去除法
雖然原生數組的」sort」方法排序結果不怎麼靠譜，但在不注重順序的去重裡該缺點毫無影響。實現思路：給傳入數組排序，排序後相同值相鄰，然後遍歷時新數組只加入不與前一值重複的值。
// 將相同的值相鄰，然後遍歷去除重複值
function unique4(array){
array.sort();
var re=[array[0]];
for(var i = 1; i < array.length; i++){
if( array[i] !== re[re.length一1])
{
re.push(array[i]);
}
}
return re;
}
5.優化遍歷數組法
實現思路：獲取沒重複的最右一值放入新數組。（檢測到有重複值時終止當前循環同時進入頂層循環的下一輪判斷）
// 思路：獲取沒重複的最右一值放入新數組
function unique5(array){
var r = [];
for(var i = 0, l = array.length; i < l; i++) {
for(var j = i + 1; j < l; j++)
if (array[i] === array[j]) j = ++i;
r.push(array[i]);
}
return r;
}
十一、請使用javascript寫出數組快速排序代碼
<script>
function quiktSort(arr){
var left =[],right=[];
if(arr.length<1){
return arr;
}
var index = Math.floor(arr.length/2);
var point = arr.splice(index,1);
for(var i=0,len=arr.length;i<len;i++){
if(arr[i]<point){
left.push(arr[i]);
}else{
right.push(arr[i]);
}
}
return quickSort(left).concat(point,quickSort(right));
}
</script>
十二、編寫一個布局，頁面寬度自適應，最小寬度300px，左邊定寬35%，右邊定寬65%
<div>
<div></div>
<div></div>
</div>
<style>
.container{
height: 600px;
_width: 300px;
min一width: 300px;
}
.left{
width: 35%;
height: 100%;
background: #ff0;
float: left;
}
.right{
overflow:hidden;
width: 65%;
height: 100%;
background: #0f0;
}
</style>
十三、談談對html5的了解
1.良好的移動性，以行動裝置為主。
2.響應式設計，以適應自動變化的屏幕尺寸
3.支持離線緩存技術，webStorage本地緩存
4.新增canvas，video，audio等新標籤元素。新增特殊內容元素：article，footer，header，nav，section等，新增表單控制項：calendar，date，time，email，url，search。
5.地理定位...
6.新增webSocket/webWork技術
十四、Js面向對象的幾種方式
1.對象的字面量var obj={}
2.創建實例對象var obj=new Object();
3.構造函數模式function fn(){},new fn();
4.工廠模式：用一個函數，通過傳遞參數返回對象。function fn(params){var obj=new Object();obj.params=params;return obj;},fn(params);
5.原型模式：function clock(hour){}fn.prototype.hour=0;new clock();
首先，每個函數都有一個prototype(原型)屬性，這個指針指向的就是clock.prototype對象。而這個原型對象在默認的時候有一個屬性constructor，指向clock，這個屬性可讀可寫。而當我們在實例化一個對象的時候，實例newClock除了具有構造函數定義的屬性和方法外（注意，只是構造函數中的）,還有一個指向構造函數的原型的指針，ECMAScript管他叫[[prototype]]，這樣實例化對象的時候，原型對象的方法並沒有在某個具體的實例中，因為原型沒有被實例。
十五、在css中哪個屬性會影響dom讀取文檔流的順序
1.direction,writing一mode
十六、前端頁面由哪三層構成，分別是什麼，作用是什麼？
Html(結構):超文本標記語言,由HTML或xhtml之類的標記語言負責創建。標籤，也就是那些出現在尖括號裡的單詞，對網頁內容的語義含義做出了描述，但這些標籤不包含任何關於如何顯示有關內容的信息。例如，P標籤表達了這樣一種語義：「這是一個文本段。」
Css(表現):層疊樣式表,由css負責創建。css對「如何顯示有關內容」的問題做出了回答。
Js(行為):客戶端腳本語言,內容應該如何對事件做出反應
十七、Css的基本語句構成是？
語法:
（自定義的樣式名稱）｛
樣式內容（屬性：屬性值；）
｝
十八、如何對網站的文件和資源進行優化
1．文件合併（目的是減少http請求）
2．文件壓縮（目的是直接減少文件下載的體積）
3．使用cdn託管資源
4．使用緩存
5．gizp壓縮需要的js和css文件
6．meta標籤優化（title,description,keywords）,heading標籤的優化,alt優化
7．反向連結，網站外連結優化
十九、Javascipt的本地對象，內置對象和宿主對象
本地對象：Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError,簡單來說，本地對象就是ECMA一262定義的類.
內置對象：ECMA一262把內置對象（built一in object）定義為「由ECMAScript實現提供的、獨立於宿主環境的所有對象，在ECMAScript程序開始執行時出現」。這意味著開發者不必明確實例化內置對象，它已被實例化了。
同樣是「獨立於宿主環境」。根據定義我們似乎很難分清「內置對象」與「本地對象」的區別。而ECMA一262隻定義了兩個內置對象，即Global和Math（它們也是本地對象，根據定義，每個內置對象都是本地對象）。
如此就可以理解了。內置對象是本地對象的一種。而其包含的兩種對象中，Math對象我們經常用到，可這個Global對象是啥東西呢？
Global對象是ECMAScript中最特別的對象，因為實際上它根本不存在，有點玩人的意思。大家要清楚，在ECMAScript中，不存在獨立的函數，所有函數都必須是某個對象的方法。
類似於isNaN()、parseInt()和parseFloat()方法等，看起來都是函數，而實際上，它們都是Global對象的方法。而且Global對象的方法還不止這些.
宿主對象:ECMAScript中的「宿主」就是我們網頁的運行環境，即「作業系統」和「瀏覽器」。所有非本地對象都是宿主對象（host object），即由ECMAScript實現的宿主環境提供的對象。所有的BOM和DOM對象都是宿主對象。因為其對於不同的「宿主」環境所展示的內容不同。其實說白了就是，ECMAScript官方未定義的對象都屬於宿主對象，因為其未定義的對象大多數是自己通過ECMAScript程序創建的對象。自定義的對象也是宿主對象。
二十、輸入url後的加載過程
1)查找域名對應IP位址
2)建立連接(TCP的三次握手)
3)構建網頁
4)斷開連接(TCP的四次揮手)
二十一、說說TCP傳輸的三次握手四次揮手策略
為了準確無誤地把數據送達目標處，TCP協議採用了三次握手策略。用TCP協議把數據包送出去後，TCP不會對傳送後的情況置之不理，它一定會向對方確認是否成功送達。握手過程中使用了TCP的標誌：SYN和ACK。
發送端首先發送一個帶SYN標誌的數據包給對方。接收端收到後，回傳一個帶有SYN/ACK標誌的數據包以示傳達確認信息。
最後，發送端再回傳一個帶ACK標誌的數據包，代表「握手」結束。
若在握手過程中某個階段莫名中斷，TCP協議會再次以相同的順序發送相同的數據包。
斷開一個TCP連接則需要「四次揮手」：
第一次揮手：主動關閉方發送一個FIN，用來關閉主動方到被動關閉方的數據傳送，也就是主動關閉方告訴被動關閉方：我已經不會再給你發數據了(當然，在fin包之前發送出去的數據，如果沒有收到對應的ack確認報文，主動關閉方依然會重發這些數據)，但是，此時主動關閉方還可以接受數據。
第二次揮手：被動關閉方收到FIN包後，發送一個ACK給對方，確認序號為收到序號+1（與SYN相同，一個FIN佔用一個序號）。
第三次揮手：被動關閉方發送一個FIN，用來關閉被動關閉方到主動關閉方的數據傳送，也就是告訴主動關閉方，我的數據也發送完了，不會再給你發數據了。
第四次揮手：主動關閉方收到FIN後，發送一個ACK給被動關閉方，確認序號為收到序號+1，至此，完成四次揮手。
二十二、JQuery中有幾種類型的選擇器
1.層疊選擇器$(「form input」)
2.基本過濾選擇器:first:last:not()
3.內容過濾選擇器:odd:eq():animated
4.可視化過濾選擇器:hidden:visible
5.屬性過濾選擇器：div[id]
6.子元素過濾選擇器:first一child:last一child:only:child
7.表單元素過濾選擇器:enabled:disabled:checked:selected
8.id,類，類型,元素...
二十三、jQuery中的Delegate()函數有什麼作用
delegate()方法為指定的元素（屬於被選元素的子元素）添加一個或多個事件處理程序，並規定當這些事件發生時運行的函數。
使用delegate()方法的事件處理程序適用於當前或未來的元素（比如由腳本創建的新元素）。$("div").delegate("button","click",function(){
$("p").slideToggle();});
二十四、行內元素有那些。塊級元素有那些。空元素有哪些
首先：CSS規範規定，每個元素都有display屬性，確定該元素的類型，每個元素都有默認的display值，如div的display默認值為「block」，則為「塊級」元素；span默認display屬性值為「inline」，是「行內」元素。
（1）行內元素有：a b span select strong（強調的語氣）img input（內聯元素）
（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>
二十五、說幾條javasprit的基本規範
1.不要在同一行聲明多個變量。
2.請使用===/!==來比較true/false或者數值
3.使用對象字面量替代new Array這種形式
4.不要使用全局函數。
5.Switch語句必須帶有default分支
6.函數不應該有時候有返回值，有時候沒有返回值。
7.For循環必須使用大括號
8.If語句必須使用大括號
9.for一in循環中的變量應該使用var關鍵字明確限定作用域，從而避免作用域汙染。
二十六、介紹一下標準的css盒模型，低版本ie盒模型有什麼不同
（1）盒模型有兩種，IE盒子模型、W3C盒子模型；
（2）盒模型：內容(content)、填充(padding)、邊界(margin)、邊框(border)；
（3）區別：IE的width部分把border和padding計算了進去;
二十七、說出三種減少頁面加載的方法（加載時間指感知的時間或實際加載的時間）
CSS Sprites；
JS、CSS源碼壓縮、圖片大小控制合適；
網頁Gzip；
CDN託管；
data緩存；
圖片伺服器；
二十八、用js代碼簡單的介紹下自己
<script>
function Person(name,jingli,jineng) {
this.name=name;
this.jingli=jingli;
this.jineng=jineng;
}
Person.prototype.show=function(){
console.log("我是"+this.name+"；我有如下經歷:"+this.jingli+"；我會如下技能："+this.jineng);
}
var myself=new Person("小田","小田工作室創辦人，鳳翔網絡推廣顧問","熟悉前端基本技能，熟悉網絡營銷思想有實戰經驗，掌握項目經理技能，可以編寫文檔，也可以使用axure進行原型設計，掌握自動化測試和性能測試技能")
myself.show();
</script>
二十九、Html5中datalist是什麼
<datalist>標籤定義選項列表，與input元素配合使用該元素，來定義input可能的值。
datalist及其選項不會被顯示出來，它僅僅是合法的輸入值列表。
<input id="myCar" list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>
三十、Ajax同步和異步的區別，如何解決跨域問題
同步的概念應該是來自於OS中關於同步的概念:不同進程為協同完成某項工作而在先後次序上調整(通過阻塞,喚醒等方式).同步強調的是順序性.誰先誰後.異步則不存在這種順序性.
同步：瀏覽器訪問伺服器請求，用戶看得到頁面刷新，重新發請求,等請求完，頁面刷新，新內容出現，用戶看到新內容,進行下一步操作。
異步：瀏覽器訪問伺服器請求，用戶正常操作，瀏覽器後端進行請求。等請求完，頁面不刷新，新內容也會出現，用戶看到新內容。
jsonp、iframe、window.name、window.postMessage、伺服器上設置代理頁面
三十一、列舉幾種後端通訊的方法及其使用的場景，關於跨域的理解。
1.後端程序可以通過session來進行通訊，session有過期時間，主要用於驗證碼的驗證，登錄過期等的應用。
2.資料庫，資料庫支持多種語言的操作，那麼通過資料庫就可以通訊。
關於跨域：
跨域請求存在的原因：由於瀏覽器的同源策略，即屬於不同域的頁面之間不能相互訪問各自的頁面內容。
跨域的場景：
1.域名不同www.yangwei.com和www.wuyu.com即為不同的域名）
2.二級域名相同，子域名不同（www.wuhan.yangwei.com www.shenzheng.yangwei.com為子域不同）
3.埠不同，協議不同（http://www.yangwei.com和https://www.yangwei.com屬於跨域www.yangwei.con:8888和www.yangwei.con:8080)
跨域的方式：（內容較多，需掌握CORS和jsonp，其他內容也要了解）
1.前端的方式:possMessage，window.name,document.domain,image.src(得不到數據返回)，jsonP(script.src後臺不配合得不到數據返回)，style.href（得不到數據返回)
一.image.src,script.src,style.href不受同源策略的影響可以加載其他域的資源，可以用這個特性，向伺服器發送數據。最常用的就是使用image.src向伺服器發送前端的錯誤信息。image.src和style.href是無法獲取伺服器的數據返回的，script.src伺服器端配合可以得到數據返回。
二possMessage,window.name,document.domain是兩個窗口直接相互傳遞數據。
（1）possMessage是HTML5中新增的，使用限制是必須獲得窗口的window引用。IE8+支持，firefox，chrome,safair,opera支持
（2）window.name，在一個頁面中打開另一個頁面時，window.name是共享的，所以可以通過window.name來傳遞數據，window.name的限制大小是2M，這個所有瀏覽器都支持,且沒有什麼限制。
3）document.domain將兩個頁面的document.domain設置成相同，document.domain只能設置成父級域名，既可以訪問，使用限制：這頂級域名必須相同
2.純後端方式:CORS，伺服器代理
CORS是w3c標準的方式，通過在web伺服器端設置：響應頭Access一Cntrol一Alow一Origin來指定哪些域可以訪問本域的數據，ie8&9(XDomainRequest),10+,chrom4，firefox3.5,safair4，opera12支持這種方式。
伺服器代理，同源策略只存在瀏覽器端，通過伺服器轉發請求可以達到跨域請求的目的，劣勢：增加伺服器的負擔，且訪問速度慢。
3.前後端結合:JsonP
script.src不受同源策略的限制，所以可以動態的創建script標籤，將要請求數據的域寫在src中參數中附帶回調的方法，伺服器端返回回調函數的字符串，並帶參數。
如script.src="http://www.yangwei.com/?id=001&callback=getInfoCallback",伺服器端返回getInfoCallBack("name:yangwei;age:18")這段代碼會直接執行，在前面定義好getInfoCallBack函數，既可以獲得數據並解析。這種是最常見的方式。
4.webSocket（了解性拓展）
服務端推送websocket和sse場景及應用
應用場景
都可以進行服務端推送,並且都是使用長連接來進行.但兩者的實現又有一點不同,sse仍使用http協議,並且使用相同的連結發送正常的http協議報文.而websocket是使用http協議進行握手,然後再使用同一個連結進行websocket協議的通信.
websocket可以進行雙向的通信,即服務端可以往客戶端發信息,客戶端也可以向服務端發信息.而sse是單向的,只能由服務端往客戶端發.
websocket自帶連接的保持,即通過ping/pong協議保證連接可以始終維持,sse沒有這個保證,不過可以參考ping/pong協議,自己周期性地發送信息來同樣地進行處理.比如,5秒往客戶端發一個特別的信息(通過type/name進行區分).其次,因為是基於瀏覽器的使用,sse有一個特性,就是瀏覽器發現一個連接斷掉了,就會自動地進行重聯,即重新發送請求.這樣,服務端也不用擔心連接被斷開,不過需要處理新的請求必須和上一次請求的內容相連續,以及新的推送註冊.
因為都是使用http協議進行起始處理,因此在籤權上都可以使用到http協議本身的一些東西,比如header/cookie籤權.在相應的握手階段,通過讀取cookie(session)來保證相應的請求必須是經過授權的,也可以用於定位使用人.甚至可以通過這些信息保證單個用戶只能有一個請求,避免重複請求
由於都是基於瀏覽器使用,因此建議的數據傳輸都是文本型.雖然websocket支持二進位frame傳輸,不過一些都不建議使用.sse只能傳輸文本
不管是websocket還是sse,在用於通信時,都建議只用於進行數據的推送,而不是進行完整的應用處理.這裡可以理解為,常規的業務處理仍然交給後端的服務來處理.這樣,即可以使用之前的業務開發的優勢,又可以使用推送的優勢.而不是走向另一個級端,即所有的信息都想通過推送來傳遞.
開發方式
websocket開發首選netty,因為netty對協議的封裝已經做到了完全的支持.通過HttpServerCodec作為握手協議,WebSocketServerProtocolHandler作為協議處理,然後再加一個自己的handler,就完成了相應的業務處理.同時在性能上,netty在一個ws的請求建立起來之後,會自動地去除httpServerCodec相關的handler,這樣保證後續的處理都是按照ws的協議來進行.
sse開發首選jersey,jersey一media一sse提供了相應的sse支持,並且通過與rest相集成,開發一個sse就跟普通的業務開發相同.
ws和sse在文本支持上都只支持utf一8編碼,因此在處理上需要註冊編碼方式.同時在使用sse時,如果後端第一次進行響應時,相應的編碼不對.chrome會直接報錯,包括utf8都會報錯(這是之前後端開發的一個問題),可以修正或者增加相應的攔截器,保證後端content一type響應中的charset=UTF一8.
ws和sse都可以通過nginx進行代理轉發.ws的處理只需要設置http版本,以及重新轉發前端的Upgrade和Connection頭即可.而sse,也可以通過禁用buffer來處理.參考http://stackoverflow.com/questions/27898622/server一sent一events一stopped一work一after一enabling一ssl一on一proxy
特定實現
為保證在開發時推送類的和業務類的系統不會耦合在一起,或者同一個應用內有兩種處理模式的功能存在.建議直接在系統層就開發2個不同的系統,一個專門用於推送,另一個用於相應的業務處理.然後業務處理後的數據,需要再交由推送處理,則可以在後端進行通過消息系統進行中轉,如kafka(持久保證)或redis(內存訂閱)等
因為二者在ie上的支持都很有限,因此不建議在ie上進行嘗試
使用sse還是websocket,取決於是否需要前臺交互,還取決於對後端的支持技術的了解程序.比如,了解jersey多一點,還是netty多一點.由於最近netty進行微服務化底層通信支持越來越流行,個人更傾向於使用websocket.但如果僅僅是一個簡單的推送功能,又不希望修改代碼,那也可以使用jersey(畢竟之前的系統就是在上面進行開發的)
需要後端有的時候需要進行定向發送或者是群發,這種需求ws和sse的實現中都有相應的處理.如ChannelGroup和SseBroadcaster,這樣在後端獲取到一個消息,需要進行路由時就可以從這裡面拿相應的channel信息.不過,前提是對各個channel上進行了特定的消息綁定,這樣就好區分具體的路由信息.具體路由策略可以在建立時綁定session,後續通過session來路由.
三十二、設計一個幻燈應用，需要列舉選擇的基礎框架、項目的基礎框架和代碼管理、幻燈數據的存儲和讀取，部分特效的實現，可以只寫思路，後續面聊。
本題無標準答案，同學們可以自己研究考慮一下，。
三十三、Html5中本地存儲概念是什麼，有什麼優點，與cookie有什麼區別？
html5中的Web Storage包括了兩種存儲方式：sessionStorage和localStorage。
sessionStorage用於本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問並且當會話結束後數據也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。而localStorage用於持久化的本地存儲，除非主動刪除數據，否則數據是永遠不會過期的；
cookie是網站為了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（通常經過加密）。
區別：
1、cookie數據始終在同源的http請求中攜帶（即使不需要），即cookie在瀏覽器和伺服器間來回傳遞。而sessionStorage和localStorage不會自動把數據發給伺服器，僅在本地保存。cookie數據還有路徑（path）的概念，可以限制cookie只屬於某個路徑下。
2、存儲大小限制也不同，cookie數據不能超過4k，同時因為每次http請求都會攜帶cookie，所以cookie只適合保存很小的數據，如會話標識。sessionStorage和localStorage雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。
3、數據有效期不同，sessionStorage：僅在當前瀏覽器窗口關閉前有效，自然也就不可能持久保持；localStorage：始終有效，窗口或瀏覽器關閉也一直保存，因此用作持久數據；cookie只在設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉。
4、作用域不同，sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個頁面；localStorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。
三十四、說說你對作用域鏈的理解
作用域鏈的作用是保證執行環境裡有權訪問的變量和函數是有序的，作用域鏈的變量只能向上訪問，變量訪問到window對象即被終止，作用域鏈向下訪問變量是不被允許的。
三十五、什麼是ajax和json，它們的優缺點
ajax的全稱：Asynchronous Javascript And XML。
異步傳輸+js+xml。實現無刷新狀態更新頁面和異步提交
所謂異步，在這裡簡單地解釋就是：向伺服器發送請求的時候，我們不必等待結果，而是可以同時做其他的事情，等到有了結果它自己會根據設定進行後續操作，與此同時，頁面是不會發生整頁刷新的，提高了用戶體驗。
Ajax實現過程：
(1)創建XMLHttpRequest對象,也就是創建一個異步調用對象
(2)創建一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證信息
(3)設置響應HTTP請求狀態變化的函數
(4)發送HTTP請求
(5)獲取異步調用返回的數據
(6)使用JavaScript和DOM實現局部刷新
優點：
不需要插件支持
用戶體驗極佳
提升Web程序性能
減輕伺服器和寬帶的負擔
缺點：
前進後退按鈕被破壞
搜尋引擎的支持不夠
開發調試工具缺乏
JSON（JavaScript Object Notation）和XML一樣也是一種簡單文本格式。是一種比較流行的標準格式，是數據的載體，相對於XML，JSON更加易讀、更便於肉眼檢查。在語法的層面上，JSON與其他格式的區別是在於分隔數據的字符，JSON中的分隔符限於單引號、小括號、中括號、大括號、冒號和逗號。
優點：
作為一種數據傳輸格式，JSON與XML很相似，但是它更加靈巧。
JSON不需要從伺服器端發送含有特定內容類型的首部信息。
缺點：
語法過於嚴謹
代碼不易讀
eval函數存在風險
三十六、Html5有那些新增的表單元素
表單控：color，calendar，date，datetime，datetime一local，time，mouth，week，email，url，search，range，tel
新的表單元素：datalist，keygen，output
三十七、h1ttp狀態碼有那些，分別代表什麼意思
簡單版:
100 Continue繼續，一般在發送post請求時，已發送了http header之後服務端將返回此信息，表示確認，之後發送具體參數信息
200 OK正常返回信息
201 Created請求成功並且伺服器創建了新的資源
202 Accepted伺服器已接受請求，但尚未處理
301 Moved Permanently請求的網頁已永久移動到新位置。
302 Found臨時性重定向。
303 See Other臨時性重定向，且總是使用GET請求新的URI。
304 Not Modified自從上次請求後，請求的網頁未修改過。
400 Bad Request伺服器無法理解請求的格式，客戶端不應當嘗試再次使用相同的內容發起請求。
401 Unauthorized請求未授權。
403 Forbidden禁止訪問。
404 Not Found找不到如何與URI相匹配的資源。
500 Internal Server Error最常見的伺服器端錯誤。
503 Service Unavailable伺服器端暫時無法處理請求（可能是過載或維護）。
完整版
1**(信息類)：表示接收到請求並且繼續處理
100——客戶必須繼續發出請求
101——客戶要求伺服器根據請求轉換HTTP協議版本
2**(響應成功)：表示動作被成功接收、理解和接受
200——表明該請求被成功地完成，所請求的資源發送回客戶端
201——提示知道新文件的URL
202——接受和處理、但處理未完成
203——返回信息不確定或不完整
204——請求收到，但返回信息為空
205——伺服器完成了請求，用戶代理必須復位當前已經瀏覽過的文件
206——伺服器已經完成了部分用戶的GET請求
3**(重定向類)：為了完成指定的動作，必須接受進一步處理
300——請求的資源可在多處得到
301——本網頁被永久性轉移到另一個URL
302——請求的網頁被轉移到一個新的地址，但客戶訪問仍繼續通過原始URL地址，重定向，新的URL會在response中的Location中返回，瀏覽器將會使用新的URL發出新的Request。
303——建議客戶訪問其他URL或訪問方式
304——自從上次請求後，請求的網頁未修改過，伺服器返回此響應時，不會返回網頁內容，代表上次的文檔已經被緩存了，還可以繼續使用
305——請求的資源必須從伺服器指定的地址得到
306——前一版本HTTP中使用的代碼，現行版本中不再使用
307——申明請求的資源臨時性刪除
4**(客戶端錯誤類)：請求包含錯誤語法或不能正確執行
400——客戶端請求有語法錯誤，不能被伺服器所理解
401——請求未經授權，這個狀態代碼必須和WWW一Authenticate報頭域一起使用
HTTP 401.1一未授權：登錄失敗
HTTP 401.2一未授權：伺服器配置問題導致登錄失敗
HTTP 401.3一ACL禁止訪問資源
HTTP 401.4一未授權：授權被篩選器拒絕
HTTP 401.5一未授權：ISAPI或CGI授權失敗
402——保留有效ChargeTo頭響應
403——禁止訪問，伺服器收到請求，但是拒絕提供服務
HTTP 403.1禁止訪問：禁止可執行訪問
HTTP 403.2一禁止訪問：禁止讀訪問
HTTP 403.3一禁止訪問：禁止寫訪問
HTTP 403.4一禁止訪問：要求SSL
HTTP 403.5一禁止訪問：要求SSL 128
HTTP 403.6一禁止訪問：IP位址被拒絕
HTTP 403.7一禁止訪問：要求客戶證書
HTTP 403.8一禁止訪問：禁止站點訪問
HTTP 403.9一禁止訪問：連接的用戶過多
HTTP 403.10一禁止訪問：配置無效
HTTP 403.11一禁止訪問：密碼更改
HTTP 403.12一禁止訪問：映射器拒絕訪問
HTTP 403.13一禁止訪問：客戶證書已被吊銷
HTTP 403.15一禁止訪問：客戶訪問許可過多
HTTP 403.16一禁止訪問：客戶證書不可信或者無效
HTTP 403.17一禁止訪問：客戶證書已經到期或者尚未生效
404——一個404錯誤表明可連接伺服器，但伺服器無法取得所請求的網頁，請求資源不存在。eg：輸入了錯誤的URL
405——用戶在Request一Line欄位定義的方法不允許
406——根據用戶發送的Accept拖，請求資源不可訪問
407——類似401，用戶必須首先在代理伺服器上得到授權
408——客戶端沒有在用戶指定的餓時間內完成請求
409——對當前資源狀態，請求不能完成
410——伺服器上不再有此資源且無進一步的參考地址
411——伺服器拒絕用戶定義的Content一Length屬性請求
412——一個或多個請求頭欄位在當前請求中錯誤
413——請求的資源大於伺服器允許的大小
414——請求的資源URL長於伺服器允許的長度
415——請求資源不支持請求項目格式
416——請求中包含Range請求頭欄位，在當前請求資源範圍內沒有range指示值，請求也不包含If一Range請求頭欄位
417——伺服器不滿足請求Expect頭欄位指定的期望值，如果是代理伺服器，可能是下一級伺服器不能滿足請求長。
5**(服務端錯誤類)：伺服器不能正確執行一個正確的請求
HTTP 500一伺服器遇到錯誤，無法完成請求
HTTP 500.100一內部伺服器錯誤一ASP錯誤
HTTP 500一11伺服器關閉
HTTP 500一12應用程式重新啟動
HTTP 500一13一伺服器太忙
HTTP 500一14一應用程式無效
HTTP 500一15一不允許請求global.asa
Error 501一未實現
HTTP 502一網關錯誤
HTTP 503：由於超載或停機維護，伺服器目前無法使用，一段時間後可能恢復正常
三十八、HTTP的請求方法
HTTP（Hypertext Transfer Protocol）的八種請求方法：
方法概述
方法
概述
❤GET
請求頁面的詳細信息，並返回實體主體。
❤POST
向指定資源提交數據進行數據請求（例如提交表單，或者上傳文件）。數據被包含在請求體中。POST請求可能會導致新的資源的建立和/或已有資源的修改。
PUT
從客戶端向伺服器傳送的數據取代指定的文檔內容。
DELETE
請伺服器刪除指定的頁面。
HEAD
類似與Get請求，只不過返回的響應中沒有具體的內容，用於獲取報頭
CONNECT
HTTP/1.1協議中預留給能夠將連接改為管道方式的代理伺服器。
OPTIONS
允許客戶端查看伺服器的性能。
TRACE
回顯伺服器收到的請求，主要用於測試或診斷。
三十九、什麼是閉包（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
你知道哪些針對jQuery的優化方法
基於Class的選擇性的性能相對於Id選擇器開銷很大，因為需遍歷所有DOM元素。
頻繁操作的DOM，先緩存起來再操作。用Jquery的鏈式調用更好。
比如：var str=$("a").attr("href");
for(var i=size;i<arr.length;i++){}
for循環每一次循環都查找了數組(arr)的.length屬性，在開始循環的時候設置一個變量來存儲這個數字，可以讓循環跑得更快：
for(var i=size,length=arr.length;i<length;i++){}
四十、用原型鏈繼承的方式寫一個類和子類
function Person(name,age){
this.name=name;
this.age=age;
}
Person.prototype.study=function(){
return "學習"
}
/*var p1 =new Person("張三",20);*/
/*p1.study();*/
function Student(class_,name,age){
this.class_=class_;
this.name=name;
this.age=age;
}
Student.prototype=new Person();
var s1 =new Student("二班","李大人",16);
console.log(s1.name,s1.age,s1.class_,s1.study());
四十一、編寫一個方法求一個字符串的字節長度，假設：一個英文字符佔用一個字節，一個中文字符佔用兩個字節
function num(str) {
var num1 = str.length;
var num2 = 0;
for (var i = 0; i < str.length; i++) {
if (str.charCodeAt(i) >= 10000) {
num2++;
}
}
console.log(num1 + num2)
}
四十二、簡單概括瀏覽器事件模型，如何獲得資源dom節點
在各種瀏覽器中存在三種事件模型:原始事件模型(original event model),DOM2事件模型,IE事件模型.其中原始的事件模型被所有瀏覽器所支持,而DOM2中所定義的事件模型目前被除了IE以外的所有主流瀏覽器支持。
瀏覽器事件模型分為三個階段
1、捕獲階段
2、目標階段
3、冒泡階段
Dom節點獲取方法：
1．通過id屬性獲取document.getElementById()
2．通過name屬性獲取document.getElementsByName()
3．通過標籤名獲取document.getElementsByTagName()
4．通過class屬性獲取document.getElementsByClassName()
5．原生js中的querySelector和querySelectorAll方法也同樣可以獲取到相應的dom節點，相似於jquery，但比jq更快
四十三、寫一段ajax提交的js代碼
var xhr =xhr();
function xhr(){
if(window.XMLHttpRequest){
return window. XMLHttpRequest();
}else if(window.ActiveXObject){
try {
return new ActiveXObject("Microsoft.XMLHTTP");
}catch (e) {
try {
return new ActiveXObject("Msxml2.XMLHTTP");
}catch (ex) { }
}
}
}
xhr.open("get","url","true");
xhr.onreadystatechange=function(){
if (xhr.readyState==4 && (xhr.status==200||xhr.status==304)){
document.getElementById("myDiv").innerHTML=xhr.responseText;
}
}
xhr.send();
}
四十四、判斷字符串是否是這樣組成的，第一個必須是字母，後面可以是字母和數字、下劃線，總長度為5一20（請使用正則表達式）
function if_fit(str){
var reg=/^[A一Za一z]{1}\w{5,20}/g;
var result=str.search(reg);
return result;
}
四十五、截取字符串abcdefg的efg
var str="abcdefg";
console.log(str.slice(4));
四十六、css引入的方式有哪些，link和import的區別是什麼
有四種形式:
1.鏈入外部樣式表,就是把樣式表保存為一個樣式表文件,然後在頁面中用<link rel="stylesheet" type="text/css" href="*.css">連結這個樣式表文件.
2.內部樣式表,就是把樣式表放到頁面的<head>區裡. <style type="text/css">
div {height: 600px;}
</style>
3.導入外部樣式表,用@import,在<head>與</head>之間，<style type="text/css">
<!一一
@import "*.css"
一一>
</style>
4.內嵌樣式,就是在標籤內寫入style="",比如:
<div style="background:#cccccc"></div>設置div背景色為灰色.
區別：
1）. link是XHTML標籤，除了加載CSS外，還可以定義RSS等其他事務；@import屬於CSS範疇，只能加載CSS。
2）. link引用CSS時，在頁面載入時同時加載；@import需要頁面網頁完全載入以後加載。
3）. link是XHTML標籤，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。
4）. link支持使用Javascript控制DOM去改變樣式；而@import不支持。
四十七、將字符串helloChina反轉輸出
var str = "helloChina";
方法1：console.log( str.split("").reverse().join("") )；');
方法2：for (var x = str.length一1; x >=0; x一一) {
document.write(str.charAt(x));
}
方法3：var a=str.split("");
var rs = new Array;
while(a.length){
rs.push(a.pop());
}
alert(rs.join(""));
四十八、為什麼無法定義1px左右高度的容器
IE6下這個問題是因為默認的行高造成的，解決的方法也有很多，例如：overflow:hidden|zoom:0.08|line一height:1px
四十九、FireFox中標籤的居中問題的解決辦法
*{margin：0px auto；}
五十、請寫出XHTML和css如何注釋
XHTML:<!一一注釋內容一一>
css:/*注釋內容*/
關注本公眾號：好程式設計師，回復「前端面試題」獲取100道完整版「好程式設計師HTML5前端面試100題」
↓↓↓點擊「閱讀原文」搶「2周免費試學名額！」