摘要:因為在頁面加載完成后,引擎維護著兩個隊列,一個是按頁面順序加載的執(zhí)行隊列,還有一個空閑隊列,使用定時函數(shù)就是將回調(diào)函數(shù)加入到空閑隊列中,故和其他定時器是并發(fā)執(zhí)行的。
1.window.onload和$(document).ready()的區(qū)別:
①執(zhí)行時間:window.onload會在所有元素,包括圖片,引用文件加載完成之后執(zhí)行,而$(document).ready()則會在HTML DOM,CSS DOM加載完成后執(zhí)行,此時可能其他圖片還沒有加載完。若要網(wǎng)頁上所有內(nèi)容,包括圖片加載完成后,再注冊事件,則需$(window).load(function)等價于window.onload.
②編寫個數(shù):window.onload不能同時編寫多個,如果編寫多個則只會執(zhí)行最后一個,$(document).ready()則可以編寫多個,而且每一個都可以得到執(zhí)行
③簡化寫法:window.onload不可以簡寫,$(window).load(function(){})則可以簡寫為$(function(){})
2.瀏覽器加載轉(zhuǎn)圈結(jié)束是哪個時間點?
loadEventEnd
參考資料
3.form表單當前頁面無刷新提交?
參考資料
起因:
表單提交原理是瀏覽器通過js事件將表單數(shù)據(jù)提交至服務(wù)器,服務(wù)器處理后將返回結(jié)果(xml,json,html或html片段)返回到原提交頁面,此處頁面指一個帶有html框架的頁面,此時便會出現(xiàn)一次頁面刷新。
后Ajax出現(xiàn)后,克服了這個問題,通過瀏覽器對象提交數(shù)據(jù),服務(wù)器返回數(shù)據(jù)到該瀏覽器對象,實現(xiàn)了局部刷新,但Ajax有個問題,就是不能異步提交文件(老版本瀏覽器,新式瀏覽器通過二進制轉(zhuǎn)換實現(xiàn)了文件的異步提交)
那么在老式瀏覽器如何克服文件提交的問題呢?即如下通過iframe的方式
具體步驟:
①在當前頁面建一個iframe并隱藏(display:none)
②給新建的iframe起個name如id_iframe
③form表單的target屬性的值一定得設(shè)置為剛起的這個名字id_iframe
④即可無刷新提交表單
iframe實現(xiàn)異步無刷新提交的原理:因為設(shè)置了target=id_iframe,故即使數(shù)據(jù)是從A頁面提交出去的,但是服務(wù)器卻會將返回數(shù)據(jù)送到name為id_iframe的B頁面,然后通過在B頁面調(diào)用js程序來刷新A頁面,因為B頁面一直不顯示,故對于用戶來時這就是一次無刷新提交,但此方法有一點需注意,因為在B頁面需要調(diào)用A頁面的方法或者函數(shù),因此AB頁面必須同域,否則操作非法。
4.setTimeout和setInterval的區(qū)別,如何相互實現(xiàn)?
-首先解析setTimeout
眾所周知js是單線程的,在js引擎的內(nèi)部有一個函數(shù)隊列,所有函數(shù)按順序執(zhí)行,setTimeout和setInterval則是通過間隔指定時間將定時函數(shù)中的函數(shù)加入執(zhí)行隊列來實現(xiàn)一些特定效果,如上圖,執(zhí)行hello函數(shù)后,會先執(zhí)行console(1)處的代碼,接著執(zhí)行console.log(3)處的代碼,當console.log(3)處的代碼執(zhí)行時間大于2000時,setTimeout仍會在2000到了后將console.log(2)加入隊列,但不會立即執(zhí)行,只會等console.log(3)處的代碼執(zhí)行完成后再執(zhí)行,反之,當console.log(3)處的代碼執(zhí)行時間小于2000時,console.log(2)一加入隊列即會執(zhí)行。因為在頁面加載完成后,js引擎維護著兩個隊列,一個是按頁面順序加載的執(zhí)行隊列,還有一個空閑隊列,使用定時函數(shù)就是將回調(diào)函數(shù)加入到空閑隊列中,故js和其他定時器是并發(fā)執(zhí)行的。
setInterval是間隔一定時間,將回調(diào)函數(shù)加入空閑隊列,但有個坑是,它是將回調(diào)加入到隊列中不管函數(shù)是否被執(zhí)行就開始執(zhí)行下一次計時,那么當下一次時間到的時候,定時器又向隊列中加入回調(diào)函數(shù),但此時發(fā)現(xiàn)之前的加入的函數(shù)還未被執(zhí)行,此時便會將之后的定時函數(shù)取消掉,造成缺失間隔,但有時候我們并不希望這樣的事情發(fā)生,那么怎么辦呢?此時就需要使用setTimeout來模擬setInterval,如下圖:
參考資料
5.談?wù)剬g覽器兼容性的理解?
(IE8以下的可以不用考慮了,此問題參考知乎前端面試中如何回答“談?wù)劄g覽器兼容性”的問題?)
①瀏覽器兼容性問題的成因:
各大瀏覽器廠商對W3C標準執(zhí)行的不一樣,他們有各自的技術(shù)標準和實現(xiàn)
②如何處理?
根據(jù)用戶瀏覽器分布份額占比判斷,需要兼容到何種程度,然后通過各種判斷和hack和降級之類的方法(如css樣式初始化)
③常見解決方案5
1.聲明文檔的解析類型,可使文檔按照W3C標準渲染頁面,避免瀏覽器的怪異模式
2.,告訴IE使用最新的引擎渲染網(wǎng)頁,是chrome做的外掛,讓用戶在瀏覽網(wǎng)頁時,保持IE瀏覽器不變,但實際使用的是Google Chrome瀏覽器內(nèi)核渲染的
3.早期的IE瀏覽器,事件對象是存儲在全局對象event中的,而w3c標準中則可以直接獲取event對象
4.H5和css3的新特性,要根據(jù)兼容性,合理使用
6.對頁面性能優(yōu)化的理解?
①減少http請求次數(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.將樣式表置頂(利用用戶錯覺)2.避免css表達式(性能損耗)3.使用link代替@import因為其相當于將css放于頁面底部
④javascript
1.將腳本文件置底(不影響頁面繪制)2.使用defer屬性指定腳本在文檔加載后執(zhí)行3.async關(guān)鍵字,讓腳本異步執(zhí)行.減少dom訪問
⑤圖片
1.優(yōu)化圖片2.使用小且可以緩存的favicon.ico
⑥移動端
1.保持單個文件小于25KB 2.打包組件成符合文檔
7.JSONP的實現(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中的源碼實現(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缺點:只支持get,不支持post)
ps補充一下ajax請求中g(shù)et和post方法的區(qū)別:
①位置:
GET請求:請求數(shù)據(jù)會附加在URL之后,以?分割URL和參數(shù),多個參數(shù)使用&連接,因為URL是以ASCII碼傳輸?shù)模仕蟹茿SCII碼都需要經(jīng)過編碼后才能傳輸。
POST請求:會將請求數(shù)據(jù)放在HTTP包體中
②使用GET請求,會受到URL長度限制
使用POST請求,理論上不會有限制,但實際中各服務(wù)器有自己的配置
③使用POST較GET方法來說更為安全,GET請求易遭到攻擊
8.
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.hztianpu.com/yun/82672.html
摘要:醞釀許久之后,筆者準備接下來撰寫前端面試題系列文章,內(nèi)容涵蓋瀏覽器框架分鐘搞定常用基礎(chǔ)知識前端掘金基礎(chǔ)智商劃重點在實際開發(fā)中,已經(jīng)非常普及了。 這道題--致敬各位10年阿里的前端開發(fā) - 掘金很巧合,我在認識了兩位同是10年工作經(jīng)驗的阿里前端開發(fā)小伙伴,不但要向前輩學(xué)習(xí),我有時候還會選擇另一種方法逗逗他們,拿了網(wǎng)上一道經(jīng)典面試題,可能我連去阿里面試的機會都沒有,但是我感受到了一次面試1...
摘要:同源策略是什么跨域通信同源兩個文檔同源需滿足協(xié)議相同域名相同端口相同跨域通信進行操作通信時如果目標與當前窗口不滿足同源條件,瀏覽器為了安全會阻止跨域操作。 同源策略是什么? javascript跨域通信 同源:兩個文檔同源需滿足 協(xié)議相同 域名相同 端口相同 跨域通信:js進行DOM操作、通信時如果目標與當前窗口不滿足同源條件,瀏覽器為了安全會阻止跨域操作。跨域通信通常有以下方法 ...
摘要:收集的一些前端面試題從面試題發(fā)現(xiàn)不足,進而查漏補缺,比通過面試更難得及各大互聯(lián)網(wǎng)公司前端筆試面試題篇及各大互聯(lián)網(wǎng)公司前端筆試面試題篇面試題個和個經(jīng)典面試題前端開發(fā)面試題如何面試前端工程師很重要個變態(tài)題解析如何通過餓了么面試輕 收集的一些前端面試題 從面試題發(fā)現(xiàn)不足,進而查漏補缺,比通過面試更難得 1 BAT及各大互聯(lián)網(wǎng)公司2014前端筆試面試題--Html,Css篇 2 BAT...
摘要:收集的一些前端面試題從面試題發(fā)現(xiàn)不足,進而查漏補缺,比通過面試更難得及各大互聯(lián)網(wǎng)公司前端筆試面試題篇及各大互聯(lián)網(wǎng)公司前端筆試面試題篇面試題個和個經(jīng)典面試題前端開發(fā)面試題如何面試前端工程師很重要個變態(tài)題解析如何通過餓了么面試輕 收集的一些前端面試題 從面試題發(fā)現(xiàn)不足,進而查漏補缺,比通過面試更難得 1 BAT及各大互聯(lián)網(wǎng)公司2014前端筆試面試題--Html,Css篇 2 BAT...
摘要:所以我們要時刻留意,在使用時,一定要根據(jù)緩存命中率作出調(diào)整,在不發(fā)生緩存錯亂的情況之下,盡可能的提高資源的緩存命中率。 寫在前面 最近抽空參加了幾場大廠的面試,突然發(fā)現(xiàn)一個現(xiàn)象,就是不論面試偏服務(wù)端的職位還是偏客戶端的職位,不論面試的 5 年以上的高級職位,還是 3 年左右的中級職位,面試官開頭所問問題必然是關(guān)于 HTTP 的。 我記得之前找工作的時候,似乎都是先考察一些職位所需技能領(lǐng)...
閱讀 4074·2021-09-06 15:00
閱讀 2238·2019-08-30 15:53
閱讀 3354·2019-08-23 16:44
閱讀 1016·2019-08-23 15:19
閱讀 1470·2019-08-23 12:27
閱讀 4271·2019-08-23 11:30
閱讀 673·2019-08-23 10:33
閱讀 439·2019-08-22 16:05