前端面試題總結

時間  2019-11-22
標籤 端面 試題 總結 简体版
原文   原文鏈接

 

html部分

1.html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和 HTML5？

　　新特性：javascript

　　　　　1.  拖拽釋放(Drag and drop) APIcss

　　　　　2. 語義化更好的內容標籤（header,nav,footer,aside,article,section）html

　　　　　3. 音頻、視頻API(audio,video)前端

　　　　　4. 畫布(Canvas) APIhtml5

　　　　　5. 地理(Geolocation) APIjava

　　　　　6. 本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失node

　　　　　7.  sessionStorage 的數據在瀏覽器關閉後自動刪除nginx

　　　　　8. 表單控件，calendar、date、time、email、url、searchweb

　　　　　9. 新的技術webworker, websocket, Geolocationajax

      移除元素：

　　　　　1. 純表現的元素：basefont，big，center，font, s，strike，tt，u

　　　　　2. 對可用性產生負面影響的元素：frame，frameset，noframes

　　處理兼容問題：

　　　　   1. IE8/IE7/IE6支持經過 document.createElement 方法產生的標籤，能夠利用這一特性讓這些瀏覽器支持 HTML5 新標籤，瀏覽器支持新標籤後，還須要添加標籤默認的樣式（固然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架）：

　　區分：

　　　　　1. DOCTYPE聲明新增的結構元素、功能元素

 

2.DOM操做——怎樣添加、移除、移動、複製、建立和查找節點

　　建立節點：

　　　　　1. createDocumentFragment() 建立一個DOM片斷

　　　　　2. createElement  建立一個具體的元素

　　　　　3. createTextNode  建立一個文本節點

　　添加節點：

　　　　　1. appendChild()

　　移除節點：

　　　　　1. removeChild()

　　替換節點：

　　　　　1. replaceChild()

　　查找節點：

　　　　　1. getElementByTagName 經過標籤名稱

　　　　　2. getElementById  經過元素的Id

　　　　　3. getElementByName 經過元素的name

3.IE 8如下版本的瀏覽器中的盒模型有什麼不一樣

　　　　　1. IE8如下的模擬盒子定義的元素寬高不包含內邊距和邊框

4.浮動元素引發的問題和解決辦法？

　　引發問題：

　　　　　1. 父元素的高度沒法撐開，影響和父元素同行元素

　　　　　2. 與浮動元素同級的非浮動元素會緊跟隨後

　　　　　3.若非第一個元素浮動，則該元素以前的元素也須要浮動，不然會影響頁面顯示的結構

　　解決方法：

　　　　　1. 額外標籤法：css中的 clear ：both （會使HTML結構看起來不夠簡潔）

　　　　　2. after僞類法

　　　　　3. 浮動外部元素

　　　　　4. 設置overflow：auto或者hide

5.常見兼容性問題

　　　　　1. 瀏覽器兼容問題：各類瀏覽器的margin和padding不同

　　　　　            解決方式：在全局設置margin：0，padding：0

　　　　　2. 瀏覽器兼容問題：塊屬性標籤float後，又有橫行的margin狀況下，在IE6顯示margin比設置的大 (IE6中後面的一塊被頂到下一行)

 　　　　　　　　　解決方式：在float中設置display：inline，轉化爲行內元素

　　　　　3. 瀏覽器兼容問題：設置較小高度標籤（通常小於10px），在IE6，IE7，遨遊中高度超出本身設置高度

 　　　　　　　　　解決方式：設置overflow：hidden或設置行高linehight小於你設置的高度　　　　

6.HTML與XHTML——兩者有什麼區別

　　　　　1.元素的嵌套： XHTML要求全部元素必須正確嵌套

　　　　　2.  XHTML必須嵌套在<html>根元素中

　　　　　3.  XHTML必須標籤小寫

　　　　　4.  XHTML標籤必須被關閉，空標籤也須要結束符

　　　　　5.  二者基本概念不一樣，HTML是超文本標記語言，XHTML是可擴展超文本標記語言

7.Doctype做用? 嚴格模式與混雜模式如何區分？它們有何意義?

　　做用：

　　　　　1. DOCTYPE聲明處於文檔最前面，處於標籤以前，告知瀏覽器以何種模式渲染文檔

　　嚴格模式和混雜模式區分：

