web前端面試題集錦

1. 偽類和偽元素的區別
   CSS 偽類用於向某些選擇器新增特殊的效果（active、docus、hover、link、visited、lang等）。
   CSS 偽元素用於將特殊的效果新增到某些選擇器（first-letter、first-line、before、after）。
2. link 和@import 的區別是?
   （1）、link屬於XHTML標籤，而@import完全是CSS提供的一種方式;
   （2）、頁面被載入的時候，link-會同時被載入，而@import引用的CSS會等到頁面被載入完再載入;
   （3）、import只有在IE5以上的才能識別，而link是XHTML標籤，無相容問題;
   （4）、link方式的樣式的權重 高於@import的權重.
3. css Hack
   HTML頭部的Hack：這種方式主要是針對IE瀏覽器，IE瀏覽器是廣大Web前端工程師的痛，它不僅有很多自己獨有的區別於其他瀏覽器的CSS樣式，自己不同版本之間的CSS實現也會存在很大的差異。下面我們來看看這種方式的寫法：

1
2
3
這種寫法會被非IE的瀏覽器所忽略，只有IE瀏覽器才會執行上面的程式碼，上面這段程式碼的意思是當IE的版本是8或者比8低的IE瀏覽器才會執行下面的樣式。例子中有一個運算子號lte，它是less than or equal to的簡寫，意思是小於等於，其他的運算子號還有lt（less than，小於）、gte（greater than or equal to，大於等於）、gt（greater than，大於）。

background:blue\0;/* OP */
background:turquoise\9;/* IE8+ */
[background:red;background:black;/* SA,CH */ 
*background:green; /* IE7 */
_background:yellow;/* IE6 */
background:red;/* FF */

4. 常見相容性問題
png24位的圖片在iE6瀏覽器上出現背景，解決方案是做成PNG8.
瀏覽器預設的margin和padding不同。解決方案是加一個全域性的*{margin:0;padding:0;}來統一。
IE6雙邊距bug:塊屬性標籤float後，又有橫行的margin情況下，在ie6顯示margin比設定的大。
浮動ie產生的雙倍距離 #box{ float:left; width:10px; margin:0 0 0 100px;}
這種情況之下IE會產生20px的距離，解決方案是在float的標籤樣式控制中加入 ——display:inline;將其轉化為行內屬性。(這個符號只有ie6會識別)
漸進識別的方式，從總體中逐漸排除區域性。
IE下,可以使用獲取常規屬性的方法來獲取自定義屬性,
也可以使用getAttribute()獲取自定義屬性;
Firefox下,只能使用getAttribute()獲取自定義屬性.
解決方法:統一通過getAttribute()獲取自定義屬性.
IE下,even物件有x,y屬性,但是沒有pageX,pageY屬性; Firefox下,event物件有pageX,pageY屬性,但是沒有x,y屬性.
解決方法：（條件註釋）缺點是在IE瀏覽器下可能會增加額外的HTTP請求數。
Chrome 中文介面下預設會將小於 12px 的文字強制按照 12px 顯示, 可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決.
超連結訪問過後hover樣式就不出現了 被點選訪問過的超連結樣式不在具有hover和active瞭解決方法是改變CSS屬性的排列順序:L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
5. iframe有那些缺點
* iframe會阻塞主頁面的Onload事件；
* iframe和主頁面共享連線池，而瀏覽器對相同域的連線有限制，所以會影響頁面的並行載入。
通過javascript動態給iframe新增src屬性值，這樣可以可以繞開以上兩個問題。
6. new操作符具體幹了什麼呢
1、建立一個空物件，並且 this 變數引用該物件，同時還繼承了該函式的原型。
2、屬性和方法被加入到 this 引用的物件中。
3、新建立的物件由 this 所引用，並且最後隱式的返回 this 。

var obj  = {};
obj.__proto__ = Base.prototype;
Base.call(obj);

7. 非同步載入的方式有哪些

  (1) defer，只支援IE
  (2) async：
  (3) 建立script，插入到DOM中，載入完畢後callBack

8. 效能優化的方法

（1） 減少http請求次數：CSS Sprites, JS、CSS原始碼壓縮、圖片大小控制合適；網頁Gzip，CDN託管，data快取 ，圖片伺服器。
（2） 前端模板 JS+資料，減少由於HTML標籤導致的頻寬浪費，前端用變數儲存AJAX請求結果，每次操作本地變數，不用請求，減少請求次數
（3） 用innerHTML代替DOM操作，減少DOM操作次數，優化javascript效能。
（4） 當需要設定的樣式很多時設定className而不是直接操作style。
（5） 少用全域性變數、快取DOM節點查詢的結果。減少IO讀取操作。
（6） 避免使用CSS Expression（css表示式)又稱Dynamic properties(動態屬性)。
（7） 圖片預載入，將樣式表放在頂部，將指令碼放在底部  加上時間戳。
（8） 避免在頁面的主體佈局中使用table，table要等其中的內容完全下載之後才會顯示出來，顯示比div+css佈局慢。

