前端面試題二

1.介紹js的基本數據類型
Undefined
NullBooleanNumberString
2.js
有哪些內置對象?
數據封裝類對象:ObjectArrayBooleanNumber String
其他對象:FunctionArgumentsMathDateRegExpError
3.this
對象的理解
this
總是指向函數的直接調用者(而非間接調用者);
如果有new關鍵字,this指向new出來的那個對象;
在事件中,this指向觸發這個事件的對象,特殊的是,IE中的attachEvent中的this總是指向全局對象Window
4.eval
是做什麼的?
它的功能是把對應的字符串解析成JS代碼並運行;
應該避免使用eval,不安全,非常耗性能(2次,一次解析成js語句,一次執行)。
JSON字符串轉換爲JSON對象的時候可以用evalvar obj=eval('('+ str +')');
5.DOM
怎樣添加、移除、移動、複製、創建和查找節點

// 創建新節點

createDocumentFragment()    //創建一個DOM片段

createElement()   //創建一個具體的元素

createTextNode()   //創建一個文本節點

// 添加、移除、替換、插入

appendChild()

removeChild()

replaceChild()

insertBefore() //在已有的子節點前插入一個新的子節點

// 查找

getElementsByTagName()    //通過標籤名稱

getElementsByName()    //通過元素的Name屬性的值(IE容錯能力較強,會得到一個數組,其中包括id等於name值的)

getElementById()    //通過元素Id,唯一性

 

6.nullundefined的區別?
null
是一個表示""的對象,轉爲數值時爲0undefined是一個表示""的原始值,轉爲數值時爲NaN
undefined

1)變量被聲明瞭,但沒有賦值時,就等於undefined
2)調用函數時,應該提供的參數沒有提供,該參數等於undefined
3)對象沒有賦值的屬性,該屬性的值爲undefined
4)函數沒有返回值時,默認返回undefined
null

1作爲函數的參數,表示該函數的參數不是對象。
2作爲對象原型鏈的終點。
7.new
操作符具體幹了什麼呢?
1)創建一個空對象,並且 this變量引用該對象,同時還繼承了該函數的原型。
2)屬性和方法被加入到 this引用的對象中。
3)新創建的對象由 this所引用,並且最後隱式的返回 this
8.JSON 
的瞭解?
JSON(JavaScript Object Notation) 
是一種輕量級的數據交換格式。它是基於JavaScript的一個子集。數據格式簡單,易於讀寫,佔用帶寬小。
格式:採用鍵值對,例如:{'age':'12', 'name':'back'}
9.call() 
 apply()的區別和作用?
apply()
函數有兩個參數:第一個參數是上下文,第二個參數是參數組成的數組。如果上下文是null,則使用全局對象代替。
如:function.apply(this,[1,2,3]);
call()
的第一個參數是上下文,後續是實例傳入的參數序列。
如:function.call(this,1,2,3);
10.
如何獲取UA

function whatBrowser() { 

       document.Browser.Name.value=navigator.appName; 

       document.Browser.Version.value=navigator.appVersion; 

       document.Browser.Code.value=navigator.appCodeName; 

       document.Browser.Agent.value=navigator.userAgent; 



11.HTTP
狀態碼知道哪些?
100  Continue  
繼續,一般在發送post請求時,已發送了http header之後服務端將返回此信息,表示確認,之後發送具體參數信息
200  OK   
正常返回信息
201  Created  
請求成功並且服務器創建了新的資源
202  Accepted  
服務器已接受請求,但尚未處理
301  Moved Permanently  
請求的網頁已永久移動到新位置。
302 Found  
臨時性重定向。
303 See Other  
臨時性重定向,且總是使用 GET請求新的 URI
304  Not Modified  
自從上次請求後,請求的網頁未修改過。
400 Bad Request  
服務器無法理解請求的格式,客戶端不應當嘗試再次使用相同的內容發起請求。
401 Unauthorized  
請求未授權。
403 Forbidden  
禁止訪問。
404 Not Found  
找不到如何與 URI相匹配的資源。
500 Internal Server Error  
最常見的服務器端錯誤。
503 Service Unavailable 
服務器端暫時無法處理請求(可能是過載或維護)。
12.
你有哪些性能優化的方法?
1減少http請求次數:CSSSprites, JSCSS源碼壓縮、圖片大小控制合適;網頁GzipCDN託管,data緩存,圖片服務器。
2前端模板 JS+數據,減少由於HTML標籤導致的帶寬浪費,前端用變量保存AJAX請求結果,每次操作本地變量,不用請求,減少請求次數
3innerHTML代替DOM操作,減少DOM操作次數,優化javascript性能。
4當需要設置的樣式很多時設置className而不是直接操作style
5少用全局變量、緩存DOM節點查找的結果。減少IO讀取操作。
6避免使用CSS Expressioncss表達式)又稱Dynamicproperties(動態屬性)
7圖片預加載,將樣式表放在頂部,將腳本放在底部  加上時間戳。
13.
什麼叫優雅降級和漸進增強?
優雅降級:Web站點在所有新式瀏覽器中都能正常工作,如果用戶使用的是老式瀏覽器,則代碼會檢查以確認它們是否能正常工作。由於IE獨特的盒模型佈局問題,針對不同版本的IEhack實踐過優雅降級了,爲那些無法支持功能的瀏覽器增加候選方案,使之在舊式瀏覽器上以某種形式降級體驗卻不至於完全失效.
漸進增強:從被所有瀏覽器支持的基本功能開始,逐步地添加那些只有新式瀏覽器才支持的功能,向頁面增加無害於基礎瀏覽器的額外樣式和功能的。當瀏覽器支持時,它們會自動地呈現出來並發揮作用。
14.
哪些常見操作會造成內存泄漏?
內存泄漏指任何對象在您不再擁有或需要它之後仍然存在。
垃圾回收器定期掃描對象,並計算引用了每個對象的其他對象的數量。如果一個對象的引用數量爲 0(沒有其他對象引用過該對象),或對該對象的惟一引用是循環的,那麼該對象的內存即可回收。
setTimeout 
的第一個參數使用字符串而非函數的話,會引發內存泄漏。
閉包、控制檯日誌、循環(在兩個對象彼此引用且彼此保留時,就會產生一個循環)
15.
線程與進程的區別
一個程序至少有一個進程,一個進程至少有一個線程
線程的劃分尺度小於進程,使得多線程程序的併發性高。 
另外,進程在執行過程中擁有獨立的內存單元,而多個線程共享內存,從而極大地提高了程序的運行效率。 
線程在執行過程中與進程還是有區別的。每個獨立的線程有一個程序運行的入口、順序執行序列和程序的出口。但是線程不能夠獨立執行,必須依存在應用程序中,由應用程序提供多個線程執行控制。 
從邏輯角度來看,多線程的意義在於一個應用程序中,有多個執行部分可以同時執行。但操作系統並沒有將多個線程看做多個獨立的應用,來實現進程的調度和管理以及資源分配。這就是進程和線程的重要區別。