　　　　　1. 文檔包含嚴格的 DOCTYPE ，那麼它通常以嚴格模式呈現。（嚴格 DTD ——嚴格模式）

　　　　　2. 包含過渡 DTD 和 URI 的 DOCTYPE ，也以嚴格模式呈現，但有過渡 DTD 而沒有 URI （統一資源標識符，就是聲明最後的地址）會致使頁面以混雜模式呈現。（有 URI 的過渡 DTD ——嚴格模式；沒有 URI 的過渡 DTD ——混雜模式

　　　　　3. DOCTYPE 不存在或形式不正確會致使文檔以混雜模式呈現。（DTD不存在或者格式不正確——混雜模式）

　　　　　4. HTML5 沒有 DTD ，所以也就沒有嚴格模式與混雜模式的區別，HTML5 有相對寬鬆的語法，實現時，已經儘量大的實現了向後兼容。（ HTML5 沒有嚴格和混雜之分）

　　意義：

　　　　　1. 嚴格模式與混雜模式存在的意義與其來源密切相關，若是說只存在嚴格模式，那麼許多舊網站必然受到影響，若是隻存在混雜模式，那麼會回到當時瀏覽器大戰時的混亂，每一個瀏覽器都有本身的解析模式。　　　

 

8.說說你對語義化的理解

　　　　   1. 去掉或丟失樣式還可讓頁面呈現清晰的結構

　　　　　2. 有利於SEO：和搜索引擎創建良好溝通，有助於爬蟲抓取更多的有效信息

　　　　　3. 方便其餘設備解析

　　　　　4. 便於團隊開發和維護，語義化更具備可讀性，遵循W3C標準團隊，可減小差別化

 

9.iframe的優缺點

　　優勢：

　　　　　1. 解決第三方內容圖片或廣告加載緩慢問題

　　　　　2. 並行加載腳本

　　缺點：

　　　　　1. 會阻塞主頁面Onload事件

　　　　　2. 無內容，也會出現加載

　　　　　3.無語義

10.如何實現瀏覽器內多個標籤頁之間的通訊

　調用localstorge，cookies等本地存儲方式

　　　　　1. localstorage

　　　　　　localstorage在一個標籤被添加，修改或刪除時，都會觸發一個storage事件，經過另外一個標籤進行監聽storage事件，即可得到localstorge存儲的值，從而實現不一樣標籤頁之間的通訊。

　　　　　2. cookies

　　　　　　使用cookies+setInterval，將要傳遞的信息存儲在cookie中，每隔一段時間讀取cookie信息，便可隨機得到傳遞的信息。

 

11.webSocket如何兼容低瀏覽器

　　webSocket相似HTTP協議，是爲了彌補HTTP協議的缺陷：通訊只能服務端發起，HTTP不能作到服務端主動向客服端推送信息。

　　解決兼容問題

　　　　　1. 使用flash

　　　　　2. 使用輪詢或長鏈接的方式實現僞websocket的通訊

 

12.線程與進程的區別

　　一個程序至少一個進程，一個進程至少一個線程。

　　　　　1. 進程擁有獨立的堆棧空間和數據段，每啓動一個新的進程就要分配一個獨立的地址空間；線程有獨立的堆棧空間，可是共享數據段。

　　　　　2. 通訊機制上，進程之間互不干擾，互相獨立，通訊機制至關複雜；但線程共享數據，通訊機制方便。

　　　　　3. 同一個進程的全部線程共享該進程的全部資源，不一樣進程相互獨立。

 

13.你如何對網站的文件和資源進行優化

　　　　　1. 文件合併

　　　　　2. 文件壓縮

　　　　　3. cdn託管

　　　　　4. 多個域名緩存

 

14.請說出三種減小頁面加載時間的方法

　　　　 1. 圖片優化

　　　　 2. 圖像格式選擇

　　　　 3. CSS優化

　　　　 4. 網址後面加斜杆

　　　　 5. 標明寬高度

　　　　 6. 減小HTTP請求

 

15.你都使用哪些工具來測試代碼的性能

　　　　1. JSPerf

　　　　2. Dromaeo

 

16.什麼是 FOUC（無樣式內容閃爍）？你如何來避免 FOUC？　　

　　　　1. 若是使用import方法對CSS進行導入,會致使某些頁面在Windows 下的Internet Explorer出現一些奇怪的現象:以無樣式顯示頁面內容的瞬間閃爍,這種現象稱之爲文檔樣式短暫失效(Flash of Unstyled Content),簡稱爲FOUC。

