前端面試問題答案彙總--基礎版

時間 2019-11-08

標籤前端面試問題答案彙總基礎欄目快樂工作简体版

原文原文鏈接

轉載於https://github.com/poetries/FE-Interview-Questions，by poetriesjavascript

第一部分：基礎篇

1、HTML、HTTP、web綜合問題

1 前端須要注意哪些SEO

合理的title、description、keywords：搜索對着三項的權重逐個減少，title值強調重點便可，重要關鍵詞出現不要超過2次，並且要靠前，不一樣頁面title要有所不一樣；description把頁面內容高度歸納，長度合適，不可過度堆砌關鍵詞，不一樣頁面description有所不一樣；keywords列舉出重要關鍵詞便可
語義化的HTML代碼，符合W3C規範：語義化代碼讓搜索引擎容易理解網頁
重要內容HTML代碼放在最前：搜索引擎抓取HTML順序是從上到下，有的搜索引擎對抓取長度有限制，保證重要內容必定會被抓取
重要內容不要用js輸出：爬蟲不會執行js獲取內容
少用iframe：搜索引擎不會抓取iframe中的內容
非裝飾性圖片必須加alt
提升網站速度：網站速度是搜索引擎排序的一個重要指標

2 `<img>`的`title`和`alt`有什麼區別

一般當鼠標滑動到元素上的時候顯示
alt是<img>的特有屬性，是圖片內容的等價描述，用於圖片沒法加載時顯示、讀屏器閱讀圖片。可提圖片高可訪問性，除了純裝飾圖片外都必須設置有意義的值，搜索引擎會重點分析。

3 HTTP的幾種請求方法用途

GET方法css
- 發送一個請求來取得服務器上的某一資源
POST方法html
- 向URL指定的資源提交數據或附加新的數據
PUT方法前端
- 跟POST方法很像，也是想服務器提交數據。可是，它們之間有不一樣。PUT指定了資源在服務器上的位置，而POST沒有
HEAD方法vue
- 只請求頁面的首部
DELETE方法html5
- 刪除服務器上的某資源
OPTIONS方法java
- 它用於獲取當前URL所支持的方法。若是請求成功，會有一個Allow的頭包含相似「GET,POST」這樣的信息
TRACE方法node
- TRACE方法被用於激發一個遠程的，應用層的請求消息迴路
CONNECT方法react
- 把請求鏈接轉換到透明的TCP/IP通道

4 從瀏覽器地址欄輸入url到顯示頁面的步驟

基礎版本jquery

瀏覽器根據請求的URL交給DNS域名解析，找到真實IP，向服務器發起請求；
服務器交給後臺處理完成後返回數據，瀏覽器接收文件（HTML、JS、CSS、圖象等）；
瀏覽器對加載到的資源（HTML、JS、CSS等）進行語法解析，創建相應的內部數據結構（如HTML的DOM）；
載入解析到的資源文件，渲染頁面，完成。

詳細版

在瀏覽器地址欄輸入URL
瀏覽器查看緩存，若是請求資源在緩存中而且新鮮，跳轉到轉碼步驟
1. 若是資源未緩存，發起新請求
2. 若是已緩存，檢驗是否足夠新鮮，足夠新鮮直接提供給客戶端，不然與服務器進行驗證。
3. 檢驗新鮮一般有兩個HTTP頭進行控制Expires和Cache-Control：
  - HTTP1.0提供Expires，值爲一個絕對時間表示緩存新鮮日期
  - HTTP1.1增長了Cache-Control: max-age=,值爲以秒爲單位的最大新鮮時間
瀏覽器解析URL獲取協議，主機，端口，path
瀏覽器組裝一個HTTP（GET）請求報文
瀏覽器獲取主機ip地址，過程以下：
1. 瀏覽器緩存
2. 本機緩存
3. hosts文件
4. 路由器緩存
5. ISP DNS緩存
6. DNS遞歸查詢（可能存在負載均衡致使每次IP不同）
打開一個socket與目標IP地址，端口創建TCP連接，三次握手以下：
1. 客戶端發送一個TCP的SYN=1，Seq=X的包到服務器端口
2. 服務器發回SYN=1， ACK=X+1， Seq=Y的響應包
3. 客戶端發送ACK=Y+1， Seq=Z
TCP連接創建後發送HTTP請求
服務器接受請求並解析，將請求轉發到服務程序，如虛擬主機使用HTTP Host頭部判斷請求的服務程序
服務器檢查HTTP請求頭是否包含緩存驗證信息若是驗證緩存新鮮，返回304等對應狀態碼
處理程序讀取完整請求並準備HTTP響應，可能須要查詢數據庫等操做
服務器將響應報文經過TCP鏈接發送回瀏覽器
瀏覽器接收HTTP響應，而後根據狀況選擇關閉TCP鏈接或者保留重用，關閉TCP鏈接的四次握手以下：
1. 主動方發送Fin=1， Ack=Z， Seq= X報文
2. 被動方發送ACK=X+1， Seq=Z報文
3. 被動方發送Fin=1， ACK=X， Seq=Y報文
4. 主動方發送ACK=Y， Seq=X報文
瀏覽器檢查響應狀態嗎：是否爲1XX，3XX， 4XX， 5XX，這些狀況處理與2XX不一樣
若是資源可緩存，進行緩存
對響應進行解碼（例如gzip壓縮）
根據資源類型決定如何處理（假設資源爲HTML文檔）
解析HTML文檔，構件DOM樹，下載資源，構造CSSOM樹，執行js腳本，這些操做沒有嚴格的前後順序，如下分別解釋
構建DOM樹：
1. Tokenizing：根據HTML規範將字符流解析爲標記
2. Lexing：詞法分析將標記轉換爲對象並定義屬性和規則
3. DOM construction：根據HTML標記關係將對象組成DOM樹
解析過程當中遇到圖片、樣式表、js文件，啓動下載
構建CSSOM樹：
1. Tokenizing：字符流轉換爲標記流
2. Node：根據標記建立節點
3. CSSOM：節點建立CSSOM樹
根據DOM樹和CSSOM樹構建渲染樹:
1. 從DOM樹的根節點遍歷全部可見節點，不可見節點包括：1）script,meta這樣自己不可見的標籤。2)被css隱藏的節點，如display: none
2. 對每個可見節點，找到恰當的CSSOM規則並應用
3. 發佈可視節點的內容和計算樣式
js解析以下：
1. 瀏覽器建立Document對象並解析HTML，將解析到的元素和文本節點添加到文檔中，此時document.readystate爲loading
2. HTML解析器遇到沒有async和defer的script時，將他們添加到文檔中，而後執行行內或外部腳本。這些腳本會同步執行，而且在腳本下載和執行時解析器會暫停。這樣就能夠用document.write()把文本插入到輸入流中。同步腳本常常簡單定義函數和註冊事件處理程序，他們能夠遍歷和操做script和他們以前的文檔內容
3. 當解析器遇到設置了async屬性的script時，開始下載腳本並繼續解析文檔。腳本會在它下載完成後儘快執行，可是解析器不會停下來等它下載。異步腳本禁止使用document.write()，它們能夠訪問本身script和以前的文檔元素
4. 當文檔完成解析，document.readState變成interactive
5. 全部defer腳本會按照在文檔出現的順序執行，延遲腳本能訪問完整文檔樹，禁止使用document.write()
6. 瀏覽器在Document對象上觸發DOMContentLoaded事件
7. 此時文檔徹底解析完成，瀏覽器可能還在等待如圖片等內容加載，等這些內容完成載入而且全部異步腳本完成載入和執行，document.readState變爲complete,window觸發load事件
顯示頁面（HTML解析過程當中會逐步顯示頁面）

詳細簡版

從瀏覽器接收url到開啓網絡請求線程（這一部分能夠展開瀏覽器的機制以及進程與線程之間的關係）
開啓網絡線程到發出一個完整的http請求（這一部分涉及到dns查詢，tcp/ip請求，五層因特網協議棧等知識）
從服務器接收到請求到對應後臺接收到請求（這一部分可能涉及到負載均衡，安全攔截以及後臺內部的處理等等）
後臺和前臺的http交互（這一部分包括http頭部、響應碼、報文結構、cookie等知識，能夠提下靜態資源的cookie優化，以及編碼解碼，如gzip壓縮等）
單獨拎出來的緩存問題，http的緩存（這部分包括http緩存頭部，etag，catch-control等）
瀏覽器接收到http數據包後的解析流程（解析html-詞法分析而後解析成dom樹、解析css生成css規則樹、合併成render樹，而後layout、painting渲染、複合圖層的合成、GPU繪製、外鏈資源的處理、loaded和domcontentloaded等）
CSS的可視化格式模型（元素的渲染規則，如包含塊，控制框，BFC，IFC等概念）
JS引擎解析過程（JS的解釋階段，預處理階段，執行階段生成執行上下文，VO，做用域鏈、回收機制等等）
其它（能夠拓展不一樣的知識模塊，如跨域，web安全，hybrid模式等等內容）

5 如何進行網站性能優化

content方面
- 減小HTTP請求：合併文件、CSS精靈、inline Image
- 減小DNS查詢：DNS緩存、將資源分佈到恰當數量的主機名
- 減小DOM元素數量
Server方面
- 使用CDN
- 配置ETag
- 對組件使用Gzip壓縮
Cookie方面
- 減少cookie大小
css方面
- 將樣式表放到頁面頂部
- 不使用CSS表達式
- 使用<link>不使用@import
Javascript方面
- 將腳本放到頁面底部
- 將javascript和css從外部引入
- 壓縮javascript和css
- 刪除不須要的腳本
- 減小DOM訪問
圖片方面
- 優化圖片：根據實際顏色須要選擇色深、壓縮
- 優化css精靈
- 不要在HTML中拉伸圖片

6 HTTP狀態碼及其含義

1XX：信息狀態碼
- 100 Continue 繼續，通常在發送post請求時，已發送了http header以後服務端將返回此信息，表示確認，以後發送具體參數信息
2XX：成功狀態碼
- 200 OK 正常返回信息
- 201 Created 請求成功而且服務器建立了新的資源
- 202 Accepted 服務器已接受請求，但還沒有處理
3XX：重定向
- 301 Moved Permanently 請求的網頁已永久移動到新位置。
- 302 Found 臨時性重定向。
- 303 See Other 臨時性重定向，且老是使用 GET 請求新的 URI。
- 304 Not Modified 自從上次請求後，請求的網頁未修改過。
4XX：客戶端錯誤
- 400 Bad Request 服務器沒法理解請求的格式，客戶端不該當嘗試再次使用相同的內容發起請求。
- 401 Unauthorized 請求未受權。
- 403 Forbidden 禁止訪問。
- 404 Not Found 找不到如何與 URI 相匹配的資源。
5XX: 服務器錯誤
- 500 Internal Server Error 最多見的服務器端錯誤。
- 503 Service Unavailable 服務器端暫時沒法處理請求（多是過載或維護）。

7 語義化的理解

用正確的標籤作正確的事情！
html語義化就是讓頁面的內容結構化，便於對瀏覽器、搜索引擎解析；
在沒有樣式CSS狀況下也以一種文檔格式顯示，而且是容易閱讀的。
搜索引擎的爬蟲依賴於標記來肯定上下文和各個關鍵字的權重，利於 SEO。
使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解

8 介紹一下你對瀏覽器內核的理解？

主要分紅兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎
渲染引擎：負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，而後會輸出至顯示器或打印機。瀏覽器的內核的不一樣對於網頁的語法解釋會有不一樣，因此渲染的效果也不相同。全部網頁瀏覽器、電子郵件客戶端以及其它須要編輯、顯示網絡內容的應用程序都須要內核
JS引擎則：解析和執行javascript來實現網頁的動態效果
最開始渲染引擎和JS引擎並無區分的很明確，後來JS引擎愈來愈獨立，內核就傾向於只指渲染引擎

9 html5有哪些新特性、移除了那些元素？

