摘要：因?yàn)樵陧撁婕虞d完成后，引擎維護(hù)著兩個(gè)隊(duì)列，一個(gè)是按頁面順序加載的執(zhí)行隊(duì)列，還有一個(gè)空閑隊(duì)列，使用定時(shí)函數(shù)就是將回調(diào)函數(shù)加入到空閑隊(duì)列中，故和其他定時(shí)器是并發(fā)執(zhí)行的。

1.window.onload和$(document).ready()的區(qū)別：

①執(zhí)行時(shí)間：window.onload會(huì)在所有元素，包括圖片,引用文件加載完成之后執(zhí)行，而$(document).ready()則會(huì)在HTML DOM,CSS DOM加載完成后執(zhí)行,此時(shí)可能其他圖片還沒有加載完。若要網(wǎng)頁上所有內(nèi)容，包括圖片加載完成后,再注冊(cè)事件，則需$(window).load(function)等價(jià)于window.onload.

②編寫個(gè)數(shù)：window.onload不能同時(shí)編寫多個(gè)，如果編寫多個(gè)則只會(huì)執(zhí)行最后一個(gè),$(document).ready()則可以編寫多個(gè)，而且每一個(gè)都可以得到執(zhí)行

③簡(jiǎn)化寫法：window.onload不可以簡(jiǎn)寫,$(window).load(function(){})則可以簡(jiǎn)寫為$(function(){})

2.瀏覽器加載轉(zhuǎn)圈結(jié)束是哪個(gè)時(shí)間點(diǎn)？
loadEventEnd
參考資料

3.form表單當(dāng)前頁面無刷新提交？
參考資料
起因：
表單提交原理是瀏覽器通過js事件將表單數(shù)據(jù)提交至服務(wù)器，服務(wù)器處理后將返回結(jié)果(xml,json,html或html片段)返回到原提交頁面，此處頁面指一個(gè)帶有html框架的頁面，此時(shí)便會(huì)出現(xiàn)一次頁面刷新。
后Ajax出現(xiàn)后，克服了這個(gè)問題，通過瀏覽器對(duì)象提交數(shù)據(jù)，服務(wù)器返回?cái)?shù)據(jù)到該瀏覽器對(duì)象，實(shí)現(xiàn)了局部刷新，但Ajax有個(gè)問題，就是不能異步提交文件(老版本瀏覽器，新式瀏覽器通過二進(jìn)制轉(zhuǎn)換實(shí)現(xiàn)了文件的異步提交)
那么在老式瀏覽器如何克服文件提交的問題呢？即如下通過iframe的方式
具體步驟：
①在當(dāng)前頁面建一個(gè)iframe并隱藏(display:none)
②給新建的iframe起個(gè)name如id_iframe
③form表單的target屬性的值一定得設(shè)置為剛起的這個(gè)名字id_iframe
④即可無刷新提交表單
iframe實(shí)現(xiàn)異步無刷新提交的原理：因?yàn)樵O(shè)置了target=id_iframe，故即使數(shù)據(jù)是從A頁面提交出去的，但是服務(wù)器卻會(huì)將返回?cái)?shù)據(jù)送到name為id_iframe的B頁面，然后通過在B頁面調(diào)用js程序來刷新A頁面，因?yàn)锽頁面一直不顯示，故對(duì)于用戶來時(shí)這就是一次無刷新提交，但此方法有一點(diǎn)需注意，因?yàn)樵贐頁面需要調(diào)用A頁面的方法或者函數(shù)，因此AB頁面必須同域，否則操作非法。

4.setTimeout和setInterval的區(qū)別，如何相互實(shí)現(xiàn)？

-首先解析setTimeout

眾所周知js是單線程的，在js引擎的內(nèi)部有一個(gè)函數(shù)隊(duì)列，所有函數(shù)按順序執(zhí)行，setTimeout和setInterval則是通過間隔指定時(shí)間將定時(shí)函數(shù)中的函數(shù)加入執(zhí)行隊(duì)列來實(shí)現(xiàn)一些特定效果，如上圖，執(zhí)行hello函數(shù)后，會(huì)先執(zhí)行console(1)處的代碼，接著執(zhí)行console.log(3)處的代碼，當(dāng)console.log(3)處的代碼執(zhí)行時(shí)間大于2000時(shí)，setTimeout仍會(huì)在2000到了后將console.log(2)加入隊(duì)列，但不會(huì)立即執(zhí)行，只會(huì)等console.log(3)處的代碼執(zhí)行完成后再執(zhí)行，反之，當(dāng)console.log(3)處的代碼執(zhí)行時(shí)間小于2000時(shí)，console.log(2)一加入隊(duì)列即會(huì)執(zhí)行。因?yàn)樵陧撁婕虞d完成后，js引擎維護(hù)著兩個(gè)隊(duì)列，一個(gè)是按頁面順序加載的執(zhí)行隊(duì)列，還有一個(gè)空閑隊(duì)列，使用定時(shí)函數(shù)就是將回調(diào)函數(shù)加入到空閑隊(duì)列中，故js和其他定時(shí)器是并發(fā)執(zhí)行的。

