1. javascript的typeof返回哪些數(shù)據(jù)類型.

答案：string,boolean,number,undefined,function,object

2. 例舉3種強制類型轉(zhuǎn)換和2種隱式類型轉(zhuǎn)換?

答案：強制（parseInt,parseFloat,number）

隱式（==? ===）

3. split() join() 的區(qū)別

答案：前者是將字符串切割成數(shù)組的形式，后者是將數(shù)組轉(zhuǎn)換成字符串

4. 數(shù)組方法pop() push() unshift() shift()

答案：push()尾部添加 pop()尾部刪除

unshift()頭部添加 shift()頭部刪除

5. IE和標準下有哪些兼容性的寫法

答案：

varev = ev ||window.eventdocument.documentElement.clientWidth ||document.body.clientWidthVar target = ev.srcElement||ev.target

6. ajax請求的時候get 和post方式的區(qū)別

答案：

一個在url后面 厦幅，一個放在虛擬載體里面

get有大小限制(只能提交少量參數(shù))

安全問題

應用不同 挡爵，請求數(shù)據(jù)和提交數(shù)據(jù)

7. call和apply的區(qū)別

答案：

Object.call(this,obj1,obj2,obj3)

Object.apply(this,arguments)

8. ajax請求時，如何解析json數(shù)據(jù)

答案：使用JSON.parse

9. 事件委托是什么

答案: 利用事件冒泡的原理蚌吸，讓自己的所觸發(fā)的事件踪栋，讓他的父元素代替執(zhí)行倦青！

10. 閉包是什么，有什么特性芜茵，對頁面有什么影響

答案：閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù),使得函數(shù)不被GC回收叙量，如果過多使用閉包，容易導致內(nèi)存泄露

11. 如何阻止事件冒泡

答案：ie:阻止冒泡ev.cancelBubble = true;非IE ev.stopPropagation();

12. 如何阻止默認事件

答案：(1)return false夕晓；(2) ev.preventDefault();

13. 添加 刪除 替換 插入到某個接點的方法

答案：

1）創(chuàng)建新節(jié)點

createElement()? //創(chuàng)建一個具體的元素

createTextNode()? //創(chuàng)建一個文本節(jié)點

2）添加宛乃、移除、替換蒸辆、插入

appendChild()? ? ? //添加

removeChild()? ? ? //移除

replaceChild()? ? ? //替換

insertBefore()? ? ? //插入

3）查找

getElementsByTagName()? ? //通過標簽名稱

getElementsByName()? ? //通過元素的Name屬性的值

getElementById()? ? ? ? //通過元素Id征炼，唯一性

14. 解釋jsonp的原理，以及為什么不是真正的ajax

答案：動態(tài)創(chuàng)建script標簽躬贡，回調(diào)函數(shù)

Ajax是頁面無刷新請求數(shù)據(jù)操作

15. document load 和document ready的區(qū)別

答案：document.onload 是在結(jié)構(gòu)和樣式,外部js以及圖片加載完才執(zhí)行js

document.ready是dom樹創(chuàng)建完成就執(zhí)行的方法谆奥，原生種沒有這個方法，jquery中有 $().ready(function)

16. ”==”和“===”的不同

答案：前者會自動轉(zhuǎn)換類型,再判斷是否相等

后者不會自動類型轉(zhuǎn)換拂玻，直接去比較

17. 函數(shù)聲明與函數(shù)表達式的區(qū)別酸些？

在Javscript中宰译，解析器在向執(zhí)行環(huán)境中加載數(shù)據(jù)時，對函數(shù)聲明和函數(shù)表達式并非是一視同仁的魄懂，解析器會率先讀取函數(shù)聲明沿侈，并使其在執(zhí)行任何代碼之前可用（可以訪問），至于函數(shù)表達式市栗，則必須等到解析器執(zhí)行到它所在的代碼行缀拭，才會真正被解析執(zhí)行。

18. 對作用域上下文和this的理解填帽，看下列代碼：

varUser = {count:1,getCount:function(){returnthis.count; }};console.log(User.getCount());// what?varfunc = User.getCount;console.log(func());// what?問兩處console輸出什么蛛淋？為什么？答案:是1和undefined篡腌『趾桑　　func是在window的上下文中被執(zhí)行的，所以不會訪問到count屬性嘹悼。

19. 看下面代碼叛甫，給出輸出結(jié)果。