HTML5 如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增長
- 繪畫 canvas
- 用於媒介回放的 video 和 audio 元素
- 本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失
- sessionStorage 的數據在瀏覽器關閉後自動刪除
- 語意化更好的內容元素，好比article、footer、header、nav、section
- 表單控件，calendar、date、time、email、url、search
- 新的技術webworker, websocket, Geolocation
移除的元素：
- 純表現的元素：basefont，big，center，font, s，strike，tt，u`
- 對可用性產生負面影響的元素：frame，frameset，noframes
支持HTML5新標籤：
- IE8/IE7/IE6支持經過document.createElement方法產生的標籤
- 能夠利用這一特性讓這些瀏覽器支持HTML5新標籤
- 瀏覽器支持新標籤後，還須要添加標籤默認的樣式
固然也能夠直接使用成熟的框架、好比html5shim

10 `HTML5`的離線儲存怎麼使用，工做原理能不能解釋一下？

在用戶沒有與因特網鏈接時，能夠正常訪問站點或應用，在用戶與因特網鏈接時，更新用戶機器上的緩存文件
原理：HTML5的離線存儲是基於一個新建的.appcache文件的緩存機制(不是存儲技術)，經過這個文件上的解析清單離線存儲資源，這些資源就會像cookie同樣被存儲了下來。以後當網絡在處於離線狀態下時，瀏覽器會經過被離線存儲的數據進行頁面展現
如何使用：
- 頁面頭部像下面同樣加入一個manifest的屬性；
- 在cache.manifest文件的編寫離線存儲的資源
- 在離線狀態時，操做window.applicationCache進行需求實現

CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html

11 瀏覽器是怎麼對`HTML5`的離線儲存資源進行管理和加載的呢

在線的狀況下，瀏覽器發現html頭部有manifest屬性，它會請求manifest文件，若是是第一次訪問app，那麼瀏覽器就會根據manifest文件的內容下載相應的資源而且進行離線存儲。若是已經訪問過app而且資源已經離線存儲了，那麼瀏覽器就會使用離線的資源加載頁面，而後瀏覽器會對比新的manifest文件與舊的manifest文件，若是文件沒有發生改變，就不作任何操做，若是文件改變了，那麼就會從新下載文件中的資源並進行離線存儲。
離線的狀況下，瀏覽器就直接使用離線存儲的資源。

12 請描述一下 `cookies`，`sessionStorage` 和 `localStorage` 的區別？

cookie是網站爲了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（一般通過加密）
cookie數據始終在同源的http請求中攜帶（即便不須要），記會在瀏覽器和服務器間來回傳遞
sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存
存儲大小：
- cookie數據大小不能超過4k
- sessionStorage和localStorage雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大
有期時間：
- localStorage 存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據
- sessionStorage 數據在當前瀏覽器窗口關閉後自動刪除
- cookie 設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉

13 iframe有那些缺點？

iframe會阻塞主頁面的Onload事件
搜索引擎的檢索程序沒法解讀這種頁面，不利於SEO
iframe和主頁面共享鏈接池，而瀏覽器對相同域的鏈接有限制，因此會影響頁面的並行加載
使用iframe以前須要考慮這兩個缺點。若是須要使用iframe，最好是經過javascript動態給iframe添加src屬性值，這樣能夠繞開以上兩個問題

14 WEB標準以及W3C標準是什麼?

標籤閉合、標籤小寫、不亂嵌套、使用外鏈css和js、結構行爲表現的分離

15 xhtml和html有什麼區別?

一個是功能上的差異
- 主要是XHTML可兼容各大瀏覽器、手機以及PDA，而且瀏覽器也能快速正確地編譯網頁
另外是書寫習慣的差異
- XHTML 元素必須被正確地嵌套，閉合，區分大小寫，文檔必須擁有根元素

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

頁面被加載的時，link會同時被加載，而@imort頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載
import只在IE5以上才能識別，而link是XHTML標籤，無兼容問題
link方式的樣式的權重高於@import的權重
<!DOCTYPE> 聲明位於文檔中的最前面，處於 <html> 標籤以前。告知瀏覽器的解析器，用什麼文檔類型規範來解析這個文檔
嚴格模式的排版和 JS 運做模式是以該瀏覽器支持的最高標準運行
在混雜模式中，頁面以寬鬆的向後兼容的方式顯示。模擬老式瀏覽器的行爲以防止站點沒法工做。 DOCTYPE不存在或格式不正確會致使文檔以混雜模式呈現

17 行內元素有哪些？塊級元素有哪些？空(void)元素有那些？行內元素和塊級元素有什麼區別？

行內元素有：a b span img input select strong
塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
空元素：<br> <hr> <img> <input> <link> <meta>
行內元素不能夠設置寬高，不獨佔一行
塊級元素能夠設置寬高，獨佔一行

18 HTML全局屬性(global attribute)有哪些

class:爲元素設置類標識
data-*: 爲元素增長自定義屬性
draggable: 設置元素是否可拖拽
id: 元素id，文檔內惟一
lang: 元素內容的的語言
style: 行內css樣式
title: 元素相關的建議信息

19 Canvas和SVG有什麼區別？

svg繪製出來的每個圖形的元素都是獨立的DOM節點，可以方便的綁定事件或用來修改。canvas輸出的是一整幅畫布
svg輸出的圖形是矢量圖形，後期能夠修改參數來自由放大縮小，不會是真和鋸齒。而canvas輸出標量畫布，就像一張圖片同樣，放大會失真或者鋸齒

20 HTML5 爲何只須要寫

HTML5 不基於 SGML，所以不須要對DTD進行引用，可是須要doctype來規範瀏覽器的行爲
而HTML4.01基於SGML,因此須要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型

21 如何在頁面上實現一個圓形的可點擊區域？

svg
border-radius
純js實現須要求一個點在不在圓上簡單算法、獲取鼠標座標等等

22 網頁驗證碼是幹嗎的，是爲了解決什麼安全問題

區分用戶是計算機仍是人的公共全自動程序。能夠防止惡意破解密碼、刷票、論壇灌水
有效防止黑客對某一個特定註冊用戶用特定程序暴力破解方式進行不斷的登錄嘗試

23 viewport

 
  <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    // width    設置viewport寬度，爲一個正整數，或字符串‘device-width’
    // device-width  設備寬度
    // height   設置viewport高度，通常設置了寬度，會自動解析出高度，能夠不用設置
    // initial-scale    默認縮放比例（初始縮放比例），爲一個數字，能夠帶小數
    // minimum-scale    容許用戶最小縮放比例，爲一個數字，能夠帶小數
    // maximum-scale    容許用戶最大縮放比例，爲一個數字，能夠帶小數
    // user-scalable    是否容許手動縮放 
 

延伸提問
- 怎樣處理移動端 1px 被渲染成 2px問題

局部處理

mate標籤中的 viewport屬性，initial-scale 設置爲 1
rem按照設計稿標準走，外加利用transfrome 的scale(0.5) 縮小一倍便可；

全局處理

mate標籤中的 viewport屬性，initial-scale 設置爲 0.5
rem 按照設計稿標準走便可

24 渲染優化

禁止使用iframe（阻塞父文檔onload事件）
- iframe會阻塞主頁面的Onload事件
- 搜索引擎的檢索程序沒法解讀這種頁面，不利於SEO
- iframe和主頁面共享鏈接池，而瀏覽器對相同域的鏈接有限制，因此會影響頁面的並行加載
- 使用iframe以前須要考慮這兩個缺點。若是須要使用iframe，最好是經過javascript
- 動態給iframe添加src屬性值，這樣能夠繞開以上兩個問題
禁止使用gif圖片實現loading效果（下降CPU消耗，提高渲染性能）
使用CSS3代碼代替JS動畫（儘量避免重繪重排以及迴流）
對於一些小圖標，能夠使用base64位編碼，以減小網絡請求。但不建議大圖使用，比較耗費CPU
- 小圖標優點在於
  - 減小HTTP請求
  - 避免文件跨域
  - 修改及時生效
頁面頭部的<style></style> <script</script> 會阻塞頁面；（由於 Renderer進程中 JS線程和渲染線程是互斥的）
頁面中空的 href 和 src 會阻塞頁面其餘資源的加載 (阻塞下載進程)
網頁Gzip，CDN託管，data緩存，圖片服務器
前端模板 JS+數據，減小因爲HTML標籤致使的帶寬浪費，前端用變量保存AJAX請求結果，每次操做本地變量，不用請求，減小請求次數
用innerHTML代替DOM操做，減小DOM操做次數，優化javascript性能
當須要設置的樣式不少時設置className而不是直接操做style
少用全局變量、緩存DOM節點查找的結果。減小IO讀取操做
圖片預加載，將樣式表放在頂部，將腳本放在底部加上時間戳
對普通的網站有一個統一的思路，就是儘可能向前端優化、減小數據庫操做、減小磁盤IO

25 meta viewport相關

<!DOCTYPE html>  <!--H5標準聲明，使用 HTML5 doctype，不區分大小寫-->
<head lang=」en」> <!--標準的 lang 屬性寫法-->
<meta charset=’utf-8′>    <!--聲明文檔使用的字符編碼-->
<meta http-equiv=」X-UA-Compatible」 content=」IE=edge,chrome=1″/>   <!--優先使用 IE 最新版本和 Chrome-->
<meta name=」description」 content=」不超過150個字符」/>       <!--頁面描述-->
<meta name=」keywords」 content=」」/>     <!-- 頁面關鍵詞-->
<meta name=」author」 content=」name, email@gmail.com」/>    <!--網頁做者-->
<meta name=」robots」 content=」index,follow」/>      <!--搜索引擎抓取-->
<meta name=」viewport」 content=」initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no」> <!--爲移動設備添加 viewport-->
<meta name=」apple-mobile-web-app-title」 content=」標題」> <!--iOS 設備 begin-->
<meta name=」apple-mobile-web-app-capable」 content=」yes」/>  <!--添加到主屏後的標題（iOS 6 新增）
是否啓用 WebApp 全屏模式，刪除蘋果默認的工具欄和菜單欄-->
<meta name=」apple-itunes-app」 content=」app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL」>
<!--添加智能 App 廣告條 Smart App Banner（iOS 6+ Safari）-->
<meta name=」apple-mobile-web-app-status-bar-style」 content=」black」/>
<meta name=」format-detection」 content=」telphone=no, email=no」/>  <!--設置蘋果工具欄顏色-->
<meta name=」renderer」 content=」webkit」> <!-- 啓用360瀏覽器的極速模式(webkit)-->
<meta http-equiv=」X-UA-Compatible」 content=」IE=edge」>     <!--避免IE使用兼容模式-->
<meta http-equiv=」Cache-Control」 content=」no-siteapp」 />    <!--不讓百度轉碼-->
<meta name=」HandheldFriendly」 content=」true」>     <!--針對手持設備優化，主要是針對一些老的不識別viewport的瀏覽器，好比黑莓-->
<meta name=」MobileOptimized」 content=」320″>   <!--微軟的老式瀏覽器-->
<meta name=」screen-orientation」 content=」portrait」>   <!--uc強制豎屏-->
<meta name=」x5-orientation」 content=」portrait」>    <!--QQ強制豎屏-->
<meta name=」full-screen」 content=」yes」>              <!--UC強制全屏-->
<meta name=」x5-fullscreen」 content=」true」>       <!--QQ強制全屏-->
<meta name=」browsermode」 content=」application」>   <!--UC應用模式-->
<meta name=」x5-page-mode」 content=」app」>   <!-- QQ應用模式-->
<meta name=」msapplication-tap-highlight」 content=」no」>    <!--windows phone 點擊無高光
設置頁面不緩存-->
<meta http-equiv=」pragma」 content=」no-cache」>
<meta http-equiv=」cache-control」 content=」no-cache」>
<meta http-equiv=」expires」 content=」0″>

26 你作的頁面在哪些流覽器測試過？這些瀏覽器的內核分別是什麼?

IE: trident內核
Firefox：gecko內核
Safari:webkit內核
Opera:之前是presto內核，Opera現已改用Google - Chrome的Blink內核
Chrome:Blink(基於webkit，Google與Opera Software共同開發)

27 div+css的佈局較table佈局有什麼優勢？

改版的時候更方便只要改css文件。
頁面加載速度更快、結構化清晰、頁面顯示簡潔。
表現與結構相分離。
易於優化（seo）搜索引擎更友好，排名更容易靠前。

28 a：img的alt與title有何異同？b：strong與em的異同？

alt(alt text):爲不能顯示圖像、窗體或applets的用戶代理（UA），alt屬性用來指定替換文字。替換文字的語言由lang屬性指定。(在IE瀏覽器下會在沒有title時把alt當成 tool tip顯示)
title(tool tip):該屬性爲設置該屬性的元素提供建議性的信息
strong:粗體強調標籤，強調，表示內容的重要性
em:斜體強調標籤，更強烈強調，表示內容的強調點

29 你能描述一下漸進加強和優雅降級之間的不一樣嗎

漸進加強：針對低版本瀏覽器進行構建頁面，保證最基本的功能，而後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
優雅降級：一開始就構建完整的功能，而後再針對低版本瀏覽器進行兼容。

區別：優雅降級是從複雜的現狀開始，並試圖減小用戶體驗的供給，而漸進加強則是從一個很是基礎的，可以起做用的版本開始，並不斷擴充，以適應將來環境的須要。降級（功能衰減）意味着往回看；而漸進加強則意味着朝前看，同時保證其根基處於安全地帶

30 爲何利用多個域名來存儲網站資源會更有效？

CDN緩存更方便
突破瀏覽器併發限制
節約cookie帶寬
節約主域名的鏈接數，優化頁面響應速度
防止沒必要要的安全問題

31 簡述一下src與href的區別

src用於替換當前元素，href用於在當前文檔和引用資源之間確立聯繫。
src是source的縮寫，指向外部資源的位置，指向的內容將會嵌入到文檔中當前標籤所在位置；在請求src資源時會將其指向的資源下載並應用到文檔內，例如js腳本，img圖片和frame等元素

<script src ="js.js"></script> 當瀏覽器解析到該元素時，會暫停其餘資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，相似於將所指向資源嵌入當前標籤內。這也是爲何將js腳本放在底部而不是頭部

href是Hypertext Reference的縮寫，指向網絡資源所在位置，創建和當前元素（錨點）或當前文檔（連接）之間的連接，若是咱們在文檔中添加
<link href="common.css" rel="stylesheet"/>那麼瀏覽器會識別該文檔爲css文件，就會並行下載資源而且不會中止對當前文檔的處理。這也是爲何建議使用link方式來加載css，而不是使用@import方式

32 知道的網頁製做會用到的圖片格式有哪些？

png-8，png-24，jpeg，gif，svg

可是上面的那些都不是面試官想要的最後答案。面試官但願聽到是Webp,Apng。（是否有關注新技術，新鮮事物）

Webp：WebP格式，谷歌（google）開發的一種旨在加快圖片加載速度的圖片格式。圖片壓縮體積大約只有JPEG的2/3，並能節省大量的服務器帶寬資源和數據空間。Facebook Ebay等知名網站已經開始測試並使用WebP格式。
在質量相同的狀況下，WebP格式圖像的體積要比JPEG格式圖像小40%。
Apng：全稱是「Animated Portable Network Graphics」, 是PNG的位圖動畫擴展，能夠實現png格式的動態圖片效果。04年誕生，但一直得不到各大瀏覽器廠商的支持，直到日前獲得 iOS safari 8的支持，有望代替GIF成爲下一代動態圖標準

33 在css/js代碼上線以後開發人員常常會優化性能，從用戶刷新網頁開始，一次js請求通常狀況下有哪些地方會有緩存處理？

dns緩存，cdn緩存，瀏覽器緩存，服務器緩存

33 一個頁面上有大量的圖片（大型電商網站），加載很慢，你有哪些方法優化這些圖片的加載，給用戶更好的體驗。

圖片懶加載，在頁面上的未可視區域能夠添加一個滾動條事件，判斷圖片位置與瀏覽器頂端的距離與頁面的距離，若是前者小於後者，優先加載。
若是爲幻燈片、相冊等，能夠使用圖片預加載技術，將當前展現圖片的前一張和後一張優先下載。
若是圖片爲css圖片，能夠使用CSSsprite，SVGsprite，Iconfont、Base64等技術。
若是圖片過大，能夠使用特殊編碼的圖片，加載時會先加載一張壓縮的特別厲害的縮略圖，以提升用戶體驗。
若是圖片展現區域小於圖片的真實大小，則因在服務器端根據業務須要先行進行圖片壓縮，圖片壓縮後大小與展現一致。

34 常見排序算法的時間複雜度,空間複雜度

35 web開發中會話跟蹤的方法有哪些

cookie
session
url重寫
隱藏input
ip地址

36 HTTP request報文結構是怎樣的

首行是Request-Line包括：請求方法，請求URI，協議版本，CRLF
首行以後是若干行請求頭，包括general-header，request-header或者entity-header，每一個一行以CRLF結束
請求頭和消息實體之間有一個CRLF分隔
根據實際請求須要可能包含一個消息實體
一個請求報文例子以下：

GET /Protocols/rfc2616/rfc2616-sec5.html HTTP/1.1
Host: www.w3.org
Connection: keep-alive
Cache-Control: max-age=0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36
Referer: https://www.google.com.hk/
Accept-Encoding: gzip,deflate,sdch
Accept-Language: zh-CN,zh;q=0.8,en;q=0.6
Cookie: authorstyle=yes
If-None-Match: "2cc8-3e3073913b100"
If-Modified-Since: Wed, 01 Sep 2004 13:24:52 GMT

name=qiu&age=25

37 HTTP response報文結構是怎樣的

首行是狀態行包括：HTTP版本，狀態碼，狀態描述，後面跟一個CRLF
首行以後是若干行響應頭，包括：通用頭部，響應頭部，實體頭部
響應頭部和響應實體之間用一個CRLF空行分隔
最後是一個可能的消息實體
響應報文例子以下：

HTTP/1.1 200 OK
Date: Tue, 08 Jul 2014 05:28:43 GMT
Server: Apache/2
Last-Modified: Wed, 01 Sep 2004 13:24:52 GMT
ETag: "40d7-3e3073913b100"
Accept-Ranges: bytes
Content-Length: 16599
Cache-Control: max-age=21600
Expires: Tue, 08 Jul 2014 11:28:43 GMT
P3P: policyref="http://www.w3.org/2001/05/P3P/p3p.xml"
Content-Type: text/html; charset=iso-8859-1

{"name": "qiu", "age": 25}

2、CSS部分

1 css sprite是什麼,有什麼優缺點

概念：將多個小圖片拼接到一個圖片中。經過background-position和元素尺寸調節須要顯示的背景圖案。
優勢：
- 減小HTTP請求數，極大地提升頁面加載速度
- 增長圖片信息重複度，提升壓縮比，減小圖片大小
- 更換風格方便，只需在一張或幾張圖片上修改顏色或樣式便可實現
缺點：
- 圖片合併麻煩
- 維護麻煩，修改一個圖片可能須要重新佈局整個圖片，樣式

2 `display: none;`與`visibility: hidden;`的區別

聯繫：它們都能讓元素不可見
區別：
- display:none;會讓元素徹底從渲染樹中消失，渲染的時候不佔據任何空間；visibility: hidden;不會讓元素從渲染樹消失，渲染師元素繼續佔據空間，只是內容不可見
- display: none;是非繼承屬性，子孫節點消失因爲元素從渲染樹消失形成，經過修改子孫節點屬性沒法顯示；visibility: hidden;是繼承屬性，子孫節點消失因爲繼承了hidden，經過設置visibility: visible;可讓子孫節點顯式
- 修改常規流中元素的display一般會形成文檔重排。修改visibility屬性只會形成本元素的重繪。
- 讀屏器不會讀取display: none;元素內容；會讀取visibility: hidden;元素內容

3 `link`與`@import`的區別

link是HTML方式， @import是CSS方式
link最大限度支持並行下載，@import過多嵌套致使串行下載，出現FOUC
link能夠經過rel="alternate stylesheet"指定候選樣式
瀏覽器對link支持早於@import，能夠使用@import對老瀏覽器隱藏樣式
@import必須在樣式規則以前，能夠在css文件中引用其餘文件
整體來講：link優於@import

4 什麼是FOUC?如何避免

Flash Of Unstyled Content：用戶定義樣式表加載以前瀏覽器使用默認樣式顯示文檔，用戶樣式加載渲染以後再重新顯示文檔，形成頁面閃爍。
解決方法：把樣式表放到文檔的head

5 如何建立塊級格式化上下文(block formatting context),BFC有什麼用

建立規則：
- 根元素
- 浮動元素（float不是none）
- 絕對定位元素（position取值爲absolute或fixed）
- display取值爲inline-block,table-cell, table-caption,flex, inline-flex之一的元素
- overflow不是visible的元素
做用：
- 能夠包含浮動元素
- 不被浮動元素覆蓋
- 阻止父子元素的margin摺疊

6 display,float,position的關係

若是display爲none，那麼position和float都不起做用，這種狀況下元素不產生框
不然，若是position值爲absolute或者fixed，框就是絕對定位的，float的計算值爲none，display根據下面的表格進行調整。
不然，若是float不是none，框是浮動的，display根據下表進行調整
不然，若是元素是根元素，display根據下表進行調整
其餘狀況下display的值爲指定值
總結起來：絕對定位、浮動、根元素都須要調整display

7 清除浮動的幾種方式，各自的優缺點

父級div定義height
結尾處加空div標籤clear:both
父級div定義僞類:after和zoom
父級div定義overflow:hidden
父級div也浮動，須要定義寬度
結尾處加br標籤clear:both
比較好的是第3種方式，好多網站都這麼用

8 爲何要初始化CSS樣式?

由於瀏覽器的兼容問題，不一樣瀏覽器對有些標籤的默認值是不一樣的，若是沒對CSS初始化每每會出現瀏覽器之間的頁面顯示差別。
固然，初始化樣式會對SEO有必定的影響，但魚和熊掌不可兼得，但力求影響最小的狀況下初始化

9 css3有哪些新特性

新增各類css選擇器
圓角 border-radius
多列布局
陰影和反射
文字特效text-shadow
線性漸變
旋轉transform

CSS3新增僞類有那些？

p:first-of-type 選擇屬於其父元素的首個<p>元素的每一個<p> 元素。
p:last-of-type 選擇屬於其父元素的最後 <p> 元素的每一個<p> 元素。
p:only-of-type 選擇屬於其父元素惟一的 <p>元素的每一個 <p> 元素。
p:only-child 選擇屬於其父元素的惟一子元素的每一個 <p> 元素。
p:nth-child(2) 選擇屬於其父元素的第二個子元素的每一個 <p> 元素。
:after 在元素以前添加內容,也能夠用來作清除浮動。
:before 在元素以後添加內容
:enabled
:disabled 控制表單控件的禁用狀態。
:checked 單選框或複選框被選中

10 display有哪些值？說明他們的做用

block 象塊類型元素同樣顯示。
none 缺省值。象行內元素類型同樣顯示。
inline-block 象行內元素同樣顯示，但其內容象塊類型元素同樣顯示。
list-item 象塊類型元素同樣顯示，並添加樣式列表標記。
table 此元素會做爲塊級表格來顯示
inherit 規定應該從父元素繼承 display 屬性的值

11 介紹一下標準的CSS的盒子模型？低版本IE的盒子模型有什麼不一樣的？

有兩種， IE盒子模型、W3C盒子模型；
盒模型：內容(content)、填充(padding)、邊界(margin)、邊框(border)；
區別： IE的content部分把 border 和 padding計算了進去;

12 CSS優先級算法如何計算？

優先級就近原則，同權重狀況下樣式定義最近者爲準
載入樣式以最後載入的定位爲準
優先級爲: !important > id > class > tag important 比內聯優先級高

13 對BFC規範的理解？

它決定了元素如何對其內容進行定位,以及與其餘元素的關係和相互做用

14 談談浮動和清除浮動

浮動的框能夠向左或向右移動，直到他的外邊緣碰到包含框或另外一個浮動框的邊框爲止。因爲浮動框不在文檔的普通流中，因此文檔的普通流的塊框表現得就像浮動框不存在同樣。浮動的塊框會漂浮在文檔普通流的塊框上

15 position的值， relative和absolute定位原點是

absolute：生成絕對定位的元素，相對於 static 定位之外的第一個父元素進行定位
fixed：生成絕對定位的元素，相對於瀏覽器窗口進行定位
relative：生成相對定位的元素，相對於其正常位置進行定位
static 默認值。沒有定位，元素出如今正常的流中
inherit 規定從父元素繼承 position 屬性的值

16 display:inline-block 何時不會顯示間隙？(攜程)

移除空格
使用margin負值
使用font-size:0
letter-spacing
word-spacing

17 PNG,GIF,JPG的區別及如何選

GIF
- 8位像素，256色
- 無損壓縮
- 支持簡單動畫
- 支持boolean透明
- 適合簡單動畫
JPEG
- 顏色限於256
- 有損壓縮
- 可控制壓縮質量
- 不支持透明
- 適合照片
PNG
- 有PNG8和truecolor PNG
- PNG8相似GIF顏色上限爲256，文件小，支持alpha透明度，無動畫
- 適合圖標、背景、按鈕

18 行內元素float:left後是否變爲塊級元素？

浮動後，行內元素不會成爲塊狀元素，可是能夠設置寬高。行內元素要想變成塊狀元素，佔一行，直接設置display:block;。但若是元素設置了浮動後再設置display:block;那就不會佔一行。

19 在網頁中的應該使用奇數仍是偶數的字體？爲何呢？

偶數字號相對更容易和 web 設計的其餘部分構成比例關係

20 ::before 和 :after中雙冒號和單冒號有什麼區別？解釋一下這2個僞元素的做用

單冒號(:)用於CSS3僞類，雙冒號(::)用於CSS3僞元素
用於區分僞類和僞元素

21 若是須要手動寫動畫，你認爲最小時間間隔是多久，爲何？（阿里）

多數顯示器默認頻率是60Hz，即1秒刷新60次，因此理論上最小間隔爲1/60＊1000ms ＝ 16.7ms

22 CSS合併方法

避免使用@import引入多個css文件，能夠使用CSS工具將CSS合併爲一個CSS文件，例如使用Sass\Compass等

23 CSS不一樣選擇器的權重(CSS層疊的規則)

！important規則最重要，大於其它規則
行內樣式規則，加1000
對於選擇器中給定的各個ID屬性值，加100
對於選擇器中給定的各個類屬性、屬性選擇器或者僞類選擇器，加10
對於選擇其中給定的各個元素標籤選擇器，加1
若是權值同樣，則按照樣式規則的前後順序來應用，順序靠後的覆蓋靠前的規則

24 列出你所知道能夠改變頁面佈局的屬性

position、display、float、width、height、margin、padding、top、left、right、`

