前端面試題匯總

第一部分HTML&CSS

1. 瀏覽器分類

瀏覽器：IE，Chrome，FireFox，Safari，Opera。

內核：Trident，Gecko，Presto，Webkit。

2.行內元素和塊級元素

行內元素：水平排列，不能包含塊級頁面；width/height無效，margin/padding無效

塊級元素：各占據一行，垂直方向排列。從新行開始結束接著一個斷行。

兼 容 性：display:inline-block;display:inline;zoom:1;

3. 清除浮動有哪些方式？比較好的方式是哪一種？

浮動的意義：初衷是用于讓文字環繞圖片，float可以自動包裹元素，float可導致高度坍塌--

當標簽里元素只有樣子沒有實際高度時會坍塌，浮動會脫離文檔流，產生自己的塊級上下文。

本級尾部加標簽：結尾處加空標簽(div,br...)并clear :both;

本級定義父級

偽類：after和zoom

高度：height

overflow:hidden/auto

display:table

浮動并定義寬度

比較好的是第3種方式，簡潔方便。

4. box-sizing常用的屬性

屬性：box-sizing: content-box|border-box|inherit;

作用：

content-box:寬高度分別對應到元素的content，內邊距和邊框在寬高之外渲染(默認)。

border-box:寬高度分別對應到元素的border,任何內邊距和邊框都將在已設定的寬高內渲染。

總結：x-box=>元素寬高對應到x

5. Doctype作用，標準模式與兼容模式

告知瀏覽器的解析器用什么文檔標準解析這個文檔。

DOCTYPE不存在或格式不正確會導致文檔以兼容模式呈現。

標準模式的渲染引擎都是以該瀏覽器支持的最高標準運行。

在兼容模式中，頁面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作。

6. HTML5 為什么只需要寫 < Doctype html>？

如果瀏覽器基于SGML，需要對DTD引用；H5不基于它，HTML4.01基于它

doctype用于規范瀏覽器行為，H5需要引入它以受控

7. 頁面導入樣式時，使用link和@import有什么區別？

語法的角度：

link屬于XHTML標簽，除了加載CSS外，還能用于定義RSS, 定義rel連接屬性等作用；

而@import是CSS提供的語法，只能用于加載CSS;

瀏覽器解析的角度

頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載(標準瀏覽器);

兼容性問題

import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標簽，無兼容問題。

總之，link要優于@import,由此決定了它的適應性更廣，加載性更快，兼容性更強。

8.瀏覽器內核

內核分類

瀏覽器

內核

Chrome,Safari

WebKit

Opera

Presto=>Blink

FF

Gecko

IE

Trident

內核分類

渲染引擎和JS引擎

渲染引擎

負責取得網頁的內容(HTML、XML、圖像...)+整理訊息(CSS...)+計算網頁的顯示方式，

然后輸出(顯示器/打印機)。

瀏覽器的內核決定其渲染的效果。

適用范圍：所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網絡內容的應用程序都需要內核。

JS引擎則

解析和執行js的引擎。

起初js引擎并不獨立于渲染引擎，隨著web技術的發展逐漸獨立出來(chrome的V8引擎)

9. html5 vs html4.01

HTML5 現在已經不是 SGML 的子集，主要是關于圖像，位置，存儲，多任務等功能的增加。

繪畫 ：canvas，svg;

媒體元素： video 和 audio 元素;

存儲：本地離線存儲 localStorage ，sessionStorage 的數據在瀏覽器關閉后自動刪除;

語義化標簽：article、footer、header、nav、section，main,aside;

表單控件:calendar、date、time、email、url、search,upload;

新的技術webworker, websocket, Geolocation;

hack:IE8/IE7/IE6支持通過document.createElement方法產生的標簽， 可以利用這一特性讓這些瀏覽器支持HTML5新標簽，

瀏覽器支持新標簽后，還需要添加標簽默認的樣式。 也可以直接使用成熟的框架、比如html5shim，

語義化標簽的理解：用正確的標簽做正確的事情。

語義化：html語義化讓頁面的內容結構化，結構更清晰，便于對瀏覽器、搜索引擎解析;

利于SEO：即使在沒有樣式CSS情況下也以一種文檔格式顯示，并且是容易閱讀的;

搜索引擎的爬蟲也依賴于HTML標記來確定上下文和各個關鍵字的權重;

離線儲存

方式

數據源

信息量

接口

存儲空間獨立性

cookie

B+S

小

小

依賴

sessionStorage

B

大

多

獨立

localStorage

B

大

多

獨立

