整理的前端面試題2
1. css的display：none和visibility:hidden區別
display:none使用後，元素的寬度，高度都會丟失，視為不存在不載入；
元素原來佔據的空間位置不保留；
產生迴流和重繪；
visibility:hidden:視覺上的不可見，但是保留佔據的空間，還具有寬度和高度；
2. 怎麼清除浮動
1.使用空標籤清除浮動 clear:both（增加無意義的標籤）
2.使用overflow:auto或者使用overflow:hidden
3.是用afert偽元素清除浮動(用於非IE瀏覽器)
:after { display:block; clear:both; content:”“; visibility:hidden; }
4. 給浮動的元素的容器增加浮動(需要浮動大量的元素)
基本選擇器、層次選擇器、過濾選擇器和表單選擇器
基本：id選擇器、class選擇器、標籤選擇器、複合選擇器和“*”選擇器
層次：$(“div p”) 選取<div>裡所有的<p>元素
$(“div>p”) 選取<div>裡所有標籤為<p>子元素
$(“.class_1+div”) 選取屬性class為“class_1”的下一個<div>同輩元素。
過濾：$(“div:first”) 選取所有<div>元素中第一個<div>元素。
$(“:focus”) 選取當前獲取焦點的元素。
$(“div:has(p)”) 選取含有<p>元素的<div>元素。
$(“div[title=text]”) 選取屬性title為“text”的<div>元素。
表單：(":input") </span>選取所有<input>、<textarea>、<select>和<button>元素。(“:radio”) 選取所有的單選框。
$(“:checkbox”)
4. 已知ID的Input輸入框，希望獲取這個輸入框的輸入值
document.getElementById(“ID”).value
5. 希望獲取到頁面中所有的checkbox怎麼做？
var domList = document.getElementsByTagName(‘input’)
var checkBoxList = [];
var len = domList.length; //快取到區域性變數
while (len–) { //使用while的效率會比for迴圈更高
if (domList[len].type == ‘checkbox’) {
checkBoxList.push(domList[len]);
} }
6. 設定一個已知ID的DIV的html內容為xxxx，字型顏色設定為黑色
var dom = document.getElementById(“ID”);
dom.innerHTML = “xxxx”
dom.style.color= “#000”
7. 請你談談Cookie的弊端？
1.`Cookie`數量和長度的限制。每個domain最多隻能有20條cookie，每個cookie長度不能超過4KB，否則會被截掉。
2.安全性問題。如果cookie被人攔截了，就可以取得所有的session資訊。即使加密也與事無補，因為攔截者並不需要知道cookie的意義，他只要原樣轉發cookie就可以達到目的了。
3.有些狀態不可能儲存在客戶端。例如，為了防止重複提交表單，我們需要在伺服器端儲存一個計數器。如果我們把這個計數器儲存在客戶端，那麼它起不到任何作用。
8. 各個瀏覽器中css表現的差異性
（1）IE6對margin:0 auto;不會正確的進行解析
解決辦法： 在父元素中使用text-align:center,在元件中使用text-align:left
（2）無法設定微高(一般小於10px)：
說明:當設定元素高度小於10px時，IE6和IE7不受控制，超出設定的高度
產生原因:IE不允許原件的高度小於字型的高度
解決辦法1:設定字型大小:font-size:0;
解決辦法2:給超出高度的標籤設定overflow:hidden
解決辦法3:設定行高line-height小於你設定的高度
（3）子元件撐破父元件
原因:父元件設定了overflow:auto屬性,子元件會從父元件中撐破出來
解決辦法:父元件中設定position:relative;
9. 正則表示式驗證郵箱，電話號碼
驗證郵箱：re =/^(\w-*\.*)[email protected](\w-?)+(\.\w{2,})+$/
驗證電話號碼：區號+號碼，區號以0開頭，3位或4位；號碼由7位或8位數字組成；區號與號碼之間可以無連線符，也可以“-”連線： re = /^0\d{2,3}-?\d{7,8}$/;
10.當一個DOM節點被點選時候，我們希望能夠執行一個函式，應該怎麼做？
（1）直接在DOM裡繫結事件：<divonclick=”test()”></div>
（2）在JS裡通過onclick繫結：xxx.onclick = test
（3）通過事件新增進行繫結：btn.addEventListener(“click”,function(){
alert(his.id);
},false); //最後的引數是true，是在捕獲階段呼叫，false則是在冒泡階段呼叫
IE事件處理程式： btn.attachEvent(“onclick”,function(){
alert(“clicked”); } );
“事件冒泡”：事件開始由最具體的元素接受，然後逐級向上傳播
“事件捕捉”：事件由最不具體的節點先接收，然後逐級向下，一直到最具體的
“DOM事件流”：三個階段：事件捕捉，目標階段，事件冒泡
11.跨瀏覽器的事件繫結和解綁程式
addHandler:function(element,type,handler){
if(element.addEventListener){ //removeEventListener
element.addEventListener(type,handler,false);
}elseif(element.attachEvent){ //detachEvent
element.attachEvent(“on”+type,handler);
}else{
element[“on”+type]=handler; //element[“on”+type]=null;
}
}
12.IE和DOM事件流的區別
執行順序不一樣，引數不一樣，事件加不加on，4.this指向問題
13.jquery的繫結事件有幾種方式 ，請舉例說明其優缺點。
jQuery中提供了四種事件監聽方式，分別是bind、live、delegate、on，對應的解除監聽的函式分別是unbind、die、undelegate、off。
（1）.bind()是最直接的繫結方法 ，會繫結事件型別和處理函式到DOM element上
$( “#members li a” ).bind(“click”, function( e ) {} );
會繫結到所有的a元素上，不會繫結到它執行完後動態新增的那些元素上
（2）live() 用到了事件委託來處理事件繫結，會繫結事件到所選擇的元素的根元素上，也就是document元素上。所有冒泡上來的事件都可以用這個handler來處理。
$( “#members li a” ).live(“click”, function( e ) {} );
不需要再每個元素上繫結事件，只在document上繫結一次。動態新增的元素依然可以觸發早先繫結的事件。停止冒泡是沒有用的，當DOM樹很深時，會有效率的問題。
（3） delegate() 指定元素的繫結位置
$( “#members” ).delegate( “lia”, “click”, function( e ) {} );
可以選擇事件繫結到哪個元素上，可以用在動態新增的元素上
（4）on() 其實.bind(), .live(), .delegate()都是通過.on()來實現的，.unbind(), .die(), .undelegate(),也是一樣的都是通過.off()來實現的
$(“#members li a” ).on( “click”, function( e ) {} );
14.get和post的區別是什麼？
(1) get向伺服器查詢某些資訊，post向伺服器傳送應儲存的資料
(2) get把資料新增到所指的URL中，之和欄位一一對應，URL中可以看到。post放在HTML中的HEADER內傳送到URL中，使用者看不到
(3) get可以傳送的資料量小，post可以傳送的資料量大
(4) get的安全性低，post的安全性高
15.CSS3的flex佈局
flex的作用是能夠按照設定好的規則來排列容器內的專案，而不必去計算每一個專案的寬度和邊距。甚至是在容器的大小發生改變的時候，都可以重新計算，以至於更符合預期的排版。
（1） display：flex|inline-flex；flex：相當於block；inline-flex：相當於inline-block
（2） flex-direction（流動佈局的主軸方向）：row（預設）； row-reverse：行反方向；column：列方向； column-reverse：列方向相反
（3） flex-wrap如果軸線放不下，應該如何換行。nowrap（預設）：不換行；wrap：換行，第一行在上方；wrap-reverse:換行，第一張在下方。
（4） flex-flow（“flex-direction”和“flex-wrap”屬性的縮寫），row nowrap為其預設屬性值，分別表示flex-direction和flex-wrap屬性。
（5） justify-content（主軸方向內容對齊方式）；
flex-srart（預設）：與主軸起始方向對齊；flex-end：向主軸終點方向對齊。
center：向主軸中點方向對齊。
space-between：起始位置向主軸起始方向對齊，終點位置向主軸終點方向對齊，其餘位置向主軸中點方向對齊。
space-around：與space-between類似，只是起始位置和終點位置保留一半空白。
（6） align-content（多個主軸沿側軸方向的內容堆疊對齊方式）
flex-start：多個主軸沿側軸起始方向對齊；flex-end：多個主軸沿側軸終點方向對齊。
center：多個主軸沿側軸中點方向對齊；space-between：第一個主軸沿主軸起始方向對齊，末尾主軸沿主軸終點方向對齊，其他主軸均勻分佈對齊。
space-around：與space-between類似，只是側軸起始位置和側軸終點位置保留一半空白；stretch（預設）：伸縮多個主軸，保持側軸方向統一距離。
（7） align-items（側軸方向的內容對齊方式）
flex-srart：與側軸起始方向對齊；flex-end：向側軸終點方向對齊。
center：向側軸中點方向對齊；baseline：在側軸上保持基線對齊，以第一個專案的基線為準。
stretch（預設）：在側軸方向拉伸每個專案，使每個專案保持相同的起始位置和終點位置。
（8）專案屬性 order(排序，專案按照order值從小到大排列)
flex-grow(空白空間分配比例) flex-shrink(專案空間的分配比例)
16.瀏覽器渲染
DOM:瀏覽器將HTML解析成樹形結構，即DOM.
CSSDOM:將css解析成樹形結構，即CSSDOM。
Render Tree:DOM 和 CSSDOM合併後生成Render Tree。
Layout：計算Render Tree每個節點的具體位置。
Painting：將layout後的節點內容呈現在螢幕上；
遇到外部的css檔案和圖片，瀏覽器會另外發出一個請求，來獲取css檔案和相應的圖片，這個請求是非同步的，並不會影響html檔案。如果遇到javascript檔案，html檔案會掛起渲染的執行緒，等待javascript載入完畢後，html檔案再繼續渲染。
Repaint——(重繪)是在一個元素的外觀被改變，但沒有改變佈局的情況下發生。如果只是改變某個元素的背景色、文字顏色、邊框顏色等等不影響它周圍或內部佈局的屬性，將只會引起瀏覽器repaint。
Reflow——（迴流）：瀏覽器發現某個部分發生了點變化影響了佈局，需要倒回去重新渲染，這個回退的過程就叫回流。意味著元件的幾何尺寸變了，我們需要重新驗證並計算 Render Tree。
17.javascript的本地物件，內建物件和宿主物件
本地物件為array object regexp等可以new例項化,ECMA定義好的物件，是引用型別。
內建物件是本地物件的一種，只有global 和Math
宿主為瀏覽器自帶的document,window 等，所有的BOM 和DOM物件。
18.JavaScript是一門什麼樣的語言，它有哪些特點？
JavaScript 是一種指令碼語言，不需要編譯就可以由直譯器直接執行；變數鬆散定義，屬於弱型別語言；面向物件的。
19.柵格化
把寬度為“W”的頁面分割成n個網格單元“a”，每個單元與單元之間的間隙設為“i”,此時我們把“a+i”定義“A”。他們之間的關係如下：
W =（a×n）+（n-1）*i 由於a+i=A，
可得：(A×n)– i = W
20.閉包的原理和應用
閉包就是能夠讀取其他函式內部變數的函式。
它的最大用處有兩個，一個是前面提到的可以讀取函式內部的變數，另一個就是讓這些變數的值始終保持在記憶體中。
1）由於閉包會使得函式中的變數都被儲存在記憶體中，記憶體消耗很大，所以不能濫用閉包，否則會造成網頁的效能問題，
在IE中可能導致記憶體洩露。解決方法是，在退出函式之前，將不使用的區域性變數全部刪除。
2）閉包會在父函式外部，改變父函式內部變數的值。
閉包的用途：(1)匿名自執行函式
如果變數不加上var關鍵字，則會預設新增到全域性物件屬性上去，這樣可能造成別的函式誤用這些變數，造成全域性物件過於龐大，影響訪問速度。此外，也會有的函式只需執行一次，內部的變數無需維護
vardatamodel={
table:[],
tree:{}
};
(function(dm){
})(datamodel);
建立了一個匿名的函式，並立即執行它，由於外部無法引用它內部的變數，因此在執行完後很快就會被釋放，關鍵是這種機制不會汙染全域性物件。
(2)有一個很耗時的函式物件，每次呼叫都會花費很長時間，就需要把計算的值儲存起來，當呼叫的時候，首先在快取中查詢，找不到，則進行計算。（閉包不會釋放外部的引用，從而使函式內部的值可以保留）
(3)實現封裝，person之外的地方無法訪問其內部變數的值，通過閉包的形式訪問
varperson=function(){
var name=”default”;
return{
getName:function(){
return name;
},
setName:function (newName){
name=newName;
}
}
}();
print(person.name); // 直接訪問，結果為undefined
print(person.getName()); //default
person.setName(“MIKE”);
print(person.getName()); //MIKE
(4)實現面向物件中的物件
functionPerson(){
var name = “default”;
return {
getName : function(){
return name;
},
setName : function(newName){
name = newName;
}
}
};
varjohn = Person();
print(john.getName()); //default
john.setName(“john”);
print(john.getName()); //john
varjack = Person();
print(jack.getName()); //default
jack.setName(“jack”);
print(jack.getName()); //jack
//john和jack都可以稱為是Person這個類的例項，因為這兩個例項對name這個成員的訪問是獨立的，互不影響的。
functionlazy_sum(arr) {
var sum = function () {
return arr.reduce(function (x, y) {
return x + y; //在函式lazy_sum中又定義了函式sum，
}); //並且，內部函式sum可以引用外部函式lazy_sum的引數和區域性變數，
} //當lazy_sum返回函式sum時，相關引數和變數都儲存在返回的函式中
return sum;
}
varf = lazy_sum([1, 2, 3, 4, 5]); // 呼叫lazy_sum返回的不是求和結果，而是求和函式
f(); //15 呼叫函式f時，才是真正的計算結果
函式在其定義內部引用了局部變數arr，所以，當一個函式返回了一個函式後，其內部的區域性變數還被新函式引用
functioncount() {
var arr = [];
for (var i=1; i<=3; i++) {
arr.push(function () {
return i * i;
});
}
return arr;
}
varresults = count();
varf1 = results[0]; //16
varf2 = results[1]; //16
varf3 = results[2]; //16
返回的函式引用了變數i，但它並非立刻執行。等到3個函式都返回時，它們所引用的變數i已經變成了4，因此最終結果為16。
返回閉包時牢記的一點就是：返回函式不要引用任何迴圈變數，或者後續會發生變化的變數。
如果一定要引用迴圈變數怎麼辦？方法是再建立一個函式，用該函式的引數繫結迴圈變數當前的值，無論該迴圈變數後續如何更改，已繫結到函式引數的值不變：
functioncount() {
var arr = [];
for (var i=1; i<=3; i++) {
arr.push((function (n) {
return function () {
return n * n;
}
})(i));
}
return arr;
}
varresults = count();
varf1 = results[0];
varf2 = results[1];
varf3 = results[2];
f1();// 1
f2();// 4
f3();// 9
閉包的可以封裝一個私有變數：
functioncreate_counter(initial) {
var x = initial || 0;
return {
inc: function () {
x += 1;
return x;
}
}
}
varc1 = create_counter();
c1.inc();// 1
c1.inc();// 2
c1.inc();// 3
varc2 = create_counter(10);
c2.inc();// 11
c2.inc();// 12
c2.inc();// 13
在返回的物件中，實現了一個閉包，該閉包攜帶了區域性變數x，並且，從外部程式碼根本無法訪問到變數x。
21.BFC
block-level box:display屬性為 block, list-item, table 的元素，會生成 block-levelbox。並且參與 block fomatting context；
inline-level box:display屬性為 inline, inline-block, inline-table 的元素，會生成inline-level box。並且參與 inline formatting context；
BFC(Blockformatting context)直譯為”塊級格式化上下文”。它是一個獨立的渲染區域，只有Block-level box參與，它規定了內部的Block-level Box如何佈局，並且與這個區域外部毫不相干。在頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。
BFC佈局規則：
內部的Box會在垂直方向，一個接一個地放置。
Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊
每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，否則相反)。即使存在浮動也是如此。
BFC的區域不會與float box重疊。
BFC就是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。反之也如此。
計算BFC的高度時，浮動元素也參與計算
哪些元素會生成BFC：
根元素
float屬性不為none
position為absolute或fixed
display為inline-block, table-cell, table-caption, flex, inline-flex
overflow不為visible
應用：自適應的兩欄佈局，清除內部浮動，防止margin重疊
22.cookie，localStroage,sessionStroage
共同點：都是儲存在瀏覽器端，且同源的。
區別：cookie資料始終在同源的http請求中攜帶（即使不需要），即cookie在瀏覽器和伺服器間來回傳遞。而sessionStorage和localStorage不會自動把資料發給伺服器，僅在本地儲存。cookie資料還有路徑（path）的概念，可以限制cookie只屬於某個路徑下。儲存大小限制也不同，cookie資料不能超過4k，同時因為每次http請求都會攜帶cookie，所以cookie只適合儲存很小的資料，如會話標識。sessionStorage和localStorage 雖然也有儲存大小的限制，但比cookie大得多，可以達到5M或更大。資料有效期不同，sessionStorage：僅在當前瀏覽器視窗關閉前有效，自然也就不可能持久保持；localStorage：始終有效，視窗或瀏覽器關閉也一直儲存，因此用作持久資料；
cookie只在設定的cookie過期時間之前一直有效，即使視窗或瀏覽器關閉。
作用域不同:sessionStorage不在不同的瀏覽器視窗中共享，即使是同一個頁面；localStorage 在所有同源視窗中都是共享的；cookie也是在所有同源視窗中都是共享的。
sessionStorage用於本地儲存一個會話（session）中的資料，這些資料只有在同一個會話中的頁面才能訪問並且當會話結束後資料也隨之銷燬。
因此sessionStorage不是一種持久化的本地儲存，僅僅是會話級別的儲存。而localStorage用於持久化的本地儲存，除非主動刪除資料，否則資料是永遠不會過期的。
23.prototype與__proto__
prototype是函式的內建屬性，__proto__是物件的內建屬性。
每一個函式都有一個prototype(原型)屬性, 可以返回物件的原型物件的引用。prototype是通過呼叫建構函式來建立的那個物件的原型(屬性)物件。
函式(物件)有prototype屬性->對應了一個原型物件->每個原型物件都有一個constructor屬性->包含一個指向prototype屬性所在函式的指標
prototype:每一個函式物件都有一個顯示的prototype屬性,它代表了物件的原型
__proto__:內部原型(IE6/7/8/9不支援),每個物件都有一個名為__proto__的內部隱藏屬性，指向於它所對應的原型物件,
24.src與href的區別
href 是指向網路資源所在位置，建立和當前元素（錨點）或當前文件（連結）之間的連結，用於超連結。
src是指向外部資源的位置，指向的內容將會嵌入到文件中當前標籤所在位置；在請求src資源時會將其指向的資源下載並應用到文件內，例如js指令碼，img圖片和frame等元素。
25.什麼是CSS Hack?
一般來說是針對不同的瀏覽器寫不同的CSS,就是 CSS Hack。
IE瀏覽器Hack一般又分為三種，條件Hack、屬性級Hack、選擇符Hack
// 1、條件Hack
<!–[if IE]>
<style>
.test{color:red;}
</style>
<![endif]–>
// 2、屬性Hack
.test{
color:#090\9; /*For IE8+ */
*color:#f00; /* For IE7 and earlier */
_color:#ff0; /* For IE6 and earlier */
}
// 3、選擇符Hack
* html .test{color:#090;} /* For IE6 and earlier */
* + html .test{color:#ff0;} /* For IE7 */
26.簡述同步和非同步的區別
同步是阻塞模式，非同步是非阻塞模式。
同步就是指一個程序在執行某個請求的時候，若該請求需要一段時間才能返回資訊，那麼這個程序將會一直等待下去，直到收到返回資訊才繼續執行下去；
非同步是指程序不需要一直等下去，而是繼續執行下面的操作，不管其他程序的狀態。當有訊息返回時系統會通知程序進行處理，這樣可以提高執行的效率
27.怎樣新增、移除、移動、複製、建立和查詢節點？
1）建立新節點
createDocumentFragment() //建立一個DOM片段
createElement() //建立一個具體的元素
createTextNode() //建立一個文字節點
2）新增、移除、替換、插入
appendChild() //新增 removeChild() //移除
replaceChild() //替換 insertBefore()//插入
3）查詢
getElementsByTagName() //通過標籤名稱
getElementsByName() //通過元素的Name屬性的值
getElementById()//通過元素Id，唯一性
28.實現一個函式clone，可以對JavaScript中的5種主要的資料型別（包括Number、String、Object、Array、Boolean）進行值複製。
Object.prototype.clone = function(){
var o =this.constructor === Array ? [] : {};
for(var e in this){
o[e] = typeofthis[e] === “object” ? this[e].clone() : this[e];
}
return o;
}
functionclone(Obj){
var buf;
if(Obj instanceOf Array){
buf=[];
var i=Obj.length;
while(i–){
buf[i]=clone(obj[i]);
}
return buf;
}else if(ObjinstanceOf Object){
buf={};
for(var k in Obj){ buf[k]=clone(obj[k]);}
return buf;
} else { returnObj;//普通變數 }
}
29.一個頁面上有大量的圖片（大型電商網站），載入很慢，你有哪些方法優化這些圖片的載入，給使用者更好的體驗。
圖片懶載入：在頁面上的未可視區域可以新增一個滾動條事件，判斷圖片位置與瀏覽器頂端的距離與頁面的距離，如果前者小於後者，優先載入。
如果為幻燈片、相簿等，可以使用圖片預載入技術，將當前展示圖片的前一張和後一張優先下載。
如果圖片為css圖片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技術。
如果圖片過大，可以使用特殊編碼的圖片，載入時會先載入一張壓縮的特別厲害的縮圖，以提高使用者體驗。
如果圖片展示區域小於圖片的真實大小，則因在伺服器端根據業務需要先行進行圖片壓縮，圖片壓縮後大小與展示一致。
30.在Javascript中什麼是偽陣列？如何將偽陣列轉化為標準陣列？
偽陣列（類陣列）：無法直接呼叫陣列方法或期望length屬性有什麼特殊的行為，但仍可以對真正陣列遍歷方法來遍歷它們。典型的是函式的argument引數，還有像呼叫getElementsByTagName,document.childNodes之類的,它們都返回NodeList物件都屬於偽陣列。可以使用Array.prototype.slice.call(fakeArray)將陣列轉化為真正的Array物件。
31.Javascript中callee和caller的作用？
caller是返回一個對函式的引用，該函式呼叫了當前函式；
callee是返回正在被執行的function函式，也就是所指定的function物件的正文。
32.統計字串中字母個數或統計最多字母數。
var str = ‘asdfssaaasasasasaa’;
var json = {};
for (var i = 0; i < str.length; i++) {
if(!json[str.charAt(i)]){
json[str.charAt(i)] = 1;
}else{
json[str.charAt(i)]++;
}
};
var iMax = 0;
var iIndex = ”;
for(var i in json){
if(json[i]>iMax){
iMax =json[i];
iIndex= i;
}
}
alert(‘出現次數最多的是:’+iIndex+’出現’+iMax+’次’);
33.字串反轉，如將 ‘12345678’ 變成 ‘87654321’
/思路：先將字串轉換為陣列 split()，利用陣列的反序函式 reverse()顛倒陣列，再利用 jion() 轉換為字串
var str = ‘12345678’;
str =str.split(”).reverse().join(”);
34.將數字 12345678 轉化成 RMB形式如： 12,345,678
//思路：先將數字轉為字元， str= str + ” ;
//利用反轉函式，每三位字元加一個 ‘,’最後一位不加； re()是自定義的反轉函式，最後再反轉回去！
for(var i = 1; i <= re(str).length; i++){
tmp += re(str)[i -1];
if(i % 3 == 0&& i != re(str).length){
tmp += ‘,’;
}
}
35.BOM物件有哪些，列舉window物件？
1、window物件 ，是JS的最頂層物件，其他的BOM物件都是window物件的屬性；
2、document物件，文件物件；
3、location物件，瀏覽器當前URL資訊；
4、navigator物件，瀏覽器本身資訊；
5、screen物件，客戶端螢幕資訊；
6、history物件，瀏覽器訪問歷史資訊；
36.簡述readonly與disabled的區別
1、Readonly只針對input(text / password)和textarea有效，而disabled對於所有的表單元素都有效，
2、但是表單元素在使用了disabled後，當我們將表單以POST或GET的方式提交的話，這個元素的值不會被傳遞出去，而readonly會將該值傳遞出去（readonly接受值更改可以回傳，disable接受改但不回傳資料）。
37.css有個content屬性嗎？有什麼作用？有什麼應用？
css的content屬性專門應用在 before/after 偽元素上，用來插入生成內容。最常見的應用是利用偽類清除浮動。
//一種常見利用偽類清除浮動的程式碼
.clearfix:after {
content:”.”;//這裡利用到了content屬性
display:block;
height:0;
visibility:hidden;
clear:both; }
.clearfix { *zoom:1; }
after偽元素通過 content 在元素的後面生成了內容為一個點的塊級素，再利用clear:both清除浮動。
那麼問題繼續還有，知道css計數器（序列數字字元自動遞增）嗎？如何通過css content屬性實現css計數器？
css計數器是通過設定counter-reset 、counter-increment 兩個屬性 、及counter()/counters()一個方法配合after / before 偽類實現。
38.一次完整的HTTP事務是怎樣的一個過程？
基本流程：
a. 域名解析
b. 發起TCP的3次握手
c. 建立TCP連線後發起http請求
d. 伺服器端響應http請求，瀏覽器得到html程式碼
e. 瀏覽器解析html程式碼，並請求html程式碼中的資源
f. 瀏覽器對頁面進行渲染呈現給使用者
39.標籤上title與alt屬性的區別是什麼?
alt 當圖片不顯示是用文字代表。
title 為該屬性提供資訊
40.js繼承的幾種方式
(1)原型鏈：利用繼承讓一個引用型別繼承另一個引用型別的屬性和方法,本質就是重寫原型物件
每個建構函式都有一個原型物件，原型物件都包含一個指向建構函式的指標，而例項都包含一個指向原型物件內部的指標
SubType.prototype=newSuperType();//建立父類的例項，並將例項賦值給子類的原型
(2)借用建構函式，子型別的建構函式內部呼叫超型別的建構函式
functionSubType(){
SuperType.call(this); //繼承SuperType
}
(3)組合繼承，使用原型鏈實現對原型屬性和方法的繼承，借用建構函式實現對例項屬性的繼承。呼叫兩次超型別的建構函式，一次是在建立子型別的時候，另一次是在子型別建構函式的內部
functionSuperType(name){ this.name=name; }
SuperType.prototype.sayName=function(){
alert(this.name); }
functionSubType(name,age){
SuperType.call(this,name);
this.age=age;
}
(4)原型式繼承：基於已有的物件建立新的物件
function object(o){
functionF(){} //先定義臨時性建構函式
F.prototype=o; //傳入的物件作為這個建構函式的原型
return new F(); //返回臨時型別的例項
}
var person={
name:”MIKE”;
friends:[“A”,”B”,”C”];
};
varanotherPerson=object(person);
anotherPerson.name=”greg”;
anotherPerson.friedns.push(“D”);
alert(person.friends); //A B C D
person.friends不僅是person所有，而且會被anotherperson共享，相當於建立了person物件的兩個副本。
ES5規範了Object.create()原型式繼承,這個方法接收兩個引數，一是用作新物件原型的物件和一個為新物件定義額外屬性的物件。
(5)寄生式繼承： 建立一個僅用於封裝繼承過程的函式，該函式內部以某種方式增強物件
function createAnother(original){ //傳入的引數將要作為新物件基礎的物件
var clone=object(original);
clone.sayHi=function(){ //為clone物件新增一個新方法
alert(“hi”);
}
return clone;
}
varperson={
name:”MIKE”;
friends:[“A”,”B”,”C”]
};
varanotherPerson=createAnother(person);
anotherPerson.sayHi(); //新物件具有person的所有屬性和方法，還有自己的sayHi
(6)寄生組合式繼承
function inheritPrototype(subtype,superType){
var prototype=object(superType.prototype); //建立物件，建立超型別的一個副本
prototype.constructor=SubType; //增強物件，重寫失去的constructor屬性
SubType.prototype=prototype; //新建立物件的副本賦值給子型別的原型
}
inheritPrototype(SubType,SuperType);
41.寫一個function，清除字串前後的空格。
if (!String.prototype.trim) {
String.prototype.trim= function() {
returnthis.replace(/^\s+/, “”).replace(/\s+$/,”“);
}
}
42.事件型別
UI事件：load，unload，select,resize,scroll
焦點事件:blur, focus
滑鼠事件:click, dbclick, mousedown, mouseleave
滾輪事件:mousewheel
文字事件:textinput
鍵盤事件: keydown, keypress, keyup
43.js的淺拷貝和深拷貝
淺複製：淺複製是複製引用，複製後的引用都是指向同一個物件的例項，彼此之間的操作會互相影響
深複製：深複製不是簡單的複製引用，而是在堆中重新分配記憶體，並且把源物件例項的所有屬性都進行新建複製，以保證深複製的物件的引用圖不包含任何原有物件或物件圖上的任何物件，複製後的物件與原來的物件是完全隔離的
（1）陣列的淺拷貝和深拷貝
1）var arr =[“One”,”Two”,”Three”]; var arrto = arr;
如果只是將陣列的名字賦值給其他變數，改變其中一個，也會改變另一個。這種方式就是淺拷貝。
2）js的slice方法：array物件的slice函式，返回一個數組的一段。（仍為陣列）
var arr =[“One”,”Two”,”Three”];
var arrtoo = arr.slice(0); //從0開始，預設的結束時到最後
arrtoo[1] = “set Map”;
document.writeln(arr + “<br />”);//Export:陣列的原始值：One,Two,Three
document.writeln(arrtoo + “<br />”);//Export:陣列的新值：One,set Map,Three
3）concat() 方法用於連線兩個或多個數組。該方法不會改變現有的陣列，而僅僅會返回被連線陣列的一個副本。
var arr =[“One”,”Two”,”Three”];
var arrtooo = arr.concat();
arrtooo[1] = “set Map To”;
document.writeln(arr); // One,Two,Three
document.writeln(arrtooo); // One,set Map To,Three
4）function deepCopy(arry1,arry2){
for(var i = 0,l=arry1.length;i<l;i++){
arry2[i] =arry1[i];
} }
（2）物件的淺拷貝和深拷貝
1）JSON物件parse方法可以將JSON字串反序列化成JS物件，stringify方法可以將JS物件序列化成JSON字串，藉助這兩個方法，也可以實現物件的深複製。
varsource = {
name:”source”,
child:{
name:”child”
}
}
vartarget = JSON.parse(JSON.stringify(source));
target.name= “target”; //改變target的name屬性
console.log(source.name); //source
console.log(target.name); //target
target.child.name= “target child”; //改變target的child
console.log(source.child.name); //child
console.log(target.child.name); //target child
2）把物件的屬性遍歷一遍，賦給一個新的物件。
vardeepCopy= function(source) {
var result={};
for (var key insource) {
result[key] = typeof source[key]===’object’?deepCopy(source[key]): source[key];
} return result; }
44.常用的佈局，什麼是響應式佈局？
1. 固寬佈局：各個模組是固定寬度
特點：設計簡單，不會受到圖片等固定寬度內容的影響。對比高解析度的使用者，固定寬度會留下很多空白，螢幕小出現滾動條。
2. 流動佈局使用百分比的方式自適應不同的解析度
特點：對使用者友好，能夠部分自適應使用者的設定。網頁周圍的空白區域在所有解析度和顯示器下都是相同，視覺上美觀。設計者需要進行不同的測試，準備不同的對應素材
3. 彈性佈局使用em作為單位，em是相對單位，隨使用者字型大小變化而改變
特點：頁面中所有元素可以隨著使用者的偏好縮放，需要花更多的事件測試，讓佈局適合所有的使用者
4. 柵格化佈局，也分為固定式柵格，流式柵格
在網頁設計中，我們把寬度為“W”的頁面分割成n個網格單元“a”，每個單元與單元之間的間隙設為“i”,此時我們把“a+i”定義“A”。他們之間的關係如下：W =（a*n）+（n-1）*I，由於a+i=A，因此可得：(A×n) – i = W。注：最左右邊沒有邊距(margin-left,marign-right)。
特點：可以提高網頁的規範性和可用性。在柵格系統下，頁面模組的尺寸標準化。整個網站的各個頁面佈局一致，增加頁面的相似度。
5. 響應式佈局
允許頁面寬度自動調整，利用媒體查詢根據不同的寬度設定不同的樣式，液態佈局，自適應媒體（圖片，視訊）。
（1） 執行頁面寬度自動調整：在網頁頭部加入一張viewport元標籤
<metaname=”viewport” content=”width=device-width,initial-scale=1.0”>
網頁的寬度預設等於螢幕寬度，原始縮放比例是1，即網頁初始大小佔螢幕面積的100%
（2） 利用媒體查詢設定不同的樣式
<linkrel=”stylesheet” type=”text/css” href=”site.css” media=”screen”/>
<linkrel=”stylesheet” type=”text/css”href=”print.css” media=”print”>
screen:使用於計算機彩色螢幕
print：使用與列印預覽模式下檢視的內容或印表機列印的內容
45.Ajax工作原理，同步和非同步
Ajax就是通過JavaScript建立XMLHttpRequest物件，再由JavaScript呼叫XMLHttpRequest物件的方法完成非同步通訊；然後，再由JavaScript通過DOM的屬性和方法，完成頁面的不完全重新整理。
AJAX全稱為“Asynchronous JavaScript and XML”（非同步JavaScript和XML）
由事件觸發，建立一個XMLHttpRequest物件，把HTTP方法（Get/Post）和目標URL以及請求返回後的回撥函式設定到XMLHttpRequest物件，通過XMLHttpRequest向伺服器傳送請求，請求傳送後繼續響應使用者的介面互動，只有等到請求真正從伺服器返回的時候才呼叫callback()函式，對響應資料進行處理。
同步：指令碼會停留並等待伺服器傳送回覆然後再繼續
非同步：指令碼允許頁面繼續其程序並處理可能的回覆
（1）XMLHttpRequest簡介
XMLHttpRequest，是我們得以實現非同步通訊的的根本。
用XMLHttpRequest進行非同步通訊，首先必須用JavaScript建立一個XMLHttpRequest物件例項。建立XMLHttpRequest物件例項的程式碼清單如下所示：
var xmlHttp;
functioncreateXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp = newActiveXObject(“Microsoft.XMLHTTP”);
} elseif(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}
（2）利用XMLHttpRequest物件傳送簡單請求
1） 建立XMLHttpRequest物件例項。
2） 設定XMLHttpRequest物件的回撥函式，利用onreadystatechange屬性。
3） 設定請求屬性：設定HTTP方法（GET或POST）；設定目標URL。利用open()方法。
4） 將請求傳送給伺服器。利用send()方法。
（3）利用DOM對伺服器響應進行處理
前面已經設定了回撥函式，回撥函式正是用來處理伺服器響應資訊的。在伺服器對我們的請求資訊作出響應後，我們就得實現頁面的無縫更新（就是無閃爍的更新資訊）。通過DOM，我們可以把頁面上的資料和結構抽象成一個樹型表示，進而可以通過DOM中定義的屬性和方法對文件進行操作，如遍歷、編輯等。這樣，伺服器相應資訊就可以通過DOM的方法和屬性，動態的更新到頁面的相應節點。從而使使用者感覺不到重新整理過程的存在，提高了互動性。
（4）例項
例項包含兩個檔案：Request.htm和Response.xml。通過Request.htm向伺服器傳送請求，而Response.xml模仿了從伺服器返回的響應。兩個檔案清單如下：
<!–Request.htm———————————————————–>
<html>
<head>
<title>Ajax應用例項</title>
<scripttype=”text/javaScript”>
var xmlHttp;
varrequestType=”“;
functioncreateXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp = newActiveXObject(“Microsoft.XMLHTTP”);
}
else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}
functionstartRequest(theRequestType){
requestType= theRequestType;
createXMLHttpRequest();
xmlHttp.onreadystatechange =handleStateChange;
xmlHttp.open(“GET”,”Response.xml”,true);
xmlHttp.send(null);
}
functionmyCallback(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
if(requestType==”all”)
listAll();
elseif(requestType==”north”)
listNorth();
}
}
}
(1).AJAX的優點
<1>.無重新整理更新資料。
AJAX最大優點就是能在不重