16.請描述一下 cookiessessionStorage localStorage 的區別?
cookie是網站爲了標示用戶身份而儲存在用戶本地終端(Client Side)上的數據(通常經過加密)。
cookie數據始終在同源的http請求中攜帶(即使不需要),記會在瀏覽器和服務器間來回傳遞。
sessionStoragelocalStorage不會自動把數據發給服務器,僅在本地保存。
存儲大小:
cookie數據大小不能超過4k
sessionStoragelocalStorage雖然也有存儲大小的限制,但比cookie大得多,可以達到5M或更大。
有期時間:
localStorage    存儲持久數據,瀏覽器關閉後數據不丟失除非主動刪除數據;
sessionStorage  數據在當前瀏覽器窗口關閉後自動刪除。
cookie          設置的cookie過期時間之前一直有效,即使窗口或瀏覽器關閉
17.iframe有那些缺點?
iframe會阻塞主頁面的Onload事件;
搜索引擎的檢索程序無法解讀這種頁面,不利於SEO;
iframe和主頁面共享連接池,而瀏覽器對相同域的連接有限制,所以會影響頁面的並行加載。
使用iframe之前需要考慮這兩個缺點。如果需要使用iframe,最好是通過javascript動態給iframe添加src屬性值,這樣可以繞開以上兩個問題。
18.如何實現瀏覽器內多個標籤頁之間的通信?
WebSocketSharedWorker
也可以調用localstorgecookies等本地存儲方式。
localstorge另一個瀏覽上下文裏被添加、修改或刪除時,它都會觸發一個事件,我們通過監聽事件,控制它的值來進行頁面信息通信。
注意quirksSafari在無痕模式下設置localstorge值時會拋出 QuotaExceededError的異常。
19.如何在頁面上實現一個圓形的可點擊區域?
1map+area或者svg
2border-radius
3)純js實現需要求一個點在不在圓上簡單算法、獲取鼠標座標等等
20.介紹一下標準的CSS的盒子模型?低版本IE的盒子模型有什麼不同的?
1)有兩種, IE盒子模型、W3C盒子模型。
2)盒模型:內容(content)、填充(padding)、邊界(margin)邊框(border)
3)區  別: IEcontent部分把 border padding計算了進去。
21.CSS優先級算法如何計算?
優先級就近原則,同權重情況下樣式定義最近者爲準;
載入樣式以最後載入的定位爲準;
優先級爲:
!important >  id > class >tag
important比內聯優先級高(style)
22.爲什麼要使用CSS sprites
CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中,再利用CSS“background-image”“background-position”的組合進行背景定位,這樣可以減少很多圖片請求的開銷,因爲請求耗時比較長;請求雖然可以併發,但是如果請求太多會給服務器增加很大的壓力。
23.display:nonevisibility:hidden的區別?
display:none  隱藏對應的元素,在文檔佈局中不再給它分配空間,它各邊的元素會合攏,就當他從來不存在。
visibility:hidden  隱藏對應的元素,但是在文檔佈局中仍保留原來的空間。
24.positionabsolutefixed區別
absolute浮動定位是相對於父級中設置positionrelative或者absolute最近的父級元素
fixed浮動定位是相對於瀏覽器視窗的
25.IE 8以下版本的瀏覽器中的盒模型有什麼不同?
IE8以下瀏覽器的盒模型中定義的元素的寬高不包括內邊距和邊框

發佈了30 篇原創文章 · 獲贊 31 · 訪問量 9萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章