10. 常見瀏覽器兼容性問題

problem

describe

hack

png24位的圖片

iE6瀏覽器上出現背景

做成PNG8

margin/padding

不同瀏覽器顯示不同

{margin:0;padding:0;}

IE6雙邊距bug

xx

百度

getAttribute()

Firefox下,只能使用getAttribute()獲取自定義屬性;IE都行

統一通過getAttribute()獲取自定義屬性

even對象

IE下,有x,y屬性,但是沒有pageX,pageY屬性;Firefox下反之

(條件注釋)缺點是在IE瀏覽器下可能會增加額外的HTTP請求數。

Chrome

中文界面下默認會將小于?12px?的文本強制按照?12px?顯示

通過加入?CSS?屬性?-webkit-text-size-adjust:?none;

L-V-H-A

超鏈接訪問過后hover樣式就不出現了?被點擊訪問過的超鏈接樣式不在具有hover和active了

改變CSS屬性的排列順序a:link?{}?a:visited?{}?a:hover?{}?a:active?{}

第二部分CSS

1.盒模型

分類：標準盒模型和IE盒模型；區別：content 是否包含 border 和 pading(IE包含);

盒模型： content,padding,margin ,border

2.CSS 選擇符及繼承性和優先級算法，偽類

選擇符

1.id選擇器( # myid)

2.類選擇器(.myclassname)

3.標簽選擇器(div, h1, p)

4.相鄰選擇器(h1 + p)

5.子選擇器(ul > li)

6.后代選擇器(li a)

7.通配符選擇器( * )

8.屬性選擇器(a[rel = "external"])

9.偽類選擇器(a: hover, li: nth - child)

可繼承性

可繼承屬性

font-size font-family color,ul,li,dd,dt;

不可繼承的屬性

border padding margin width height

優先級

就近原則:同權重情況下樣式定義最近者為準,載入樣式以最后載入的定位為準;

優先級算法: !important > id > class > tag

3. CSS3新增偽類

p:first-of-type 選擇屬于其父元素的首個

元素的每個

元素。

p:last-of-type 選擇屬于其父元素的最后

元素的每個

元素。

p:only-of-type 選擇屬于其父元素唯一的

元素的每個

元素。

p:only-child 選擇屬于其父元素的唯一子元素的每個

元素。

p:nth-child(2) 選擇屬于其父元素的第二個子元素的每個

元素。

:enabled :disabled 控制表單控件的禁用狀態。

:checked 單選框或復選框被選中。

4.居中顯示問題

水平居中div{width:200px; margin:0 auto; }

垂直居中div{ background: red; width: 100px; height: 200px; position: absolute; top: 50%; left: 50%; margin-left: -50px; margin-top: -100px; /*transform: translate(-50%,-50%);*/ }

5.display vs position

display:block|inline-block|list-item|none

position

absolute :生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。

fixed :(老IE不支持)生成絕對定位的元素，相對于瀏覽器窗口進行定位。

relative:生成相對定位的元素，相對于其正常位置進行定位。

static :默認值。沒有定位，元素出現在正常的流中, (忽略 top, bottom, left, right z-index 聲明)

inherit: 規定從父元素繼承 position 屬性的值。

6. CSS3新特性

CSS3實現圓角(border-radius:8px)，

陰影(box-shadow:10px)，

對文字加特效(text-shadow、)

線性漸變(gradient)

旋轉(transform)

ransform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px)

skew(-9deg,0deg);//旋轉,縮放,定位,傾斜

增加了更多的CSS選擇器 多背景 rgba

JavaScript

事件代理/事件委托(delegation)

當我們需要對很多元素添加事件的時候，可以通過將事件添加到它們的父節點而將事件

委托給父節點來觸發處理函數。這主要得益于瀏覽器的事件冒泡機制。

function(client, clientMethod) { return function() { return clientMethod.apply(client, arguments); } } var agentMethod = delegate (client, clientMethod); agentMethod();

簡單實例

var resources = document.querySelector('#resources'), log = document.querySelector('#log'); resources.addEventListener('mouseover', showtarget, false); function showtarget(ev) { var target = ev.target; if (target.tagName === 'A') { log.innerHTML = 'A link, with the href:' + target.href; } if (target.tagName === 'LI') { log.innerHTML = 'A list item'; } if (target.tagName === 'UL') { log.innerHTML = 'The list itself'; }} //方便之處 document.getElementById("parent-list").addEventListener("click", function(e) { if(e.target && e.target.nodeName == "LI") { console.log("List item ", e.target.id.replace("post-"), " was clicked!"); } });

