【面試篇】JS基礎知識查漏補缺

myeveryheart 發布于2019-08-20 16:02 / 2960人閱讀

摘要：因為在頁面加載完成后，引擎維護著兩個隊列，一個是按頁面順序加載的執行隊列，還有一個空閑隊列，使用定時函數就是將回調函數加入到空閑隊列中，故和其他定時器是并發執行的。

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

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

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

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

2.瀏覽器加載轉圈結束是哪個時間點？
loadEventEnd
參考資料

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

4.setTimeout和setInterval的區別，如何相互實現？

-首先解析setTimeout

眾所周知js是單線程的，在js引擎的內部有一個函數隊列，所有函數按順序執行，setTimeout和setInterval則是通過間隔指定時間將定時函數中的函數加入執行隊列來實現一些特定效果，如上圖，執行hello函數后，會先執行console(1)處的代碼，接著執行console.log(3)處的代碼，當console.log(3)處的代碼執行時間大于2000時，setTimeout仍會在2000到了后將console.log(2)加入隊列，但不會立即執行，只會等console.log(3)處的代碼執行完成后再執行，反之，當console.log(3)處的代碼執行時間小于2000時，console.log(2)一加入隊列即會執行。因為在頁面加載完成后，js引擎維護著兩個隊列，一個是按頁面順序加載的執行隊列，還有一個空閑隊列，使用定時函數就是將回調函數加入到空閑隊列中，故js和其他定時器是并發執行的。

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

參考資料

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

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

7.JSONP的實現

①原生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中的源碼實現

$.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缺點：只支持get，不支持post)

ps補充一下ajax請求中get和post方法的區別：
①位置：
GET請求：請求數據會附加在URL之后，以？分割URL和參數，多個參數使用&連接，因為URL是以ASCII碼傳輸的，故所有非ASCII碼都需要經過編碼后才能傳輸。
POST請求：會將請求數據放在HTTP包體中
②使用GET請求，會受到URL長度限制
使用POST請求，理論上不會有限制，但實際中各服務器有自己的配置
③使用POST較GET方法來說更為安全，GET請求易遭到攻擊

GPU云服務器云服務器 js的基礎面試題基礎篇之基礎篇 java語言程序設計基礎篇

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/82672.html

查漏補缺 - 收藏集 - 掘金

摘要：醞釀許久之后，筆者準備接下來撰寫前端面試題系列文章，內容涵蓋瀏覽器框架分鐘搞定常用基礎知識前端掘金基礎智商劃重點在實際開發中，已經非常普及了。這道題--致敬各位10年阿里的前端開發 - 掘金很巧合，我在認識了兩位同是10年工作經驗的阿里前端開發小伙伴，不但要向前輩學習，我有時候還會選擇另一種方法逗逗他們，拿了網上一道經典面試題，可能我連去阿里面試的機會都沒有，但是我感受到了一次面試1...

YuboonaZhang 2019-08-29 12:56 評論0 收藏0
前端面試題-瀏覽器/服務端/網絡

摘要：同源策略是什么跨域通信同源兩個文檔同源需滿足協議相同域名相同端口相同跨域通信進行操作通信時如果目標與當前窗口不滿足同源條件，瀏覽器為了安全會阻止跨域操作。同源策略是什么？ javascript跨域通信同源：兩個文檔同源需滿足協議相同域名相同端口相同跨域通信：js進行DOM操作、通信時如果目標與當前窗口不滿足同源條件，瀏覽器為了安全會阻止跨域操作。跨域通信通常有以下方法 ...

jsdt 2019-08-23 15:35 評論0 收藏0
你不能錯過的前端面試題合集

摘要：收集的一些前端面試題從面試題發現不足，進而查漏補缺，比通過面試更難得及各大互聯網公司前端筆試面試題篇及各大互聯網公司前端筆試面試題篇面試題個和個經典面試題前端開發面試題如何面試前端工程師很重要個變態題解析如何通過餓了么面試輕收集的一些前端面試題從面試題發現不足，進而查漏補缺，比通過面試更難得 1 BAT及各大互聯網公司2014前端筆試面試題--Html,Css篇 2 BAT...

ninefive 2019-08-21 16:18 評論0 收藏0
你不能錯過的前端面試題合集

摘要：收集的一些前端面試題從面試題發現不足，進而查漏補缺，比通過面試更難得及各大互聯網公司前端筆試面試題篇及各大互聯網公司前端筆試面試題篇面試題個和個經典面試題前端開發面試題如何面試前端工程師很重要個變態題解析如何通過餓了么面試輕收集的一些前端面試題從面試題發現不足，進而查漏補缺，比通過面試更難得 1 BAT及各大互聯網公司2014前端筆試面試題--Html,Css篇 2 BAT...

darkbaby123 2019-07-30 14:38 評論0 收藏0
30 分鐘 HTTP 查漏補缺之 Vary

摘要：所以我們要時刻留意，在使用時，一定要根據緩存命中率作出調整，在不發生緩存錯亂的情況之下，盡可能的提高資源的緩存命中率。寫在前面最近抽空參加了幾場大廠的面試，突然發現一個現象，就是不論面試偏服務端的職位還是偏客戶端的職位，不論面試的 5 年以上的高級職位，還是 3 年左右的中級職位，面試官開頭所問問題必然是關于 HTTP 的。我記得之前找工作的時候，似乎都是先考察一些職位所需技能領...

xiangchaobin 2019-08-06 13:38 評論0 收藏0