前端面試問答梳理

dom的操做，刪除removeChild()，移動appendChild()，複製cloneNode(深淺複製)，插入insertBefore()，前插後插insertAdjacentHTML()，指定插一類。
事件的處理，兼容性寫法，參數做用，撲獲冒泡，委派代理。
ie下的一些兼容性問題，js的，舉例。
動畫方面，加速度，重力模擬實現。
正則，基本的用法和相關函數做用考查。
閉包，原型鏈，做用域，變量引用，類繼承方法。
內存泄露的緣由和場景。
h5裏一些新增api的瞭解。
性能優化和重構知識。

1.對WEB標準以及W3C的理解與認識
標籤閉合、標籤小寫、不亂嵌套、（其餘文章有）

提升搜索機器人搜索概率、（其餘文章有）

使用外鏈css和js腳本、結構行爲表現的分離、（其餘文章有）

文件下載與頁面速度更快、（其餘文章有）

內容能被更多的用戶所訪問、內容能被更普遍的設備所訪問、

更少的代碼和組件，

容易維護、改版方便，

不須要變更頁面內容、

提供打印版本而不須要複製內容、

提升網站易用性；（其餘文章有）

2.xhtml和html有什麼區別
HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XML的置標語言
最主要的不一樣：
XHTML 元素必須被正確地嵌套。
XHTML 元素必須被關閉。
標籤名必須用小寫字母。
XHTML 文檔必須擁有根元素。

3.Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義?
用於聲明文檔使用那種規範（html/Xhtml）通常爲 嚴格 過分 基於框架的html文檔
加入XMl聲明可觸發，解析方式更改成IE5.5 擁有IE5.5的bug

4.行內元素有哪些?塊級元素有哪些?CSS的盒模型?
塊級元素：div p h1 h2 h3 h4 form ul
行內元素: a b br i span input select
Css盒模型:內容，border ,margin，padding

5.CSS引入的方式有哪些? link和@import的區別是?
內聯 內嵌 外鏈 導入
區別 ：前者同時加載，後者在頁面加載完成後加載
前者無兼容性，後者CSS2.1如下瀏覽器不支持
Link 支持使用javascript改變樣式，後者不可

6.CSS選擇符有哪些?哪些屬性能夠繼承?優先級算法如何計算?內聯和important哪一個優先級高?
標籤選擇符 類選擇符 id選擇符 子選擇器 後代選擇器 僞類選擇器

能夠繼承的font-size font-family color 

不能夠繼承的border padding margin background-color width height

繼承不如指定 Id>class>標籤選擇
後者優先級高

7.前端頁面有哪三層構成，分別是什麼?做用是什麼?
結構層 Html 表示層 CSS 行爲層 js

8.css的基本語句構成是?
選擇器{屬性1:值1;屬性2:值2;……}

9.你作的頁面在哪些流覽器測試過?這些瀏覽器的內核分別是什麼?
Ie(Ie內核) 火狐（Gecko） 谷歌（webkit） opear(Presto)

10.寫出幾種IE6 BUG的解決方法
1.雙邊距BUG float引發的 使用display
2.3像素問題 使用float引發的 使用dislpay:inline -3px
3.超連接hover 點擊後失效 使用正確的書寫順序 link visited hover active
4.Ie z-index問題 給父級添加position:relative
5.Png 透明 使用js代碼 改
6.Min-height 最小高度 ！Important 解決’
7.select 在ie6下遮蓋 使用iframe嵌套
8.爲何沒有辦法定義1px左右的寬度容器（IE6默認的行高形成的，使用over:hidden,zoom:0.08 line-height:1px）

11.標籤上title與alt屬性的區別是什麼?
Alt 當圖片不顯示是 用文字表明。
Title 爲該屬性提供信息

12.描述css reset的做用和用途。
Reset重置瀏覽器的css默認屬性 瀏覽器的品種不一樣，樣式不一樣，而後重置，讓他們統一

13.解釋css sprites，如何使用。
Css 精靈 把一堆小的圖片整合到一張大的圖片上，減輕服務器對圖片的請求數量

14.瀏覽器標準模式和怪異模式之間的區別是什麼?
盒子模型：IE6-IE8盒模型width包括內邊距邊框

渲染模式的不一樣：在標準模式中，瀏覽器根據規範呈現頁面；在混雜模式中，頁面以一種比較寬鬆的向後兼容的方式顯示。

使用 window.top.document.compatMode 可顯示爲何模式

15.你如何對網站的文件和資源進行優化?期待的解決方案包括：
文件合併
文件最小化/文件壓縮
使用CDN託管
緩存的使用

16.什麼是語義化的HTML?
直觀的認識標籤 對於搜索引擎的抓取有好處

17.清除浮動的幾種方式，各自的優缺點
1.使用空標籤清除浮動 clear:both（理論上能清楚任何標籤，，，增長無心義的標籤）
2.父元素使用overflow:auto（空標籤元素清除浮動而不得不增長無心代碼的弊端,,使用zoom:1用於兼容IE）
3.是用afert僞元素清除浮動(用於非IE瀏覽器)

Javascript
1.javascript的typeof返回哪些數據類型
Object（值是對象或者null） number function boolean underfind string

2.例舉3種強制類型轉換和2種隱式類型轉換?
強制（parseInt,parseFloat,number）
隱式（== – ===）