setInterval是間隔一定時(shí)間，將回調(diào)函數(shù)加入空閑隊(duì)列，但有個(gè)坑是，它是將回調(diào)加入到隊(duì)列中不管函數(shù)是否被執(zhí)行就開始執(zhí)行下一次計(jì)時(shí)，那么當(dāng)下一次時(shí)間到的時(shí)候，定時(shí)器又向隊(duì)列中加入回調(diào)函數(shù)，但此時(shí)發(fā)現(xiàn)之前的加入的函數(shù)還未被執(zhí)行，此時(shí)便會(huì)將之后的定時(shí)函數(shù)取消掉，造成缺失間隔，但有時(shí)候我們并不希望這樣的事情發(fā)生，那么怎么辦呢？此時(shí)就需要使用setTimeout來模擬setInterval,如下圖：

參考資料

5.談?wù)剬?duì)瀏覽器兼容性的理解？
(IE8以下的可以不用考慮了，此問題參考知乎前端面試中如何回答“談?wù)劄g覽器兼容性”的問題？)
①瀏覽器兼容性問題的成因：
各大瀏覽器廠商對(duì)W3C標(biāo)準(zhǔn)執(zhí)行的不一樣，他們有各自的技術(shù)標(biāo)準(zhǔn)和實(shí)現(xiàn)
②如何處理？
根據(jù)用戶瀏覽器分布份額占比判斷，需要兼容到何種程度，然后通過各種判斷和hack和降級(jí)之類的方法(如css樣式初始化)
③常見解決方案5
1.聲明文檔的解析類型，可使文檔按照W3C標(biāo)準(zhǔn)渲染頁面，避免瀏覽器的怪異模式
2.，告訴IE使用最新的引擎渲染網(wǎng)頁，是chrome做的外掛，讓用戶在瀏覽網(wǎng)頁時(shí)，保持IE瀏覽器不變，但實(shí)際使用的是Google Chrome瀏覽器內(nèi)核渲染的
3.早期的IE瀏覽器,事件對(duì)象是存儲(chǔ)在全局對(duì)象event中的，而w3c標(biāo)準(zhǔn)中則可以直接獲取event對(duì)象
4.H5和css3的新特性，要根據(jù)兼容性，合理使用

6.對(duì)頁面性能優(yōu)化的理解？
①減少http請(qǐng)求次數(shù)
1.合并壓縮文件2.使用雪碧圖3.減少dns查詢次數(shù)4.減少dom和iframe的數(shù)量
②服務(wù)器
1.使用cdn(內(nèi)容分發(fā)網(wǎng)絡(luò))2.避免空的圖片src.2.減少cookie的大小
③css
1.將樣式表置頂(利用用戶錯(cuò)覺)2.避免css表達(dá)式(性能損耗)3.使用link代替@import因?yàn)槠湎喈?dāng)于將css放于頁面底部
④javascript
1.將腳本文件置底(不影響頁面繪制)2.使用defer屬性指定腳本在文檔加載后執(zhí)行3.async關(guān)鍵字，讓腳本異步執(zhí)行.減少dom訪問
⑤圖片
1.優(yōu)化圖片2.使用小且可以緩存的favicon.ico
⑥移動(dòng)端
1.保持單個(gè)文件小于25KB 2.打包組件成符合文檔

7.JSONP的實(shí)現(xiàn)

①原生js

var url = "http://localhost:8080/xxx?jsonp=callbackfunction";
var script = document.createElement("script");
script.setAttribute("src",url);
document.getElementsByTagName("body")[0].appendChild(script);

function callbackfunction(data){
    var html = JSON.stringify(data);
    alert(html);
}

②jquery中的使用

$(function(){
    jQuery.getJSON("http://localhost:8080/xxx?jsop=?",function(data){
        var html = JSON.stringify(data);
        $("#textjsonp").html(html);
    });
});

jquery中的源碼實(shí)現(xiàn)

$.ajax({
    type:"GET",
    async:false,
    url:"http://localhost:8080/xxx",
    dataType:"jsonp",
    jsonp:"jsoncallback",
    success:function(data){
        var html = JSON.stringify(data);
        $("#testjsonp").html(html);
    }
    error:function(){
    alert("error");
    }
});

(JSONP缺點(diǎn)：只支持get，不支持post)

ps補(bǔ)充一下ajax請(qǐng)求中g(shù)et和post方法的區(qū)別：
①位置：
GET請(qǐng)求：請(qǐng)求數(shù)據(jù)會(huì)附加在URL之后，以？分割URL和參數(shù)，多個(gè)參數(shù)使用&連接，因?yàn)閁RL是以ASCII碼傳輸?shù)模仕蟹茿SCII碼都需要經(jīng)過編碼后才能傳輸。
POST請(qǐng)求：會(huì)將請(qǐng)求數(shù)據(jù)放在HTTP包體中
②使用GET請(qǐng)求，會(huì)受到URL長(zhǎng)度限制
使用POST請(qǐng)求，理論上不會(huì)有限制，但實(shí)際中各服務(wù)器有自己的配置
③使用POST較GET方法來說更為安全，GET請(qǐng)求易遭到攻擊

8.