摘要:引用計數這是最簡單的垃圾收集算法。然而,引用計數算法考慮到它們互相都有至少一次引用,所以它們不會被回收。事件代理發(fā)生在冒泡階段。為時取消事件默認行為,為時取消時間傳播通常利用事件冒泡機制托管事件處理程序提高程序性能。
JS延遲加載的方式有哪些?
JS的延遲加載有助與提高頁面的加載速度。
defer和async、動態(tài)創(chuàng)建DOM方式(用得最多)、按需異步載入JS
defer:延遲腳本。立即下載,但延遲執(zhí)行(延遲到整個頁面都解析完畢后再運行),按照腳本出現(xiàn)的先后順序執(zhí)行。
async:異步腳本。下載完立即執(zhí)行,但不保證按照腳本出現(xiàn)的先后順序執(zhí)行。
同步的概念在操作系統(tǒng)中:不同進程協(xié)同完成某項工作而先后次序調整(通過阻塞、喚醒等方式),同步強調的是順序性,誰先誰后。異步不存在順序性。
同步:瀏覽器訪問服務器,用戶看到頁面刷新,重新發(fā)請求,等請求完,頁面刷新,新內容出現(xiàn),用戶看到新內容之后進行下一步操作。
異步:瀏覽器訪問服務器請求,用戶正常操作,瀏覽器在后端進行請求。等請求完,頁面不刷新,新內容也會出現(xiàn),用戶看到新內容。
若請求的資源編碼,如外引js文件編碼與頁面編碼不同。可根據外引資源編碼方式定義為 charset="utf-8"或"gbk"。
比如:http://www.yyy.com/a.html 中嵌入了一個http://www.xxx.com/test.js
a.html 的編碼是gbk或gb2312的。 而引入的js編碼為utf-8的 ,那就需要在引入的時候
全局變量、閉包、DOM清空或刪除時,事件未清除、子元素存在引用
flash和js通過什么類如何交互Flash提供了ExternalInterface接口與JavaScript通信,ExternalInterface有兩個方法,call和addCallback,call的作用是讓Flash調用js里的方法,addCallback是用來注冊flash函數讓js調用。
Flash與Ajax各自的優(yōu)缺點?Flash:適合處理多媒體、矢量圖形、訪問機器。但對css、處理文本不足,不容易被搜索。
Ajax:對css、文本支持很好,但對多媒體、矢量圖形、訪問機器不足。
1) 數據體積方面。JSON相對于XML來講,數據的體積小,傳遞的速度更快些。
2) 數據交互方面。JSON與JavaScript的交互更加方便,更容易解析處理,更好的數據交互。
3) 數據描述方面。JSON對數據的描述性比XML較差。
4) 傳輸速度方面。JSON的速度要遠遠快于XML。
web socket:在一個多帶帶的持久連接上提供全雙工、雙向的通信。使用自定義的協(xié)議(ws://、wss://),同源策略對web socket不適用。
web worker:運行在后臺的JavaScript,不影響頁面的性能。
創(chuàng)建worker:var worker = new Worker(url);
向worker發(fā)送數據:worker.postMessage(data);
接收worker返回的數據:worker.onmessage
終止一個worker的執(zhí)行:worker.terminate();
1) 標記清除:
這個算法把“對象是否不再需要”簡化定義為“對象是否可以獲得”。
這個算法假定設置一個叫做根(root)的對象(在Javascript里,根是全局對象)。定期的,垃圾回收器將從根開始,找所有從根開始引用的對象,然后找這些對象引用的對象。從根開始,垃圾回收器將找到所有可以獲得的對象和所有不能獲得的對象。
2) 引用計數:
這是最簡單的垃圾收集算法。此算法把“對象是否不再需要”簡化定義為“對象有沒有其他對象引用到它”。如果沒有引用指向該對象(零引用),對象將被垃圾回收機制回收。
該算法有個限制:無法處理循環(huán)引用。兩個對象被創(chuàng)建,并互相引用,形成了一個循環(huán)。它們被調用之后不會離開函數作用域,所以它們已經沒有用了,可以被回收了。然而,引用計數算法考慮到它們互相都有至少一次引用,所以它們不會被回收。
前端面試查漏補缺--(二) 垃圾回收機制
JavaScript數據推送:commet(基于http長連接的服務器推送技術)。
基于web socket的推送:SSE(server-send Event)
1) 將cookie的失效時間設置為過去的時間(expires)
document.cookie = ‘user=’+ encodeURIComponent(‘name’) + "; expires=’+ new Date(0);
2) 將系統(tǒng)時間設置為當前時間往前一點時間
var data = new Date(); date.setDate(date.getDate()-1);Ajax
如何實現(xiàn)ajax請求
1.通過實例化一個XMLHttpRequest對象得到一個實例,調用實例的open方法為這次 ajax請求設定相應的http方法、相應的地址和以及是否異步,當然大多數情況下我們都是選異步, 以異步為例,之后調用send方法ajax請求,這個方法可以設定需要發(fā)送的報文主體,然后通過 監(jiān)聽readystatechange事件,通過這個實例的readyState屬性來判斷這個ajax請求的狀態(tài),其中分為0,1,2,3,4這四種 狀態(tài),當狀態(tài)為4的時候也就是接收數據完成的時候,這時候可以通過實例的status屬性判斷這個請求是否成功
var xhr = new XMLHttpRequest(); xhr.open("get", "aabb.php", true); xhr.send(null); xhr.onreadystatechange = function() { if(xhr.readyState==4) { if(xhr.status==200) { console.log(xhr.responseText); } } }
Ajax請求的頁面歷史記錄狀態(tài)問題?
通過location.hash記錄狀態(tài),讓瀏覽器記錄Ajax請求時頁面狀態(tài)的變化。
通過HTML5的history.pushstate,來實現(xiàn)瀏覽器地址欄的無刷新改變
Ajax的優(yōu)勢
無刷新頁面請求,使產品更快,更小更友好
服務器端的任務轉嫁到客戶端處理
減輕瀏覽器負擔,節(jié)約帶寬
基于標準化對象,不需要安裝特定的插件
徹底將頁面與數據分離
Ajax局限性
AJAX 不支持瀏覽器 back 按鈕。(無法使用回退按鈕)
安全問題 AJAX 暴露了與服務器交互的細節(jié)。
對搜索引擎的支持比較弱。不會執(zhí)行你的 JS 腳本,只會操作你的網頁源代碼;(不利于網頁的SEO)
跨域請求有一定限制。解決方式:jsonp;(不能發(fā)送跨域請求)
attribute與property的區(qū)別?attribute是dom元素在文檔中作為html標簽擁有的屬性
property是dom元素在js中作為對象擁有的屬性。
所以,對于html的標準屬性來說,attribute和property是同步的,是會自動更新的。但對于自定義屬性,他們不同步。
js事件委托機制
簡要介紹事件代理,以及什么時候使用,事件代理發(fā)生在事件處理流程的哪個階段,有什么好處?
事件代理就是說我們將事件添加到本來要添加事件的父節(jié)點,將事件委托給父節(jié)點來觸發(fā)處理函數,這通常會在 這通常會使用在大量的同級元素需要添加同一類事件的時候,比如一個動態(tài)的非常多的列表,需要為每個列表項都添加 點擊事件,這時可以使用事件代理,通過判斷e.target.nodeName來判斷發(fā)生的具體元素,從而判斷是否是在 列表項中觸發(fā),這樣的好處是可以減少事件綁定,同時動態(tài)的DOM結構仍然可以監(jiān)聽。事件代理發(fā)生在冒泡階段。
參考:
淺析JavaScript的事件代理和委托
請描述一下 JavaScript 事件冒泡機制
DOM事件模型是如何的,編寫一個EventUtil工具類實現(xiàn)事件管理兼容
1.DOM事件包含捕獲(capture)和冒泡(bubble)兩個階段:捕獲階段事件從window開始觸發(fā)事件然后通過祖先節(jié)點一次傳遞到觸發(fā)事件的DOM元素上;冒泡階段事件從初始元素依次向祖先節(jié)點傳遞直到window
2.標準事件監(jiān)聽elem.addEventListener(type, handler, capture)/elem.removeEventListener(type, handler, capture):handler接收保存事件信息的event對象作為參數,event.target為觸發(fā)事件的對象,handler調用上下文this為綁定監(jiān)聽器的對象,event.preventDefault()取消事件默認行為,event.stopPropagation()/event.stopImmediatePropagation()取消事件傳遞
3.老版本IE事件監(jiān)聽elem.attachEvent("on"+type, handler)/elem.detachEvent("on"+type, handler):handler不接收event作為參數,事件信息保存在window.event中,觸發(fā)事件的對象為event.srcElement,handler執(zhí)行上下文this為window使用閉包中調用handler.call(elem, event)可模仿標準模型,然后返回閉包,保證了監(jiān)聽器的移除。event.returnValue為false時取消事件默認行為,event.cancleBubble為true時取消時間傳播
4.通常利用事件冒泡機制托管事件處理程序提高程序性能。
/** * 跨瀏覽器事件處理工具。只支持冒泡。不支持捕獲 * @author (qiu_deqing@126.com) */ var EventUtil = { getEvent: function (event) { return event || window.event; }, getTarget: function (event) { return event.target || event.srcElement; }, // 返回注冊成功的監(jiān)聽器,IE中需要使用返回值來移除監(jiān)聽器 on: function (elem, type, handler) { if (elem.addEventListener) { elem.addEventListener(type, handler, false); return handler; } else if (elem.attachEvent) { var wrapper = function () { var event = window.event; event.target = event.srcElement; handler.call(elem, event); }; elem.attachEvent("on" + type, wrapper); return wrapper; } }, off: function (elem, type, handler) { if (elem.removeEventListener) { elem.removeEventListener(type, handler, false); } else if (elem.detachEvent) { elem.detachEvent("on" + type, handler); } }, preventDefault: function (event) { if (event.preventDefault) { event.preventDefault(); } else if ("returnValue" in event) { event.returnValue = false; } }, stopPropagation: function (event) { if (event.stopPropagation) { event.stopPropagation(); } else if ("cancelBubble" in event) { event.cancelBubble = true; } }, /** * keypress事件跨瀏覽器獲取輸入字符 * 某些瀏覽器在一些特殊鍵上也觸發(fā)keypress,此時返回null **/ getChar: function (event) { if (event.which == null) { return String.fromCharCode(event.keyCode); // IE } else if (event.which != 0 && event.charCode != 0) { return String.fromCharCode(event.which); // the rest } else { return null; // special key } } };正則表達式
注冊賬號要求以字母開頭,可以包含字母、數字、下劃線,請寫出驗證該賬號的正則表達式
/^[a-zA-Z]w+$/
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/102293.html
摘要:獲取的對象范圍方法獲取的是最終應用在元素上的所有屬性對象即使沒有代碼,也會把默認的祖宗八代都顯示出來而只能獲取元素屬性中的樣式。因此對于一個光禿禿的元素,方法返回對象中屬性值如果有就是據我測試不同環(huán)境結果可能有差異而就是。 花了很長時間整理的前端面試資源,喜歡請大家不要吝嗇star~ 別只收藏,點個贊,點個star再走哈~ 持續(xù)更新中……,可以關注下github 項目地址 https:...
摘要:手冊網超級有用的前端基礎技術面試問題收集前端面試題目及答案匯總史上最全前端面試題含答案常見前端面試題及答案經典面試題及答案精選總結前端面試過程中最容易出現(xiàn)的問題前端面試題整理騰訊前端面試經驗前端基礎面試題部分最新前端面試題攻略前端面試前端入 手冊網:http://www.shouce.ren/post/index 超級有用的前端基礎技術面試問題收集:http://www.codec...
摘要:手冊網超級有用的前端基礎技術面試問題收集前端面試題目及答案匯總史上最全前端面試題含答案常見前端面試題及答案經典面試題及答案精選總結前端面試過程中最容易出現(xiàn)的問題前端面試題整理騰訊前端面試經驗前端基礎面試題部分最新前端面試題攻略前端面試前端入 手冊網:http://www.shouce.ren/post/index 超級有用的前端基礎技術面試問題收集:http://www.codec...
摘要:收集的一些前端面試題從面試題發(fā)現(xiàn)不足,進而查漏補缺,比通過面試更難得及各大互聯(lián)網公司前端筆試面試題篇及各大互聯(lián)網公司前端筆試面試題篇面試題個和個經典面試題前端開發(fā)面試題如何面試前端工程師很重要個變態(tài)題解析如何通過餓了么面試輕 收集的一些前端面試題 從面試題發(fā)現(xiàn)不足,進而查漏補缺,比通過面試更難得 1 BAT及各大互聯(lián)網公司2014前端筆試面試題--Html,Css篇 2 BAT...
摘要:收集的一些前端面試題從面試題發(fā)現(xiàn)不足,進而查漏補缺,比通過面試更難得及各大互聯(lián)網公司前端筆試面試題篇及各大互聯(lián)網公司前端筆試面試題篇面試題個和個經典面試題前端開發(fā)面試題如何面試前端工程師很重要個變態(tài)題解析如何通過餓了么面試輕 收集的一些前端面試題 從面試題發(fā)現(xiàn)不足,進而查漏補缺,比通過面試更難得 1 BAT及各大互聯(lián)網公司2014前端筆試面試題--Html,Css篇 2 BAT...
閱讀 1016·2023-04-25 22:27
閱讀 871·2021-11-22 14:56
閱讀 983·2021-11-11 16:54
閱讀 1677·2019-08-30 15:54
閱讀 3499·2019-08-30 13:20
閱讀 1212·2019-08-30 10:55
閱讀 2079·2019-08-26 13:34
閱讀 3280·2019-08-26 11:53