9. http狀態碼有那些？分別代表是什麼意思.
100-199 用於指定客戶端應相應的某些動作。
200-299 用於表示請求成功。
300-399 用於已經移動的檔案並且常被包含在定位頭資訊中指定新的地址資訊。
400-499 用於指出客戶端的錯誤。400 語義有誤，當前請求無法被伺服器理解。401 當前請求需要使用者驗證 403 伺服器已經理解請求，但是拒絕執行它。
500-599 用於支援伺服器錯誤。 503 – 服務不可用
10. 一個頁面從輸入 URL 到頁面載入顯示完成，這個過程中都發生了什麼
查詢瀏覽器快取
DNS解析、查詢該域名對應的IP地址、重定向（301）、發出第二個GET請求
進行HTTP協議會話
客戶端傳送報頭(請求報頭)
伺服器回饋報頭(響應報頭)
html文件開始下載
文件樹建立，根據標記請求所需指定MIME型別的檔案
檔案顯示
[ 瀏覽器這邊做的工作大致分為以下幾步：
載入：根據請求的URL進行域名解析，向伺服器發起請求，接收檔案（HTML、JS、CSS、圖象等）。
解析：對載入到的資源（HTML、JS、CSS等）進行語法解析，建議相應的內部資料結構（比如HTML的DOM樹，JS的（物件）屬性表，CSS的樣式規則等等）]
11. 介紹一下標準的CSS的盒子模型？低版本IE的盒子模型有什麼不同
1）有兩種， IE 盒子模型、W3C 盒子模型；
（2）盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border)；
（3）區 別： IE的content部分把 border 和 padding計算了進去;
12. 什麼是window物件? 什麼是document物件?
window物件是指瀏覽器開啟的視窗。
document物件是Documentd物件（HTML 文件物件）的一個只讀引用，window物件的一個屬性。
13. XML和JSON的區別
(1).資料體積方面。
JSON相對於XML來講，資料的體積小，傳遞的速度更快些。
(2).資料互動方面。
JSON與JavaScript的互動更加方便，更容易解析處理，更好的資料互動。
(3).資料描述方面。
JSON對資料的描述性比XML較差。
(4).傳輸速度方面。
JSON的速度要遠遠快於XML。
14. Web Worker 和webSocket
worker主執行緒:
1.通過 worker = new Worker( url ) 載入一個JS檔案來建立一個worker，同時返回一個worker例項。
2.通過worker.postMessage( data ) 方法來向worker傳送資料。
3.繫結worker.onmessage方法來接收worker傳送過來的資料。
4.可以使用 worker.terminate() 來終止一個worker的執行。
WebSocket是Web應用程式的傳輸協議，它提供了雙向的，按序到達的資料流。他是一個HTML5協議，WebSocket的連線是持久的，他通過在客戶端和伺服器之間保持雙工連線，伺服器的更新可以被及時推送給客戶端，而不需要客戶端以一定時間間隔去輪詢。
15. 移動端效能優化
儘量使用css3動畫，開啟硬體加速。
適當使用touch事件代替click事件。
避免使用css3漸變陰影效果。
可以用transform: translateZ(0)來開啟硬體加速。
不濫用Float。Float在渲染時計算量比較大，儘量減少使用
不濫用Web字型。Web字型需要下載，解析，重繪當前頁面，儘量減少使用。
合理使用requestAnimationFrame動畫代替setTimeout
CSS中的屬性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）會觸發GPU渲染，請合理使用。過渡使用會引發手機過耗電增加
PC端的在移動端同樣適用
16. cookie 和session 的區別
1、cookie資料存放在客戶的瀏覽器上，session資料放在伺服器上。
2、cookie不是很安全，別人可以分析存放在本地的COOKIE並進行COOKIE欺騙
考慮到安全應當使用session。
3、session會在一定時間內儲存在伺服器上。當訪問增多，會比較佔用你伺服器的效能
考慮到減輕伺服器效能方面，應當使用COOKIE。
4、單個cookie儲存的資料不能超過4K，很多瀏覽器都限制一個站點最多儲存20個cookie。
5、所以個人建議：
將登陸資訊等重要資訊存放為SESSION
其他資訊如果需要保留，可以放在COOKIE中
17. 如何刪除一個cookie