for(vari =1; i <=3; i++){//建議使用let 可正常輸出i的值setTimeout(function(){console.log(i);? ? },0); };答案：444绘迁。原因：Javascript事件處理器在線程空閑之前不會運行合溺。

20. 當一個DOM節(jié)點被點擊時候，我們希望能夠執(zhí)行一個函數(shù)缀台，應該怎么做?

box.onlick= function(){}

box.addEventListener("click",function(){},false);

21. Javascript的事件流模型都有什么?

“事件冒泡”：事件開始由最具體的元素接受棠赛，然后逐級向上傳播

“事件捕捉”：事件由最不具體的節(jié)點先接收，然后逐級向下膛腐，一直到最具體的

“DOM事件流”：三個階段：事件捕捉睛约，目標階段，事件冒泡

22. 看下列代碼,輸出什么?解釋原因哲身。

vara =null;alert(typeofa);答案：object解釋：null是一個只有一個值的數(shù)據(jù)類型辩涝，這個值就是null。表示一個空指針對象勘天，所以用typeof檢測會返回”object”怔揩。

23. 判斷字符串以字母開頭，后面可以是數(shù)字脯丝，下劃線商膊，字母，長度為6-30

varreg=/^[a-zA-Z]\w{5,29}$/;

24. 回答以下代碼宠进，alert的值分別是多少晕拆？

vara =100;functiontest(){? ? ? ? ? alert(a);? ? ? a =10;//去掉了var 就變成定義了全局變量了alert(a);? }? test();alert(a);正確答案是： 100， 10材蹬， 10

25. javaScript的2種變量范圍有什么不同实幕？

全局變量：當前頁面內(nèi)有效

局部變量：函數(shù)方法內(nèi)有效

26. null和undefined的區(qū)別吝镣？

null是一個表示"無"的對象，轉(zhuǎn)為數(shù)值時為0昆庇；undefined是一個表示"無"的原始值末贾，轉(zhuǎn)為數(shù)值時為NaN。

當聲明的變量還未被初始化時凰锡，變量的默認值為undefined未舟。 null用來表示尚未存在的對象

undefined表示"缺少值"圈暗，就是此處應該有一個值掂为，但是還沒有定義。典型用法是：

（1）變量被聲明了员串，但沒有賦值時勇哗，就等于undefined。

（2）調(diào)用函數(shù)時寸齐，應該提供的參數(shù)沒有提供欲诺，該參數(shù)等于undefined。

（3）對象沒有賦值的屬性渺鹦，該屬性的值為undefined扰法。

（4）函數(shù)沒有返回值時，默認返回undefined毅厚。

null表示"沒有對象"塞颁，即該處不應該有值。典型用法是：

（1） 作為函數(shù)的參數(shù)吸耿，表示該函數(shù)的參數(shù)不是對象祠锣。

（2） 作為對象原型鏈的終點。

27. new操作符具體干了什么呢?

1咽安、創(chuàng)建一個空對象伴网，并且 this 變量引用該對象，同時還繼承了該函數(shù)的原型妆棒。

2澡腾、屬性和方法被加入到 this 引用的對象中。

3糕珊、新創(chuàng)建的對象由 this 所引用动分，并且最后隱式的返回 this 。

28. js延遲加載的方式有哪些放接？

defer和async刺啦、動態(tài)創(chuàng)建DOM方式（創(chuàng)建script，插入到DOM中纠脾，加載完畢后callBack）玛瘸、按需異步載入js

29. Flash蜕青、Ajax各自的優(yōu)缺點，在使用中如何取舍糊渊？

Flash ajax對比

(1)Flash適合處理多媒體右核、矢量圖形、訪問機器渺绒；對CSS贺喝、處理文本上不足，不容易被搜索宗兼。

(2)ajax對CSS躏鱼、文本支持很好，支持搜索殷绍；多媒體染苛、矢量圖形、機器訪問不足主到。

共同點：與服務器的無刷新傳遞消息茶行、用戶離線和在線狀態(tài)、操作DOM

30. 寫一個獲取非行間樣式的函數(shù)

functiongetStyle(obj,attr){if(obj.currentStyle) {returnobj.currentStyle[attr];}else{getComputedStyle(obi,false)[attr] }}

31. 希望獲取到頁面中所有的checkbox怎么做登钥？(不使用第三方框架)

varinputs =document.getElementsByTagName("input");//獲取所有的input標簽對象varcheckboxArray = [];//初始化空數(shù)組畔师，用來存放checkbox對象。for(vari=0;i

32. 寫一個function牧牢，清除字符串前后的空格看锉。（兼容所有瀏覽器）

String.prototype.trim=function(){returnthis.replace(/^\s+/,"").replace(/\s+$/,"");}

33. javascript語言特性中，有很多方面和我們接觸的其他編程語言不太一樣,請舉例

javascript語言實現(xiàn)繼承機制的核心就是? 1? (原型)结执，而不是Java語言那樣的類式繼承度陆。Javascript解析引擎在讀取一個Object的屬性的值時，會沿著? 2? (原型鏈)向上尋找献幔，如果最終沒有找到懂傀，則該屬性值為? 3? undefined；如果最終找到該屬性的值蜡感，則返回結(jié)果蹬蚁。與這個過程不同的是，當javascript解析引擎執(zhí)行“給一個Object的某個屬性賦值”的時候郑兴，如果當前Object存在該屬性犀斋，則改寫該屬性的值，如果當前的Object本身并不存在該屬性情连，則賦值該屬性的值叽粹。

34. Cookie在客戶機上是如何存儲的

Cookies就是服務器暫存放在你的電腦里的文本文件，好讓服務器用來辨認你的計算機。當你在瀏覽網(wǎng)站的時候虫几，Web服務器會先送一小小資料放在你的計算機上锤灿，Cookies 會幫你在網(wǎng)站上所打的文字或是一些選擇都記錄下來。當下次你再訪問同一個網(wǎng)站辆脸，Web服務器會先看看有沒有它上次留下的Cookies資料但校，有的話，就會依據(jù)Cookie里的內(nèi)容來判斷使用者啡氢，送出特定的網(wǎng)頁內(nèi)容給你状囱。

35. 如何獲取javascript三個數(shù)中的最大值和最小值？

Math.max(a,b,c);//最大值

Math.min(a,b,c)//最小值

36. javascript是面向?qū)ο蟮奶仁牵趺大w現(xiàn)javascript的繼承關(guān)系亭枷？

使用prototype原型來實現(xiàn)。

37. .form中的input可以設(shè)置為readonly和disable辨绊，請問2者有什么區(qū)別奶栖？

readonly不可編輯，但可以選擇和復制门坷；值可以傳遞到后臺

disabled不能編輯，不能復制袍镀，不能選擇默蚌；值不可以傳遞到后臺

38. 列舉javaScript的3種主要數(shù)據(jù)類型，2種復合數(shù)據(jù)類型和2種特殊數(shù)據(jù)類型苇羡。

主要數(shù)據(jù)類型：string, boolean, number

復合數(shù)據(jù)類型：function, object

特殊類型：undefined绸吸，null

39. 程序中捕獲異常的方法？

try{ }catch(e){ }finally{ }

40. Ajax原理

(1)創(chuàng)建對象varxhr =newXMLHttpRequest();(2)打開請求xhr.open('GET','example.txt',true);(3)發(fā)送請求xhr.send(); 發(fā)送請求到服務器(4)接收響應xhr.onreadystatechange =function(){}(1)當readystate值從一個值變?yōu)榱硪粋€值時设江，都會觸發(fā)readystatechange事件锦茁。(2)當readystate==4時嫂侍，表示已經(jīng)接收到全部響應數(shù)據(jù)驱证。(3)當status ==200時，表示服務器成功返回頁面和數(shù)據(jù)扬霜。(4)如果(2)和(3)內(nèi)容同時滿足歼捏，則可以通過xhr.responseText稿存，獲得服務器返回的內(nèi)容。

41. 解釋什么是Json:

(1)JSON 是一種輕量級的數(shù)據(jù)交換格式瞳秽。

(2)JSON 獨立于語言和平臺瓣履，JSON 解析器和 JSON 庫支持許多不同的編程語言。

(3)JSON的語法表示三種類型值练俐，簡單值(字符串袖迎，數(shù)值，布爾值，null),數(shù)組燕锥，對象

42. js中的3種彈出式消息提醒（警告窗口浴韭，確認窗口，信息輸入窗口）的命令式什么脯宿？

alert

confirm

prompt

43. 以下代碼執(zhí)行結(jié)果

