最新前端面試寶典（題目+答案），持續更新中...

Cookie

弊端：

Cookie數量和長度都是有限制的,每一個域名最多隻能有20條cookie，每一個cookie長度不能超過4kb，否者會被截取。

Cookie會被攔截，而後獲取session信息。

瀏覽器本地緩存

Web stroge 和cookie,cookie實際上是和服務器作交互的，主要是爲服務器所用，web strong就是做爲本地存儲的。

Web strong主要有兩種：localstroge和sessionstroge.

Localstroge：長期存在，同一域名共享。

Sessionstroge：只在會話存在，窗口關閉則不存在，窗口之間不能夠共享。

Display:none和visibility：hidden區別

display：none：不佔據空間。

Visibility：hidden：佔據空間，只是看不見而已。

@import和link

Link屬於html標籤，@import屬於css提供的；

Link頁面加載時同時加載，@import頁面加載完才加載；

@import在IE5以上才被識別，link無兼容性；

Link權重高於@import。

position的absolute與fixed

共同點：

脫離標準流，不佔據空間

不一樣點：

Absolute是根據設置了相對定位的父級以上的元素進行設置的，fixed是根據窗口驚醒設置的。

Css盒子模型

有兩種，IE盒子模型(ie8如下)、w3c盒子模型

IE盒子模型：border+padding+content

w3c盒子模型：content

Box-sizing: border-box; ie盒子模型

Box-sizing: content-box; w3c盒子模型

css選擇符

選擇器：

ID選擇器

類選擇器

標籤選擇器

相鄰選擇器

子級選擇器

後代選擇器

通配符選擇器

屬性選擇器

僞類選擇器

 

能夠繼承的樣式：

Font-size,font-famaily,color,text-indent

@important>id選擇器>類選擇器>標籤選擇器>通配選擇器

Css新增選擇器

:nth-child(n)

:disabled

:checked

Css3新增屬性

圓角、漸變、旋轉、陰影、過渡、媒體查詢、多欄佈局。

語義化

有利於SEO，有助於爬蟲信息抓取；

有利於團隊開發，增長可讀性。

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

<!DOCTYPE>聲明在文檔最前面，是用來告訴瀏覽器該使用什麼模式來渲染文檔；

嚴格模式的排版和js運行模式都是按照瀏覽器的最高標準；

http與https

http是一種超文本傳輸協議，是如今網絡傳輸最主流的傳輸協議，傳輸的數據都是明文，未加密的。

https是以安全爲目標的http協議，傳輸的數據時加密的。

兼容性問題

1. 瀏覽器 默認的padding和margin不一致。

解決：*{padding：0；margin：0}

1. 空的input：file在蘋果瀏覽器中進行form表單提交會報錯。

解決：提交前刪除空的移除空的input：file

1. Margin-bottom 在蘋果瀏覽器無效。

解決：padding-bottom 代替

浮動

浮動元素會脫離標準流，不佔據空間。會形成父元素塌陷，影響頁面佈局。

解決：

1. overflow:hdden;
2. 空標籤，設置clear：both;
3. 僞類標籤：clearfix

DOM節點操做

建立：CreatedElement();

添加：appendChild() 在元素內部尾部插入元素

InsertBefore() 在元素內部開始插入元素

移除：removeChild();

替換：replaceChild();

 

Html5

新增語義化標籤：

Heater、footer、section、nav、aside；

音頻和視頻：audio、video；

畫布：canvas；

本地緩存：web stroge;

表單控件：

Date、time、email、url、search

新的技術：

WebSocket。

Iframe

優勢：

異步加載緩慢的網頁或者腳本；

缺點：

阻塞主頁面的onload事件，沒有語義化，html5無提倡。

多標籤頁通訊

Web stroge 使用。

Websocket兼容性問題

使用socket.io。

進程和線程

一個程序至少有一個進程，一個進程至少一個線程；

Js 是單線程的，爲何能夠異步？

由於js主線程雖然是單線程的，可是底層倒是多線程的，因此支持異步。

項目優化

圖片壓縮、雪碧圖、gif、圖片最好能夠代表寬高；

文件合併；

CDN託管；

緩存使用：例如ajax緩存；

圖片懶加載；

NaN、null、undefind

NaN類型：number；

Nulll類型：object；

Undefind類型：undefind；

注意：

NaN == NaN  -- false

‘NaN’ == NaN  -- false

NaN == 0  --false

Null == undefind  --true 由於兩個意義上都表明無

Null === undefind  --false

Null == false  --false

Undefind == false  --false

False == 0  --true

typeof(NaN)

"number"

typeof('NaN')

"string"

typeof(0)

"number"

typeof(null)

"object"

typeof(NaN)

"number"

typeof(undefined)

"undefined"

解決跨域

Jsonp(get，原理動態插入script ,由於script不存在跨域問題)、服務器代理（經常使用）。

Document.write和innerHTML

Document.write只能重繪整一個頁面；

innerHTML能夠重繪頁面部份內容；

.call()和.apply()

兩個方法都是函數的方法，能夠改變this的指向問題。

Apply()多接受1個數組參數。獲取最大最小值(Math.max.apply(window, arr)。

內存泄漏

指因爲不良的編碼習慣定義的一些再也不須要的對象還存在。

全局變量濫用、對象或者方法的循環引用、計時器或者回調函數。

閉包

閉包其實就是一個函數，函數內部能夠訪問其父級函數做用域。

Var a = {b: 1}

Var b = {}

b.a1 = a

b.a2 = a

b.a1 == b.a2  --false

由於基本類型都是存在棧內存，引用類型的變量的值存在堆內存，引用類型的在堆裏面對應的key存在棧裏面。

瀏覽器內核

谷歌瀏覽器：blink

ie瀏覽器：trident

Safari瀏覽器：webkit

Opera瀏覽器：blink

Firefox: gecko

漸進加強和優雅降級

漸進加強：先針對低版本瀏覽器進行構建頁面，完成基本功能，而後再對高版本瀏覽器進行交互、效果、功能上優化。

漸進加強：一開始就構建完成的項目，而後再針對版本瀏覽器進行測試和修復。

數組的方法

Unshift、push、shift、pop、splice、concat、split、sort

字符串方法

Split、replace、slice

狀態碼

200-299請求成功

300-399 重定向

400-499 客戶端錯誤

500-599 服務端錯誤

Url到頁面展現

瀏覽器得到請求對應的ip

瀏覽器和服務器用過TCP3次握手，創建請求

瀏覽器發送請求到服務器

服務器接收請求 ，相應請求

瀏覽器拿到返回數據，渲染頁面。

TCP：傳輸控制協議（TCP，Transmission Control Protocol）是一種面向鏈接的、可靠的、基於字節流的傳輸層通訊協議

前端安全

XXS：惡意腳本或者代碼注入。

解決：過濾和轉義。

CSRF：跨站請求僞造。

解決：合理使用get、post，驗證碼使用，token。

網絡劫持。

解決：https，提交數據使用非對稱加密。crypto-js

事件冒泡和事件委託

事件冒泡：操做的元素向上一級一級執行，直到html；

事件委託：給父級元素註冊事件，監聽子元素的點擊事件。