前端面試題
一、單選題（共15題，每題2分）
1、 以下不屬於行內元素的是( )
a) h1
b) a
c) span
d) select
2、 以下不屬於塊級元素的是( )
a) h2
b) div
c) span
d) h3
3、 以下不屬於空元素的是( )
a) <br>
b) <img>
c) <col>
d) <ol>
4、 以下不屬於display的值是( )
a) inherit
b) table
c) block
d) list-item
5、 以下關於ajax的說法錯誤的是( )
a) ajax的全稱：Asynchronous Javascript And XML
b) 向服務器發送請求的時候，需等待結果
c) 可通過XMLHttpRequest對象創建一個異步調用對象
d) 可實現局部刷新
6、 以下哪一個不是DOM操作的創建新節點( )
a) createNode()
b) createDocumentFragment()
c) createElement()
d) createTextNode()
7、 以下哪一個DOM節點操作方法是undefined( )
a) appendChild()
b) removeChild()
c) changeChild()
d) insertBefore()
8、 以下哪一個DOM操作不是查找節點操作( )
a) queryselector()
b) getElementById()
c) getElementsByTag()
d) getElementsByName()
9、 setTimeout("buy( )",2000)表示的意思是( )
a) 間隔2000秒后，buy( )函數被調用一次
b) buy( )函數被持續調用2000次
c) 間隔2秒后，buy( )函數被調用一次
d) 間隔2分鍾后，buy( )函數被調用一次
10、 在JQuery中被譽為工廠函數的是( )
a) ready( )
b) function( )
c) $( )
d) factory()
11、 關於bind( )方法與unbind( )方法說法正確的是( )
a) bind( )方法可用來移除單個或多個事件
b) unbind( )方法可以同時移除多個事件，但不能移除單個事件
c) 使用bind( )方法可同時綁定鼠標事件和鍵盤事件
d) bind( )方法只能移除多個事件
Tip:bind(""mouseenter mouseleave"，function(){ });
12、 ( )是遍歷同輩節點的方法
a) next( )
b) child( )
c) children( )
d) prev()
13、 對字符串str="welcome to china"進行下列操作處理,描述結果正確的是( )
a) str.substring(1,5)的返回值是"elcom"
b) str.length的返回值15
c) str.indexOf("come",4)的返回值為4
d) str.replace('o','a')的返回值是"Welcame To China"
14、 騰訊QQ號從10000開始，目前最高位10位，( )可以匹配QQ號
a) /^[1-9][0-9]{4,10}$/
b) /^[1-9][0-9]{4,9}$/
c) /^\d{5,10}$/
d) /^\d[5,10]$/
二、多選題（共15題，每題2分，多選/少選都不給分）
1.屬於語意化的內容元素有（ ）
a) article、footer
b) block
c) section、banner
d) header、nav
2.HTML5新增的特性有哪些（ ）
a) 表單新特性：Required、Autofocus、Placeholders、pattern
b) 語義化的header和footer
c) 讓你的內容可編輯，只需要加一個contenteditable屬性
d) Local Storage、Web Sockets
3.以下關於響應式布局說法正確的是（ ）
a) 利用css3的media query媒體查詢功能
b) 使用bootsrap框架
c) 使用HTML5的語義化標簽
d) 以上說法都正確
4.js有哪些內置的數據封裝類對象（ ）
a) Object、Array
b) Boolean
c) Number 和Error
d) Math
5.this對象的理解正確的是（ ）
a) this總是指向函數的直接調用者
b) this總是指向函數的非間接調用者
c) 如果有new關鍵字，this指向new出來的那個對象；
d) IE中attachEvent中的this總是指向全局對象Window
6.JSON 的說法正確的是（ ）
a) 全稱是JSON(JavaScript Object Number)
b) 是一種輕量級的數據交換格式
c) 數據格式簡單, 易於讀寫, 占用帶寬小
d) 采用鍵值對，例如：{'age':'12', 'name':'back'}
7.HTTP狀態碼說法正確的是（ ）
a) 200 OK 正常返回信息
b) 302 Found 永久性重定向
c) 401 Unauthorized 禁止訪問
d) 503 Service Unavailable 服務器端暫時無法處理請求
8.哪些性能優化的方法是正確的（ ）
a) 減少http請求次數：CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適；網頁Gzip，CDN托管，data緩存 ，圖片服務器
b) 少用全局變量、緩存DOM節點查找的結果。減少IO讀取操作
c) 前端模板不要使用 JS+數據，會增加由於HTML標簽導致的帶寬浪費
d) 當需要設置的樣式很多時少設置className而是直接操作style
9.關於Node.js中使用NPM的說法正確的是（ ）
a) 可以安裝和管理項目的依賴
b) 不能夠指明依賴項的具體版本號
c) 不可以通過package.json文件來管理項目信息，配置腳本，
d) 可以通過package.json指明項目依賴的具體版本
10.關於MVC說法正確的是（ ）
a) MVC由Modle（模型）, View（視圖）和Controller（控制器）組成
b) PHP MVC可以更高效地管理好3個不同層的PHP代碼。
c) view層負責將應用的數據以特定的方式展現在界面上
d) Controller：通常控制用戶輸入，並在模型里對數據信息進行存取
11.優化MYSQL數據庫的方法（ ）
a) 語句方面：使用索引，增加查詢效率
b) 語句方面：優化查詢語句，提高索引命中率
c) 數據庫涉及方面：構造分庫分表，提高數據庫的存儲和擴展能力
d) 數據庫涉及方面：根據需要使用不同的存儲引擎
三、問答題（共4題，每題10分）
1. 怎樣添加、移除、移動、復制、創建和查找節點？
答案：
1）創建新節點
createDocumentFragment() //創建一個DOM片段
createElement() //創建一個具體的元素
createTextNode() //創建一個文本節點
2）添加、移除、替換、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替換
insertBefore() //插入
3）查找
getElementsByTagName() //通過標簽名稱
getElementsByName() //通過元素的Name屬性的值
getElementById() //通過元素Id，唯一性
2. 你所了解到的Web攻擊技術
答案：
（1）XSS（Cross-Site Scripting，跨站腳本攻擊）：指通過存在安全漏洞的Web網站注冊用戶的瀏覽器內運行非法的HTML標簽或者JavaScript進行的一種攻擊。
（2）SQL注入攻擊
（3）CSRF（Cross-Site Request Forgeries，跨站點請求偽造）：指攻擊者通過設置好的陷阱，強制對已完成的認證用戶進行非預期的個人信息或設定信息等某些狀態更新。
3. 對前端工程師這個職位你是怎么樣理解的？
答案：
a. 前端是最貼近用戶的程序員，前端的能力就是能讓產品從 90分進化到 100 分，甚至更好
b. 參與項目，快速高質量完成實現效果圖，精確到1px；
c. 與團隊成員，UI設計，產品經理的溝通；
d. 做好的頁面結構，頁面重構和用戶體驗；
e. 處理hack，兼容、寫出優美的代碼格式；
f. 針對服務器的優化、擁抱最新前端技術。