前端面試題匯總

第一部分HTML&CSS

1. 瀏覽器分類

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

內(nèi)核：Trident，Gecko，Presto，Webkit。

2.行內(nèi)元素和塊級元素

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

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

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

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

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

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

本級尾部加標簽：結(jié)尾處加空標簽(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，內(nèi)邊距和邊框在寬高之外渲染(默認)。

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

總結(jié)：x-box=>元素寬高對應到x

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

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

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

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

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

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

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

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

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

語法的角度：

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

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

瀏覽器解析的角度

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

兼容性問題

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

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

8.瀏覽器內(nèi)核

內(nèi)核分類

瀏覽器

內(nèi)核

Chrome,Safari

WebKit

Opera

Presto=>Blink

FF

Gecko

IE

Trident

內(nèi)核分類

渲染引擎和JS引擎

渲染引擎

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

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

瀏覽器的內(nèi)核決定其渲染的效果。

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

JS引擎則

解析和執(zhí)行js的引擎。

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

9. html5 vs html4.01

HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲，多任務等功能的增加。

繪畫 ：canvas，svg;

媒體元素： video 和 audio 元素;

存儲：本地離線存儲 localStorage ，sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除;

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

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

新的技術(shù)webworker, websocket, Geolocation;

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

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

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

語義化：html語義化讓頁面的內(nèi)容結(jié)構(gòu)化，結(jié)構(gòu)更清晰，便于對瀏覽器、搜索引擎解析;

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

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

離線儲存

方式

數(shù)據(jù)源

信息量

接口

存儲空間獨立性

cookie

B+S

小

小

依賴

sessionStorage

B

大

多

獨立

localStorage

B

大

多

獨立

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

problem

describe

hack

png24位的圖片

iE6瀏覽器上出現(xiàn)背景

做成PNG8

margin/padding

不同瀏覽器顯示不同

{margin:0;padding:0;}

IE6雙邊距bug

xx

百度

getAttribute()

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

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

even對象

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

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

Chrome

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

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

L-V-H-A

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

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

第二部分CSS

1.盒模型

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

盒模型： content,padding,margin ,border

2.CSS 選擇符及繼承性和優(yōu)先級算法，偽類

選擇符

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

優(yōu)先級

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

優(yōu)先級算法: !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 控制表單控件的禁用狀態(tài)。

: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 :默認值。沒有定位，元素出現(xiàn)在正常的流中, (忽略 top, bottom, left, right z-index 聲明)

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

6. CSS3新特性

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

陰影(box-shadow:10px)，

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

線性漸變(gradient)

旋轉(zhuǎn)(transform)

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

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

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

JavaScript

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

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

委托給父節(jié)點來觸發(fā)處理函數(shù)。這主要得益于瀏覽器的事件冒泡機制。

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對象使用場景

作為函數(shù)調(diào)用，this 綁定全局對象，瀏覽器環(huán)境全局對象為 window 。

內(nèi)部函數(shù)的 this 也綁定全局對象

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

作為構(gòu)造函數(shù)使用，this 綁定到新創(chuàng)建的對象。

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

使用apply或call調(diào)用 this 將會被顯式設(shè)置為函數(shù)調(diào)用的第一個參數(shù)。

原型繼承原理

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

即通過new關(guān)鍵字可以創(chuàng)建任意函數(shù)的一個實例。

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

時，js引擎會優(yōu)先在該對象自身上查找該屬性或方法，如果沒有便去該對象的構(gòu)造函數(shù)中去查找，

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

hash表

哈希表是根據(jù)key-value鍵值對而直接訪問對象在內(nèi)存的存儲位置的數(shù)據(jù)結(jié)構(gòu)。即，它是

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

稱為散列函數(shù)，存放記錄的數(shù)組為散列表。

null和undefined

undefined:js數(shù)據(jù)類型之一，undeclared是js的一種語法錯誤類型。

JS宿主對象和原生對象

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

Date,RegExp,Error,Math,Promise等。

數(shù)組去重

`

//方法一，遍歷數(shù)組法

function beUnique(arrs){

var newArr = [];//臨時數(shù)組

arrs.forEach(function(arr){

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

newArr.push(arr);

}

});//forEach便利對于偽數(shù)組處理效果更好，for循環(huán)則把偽數(shù)組的空元素處理成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;

//結(jié)合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 () {

// 構(gòu)建一個新數(shù)組存放結(jié)果

var newArray = [];

// 創(chuàng)建一個空對象

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

// 如果這個元素不重復，則將它存放到結(jié)果數(shù)中

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

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

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

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

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

// 如果不包含，將存入對象的元素的值推入到結(jié)果數(shù)組中

newArray.push(this[i]);

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

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

} }

return newArray;

}

`

數(shù)組求和

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語句，一次執(zhí)行)。

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