//1.將時間設為當前時間往前一點。
var date = new Date();
date.setDate(date.getDate() - 1);//真正的刪除
18. attribute和property的區別是什麼
attribute是dom元素在文件中作為html標籤擁有的屬性；
property就是dom元素在js中作為物件擁有的屬性。
所以：對於html的標準屬性來說，attribute和property是同步的，是會自動更新的，
但是對於自定義的屬性來說，他們是不同步的
19. css渲染
如果寫在body後會重新渲染整個頁面；同一個DOM同時應用多個class，樣式都會應用，重複的樣式會覆蓋
20. 建構函式、例項和原型物件的區別
例項就是通過建構函式建立的。例項一創造出來就具有constructor屬性（指向建構函式）和proto屬性（指向原型物件），
建構函式中有一個prototype屬性，這個屬性是一個指標，指向它的原型物件。
原型物件內部也有一個指標（constructor屬性）指向建構函式:Person.prototype.constructor = Person;
例項可以訪問原型物件上定義的屬性和方法。
在這裡person1和person2就是例項，prototype是他們的原型物件。
21. proto屬性和prototype屬性的區別
prototype是function物件中專有的屬性。
proto是普通物件的隱式屬性，在new的時候，會指向prototype所指的物件；
ptoto實際上是某個實體物件的屬性，而prototype則是屬於建構函式的屬性。ptoto只能在學習或除錯的環境下使用。
22. 你做的頁面在哪些流覽器測試過？這些瀏覽器的核心分別是什麼?
IE: trident核心
 Firefox：gecko核心
 Safari:webkit核心
 Opera:以前是presto核心，Opera現已改用Google Chrome的Blink核心
Chrome:Blink(基於webkit，Google與Opera Software共同開發)
23.如何克服click300ms 延遲

//1-禁用縮放，


//2-width=device-width Meta 標籤

在包含 width=device-width 或者置為比 viewport 值更小的頁面上禁用雙擊縮放。
//3-指標事件 (Pointer Events)
有一個和點選延遲直接相關的實現 —— 一個名為 touch-action 的新 CSS 屬性。
根據規範，touch-action 屬性決定 “是否觸控操作會觸發使用者代理的預設行為。這包括但不限於雙指縮放等行為”。
從實際應用的角度來看，touch-action 決定了使用者在點選了目標元素之後，是否能夠進行雙指縮放或者雙擊縮放。因此，這也相當完美地解決了 300 毫秒點選延遲的問題。
touch-action 的預設值為 auto，將其置為 none 即可移除目標元素的 300 毫秒延遲。例如，下面的程式碼在 IE10 和 IE11 上移除了所有連結和按鈕元素的點選延遲。
a[href], button {
-ms-touch-action: none; /* IE10 */
touch-action: none; /* IE11 */
}
24. 同一個事件處理函式可以繫結2次,一次用於事件捕獲，一次用於事件冒泡