this對象使用場景

作為函數調用，this 綁定全局對象，瀏覽器環境全局對象為 window 。

內部函數的 this 也綁定全局對象

(應該綁定到其外層函數對應的對象上，這是 JavaScript的缺陷，用that替換)

作為構造函數使用，this 綁定到新創建的對象。

作為對象方法使用，this 綁定到該對象。

使用apply或call調用 this 將會被顯式設置為函數調用的第一個參數。

原型繼承原理

每個函數都有一個原型對象的屬性(F.prototype),每個函數都可以是一個構造函數。

即通過new關鍵字可以創建任意函數的一個實例。

原型繼承原理：JS中是沒有類的，所有繼承屬于基于原型的繼承。在調用某個對象的屬性或方法

時，js引擎會優先在該對象自身上查找該屬性或方法，如果沒有便去該對象的構造函數中去查找，

如此逐級遞歸查找，直到原型鏈的最頂層。

hash表

哈希表是根據key-value鍵值對而直接訪問對象在內存的存儲位置的數據結構。即，它是

通過把鍵值通過一個函數計算，映射到表中的一個位置來訪問記錄，這加快了查找速度。這個映射

稱為散列函數，存放記錄的數組為散列表。

null和undefined

undefined:js數據類型之一，undeclared是js的一種語法錯誤類型。

JS宿主對象和原生對象

宿主對象：COM=DOM and BOM ，C++寫的對象；原生對象：Object,Function,Array,String,Boolean,Number

Date,RegExp,Error,Math,Promise等。

數組去重

`

//方法一，遍歷數組法

function beUnique(arrs){

var newArr = [];//臨時數組

arrs.forEach(function(arr){

if(newArr.indexOf(arr)===-1){

newArr.push(arr);

}

});//forEach便利對于偽數組處理效果更好，for循環則把偽數組的空元素處理成undefined

return newArr;

}

//笨方法，排序+對比前后是否相等

function beUnique(arrs){

arrs.sort();

var newArr=[];

//forEach||for-in便利失效

for(var i,i=0;i

if(arrs[i+1]==arrs[i]){

newArr.push(arrs[i]);

}

}

return newArr;

}

//ES6語法糖

Array.from(new Set(arr));

//對象鍵值對法

function unique2(array){

var n = {}, r = [], len = array.length, val, type;

for (var i = 0; i < array.length; i++) {

val = array[i];

type = typeof val;

if (!n[val]) {

n[val] = [type];

r.push(val);

} else if (n[val].indexOf(type) < 0) {

n[val].push(type);

r.push(val);

}

}

return r;

//結合call/apply,效率更高

function unique1() {

var newArray = [];

this.forEach(function (index) {

if (newArray.indexOf(index) == -1) {

newArray.push(index); } });

return newArray;

}

unique1.apply(arr);

//對象鍵值對法

Array.prototype.unique3 = function () {

// 構建一個新數組存放結果

var newArray = [];

// 創建一個空對象

var object = {}; // for循環時，每次取出一個元素與對象進行對比

// 如果這個元素不重復，則將它存放到結果數中

// 同時把這個元素的內容作為對象的一個屬性，并賦值為1,

// 存入到第2步建立的對象中

for (var i = 0; i < this.length; i++){

// 檢測在object對象中是否包含遍歷到的元素的值

if(!object[typeof(this[i]) + this[i]]) {

// 如果不包含，將存入對象的元素的值推入到結果數組中

newArray.push(this[i]);

// 如果不包含，存入object對象中該屬性名的值設置為1

object[typeof(this[i]) + this[i]] = 1;

} }

return newArray;

}

`

數組求和

var arr=[1,2,3,4]; var sum=0; //forEach arr.forEach(function(item){ sum+=item; }); //map arr.map(function(item){ sum+=item }); //reduce arr.reduce(function(pre,cur){ return pre+cur })

eval

把對應的字符串解析成JS代碼并運行；

應該避免使用eval------不安全，非常耗性能(2次，一次解析成js語句，一次執行)。

由JSON字符串轉換為JSON對象的時候可以用eval，var obj =eval(‘(‘+ str +’)’)。

DOM怎樣添加、移除、移動、復制、創建和查找節點

創建新節點

創建一個DOM片段 createDocumentFragment()

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

創建一個文本節點createTextNode()

添加、移除、替換、插入 appendChild() removeChild() replaceChild() insertBefore()

在已有的子節點前插入一個新的子節點：？？？

查找

通過標簽名稱 ： getElementsByTagName()

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