　　　　2. 使用LINK標籤將樣式表放在文檔HEAD中。

 

17.null和undefined的區別

　　　　1. null是一個表示"無"的對象，轉爲數值時爲0；undefined是一個表示"無"的原始值，轉爲數值時爲NaN。

　　　　2. 當聲明的變量還未被初始化時，變量的默認值爲undefined。

　　　　3. null用來表示還沒有存在的對象，經常使用來表示函數企圖返回一個不存在的對象。
      

18. new操做符具體幹了什麼呢

　　　　1. 建立一個空對象，並用this指向該對象，同時繼承函數

　　　　2. 屬性和方法加入this引用的對象

　　　　3. 新建立的對象由this所引用，而且最後隱式的返回this

　　　　

19.JSON 的瞭解

　　是一種輕量級的數據交換格式，它基於JavaScript的一個子集，數據格式簡單，易於讀寫，佔用帶寬小

 

20.js延遲加載的方式有哪些

　　　　1. defer

　　　　 　　HTML4.01爲script標籤訂義了的defer屬性，告訴瀏覽器當即下載，但延遲執行。但只適合外部腳本文件

　　　　2. async

　　　　　　HTML5爲script定義了async屬性，和defer同樣，只適合外部腳本文件，不讓頁面等待腳本的下載和執行，從而異步加載頁面其餘內容

　　　　3. 動態建立DOM

　　　　4. 使用jQuery的getScript

$.getScript("outer.js",function(){//回調函數，成功獲取文件後執行的函數  
      console.log("腳本加載完成")  
});

　　　　5. setTimeOut延時

　　　　6. js放最底部，最後加載

 

21. 如何解決跨域問題

　　跨域是指一個域下面的文檔或腳本試圖請求另外一個域下的資源

　　常見跨域場景

　　　　

　　解決方式

　　　　1. JSONP

　　　　2. NGINX反向代理

　　　　　　nginx支持配置反向代理，經過反向代理實現網站的負載均衡，經過配置proxy_pass_http配置代理站點，upstream實現負載均衡

　　　　

22.documen.write和 innerHTML的區別

　　document.write只會繪製整個頁面，innerHTML能夠重繪頁面的一部分。

 

23. .call() 和 .apply() 的區別和做用？

　　JavaScript中的每個function對象都有一個apply()方法和一個call()方法。

　　apply:調用一個對象的一個方法，用另外一個對象替換當前對象，例：B.apply(A, arguments);即A對象應用B對象的方法。

　　call:調用一個對象的一個方法，用另外一個對象替換當前對象，例：B.call(A, ag1,ag2);即A對象調用B對象的方法。　　　

　　相同之處：

　　　　1. 均可以代替另外一個對象調用一個方法

　　不一樣之處：

　　　　1. apply最多隻能有兩個參數，新的this對象和一個數組argArray。

　　　　2. call能夠接受多個參數，新的this對象和一串參數列表，主要用於js對象各方法的相互調用。

 

24.js哪些操做會形成內存泄漏？

　　內存泄露是指一個分配的內存既不使用，也不能回收，直到瀏覽器運行結束。

　　標記清除：js中最多見的垃圾清除器

　　致使內存泄漏的操做：

　　　　1. 意外的全局變量

　　　　2. 閉包

　　　　3. 沒有清理的DOM元素引用

　　　　4. 定時器　　

 

25.JavaScript中的做用域與變量聲明提高

　　JavaScript是函數級做用域，不是塊級做用域。

　　塊級做用域：一對花括號{}中的語句集都屬於一個塊，在其中定義的變量塊外都不可見

　　變量提高：當一個函數外定義了一個全局變量，而想在函數內改變這個變量的值，能夠經過聲明一個局部變量。

　　

var name="haha";
 function changeName(){
     console.log(name);
     var name="xixi";
 }
 changeName();
 console.log(name);

變量提高

var name="haha";
  function changeName(){
      var name;
      console.log(name);
      name="xixi";
 }
 changeName();
 console.log(name);

26. 如何判斷當前腳本運行在瀏覽器仍是node環境中？

　　經過判斷Global對象是否爲window，若是不爲window，當前腳本沒有運行在瀏覽器中。

 

27. 什麼叫優雅降級和漸進加強？