var dom = document.getElementById(“outestA”);
dom.addEventListener(‘click’, a, false);
dom.addEventListener(‘click’, a, true);
//捕獲階段的處理函式最先執行，其次是目標階段的處理函式，最後是冒泡階段的處理函式。目標階段的處理函式，先註冊的先執行，後註冊的後執行。
25.html和xhtml和xml的區別
1、html即是超文字標記語言（Hyper Text Markup Language），是最早寫網頁的語言，但是由於時間早，規範不是很好，大小寫混寫且編碼不規範；
2、xhtml即是升級版的html（Extensible Hyper Text Markup Language），對html進行了規範，編碼更加嚴謹純潔，也是一種過渡語言，html向xml過渡的語言；
3、xml即時可擴充套件標記語言（Extensible Markup Language），是一種跨平臺語言，編碼更自由，可以自由建立標籤。
4、網頁編碼從html>>xhtml>>xml這個過程發展
xhtml對比與html，xhtml文件具有良好完整的排版，體現在兩方面：a、元素必須要有結束標籤；b、元素必須巢狀；
2、對於html的元素和屬性，xhtml必須小寫，因為xml是嚴格區分大小寫的；
3、xhtml的屬性值必須在引號之中；
4、xhtml不支援屬性最小化，什麼是屬性最小化？
　　正確:非最小化屬性(unminimized attributes)
　　不正確:最小化屬性(minimized attributes)
5、 在xhtml中，name屬性是不贊成使用的，在以後的版本中將被刪除。
26. 什麼是FOUC?如何避免
Flash Of Unstyled Content：使用者定義樣式表載入之前瀏覽器使用預設樣式顯示文件， 使用者樣式載入渲染之後再從新顯示文件， 造成頁面閃爍。 解決方法：把樣式表放到文件的 head
27. offsetWidth/offsetHeight,clientWidth/clientHeight與scrollWidth/scrollHeight的區別
offsetWidth/offsetHeight返回值包含content + padding + border， 效果與e.getBoundingClientRect()相同
clientWidth/clientHeight返回值只包含content + padding， 如果有滾動條， 也不包含滾動條
scrollWidth/scrollHeight返回值包含content + padding + 溢位內容的尺寸
28. XMLHttpRequest通用屬性和方法
readyState :表示請求狀態的整數， 取值：
UNSENT（ 0） ：物件已建立
OPENED（ 1） ：open()成功呼叫， 在這個狀態下， 可以為xhr設定請求頭， 或者使用send()傳送請求 HEADERS_RECEIVED(2)：所有重定向已經自動完成訪問， 並且最終響應的HTTP頭已經收到LOADING(3)：響應體正在接收
DONE(4)：資料傳輸完成或者傳輸產生錯誤
2. onreadystatechange ：readyState改變時呼叫的函式
3. status ：伺服器返回的HTTP狀態碼（ 如， 200， 404）
4. statusText :伺服器返回的HTTP狀態資訊（ 如， OK， No Content）
5. responseText :作為字串形式的來自伺服器的完整響應
6. responseXML : Document物件， 表示伺服器的響應解析成的XML文件
7. abort() :取消非同步HTTP請求
8. getAllResponseHeaders() : 返回一個字串， 包含響應中伺服器傳送的全部HTTP報頭。 每個報頭都
是一個用冒號分隔開的名/值對， 並且使用一個回車/換行來分隔報頭行
9. getResponseHeader(headerName) :返回headName對應的報頭值
10. open(method, url, asynchronous [, user, password]) :初始化準備傳送到伺服器上的請求。
method是HTTP方法， 不區分大小寫；url是請求傳送的相對或絕對URL；asynchronous表示請求是否
非同步；user和password提供身份驗證
11. setRequestHeader(name, value) :設定HTTP報頭
12. send(body) :對伺服器請求進行初始化。 引數body包含請求的主體部分， 對於POST請求為鍵值對字
符串；對於GET請求， 為null

1. sessionStorage,localStorage,cookie區別
2. 都會在瀏覽器端儲存， 有大小限制， 同源限制
3. cookie會在請求時傳送到伺服器， 作為會話標識， 伺服器可修改cookie；web storage不會發送到服務
   器
4. cookie有path概念， 子路徑可以訪問父路徑cookie， 父路徑不能訪問子路徑cookie
5. 有效期：cookie在設定的有效期內有效， 預設為瀏覽器關閉；sessionStorage在視窗關閉前有效，
   localStorage長期有效， 直到使用者刪除
6. 共享：sessionStorage不能共享， localStorage在同源文件之間共享， cookie在同源且符合path規則的
   文件之間共享
7. localStorage的修改會促發其他文件視窗的update事件
8. cookie有secure屬性要求HTTPS傳輸
9. 瀏覽器不能儲存超過300個cookie， 單個伺服器不能超過20個， 每個cookie不能超過4k。 web storage
   大小支援能達到5M