通過元素Id，唯一性：getElementById()

null和undefined的區別？

null是一個表示”無”的對象，轉為數值時為0；

undefined是一個表示”無”的原始值，轉為數值時為NaN。

undefined：

(1)變量被聲明了，但沒有賦值時，就等于undefined。

(2) 調用函數時，應該提供的參數沒有提供，該參數等于undefined。

(3)對象沒有賦值的屬性，該屬性的值為undefined。

(4)函數沒有返回值時，默認返回undefined。

null：

(1) 作為函數的參數，表示該函數的參數不是對象。

(2) 作為對象原型鏈的終點。

new操作符具體干了什么呢?

(1)創建一個空對象，并且 this 變量引用該對象，同時還繼承了該函數的原型。

(2)屬性和方法被加入到 this 引用的對象中。

(3)新創建的對象由 this 所引用，并且最后隱式的返回 this 。

JSON 的了解？

JSON(JavaScript Object Notation) 是一種

輕量級的數據交換格式

它是基于JavaScript的一個子集。數據格式簡單, 易于讀寫, 占用帶寬小。 格式：采用鍵值對，例如：{‘age’:’12’, ‘name’:’back’}

call() 和 apply() 的區別和作用？

apply()函數有兩個參數：第一個參數是上下文，第二個參數是參數組成的數組。

如果上下文是null，則使用全局對象代替。 如：function.apply(this,[1,2,3]);

call()的第一個參數是上下文，后續是實例傳入的參數序列。 如：function.call(this,1,2,3);

第三部分：其他

1.HTTP狀態碼知道哪些？

state code

describe

mark

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

服務器端暫時無法處理請求(可能是過載或維護)

2. 性能優化

減少http請求次數：CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適；

網頁Gzip，CDN托管，data緩存 ，圖片服務器。

前端模板 ：JS+數據，減少由于HTML標簽導致的帶寬浪費，前端用變量保存AJAX請求結果，

每次操作本地變量，不用請求，減少請求次數

用innerHTML代替DOM操作，減少DOM操作次數，優化javascript性能。

當需要設置的樣式很多時設置className而不是直接操作style。

少用全局變量、緩存DOM節點查找的結果。減少IO讀取操作。

避免使用CSS Expression(css表達式)又稱Dynamic properties(動態屬性)。

圖片預加載，將樣式表放在頂部，將腳本放在底部 加上時間戳。

3. 優雅降級和漸進增強

優雅降級

Web站點在所有新式瀏覽器中都能正常工作，如果用戶使用的是老式瀏覽器，

則代碼會檢查以確認它們是否能正常工作。由于IE獨特的盒模型布局問題，

針對不同版本的IE的hack實踐過優雅降級了,為那些無法支持功能的瀏覽器增加候選方案，

使之在舊式瀏覽器上以某種形式降級體驗卻不至于完全失效。

漸進增強

從被所有瀏覽器支持的基本功能開始，逐步地添加那些只有新式瀏覽器才支持的功能,

向頁面增加無害于基礎瀏覽器的額外樣式和功能的。當瀏覽器支持時，它們會自動地呈現出來并發揮作用。

內存泄漏

內存泄漏:任何對象在您不再擁有或需要它之后仍然存在。

垃圾回收器定期掃描對象，并計算引用了每個對象的其他對象的數量。

如果一個對象的引用計數為 0(沒有其他對象引用過該對象)，或對該對象的惟一引用是循環的，

那么該對象的內存即可回收。

setTimeout 的第一個參數使用字符串而非函數的話，會引發內存泄漏。

閉包、控制臺日志、循環(在兩個對象彼此引用且彼此保留時，就會產生一個循環)。

線程與進程的區別

一個程序至少有一個進程,一個進程至少有一個線程。 線程的劃分尺度小于進程，使得多線程程序的并發性高。 另外，進程在執行過程中擁有獨立的內存單元，而多個線程共享內存，從而極大地提高了程序的運行效率。 線程在執行過程中與進程還是有區別的。每個獨立的線程有一個程序運行的入口、順序執行序列和程序的出口。但是線程不能夠獨立執行，必須依存在應用程序中，由應用程序提供多個線程執行控制。 從邏輯角度來看，多線程的意義在于一個應用程序中，有多個執行部分可以同時執行。但操作系統并沒有將多個線程看做多個獨立的應用，來實現進程的調度和管理以及資源分配。這就是進程和線程的重要區別。

總結

以上是生活随笔為你收集整理的array 前端面试题_web前端开发面试题汇总的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。