varuname ='jack'functionchange(){? ? alert(uname)// ?varuname ='lily'alert(uname)//?}change()分別alert出undefined念颈，lily，（變量聲明提前問題）

44. 瀏覽器的滾動距離：

可視區(qū)域距離頁面頂部的距離

scrollTop=document.documentElement.scrollTop||document.body.scrollTop

45. 可視區(qū)的大辛埂：

(1)innerXXX（不兼容ie）

window.innerHeight 可視區(qū)高度榴芳，包含滾動條寬度

window.innerWidth? 可視區(qū)寬度，包含滾動條寬度

(2)document.documentElement.clientXXX(兼容ie)

document.documentElement.clientWidth可視區(qū)寬度跺撼，不包含滾動條寬度

document.documentElement.clientHeight可視區(qū)高度窟感，不包含滾動條寬度

46. 節(jié)點的種類有幾種，分別是什么歉井？

(1)元素節(jié)點：nodeType ===1;

(2)文本節(jié)點：nodeType ===3;

(3)屬性節(jié)點：nodeType ===2;

47. innerHTML和outerHTML的區(qū)別

innerHTML(元素內(nèi)包含的內(nèi)容）

outerHTML(自己以及元素內(nèi)的內(nèi)容）

48. offsetWidth offsetHeight和clientWidth clientHeight的區(qū)別

(1)offsetWidth （content寬度+padding寬度+border寬度）

(2)offsetHeight（content高度+padding高度+border高度）

(3)clientWidth（content寬度+padding寬度）

(4)clientHeight（content高度+padding高度）

49. 閉包的好處

(1)希望一個變量長期駐扎在內(nèi)存當中(不被垃圾回收機制回收)

(2)避免全局變量的污染

(3)私有成員的存在

(4)安全性提高

50. 冒泡排序算法

冒泡排序vararray= [5,4,3,2,1];vartemp =0;for(vari =0; i array[j +1]){temp =array[j +1];array[j +1] =array[j];array[j] = temp; }}

51柿祈、js 實現(xiàn)一個函數(shù)對javascript中json 對象進行克隆

varoldObject ="sdf";varnewObject =JSON.parse(JSON.stringify(oldObject));console.log(newObject);或者vara ='dddd';functioncp(a){returnJSON.parse(JSON.stringify(a))}console.log(cp(a));

52、js 實現(xiàn) ajax 請求或者submit請求時 鎖屏功能以及開鎖功能（請求時界面Loading以及元素不能點擊哩至，請求完成即消除Loading）

function(url, fn) {

var obj = new XMLHttpRequest(); // XMLHttpRequest對象用于在后臺與服務器交換數(shù)據(jù)

obj.open('GET', url, true);

obj.onreadystatechange = function() {

if(obj.readyState == 4 && obj.status == 200||obj.status == 304) {

loading.style.display ="none"}else{? ? ? ? ? ? ? alert("不能點擊,哈哈哈!");? ? ? ? ? ? }? };

obj.send(null);

}

53躏嚎、js 實現(xiàn)一個函數(shù) 獲得url參數(shù)的值

functiongetQueryString(name){varreg =newRegExp("(^|&)"+ name +"=([^&]*)(&|$)","i");varr =window.location.search.substr(1).match(reg);if(r !=null)returnunescape(r[2]);returnnull; }

54、請用js計算1-10000中出現(xiàn)的0 的次數(shù)

newArray(10000).fill('').map((_, index) =>index +1).filter(item=>/0/.test(item)).reduce((count, item) =>{returncount + (String(item).match(/0/g) || []).length},0)

55菩貌、寫一個function卢佣，清除字符串前后的空格。（兼容所有瀏覽器）

functiontrim(str){if(str &typeofstr ==="string") {returnstr.replace(/(^s*)|(s*)$/g,"");//去除前后空白符}}

56箭阶、降維數(shù)組

vararr=[[1,2],[3,4]];functionJw(obj){returnArray.prototype.concat.apply([],obj);}Jw(arr);

57虚茶、將url的查詢參數(shù)解析成字典對象

···

function getQueryObject(url) {

url = url == null ? window.location.href : url;

var search = url.substring(url.lastIndexOf("?") + 1);

var obj = {};

var reg = /([?&=]+)=([?&=]*)/g;

search.replace(reg, function (rs,

2) {

var name = decodeURIComponent(

2);

val = String(val);

obj[name] = val;

return rs;

});

return obj;

}

···

58、判斷一個字符串中出現(xiàn)次數(shù)最多的字符仇参，統(tǒng)計這個次數(shù)

···

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('出現(xiàn)次數(shù)最多的是:'+iIndex+'出現(xiàn)'+iMax+'次');

···

59嘹叫、編寫一個方法 求一個字符串的字節(jié)長度;

···

//假設(shè)一個中文占兩個字節(jié)

var str = '22兩是';

alert(getStrlen(str))

function getStrlen(str){

var json = {len:0};

var re = /[\u4e00-\u9fa5]/;

for (var i = 0; i < str.length; i++) {

if(re.test(str.charAt(i))){

json['len']++;

}

};

return json['len']+str.length;

}

···

60、編寫一個方法 去掉一個數(shù)組的重復元素

···

var arr = [1,2,3,1,43,12,12,1];

var json = {};

var arr2 = [];

for (var i = 0; i < arr.length; i++) {

if(!json[arr[i]]){

json[arr[i]] = true;

}else{

json[arr[i]] = false;

}

if(json[arr[i]]){? ? ? ? ? ? arr2.push(arr[i]);? ? }

};

for (var i = 0; i < arr.length; i++) {

if(!aa(arr[i], arr2)){

arr2.push(arr[i])

}

};

function aa(obj, arr){

for (var i = 0; i < arr.length; i++) {

if(arr[i] == obj) return true;

else return false;

};

}

alert(arr2)

···

61诈乒、寫出3個使用this的典型應用

事件： 如onclick? this->發(fā)生事件的對象

構(gòu)造函數(shù)? ? ? ? ? this->new 出來的object

call/apply? ? ? ? 改變this

62罩扇、如何深度克隆

···

var arr = [1,2,43];

var json = {a:6,b:4,c:[1,2,3]};

var str = 'sdfsdf';

var json2 = clone(json);

alert(json['c'])

function clone(obj){

var oNew = new obj.constructor(obj.valueOf());

if(obj.constructor == Object){

for(var i in obj){

oNew[i] = obj[i];

if(typeof(oNew[i]) == 'object'){

clone(oNew[i]);

}

}

}

return oNew;

}

···

63、JavaScript中如何檢測一個變量是一個String類型抓谴？請寫出函數(shù)實現(xiàn)

···

typeof(obj) == 'string'

obj.constructor == String;

···

64暮蹂、網(wǎng)頁中實現(xiàn)一個計算當年還剩多少時間的倒數(shù)計時程序，要求網(wǎng)頁上實時動態(tài)顯示“××年還拾┭梗××天××時××分××秒”

···

var oDate = new Date();

var oYear = oDate.getFullYear();

var oNewDate = new Date();

oNewDate.setFullYear(oYear, 11, 31, 23, 59, 59);

var iTime = oNewDate.getTime()-oDate.getTime();

var iS = iTime/1000;

var iM = oNewDate.getMonth()-oDate.getMonth();

var iDate =iS

···

65仰泻、請解釋一下什么是語義化的HTML。

內(nèi)容使用特定標簽滩届，通過標簽就能大概了解整體頁面的布局分布

66集侯、為什么利用多個域名來存儲網(wǎng)站資源會更有效被啼？

確保用戶在不同地區(qū)能用最快的速度打開網(wǎng)站，其中某個域名崩潰用戶也能通過其他郁悶訪問網(wǎng)站

67棠枉、請說出三種減低頁面加載時間的方法

1浓体、壓縮css、js文件

2辈讶、合并js命浴、css文件，減少http請求

3贱除、外部js生闲、css文件放在最底下

4、減少dom操作月幌，盡可能用變量替代不必要的dom操作

68碍讯、什么是FOUC？你如何來避免FOUC扯躺？

由于css引入使用了@import 或者存在多個style標簽以及css文件在頁面底部引入使得css文件加載在html之后導致頁面閃爍捉兴、花屏

用link加載css文件，放在head標簽里面

69录语、文檔類型的作用是什么倍啥？你知道多少種文檔類型？

影響瀏覽器對html代碼的編譯渲染

html2.0

xHtml

html5

70钦无、瀏覽器標準模式和怪異模式之間的區(qū)別是什么逗栽？

盒模型解釋不同

71、閉包

子函數(shù)能被外部調(diào)用到失暂，則該作用連上的所有變量都會被保存下來。

72鳄虱、請解釋什么是Javascript的模塊模式弟塞，并舉出實用實例。

js模塊化mvc（數(shù)據(jù)層拙已、表現(xiàn)層决记、控制層）

seajs

命名空間

73、你如何組織自己的代碼倍踪？是使用模塊模式系宫，還是使用經(jīng)典繼承的方法？

對內(nèi)：模塊模式

對外：繼承

74建车、你如何優(yōu)化自己的代碼扩借？

代碼重用

避免全局變量（命名空間，封閉空間缤至，模塊化mvc..）

拆分函數(shù)避免函數(shù)過于臃腫

注釋

75潮罪、你能解釋一下JavaScript中的繼承是如何工作的嗎？

子構(gòu)造函數(shù)中執(zhí)行父構(gòu)造函數(shù)，并用call\apply改變this

克隆父構(gòu)造函數(shù)原型上的方法

76嫉到、請盡可能詳盡的解釋AJAX的工作原理沃暗。

創(chuàng)建ajax對象（XMLHttpRequest/ActiveXObject(Microsoft.XMLHttp)）

判斷數(shù)據(jù)傳輸方式(GET/POST)

打開鏈接 open()

發(fā)送 send()

當ajax對象完成第四步（onreadystatechange）數(shù)據(jù)接收完成，判斷http響應狀態(tài)（status）200-300之間或者304（緩存）執(zhí)行回調(diào)函數(shù)

77何恶、最簡單的一道題

···

var a = 2, b = 3;

var c = a+++b; // c = 5

···

78孽锥、var和function的預解析問題,以及變量和function的先后順序的問題

···

// 以下代碼執(zhí)行輸出結(jié)果是什么

function b () {

console.log(a);

var a = 10;

function a() {};

a = 100;

console.log(a);

}

b();

functionc(){console.log(a);functiona(){};vara =10;? ? a =100;console.log(a);}c();(functiond(num){console.log(num);varnum =10;}(100))(functione(num){console.log(num);varnum =10;functionnum(){};}(100))(functionf(num){functionnum(){};console.log(num);varnum =10console.log(num);}(100))//仍然是預解析(在與解析過程中還要考慮一下當前變量的作用于)functionm(){console.log(a1);// underfinedconsole.log(a2);// underfinedconsole.log(b1);// underfinedconsole.log(b2);// underfinedif(false) {functionb1(){};vara1 =10;? ? }if(true) {functionb2(){};vara2 =10;? ? }console.log(a1);// underfinedconsole.log(a2);// 10console.log(b1);// underfinedconsole.log(b2);// function}m();functionn(){if(2>1) {? ? ? ? arr =10;? ? ? ? brr =10;letarr;varbrr;console.log(arr);console.log(brr);? ? }}n();// ReferenceError

···

79、dom事件委托什么原理细层，有什么優(yōu)缺點

事件委托原理:事件冒泡機制

優(yōu)點

1.可以大量節(jié)省內(nèi)存占用惜辑，減少事件注冊。比如ul上代理所有l(wèi)i的click事件就很不錯今艺。

2.可以實現(xiàn)當新增子對象時韵丑，無需再對其進行事件綁定，對于動態(tài)內(nèi)容部分尤為合適

缺點

事件代理的常用應用應該僅限于上述需求虚缎，如果把所有事件都用事件代理撵彻，可能會出現(xiàn)事件誤判。即本不該被觸發(fā)的事件被綁定上了事件实牡。

80陌僵、http的cache機制，以及200狀態(tài)下怎么實現(xiàn) from cache（表示接觸最多的就是304的from cache）（用于優(yōu)化创坞，沒有接觸過碗短，需要理解）

含義

定義：瀏覽器緩存（Browser Caching）是為了加速瀏覽，瀏覽器在用戶磁盤上對最近請求過的文檔進行存儲题涨，當訪問者再次請求這個頁面時偎谁，瀏覽器就可以從本地磁盤顯示文檔，這樣就可以加速頁面的閱覽纲堵。

作用

cache的作用：

1巡雨、減少延遲，讓你的網(wǎng)站更快席函，提高用戶體驗铐望。

2、避免網(wǎng)絡擁塞茂附，減少請求量正蛙，減少輸出帶寬。

實現(xiàn)手段

Cache-Control中的max-age是實現(xiàn)內(nèi)容cache的主要手段营曼，共有3種常用策略：max-age和Last-Modified（If-Modified-Since）的組合乒验、僅max-age、max-age和ETag的組合溶推。

對于強制緩存徊件，服務器通知瀏覽器一個緩存時間奸攻，在緩存時間內(nèi)，下次請求虱痕，直接用緩存睹耐，不在時間內(nèi)，執(zhí)行比較緩存策略部翘。

對于比較緩存硝训，將緩存信息中的Etag和Last-Modified通過請求發(fā)送給服務器，由服務器校驗新思，返回304狀態(tài)碼時窖梁，瀏覽器直接使用緩存。

81夹囚、一個原型鏈繼承的問題

// 有一個構(gòu)造函數(shù)A纵刘，寫一個函數(shù)B，繼承AfunctionA(num){this.titileName = num;? ? }? ? A.prototype = {fn1:function(){},fn2:function(){}? ? }

這個問題的關(guān)注點是B繼承的A的靜態(tài)屬性荸哟，同時B的原型鏈中不存在A實例的titleName屬性

82假哎、什么是虛擬dom

React為啥這么大？因為它實現(xiàn)了一個虛擬DOM（Virtual DOM）鞍历。虛擬DOM是干什么的舵抹？這就要從瀏覽器本身講起

如我們所知，在瀏覽器渲染網(wǎng)頁的過程中劣砍，加載到HTML文檔后惧蛹，會將文檔解析并構(gòu)建DOM樹，然后將其與解析CSS生成的CSSOM樹一起結(jié)合產(chǎn)生愛的結(jié)晶——RenderObject樹刑枝，然后將RenderObject樹渲染成頁面（當然中間可能會有一些優(yōu)化香嗓，比如RenderLayer樹）。這些過程都存在與渲染引擎之中装畅，渲染引擎在瀏覽器中是于JavaScript引擎（JavaScriptCore也好V8也好）分離開的陶缺，但為了方便JS操作DOM結(jié)構(gòu)，渲染引擎會暴露一些接口供JavaScript調(diào)用洁灵。由于這兩塊相互分離，通信是需要付出代價的掺出，因此JavaScript調(diào)用DOM提供的接口性能不咋地徽千。各種性能優(yōu)化的最佳實踐也都在盡可能的減少DOM操作次數(shù)。

而虛擬DOM干了什么汤锨？它直接用JavaScript實現(xiàn)了DOM樹（大致上）双抽。組件的HTML結(jié)構(gòu)并不會直接生成DOM，而是映射生成虛擬的JavaScript DOM結(jié)構(gòu)闲礼，React又通過在這個虛擬DOM上實現(xiàn)了一個 diff 算法找出最小變更牍汹，再把這些變更寫入實際的DOM中铐维。這個虛擬DOM以JS結(jié)構(gòu)的形式存在，計算性能會比較好慎菲，而且由于減少了實際DOM操作次數(shù)嫁蛇，性能會有較大提升

83、js基礎(chǔ)數(shù)據(jù)類型和引用類型分別是什么露该？這個前提條件下寫一個getType睬棚，返回相應的類型

1.基本數(shù)據(jù)類型（自身不可拆分的）：Undefined、Null解幼、Boolean抑党、Number、String

2.引用數(shù)據(jù)類型（對象）：Object （Array撵摆，Date底靠，RegExp，F(xiàn)unction）

ES6基本數(shù)據(jù)類型多了個symbol 據(jù)說這道題刷了百分之二十的人 感謝Abbyshen提出

functiongettype(nm){returnObject.prototype.toString.call(nm);}

84特铝、 dom選擇器優(yōu)先級是什么暑中，以及權(quán)重值計算（一道老問題了）

1.行內(nèi)樣式 1000

2.id 0100

3.類選擇器、偽類選擇器苟呐、屬性選擇器[type="text"] 0010

4.標簽選擇器痒芝、偽元素選擇器(::first-line) 0001

5.通配符*、子選擇器牵素、相鄰選擇器 0000

85严衬、vue雙向數(shù)據(jù)綁定的原理是什么

首先傳輸對象的雙向數(shù)據(jù)綁定 Object.defineProperty(target, key, decription),在decription中設(shè)置get和set屬性（此時應注意description中g(shù)et和set不能與描述屬性共存）

數(shù)組的實現(xiàn)與對象不同。

同時運用觀察者模式實現(xiàn)wather笆呆，用戶數(shù)據(jù)和view視圖的更新

86请琳、 react和vue比較來說有什么區(qū)別

1 component層面，web component和virtual dom

2 數(shù)據(jù)綁定（vue雙向赠幕，react的單向）等好多

3 計算屬性 vue 有俄精，提供方便；而 react 不行

4 vue 可以 watch 一個數(shù)據(jù)項榕堰；而 react 不行

5 vue 由于提供的 direct 特別是預置的 directive 因為場景場景開發(fā)更容易竖慧；react 沒有

6 生命周期函數(shù)名太長 directive

87、git使用過程中逆屡，如果你在開發(fā)著業(yè)務圾旨，突然另一個分支有一個bug要改，你怎么辦

git stash//將本次修改存到暫存區(qū)（緊急切換分支時）git stash pop//將所有暫存區(qū)的內(nèi)容取出來

88魏蔗、 網(wǎng)頁布局有哪幾種砍的，有什么區(qū)別

靜態(tài)、自適應莺治、流式廓鞠、響應式四種網(wǎng)頁布局

靜態(tài)布局：意思就是不管瀏覽器尺寸具體是多少帚稠，網(wǎng)頁布局就按照當時寫代碼的布局來布置；

自適應布局：就是說你看到的頁面床佳，里面元素的位置會變化而大小不會變化滋早；

流式布局：你看到的頁面，元素的大小會變化而位置不會變化——這就導致如果屏幕太大或者太小都會導致元素無法正常顯示夕土。

自適應布局：每個屏幕分辨率下面會有一個布局樣式馆衔，同時位置會變而且大小也會變。

89怨绣、執(zhí)行下面代碼

vara = {};varb = {key:'b'};varc = {key:'c'};vard = [3,5,6];a[b] =123;a[c] =345;a[d] =333;console.log(a[b]);// 345console.log(a[c]);// 345console.log(a[d]);// 333

90角溃、

varR = (function(){varu = {a:1,b:2};varr = {fn:function(k){returnu[k];? ? ? ? ? ? }? ? ? ? }returnr;? ? }());? ? R.fn('a');// 1

上述代碼中如何獲取匿名函數(shù)中的u

91、不適用循環(huán)語句（包括map篮撑、forEach方法）實現(xiàn)一個100長度的數(shù)組减细，索引值和值相同的數(shù)組[0,1,2,3,4,5........99]

vararr =newArray(100);//方法1[...arr.keys()];//方法二Array.from(arr.keys());//方法三Array.from({length:100});// 方法四 借助stringvararr1 =newArray(101);varstr = arr1.join('1,');str = str.replace(/(1\,)/g,function($0, $1, index){varstart =''+Math.ceil(index/2);if(index < str.length -2) {? ? ? ? start +=','}returnstart;});returnstr.split(',');// 方法五（函數(shù)式，參考網(wǎng)絡）functionreduce(arr, val){if(Object.prototype.toString.apply(val)){return;? ? }if(val >=100) {returnarr;? ? }? ? arr.push(val);returnreduce(arr, val+1);}varres = reduce([],0)

92赢笨、下面語句執(zhí)行結(jié)果輸出

vara =function(val, index){console.log(index);return{fn:function(name){returna(name, val);? ? ? ? }? ? }}varb = a(0);// underfinedb.fn(1);// 0b.fn(2);// 0b.fn(3);// 0

93未蝌、科普

dom節(jié)點的根節(jié)點是不是body

回答： 不是，dom節(jié)點的根節(jié)點是html(包含head和body茧妒，head中分為meta萧吠、title等。body又分為一組)

2）dom元素都會有offsetParent嗎

回答： offsetParent屬性返回一個對象的引用桐筏，這個對象是距離調(diào)用offsetParent的元素最近的（在包含層次中最靠近的）纸型，并且是已進行過CSS定位的容器元素。 如果這個容器元素未進行CSS定位, 則offsetParent屬性的取值為根元素(在標準兼容模式下為html元素梅忌；在怪異呈現(xiàn)模式下為body元素)的引用狰腌。 當容器元素的style.display 被設(shè)置為 "none"時（譯注：IE和Opera除外），offsetParent屬性 返回 null牧氮。

[1,3,5]轉(zhuǎn)譯成字符串是什么

回答： '1,3,5'

調(diào)用toString方法琼腔，生成該字符串

4）li標簽的祖級元素可以為li，父級元素也可以為例

回答： 錯誤

94踱葛、 jsonp原理丹莲，jquery是怎么實現(xiàn)的，這樣實現(xiàn)有什么好處和壞處

原理

在同源策略下;在某個服務器下的頁面是無法獲取到該服務器以外的數(shù)據(jù)的;Jquery中ajax 的核心是通過 XmlHttpRequest獲取非本頁內(nèi)容尸诽，而jsonp的核心則是動態(tài)添加 標簽來調(diào)用服務器提供的 js腳本

當我們正常地請求一個JSON數(shù)據(jù)的時候圾笨，服務端返回的是一串 JSON類型的數(shù)據(jù)，而我們使用 JSONP模式來請求數(shù)據(jù)的時候服務端返回的是一段可執(zhí)行的 JavaScript代碼逊谋。因為jsonp 跨域的原理就是用的動態(tài)加載 script的src ，所以我們只能把參數(shù)通過 url的方式傳遞, 所以jsonp的 type類型只能是get 土铺！

$.ajax({url:'http://192.168.1.114/yii/demos/test.php',//不同的域type:'GET',//jsonp模式只有GET 是合法的data:{'action':'aaron'},dataType:'jsonp',//數(shù)據(jù)類型jsonp:'backfunc',//指定回調(diào)函數(shù)名胶滋，與服務器端接收的一致板鬓，并回傳回來})其實jquery 內(nèi)部會轉(zhuǎn)化成http://192.168.1.114/yii/demos/test.php?backfunc=jQuery2030038573939353227615_1402643146875&action=aaron然后動態(tài)加載

然后后端就會執(zhí)行backfunc(傳遞參數(shù) )，把數(shù)據(jù)通過實參的形式發(fā)送出去究恤。

在jquery 源碼中俭令， jsonp的實現(xiàn)方式是動態(tài)添加<script>標簽來調(diào)用服務器提供的 js腳本。jquery 會在window對象中加載一個全局的函數(shù)部宿，當 <script>代碼插入時函數(shù)執(zhí)行抄腔，執(zhí)行完畢后就 <script>會被移除。同時jquery還對非跨域的請求進行了優(yōu)化理张，如果這個請求是在同一個域名下那么他就會像正常的 Ajax請求一樣工作赫蛇。

95、 http協(xié)議屬于七層協(xié)議中的哪一層雾叭，下一層是什么

七層結(jié)構(gòu)：物理層悟耘、數(shù)據(jù)鏈路層、網(wǎng)絡層织狐、傳輸層暂幼、會話層、表示層移迫、應用層

tcp屬于傳輸層旺嬉；http屬于應用層。

表現(xiàn)層

96厨埋、 js垃圾回收機制知道哪些邪媳，v8引擎使用的哪一種

js的兩種回收機制

1 標記清除（mark and sweep）

2 引用計數(shù)（reference counting）

javascript與V8引擎

垃圾回收機制的好處和壞處

好處：大幅簡化程序的內(nèi)存管理代碼，減輕程序猿負擔揽咕，并且減少因為長時間運轉(zhuǎn)而帶來的內(nèi)存泄露問題悲酷。

壞處：自動回收意味著程序猿無法掌控內(nèi)存。ECMAScript中沒有暴露垃圾回收的借口亲善，我們無法強迫其進行垃圾回收设易，更加無法干預內(nèi)存管理。

V8 自動垃圾回收算法

https://segmentfault.com/a/11...

97蛹头、 作用域什么時候生成的顿肺？

頁面加載-->創(chuàng)建window全局對象，并生成全局作用域-->然后生成執(zhí)行上下文渣蜗，預解析變量(變量提升)屠尊，生成全局變量對象；

$scope

98耕拷、 websocket長連接原理是什么

含義

Websocket是一個持久化的協(xié)議讼昆，相對于HTTP這種非持久的協(xié)議來說。

原理

類似長輪循長連接 ; 發(fā)送一次請求 ; 源源不斷的得到信息

28. http緩存知道哪些

http://blog.csdn.net/yzf91321...

99骚烧、 講一下事件循環(huán)機制

執(zhí)行上下文(Execution context)

函數(shù)調(diào)用棧(call stack)

隊列數(shù)據(jù)結(jié)構(gòu)(queue)

Promise

https://zhuanlan.zhihu.com/p/...

100浸赫、 理解web安全嗎闰围？都有哪幾種，介紹以及如何預防

1.XSS既峡，也就是跨站腳本注入

攻擊方法：1\. 手動攻擊:編寫注入腳本羡榴，比如”/>alert(document.cookie());, alt, 等4\. 凈化和過濾掉不必要的Javascript的事件標簽，比如：onclick, onfocus等5\. 轉(zhuǎn)義單引號运敢，雙引號校仑，尖括號等特殊字符，可以采用htmlencode編碼 或者過濾掉這些特殊字符6\. 設(shè)置瀏覽器的安全設(shè)置來防范典型的XSS注入-->

2.SQL注入

攻擊方法：編寫惡意字符串传惠，比如‘or1=1--等迄沫，手動測試目標網(wǎng)站上所有涉及數(shù)據(jù)庫操作的地方防御方法：1\. 禁止目標網(wǎng)站利用動態(tài)拼接字符串的方式訪問數(shù)據(jù)庫2\. 減少不必要的數(shù)據(jù)庫拋出的錯誤信息3\. 對數(shù)據(jù)庫的操作賦予嚴格的權(quán)限控制4\. 凈化和過濾掉不必要的SQL保留字，比如：where,or,exec等5\. 轉(zhuǎn)義單引號涉枫，上引號邢滑，尖括號等特殊字符，可以采用htmlencode編碼 或者過濾掉這些特殊字符

3.CSRF愿汰，也就是跨站請求偽造

就是攻擊者冒用用戶的名義困后，向目標站點發(fā)送請求防范方法：1\. 在客戶端進行cookie的hashing，并在服務端進行hash認證2\. 提交請求是需要填寫驗證碼3\. 使用One-Time Tokens為不同的表單創(chuàng)建不同的偽隨機值

101衬廷、 sessionStorage和localstorage能跨域拿到嗎摇予？比如我在www.baidu.com設(shè)置的值能在m.baidu.com能拿到嗎？為什么

localStorage會跟cookie一樣受到跨域的限制吗跋，會被document.domain影響

102侧戴、 localstorage不能手動刪除的時候，什么時候過期

除非被清除跌宛，否則永久保存 clear()可清楚

sessionStorage 僅在當前會話下有效酗宋，關(guān)閉頁面或瀏覽器后被清除

103、cookie可以設(shè)置什么域疆拘？可以設(shè)置.com嗎

可以通過設(shè)置domin來實現(xiàn)

104蜕猫、登錄狀態(tài)的保存你認為可以保存在sessionstorage或者localstorage或者cookie或者你知道的哪種方式，存在了哪里哎迄？回右？為什么保存在那里

105、 flux -> redux -> mobx 變化的本質(zhì)是什么

存儲結(jié)構(gòu) 將對象加工可觀察 函數(shù)式 vs 面向?qū)ο?/p>

https://zhuanlan.zhihu.com/p/...

106漱挚、 按需加載路由怎么加載對應的chunk文件的翔烁？換句話說瀏覽器怎么知道什么時候加載這個chunk，以及webpack是怎么識別那個多個經(jīng)過hash過的chunk文件

107旨涝、get和post有什么區(qū)別蹬屹？get可以通過body傳遞數(shù)據(jù)嗎

把數(shù)據(jù)放到 body 里面，必須用 POST 方式取，這是 HTTP 協(xié)議限制的哩治。

108秃踩、右邊寬度固定，左邊自適應

第一種：

body{display: flex;}.left{background-color: rebeccapurple;height:200px;flex:1;}.right{background-color: red;height:200px;width:100px;}

第二種

div{height:200px;? ? }.left{float: right;width:200px;background-color: rebeccapurple;? ? }.right{margin-right:200px;background-color: red;? ? }

109业筏、水平垂直居中

第一種

#container{position:relative;}#center{width:100px;height:100px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}

第二種

#container{position:relative;}#center{width:100px;height:100px;position:absolute;top:50%;left:50%;margin:-50px00-50px;}

第三種

#container{position:relative;}#center{position:absolute;margin:auto;top:0;bottom:0;left:0;right:0;}

第四種 flex

#container{display:flex;justify-content:center;align-items: center;}

109、.四種定位的區(qū)別

static是默認值

relative相對定位 相對于自身原有位置進行偏移鸟赫，仍處于標準文檔流中

absolute絕對定位 相對于最近的已定位的祖先元素, 有已定位(指position不是static的元素)祖先元素, 以最近的祖先元素為參考標準蒜胖。如果無已定位祖先元素, 以body元素為偏移參照基準, 完全脫離了標準文檔流。

fixed固定定位的元素會相對于視窗來定位,這意味著即便頁面滾動抛蚤，它還是會停留在相同的位置台谢。一個固定定位元素不會保留它原本在頁面應有的空隙。

110岁经、封裝一個函數(shù)朋沮，參數(shù)是定時器的時間，.then執(zhí)行回調(diào)函數(shù)缀壤。

functionsleep(time){returnnewPromise((resolve) =>setTimeout(resolve, time));}

111樊拓、一行代碼實現(xiàn)數(shù)組去重？

[...new Set([1,2,3,1,'a',1,'a'])]

112塘慕、使用addEventListener點擊li彈出內(nèi)容筋夏，并且動態(tài)添加li之后有效

• 1
• 2
• 3
• 4

113、怎么判斷兩個對象相等

JSON.stringify(obj)==JSON.stringify(obj);//true

114图呢、Vue router 除了 router-link 怎么實現(xiàn)跳轉(zhuǎn)?

router.go(1)router.push('/')

115条篷、Vue router 跳轉(zhuǎn)和 location.href 有什么區(qū)別？

router是hash改變

location.href是頁面跳轉(zhuǎn)蛤织，刷新頁面

116赴叹、重排和重繪

部分渲染樹（或者整個渲染樹）需要重新分析并且節(jié)點尺寸需要重新計算。這被稱為重排指蚜。注意這里至少會有一次重排-初始化頁面布局乞巧。

由于節(jié)點的幾何屬性發(fā)生改變或者由于樣式發(fā)生改變，例如改變元素背景色時姚炕，屏幕上的部分內(nèi)容需要更新摊欠。這樣的更新被稱為重繪。

117柱宦、什么情況會觸發(fā)重排和重繪

添加些椒、刪除、更新 DOM 節(jié)點

通過 display: none 隱藏一個 DOM 節(jié)點-觸發(fā)重排和重繪

通過 visibility: hidden 隱藏一個 DOM 節(jié)點-只觸發(fā)重繪掸刊，因為沒有幾何變化

移動或者給頁面中的 DOM 節(jié)點添加動畫

添加一個樣式表免糕，調(diào)整樣式屬性

用戶行為，例如調(diào)整窗口大小，改變字號石窑，或者滾動牌芋。

118、js bind 實現(xiàn)機制松逊？手寫一個 bind 方法躺屁？

functionbind(fn, context){returnfunction(){returnfn.apply(context,arguments);? }}// 柯理化函數(shù)思想? 感謝pursuitTom的提出Function.prototype.bind =function(context){varargs =Array.prototype.slice.call(arguments,1);var_this =this;returnfunction(){varthisArgs = [].slice.call(arguments);return_this.apply(context, args.concat(thisArgs))? ? };}// ES6寫法 感謝waterc的提出Function.prototype.bind =function(context, ...res){letself =thisreturnfunction(...arg){returnself.apply(context, [...res,...arg])? ? }}

119、多個函數(shù)

vara = (function(){return'1';},function(){return1;})();console.log(typeofa);//number

120经宏、proto犀暑、prototype钉跷、Object.getPrototypeOf()

__proto__是指內(nèi)部原型字币，和Object.getPrototypeOf()結(jié)果等價functionf(){}f.__proto__ ===Object.getPrototypeOf(f);//truef.prototype ===Object.getPrototypeOf(f);//false

121、瀏覽記錄前后跳轉(zhuǎn)（尚未試驗）

backwardforward

122郭怪、setTimeout 和 setInterval 細談

常問的點沪斟，前者是在一定時間過后將函數(shù)添加至執(zhí)行隊列广辰，執(zhí)行時間=延遲時間+之前函數(shù)代碼執(zhí)行時間+執(zhí)行函數(shù)時間。

后者是不管前一次是否執(zhí)行完畢主之，每隔一定時間重復執(zhí)行择吊，用于精準執(zhí)行互相沒有影響的重復操作。

如果需要控制前后執(zhí)行順序杀餐，最好使用setTimeout模擬setInterval

vartime =400, times =0, max =10;functionfunc(){? times++;if(times < max){//code heresetTimeout(func, time);? }else{console.log("finished");? }}setTimeout(func, time);

123干发、判斷多圖片加載完畢

注：用jQueryObject.ready()只能判斷dom結(jié)構(gòu)加載完畢

好像描述的不是很清楚，這里寫一下代碼史翘。

方法1：

varcounter =0;varqueryInterval =30;//msvarpics =document.getElementsByClassName("pics");functionsingleQuery(i){if(pics[i].complete){? ? counter++;console.log(i +" is loaded");? }else{? ? setTimeout(singleQuery, queryInterval, i);? }}functionallQuery(callback){if(counter < pics.length){console.log("current number of loaded pics: "+ counter);? ? setTimeout(allQuery, queryInterval, callback);? }else{console.log("All pics are loaded.");? ? callback();? }}for(vari =0; i < pics.length; i++){? setTimeout(singleQuery, queryInterval, i);}setTimeout(allQuery, queryInterval, callback);

主要也是采用setTimeout模擬輪詢枉长，判斷方式是img標簽dom的complete屬性（布爾值），缺點是定時器太多琼讽。

方法2：

varcounter =0, queryInterval =50;varpics =document.getElementsByClassName("pics");for(vari =0; i < pics.length; i++){? pics[i].onload =function(){? ? counter++;console.log(this.id +" is loaded");? }}functionqueryPictures(callback){if(counter < pics.length){console.log("current number of loaded pics: "+ counter);? ? setTimeout(queryPictures, queryInterval, callback);? }else{console.log("All pics are loaded");? ? callback();? }}setTimeout(queryPictures, queryInterval, callback);

利用onload綁定圖片加載成功后的回調(diào)必峰，通過計數(shù)器判斷是否加載完畢。

124钻蹬、CSS margin重疊問題

塊元素在垂直方向上的margin是很奇怪的吼蚁，會有重疊現(xiàn)象。

如果display都是block问欠，有三種情況：

外間距均為正數(shù)肝匆，豎直方向上會選擇最大的外邊距作為間隔

一正一負，間距 = 正 - |負|

兩個負顺献，間距 = 0 - 絕對值最大的那個

設(shè)置display: inline-block的盒子不會有margin重疊旗国，position: absolute的也不會出現(xiàn)。

125注整、CSS選擇器優(yōu)先級 && CSS選擇器效率

ID > 類 > 標簽 > 相鄰 > 子選擇器 > 后代選擇器 > * > 屬性 > 偽類

object.propertyIsEnumerable(xxx)

判斷對象中是否有xxx屬性能曾，并且能通過for in枚舉度硝，如Array對象的length是不可枚舉的

126、判斷數(shù)組

functionisArray(arr){returnObject.prototype.toString.call(arr) ==='[Object Array]';}

127寿冕、git fetch && git pull

git pull自動完成了fetch最新遠程版本蕊程，并且和本地進行merge

git fetch獲得遠程分支，要繼續(xù)手動merge合并

128驼唱、WebSocket

HTML5帶來的新協(xié)議藻茂，通過類似HTTP的請求建立連接。主要目的是可以獲取服務端的推送玫恳。

原來的方式可能是使用long poll（即不中斷連接一直等待數(shù)據(jù)）捌治，或者是ajax輪詢的方式（每隔一段時間發(fā)送請求，建立連接纽窟，詢問是否有新的數(shù)據(jù)）。這兩種方式的缺點在于long poll的阻塞兼吓，以及ajax輪詢的冗余連接臂港。

WebSocket的設(shè)計思想有點類似于回調(diào)，在發(fā)送請求升級服務端的協(xié)議并收到確認信息后视搏，服務端一有新的信息/數(shù)據(jù)就會主動推送給客戶端审孽，至于要一次HTTP握手便可以建立持久連接

129、跨域相關(guān)

只要協(xié)議浑娜、域名佑力、端口有不同，則視為不同的域筋遭。（域名和域名對應的IP也是跨域）

1.CORS: Cross-Origin Resource Sharing

基于服務器支持的跨域打颤，服務器設(shè)置Access-Control-Allow-Origin響應頭，瀏覽器可允許跨域

2.設(shè)置domain

能從子域設(shè)到主域漓滔，如a.b.c.com—>b.c.com—>c.com

具體情況：在頁面中用iframe打開了另一個頁面（前提：兩個頁面主域是相同的）

利用frameElement.contentWindow.document.domain設(shè)置frame子頁面的主域编饺，document.domain設(shè)置主頁面的主域，之后就能互相獲取dom中的數(shù)據(jù)响驴。

缺點是只能用于不同子域間的交互透且。

3.例如擁有src屬性的img標簽，每次改變src屬性豁鲤，都會發(fā)起http請求秽誊。

varimg =newImage();img.onload =function(){//code here};img.onerror =function(){//code here};img.src="http://server.com/data?query=3";

缺點是只能使用GET請求，不能獲取數(shù)據(jù)琳骡，一般用于提交統(tǒng)計信息什么的锅论。

script、link日熬、iframe只有在添加到DOM中才會發(fā)起請求

4.HTML5 postMessage

支持IE8+和主流瀏覽器棍厌，寫法也簡單..

//source: http://test.org:4000//get the window object of target originvarwin =window.open("http://target.com");//or this, when a frame is usedvarwin =document.getElementById("targetId").contentWindow;win.postMessage("data here","http://target.com/rest");//target: http://target.com/tinyfunctionhandleMessage(event){if(event.orgin!="http://test.org:4000")return;vardata = event.data;//code here//event.source is window.openerevent.source.postMessage("response data here", event.origin);}window.addEventListener("message", handleMessage,false);

5.window.name

即使在頁面打開多層iframe后肾胯，每個iframe中window.name 屬性值都是相同的，以此用作數(shù)據(jù)傳輸?shù)墓ぞ摺?/p>

但由于跨域的限制耘纱，是無法獲取另一個frame中的window.name數(shù)據(jù)敬肚，所以要使用一個同域的代理(proxy.html)：

6. jsonp

目前主流跨域方法

調(diào)用其他域的腳本獲取數(shù)據(jù)，前提是另一個域能知道回調(diào)函數(shù)名束析，這個可以通過請求發(fā)送給目標域艳馒。

直接寫jQuery封的jsonp

$.getJSON("http://target.com/data?callback=callbackFunctionName",function(data){});

$.getJSON會把獲取的responseText轉(zhuǎn)為json，如果url中有callback參數(shù)员寇，數(shù)據(jù)會以script標簽形式獲取弄慰。

130、閉包相關(guān)

什么是閉包

閉包是指有權(quán)訪問另一個函數(shù)作用域中變量的函數(shù)

怎么創(chuàng)建閉包

在函數(shù)內(nèi)部嵌套使用函數(shù)

functionfn(){for(vari =0; i <2; i++) {? ? ? ? ? ? ? (function(){varvariate = i;? ? ? ? ? ? ? ? ? setTimeout(function(){console.log("setTimeout執(zhí)行后:"+variate);? ? ? ? ? ? ? ? ? },1000);? ? ? ? ? ? ? })();//閉包,立即執(zhí)行函數(shù),匿名函數(shù)}console.log(i);//2console.log(variate);//variate is not defined}? ? ? fn();

為什么用閉包

因為在閉包內(nèi)部保持了對外部活動對象的訪問,但外部的變量卻無法直接訪問內(nèi)部,避免了全局污染;

可以當做私有成員,彌補了因js語法帶來的面向?qū)ο缶幊痰牟蛔?

可以長久的在內(nèi)存中保存一個自己想要保存的變量.

閉包的缺點

可能導致內(nèi)存占用過多,因為閉包攜帶了自身的函數(shù)作用域

閉包只能取得外部包含函數(shù)中得最后一個值

詳見https://segmentfault.com/a/11...

131蝶锋、a:active 移動端實現(xiàn)

有時候一些按鈕的簡單點擊交互可以通過css偽類來實現(xiàn)陆爽；必須點擊了更改顏色；松開恢復扳缕；IOS手機會出現(xiàn)偽類無效的情況慌闭；iOS系統(tǒng)的移動設(shè)備中，需要在按鈕元素或body/html上綁定一個touchstart事件才能激活:active狀態(tài)躯舔。

document.body.addEventListener('touchstart',function(){//...空函數(shù)即可});

132驴剔、ios滑動卡頓

-webkit-overflow-scrolling:touch 可能會在IOS系統(tǒng)低的情況出現(xiàn)滾動條；嘗試溢出解決

133粥庄、forEach和map的區(qū)別

相同點

都是循環(huán)遍歷數(shù)組中的每一項

forEach和map方法里每次執(zhí)行匿名函數(shù)都支持3個參數(shù)丧失，參數(shù)分別是item（當前每一項）、index（索引值）惜互、arr（原數(shù)組）

匿名函數(shù)中的this都是指向window

只能遍歷數(shù)組

都有兼容問題

不同點

map速度比foreach快

map會返回一個新數(shù)組布讹，不對原數(shù)組產(chǎn)生影響,foreach不會產(chǎn)生新數(shù)組，

map因為返回數(shù)組所以可以鏈式操作载佳，foreach不能

134炒事、淺拷貝和深拷貝

jQuery.extend第一個參數(shù)可以是布爾值，用來設(shè)置是否深度拷貝的

jQuery.extend(true, {a : { a :"a"} }, {a : { b :"b"} } );jQuery.extend( {a : { a :"a"} }, {a : { b :"b"} } );

最簡單的深拷貝

aa =JSON.parse(JSON.stringify(a) )

淺復制--->就是將一個對象的內(nèi)存地址的“”編號“”復制給另一個對象蔫慧。深復制--->實現(xiàn)原理挠乳，先新建一個空對象，內(nèi)存中新開辟一塊地址姑躲，把被復制對象的所有可枚舉的(注意可枚舉的對象)屬性方法一一復制過來睡扬，注意要用遞歸來復制子對象里面的所有屬性和方法，直到子子.....屬性為基本數(shù)據(jù)類型黍析÷袅總結(jié)，深復制理解兩點阐枣，1,新開辟內(nèi)存地址马靠，2,遞歸來刨根復制奄抽。

135、外邊距合并

外邊距合并指的是甩鳄，當兩個垂直外邊距相遇時逞度，它們將形成一個外邊距。

合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者妙啃。

136档泽、js加載位置區(qū)別優(yōu)缺點

html文件是自上而下的執(zhí)行方式，但引入的css和javascript的順序有所不同揖赴，css引入執(zhí)行加載時馆匿，程序仍然往下執(zhí)行，而執(zhí)行到腳本是則中斷線程燥滑，待該script腳本執(zhí)行結(jié)束之后程序才繼續(xù)往下執(zhí)行渐北。

所以，大部分網(wǎng)上討論是將script腳本放在之后铭拧，那樣dom的生成就不會因為長時間執(zhí)行script腳本而延遲阻塞腔稀，加快了頁面的加載速度。

但又不能將所有的script放在body之后羽历，因為有一些頁面的效果的實現(xiàn)，是需要預先動態(tài)的加載一些js腳本淡喜。所以這些腳本應該放在<body>之前秕磷。

其次，不能將需要訪問dom元素的js放在body之前炼团，因為此時還沒有開始生成dom澎嚣，所以在body之前的訪問dom元素的js會出錯，或者無效

script放置位置的原則“頁面效果實現(xiàn)類的js應該放在body之前瘟芝，動作易桃，交互，事件驅(qū)動锌俱，需要訪問dom屬性的js都可以放在body之后

作者：O螞蟻O

鏈接：http://www.reibang.com/p/49ad676a19e6

來源：簡書

簡書著作權(quán)歸作者所有晤郑，任何形式的轉(zhuǎn)載都請聯(lián)系作者獲得授權(quán)并注明出處。