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

時間 2021-02-13

標籤 javascript css html 前端 java jquery css3 面試 ajax chrome 欄目 JavaScript 简体版

原文原文鏈接

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

①執行時間：window.onload會在全部元素，包括圖片,引用文件加載完成以後執行，而$(document).ready()則會在HTML DOM,CSS DOM加載完成後執行,此時可能其餘圖片尚未加載完。若要網頁上全部內容，包括圖片加載完成後,再註冊事件，則需$(window).load(function)等價於window.onload.css

②編寫個數：window.onload不能同時編寫多個，若是編寫多個則只會執行最後一個,$(document).ready()則能夠編寫多個，並且每個均可以獲得執行html

③簡化寫法：window.onload不能夠簡寫,$(window).load(function(){})則能夠簡寫爲$(function(){})前端

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

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頁面必須同域，不然操做非法。jquery

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

-首先解析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和其餘定時器是併發執行的。ajax

setInterval是間隔必定時間，將回調函數加入空閒隊列，但有個坑是，它是將回調加入到隊列中無論函數是否被執行就開始執行下一次計時，那麼當下一次時間到的時候，定時器又向隊列中加入回調函數，但此時發現以前的加入的函數還未被執行，此時便會將以後的定時函數取消掉，形成缺失間隔，但有時候咱們並不但願這樣的事情發生，那麼怎麼辦呢？此時就須要使用setTimeout來模擬setInterval,以下圖：chrome

參考資料

5.談談對瀏覽器兼容性的理解？
(IE8如下的能夠不用考慮了，此問題參考知乎前端面試中如何回答「談談瀏覽器兼容性」的問題？)
①瀏覽器兼容性問題的成因：
各大瀏覽器廠商對W3C標準執行的不同，他們有各自的技術標準和實現
②如何處理？
根據用戶瀏覽器分佈份額佔比判斷，須要兼容到何種程度，而後經過各類判斷和hack和降級之類的方法(如css樣式初始化)
③常看法決方案5
1.<!DOCTYPE html>聲明文檔的解析類型，可以使文檔按照W3C標準渲染頁面，避免瀏覽器的怪異模式
2.<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">，告訴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請求易遭到攻擊