25 CSS在性能優化方面的實踐

css壓縮與合併、Gzip壓縮
css文件放在head裏、不要用@import
儘可能用縮寫、避免用濾鏡、合理使用選擇器

26 CSS3動畫（簡單動畫的實現，如旋轉等）

依靠CSS3中提出的三個屬性：transition、transform、animation
transition：定義了元素在變化過程當中是怎麼樣的，包含transition-property、transition-duration、transition-timing-function、transition-delay。
transform：定義元素的變化結果，包含rotate、scale、skew、translate。
animation：動畫定義了動做的每一幀（@keyframes）有什麼效果，包括animation-name，animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction

27 base64的原理及優缺點

優勢能夠加密，減小了http請求
缺點是須要消耗CPU進行編解碼

28 幾種常見的CSS佈局

流體佈局

.left {
        float: left;
        width: 100px;
        height: 200px;
        background: red;
    }
    .right {
        float: right;
        width: 200px;
        height: 200px;
        background: blue;
    }
    .main {
        margin-left: 120px;
        margin-right: 220px;
        height: 200px;
        background: green;
    }
<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div>
</div>

聖盃佈局

.container {
            margin-left: 120px;
            margin-right: 220px;
        }
        .main {
            float: left;
            width: 100%;
            height:300px;
            background: green;
        }
        .left {
            position: relative;
            left: -120px;
            float: left;
            height: 300px;
            width: 100px;
            margin-left: -100%;
            background: red;
        }
        .right {
            position: relative;
            right: -220px;
            float: right;
            height: 300px;
            width: 200px;
            margin-left: -200px;
            background: blue;
        }
<div class="container">
    <div class="main"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

雙飛翼佈局

.content {
            float: left;
            width: 100%;
        }
        .main {
            height: 200px;
            margin-left: 110px;
            margin-right: 220px;
            background: green;
        }
        .main::after {
            content: '';
            display: block;
            font-size:0;
            height: 0;
            zoom: 1;
            clear: both;
        }
        .left {
            float:left;
            height: 200px;
            width: 100px;
            margin-left: -100%;
            background: red;
        }
        .right {
            float: right;
            height: 200px;
            width: 200px;
            margin-left: -200px;
            background: blue;
        }
<div class="content">
    <div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>

29 stylus/sass/less區別

均具備「變量」、「混合」、「嵌套」、「繼承」、「顏色混合」五大基本特性
Scss和LESS語法較爲嚴謹，LESS要求必定要使用大括號「{}」，Scss和Stylus能夠經過縮進表示層次與嵌套關係
Scss無全局變量的概念，LESS和Stylus有相似於其它語言的做用域概念
Sass是基於Ruby語言的，而LESS和Stylus能夠基於NodeJS NPM下載相應庫後進行編譯；

30 postcss的做用

能夠直觀的理解爲：它就是一個平臺。爲何說它是一個平臺呢？由於咱們直接用它，感受不能幹什麼事情，可是若是讓一些插件在它上面跑，那麼將會很強大
PostCSS 提供了一個解析器，它可以將 CSS 解析成抽象語法樹
經過在 PostCSS 這個平臺上，咱們可以開發一些插件，來處理咱們的CSS，好比熱門的：autoprefixer
postcss能夠對sass處理事後的css再處理最多見的就是autoprefixer

31 css樣式（選擇器）的優先級

計算權重肯定
!important
內聯樣式
後寫的優先級高

32 自定義字體的使用場景

宣傳/品牌/banner等固定文案
字體圖標

33 如何美化CheckBox

label（for） 和id
隱藏原生的 input
:checked + label

34 僞類和僞元素的區別

僞類表狀態
僞元素是真的有元素
前者單冒號，後者雙冒號

35 `base64`的使用

用於減小 HTTP 請求
適用於小圖片
base64的體積約爲原圖的4/3

36 自適應佈局

思路：

左側浮動或者絕對定位，而後右側margin撐開
使用div包含，而後靠負margin造成bfc
使用flex

37 請用Css寫一個簡單的幻燈片效果頁面

知道是要用css3。使用animation動畫實現一個簡單的幻燈片效果

/**css**/
.ani{
  width:480px;
  height:320px;
  margin:50px auto;
  overflow: hidden;
  box-shadow:0 0 5px rgba(0,0,0,1);
  background-size: cover;
  background-position: center;
  -webkit-animation-name: "loops";
  -webkit-animation-duration: 20s;
  -webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes "loops" {
    0% {
        background:url(http://d.hiphotos.baidu.com/image/w%3D400/sign=c01e6adca964034f0fcdc3069fc27980/e824b899a9014c08e5e38ca4087b02087af4f4d3.jpg) no-repeat;             
    }
    25% {
        background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=edee1572e9f81a4c2632edc9e72b6029/30adcbef76094b364d72bceba1cc7cd98c109dd0.jpg) no-repeat;
    }
    50% {
        background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=937dace2552c11dfded1be2353266255/d8f9d72a6059252d258e7605369b033b5bb5b912.jpg) no-repeat;
    }
    75% {
        background:url(http://g.hiphotos.baidu.com/image/w%3D400/sign=7d37500b8544ebf86d71653fe9f9d736/0df431adcbef76095d61f0972cdda3cc7cd99e4b.jpg) no-repeat;
    }
    100% {
        background:url(http://c.hiphotos.baidu.com/image/w%3D400/sign=cfb239ceb0fb43161a1f7b7a10a54642/3b87e950352ac65ce2e73f76f9f2b21192138ad1.jpg) no-repeat;
    }
}

38 什麼是外邊距重疊？重疊的結果是什麼？

外邊距重疊就是margin-collapse

在CSS當中，相鄰的兩個盒子（多是兄弟關係也多是祖先關係）的外邊距能夠結合成一個單獨的外邊距。這種合併外邊距的方式被稱爲摺疊，而且於是所結合成的外邊距稱爲摺疊外邊距。

摺疊結果遵循下列計算規則：

兩個相鄰的外邊距都是正數時，摺疊結果是它們二者之間較大的值。
兩個相鄰的外邊距都是負數時，摺疊結果是二者絕對值的較大值。
兩個外邊距一正一負時，摺疊結果是二者的相加的和。

39 rgba()和opacity的透明效果有什麼不一樣？

rgba()和opacity都能實現透明效果，但最大的不一樣是opacity做用於元素，以及元素內的全部內容的透明度，
而rgba()只做用於元素的顏色或其背景色。（設置rgba透明的元素的子元素不會繼承透明效果！）

40 css中可讓文字在垂直和水平方向上重疊的兩個屬性是什麼？

垂直方向：line-height
水平方向：letter-spacing

41 如何垂直居中一個浮動元素？

/**方法一：已知元素的高寬**/

#div1{
  background-color:#6699FF;
  width:200px;
  height:200px;

  position: absolute;        //父元素須要相對定位
  top: 50%;
  left: 50%;
  margin-top:-100px ;   //二分之一的height，width
  margin-left: -100px;
}

/**方法二:**/

#div1{
  width: 200px;
  height: 200px;
  background-color: #6699FF;

  margin:auto;
  position: absolute;        //父元素須要相對定位
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
如何垂直居中一個<img>?（用更簡便的方法。）

#container     /**<img>的容器設置以下**/
{
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}

42 px和em的區別

px和em都是長度單位，區別是，px的值是固定的，指定是多少就是多少，計算比較容易。em得值不是固定的，而且em會繼承父級元素的字體大小。
瀏覽器的默認字體高都是16px。因此未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em, 10px=0.625em。

43 Sass、LESS是什麼？你們爲何要使用他們？

他們是CSS預處理器。他是CSS上的一種抽象層。他們是一種特殊的語法/語言編譯成CSS。
例如Less是一種動態樣式語言. 將CSS賦予了動態語言的特性，如變量，繼承，運算，函數. LESS 既能夠在客戶端上運行 (支持IE 6+, Webkit, Firefox)，也可一在服務端運行 (藉助 Node.js)

爲何要使用它們？

結構清晰，便於擴展。
能夠方便地屏蔽瀏覽器私有語法差別。這個不用多說，封裝對- 瀏覽器語法差別的重複處理，減小無心義的機械勞動。
能夠輕鬆實現多重繼承。
徹底兼容 CSS 代碼，能夠方便地應用到老項目中。LESS 只- 是在 CSS 語法上作了擴展，因此老的 CSS 代碼也能夠與 LESS 代碼一同編譯

44 知道css有個content屬性嗎？有什麼做用？有什麼應用？

css的content屬性專門應用在 before/after僞元素上，用於來插入生成內容。最多見的應用是利用僞類清除浮動。

/**一種常見利用僞類清除浮動的代碼**/
 .clearfix:after {
    content:".";       //這裏利用到了content屬性
    display:block;
    height:0;
    visibility:hidden;
    clear:both; }

.clearfix {
    *zoom:1;
}

45 水平居中的方法

元素爲行內元素，設置父元素text-align:center
若是元素寬度固定，能夠設置左右margin爲auto;
若是元素爲絕對定位，設置父元素position爲relative，元素設left:0;right:0;margin:auto;
使用flex-box佈局，指定justify-content屬性爲center
display設置爲tabel-ceil

46 垂直居中的方法

將顯示方式設置爲表格，display:table-cell,同時設置vertial-align：middle
使用flex佈局，設置爲align-item：center
絕對定位中設置bottom:0,top:0,並設置margin:auto
絕對定位中固定高度時設置top:50%，margin-top值爲高度一半的負值
文本垂直居中設置line-height爲height值

47 如何使用CSS實現硬件加速？

硬件加速是指經過建立獨立的複合圖層，讓GPU來渲染這個圖層，從而提升性能，

通常觸發硬件加速的CSS屬性有transform、opacity、filter，爲了不2D動畫在
開始和結束的時候的repaint操做，通常使用tranform:translateZ(0)

48 重繪和迴流（重排）是什麼，如何避免？

DOM的變化影響到了元素的幾何屬性（寬高）,瀏覽器從新計算元素的幾何屬性，其餘元素的幾何
屬性和位置也會受到影響，瀏覽器須要從新構造渲染樹，這個過程稱爲重排，瀏覽器將受到影響的部分
從新繪製到屏幕上的過程稱爲重繪。引發重排的緣由有
- 添加或者刪除可見的DOM元素，
- 元素位置、尺寸、內容改變，
- 瀏覽器頁面初始化，
- 瀏覽器窗口尺寸改變，重排必定重繪，重繪不必定重排，

減小重繪和重排的方法：

不在佈局信息改變時作DOM查詢
使用cssText或者className一次性改變屬性
使用fragment
對於屢次重排的元素，如動畫，使用絕對定位脫離文檔流，讓他的改變不影響到其餘元素

49 說一說css3的animation

css3的animation是css3新增的動畫屬性，這個css3動畫的每一幀是經過@keyframes來聲明的，keyframes聲明瞭動畫的名稱，經過from、to或者是百分比來定義
每一幀動畫元素的狀態，經過animation-name來引用這個動畫，同時css3動畫也能夠定義動畫運行的時長、動畫開始時間、動畫播放方向、動畫循環次數、動畫播放的方式，
這些相關的動畫子屬性有：animation-name定義動畫名、animation-duration定義動畫播放的時長、animation-delay定義動畫延遲播放的時間、animation-direction定義
動畫的播放方向、animation-iteration-count定義播放次數、animation-fill-mode定義動畫播放以後的狀態、animation-play-state定義播放狀態，如暫停運行等、animation-timing-function
定義播放的方式，如恆速播放、艱澀播放等。

50 左邊寬度固定，右邊自適應

左側固定寬度，右側自適應寬度的兩列布局實現

html結構

 
  <div class="outer">
    <div class="left">固定寬度</div>
    <div class="right">自適應寬度</div>
</div> 
 

在外層div（類名爲outer）的div中，有兩個子div，類名分別爲left和right，其中left爲固定寬度，而right爲自適應寬度

方法1：左側div設置成浮動：float: left，右側div寬度會自拉昇適應

.outer {
    width: 100%;
    height: 500px;
    background-color: yellow;
}
.left {
    width: 200px;
    height: 200px;
    background-color: red;
    float: left;
}
.right {
    height: 200px;
    background-color: blue;
}

方法2：對右側:div進行絕對定位，而後再設置right=0，便可以實現寬度自適應

絕對定位元素的第一個高級特性就是其具備自動伸縮的功能，當咱們將 width設置爲 auto 的時候（或者不設置，默認爲 auto ），絕對定位元素會根據其 left 和 right 自動伸縮其大小

.outer {
    width: 100%;
    height: 500px;
    background-color: yellow;
    position: relative;
}
.left {
    width: 200px;
    height: 200px;
    background-color: red;
}
.right {
    height: 200px;
    background-color: blue;
    position: absolute;
    left: 200px;
    top:0;          
    right: 0;
}

方法3：將左側div進行絕對定位，而後右側div設置margin-left: 200px

.outer {
    width: 100%;
    height: 500px;
    background-color: yellow;
    position: relative;
}
.left {
    width: 200px;
    height: 200px;
    background-color: red;
    position: absolute;
}
.right {
    height: 200px;
    background-color: blue;
    margin-left: 200px;
}

方法4：使用flex佈局

.outer {
    width: 100%;
    height: 500px;
    background-color: yellow;
    display: flex;
    flex-direction: row;
}
.left {
    width: 200px;
    height: 200px;
    background-color: red;
}
.right {
    height: 200px;
    background-color: blue;
    flex: 1;
}

3、JavaScript

1 閉包

閉包就是可以讀取其餘函數內部變量的函數
閉包是指有權訪問另外一個函數做用域中變量的函數，建立閉包的最多見的方式就是在一個函數內建立另外一個函數，經過另外一個函數訪問這個函數的局部變量,利用閉包能夠突破做用鏈域
閉包的特性：
- 函數內再嵌套函數
- 內部函數能夠引用外層的參數和變量
- 參數和變量不會被垃圾回收機制回收

說說你對閉包的理解

使用閉包主要是爲了設計私有的方法和變量。閉包的優勢是能夠避免全局變量的污染，缺點是閉包會常駐內存，會增大內存使用量，使用不當很容易形成內存泄露。在js中，函數即閉包，只有函數纔會產生做用域的概念
閉包的最大用處有兩個，一個是能夠讀取函數內部的變量，另外一個就是讓這些變量始終保持在內存中
閉包的另外一個用處，是封裝對象的私有屬性和私有方法
好處：可以實現封裝和緩存等；
壞處：就是消耗內存、不正當使用會形成內存溢出的問題

使用閉包的注意點

因爲閉包會使得函數中的變量都被保存在內存中，內存消耗很大，因此不能濫用閉包，不然會形成網頁的性能問題，在IE中可能致使內存泄露
解決方法是，在退出函數以前，將不使用的局部變量所有刪除

2 說說你對做用域鏈的理解

做用域鏈的做用是保證執行環境裏有權訪問的變量和函數是有序的，做用域鏈的變量只能向上訪問，變量訪問到window對象即被終止，做用域鏈向下訪問變量是不被容許的
簡單的說，做用域就是變量與函數的可訪問範圍，即做用域控制着變量與函數的可見性和生命週期

3 JavaScript原型，原型鏈 ? 有什麼特色？

每一個對象都會在其內部初始化一個屬性，就是prototype(原型)，當咱們訪問一個對象的屬性時
若是這個對象內部不存在這個屬性，那麼他就會去prototype裏找這個屬性，這個prototype又會有本身的prototype，因而就這樣一直找下去，也就是咱們平時所說的原型鏈的概念
關係：instance.constructor.prototype = instance.__proto__
特色：
- JavaScript對象是經過引用來傳遞的，咱們建立的每一個新對象實體中並無一份屬於本身的原型副本。當咱們修改原型時，與之相關的對象也會繼承這一改變
當咱們須要一個屬性的時，Javascript引擎會先看當前對象中是否有這個屬性，若是沒有的
就會查找他的Prototype對象是否有這個屬性，如此遞推下去，一直檢索到 Object 內建對象

4 請解釋什麼是事件代理

事件代理（Event Delegation），又稱之爲事件委託。是 JavaScript 中經常使用綁定事件的經常使用技巧。顧名思義，「事件代理」便是把本來須要綁定的事件委託給父元素，讓父元素擔當事件監聽的職務。事件代理的原理是DOM元素的事件冒泡。使用事件代理的好處是能夠提升性能
能夠大量節省內存佔用，減小事件註冊，好比在table上代理全部td的click事件就很是棒
能夠實現當新增子對象時無需再次對其綁定

5 Javascript如何實現繼承？

構造繼承
原型繼承
實例繼承
拷貝繼承
原型prototype機制或apply和call方法去實現較簡單，建議使用構造函數與原型混合方式

 function Parent(){
        this.name = 'wang';
    }

    function Child(){
        this.age = 28;
    }
    Child.prototype = new Parent();//繼承了Parent，經過原型

    var demo = new Child();
    alert(demo.age);
    alert(demo.name);//獲得被繼承的屬性
  }