DOM怎樣添加、移除、移動、復制、創(chuàng)建和查找節(jié)點

創(chuàng)建新節(jié)點

創(chuàng)建一個DOM片段 createDocumentFragment()

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

創(chuàng)建一個文本節(jié)點createTextNode()

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

在已有的子節(jié)點前插入一個新的子節(jié)點：？？？

查找

通過標簽名稱 ： getElementsByTagName()

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

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

null和undefined的區(qū)別？

null是一個表示”無”的對象，轉(zhuǎn)為數(shù)值時為0；

undefined是一個表示”無”的原始值，轉(zhuǎn)為數(shù)值時為NaN。

undefined：

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

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

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

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

null：

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

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

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

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

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

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

JSON 的了解？

JSON(JavaScript Object Notation) 是一種

輕量級的數(shù)據(jù)交換格式

它是基于JavaScript的一個子集。數(shù)據(jù)格式簡單, 易于讀寫, 占用帶寬小。 格式：采用鍵值對，例如：{‘a(chǎn)ge’:’12’, ‘name’:’back’}

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

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

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

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

第三部分：其他

1.HTTP狀態(tài)碼知道哪些？

state code

describe

mark

100

Continue

一般在發(fā)送post請求時已發(fā)送了http header之后服務端將返回此信息，表示確認，之后發(fā)送具體參數(shù)信息

200

OK

正常返回信息

201

Created

請求成功并且服務器創(chuàng)建了新的資源

202

Accepted

服務器已接受請求，但尚未處理 301 Moved Permanently 請求的網(wǎng)頁已永久移動到新位置。

302

Found

臨時性重定向

303

See Other

臨時性重定向，且總是使用 GET 請求新的 URI。

304

Not Modified

自從上次請求后，請求的網(wǎng)頁未修改過。

400

Bad Request

服務器無法理解請求的格式，客戶端不應當嘗試再次使用相同的內(nèi)容發(fā)起請求。

401

Unauthorized

請求未授權(quán)。

403

Forbidden

禁止訪問

404

Not Found

找不到如何與 URI 相匹配的資源。

500

Internal Server Error

最常見的服務器端錯誤

503

Service Unavailable

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

2. 性能優(yōu)化

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

網(wǎng)頁Gzip，CDN托管，data緩存 ，圖片服務器。

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

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

用innerHTML代替DOM操作，減少DOM操作次數(shù)，優(yōu)化javascript性能。

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

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

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

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

3. 優(yōu)雅降級和漸進增強

優(yōu)雅降級

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

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

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

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

漸進增強

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

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

內(nèi)存泄漏

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

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

如果一個對象的引用計數(shù)為 0(沒有其他對象引用過該對象)，或?qū)υ搶ο蟮奈┮灰檬茄h(huán)的，

那么該對象的內(nèi)存即可回收。

setTimeout 的第一個參數(shù)使用字符串而非函數(shù)的話，會引發(fā)內(nèi)存泄漏。

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

線程與進程的區(qū)別

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。