前端面試問題(JavaScript)
JavaScript部分
1.引起內存泄漏的操作有哪些
1.全局變量引起
2.閉包引起
3.dom清空,事件未清除
4.子元素存在引用
5.被遺忘的計時器
2.如何實現ajax請求
通過實例化一個XMLHttpRequest對象得到一個實例,
調用實例的open方法為這次 ajax請求設定相應的http方法、相應的地址和以及是否異步,當然大多數情況下我們都是選異步,
以異步為例,之後調用send方法ajax請求,這個方法可以設定需要發送的報文主體,
然後通過 監聽readystatechange事件,通過這個實例的readyState屬性來判斷這個ajax請求的狀態,其中分為0,1,2,3,4這四種 狀態,
當狀態為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); } } }
3.簡要介紹ES6
ES6在變量的聲明和定義方面增加了let、const聲明變量,有局部變量的概念,賦值中有比較吸引人的結構賦值,同時ES6對字符串、 數組、正則、對象、函數等拓展了一些方法,如字符串方面的模板字符串、函數方面的默認參數、對象方面屬性的簡潔表達方式,ES6也 引入了新的數據類型symbol,新的數據結構set和map,symbol可以通過typeof檢測出來,為解決異步回調問題,引入了promise和 generator,還有最為吸引人了實現Class和模塊,通過Class可以更好的面向對象編程,使用模塊加載方便模塊化編程,當然考慮到 瀏覽器兼容性,我們在實際開發中需要使用babel進行編譯。
4.對js原型的理解
我們知道在es6之前,js沒有類和繼承的概念,js是通過原型來實現繼承的。在js中一個構造函數默認自帶有一個prototype屬性, 這個的屬性值是一個對象,同時這個prototype對象自帶有一個constructor屬性,這個屬性指向這個構造函數,同時每一個實例 都有一個__proto__屬性指向這個prototype對象,我們可以將這個叫做隱式原型,我們在使用一個實例的方法的時候,會先檢查 這個實例中是否有這個方法,沒有則會繼續向上查找這個prototype對象是否有這個方法,剛剛我們說到prototype是一個對象, 那麽也即是說這個是一個對象的實例,那麽這個對象同樣也會有一個__proto__屬性指向對象的prototype對象。
5.對js模塊化的理解
在ES6出現之前,js沒有標準的模塊化概念,這也就造成了js多人寫作開發容易造成全局汙染的情況,以前我們可能會采用立即執行 函數、對象等方式來盡量減少變量這種情況,後面社區為了解決這個問題陸續提出了AMD規範和CMD規範,這裏不同於Node.js的 CommonJS的原因在於服務端所有的模塊都是存在於硬盤中的,加載和讀取幾乎是不需要時間的,而瀏覽器端因為加載速度取決於網速, 因此需要采用異步加載,AMD規範中使用define來定義一個模塊,使用require方法來加載一個模塊,現在ES6也推出了標準的模塊 加載方案,通過exports和require來導出和導入模塊。
6.簡要介紹事件代理,以及什麽時候使用,事件代理發生在事件處理流程的哪個階段,有什麽好處?
事件代理就是說我們將事件添加到本來要添加事件的父節點,將事件委托給父節點來觸發處理函數,這通常會在 這通常會使用在大量的同級元素需要添加同一類事件的時候,比如一個動態的非常多的列表,需要為每個列表項都添加 點擊事件,這時可以使用事件代理,通過判斷e.target.nodeName來判斷發生的具體元素,從而判斷是否是在 列表項中觸發,這樣的好處是可以減少事件綁定,同時動態的DOM結構仍然可以監聽。事件代理發生在冒泡階段。
7.使用new操作符實例化一個對象的具體步驟
1.構造一個新的對象
2.將構造函數的作用域賦給新對象(也就是說this指向了新的對象)
3.執行構造函數中的代碼
4.返回新對象
8.遞歸和叠代的區別是什麽,各有什麽優缺點?
程序調用自身稱為遞歸,利用變量的原值推出新值稱為叠代,遞歸的優點 大問題轉化為小問題,可以減少代碼量,同時應為代碼精簡,可讀性好, 缺點就是,遞歸調用浪費了空間,而且遞歸太深容易造成堆棧的溢出。叠代的好處 就是代碼運行效率好,因為時間只因循環次數增加而增加,而且沒有額外的空間開銷, 缺點就是代碼不如遞歸簡潔
9.策略模式是什麽,說一下你的理解?
策略模式就是說我們將一系列的算法封裝起來,使其相互之間可以替換,封裝的算法具有一定的獨立性,不會隨客戶端的變化而變化,比較常見的使用常見就是類似於 表單驗證這種多場景的情況,我們使用策略模式就可以避免使用一堆的if...else。
10.js如何判斷網頁中圖片加載成功或者失敗
使用onload事件運行加載成功,使用onerror事件判斷失敗
11.原生JS操作DOM的方法有哪些?
獲取節點的方法getElementById、getElementsByClassName、getElementsByTagName、 getElementsByName、querySelector、querySelectorAll,對元素屬性進行操作的 getAttribute、 setAttribute、removeAttribute方法,對節點進行增刪改的appendChild、insertBefore、replaceChild、removeChild、 createElement等
12.typeof操作符返回值有哪些,對undefined、null、NaN使用這個操作符分別返回什麽
typeof的返回值有undefined、boolean、string、number、object、function、symbol。對undefined 使用返回undefined、null使用返回object,NaN使用返回number
13.setTimeout和setInterval的區別,包含內存方面的分析?
setTimeout表示間隔一段時間之後執行一次調用,而setInterval則是每間隔一段時間循環調用,直至clearInterval結束。 內存方面,setTimeout只需要進入一次隊列,不會造成內存溢出,setInterval因為不計算代碼執行時間,有可能同時執行多次代碼, 導致內存溢出。
14.同源策略是什麽?
同源策略是指只有具有相同源的頁面才能夠共享數據,比如cookie,同源是指頁面具有相同的協議、域名、端口號,有一項不同就不是同源。 有同源策略能夠保證web網頁的安全性。
15.如何阻止事件冒泡和默認事件?
標準的DOM對象中可以使用事件對象的stopPropagation()方法來阻止事件冒泡,但在IE8以下中IE的事件對象通過設置事件對象的cancelBubble屬性為true來阻止冒泡;
默認事件的話通過事件對象的preventDefault()方法來阻止,而IE通過設置事件對象的returnValue屬性為false來阻止默認事件。
16.如何實現懶加載?
懶加載就是根據用戶的瀏覽需要記載內容,也就是在用戶即將瀏覽完當前的內容時進行繼續加載內容,這種技術常常用來加載圖片的時候使用。我們判斷用戶是否即將瀏覽到底部之後進行在家內容 這時候可能會需要加載大量的內容,可以使用fragment來優化一下,因為大部分是使用滑動和滾輪來觸發的,因此很有可能會不斷觸發,可以使用函數節流做一個優化,防止用戶不斷觸發。
17.函數節流是什麽?
函數節流就是讓一個函數無法在很短的時間間隔內連續調用,而是間隔一段時間執行,這在我們為元素綁定一些事件的時候經常會用到,比如我們 為window綁定了一個resize事件,如果用戶一直改變窗口大小,就會一直觸發這個事件處理函數,這對性能有很大影響。
18.瀏覽器內核有哪些?分別對應哪些瀏覽器?
常見的瀏覽器內核有Trident、Gecko、WebKit、Presto,對應的瀏覽器為Trident對應於IE,Gecko對應於火狐瀏覽器,Webkit有chrome和safari,Presto 有Opera。
19.什麽是深拷貝,什麽是淺拷貝?
淺拷貝是指僅僅復制對象的引用,而不是復制對象本身;深拷貝則是把復制對象所引用的全部對象都復制一遍。
20.請說一下實現jsonp的實現思路?
jsonp的原理是使用script標簽來實現跨域,因為script標簽的的src屬性是不受同源策略的影響的,因此可以使用其來跨域。一個最簡單的jsonp就是創建一個script標簽,設置src為相應的url,在url之後添加相應的callback,格式類似於 url?callback=xxx,服務端根據我們的callback來返回相應的數據,類似於res.send(req.query.callback + ‘(‘+ data + ‘)‘),這樣就實現了一個最簡單的jsonp
21.原生js字符串方法有哪些?
簡單分為獲取類方法,獲取類方法有charAt方法用來獲取指定位置的字符,獲取指定位置字符的unicode編碼的charCodeAt方法, 與之相反的fromCharCode方法,通過傳入的unicode返回字符串。查找類方法有indexof()、lastIndexOf()、search()、match() 方法。截取類的方法有substring、slice、substr三個方法,其他的還有replace、split、toLowerCase、toUpperCase方法。
22.將靜態資源放在其他域名的目的是什麽?
這樣做的主要目的是在請求這些靜態資源的時候不會發送cookie,節省了流量,需要註意的是cookie是會發送給子域名的(二級域名),所以這些靜態資源是不會放在子域名下的, 而是單獨放在一個單獨的主域名下。同時還有一個原因就是瀏覽器對於一個域名會有請求數的限制,這種方法可以方便做CDN。
23.ajax的readyState有哪幾個狀態,含義分別是什麽?
ajax的readyState共有5個狀態,分別是0-4,其中每個數字的含義分別是0代表還沒調用open方法,1代表的是未調用send方法,也就是還沒發送數據給服務器 2代表的是還沒有接收到響應,3代表的是開始接收到了部分數據,4代表的是接收完成,數據可以在客戶端使用了。
前端面試問題(JavaScript)