6 談談This對象的理解

this老是指向函數的直接調用者（而非間接調用者）
若是有new關鍵字，this指向new出來的那個對象
在事件中，this指向觸發這個事件的對象，特殊的是，IE中的attachEvent中的this老是指向全局對象Window

7 事件模型

W3C中定義事件的發生經歷三個階段：捕獲階段（capturing）、目標階段（targetin）、冒泡階段（bubbling）

冒泡型事件：當你使用事件冒泡時，子級元素先觸發，父級元素後觸發
捕獲型事件：當你使用事件捕獲時，父級元素先觸發，子級元素後觸發
DOM事件流：同時支持兩種事件模型：捕獲型事件和冒泡型事件
阻止冒泡：在W3c中，使用stopPropagation（）方法；在IE下設置cancelBubble = true
阻止捕獲：阻止事件的默認行爲，例如click - <a>後的跳轉。在W3c中，使用preventDefault（）方法，在IE下設置window.event.returnValue = false

8 new操做符具體幹了什麼呢?

建立一個空對象，而且 this 變量引用該對象，同時還繼承了該函數的原型
屬性和方法被加入到 this 引用的對象中
新建立的對象由 this 所引用，而且最後隱式的返回 this

9 Ajax原理

Ajax的原理簡單來講是在用戶和服務器之間加了—箇中間層(AJAX引擎)，經過XmlHttpRequest對象來向服務器發異步請求，從服務器得到數據，而後用javascript來操做DOM而更新頁面。使用戶操做與服務器響應異步化。這其中最關鍵的一步就是從服務器得到請求數據
Ajax的過程只涉及JavaScript、XMLHttpRequest和DOM。XMLHttpRequest是ajax的核心機制

 // 1. 建立鏈接
    var xhr = null;
    xhr = new XMLHttpRequest()
    // 2. 鏈接服務器
    xhr.open('get', url, true)
    // 3. 發送請求
    xhr.send(null);
    // 4. 接受請求
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if(xhr.status == 200){
                success(xhr.responseText);
            } else { // fail
                fail && fail(xhr.status);
            }
        }
    }

ajax 有那些優缺點?

優勢：
- 經過異步模式，提高了用戶體驗.
- 優化了瀏覽器和服務器之間的傳輸，減小沒必要要的數據往返，減小了帶寬佔用.
- Ajax在客戶端運行，承擔了一部分原本由服務器承擔的工做，減小了大用戶量下的服務器負載。
- Ajax能夠實現動態不刷新（局部刷新）
缺點：
- 安全問題 AJAX暴露了與服務器交互的細節。
- 對搜索引擎的支持比較弱。
- 不容易調試。

10 如何解決跨域問題?

首先了解下瀏覽器的同源策略同源策略/SOP（Same origin policy）是一種約定，由Netscape公司1995年引入瀏覽器，它是瀏覽器最核心也最基本的安全功能，若是缺乏了同源策略，瀏覽器很容易受到XSS、CSFR等攻擊。所謂同源是指"協議+域名+端口"三者相同，即使兩個不一樣的域名指向同一個ip地址，也非同源

那麼怎樣解決跨域問題的呢？

經過jsonp跨域

var script = document.createElement('script');
script.type = 'text/javascript';

// 傳參並指定回調執行函數爲onBack
script.src = 'http://www.....:8080/login?user=admin&callback=onBack';
document.head.appendChild(script);

// 回調執行函數
function onBack(res) {
    alert(JSON.stringify(res));
}

document.domain + iframe跨域

此方案僅限主域相同，子域不一樣的跨域應用場景