　　優雅降級：以最低要求，實現最基礎的功能，向上兼容

　　漸進加強：開始先針對較高版本瀏覽器構建頁面，完善功能，再進行各類不一樣瀏覽器適配

 

28.WEB應用從服務器主動推送Data到客戶端有那些方式

　　　　1. 輪詢

　　　　2. 長鏈接

　　　　3. WebSocket

 

29.對Node的優勢和缺點提出了本身的見解

　　優勢：

　　　　1. node基於時間驅動和無阻塞，便於處理併發事件

　　　　2. 交互的客戶端用的是相同的語言

　　缺點：

　　　　1. node是一個相對新的開源項目，不太穩定

　　　　2. 缺少較多的第三方庫支持

 

30.你有哪些性能優化的方法

　　　　1. 減小http請求次數：CSS源碼壓縮，圖片適當大小，data緩存，圖片服務器。

　　　　2. 前端模板js+數據，減小HTML標籤致使的帶寬浪費，前端使用變量保存ajax請求結果，每次操做本地變量，不用請求，減小請求次數。

　　　　3. 用innerHTML代替DOM，減小DOM的操做次數，優化JavaScript性能

　　　　4. 不要直接設置style，而是經過classname設置

　　　　5. 少用全局變量，緩存DOM節點查找結果，減小IO讀取操做(IO指的是input和output)

　　　　6. 圖片預加載

 

31.http狀態碼有那些？分別表明是什麼意思？

　　　　1. 200 OK

　　　　2. 301  臨時跳轉

　　　　3. 304 永久跳轉

　　　　4. 400 error

　　　　5. 401 未受權

　　　　6. 403 禁止訪問

　　　　7. 404 not found

　　　　8. 500 服務器錯誤

　　　　9. 503 服務器沒法使用

 

32.一個頁面從輸入 URL 到頁面加載顯示完成，這個過程當中都發生了什麼

　　　　1. 當發送一個URL請求，瀏覽器會開一個線程處理這個請求，同時遠程dns服務器啓動dns查詢，使得瀏覽器得到相對應的ip。

　　　　2. 瀏覽器和遠程web服務器經過TCP三次握手創建TCP/IP鏈接。

　　　　3. 一旦TCP/IP創建，瀏覽器會經過該鏈接向服務器發送http的get請求，遠程服務器找到資源後經過http響應該資源，值爲200是一個正確的響應。

　　　　4. web服務器提供資源服務，客戶端下載資源，請求返回後，就進入前端模塊，瀏覽器解析HTML生成DOM tree。

 

33.javascript對象的幾種建立方式

　　　　1. 工廠模式

　　　　2. 原型模式

　　　　3. 構造函數模式

　　　　4. 混合原型模式和構造函數模式

　　　　5. 動態原型模式

　　　　6. 寄生構造函數模式

　　　　7. 穩妥構造函數模式

 

34.javascript繼承的6種方法

　　　　1. 原型鏈繼承 （將父類的實例做爲子類的原型）

　　　　2. 借用構造函數繼承　（）

　　　　3. 組合繼承（原型+借用構造）

　　　　4. 原型式繼承

　　　　5. 寄生式繼承

　　　　6. 寄生組合式繼承

 

35.ajax過程

　　ajax = async javascript and xml 異步JavaScript和XML

　　ajax是一種建立動態頁面，經過後臺和服務器進行少許數據交互，ajax能夠實現異步更新，實現頁面某部分更新。

　　　　1. 建立XMLHttpRequest對象，也就是建立一個異步調用對象

　　　　2. 建立一個新的HTTP請求，並指定該HTTP的請求方式和URL及驗證信息

　　　　3. 設置響應HTTP請求狀態變化的函數

　　　　4. 發送HTTP請求

　　　　5. 獲取異步調用返回的數據

　　　　6. 使用JavaScript和DOM實現局部刷新

 

36.異步加載和延遲加載

　　異步加載：又稱非阻塞模式，瀏覽器下載執行js的同時，還能夠進行後續的處理

　　實現方法

　　　　1. script DOM Element（async）

　　　　2. onload

　　延遲加載：有些js代碼在某些狀況才須要使用，並非頁面初始化的時候纔用到，延遲加載就是爲了解決這個問題，js將分紅許多模塊，初始化只需加載須要當即執行的js,其餘js等到第一次使用的時候再加載。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程