3.split() join() 的區別
前者是切割成數組的形式，後者是將數組轉換成字符串

4.數組方法pop() push() unshift() shift()
Push()尾部添加 pop()尾部刪除
Unshift()頭部添加 shift()頭部刪除

5.事件綁定和普通事件有什麼區別（使用.onclick()和.addEventListener()區別）

.onclick()只能綁定單個事件，另一個能夠綁定多個

 

6.IE和DOM事件流的區別attachEvent()，addEventListener()
1.執行順序不同、
2.參數不同
3.事件加不加on
4.this指向問題

7.IE和標準下有哪些兼容性的寫法
Var ev = event || window.event
document.documentElement.clientWidth || document.body.clientWidth
Var target = ev.srcElement||ev.target

8.ajax請求的時候get 和post方式的區別
一個在url後面 一個放在虛擬載體裏面
有大小限制
安全問題
應用不一樣 一個是論壇等只須要請求的，一個是相似修改密碼的

9.call和apply的區別
Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)

10.ajax請求時，如何解釋json數據
使用eval(), parse() 鑑於安全性考慮 使用parse更靠譜

11.b繼承a的方法

原型繼承，b.prototype = new a()，可是b的原型繼承了a的實例屬性，會被b的實例共享。

組合繼承，b的構造函數中使用a.call(this,參數)，而後再原型繼承，讓b擁有跟a同名的實例屬性，屏蔽了原型中繼承來的屬性，避免共享。可是會兩次調用超類型

寄生組合繼承，var prototype = object(a.prototype)，將a原型屬性和方法進行復制到b的原型中。

12.寫一個獲取非行間樣式的函數

function getStyle(obj,attr,value)
{
if(!value)
{
if(obj.currentStyle)
{
return obj.currentStyle(attr)
}
else
{
obj.getComputedStyle(attr,false)
}
}
else
{
obj.style[attr]=value
}
}

13.事件委託是什麼
讓利用事件冒泡的原理，讓本身的所觸發的事件，讓他的父元素代替執行！
http://www.webasily.com/?p=78 例子可見此連接

14.閉包是什麼，有什麼特性，對頁面有什麼影響
閉包就是可以讀取其餘函數內部變量的函數。
深刻理解JavaScript的閉包特性 如何給循環中的對象添加事件 此連接可查看（問這個問題的不是一個公司）

15.如何阻止事件冒泡和默認事件
阻止默認行爲：event.preventDefault()  （只有在cancelable爲true的時候才能夠調用）
阻止冒泡：event.stopPropagation()

16.添加 刪除 替換 插入到某個接點的方法
obj.appendChidl()
obj.insertBefore
obj.replaceChild
obj.removeChild

17.解釋jsonp的原理，以及爲何不是真正的ajax
動態建立script標籤，回調函數（數據經過傳入回調函數的json數據得到）
Ajax是頁面無刷新請求數據操做

18.javascript的本地對象，內置對象和宿主對象
本地對象爲array obj regexp等能夠new實例化
內置對象爲gload Math 等不能夠實例化的
宿主爲瀏覽器自帶的document,window 等

19.document load 和document ready的區別
Document.onload 是在結構和樣式加載完才執行js
Document.ready原生種沒有這個方法，jquery中有 $().ready(function)

20.」==」和「===」的不一樣
前者會自動轉換類型
後者不會

21.javascript的同源策略
一段腳本只能讀取來自於同一來源的窗口和文檔的屬性，這裏的同一來源指的是主機名、協議和端口號的組合

22.編寫一個數組去重的方法
function oSort(arr)
{
var result ={};
var newArr=[];
for(var i=0;i<arr.length;i++)
{
if(!result[arr])
{
newArr.push(arr)
result[arr]=1
}
}
return newArr
}

 

 

 

 

1.你前端開發，通常用什麼工具？            sublime chrome

2. 你調試工具用哪些？                         chrome開發工具

3. 在chrome中怎麼查看網絡和內存？      network面板和timeline面板

4. 知道哪些前端性能優化的方法？          

5. CSS3新特性有哪些？

6. HTML5新特性有哪些？

7. 對原型鏈的理解。

8. 看過jQuery的源碼麼？

二面：

下午一點，主要問項目。面試時間約二十分鐘，問題以下：

1. 說下最有挑戰的項目。

2. 項目中碰到過什麼有意思的問題，怎麼解決？

3. js模塊依賴怎麼作？

4. 對localStorage的理解。

5. 設計一個網站架構。

6. 怎麼選擇項目中使用的框架？

7. 採用MVVM模式，爲何不用成熟的Angular.js?

 

 

事件代理;

　　li事件的綁定是綁定到哪裏?

　　jQuery的fadeIn()、fadeOut()是怎麼作的;             逐漸改變透明度

　　你知道閉包嗎

　　繼承應該怎麼作

　　頁面佈局採用什麼(回答說，通常用div，加float) 

　　怎麼清楚float，除了clear：both;             父元素加overflow：hidden

　　CSS選擇器主要有哪幾類

　　數據與表現分離是怎麼作的   MVC

　　CSS3的滑動時怎麼實現的

　　CSS3除了滑動還知道些什麼

　　HTML5知道些什麼?

　　position定位，(position：absolute;top:0;height:0;div是怎麼顯示的)

　　數據庫的問題問的比較少，主要是是問了一個索引。