1.）父窗口：(http://www.domain.com/a.html)

<iframe id="iframe" src="http://child.domain.com/b.html"></iframe>
<script>
    document.domain = 'domain.com';
    var user = 'admin';
</script>

2.）子窗口：(http://child.domain.com/b.html)

 
  document.domain = 'domain.com';
// 獲取父窗口中變量
alert('get js data from parent ---> ' + window.parent.user); 
 

nginx代理跨域
nodejs中間件代理跨域
後端在頭部信息裏面設置安全域名

11 模塊化開發怎麼作？

當即執行函數,不暴露私有成員

var module1 = (function(){
　　　　var _count = 0;
　　　　var m1 = function(){
　　　　　　//...
　　　　};
　　　　var m2 = function(){
　　　　　　//...
　　　　};
　　　　return {
　　　　　　m1 : m1,
　　　　　　m2 : m2
　　　　};
　　})();

12 異步加載JS的方式有哪些？

defer，只支持IE
async：
建立script，插入到DOM中，加載完畢後callBack

13 那些操做會形成內存泄漏？

內存泄漏指任何對象在您再也不擁有或須要它以後仍然存在
setTimeout 的第一個參數使用字符串而非函數的話，會引起內存泄漏
閉包使用不當

14 XML和JSON的區別？

數據體積方面
- JSON相對於XML來說，數據的體積小，傳遞的速度更快些。
數據交互方面
- JSON與JavaScript的交互更加方便，更容易解析處理，更好的數據交互
數據描述方面
- JSON對數據的描述性比XML較差
傳輸速度方面
- JSON的速度要遠遠快於XML

15 談談你對webpack的見解

WebPack 是一個模塊打包工具，你能夠使用WebPack管理你的模塊依賴，並編繹輸出模塊們所需的靜態文件。它可以很好地管理、打包Web開發中所用到的HTML、Javascript、CSS以及各類靜態文件（圖片、字體等），讓開發過程更加高效。對於不一樣類型的資源，webpack有對應的模塊加載器。webpack模塊打包器會分析模塊間的依賴關係，最後生成了優化且合併後的靜態資源

16 說說你對AMD和Commonjs的理解

CommonJS是服務器端模塊的規範，Node.js採用了這個規範。CommonJS規範加載模塊是同步的，也就是說，只有加載完成，才能執行後面的操做。AMD規範則是非同步加載模塊，容許指定回調函數
AMD推薦的風格經過返回一個對象作爲模塊對象，CommonJS的風格經過對module.exports或exports的屬性賦值來達到暴露模塊對象的目的

17 常見web安全及防禦原理

sql注入原理
- 就是經過把SQL命令插入到Web表單遞交或輸入域名或頁面請求的查詢字符串，最終達到欺騙服務器執行惡意的SQL命令
總的來講有如下幾點
- 永遠不要信任用戶的輸入，要對用戶的輸入進行校驗，能夠經過正則表達式，或限制長度，對單引號和雙"-"進行轉換等
- 永遠不要使用動態拼裝SQL，能夠使用參數化的SQL或者直接使用存儲過程進行數據查詢存取
- 永遠不要使用管理員權限的數據庫鏈接，爲每一個應用使用單獨的權限有限的數據庫鏈接
- 不要把機密信息明文存放，請加密或者hash掉密碼和敏感的信息

XSS原理及防範

Xss(cross-site scripting)攻擊指的是攻擊者往Web頁面裏插入惡意html標籤或者javascript代碼。好比：攻擊者在論壇中放一個看似安全的連接，騙取用戶點擊後，竊取cookie中的用戶私密信息；或者攻擊者在論壇中加一個惡意表單，當用戶提交表單的時候，卻把信息傳送到攻擊者的服務器中，而不是用戶本來覺得的信任站點

XSS防範方法

首先代碼裏對用戶輸入的地方和變量都須要仔細檢查長度和對」<」,」>」,」;」,」’」等字符作過濾；其次任何內容寫到頁面以前都必須加以encode，避免不當心把html tag 弄出來。這一個層面作好，至少能夠堵住超過一半的XSS 攻擊

XSS與CSRF有什麼區別嗎？

XSS是獲取信息，不須要提早知道其餘用戶頁面的代碼和數據包。CSRF是代替用戶完成指定的動做，須要知道其餘用戶頁面的代碼和數據包。要完成一次CSRF攻擊，受害者必須依次完成兩個步驟
登陸受信任網站A，並在本地生成Cookie
在不登出A的狀況下，訪問危險網站B

CSRF的防護

服務端的CSRF方式方法不少樣，但總的思想都是一致的，就是在客戶端頁面增長僞隨機數
經過驗證碼的方法

18 用過哪些設計模式？

工廠模式：
- 工廠模式解決了重複實例化的問題，但還有一個問題,那就是識別問題，由於根本沒法
- 主要好處就是能夠消除對象間的耦合，經過使用工程方法而不是new關鍵字
構造函數模式
- 使用構造函數的方法，即解決了重複實例化的問題，又解決了對象識別的問題，該模式與工廠模式的不一樣之處在於
- 直接將屬性和方法賦值給 this對象;

19 爲何要有同源限制？

同源策略指的是：協議，域名，端口相同，同源策略是一種安全協議
舉例說明：好比一個黑客程序，他利用Iframe把真正的銀行登陸頁面嵌到他的頁面上，當你使用真實的用戶名，密碼登陸時，他的頁面就能夠經過Javascript讀取到你的表單中input中的內容，這樣用戶名，密碼就輕鬆到手了。

20 offsetWidth/offsetHeight,clientWidth/clientHeight與scrollWidth/scrollHeight的區別

offsetWidth/offsetHeight返回值包含content + padding + border，效果與e.getBoundingClientRect()相同
clientWidth/clientHeight返回值只包含content + padding，若是有滾動條，也不包含滾動條
scrollWidth/scrollHeight返回值包含content + padding + 溢出內容的尺寸

21 javascript有哪些方法定義對象

對象字面量： var obj = {};
構造函數： var obj = new Object();
Object.create(): var obj = Object.create(Object.prototype);

22 常見兼容性問題？

png24位的圖片在iE6瀏覽器上出現背景，解決方案是作成PNG8
瀏覽器默認的margin和padding不一樣。解決方案是加一個全局的*{margin:0;padding:0;}來統一,，可是全局效率很低，通常是以下這樣解決：

 
  body,ul,li,ol,dl,dt,dd,form,input,h1,h2,h3,h4,h5,h6,p{
margin:0;
padding:0;
} 
 

IE下,event對象有x,y屬性,可是沒有pageX,pageY屬性
Firefox下,event對象有pageX,pageY屬性,可是沒有x,y屬性.

23 說說你對promise的瞭解

依照 Promise/A+ 的定義，Promise 有四種狀態：
- pending: 初始狀態, 非 fulfilled 或 rejected.
- fulfilled: 成功的操做.
- rejected: 失敗的操做.
- settled: Promise已被fulfilled或rejected，且不是pending
另外， fulfilled與 rejected一塊兒合稱 settled
Promise 對象用來進行延遲(deferred) 和異步(asynchronous) 計算

Promise 的構造函數

構造一個 Promise，最基本的用法以下：

var promise = new Promise(function(resolve, reject) {

        if (...) {  // succeed

            resolve(result);

        } else {   // fails

            reject(Error(errMessage));

        }
    });

Promise 實例擁有 then 方法（具備 then 方法的對象，一般被稱爲thenable）。它的使用方法以下：

promise.then(onFulfilled, onRejected)

接收兩個函數做爲參數，一個在 fulfilled 的時候被調用，一個在rejected的時候被調用，接收參數就是 future，onFulfilled 對應resolve, onRejected對應 reject

24 你以爲jQuery源碼有哪些寫的好的地方

jquery源碼封裝在一個匿名函數的自執行環境中，有助於防止變量的全局污染，而後經過傳入window對象參數，能夠使window對象做爲局部變量使用，好處是當jquery中訪問window對象的時候，就不用將做用域鏈退回到頂層做用域了，從而能夠更快的訪問window對象。一樣，傳入undefined參數，能夠縮短查找undefined時的做用域鏈
jquery將一些原型屬性和方法封裝在了jquery.prototype中，爲了縮短名稱，又賦值給了jquery.fn，這是很形象的寫法
有一些數組或對象的方法常常能使用到，jQuery將其保存爲局部變量以提升訪問速度
jquery實現的鏈式調用能夠節約代碼，所返回的都是同一個對象，能夠提升代碼效率

25 vue、react、angular

Vue.js
一個用於建立 web 交互界面的庫，是一個精簡的 MVVM。它經過雙向數據綁定把 View 層和 Model 層鏈接了起來。實際的 DOM 封裝和輸出格式都被抽象爲了Directives 和 Filters
AngularJS
是一個比較完善的前端MVVM框架，包含模板，數據雙向綁定，路由，模塊化，服務，依賴注入等全部功能，模板功能強大豐富，自帶了豐富的 Angular指令
react
React 僅僅是 VIEW 層是facebook公司。推出的一個用於構建UI的一個庫，可以實現服務器端的渲染。用了virtual dom，因此性能很好。

26 Node的應用場景

特色：
- 一、它是一個Javascript運行環境
- 二、依賴於Chrome V8引擎進行代碼解釋
- 三、事件驅動
- 四、非阻塞I/O
- 五、單進程，單線程
優勢：
- 高併發（最重要的優勢）
缺點：
- 一、只支持單核CPU，不能充分利用CPU
- 二、可靠性低，一旦代碼某個環節崩潰，整個系統都崩潰

27 談談你對AMD、CMD的理解

CommonJS是服務器端模塊的規範，Node.js採用了這個規範。CommonJS規範加載模塊是同步的，也就是說，只有加載完成，才能執行後面的操做。AMD規範則是非同步加載模塊，容許指定回調函數
AMD推薦的風格經過返回一個對象作爲模塊對象，CommonJS的風格經過對module.exports或exports的屬性賦值來達到暴露模塊對象的目的

es6模塊 commonjs amd cmd

CommonJS 的規範中，每一個 JavaScript 文件就是一個獨立的模塊上下文（module context），在這個上下文中默認建立的屬性都是私有的。也就是說，在一個文件定義的變量（還包括函數和類），都是私有的，對其餘文件是不可見的。
CommonJS是同步加載模塊,在瀏覽器中會出現堵塞狀況，因此不適用
AMD 異步，須要定義回調define方式
es6 一個模塊就是一個獨立的文件，該文件內部的全部變量，外部沒法獲取。若是你但願外部可以讀取模塊內部的某個變量，就必須使用export關鍵字輸出該變量
es6還能夠導出類、方法，自動適用嚴格模式

28 那些操做會形成內存泄漏

內存泄漏指任何對象在您再也不擁有或須要它以後仍然存在
setTimeout 的第一個參數使用字符串而非函數的話，會引起內存泄漏
閉包、控制檯日誌、循環（在兩個對象彼此引用且彼此保留時，就會產生一個循環）

29 web開發中會話跟蹤的方法有哪些

cookie
session
url重寫
隱藏input
ip地址

30 介紹js的基本數據類型

Undefined、Null、Boolean、Number、String

31 介紹js有哪些內置對象

Object 是 JavaScript 中全部對象的父對象
數據封裝類對象：Object、Array、Boolean、Number 和 String
其餘對象：Function、Arguments、Math、Date、RegExp、Error

32 說幾條寫JavaScript的基本規範

不要在同一行聲明多個變量
請使用===/!==來比較true/false或者數值
使用對象字面量替代new Array這種形式
不要使用全局函數
Switch語句必須帶有default分支
If語句必須使用大括號
for-in循環中的變量應該使用var關鍵字明確限定做用域，從而避免做用域污

33 JavaScript有幾種類型的值

棧：原始數據類型（Undefined，Null，Boolean，Number、String）
堆：引用數據類型（對象、數組和函數）
兩種類型的區別是：存儲位置不一樣；
原始數據類型直接存儲在棧(stack)中的簡單數據段，佔據空間小、大小固定，屬於被頻繁使用數據，因此放入棧中存儲；
引用數據類型存儲在堆(heap)中的對象,佔據空間大、大小不固定,若是存儲在棧中，將會影響程序運行的性能；引用數據類型在棧中存儲了指針，該指針指向堆中該實體的起始地址。當解釋器尋找引用值時，會首先檢索其
在棧中的地址，取得地址後從堆中得到實體

34 javascript建立對象的幾種方式

javascript建立對象簡單的說,無非就是使用內置對象或各類自定義對象，固然還能夠用JSON；但寫法有不少種，也能混合使用

對象字面量的方式

person={firstname:"Mark",lastname:"Yun",age:25,eyecolor:"black"};

用function來模擬無參的構造函數

function Person(){}
    var person=new Person();//定義一個function，若是使用new"實例化",該function能夠看做是一個Class
        person.name="Mark";
        person.age="25";
        person.work=function(){
        alert(person.name+" hello...");
    }
person.work();

用function來模擬參構造函數來實現（用this關鍵字定義構造的上下文屬性）

function Pet(name,age,hobby){
       this.name=name;//this做用域：當前對象
       this.age=age;
       this.hobby=hobby;
       this.eat=function(){
          alert("我叫"+this.name+",我喜歡"+this.hobby+",是個程序員");
       }
    }
    var maidou =new Pet("麥兜",25,"coding");//實例化、建立對象
    maidou.eat();//調用eat方法

用工廠方式來建立（內置對象）

var wcDog =new Object();
     wcDog.name="旺財";
     wcDog.age=3;
     wcDog.work=function(){
       alert("我是"+wcDog.name+",汪汪汪......");
     }
     wcDog.work();

用原型方式來建立

function Dog(){

     }
     Dog.prototype.name="旺財";
     Dog.prototype.eat=function(){
     alert(this.name+"是個吃貨");
     }
     var wangcai =new Dog();
     wangcai.eat();

用混合方式來建立

 function Car(name,price){
      this.name=name;
      this.price=price;
    }
     Car.prototype.sell=function(){
       alert("我是"+this.name+"，我如今賣"+this.price+"萬元");
      }
    var camry =new Car("凱美瑞",27);
    camry.sell();

35 eval是作什麼的

它的功能是把對應的字符串解析成JS代碼並運行
應該避免使用eval，不安全，很是耗性能（2次，一次解析成js語句，一次執行）
由JSON字符串轉換爲JSON對象的時候能夠用eval，var obj =eval('('+ str +')')

36 null，undefined 的區別

undefined 表示不存在這個值。
undefined :是一個表示"無"的原始值或者說表示"缺乏值"，就是此處應該有一個值，可是尚未定義。當嘗試讀取時會返回 undefined
例如變量被聲明瞭，但沒有賦值時，就等於undefined
null 表示一個對象被定義了，值爲「空值」
null : 是一個對象(空對象, 沒有任何屬性和方法)
例如做爲函數的參數，表示該函數的參數不是對象；
在驗證null時，必定要使用　=== ，由於 ==沒法分別null 和　undefined

37 ["1", "2", "3"].map(parseInt) 答案是多少

[1, NaN, NaN]由於 parseInt 須要兩個參數 (val, radix)，其中radix 表示解析時用的基數。
map傳了 3個(element, index, array)，對應的 radix 不合法致使解析失敗。

38 javascript 代碼中的"use strict";是什麼意思

use strict是一種ECMAscript 5 添加的（嚴格）運行模式,這種模式使得 Javascript 在更嚴格的條件下運行,使JS編碼更加規範化的模式,消除Javascript語法的一些不合理、不嚴謹之處，減小一些怪異行爲

39 JSON 的瞭解

JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式
它是基於JavaScript的一個子集。數據格式簡單, 易於讀寫, 佔用帶寬小
JSON字符串轉換爲JSON對象:

 
  var obj =eval('('+ str +')');
var obj = str.parseJSON();
var obj = JSON.parse(str); 
 

JSON對象轉換爲JSON字符串：

var last=obj.toJSONString();
var last=JSON.stringify(obj);

40 js延遲加載的方式有哪些

defer和async、動態建立DOM方式（用得最多）、按需異步載入js

41 同步和異步的區別

同步：瀏覽器訪問服務器請求，用戶看獲得頁面刷新，從新發請求,等請求完，頁面刷新，新內容出現，用戶看到新內容,進行下一步操做
異步：瀏覽器訪問服務器請求，用戶正常操做，瀏覽器後端進行請求。等請求完，頁面不刷新，新內容也會出現，用戶看到新內容

42 漸進加強和優雅降級

漸進加強：針對低版本瀏覽器進行構建頁面，保證最基本的功能，而後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
優雅降級：一開始就構建完整的功能，而後再針對低版本瀏覽器進行兼容

43 defer和async

defer並行加載js文件，會按照頁面上script標籤的順序執行
async並行加載js文件，下載完成當即執行，不會按照頁面上script標籤的順序執行

44 說說嚴格模式的限制

變量必須聲明後再使用
函數的參數不能有同名屬性，不然報錯
不能使用with語句
禁止this指向全局對象

45 attribute和property的區別是什麼

attribute是dom元素在文檔中做爲html標籤擁有的屬性；
property就是dom元素在js中做爲對象擁有的屬性。
對於html的標準屬性來講，attribute和property是同步的，是會自動更新的
可是對於自定義的屬性來講，他們是不一樣步的

46 談談你對ES6的理解

新增模板字符串（爲JavaScript提供了簡單的字符串插值功能）
箭頭函數
for-of（用來遍歷數據—例如數組中的值。）
arguments對象可被不定參數和默認參數完美代替。
ES6將promise對象歸入規範，提供了原生的Promise對象。
增長了let和const命令，用來聲明變量。
增長了塊級做用域。
let命令實際上就增長了塊級做用域。
還有就是引入module模塊的概念

47 ECMAScript6 怎麼寫class麼

這個語法糖可讓有OOP基礎的人更快上手js，至少是一個官方的實現了
但對熟悉js的人來講，這個東西沒啥大影響；一個Object.creat()搞定繼承，比class簡潔清晰的多

48 什麼是面向對象編程及面向過程編程，它們的異同和優缺點

面向過程就是分析出解決問題所須要的步驟，而後用函數把這些步驟一步一步實現，使用的時候一個一個依次調用就能夠了
面向對象是把構成問題事務分解成各個對象，創建對象的目的不是爲了完成一個步驟，而是爲了描敘某個事物在整個解決問題的步驟中的行爲
面向對象是以功能來劃分問題，而不是步驟

49 面向對象編程思想

基本思想是使用對象，類，繼承，封裝等基本概念來進行程序設計
優勢
- 易維護
  - 採用面向對象思想設計的結構，可讀性高，因爲繼承的存在，即便改變需求，那麼維護也只是在局部模塊，因此維護起來是很是方便和較低成本的
- 易擴展
- 開發工做的重用性、繼承性高，下降重複工做量。
- 縮短了開發週期

50 對web標準、可用性、可訪問性的理解

可用性（Usability）：產品是否容易上手，用戶可否完成任務，效率如何，以及這過程當中用戶的主觀感覺可好，是從用戶的角度來看產品的質量。可用性好意味着產品質量高，是企業的核心競爭力
可訪問性（Accessibility）：Web內容對於殘障用戶的可閱讀和可理解性
可維護性（Maintainability）：通常包含兩個層次，一是當系統出現問題時，快速定位並解決問題的成本，成本低則可維護性好。二是代碼是否容易被人理解，是否容易修改和加強功能。

51 如何經過JS判斷一個數組

instanceof方法
- instanceof 運算符是用來測試一個對象是否在其原型鏈原型構造函數的屬性

var arr = [];
arr instanceof Array; // true

constructor方法
- constructor屬性返回對建立此對象的數組函數的引用，就是返回對象相對應的構造函數

var arr = [];
arr.constructor == Array; //true

最簡單的方法
- 這種寫法，是 jQuery 正在使用的

Object.prototype.toString.call(value) == '[object Array]'
// 利用這個方法，能夠寫一個返回數據類型的方法
var isType = function (obj) {
     return Object.prototype.toString.call(obj).slice(8,-1);
}

ES5新增方法isArray()

var a = new Array(123);
var b = new Date();
console.log(Array.isArray(a)); //true
console.log(Array.isArray(b)); //false

52 談一談let與var的區別

let命令不存在變量提高，若是在let前使用，會致使報錯
若是塊區中存在let和const命令，就會造成封閉做用域
不容許重複聲明，所以，不能在函數內部從新聲明參數

53 map與forEach的區別

forEach方法，是最基本的方法，就是遍歷與循環，默認有3個傳參：分別是遍歷的數組內容item、數組索引index、和當前遍歷數組Array
map方法，基本用法與forEach一致，可是不一樣的，它會返回一個新的數組，因此在callback須要有return值，若是沒有，會返回undefined

54 談一談你理解的函數式編程

簡單說，"函數式編程"是一種"編程範式"（programming paradigm），也就是如何編寫程序的方法論
它具備如下特性：閉包和高階函數、惰性計算、遞歸、函數是"第一等公民"、只用"表達式"

55 談一談箭頭函數與普通函數的區別？

函數體內的this對象，就是定義時所在的對象，而不是使用時所在的對象
不能夠看成構造函數，也就是說，不能夠使用new命令，不然會拋出一個錯誤
不能夠使用arguments對象，該對象在函數體內不存在。若是要用，能夠用Rest參數代替
不能夠使用yield命令，所以箭頭函數不能用做Generator函數

56 談一談函數中this的指向

this的指向在函數定義的時候是肯定不了的，只有函數執行的時候才能肯定this到底指向誰，實際上this的最終指向的是那個調用它的對象
《javascript語言精髓》中大概歸納了4種調用方式：
方法調用模式
函數調用模式
構造器調用模式

 
  graph LR
A-->B

apply/call調用模式

57 異步編程的實現方式

回調函數
- 優勢：簡單、容易理解
- 缺點：不利於維護，代碼耦合高
事件監聽(採用時間驅動模式，取決於某個事件是否發生)：
- 優勢：容易理解，能夠綁定多個事件，每一個事件能夠指定多個回調函數
- 缺點：事件驅動型，流程不夠清晰
發佈/訂閱(觀察者模式)
- 相似於事件監聽，可是能夠經過‘消息中心’，瞭解如今有多少發佈者，多少訂閱者
Promise對象
- 優勢：能夠利用then方法，進行鏈式寫法；能夠書寫錯誤時的回調函數；
- 缺點：編寫和理解，相對比較難
Generator函數
- 優勢：函數體內外的數據交換、錯誤處理機制
- 缺點：流程管理不方便
async函數
- 優勢：內置執行器、更好的語義、更廣的適用性、返回的是Promise、結構清晰。
- 缺點：錯誤處理機制

58 對原生Javascript瞭解程度

數據類型、運算、對象、Function、繼承、閉包、做用域、原型鏈、事件、RegExp、JSON、Ajax、DOM、BOM、內存泄漏、跨域、異步裝載、模板引擎、前端MVC、路由、模塊化、Canvas、ECMAScript

59 Js動畫與CSS動畫區別及相應實現

CSS3的動畫的優勢
- 在性能上會稍微好一些，瀏覽器會對CSS3的動畫作一些優化
- 代碼相對簡單
缺點
- 在動畫控制上不夠靈活
- 兼容性很差
JavaScript的動畫正好彌補了這兩個缺點，控制能力很強，能夠單幀的控制、變換，同時寫得好徹底能夠兼容IE6，而且功能強大。對於一些複雜控制的動畫，使用javascript會比較靠譜。而在實現一些小的交互動效的時候，就多考慮考慮CSS吧

60 JS 數組和對象的遍歷方式，以及幾種方式的比較

一般咱們會用循環的方式來遍歷數組。可是循環是致使js 性能問題的緣由之一。通常咱們會採用下幾種方式來進行數組的遍歷

for in循環
for循環
forEach
- 這裏的 forEach回調中兩個參數分別爲 value，index
- forEach 沒法遍歷對象
- IE不支持該方法；Firefox 和 chrome 支持
- forEach 沒法使用 break，continue 跳出循環，且使用 return 是跳過本次循環
這兩種方法應該很是常見且使用很頻繁。但實際上，這兩種方法都存在性能問題
在方式一中，for-in須要分析出array的每一個屬性，這個操做性能開銷很大。用在 key 已知的數組上是很是不划算的。因此儘可能不要用for-in，除非你不清楚要處理哪些屬性，例如 JSON對象這樣的狀況
在方式2中，循環每進行一次，就要檢查一下數組長度。讀取屬性（數組長度）要比讀局部變量慢，尤爲是當 array 裏存放的都是 DOM 元素，由於每次讀取都會掃描一遍頁面上的選擇器相關元素，速度會大大下降

61 gulp是什麼

gulp是前端開發過程當中一種基於流的代碼構建工具，是自動化項目的構建利器；它不只能對網站資源進行優化，並且在開發過程當中不少重複的任務可以使用正確的工具自動完成
Gulp的核心概念：流
流，簡單來講就是創建在面向對象基礎上的一種抽象的處理數據的工具。在流中，定義了一些處理數據的基本操做，如讀取數據，寫入數據等，程序員是對流進行全部操做的，而不用關心流的另外一頭數據的真正流向
gulp正是經過流和代碼優於配置的策略來儘可能簡化任務編寫的工做
Gulp的特色：
- 易於使用：經過代碼優於配置的策略，gulp 讓簡單的任務簡單，複雜的任務可管理
- 構建快速利用 Node.js 流的威力，你能夠快速構建項目並減小頻繁的 IO 操做
- 易於學習經過最少的 API，掌握 gulp 絕不費力，構建工做盡在掌握：如同一系列流管道

62 說一下Vue的雙向綁定數據的原理

vue.js 則是採用數據劫持結合發佈者-訂閱者模式的方式，經過Object.defineProperty()來劫持各個屬性的setter，getter，在數據變更時發佈消息給訂閱者，觸發相應的監聽回調

63 事件的各個階段

1：捕獲階段 ---> 2：目標階段 ---> 3：冒泡階段
document ---> target目標 ----> document
由此，addEventListener的第三個參數設置爲true和false的區別已經很是清晰了
- true表示該元素在事件的「捕獲階段」（由外往內傳遞時）響應事件
- false表示該元素在事件的「冒泡階段」（由內向外傳遞時）響應事件

64 let var const

let

容許你聲明一個做用域被限制在塊級中的變量、語句或者表達式
let綁定不受變量提高的約束，這意味着let聲明不會被提高到當前
該變量處於從塊開始到初始化處理的「暫存死區」

var

聲明變量的做用域限制在其聲明位置的上下文中，而非聲明變量老是全局的
因爲變量聲明（以及其餘聲明）老是在任意代碼執行以前處理的，因此在代碼中的任意位置聲明變量老是等效於在代碼開頭聲明

const

聲明建立一個值的只讀引用 (即指針)
基本數據當值發生改變時，那麼其對應的指針也將發生改變，故形成 const申明基本數據類型時
再將其值改變時，將會形成報錯，例如 const a = 3 ; a = 5時將會報錯
可是若是是複合類型時，若是隻改變複合類型的其中某個Value項時，將仍是正常使用

65 快速的讓一個數組亂序

var arr = [1,2,3,4,5,6,7,8,9,10];
arr.sort(function(){
    return Math.random() - 0.5;
})
console.log(arr);

66 如何渲染幾萬條數據並不卡住界面

這道題考察瞭如何在不卡住頁面的狀況下渲染數據，也就是說不能一次性將幾萬條都渲染出來，而應該一次渲染部分 DOM，那麼就能夠經過 requestAnimationFrame 來每 16 ms 刷新一次

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <ul>控件</ul>
  <script>
    setTimeout(() => {
      // 插入十萬條數據
      const total = 100000
      // 一次插入 20 條，若是以爲性能很差就減小
      const once = 20
      // 渲染數據總共須要幾回
      const loopCount = total / once
      let countOfRender = 0
      let ul = document.querySelector("ul");
      function add() {
        // 優化性能，插入不會形成迴流
        const fragment = document.createDocumentFragment();
        for (let i = 0; i < once; i++) {
          const li = document.createElement("li");
          li.innerText = Math.floor(Math.random() * total);
          fragment.appendChild(li);
        }
        ul.appendChild(fragment);
        countOfRender += 1;
        loop();
      }
      function loop() {
        if (countOfRender < loopCount) {
          window.requestAnimationFrame(add);
        }
      }
      loop();
    }, 0);
  </script>
</body>
</html>

67 但願獲取到頁面中全部的checkbox怎麼作？

不使用第三方框架

 var domList = document.getElementsByTagName(‘input’)
 var checkBoxList = [];
 var len = domList.length;　　//緩存到局部變量
 while (len--) {　　//使用while的效率會比for循環更高
 　　if (domList[len].type == ‘checkbox’) {
     　　checkBoxList.push(domList[len]);
 　　}
 }

68 怎樣添加、移除、移動、複製、建立和查找節點

建立新節點

createDocumentFragment()    //建立一個DOM片斷 createElement() //建立一個具體的元素 createTextNode() //建立一個文本節點

添加、移除、替換、插入

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

查找

getElementsByTagName()    //經過標籤名稱 getElementsByName() //經過元素的Name屬性的值 getElementById() //經過元素Id，惟一性

69 正則表達式

正則表達式構造函數var reg=new RegExp(「xxx」)與正則表達字面量var reg=//有什麼不一樣？匹配郵箱的正則表達式？

當使用RegExp()構造函數的時候，不只須要轉義引號（即\」表示」），而且還須要雙反斜槓（即\\表示一個\）。使用正則表達字面量的效率更高

郵箱的正則匹配：

var regMail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/;

70 Javascript中callee和caller的做用？

caller是返回一個對函數的引用，該函數調用了當前函數；
callee是返回正在被執行的function函數，也就是所指定的function對象的正文

那麼問題來了？若是一對兔子每個月生一對兔子；一對新生兔，從第二個月起就開始生兔子；假定每對兔子都是一雌一雄，試問一對兔子，第n個月能繁殖成多少對兔子？（使用callee完成）

var result=[];
  function fn(n){  //典型的斐波那契數列
     if(n==1){
          return 1;
     }else if(n==2){
             return 1;
     }else{
          if(result[n]){
                  return result[n];
         }else{
                 //argument.callee()表示fn()
                 result[n]=arguments.callee(n-1)+arguments.callee(n-2);
                 return result[n];
         }
    }
 }

71 window.onload和$(document).ready

原生JS的window.onload與Jquery的$(document).ready(function(){})有什麼不一樣？如何用原生JS實現Jq的ready方法？

window.onload()方法是必須等到頁面內包括圖片的全部元素加載完畢後才能執行。
$(document).ready()是DOM結構繪製完畢後就執行，沒必要等到加載完畢

function ready(fn){
      if(document.addEventListener) {        //標準瀏覽器
          document.addEventListener('DOMContentLoaded', function() {
              //註銷事件, 避免反覆觸發
              document.removeEventListener('DOMContentLoaded',arguments.callee, false);
              fn();            //執行函數
          }, false);
      }else if(document.attachEvent) {        //IE
          document.attachEvent('onreadystatechange', function() {
             if(document.readyState == 'complete') {
                 document.detachEvent('onreadystatechange', arguments.callee);
                 fn();        //函數執行
             }
         });
     }
 };

72 addEventListener()和attachEvent()的區別

addEventListener()是符合W3C規範的標準方法; attachEvent()是IE低版本的非標準方法
addEventListener()支持事件冒泡和事件捕獲; - 而attachEvent()只支持事件冒泡
addEventListener()的第一個參數中,事件類型不須要添加on; attachEvent()須要添加'on'
若是爲同一個元素綁定多個事件, addEventListener()會按照事件綁定的順序依次執行, attachEvent()會按照事件綁定的順序倒序執行

73 獲取頁面全部的checkbox

var resultArr= [];
var input = document.querySelectorAll('input');
for( var i = 0; i < input.length; i++ ) {
    if( input[i].type == 'checkbox' ) {
        resultArr.push( input[i] );
    }
}
//resultArr即中獲取到了頁面中的全部checkbox

74 數組去重方法總結(六種方法)

方法一

雙層循環，外層循環元素，內層循環時比較值
若是有相同的值則跳過，不相同則push進數組

Array.prototype.distinct = function(){
 var arr = this,
  result = [],
  i,
  j,
  len = arr.length;
 for(i = 0; i < len; i++){
  for(j = i + 1; j < len; j++){
   if(arr[i] === arr[j]){
    j = ++i;
   }
  }
  result.push(arr[i]);
 }
 return result;
}
var arra = [1,2,3,4,4,1,1,2,1,1,1];
arra.distinct();    //返回[3,4,2,1]

方法二：利用splice直接在原數組進行操做

雙層循環，外層循環元素，內層循環時比較值
值相同時，則刪去這個值
注意點:刪除元素以後，須要將數組的長度也減1.

Array.prototype.distinct = function (){
 var arr = this,
  i,
  j,
  len = arr.length;
 for(i = 0; i < len; i++){
  for(j = i + 1; j < len; j++){
   if(arr[i] == arr[j]){
    arr.splice(j,1);
    len--;
    j--;
   }
  }
 }
 return arr;
};
var a = [1,2,3,4,5,6,5,3,2,4,56,4,1,2,1,1,1,1,1,1,];
var b = a.distinct();
console.log(b.toString()); //1,2,3,4,5,6,56

優勢：簡單易懂
缺點：佔用內存高，速度慢

方法三：利用對象的屬性不能相同的特色進行去重

Array.prototype.distinct = function (){
 var arr = this,
  i,
  obj = {},
  result = [],
  len = arr.length;
 for(i = 0; i< arr.length; i++){
  if(!obj[arr[i]]){ //若是能查找到，證實數組元素重複了
   obj[arr[i]] = 1;
   result.push(arr[i]);
  }
 }
 return result;
};
var a = [1,2,3,4,5,6,5,3,2,4,56,4,1,2,1,1,1,1,1,1,];
var b = a.distinct();
console.log(b.toString()); //1,2,3,4,5,6,56

方法四：數組遞歸去重

運用遞歸的思想
先排序，而後從最後開始比較，遇到相同，則刪除

Array.prototype.distinct = function (){
 var arr = this,
  len = arr.length;
 arr.sort(function(a,b){  //對數組進行排序才能方便比較
  return a - b;
 })
 function loop(index){
  if(index >= 1){
   if(arr[index] === arr[index-1]){
    arr.splice(index,1);
   }
   loop(index - 1); //遞歸loop函數進行去重
  }
 }
 loop(len-1);
 return arr;
};
var a = [1,2,3,4,5,6,5,3,2,4,56,4,1,2,1,1,1,1,1,1,56,45,56];
var b = a.distinct();
console.log(b.toString());  //1,2,3,4,5,6,45,56

方法五：利用indexOf以及forEach

Array.prototype.distinct = function (){
 var arr = this,
  result = [],
  len = arr.length;
 arr.forEach(function(v, i ,arr){  //這裏利用map，filter方法也能夠實現
  var bool = arr.indexOf(v,i+1);  //從傳入參數的下一個索引值開始尋找是否存在重複
  if(bool === -1){
   result.push(v);
  }
 })
 return result;
};
var a = [1,1,1,1,1,1,1,1,1,2,2,2,2,2,2,3,3,3,3,3,3,3,2,3,3,2,2,1,23,1,23,2,3,2,3,2,3];
var b = a.distinct();
console.log(b.toString()); //1,23,2,3

方法六：利用ES6的set

Set數據結構，它相似於數組，其成員的值都是惟一的。
利用Array.from將Set結構轉換成數組

function dedupe(array){
 return Array.from(new Set(array));
}
dedupe([1,1,2,3]) //[1,2,3]

拓展運算符(...)內部使用for...of循環

let arr = [1,2,3,3];
let resultarr = [...new Set(arr)];
console.log(resultarr); //[1,2,3]

75 （設計題）想實現一個對頁面某個節點的拖曳？如何作？（使用原生JS）

給須要拖拽的節點綁定mousedown, mousemove, mouseup事件
mousedown事件觸發後，開始拖拽
mousemove時，須要經過event.clientX和clientY獲取拖拽位置，並實時更新位置
mouseup時，拖拽結束
須要注意瀏覽器邊界的狀況

76 Javascript全局函數和全局變量

全局變量

Infinity 表明正的無窮大的數值。
NaN 指示某個值是否是數字值。
undefined 指示未定義的值。

全局函數

decodeURI() 解碼某個編碼的 URI。
decodeURIComponent() 解碼一個編碼的 URI 組件。
`encodeURI() 把字符串編碼爲 URI。
encodeURIComponent() 把字符串編碼爲 URI 組件。
escape() 對字符串進行編碼。
eval() 計算 JavaScript 字符串，並把它做爲腳本代碼來執行。
isFinite() 檢查某個值是否爲有窮大的數。
isNaN() 檢查某個值是不是數字。
Number() 把對象的值轉換爲數字。
parseFloat() 解析一個字符串並返回一個浮點數。
parseInt() 解析一個字符串並返回一個整數。
String() 把對象的值轉換爲字符串。
unescape() 對由escape() 編碼的字符串進行解碼

77 使用js實現一個持續的動畫效果

定時器思路

var e = document.getElementById('e') var flag = true; var left = 0; setInterval(() => { left == 0 ? flag = true : left == 100 ? flag = false : '' flag ? e.style.left = ` ${left++}px` : e.style.left = ` ${left--}px` }, 1000 / 60)

requestAnimationFrame

//兼容性處理 window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback){ window.setTimeout(callback, 1000 / 60); }; })(); var e = document.getElementById("e"); var flag = true; var left = 0; function render() { left == 0 ? flag = true : left == 100 ? flag = false : ''; flag ? e.style.left = ` ${left++}px` : e.style.left = ` ${left--}px`; } (function animloop() { render(); requestAnimFrame(animloop); })();

使用css實現一個持續的動畫效果

animation:mymove 5s infinite;
@keyframes mymove { from {top:0px;} to {top:200px;} }

animation-name
規定須要綁定到選擇器的 keyframe名稱。
animation-duration
規定完成動畫所花費的時間，以秒或毫秒計。
animation-timing-function
規定動畫的速度曲線。
animation-delay
規定在動畫開始以前的延遲。
animation-iteration-count
規定動畫應該播放的次數。
animation-direction 規定是否應該輪流反向播放動畫

78 封裝一個函數，參數是定時器的時間，.then執行回調函數

function sleep (time) { return new Promise((resolve) => setTimeout(resolve, time)); }

79 怎麼判斷兩個對象相等？

obj={
    a:1, b:2 } obj2={ a:1, b:2 } obj3={ a:1, b:'2' }

能夠轉換爲字符串來判斷

JSON.stringify(obj)==JSON.stringify(obj2);//true JSON.stringify(obj)==JSON.stringify(obj3);//false

80 項目作過哪些性能優化？

減小 HTTP` 請求數
減小 DNS 查詢
使用 CDN
避免重定向
圖片懶加載
減小 DOM 元素數量
減小DOM 操做
使用外部 JavaScript 和 CSS
壓縮 JavaScript 、 CSS 、字體、圖片等
優化 CSS Sprite
使用 iconfont
字體裁剪
多域名分發劃份內容到不一樣域名
儘可能減小 iframe 使用
避免圖片 src 爲空
把樣式表放在link 中
把腳本放在頁面底部

81 瀏覽器緩存

瀏覽器緩存分爲強緩存和協商緩存。當客戶端請求某個資源時，獲取緩存的流程以下

先根據這個資源的一些 http header 判斷它是否命中強緩存，若是命中，則直接從本地獲取緩存資源，不會發請求到服務器；
當強緩存沒有命中時，客戶端會發送請求到服務器，服務器經過另外一些request header驗證這個資源是否命中協商緩存，稱爲http再驗證，若是命中，服務器將請求返回，但不返回資源，而是告訴客戶端直接從緩存中獲取，客戶端收到返回後就會從緩存中獲取資源；
強緩存和協商緩存共同之處在於，若是命中緩存，服務器都不會返回資源；
區別是，強緩存不對發送請求到服務器，但協商緩存會。
當協商緩存也沒命中時，服務器就會將資源發送回客戶端。
當 ctrl+f5 強制刷新網頁時，直接從服務器加載，跳過強緩存和協商緩存；
當 f5刷新網頁時，跳過強緩存，可是會檢查協商緩存；

強緩存

Expires（該字段是 http1.0 時的規範，值爲一個絕對時間的 GMT 格式的時間字符串，表明緩存資源的過時時間）
Cache-Control:max-age（該字段是 http1.1的規範，強緩存利用其 max-age 值來判斷緩存資源的最大生命週期，它的值單位爲秒）

協商緩存

Last-Modified（值爲資源最後更新時間，隨服務器response返回）
If-Modified-Since（經過比較兩個時間來判斷資源在兩次請求期間是否有過修改，若是沒有修改，則命中協商緩存）
ETag（表示資源內容的惟一標識，隨服務器response返回）
If-None-Match（服務器經過比較請求頭部的If-None-Match與當前資源的ETag是否一致來判斷資源是否在兩次請求之間有過修改，若是沒有修改，則命中協商緩存）

82 WebSocket

因爲 http 存在一個明顯的弊端（消息只能有客戶端推送到服務器端，而服務器端不能主動推送到客戶端），致使若是服務器若是有連續的變化，這時只能使用輪詢，而輪詢效率太低，並不適合。因而 WebSocket被髮明出來

相比與 http 具備如下有點

支持雙向通訊，實時性更強；
能夠發送文本，也能夠二進制文件；
協議標識符是 ws，加密後是 wss ；
較少的控制開銷。鏈接建立後，ws客戶端、服務端進行數據交換時，協議控制的數據包頭部較小。在不包含頭部的狀況下，服務端到客戶端的包頭只有2~10字節（取決於數據包長度），客戶端到服務端的的話，須要加上額外的4字節的掩碼。而HTTP協議每次通訊都須要攜帶完整的頭部；
支持擴展。ws協議定義了擴展，用戶能夠擴展協議，或者實現自定義的子協議。（好比支持自定義壓縮算法等）
無跨域問題。

實現比較簡單，服務端庫如 socket.io、ws，能夠很好的幫助咱們入門。而客戶端也只須要參照 api實現便可

83 儘量多的說出你對 Electron 的理解

最最重要的一點，electron 其實是一個套了 Chrome 的 node程序

因此應該是從兩個方面說開來

Chrome （無各類兼容性問題）；
Node（Node 能作的它也能作）

84 深淺拷貝

淺拷貝

Object.assign
或者展開運算符

深拷貝

能夠經過 JSON.parse(JSON.stringify(object)) 來解決

let a = { age: 1, jobs: { first: 'FE' } } let b = JSON.parse(JSON.stringify(a)) a.jobs.first = 'native' console.log(b.jobs.first) // FE

該方法也是有侷限性的

會忽略 undefined
不能序列化函數
不能解決循環引用的對象

85 防抖/節流

防抖

在滾動事件中須要作個複雜計算或者實現一個按鈕的防二次點擊操做。能夠經過函數防抖動來實現

// 使用 underscore 的源碼來解釋防抖動 /**  * underscore 防抖函數，返回函數連續調用時，空閒時間必須大於或等於 wait，func 纔會執行  *  * @param {function} func 回調函數  * @param {number} wait 表示時間窗口的間隔  * @param {boolean} immediate 設置爲ture時，是否當即調用函數  * @return {function} 返回客戶調用函數  */ _.debounce = function(func, wait, immediate) { var timeout, args, context, timestamp, result; var later = function() { // 如今和上一次時間戳比較 var last = _.now() - timestamp; // 若是當前間隔時間少於設定時間且大於0就從新設置定時器 if (last < wait && last >= 0) { timeout = setTimeout(later, wait - last); } else { // 不然的話就是時間到了執行回調函數 timeout = null; if (!immediate) { result = func.apply(context, args); if (!timeout) context = args = null; } } }; return function() { context = this; args = arguments; // 得到時間戳 timestamp = _.now(); // 若是定時器不存在且當即執行函數 var callNow = immediate && !timeout; // 若是定時器不存在就建立一個 if (!timeout) timeout = setTimeout(later, wait); if (callNow) { // 若是須要當即執行函數的話 經過 apply 執行 result = func.apply(context, args); context = args = null; } return result; }; };

總體函數實現

對於按鈕防點擊來講的實現

開始一個定時器，只要我定時器還在，無論你怎麼點擊都不會執行回調函數。一旦定時器結束並設置爲 null，就能夠再次點擊了
對於延時執行函數來講的實現：每次調用防抖動函數都會判斷本次調用和以前的時間間隔，若是小於須要的時間間隔，就會從新建立一個定時器，而且定時器的延時爲設定時間減去以前的時間間隔。一旦時間到了，就會執行相應的回調函數

節流

防抖動和節流本質是不同的。防抖動是將屢次執行變爲最後一次執行，節流是將屢次執行變成每隔一段時間執行

/**
 * underscore 節流函數，返回函數連續調用時，func 執行頻率限定爲 次 / wait  *  * @param {function} func 回調函數  * @param {number} wait 表示時間窗口的間隔  * @param {object} options 若是想忽略開始函數的的調用，傳入{leading: false}。  * 若是想忽略結尾函數的調用，傳入{trailing: false}  * 二者不能共存，不然函數不能執行  * @return {function} 返回客戶調用函數  */ _.throttle = function(func, wait, options) { var context, args, result; var timeout = null; // 以前的時間戳 var previous = 0; // 若是 options 沒傳則設爲空對象 if (!options) options = {}; // 定時器回調函數 var later = function() { // 若是設置了 leading，就將 previous 設爲 0 // 用於下面函數的第一個 if 判斷 previous = options.leading === false ? 0 : _.now(); // 置空一是爲了防止內存泄漏，二是爲了下面的定時器判斷 timeout = null; result = func.apply(context, args); if (!timeout) context = args = null; }; return function() { // 得到當前時間戳 var now = _.now(); // 首次進入前者確定爲 true // 若是須要第一次不執行函數 // 就將上次時間戳設爲當前的 // 這樣在接下來計算 remaining 的值時會大於0 if (!previous && options.leading === false) previous = now; // 計算剩餘時間 var remaining = wait - (now - previous); context = this; args = arguments; // 若是當前調用已經大於上次調用時間 + wait // 或者用戶手動調了時間 // 若是設置了 trailing，只會進入這個條件 // 若是沒有設置 leading，那麼第一次會進入這個條件 // 還有一點，你可能會以爲開啓了定時器那麼應該不會進入這個 if 條件了 // 其實仍是會進入的，由於定時器的延時 // 並非準確的時間，極可能你設置了2秒 // 可是他須要2.2秒才觸發，這時候就會進入這個條件 if (remaining <= 0 || remaining > wait) { // 若是存在定時器就清理掉不然會調用二次回調 if (timeout) { clearTimeout(timeout); timeout = null; } previous = now; result = func.apply(context, args); if (!timeout) context = args = null; } else if (!timeout && options.trailing !== false) { // 判斷是否設置了定時器和 trailing // 沒有的話就開啓一個定時器 // 而且不能不能同時設置 leading 和 trailing timeout = setTimeout(later, remaining); } return result; }; };

86 談談變量提高？

當執行 JS 代碼時，會生成執行環境，只要代碼不是寫在函數中的，就是在全局執行環境中，函數中的代碼會產生函數執行環境，只此兩種執行環境

接下來讓咱們看一個老生常談的例子，var

b() // call b console.log(a) // undefined var a = 'Hello world' function b() { console.log('call b') }

::: tip 變量提高
這是由於函數和變量提高的緣由。一般提高的解釋是說將聲明的代碼移動到了頂部，這其實沒有什麼錯誤，便於你們理解。可是更準確的解釋應該是：在生成執行環境時，會有兩個階段。第一個階段是建立的階段，JS 解釋器會找出須要提高的變量和函數，而且給他們提早在內存中開闢好空間，函數的話會將整個函數存入內存中，變量只聲明而且賦值爲 undefined，因此在第二個階段，也就是代碼執行階段，咱們能夠直接提早使用
:::

在提高的過程當中，相同的函數會覆蓋上一個函數，而且函數優先於變量提高

b() // call b second function b() { console.log('call b fist') } function b() { console.log('call b second') } var b = 'Hello world'

複製代碼var 會產生不少錯誤，因此在 ES6中引入了 let。let 不能在聲明前使用，可是這並非常說的 let 不會提高，let 提高了，在第一階段內存也已經爲他開闢好了空間，可是由於這個聲明的特性致使了並不能在聲明前使用

4、jQuery

1 你以爲jQuery或zepto源碼有哪些寫的好的地方

jquery源碼封裝在一個匿名函數的自執行環境中，有助於防止變量的全局污染，而後經過傳入window對象參數，能夠使window對象做爲局部變量使用，好處是當jquery中訪問window對象的時候，就不用將做用域鏈退回到頂層做用域了，從而能夠更快的訪問window對象。一樣，傳入undefined參數，能夠縮短查找undefined時的做用域鏈

 (function( window, undefined ) { //用一個函數域包起來，就是所謂的沙箱 //在這裏邊var定義的變量，屬於這個函數域內的局部變量，避免污染全局 //把當前沙箱須要的外部變量經過函數參數引入進來 //只要保證參數對內提供的接口的一致性，你還能夠隨意替換傳進來的這個參數 window.jQuery = window.$ = jQuery; })( window );

jquery將一些原型屬性和方法封裝在了jquery.prototype中，爲了縮短名稱，又賦值給了jquery.fn，這是很形象的寫法
有一些數組或對象的方法常常能使用到，jQuery將其保存爲局部變量以提升訪問速度
jquery實現的鏈式調用能夠節約代碼，所返回的都是同一個對象，能夠提升代碼效率

2 jQuery 的實現原理

(function(window, undefined) {})(window);
jQuery 利用 JS 函數做用域的特性，採用當即調用表達式包裹了自身，解決命名空間和變量污染問題
window.jQuery = window.$ = jQuery;
在閉包當中將 jQuery 和 $ 綁定到 window 上，從而將 jQuery 和 $ 暴露爲全局變量

3 `jQuery.fn` 的 `init` 方法返回的 `this` 指的是什麼對象

jQuery.fn 的 init 方法返回的 this 就是 jQuery 對象
用戶使用 jQuery() 或 $() 便可初始化 jQuery 對象，不須要動態的去調用 init 方法

4 jQuery.extend 與 jQuery.fn.extend 的區別

$.fn.extend() 和 $.extend() 是 jQuery 爲擴展插件提拱了兩個方法
$.extend(object); // 爲jQuery添加「靜態方法」（工具方法）

$.extend({ 　　min: function(a, b) { return a < b ? a : b; }, 　　max: function(a, b) { return a > b ? a : b; } }); $.min(2,3); // 2 $.max(4,5); // 5

$.extend([true,] targetObject, object1[, object2]); // 對targt對象進行擴展

var settings = {validate:false, limit:5}; var options = {validate:true, name:"bar"}; $.extend(settings, options); // 注意：不支持第一個參數傳 false // settings == {validate:true, limit:5, name:"bar"}

$.fn.extend(json); // 爲jQuery添加「成員函數」（實例方法）

$.fn.extend({ alertValue: function() { $(this).click(function(){ alert($(this).val()); }); } }); $("#email").alertValue();

5 jQuery 的屬性拷貝(extend)的實現原理是什麼，如何實現深拷貝

淺拷貝（只複製一份原始對象的引用）
var newObject = $.extend({}, oldObject);
深拷貝（對原始對象屬性所引用的對象進行進行遞歸拷貝）
var newObject = $.extend(true, {}, oldObject);

6 jQuery 的隊列是如何實現的

jQuery 核心中有一組隊列控制方法，由 queue()/dequeue()/clearQueue() 三個方法組成。
主要應用於 animate()，ajax，其餘要按時間順序執行的事件中

var func1 = function(){alert('事件1');} var func2 = function(){alert('事件2');} var func3 = function(){alert('事件3');} var func4 = function(){alert('事件4');} // 入棧隊列事件 $('#box').queue("queue1", func1); // push func1 to queue1 $('#box').queue("queue1", func2); // push func2 to queue1 // 替換隊列事件 $('#box').queue("queue1", []); // delete queue1 with empty array $('#box').queue("queue1", [func3, func4]); // replace queue1 // 獲取隊列事件（返回一個函數數組） $('#box').queue("queue1"); // [func3(), func4()] // 出棧隊列事件並執行 $('#box').dequeue("queue1"); // return func3 and do func3 $('#box').dequeue("queue1"); // return func4 and do func4 // 清空整個隊列 $('#box').clearQueue("queue1"); // delete queue1 with clearQueue

7 jQuery 中的 bind(), live(), delegate(), on()的區別

bind 直接綁定在目標元素上
live 經過冒泡傳播事件，默認document上，支持動態數據
delegate 更精確的小範圍使用事件代理，性能優於 live
on 是最新的1.9版本整合了以前的三種方式的新事件綁定機制

8 是否知道自定義事件

事件即「發佈/訂閱」模式，自定義事件即「消息發佈」，事件的監聽即「訂閱訂閱」
JS 原生支持自定義事件，示例：

  document.createEvent(type); // 建立事件 event.initEvent(eventType, canBubble, prevent); // 初始化事件 target.addEventListener('dataavailable', handler, false); // 監聽事件 target.dispatchEvent(e); // 觸發事件

jQuery 裏的fire 函數用於調用jQuery自定義事件列表中的事件

9 jQuery 經過哪一個方法和 Sizzle 選擇器結合的

Sizzle 選擇器採起 Right To Left 的匹配模式，先搜尋全部匹配標籤，再判斷它的父節點
jQuery 經過 $(selecter).find(selecter); 和 Sizzle 選擇器結合

10 jQuery 中如何將數組轉化爲 JSON 字符串，而後再轉化回來

// 經過原生 JSON.stringify/JSON.parse 擴展 jQuery 實現 $.array2json = function(array) { return JSON.stringify(array); } $.json2array = function(array) { // $.parseJSON(array); // 3.0 開始，已過期 return JSON.parse(array); } // 調用 var json = $.array2json(['a', 'b', 'c']); var array = $.json2array(json);

11 jQuery 一個對象能夠同時綁定多個事件，這是如何實現的

  $("#btn").on("mouseover mouseout", func); $("#btn").on({ mouseover: func1, mouseout: func2, click: func3 });

12 針對 jQuery 的優化方法

緩存頻繁操做DOM對象
儘可能使用id選擇器代替class選擇器
老是從#id選擇器來繼承
儘可能使用鏈式操做
使用時間委託 on綁定事件
採用jQuery的內部函數data()來存儲數據
使用最新版本的 jQuery

13 jQuery 的 slideUp 動畫，當鼠標快速連續觸發, 動畫會滯後反覆執行，該如何處理呢

在觸發元素上的事件設置爲延遲處理：使用 JS 原生 setTimeout 方法
在觸發元素的事件時預先中止全部的動畫，再執行相應的動畫事件：$('.tab').stop().slideUp();

14 jQuery UI 如何自定義組件

經過向 $.widget() 傳遞組件名稱和一個原型對象來完成
$.widget("ns.widgetName", [baseWidget], widgetPrototype);

15 jQuery 與 jQuery UI、jQuery Mobile 區別

jQuery 是 JS 庫，兼容各類PC瀏覽器，主要用做更方便地處理 DOM、事件、動畫、AJAX
jQuery UI 是創建在 jQuery 庫上的一組用戶界面交互、特效、小部件及主題
jQuery Mobile 以 jQuery 爲基礎，用於建立「移動Web應用」的框架

16 jQuery 和 Zepto 的區別？各自的使用場景

jQuery 主要目標是PC的網頁中，兼容所有主流瀏覽器。在移動設備方面，單獨推出 `jQuery Mobile
Zepto從一開始就定位移動設備，相對更輕量級。它的API 基本兼容jQuery`，但對PC瀏覽器兼容不理想

17 jQuery對象的特色

只有 JQuery對象才能使用 JQuery 方法
JQuery 對象是一個數組對象

5、Bootstrap

1 什麼是Bootstrap？以及爲何要使用Bootstrap？

Bootstrap 是一個用於快速開發 Web應用程序和網站的前端框架。Bootstrap是基於 HTML、CSS、JAVASCRIPT 的

Bootstrap具備移動設備優先、瀏覽器支持良好、容易上手、響應式設計等優勢，因此Bootstrap被普遍應用

2 使用Bootstrap時，要聲明的文檔類型是什麼？以及爲何要這樣聲明？

使用Bootstrap時，須要使用 HTML5 文檔類型（Doctype）。<!DOCTYPE html>
由於Bootstrap使用了一些 HTML5 元素和 CSS 屬性，若是在 Bootstrap建立的網頁開頭不使用 HTML5的文檔類型（Doctype），可能會面臨一些瀏覽器顯示不一致的問題，甚至可能面臨一些特定情境下的不一致，以至於代碼不能經過 W3C 標準的驗證

3 什麼是Bootstrap網格系統

Bootstrap 包含了一個響應式的、移動設備優先的、不固定的網格系統，能夠隨着設備或視口大小的增長而適當地擴展到 12 列。它包含了用於簡單的佈局選項的預約義類，也包含了用於生成更多語義佈局的功能強大的混合類

響應式網格系統隨着屏幕或視口（viewport）尺寸的增長，系統會自動分爲最多12列。

4 Bootstrap 網格系統（Grid System）的工做原理

（1）行必須放置在 .container class 內，以便得到適當的對齊（alignment）和內邊距（padding）。
（2）使用行來建立列的水平組。
（3）內容應該放置在列內，且惟有列能夠是行的直接子元素。
（4）預約義的網格類，好比 .row 和 .col-xs-4，可用於快速建立網格佈局。LESS 混合類可用於更多語義佈局。
（5）列經過內邊距（padding）來建立列內容之間的間隙。該內邊距是經過 .rows 上的外邊距（margin）取負，表示第一列和最後一列的行偏移。
（6）網格系統是經過指定您想要橫跨的十二個可用的列來建立的。例如，要建立三個相等的列，則使用三個 .col-xs-4

5 對於各種尺寸的設備，Bootstrap設置的class前綴分別是什麼

超小設備手機（<768px）：.col-xs-
小型設備平板電腦（>=768px）：.col-sm-
中型設備臺式電腦（>=992px）：.col-md-
大型設備臺式電腦（>=1200px）：.col-lg-

6 Bootstrap 網格系統列與列之間的間隙寬度是多少

間隙寬度爲30px（一個列的每邊分別是15px）

7 若是須要在一個標題的旁邊建立副標題，能夠怎樣操做

在元素兩旁添加<small>，或者添加.small的class

8 用Bootstrap，如何設置文字的對齊方式？

class="text-center" 設置居中文本
class="text-right" 設置向右對齊文本
class="text-left" 設置向左對齊文本

9 Bootstrap如何設置響應式表格？

增長class="table-responsive"

10 使用Bootstrap建立垂直表單的基本步驟？

（1）向父<form>元素添加role="form"；
（2）把標籤和控件放在一個帶有class="form-group"的<div>中，這是獲取最佳間距所必需的；
（3）向全部的文本元素<input>、<textarea>、<select>添加class="form-control"

11 使用Bootstrap建立水平表單的基本步驟？

（1）向父<form>元素添加class="form-horizontal"；
（2）把標籤和控件放在一個帶有class="form-group"的<div>中；
（3）向標籤添加class="control-label"。

12 使用Bootstrap如何建立表單控件的幫助文本？

增長class="help-block"的span標籤或p標籤。

13 使用Bootstrap激活或禁用按鈕要如何操做？

激活按鈕：給按鈕增長.active的class
禁用按鈕：給按鈕增長disabled="disabled"的屬性

14 Bootstrap有哪些關於的class？

（1）.img-rounded 爲圖片添加圓角
（2）.img-circle 將圖片變爲圓形
（3）.img-thumbnail 縮略圖功能
（4）.img-responsive 圖片響應式 (將很好地擴展到父元素)

15 Bootstrap中有關元素浮動及清除浮動的class？

（1）class="pull-left" 元素浮動到左邊
（2）class="pull-right" 元素浮動到右邊
（3）class="clearfix" 清除浮動

16 除了屏幕閱讀器外，其餘設備上隱藏元素的class？

`class="sr-only"``

17 Bootstrap如何製做下拉菜單？

（1）將下拉菜單包裹在class="dropdown"的<div>中；
（2）在觸發下拉菜單的按鈕中添加：class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown"
（3）在包裹下拉菜單的ul中添加：class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"
（4）在下拉菜單的列表項中添加：role="presentation"。其中，下拉菜單的標題要添加class="dropdown-header"，選項部分要添加tabindex="-1"。

18 Bootstrap如何製做按鈕組？以及水平按鈕組和垂直按鈕組的優先級？

（1）用class="btn-group"的<div>去包裹按鈕組；class="btn-group-vertical"可設置垂直按鈕組。
（2）btn-group的優先級高於btn-group-vertical的優先級。

19 Bootstrap如何設置按鈕的下拉菜單？

在一個 .btn-group 中放置按鈕和下拉菜單便可。

20 Bootstrap中的輸入框組如何製做？

（1）把前綴或者後綴元素放在一個帶有class="input-group"中的<div>中
（2）在該<div>內，在class="input-group-addon"的<span>裏面放置額外的內容；
（3）把<span>放在<input>元素的前面或後面。

21 Bootstrap中的導航都有哪些？

（1）導航元素：有class="nav nav-tabs"的標籤頁導航，還有class="nav nav-pills"的膠囊式標籤頁導航；
（2）導航欄：class="navbar navbar-default" role="navigation"；
（3）麪包屑導航：class="breadcrumb"

22 Bootstrap中設置分頁的class？

默認的分頁：class="pagination"
默認的翻頁：class="pager"

23 Bootstrap中顯示標籤的class？

class="label"

24 Bootstrap中如何製做徽章？

<span class="badge">26</span>

25 Bootstrap中超大屏幕的做用是什麼？

設置class="jumbotron"能夠製做超大屏幕，該組件能夠增長標題的大小並增長更多的外邊距

6、webpack相關

1 打包體積優化思路

提取第三方庫或經過引用外部文件的方式引入第三方庫
代碼壓縮插件UglifyJsPlugin
服務器啓用gzip壓縮
按需加載資源文件 require.ensure
優化devtool中的source-map
剝離css文件，單獨打包
去除沒必要要插件，一般就是開發環境與生產環境用同一套配置文件致使

2 打包效率

開發環境採用增量構建，啓用熱更新
開發環境不作無心義的工做如提取css計算文件hash等
配置devtool
選擇合適的loader
個別loader開啓cache 如babel-loader
第三方庫採用引入方式
提取公共代碼
優化構建時的搜索路徑指明須要構建目錄及不須要構建目錄
模塊化引入須要的部分

3 Loader

編寫一個loader

loader就是一個node模塊，它輸出了一個函數。當某種資源須要用這個loader轉換時，這個函數會被調用。而且，這個函數能夠經過提供給它的this上下文訪問Loader API。
reverse-txt-loader

// 定義 module.exports = function(src) { //src是原文件內容（abcde），下面對內容進行處理，這裏是反轉 var result = src.split('').reverse().join(''); //返回JavaScript源碼，必須是String或者Buffer return `module.exports = '${result}'`; } //使用 { test: /\.txt$/, use: [ { './path/reverse-txt-loader' } ] },

7、編程題

1 寫一個通用的事件偵聽器函數

 // event(事件)工具集，來源：github.com/markyun markyun.Event = { // 視能力分別使用dom0||dom2||IE方式 來綁定事件 // 參數： 操做的元素,事件名稱 ,事件處理程序 addEvent : function(element, type, handler) { if (element.addEventListener) { //事件類型、須要執行的函數、是否捕捉 element.addEventListener(type, handler, false); } else if (element.attachEvent) { element.attachEvent('on' + type, function() { handler.call(element); }); } else { element['on' + type] = handler; } }, // 移除事件 removeEvent : function(element, type, handler) { if (element.removeEventListener) { element.removeEventListener(type, handler, false); } else if (element.datachEvent) { element.detachEvent('on' + type, handler); } else { element['on' + type] = null; } }, // 阻止事件 (主要是事件冒泡，由於IE不支持事件捕獲) stopPropagation : function(ev) { if (ev.stopPropagation) { ev.stopPropagation(); } else { ev.cancelBubble = true; } }, // 取消事件的默認行爲 preventDefault : function(event) { if (event.preventDefault) { event.preventDefault(); } else { event.returnValue = false; } }, // 獲取事件目標 getTarget : function(event) { return event.target || event.srcElement; }

2 如何判斷一個對象是否爲數組

function isArray(arg) { if (typeof arg === 'object') { return Object.prototype.toString.call(arg) === '[object Array]'; } return false; }

3 冒泡排序

每次比較相鄰的兩個數，若是後一個比前一個小，換位置

var arr = [3, 1, 4, 6, 5, 7, 2]; function bubbleSort(arr) { for (var i = 0; i < arr.length - 1; i++) { for(var j = 0; j < arr.length - 1; j++) { if(arr[j + 1] < arr[j]) { var temp; temp = arr[j]; arr[j] = arr[j + 1]; arr[j + 1] = temp; } } } return arr; } console.log(bubbleSort(arr));

4 快速排序

採用二分法，取出中間數，數組每次和中間數比較，小的放到左邊，大的放到右邊

var arr = [3, 1, 4, 6, 5, 7, 2]; function quickSort(arr) { if(arr.length == 0) { return []; // 返回空數組 } var cIndex = Math.floor(arr.length / 2); var c = arr.splice(cIndex, 1); var l = []; var r = []; for (var i = 0; i < arr.length; i++) { if(arr[i] < c) { l.push(arr[i]); } else { r.push(arr[i]); } } return quickSort(l).concat(c, quickSort(r)); } console.log(quickSort(arr));

5 編寫一個方法求一個字符串的字節長度

假設：一個英文字符佔用一個字節，一箇中文字符佔用兩個字節

function GetBytes(str){ var len = str.length; var bytes = len; for(var i=0; i<len; i++){ if (str.charCodeAt(i) > 255) bytes++; } return bytes; } alert(GetBytes("你好,as"));

6 bind的用法，以及如何實現bind的函數和須要注意的點

bind的做用與call和apply相同，區別是call和apply是當即調用函數，而bind是返回了一個函數，須要調用的時候再執行。
一個簡單的bind函數實現以下

Function.prototype.bind = function(ctx) { var fn = this; return function() { fn.apply(ctx, arguments); }; };

7 實現一個函數clone

能夠對JavaScript中的5種主要的數據類型,包括Number、String、Object、Array、Boolean）進行值復

考察點1：對於基本數據類型和引用數據類型在內存中存放的是值仍是指針這一區別是否清楚
考察點2：是否知道如何判斷一個變量是什麼類型的
考察點3：遞歸算法的設計

// 方法一：
  Object.prototype.clone = function(){
          var o = this.constructor === Array ? [] : {};
          for(var e in this){
                  o[e] = typeof this[e] === "object" ? this[e].clone() : this[e];
          }
          return o;
  }

 //方法二：
   /**
      * 克隆一個對象
      * @param Obj
      * @returns
      */
     function clone(Obj) {   
         var buf;   
         if (Obj instanceof Array) {   
             buf = [];                    //建立一個空的數組
             var i = Obj.length;   
             while (i--) {   
                 buf[i] = clone(Obj[i]);   
             }   
             return buf;    
         }else if (Obj instanceof Object){   
             buf = {};                   //建立一個空對象
             for (var k in Obj) {           //爲這個對象添加新的屬性
                 buf[k] = clone(Obj[k]);   
             }   
             return buf;   
         }else{                         //普通變量直接賦值
             return Obj;   
         }   
     }

8 下面這個ul，如何點擊每一列的時候alert其index

�考察閉包

 <ul id=」test」> <li>這是第一條</li> <li>這是第二條</li> <li>這是第三條</li> </ul>

  // 方法一： var lis=document.getElementById('2223').getElementsByTagName('li'); for(var i=0;i<3;i++) { lis[i].index=i; lis[i].onclick=function(){ alert(this.index); } //方法二： var lis=document.getElementById('2223').getElementsByTagName('li'); for(var i=0;i<3;i++) { lis[i].index=i; lis[i].onclick=(function(a){ return function() { alert(a); } })(i); }

9 定義一個log方法，讓它能夠代理console.log的方法

可行的方法一：

 function log(msg)　{ console.log(msg); } log("hello world!") // hello world!

若是要傳入多個參數呢？顯然上面的方法不能知足要求，因此更好的方法是：

 function log(){ console.log.apply(console, arguments); };

10 輸出今天的日期

以YYYY-MM-DD的方式，好比今天是2014年9月26日，則輸出2014-09-26

var d = new Date(); // 獲取年，getFullYear()返回4位的數字 var year = d.getFullYear(); // 獲取月，月份比較特殊，0是1月，11是12月 var month = d.getMonth() + 1; // 變成兩位 month = month < 10 ? '0' + month : month; // 獲取日 var day = d.getDate(); day = day < 10 ? '0' + day : day; alert(year + '-' + month + '-' + day);

11 用js實現隨機選取10–100之間的10個數字，存入一個數組，並排序

var iArray = []; funtion getRandom(istart, iend){ var iChoice = istart - iend +1; return Math.floor(Math.random() * iChoice + istart; } for(var i=0; i<10; i++){ iArray.push(getRandom(10,100)); } iArray.sort();

12 寫一段JS程序提取URL中的各個GET參數

有這樣一個URL：http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e，請寫一段JS程序提取URL中的各個GET參數(參數名和參數個數不肯定)，將其按key-value形式返回到一個json結構中，如{a:’1′, b:’2′, c:」, d:’xxx’, e:undefined}

function serilizeUrl(url) { var result = {}; url = url.split("?")[1]; var map = url.split("&"); for(var i = 0, len = map.length; i < len; i++) { result[map[i].split("=")[0]] = map[i].split("=")[1]; } return result; }

13 寫一個`function`，清除字符串先後的空格

使用自帶接口trim()，考慮兼容性：

if (!String.prototype.trim) { String.prototype.trim = function() { return this.replace(/^\s+/, "").replace(/\s+$/,""); } } // test the function var str = " \t\n test string ".trim(); alert(str == "test string"); // alerts "true"

14 實現每隔一秒鐘輸出1,2,3...數字

for(var i=0;i<10;i++){ (function(j){ setTimeout(function(){ console.log(j+1) },j*1000) })(i) }

8、其餘

1 負載均衡

多臺服務器共同協做，不讓其中某一臺或幾臺超額工做，發揮服務器的最大做用

http重定向負載均衡：調度者根據策略選擇服務器以302響應請求，缺點只有第一次有效果，後續操做維持在該服務器
dns負載均衡：解析域名時，訪問多個ip服務器中的一個（可監控性較弱）
反向代理負載均衡：訪問統一的服務器，由服務器進行調度訪問實際的某個服務器，對統一的服務器要求大，性能受到服務器羣的數量

2 CDN

內容分發網絡，基本思路是儘量避開互聯網上有可能影響數據傳輸速度和穩定性的瓶頸和環節，使內容傳輸的更快、更穩定。

3 內存泄漏

定義：程序中己動態分配的堆內存因爲某種緣由程序未釋放或沒法釋放引起的各類問題。

js中可能出現的內存泄漏狀況

結果：變慢，崩潰，延遲大等，緣由：

全局變量
dom清空時，還存在引用
ie中使用閉包
定時器未清理
子元素存在引發的內存泄露

避免策略

減小沒必要要的全局變量，或者生命週期較長的對象，及時對無用的數據進行垃圾回收；
注意程序邏輯，避免「死循環」之類的；
避免建立過多的對象原則：不用了的東西要及時歸還。
減小層級過多的引用

4 babel原理

ES六、7代碼輸入 -> babylon進行解析 -> 獲得AST（抽象語法樹）-> plugin用babel-traverse對AST樹進行遍歷轉譯 ->獲得新的AST樹->用babel-generator經過AST樹生成ES5代碼

5 js自定義事件

三要素： document.createEvent() event.initEvent() element.dispatchEvent()

// (en:自定義事件名稱，fn:事件處理函數，addEvent:爲DOM元素添加自定義事件，triggerEvent:觸發自定義事件) window.onload = function(){ var demo = document.getElementById("demo"); demo.addEvent("test",function(){console.log("handler1")}); demo.addEvent("test",function(){console.log("handler2")}); demo.onclick = function(){ this.triggerEvent("test"); } } Element.prototype.addEvent = function(en,fn){ this.pools = this.pools || {}; if(en in this.pools){ this.pools[en].push(fn); }else{ this.pools[en] = []; this.pools[en].push(fn); } } Element.prototype.triggerEvent = function(en){ if(en in this.pools){ var fns = this.pools[en]; for(var i=0,il=fns.length;i<il;i++){ fns[i](); } }else{ return; } }

6 先後端路由差異

後端每次路由請求都是從新訪問服務器
前端路由實際上只是JS根據URL來操做DOM元素，根據每一個頁面須要的去服務端請求數據，返回數據後和模板進行組合

9、綜合

1 談談你對重構的理解

網站重構：在不改變外部行爲的前提下，簡化結構、添加可讀性，而在網站前端保持一致的行爲。也就是說是在不改變UI的狀況下，對網站進行優化，在擴展的同時保持一致的UI
對於傳統的網站來講重構一般是：
- 表格(table)佈局改成DIV+CSS
- 使網站前端兼容於現代瀏覽器(針對於不合規範的CSS、如對IE6有效的)
- 對於移動平臺的優化
- 針對於SEO進行優化

2 什麼樣的前端代碼是好的

高複用低耦合，這樣文件小，好維護，並且好擴展。

3 對前端工程師這個職位是怎麼樣理解的？它的前景會怎麼樣

前端是最貼近用戶的程序員，比後端、數據庫、產品經理、運營、安全都近
- 實現界面交互
- 提高用戶體驗
- 有了Node.js，前端能夠實現服務端的一些事情
前端是最貼近用戶的程序員，前端的能力就是能讓產品從 90分進化到 100 分，甚至更好，
與團隊成員，UI設計，產品經理的溝通；
作好的頁面結構，頁面重構和用戶體驗；

4 你以爲前端工程的價值體如今哪

爲簡化用戶使用提供技術支持（交互部分）
爲多個瀏覽器兼容性提供支持
爲提升用戶瀏覽速度（瀏覽器性能）提供支持
爲跨平臺或者其餘基於webkit或其餘渲染引擎的應用提供支持
爲展現數據提供支持（數據接口）

5 平時如何管理你的項目

先期團隊必須肯定好全局樣式（globe.css），編碼模式(utf-8) 等；
編寫習慣必須一致（例如都是採用繼承式的寫法，單樣式都寫成一行）；
標註樣式編寫人，各模塊都及時標註（標註關鍵樣式調用的地方）；
頁面進行標註（例如頁面模塊開始和結束）；
CSS跟HTML 分文件夾並行存放，命名都得統一（例如style.css）；
JS 分文件夾存放命名以該JS功能爲準的英文翻譯。
圖片採用整合的 images.png png8 格式文件使用 - 儘可能整合在一塊兒使用方便未來的管理

6 組件封裝

目的：爲了重用，提升開發效率和代碼質量注意：低耦合，單一職責，可複用性，可維護性經常使用操做

分析佈局
初步開發
化繁爲簡
組件抽象

10、一些常見問題

自我介紹
面試完你還有什麼問題要問的嗎
你有什麼愛好?
你最大的優勢和缺點是什麼?
你爲何會選擇這個行業，職位?
你以爲你適合從事這個崗位嗎?
你有什麼職業規劃?
你對工資有什麼要求?
如何看待前端開發？
將來三到五年的規劃是怎樣的？
你的項目中技術難點是什麼？遇到了什麼問題？你是怎麼解決的？
大家部門的開發流程是怎樣的
你認爲哪一個項目作得最好？
說下工做中你作過的一些性能優化處理
最近在看哪些前端方面的書？
平時是如何學習前端開發的？
你最有成就感的一件事
你爲何要離開前一家公司？
你對加班的見解
你但願經過這份工做得到什麼？
- 我想經過這份工做好好的鍛鍊本身，提高本身的能力，同時爲公司貢獻本身的一份力量

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。