前端面試題總彙、常考、筆試題等

時間 2019-11-08

原文原文鏈接

##目錄 $HTML， HTTP，web綜合問題
一、前端須要注意哪些SEO
二、的title和alt有什麼區別
三、HTTP的幾種請求方法用途
四、從瀏覽器地址欄輸入url到顯示頁面的步驟
五、如何進行網站性能優化
六、HTTP狀態碼及其含義
七、語義化的理解
八、介紹一下你對瀏覽器內核的理解
九、html5有哪些新特性、移除了那些元素？
十、HTML5的離線儲存怎麼使用，工做原理能不能解釋一下？
十一、瀏覽器是怎麼對HTML5的離線儲存資源進行管理和加載的呢
十二、請描述一下 cookies，sessionStorage 和 localStorage 的區別
1三、iframe有那些缺點？
1四、WEB標準以及W3C標準是什麼?
1五、xhtml和html有什麼區別?
1六、Doctype做用? 嚴格模式與混雜模式如何區分？它們有何意義?
1七、行內元素有哪些？塊級元素有哪些？空(void)元素有那些？行內元素和塊級元素有什麼區別？
1八、HTML全局屬性(global attribute)有哪些
1九、Canvas和SVG有什麼區別？
20、HTML5 爲何只須要寫 <!DOCTYPE HTML>？
2一、如何在頁面上實現一個圓形的可點擊區域？
2二、網頁驗證碼是幹嗎的，是爲了解決什麼安全問題javascript

$CSS部分
一、css sprite是什麼,有什麼優缺點
二、display: none;與visibility: hidden;的區別
三、link與@import的區別
四、什麼是FOUC?如何避免
五、如何建立塊級格式化上下文(block formatting context),BFC有什麼用
七、清除浮動的幾種方式，各自的優缺點
八、爲何要初始化CSS樣式?
九、css3有哪些新特性
十、display有哪些值？說明他們的做用
十一、介紹一下標準的CSS的盒子模型？低版本IE的盒子模型有什麼不一樣的？
十二、CSS優先級算法如何計算？
1三、對BFC規範的理解？
1四、談談浮動和清除浮動
1五、position的值， relative和absolute`定位原點是
1六、display:inline-block 何時不會顯示間隙？(攜程)
1七、PNG,GIF,JPG的區別及如何選
1八、行內元素float:left後是否變爲塊級元素？
1九、在網頁中的應該使用奇數仍是偶數的字體？爲何呢？
20、::before 和 :after中雙冒號和單冒號有什麼區別？解釋一下這2個僞元素的做用
2一、若是須要手動寫動畫，你認爲最小時間間隔是多久，爲何？（阿里）
2二、CSS合併方法
2三、CSS不一樣選擇器的權重(CSS層疊的規則)
2四、列出你所知道能夠改變頁面佈局的屬性
2五、CSS在性能優化方面的實踐
2六、CSS3動畫（簡單動畫的實現，如旋轉等）
2七、base64的原理及優缺點
2八、幾種常見的CSS佈局
2九、stylus/sass/less區別
30、postcss的做用php

$JavaScript
一、閉包
二、說說你對做用域鏈的理解
三、JavaScript原型，原型鏈 ? 有什麼特色？
四、請解釋什麼是事件代理
五、Javascript如何實現繼承？
六、談談This對象的理解
七、事件模型
八、new操做符具體幹了什麼呢?
九、Ajax原理
十一、模塊化開發怎麼作？
十二、異步加載JS的方式有哪些？
1三、那些操做會形成內存泄漏？
1四、XML和JSON的區別？
1五、談談你對webpack的見解
1七、常見web安全及防禦原理
1八、用過哪些設計模式？
1九、爲何要有同源限制？
20、offsetWidth/offsetHeight,clientWidth/clientHeight與scrollWidth/scrollHeight的區別
2一、javascript有哪些方法定義對象
2二、常見兼容性問題？
2二、說說你對promise的瞭解
2三、你以爲jQuery源碼有哪些寫的好的地方
2五、Node的應用場景
2六、談談你對AMD、CMD的理解
2七、那些操做會形成內存泄漏？
2八、web開發中會話跟蹤的方法有哪些
2九、介紹js的基本數據類型
30、介紹js有哪些內置對象？
3一、說幾條寫JavaScript的基本規範？
3二、JavaScript有幾種類型的值？，你能畫一下他們的內存圖嗎？
3三、javascript建立對象的幾種方式？
3四、eval是作什麼的？
3五、null，undefined 的區別？
3六、[「1」, 「2」, 「3」].map(parseInt) 答案是多少？
3七、javascript 代碼中的」use strict」;是什麼意思 ? 使用它區別是什麼？
3八、JSON的瞭解？
3九、js延遲加載的方式有哪些？
40、同步和異步的區別?
4一、漸進加強和優雅降級
4二、defer和async
4三、說說嚴格模式的限制
4四、attribute和property的區別是什麼？
4五、談談你對ES6的理解
4六、ECMAScript6 怎麼寫class麼，爲何會出現class這種東西?
4七、什麼是面向對象編程及面向過程編程，它們的異同和優缺點
4八、從你本身的理解來看，你是如何理解面向對象編程的，它解決了什麼問題，有什麼做用
4九、對web標準、可用性、可訪問性的理解
50、如何經過JS判斷一個數組？
5一、談一談let與var的區別？
5二、map與forEach的區別？
5三、談一談你理解的函數式編程？
5四、談一談箭頭函數與普通函數的區別？
5五、談一談函數中this的指向吧？
5六、異步編程的實現方式？
5七、對原生Javascript瞭解程度
5八、Js動畫與CSS動畫區別及相應實現
5九、JS 數組和對象的遍歷方式，以及幾種方式的比較
60、簡述gulp是什麼？
6一、說一下Vue的雙向綁定數據的原理css

$jQuery
一、你以爲jQuery或zepto源碼有哪些寫的好的地方
二、jQuery 的實現原理？
三、jQuery.fn 的 init 方法返回的 this 指的是什麼對象？爲何要返回 this？
四、jQuery.extend 與 jQuery.fn.extend 的區別？
五、jQuery 的屬性拷貝(extend)的實現原理是什麼，如何實現深拷貝？
六、jQuery 的隊列是如何實現的？隊列能夠用在哪些地方？
七、jQuery 中的bind(), live(), delegate(), on()的區別？
八、是否知道自定義事件？ jQuery 裏的 fire 函數是什麼意思，何時用？
九、jQuery 經過哪一個方法和 Sizzle 選擇器結合的？
十、jQuery 中如何將數組轉化爲 JSON字符串，而後再轉化回來？
十一、jQuery 一個對象能夠同時綁定多個事件，這是如何實現的？
十二、針對 jQuery的優化方法？
1三、jQuery 的 slideUp 動畫，當鼠標快速連續觸發, 動畫會滯後反覆執行，該如何處理呢?
1四、jQuery UI 如何自定義組件？
1五、jQuery 與 jQuery UI、jQuery Mobile區別？
1六、jQuery 和 Zepto 的區別？各自的使用場景？
1七、jQuery對象的特色html

$編程題
一、寫一個通用的事件偵聽器函數
二、如何判斷一個對象是否爲數組
三、冒泡排序
四、快速排序
五、編寫一個方法求一個字符串的字節長度前端

$其餘
一、談談你對重構的理解
二、什麼樣的前端代碼是好的
三、對前端工程師這個職位是怎麼樣理解的？它的前景會怎麼樣？
四、你以爲前端工程的價值體如今哪
五、平時如何管理你的項目？vue

人事面
面試完你還有什麼問題要問的嗎
你有什麼愛好?
你最大的優勢和缺點是什麼?
你爲何會選擇這個行業，職位?
你以爲你適合從事這個崗位嗎?
你有什麼職業規劃?
你對工資有什麼要求?
如何看待前端開發？
將來三到五年的規劃是怎樣的？
常問
自我介紹
你的項目中技術難點是什麼？遇到了什麼問題？你是怎麼解決的？
你認爲哪一個項目作得最好？
最近在看哪些前端方面的書？
平時是如何學習前端開發的？
你最有成就感的一件事
你是怎麼學習前端的html5

##$HTML， HTTP，web綜合問題
一、前端須要注意哪些SEO
合理的title、description、keywords：搜索對着三項的權重逐個減少，title值強調重點便可，重要關鍵詞出現不要超過2次，並且要靠前，不一樣頁面title要有所不一樣；description把頁面內容高度歸納，長度合適，不可過度堆砌關鍵詞，不一樣頁面description有所不一樣；keywords列舉出重要關鍵詞便可
語義化的HTML代碼，符合W3C規範：語義化代碼讓搜索引擎容易理解網頁
重要內容HTML代碼放在最前：搜索引擎抓取HTML順序是從上到下，有的搜索引擎對抓取長度有限制，保證重要內容必定會被抓取
重要內容不要用js輸出：爬蟲不會執行js獲取內容
少用iframe：搜索引擎不會抓取iframe中的內容
非裝飾性圖片必須加alt
提升網站速度：網站速度是搜索引擎排序的一個重要指標
二、的title和alt有什麼區別
一般當鼠標滑動到元素上的時候顯示
alt是的特有屬性，是圖片內容的等價描述，用於圖片沒法加載時顯示、讀屏器閱讀圖片。可提圖片高可訪問性，除了純裝飾圖片外都必須設置有意義的值，搜索引擎會重點分析。
三、HTTP的幾種請求方法用途
一、GET方法java

發送一個請求來取得服務器上的某一資源
二、POST方法node

向URL指定的資源提交數據或附加新的數據
三、PUT方法react

跟POST方法很像，也是想服務器提交數據。可是，它們之間有不一樣。PUT指定了資源在服務器上的位置，而POST沒有
四、HEAD方法

只請求頁面的首部
五、DELETE方法

刪除服務器上的某資源
六、OPTIONS方法

它用於獲取當前URL所支持的方法。若是請求成功，會有一個Allow的頭包含相似「GET,POST」這樣的信息
七、TRACE方法

TRACE方法被用於激發一個遠程的，應用層的請求消息迴路
八、CONNECT方法

把請求鏈接轉換到透明的TCP/IP通道
四、從瀏覽器地址欄輸入url到顯示頁面的步驟
瀏覽器根據請求的URL交給DNS域名解析，找到真實IP，向服務器發起請求；
服務器交給後臺處理完成後返回數據，瀏覽器接收文件（HTML、JS、CSS、圖象等）；
瀏覽器對加載到的資源（HTML、JS、CSS等）進行語法解析，創建相應的內部數據結構（如HTML的DOM）；
載入解析到的資源文件，渲染頁面，完成。
五、如何進行網站性能優化
content方面

減小HTTP請求：合併文件、CSS精靈、inline Image
減小DNS查詢：DNS緩存、將資源分佈到恰當數量的主機名
減小DOM元素數量
Server方面

使用CDN
配置ETag
對組件使用Gzip壓縮
Cookie方面

減少cookie大小
css方面

將樣式表放到頁面頂部
不使用CSS表達式
使用不使用@import
Javascript方面

將腳本放到頁面底部
將javascript和css從外部引入
壓縮javascript和css
刪除不須要的腳本
減小DOM訪問
圖片方面

優化圖片：根據實際顏色須要選擇色深、壓縮
優化css精靈
不要在HTML中拉伸圖片
六、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 服務器端暫時沒法處理請求（多是過載或維護）。
七、語義化的理解
用正確的標籤作正確的事情！
html語義化就是讓頁面的內容結構化，便於對瀏覽器、搜索引擎解析；
在沒有樣式CSS狀況下也以一種文檔格式顯示，而且是容易閱讀的。
搜索引擎的爬蟲依賴於標記來肯定上下文和各個關鍵字的權重，利於 SEO。
使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解
八、介紹一下你對瀏覽器內核的理解？
主要分紅兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎
渲染引擎：負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，而後會輸出至顯示器或打印機。瀏覽器的內核的不一樣對於網頁的語法解釋會有不一樣，因此渲染的效果也不相同。全部網頁瀏覽器、電子郵件客戶端以及其它須要編輯、顯示網絡內容的應用程序都須要內核
JS引擎則：解析和執行javascript來實現網頁的動態效果
最開始渲染引擎和JS引擎並無區分的很明確，後來JS引擎愈來愈獨立，內核就傾向於只指渲染引擎
九、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
十、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

十一、瀏覽器是怎麼對HTML5的離線儲存資源進行管理和加載的呢
在線的狀況下，瀏覽器發現html頭部有manifest屬性，它會請求manifest文件，若是是第一次訪問app，那麼瀏覽器就會根據manifest文件的內容下載相應的資源而且進行離線存儲。若是已經訪問過app而且資源已經離線存儲了，那麼瀏覽器就會使用離線的資源加載頁面，而後瀏覽器會對比新的manifest文件與舊的manifest文件，若是文件沒有發生改變，就不作任何操做，若是文件改變了，那麼就會從新下載文件中的資源並進行離線存儲。
離線的狀況下，瀏覽器就直接使用離線存儲的資源。
十二、請描述一下 cookies，sessionStorage 和 localStorage 的區別？
cookie是網站爲了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（一般通過加密）
cookie數據始終在同源的http請求中攜帶（即便不須要），記會在瀏覽器和服務器間來回傳遞
sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存
存儲大小：

cookie數據大小不能超過4k
sessionStorage和localStorage雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大
有期時間：

localStorage 存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據
sessionStorage 數據在當前瀏覽器窗口關閉後自動刪除
cookie 設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉
1三、iframe有那些缺點？
iframe會阻塞主頁面的Onload事件
搜索引擎的檢索程序沒法解讀這種頁面，不利於SEO
iframe和主頁面共享鏈接池，而瀏覽器對相同域的鏈接有限制，因此會影響頁面的並行加載
使用iframe以前須要考慮這兩個缺點。若是須要使用iframe，最好是經過javascript動態給iframe添加src屬性值，這樣能夠繞開以上兩個問題
1四、WEB標準以及W3C標準是什麼?
標籤閉合、標籤小寫、不亂嵌套、使用外鏈css和js、結構行爲表現的分離
1五、xhtml和html有什麼區別?
一個是功能上的差異

主要是XHTML可兼容各大瀏覽器、手機以及PDA，而且瀏覽器也能快速正確地編譯網頁
另外是書寫習慣的差異

XHTML 元素必須被正確地嵌套，閉合，區分大小寫，文檔必須擁有根元素
1六、Doctype做用? 嚴格模式與混雜模式如何區分？它們有何意義?
頁面被加載的時，link會同時被加載，而@imort頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載
import只在IE5以上才能識別，而link是XHTML標籤，無兼容問題
link方式的樣式的權重高於@import的權重
<!DOCTYPE> 聲明位於文檔中的最前面，處於標籤以前。告知瀏覽器的解析器，用什麼文檔類型規範來解析這個文檔
嚴格模式的排版和 JS 運做模式是以該瀏覽器支持的最高標準運行
在混雜模式中，頁面以寬鬆的向後兼容的方式顯示。模擬老式瀏覽器的行爲以防止站點沒法工做。 DOCTYPE不存在或格式不正確會致使文檔以混雜模式呈現
1七、行內元素有哪些？塊級元素有哪些？空(void)元素有那些？行內元素和塊級元素有什麼區別？
行內元素有：a b span img input select strong
塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
空元素：

行內元素不能夠設置寬高，不獨佔一行
塊級元素能夠設置寬高，獨佔一行
1八、HTML全局屬性(global attribute)有哪些
class:爲元素設置類標識
data-*: 爲元素增長自定義屬性
draggable: 設置元素是否可拖拽
id: 元素id，文檔內惟一
lang: 元素內容的的語言
style: 行內css樣式
title: 元素相關的建議信息
1九、Canvas和SVG有什麼區別？
svg繪製出來的每個圖形的元素都是獨立的DOM節點，可以方便的綁定事件或用來修改。canvas輸出的是一整幅畫布
svg輸出的圖形是矢量圖形，後期能夠修改參數來自由放大縮小，不會是真和鋸齒。而canvas輸出標量畫布，就像一張圖片同樣，放大會失真或者鋸齒
20、HTML5 爲何只須要寫 <!DOCTYPE HTML>？
HTML5 不基於 SGML，所以不須要對DTD進行引用，可是須要doctype來規範瀏覽器的行爲
而HTML4.01基於SGML,因此須要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型
2一、如何在頁面上實現一個圓形的可點擊區域？
svg
border-radius
純js實現須要求一個點在不在圓上簡單算法、獲取鼠標座標等等
2二、網頁驗證碼是幹嗎的，是爲了解決什麼安全問題
區分用戶是計算機仍是人的公共全自動程序。能夠防止惡意破解密碼、刷票、論壇灌水
有效防止黑客對某一個特定註冊用戶用特定程序暴力破解方式進行不斷的登錄嘗試
$CSS部分
一、css sprite是什麼,有什麼優缺點
概念：將多個小圖片拼接到一個圖片中。經過background-position和元素尺寸調節須要顯示的背景圖案。
優勢：

減小HTTP請求數，極大地提升頁面加載速度
增長圖片信息重複度，提升壓縮比，減小圖片大小
更換風格方便，只需在一張或幾張圖片上修改顏色或樣式便可實現
缺點：

圖片合併麻煩
維護麻煩，修改一個圖片可能須要重新佈局整個圖片，樣式
二、display: none;與visibility: hidden;的區別
聯繫：它們都能讓元素不可見
區別：

display:none;會讓元素徹底從渲染樹中消失，渲染的時候不佔據任何空間；visibility: hidden;不會讓元素從渲染樹消失，渲染師元素繼續佔據空間，只是內容不可見
display: none;是非繼承屬性，子孫節點消失因爲元素從渲染樹消失形成，經過修改子孫節點屬性沒法顯示；visibility: hidden;是繼承屬性，子孫節點消失因爲繼承了hidden，經過設置visibility: visible;可讓子孫節點顯式
修改常規流中元素的display一般會形成文檔重排。修改visibility屬性只會形成本元素的重繪。
讀屏器不會讀取display: none;元素內容；會讀取visibility: hidden;元素內容
三、link與@import的區別
link是HTML方式， @import是CSS方式
link最大限度支持並行下載，@import過多嵌套致使串行下載，出現FOUC
link能夠經過rel=」alternate stylesheet」指定候選樣式
瀏覽器對link支持早於@import，能夠使用@import對老瀏覽器隱藏樣式
@import必須在樣式規則以前，能夠在css文件中引用其餘文件
整體來講：link優於@import
四、什麼是FOUC?如何避免
Flash Of Unstyled Content：用戶定義樣式表加載以前瀏覽器使用默認樣式顯示文檔，用戶樣式加載渲染以後再重新顯示文檔，形成頁面閃爍。
解決方法：把樣式表放到文檔的head
五、如何建立塊級格式化上下文(block formatting context),BFC有什麼用
建立規則：

根元素
浮動元素（float不是none）
絕對定位元素（position取值爲absolute或fixed）
display取值爲inline-block,table-cell, table-caption,flex, inline-flex之一的元素
overflow不是visible的元素
做用：

能夠包含浮動元素
不被浮動元素覆蓋
阻止父子元素的margin摺疊
六、display,float,position的關係
若是display爲none，那麼position和float都不起做用，這種狀況下元素不產生框
不然，若是position值爲absolute或者fixed，框就是絕對定位的，float的計算值爲none，display根據下面的表格進行調整。
不然，若是float不是none，框是浮動的，display根據下表進行調整
不然，若是元素是根元素，display根據下表進行調整
其餘狀況下display的值爲指定值
總結起來：絕對定位、浮動、根元素都須要調整display
七、清除浮動的幾種方式，各自的優缺點
父級div定義height
結尾處加空div標籤clear:both
父級div定義僞類:after和zoom
父級div定義overflow:hidden
父級div也浮動，須要定義寬度
結尾處加br標籤clear:both
比較好的是第3種方式，好多網站都這麼用
八、爲何要初始化CSS樣式?
由於瀏覽器的兼容問題，不一樣瀏覽器對有些標籤的默認值是不一樣的，若是沒對CSS初始化每每會出現瀏覽器之間的頁面顯示差別。
固然，初始化樣式會對SEO有必定的影響，但魚和熊掌不可兼得，但力求影響最小的狀況下初始化
九、css3有哪些新特性
新增各類css選擇器
圓角 border-radius
多列布局
陰影和反射
文字特效text-shadow
線性漸變
旋轉transform
CSS3新增僞類有那些？

p:first-of-type 選擇屬於其父元素的首個

元素的每一個

元素。
p:last-of-type 選擇屬於其父元素的最後

元素的每一個

元素。
p:only-of-type 選擇屬於其父元素惟一的

元素的每一個

元素。
p:only-child 選擇屬於其父元素的惟一子元素的每一個

元素。
p:nth-child(2) 選擇屬於其父元素的第二個子元素的每一個

元素。
:after 在元素以前添加內容,也能夠用來作清除浮動。
:before 在元素以後添加內容
:enabled
:disabled 控制表單控件的禁用狀態。
:checked 單選框或複選框被選中
十、display有哪些值？說明他們的做用
block 象塊類型元素同樣顯示。
none 缺省值。象行內元素類型同樣顯示。
inline-block 象行內元素同樣顯示，但其內容象塊類型元素同樣顯示。
list-item 象塊類型元素同樣顯示，並添加樣式列表標記。
table 此元素會做爲塊級表格來顯示
inherit 規定應該從父元素繼承 display 屬性的值
十一、介紹一下標準的CSS的盒子模型？低版本IE的盒子模型有什麼不一樣的？
有兩種， IE盒子模型、W3C盒子模型；
盒模型：內容(content)、填充(padding)、邊界(margin)、邊框(border)；
區別： IE的content部分把 border 和 padding計算了進去;
十二、CSS優先級算法如何計算？
優先級就近原則，同權重狀況下樣式定義最近者爲準
載入樣式以最後載入的定位爲準
優先級爲: !important > id > class > tag important 比內聯優先級高
1三、對BFC規範的理解？
它決定了元素如何對其內容進行定位,以及與其餘元素的關係和相互做用
1四、談談浮動和清除浮動
浮動的框能夠向左或向右移動，直到他的外邊緣碰到包含框或另外一個浮動框的邊框爲止。因爲浮動框不在文檔的普通流中，因此文檔的普通流的塊框表現得就像浮動框不存在同樣。浮動的塊框會漂浮在文檔普通流的塊框上
1五、position的值， relative和absolute定位原點是
absolute：生成絕對定位的元素，相對於 static 定位之外的第一個父元素進行定位
fixed：生成絕對定位的元素，相對於瀏覽器窗口進行定位
relative：生成相對定位的元素，相對於其正常位置進行定位
static 默認值。沒有定位，元素出如今正常的流中
inherit 規定從父元素繼承 position 屬性的值
1六、display:inline-block 何時不會顯示間隙？(攜程)
移除空格
使用margin負值
使用font-size:0
letter-spacing
word-spacing
1七、PNG,GIF,JPG的區別及如何選
GIF

8位像素，256色
無損壓縮
支持簡單動畫
支持boolean透明
適合簡單動畫
JPEG

顏色限於256
有損壓縮
可控制壓縮質量
不支持透明
適合照片
PNG

有PNG8和truecolor PNG
PNG8相似GIF顏色上限爲256，文件小，支持alpha透明度，無動畫
適合圖標、背景、按鈕
1八、行內元素float:left後是否變爲塊級元素？
浮動後，行內元素不會成爲塊狀元素，可是能夠設置寬高。行內元素要想變成塊狀元素，佔一行，直接設置display:block;。但若是元素設置了浮動後再設置display:block;那就不會佔一行。
1九、在網頁中的應該使用奇數仍是偶數的字體？爲何呢？
偶數字號相對更容易和 web 設計的其餘部分構成比例關係
20、::before 和 :after中雙冒號和單冒號有什麼區別？解釋一下這2個僞元素的做用
單冒號(:)用於CSS3僞類，雙冒號(::)用於CSS3僞元素
用於區分僞類和僞元素
2一、若是須要手動寫動畫，你認爲最小時間間隔是多久，爲何？（阿里）
多數顯示器默認頻率是60Hz，即1秒刷新60次，因此理論上最小間隔爲1/60＊1000ms ＝ 16.7ms
2二、CSS合併方法
避免使用@import引入多個css文件，能夠使用CSS工具將CSS合併爲一個CSS文件，例如使用Sass\Compass等
2三、CSS不一樣選擇器的權重(CSS層疊的規則)
！important規則最重要，大於其它規則
行內樣式規則，加1000
對於選擇器中給定的各個ID屬性值，加100
對於選擇器中給定的各個類屬性、屬性選擇器或者僞類選擇器，加10
對於選擇其中給定的各個元素標籤選擇器，加1
若是權值同樣，則按照樣式規則的前後順序來應用，順序靠後的覆蓋靠前的規則
2四、列出你所知道能夠改變頁面佈局的屬性
position、display、float、width、height、margin、padding、top、left、right、`
2五、CSS在性能優化方面的實踐
css壓縮與合併、Gzip壓縮
css文件放在head裏、不要用@import
儘可能用縮寫、避免用濾鏡、合理使用選擇器
2六、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
2七、base64的原理及優缺點
優勢能夠加密，減小了http請求
缺點是須要消耗CPU進行編解碼
2八、幾種常見的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>

2九、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
$JavaScript
一、閉包
閉包就是可以讀取其餘函數內部變量的函數
閉包是指有權訪問另外一個函數做用域中變量的函數，建立閉包的最多見的方式就是在一個函數內建立另外一個函數，經過另外一個函數訪問這個函數的局部變量,利用閉包能夠突破做用鏈域
閉包的特性：

函數內再嵌套函數
內部函數能夠引用外層的參數和變量
參數和變量不會被垃圾回收機制回收
說說你對閉包的理解

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

因爲閉包會使得函數中的變量都被保存在內存中，內存消耗很大，因此不能濫用閉包，不然會形成網頁的性能問題，在IE中可能致使內存泄露
解決方法是，在退出函數以前，將不使用的局部變量所有刪除
二、說說你對做用域鏈的理解
做用域鏈的做用是保證執行環境裏有權訪問的變量和函數是有序的，做用域鏈的變量只能向上訪問，變量訪問到window對象即被終止，做用域鏈向下訪問變量是不被容許的
簡單的說，做用域就是變量與函數的可訪問範圍，即做用域控制着變量與函數的可見性和生命週期
三、JavaScript原型，原型鏈 ? 有什麼特色？
每一個對象都會在其內部初始化一個屬性，就是prototype(原型)，當咱們訪問一個對象的屬性時
若是這個對象內部不存在這個屬性，那麼他就會去prototype裏找這個屬性，這個prototype又會有本身的prototype，因而就這樣一直找下去，也就是咱們平時所說的原型鏈的概念
關係：instance.constructor.prototype = instance.proto
特色：

JavaScript對象是經過引用來傳遞的，咱們建立的每一個新對象實體中並無一份屬於本身的原型副本。當咱們修改原型時，與之相關的對象也會繼承這一改變
當咱們須要一個屬性的時，Javascript引擎會先看當前對象中是否有這個屬性，若是沒有的
就會查找他的Prototype對象是否有這個屬性，如此遞推下去，一直檢索到 Object 內建對象
四、請解釋什麼是事件代理
事件代理（Event Delegation），又稱之爲事件委託。是 JavaScript 中經常使用綁定事件的經常使用技巧。顧名思義，「事件代理」便是把本來須要綁定的事件委託給父元素，讓父元素擔當事件監聽的職務。事件代理的原理是DOM元素的事件冒泡。使用事件代理的好處是能夠提升性能
能夠大量節省內存佔用，減小事件註冊，好比在table上代理全部td的click事件就很是棒
能夠實現當新增子對象時無需再次對其綁定
五、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);//獲得被繼承的屬性
 }

六、談談This對象的理解
this老是指向函數的直接調用者（而非間接調用者）
若是有new關鍵字，this指向new出來的那個對象
在事件中，this指向觸發這個事件的對象，特殊的是，IE中的attachEvent中的this老是指向全局對象Window
七、事件模型
W3C中定義事件的發生經歷三個階段：捕獲階段（capturing）、目標階段（targetin）、冒泡階段（bubbling）
冒泡型事件：當你使用事件冒泡時，子級元素先觸發，父級元素後觸發
捕獲型事件：當你使用事件捕獲時，父級元素先觸發，子級元素後觸發
DOM事件流：同時支持兩種事件模型：捕獲型事件和冒泡型事件
阻止冒泡：在W3c中，使用stopPropagation（）方法；在IE下設置cancelBubble = true
阻止捕獲：阻止事件的默認行爲，例如click - 後的跳轉。在W3c中，使用preventDefault（）方法，在IE下設置window.event.returnValue = false
八、new操做符具體幹了什麼呢?
建立一個空對象，而且 this 變量引用該對象，同時還繼承了該函數的原型
屬性和方法被加入到 this 引用的對象中
新建立的對象由 this 所引用，而且最後隱式的返回 this
九、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暴露了與服務器交互的細節。
對搜索引擎的支持比較弱。
不容易調試。
十、如何解決跨域問題?
jsonp、 iframe、window.name、window.postMessage、服務器上設置代理頁面
十一、模塊化開發怎麼作？
當即執行函數,不暴露私有成員

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

十二、異步加載JS的方式有哪些？
defer，只支持IE
async：
建立script，插入到DOM中，加載完畢後callBack
1三、那些操做會形成內存泄漏？
內存泄漏指任何對象在您再也不擁有或須要它以後仍然存在
setTimeout 的第一個參數使用字符串而非函數的話，會引起內存泄漏
閉包使用不當
1四、XML和JSON的區別？
數據體積方面

JSON相對於XML來說，數據的體積小，傳遞的速度更快些。
數據交互方面

JSON與JavaScript的交互更加方便，更容易解析處理，更好的數據交互
數據描述方面

JSON對數據的描述性比XML較差
傳輸速度方面

JSON的速度要遠遠快於XML
1五、談談你對webpack的見解
WebPack 是一個模塊打包工具，你能夠使用WebPack管理你的模塊依賴，並編繹輸出模塊們所需的靜態文件。它可以很好地管理、打包Web開發中所用到的HTML、Javascript、CSS以及各類靜態文件（圖片、字體等），讓開發過程更加高效。對於不一樣類型的資源，webpack有對應的模塊加載器。webpack模塊打包器會分析模塊間的依賴關係，最後生成了優化且合併後的靜態資源
1六、說說你對AMD和Commonjs的理解
CommonJS是服務器端模塊的規範，Node.js採用了這個規範。CommonJS規範加載模塊是同步的，也就是說，只有加載完成，才能執行後面的操做。AMD規範則是非同步加載模塊，容許指定回調函數
AMD推薦的風格經過返回一個對象作爲模塊對象，CommonJS的風格經過對module.exports或exports的屬性賦值來達到暴露模塊對象的目的
1七、常見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方式方法不少樣，但總的思想都是一致的，就是在客戶端頁面增長僞隨機數
經過驗證碼的方法
1八、用過哪些設計模式？
工廠模式：

工廠模式解決了重複實例化的問題，但還有一個問題,那就是識別問題，由於根本沒法
主要好處就是能夠消除對象間的耦合，經過使用工程方法而不是new關鍵字
構造函數模式

使用構造函數的方法，即解決了重複實例化的問題，又解決了對象識別的問題，該模式與工廠模式的不一樣之處在於
直接將屬性和方法賦值給 this對象;
1九、爲何要有同源限制？
同源策略指的是：協議，域名，端口相同，同源策略是一種安全協議
舉例說明：好比一個黑客程序，他利用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 + 溢出內容的尺寸
2一、javascript有哪些方法定義對象
對象字面量： var obj = {};
構造函數： var obj = new Object();
Object.create(): var obj = Object.create(Object.prototype);
2二、常見兼容性問題？
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屬性.
2二、說說你對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
2三、你以爲jQuery源碼有哪些寫的好的地方
jquery源碼封裝在一個匿名函數的自執行環境中，有助於防止變量的全局污染，而後經過傳入window對象參數，能夠使window對象做爲局部變量使用，好處是當jquery中訪問window對象的時候，就不用將做用域鏈退回到頂層做用域了，從而能夠更快的訪問window對象。一樣，傳入undefined參數，能夠縮短查找undefined時的做用域鏈
jquery將一些原型屬性和方法封裝在了jquery.prototype中，爲了縮短名稱，又賦值給了jquery.fn，這是很形象的寫法
有一些數組或對象的方法常常能使用到，jQuery將其保存爲局部變量以提升訪問速度
jquery實現的鏈式調用能夠節約代碼，所返回的都是同一個對象，能夠提升代碼效率
2四、vue、react、angular
Vue.js
一個用於建立 web 交互界面的庫，是一個精簡的 MVVM。它經過雙向數據綁定把 View 層和 Model 層鏈接了起來。實際的 DOM 封裝和輸出格式都被抽象爲了Directives 和 Filters
AngularJS
是一個比較完善的前端MVVM框架，包含模板，數據雙向綁定，路由，模塊化，服務，依賴注入等全部功能，模板功能強大豐富，自帶了豐富的 Angular指令
react
React 僅僅是 VIEW 層是facebook公司。推出的一個用於構建UI的一個庫，可以實現服務器端的渲染。用了virtual dom，因此性能很好。
2五、Node的應用場景
特色：

一、它是一個Javascript運行環境
二、依賴於Chrome V8引擎進行代碼解釋
三、事件驅動
四、非阻塞I/O
五、單進程，單線程
優勢：

高併發（最重要的優勢）
缺點：

一、只支持單核CPU，不能充分利用CPU
二、可靠性低，一旦代碼某個環節崩潰，整個系統都崩潰
2六、談談你對AMD、CMD的理解
CommonJS是服務器端模塊的規範，Node.js採用了這個規範。CommonJS規範加載模塊是同步的，也就是說，只有加載完成，才能執行後面的操做。AMD規範則是非同步加載模塊，容許指定回調函數
AMD推薦的風格經過返回一個對象作爲模塊對象，CommonJS的風格經過對module.exports或exports的屬性賦值來達到暴露模塊對象的目的
2七、那些操做會形成內存泄漏？
內存泄漏指任何對象在您再也不擁有或須要它以後仍然存在
setTimeout 的第一個參數使用字符串而非函數的話，會引起內存泄漏
閉包、控制檯日誌、循環（在兩個對象彼此引用且彼此保留時，就會產生一個循環）
2八、web開發中會話跟蹤的方法有哪些
cookie
session
url重寫
隱藏input
ip地址
2九、介紹js的基本數據類型
Undefined、Null、Boolean、Number、String
30、介紹js有哪些內置對象？
Object 是 JavaScript 中全部對象的父對象
數據封裝類對象：Object、Array、Boolean、Number 和 String
其餘對象：Function、Arguments、Math、Date、RegExp、Error
3一、說幾條寫JavaScript的基本規範？
不要在同一行聲明多個變量
請使用===/!==來比較true/false或者數值
使用對象字面量替代new Array這種形式
不要使用全局函數
Switch語句必須帶有default分支
If語句必須使用大括號
for-in循環中的變量應該使用var關鍵字明確限定做用域，從而避免做用域污
3二、JavaScript有幾種類型的值？，你能畫一下他們的內存圖嗎？
棧：原始數據類型（Undefined，Null，Boolean，Number、String）
堆：引用數據類型（對象、數組和函數）
兩種類型的區別是：存儲位置不一樣；
原始數據類型直接存儲在棧(stack)中的簡單數據段，佔據空間小、大小固定，屬於被頻繁使用數據，因此放入棧中存儲；
引用數據類型存儲在堆(heap)中的對象,佔據空間大、大小不固定,若是存儲在棧中，將會影響程序運行的性能；引用數據類型在棧中存儲了指針，該指針指向堆中該實體的起始地址。當解釋器尋找引用值時，會首先檢索其
在棧中的地址，取得地址後從堆中得到實體

3三、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();

3四、eval是作什麼的？
它的功能是把對應的字符串解析成JS代碼並運行
應該避免使用eval，不安全，很是耗性能（2次，一次解析成js語句，一次執行）
由JSON字符串轉換爲JSON對象的時候能夠用eval，var obj =eval(‘(‘+ str +’)’)
3五、null，undefined 的區別？
undefined 表示不存在這個值。
undefined :是一個表示」無」的原始值或者說表示」缺乏值」，就是此處應該有一個值，可是尚未定義。當嘗試讀取時會返回 undefined
例如變量被聲明瞭，但沒有賦值時，就等於undefined
null 表示一個對象被定義了，值爲「空值」
null : 是一個對象(空對象, 沒有任何屬性和方法)
例如做爲函數的參數，表示該函數的參數不是對象；
在驗證null時，必定要使用　=== ，由於 ==沒法分別null 和　undefined
3六、[「1」, 「2」, 「3」].map(parseInt) 答案是多少？
[1, NaN, NaN]由於 parseInt 須要兩個參數 (val, radix)，其中radix 表示解析時用的基數。
map傳了 3個(element, index, array)，對應的 radix 不合法致使解析失敗。
3七、javascript 代碼中的」use strict」;是什麼意思 ? 使用它區別是什麼？
use strict是一種ECMAscript 5 添加的（嚴格）運行模式,這種模式使得 Javascript 在更嚴格的條件下運行,使JS編碼更加規範化的模式,消除Javascript語法的一些不合理、不嚴謹之處，減小一些怪異行爲
3八、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);
3九、js延遲加載的方式有哪些？
defer和async、動態建立DOM方式（用得最多）、按需異步載入js
40、同步和異步的區別?
同步：瀏覽器訪問服務器請求，用戶看獲得頁面刷新，從新發請求,等請求完，頁面刷新，新內容出現，用戶看到新內容,進行下一步操做
異步：瀏覽器訪問服務器請求，用戶正常操做，瀏覽器後端進行請求。等請求完，頁面不刷新，新內容也會出現，用戶看到新內容
4一、漸進加強和優雅降級
漸進加強：針對低版本瀏覽器進行構建頁面，保證最基本的功能，而後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
優雅降級：一開始就構建完整的功能，而後再針對低版本瀏覽器進行兼容
4二、defer和async
defer並行加載js文件，會按照頁面上script標籤的順序執行
async並行加載js文件，下載完成當即執行，不會按照頁面上script標籤的順序執行
4三、說說嚴格模式的限制
變量必須聲明後再使用
函數的參數不能有同名屬性，不然報錯
不能使用with語句
禁止this指向全局對象
4四、attribute和property的區別是什麼？
attribute是dom元素在文檔中做爲html標籤擁有的屬性；
property就是dom元素在js中做爲對象擁有的屬性。
對於html的標準屬性來講，attribute和property是同步的，是會自動更新的
可是對於自定義的屬性來講，他們是不一樣步的
4五、談談你對ES6的理解
新增模板字符串（爲JavaScript提供了簡單的字符串插值功能）
箭頭函數
for-of（用來遍歷數據—例如數組中的值。）
arguments對象可被不定參數和默認參數完美代替。
ES6將promise對象歸入規範，提供了原生的Promise對象。
增長了let和const命令，用來聲明變量。
增長了塊級做用域。
let命令實際上就增長了塊級做用域。
還有就是引入module模塊的概念
4六、ECMAScript6 怎麼寫class麼，爲何會出現class這種東西?
這個語法糖可讓有OOP基礎的人更快上手js，至少是一個官方的實現了
但對熟悉js的人來講，這個東西沒啥大影響；一個Object.creat()搞定繼承，比class簡潔清晰的多
4七、什麼是面向對象編程及面向過程編程，它們的異同和優缺點
面向過程就是分析出解決問題所須要的步驟，而後用函數把這些步驟一步一步實現，使用的時候一個一個依次調用就能夠了
面向對象是把構成問題事務分解成各個對象，創建對象的目的不是爲了完成一個步驟，而是爲了描敘某個事物在整個解決問題的步驟中的行爲
面向對象是以功能來劃分問題，而不是步驟
4八、面向對象編程思想
基本思想是使用對象，類，繼承，封裝等基本概念來進行程序設計
優勢
易維護
採用面向對象思想設計的結構，可讀性高，因爲繼承的存在，即便改變需求，那麼維護也只是在局部模塊，因此維護起來是很是方便和較低成本的
易擴展
開發工做的重用性、繼承性高，下降重複工做量。
縮短了開發週期
4九、對web標準、可用性、可訪問性的理解
可用性（Usability）：產品是否容易上手，用戶可否完成任務，效率如何，以及這過程當中用戶的主觀感覺可好，是從用戶的角度來看產品的質量。可用性好意味着產品質量高，是企業的核心競爭力
可訪問性（Accessibility）：Web內容對於殘障用戶的可閱讀和可理解性
可維護性（Maintainability）：通常包含兩個層次，一是當系統出現問題時，快速定位並解決問題的成本，成本低則可維護性好。二是代碼是否容易被人理解，是否容易修改和加強功能。
50、如何經過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

5一、談一談let與var的區別？
let命令不存在變量提高，若是在let前使用，會致使報錯
若是塊區中存在let和const命令，就會造成封閉做用域
不容許重複聲明，所以，不能在函數內部從新聲明參數
5二、map與forEach的區別？
forEach方法，是最基本的方法，就是遍歷與循環，默認有3個傳參：分別是遍歷的數組內容item、數組索引index、和當前遍歷數組Array
map方法，基本用法與forEach一致，可是不一樣的，它會返回一個新的數組，因此在callback須要有return值，若是沒有，會返回undefined
5三、談一談你理解的函數式編程？
簡單說，」函數式編程」是一種」編程範式」（programming paradigm），也就是如何編寫程序的方法論
它具備如下特性：閉包和高階函數、惰性計算、遞歸、函數是」第一等公民」、只用」表達式」
5四、談一談箭頭函數與普通函數的區別？
函數體內的this對象，就是定義時所在的對象，而不是使用時所在的對象
不能夠看成構造函數，也就是說，不能夠使用new命令，不然會拋出一個錯誤
不能夠使用arguments對象，該對象在函數體內不存在。若是要用，能夠用Rest參數代替
不能夠使用yield命令，所以箭頭函數不能用做Generator函數
5五、談一談函數中this的指向吧？
this的指向在函數定義的時候是肯定不了的，只有函數執行的時候才能肯定this到底指向誰，實際上this的最終指向的是那個調用它的對象
《javascript語言精髓》中大概歸納了4種調用方式：
方法調用模式
函數調用模式
構造器調用模式
graph LR
A–>B
apply/call調用模式
5六、異步編程的實現方式？
回調函數

優勢：簡單、容易理解
缺點：不利於維護，代碼耦合高
事件監聽(採用時間驅動模式，取決於某個事件是否發生)：

優勢：容易理解，能夠綁定多個事件，每一個事件能夠指定多個回調函數
缺點：事件驅動型，流程不夠清晰
發佈/訂閱(觀察者模式)

相似於事件監聽，可是能夠經過‘消息中心’，瞭解如今有多少發佈者，多少訂閱者
Promise對象

優勢：能夠利用then方法，進行鏈式寫法；能夠書寫錯誤時的回調函數；
缺點：編寫和理解，相對比較難
Generator函數

優勢：函數體內外的數據交換、錯誤處理機制
缺點：流程管理不方便
async函數

優勢：內置執行器、更好的語義、更廣的適用性、返回的是Promise、結構清晰。
缺點：錯誤處理機制
5七、對原生Javascript瞭解程度
數據類型、運算、對象、Function、繼承、閉包、做用域、原型鏈、事件、RegExp、JSON、Ajax、DOM、BOM、內存泄漏、跨域、異步裝載、模板引擎、前端MVC、路由、模塊化、Canvas、ECMAScript
5八、Js動畫與CSS動畫區別及相應實現
CSS3的動畫的優勢
在性能上會稍微好一些，瀏覽器會對CSS3的動畫作一些優化
代碼相對簡單
缺點
在動畫控制上不夠靈活
兼容性很差
JavaScript的動畫正好彌補了這兩個缺點，控制能力很強，能夠單幀的控制、變換，同時寫得好徹底能夠兼容IE6，而且功能強大。對於一些複雜控制的動畫，使用javascript會比較靠譜。而在實現一些小的交互動效的時候，就多考慮考慮CSS吧
5九、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 元素，由於每次讀取都會掃描一遍頁面上的選擇器相關元素，速度會大大下降
60、gulp是什麼？
gulp是前端開發過程當中一種基於流的代碼構建工具，是自動化項目的構建利器；它不只能對網站資源進行優化，並且在開發過程當中不少重複的任務可以使用正確的工具自動完成
Gulp的核心概念：流
流，簡單來講就是創建在面向對象基礎上的一種抽象的處理數據的工具。在流中，定義了一些處理數據的基本操做，如讀取數據，寫入數據等，程序員是對流進行全部操做的，而不用關心流的另外一頭數據的真正流向
gulp正是經過流和代碼優於配置的策略來儘可能簡化任務編寫的工做
Gulp的特色：
易於使用：經過代碼優於配置的策略，gulp 讓簡單的任務簡單，複雜的任務可管理
構建快速利用 Node.js 流的威力，你能夠快速構建項目並減小頻繁的 IO 操做
易於學習經過最少的 API，掌握 gulp 絕不費力，構建工做盡在掌握：如同一系列流管道
6一、說一下Vue的雙向綁定數據的原理
vue.js 則是採用數據劫持結合發佈者-訂閱者模式的方式，經過Object.defineProperty()來劫持各個屬性的setter，getter，在數據變更時發佈消息給訂閱者，觸發相應的監聽回調
$jQuery
一、你以爲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實現的鏈式調用能夠節約代碼，所返回的都是同一個對象，能夠提升代碼效率
二、jQuery 的實現原理？
(function(window, undefined) {})(window);
jQuery 利用 JS 函數做用域的特性，採用當即調用表達式包裹了自身，解決命名空間和變量污染問題
window.jQuery = window. $= j Q u e r y; 在闭包当中将 j Q u e r y 和$


$.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();

五、jQuery 的屬性拷貝(extend)的實現原理是什麼，如何實現深拷貝？
淺拷貝（只複製一份原始對象的引用）
var newObject = $. e x t e n d (, o l d O b j e c t); 深拷贝（对原始对象属性所引用的对象进行进行递归拷贝） v a r n e w O b j e c t =$

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

七、jQuery 中的 bind(), live(), delegate(), on()的區別？
bind 直接綁定在目標元素上
live 經過冒泡傳播事件，默認document上，支持動態數據
delegate 更精確的小範圍使用事件代理，性能優於 live
on 是最新的1.9版本整合了以前的三種方式的新事件綁定機制
八、是否知道自定義事件？ jQuery 裏的 fire 函數是什麼意思，何時用？
事件即「發佈/訂閱」模式，自定義事件即「消息發佈」，事件的監聽即「訂閱訂閱」
JS 原生支持自定義事件，示例：
document.createEvent(type); // 建立事件
event.initEvent(eventType, canBubble, prevent); // 初始化事件
target.addEventListener(‘dataavailable’, handler, false); // 監聽事件
target.dispatchEvent(e); // 觸發事件
jQuery 裏的 fire 函數用於調用 jQuery 自定義事件列表中的事件
九、jQuery 經過哪一個方法和 Sizzle 選擇器結合的？
Sizzle 選擇器採起 Right To Left 的匹配模式，先搜尋全部匹配標籤，再判斷它的父節點
jQuery 經過 $(selecter).find(selecter); 和 Sizzle 選擇器結合
十、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);
十一、jQuery 一個對象能夠同時綁定多個事件，這是如何實現的？
 $("#btn").on("mouseover mouseout", func);

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

十二、針對 jQuery 的優化方法？
緩存頻繁操做DOM對象
儘可能使用id選擇器代替class選擇器
老是從#id選擇器來繼承
儘可能使用鏈式操做
使用時間委託 on綁定事件
採用jQuery的內部函數data()來存儲數據
使用最新版本的 jQuery
1三、jQuery 的 slideUp 動畫，當鼠標快速連續觸發, 動畫會滯後反覆執行，該如何處理呢?
在觸發元素上的事件設置爲延遲處理：使用 JS 原生 setTimeout 方法
在觸發元素的事件時預先中止全部的動畫，再執行相應的動畫事件： $(‘ . t a b^{'}) . s t o p () . s l i d e U p (); 14 、 j Q u e r y U I 如何自定义组件？通过向$

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;
 }

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

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

三、冒泡排序
每次比較相鄰的兩個數，若是後一個比前一個小，換位置

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));

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

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));

五、編寫一個方法求一個字符串的字節長度
假設：一個英文字符佔用一個字節，一箇中文字符佔用兩個字節

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"));

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

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

$其餘
一、談談你對重構的理解
網站重構：在不改變外部行爲的前提下，簡化結構、添加可讀性，而在網站前端保持一致的行爲。也就是說是在不改變UI的狀況下，對網站進行優化，在擴展的同時保持一致的UI
對於傳統的網站來講重構一般是：

表格(table)佈局改成DIV+CSS
使網站前端兼容於現代瀏覽器(針對於不合規範的CSS、如對IE6有效的)
對於移動平臺的優化
針對於SEO進行優化
二、什麼樣的前端代碼是好的
高複用低耦合，這樣文件小，好維護，並且好擴展。
三、對前端工程師這個職位是怎麼樣理解的？它的前景會怎麼樣？
前端是最貼近用戶的程序員，比後端、數據庫、產品經理、運營、安全都近

實現界面交互
提高用戶體驗
有了Node.js，前端能夠實現服務端的一些事情
前端是最貼近用戶的程序員，前端的能力就是能讓產品從 90分進化到 100 分，甚至更好，
與團隊成員，UI設計，產品經理的溝通；
作好的頁面結構，頁面重構和用戶體驗；
四、你以爲前端工程的價值體如今哪
爲簡化用戶使用提供技術支持（交互部分）
爲多個瀏覽器兼容性提供支持
爲提升用戶瀏覽速度（瀏覽器性能）提供支持
爲跨平臺或者其餘基於webkit或其餘渲染引擎的應用提供支持
爲展現數據提供支持（數據接口）
五、平時如何管理你的項目？
先期團隊必須肯定好全局樣式（globe.css），編碼模式(utf-8) 等；
編寫習慣必須一致（例如都是採用繼承式的寫法，單樣式都寫成一行）；
標註樣式編寫人，各模塊都及時標註（標註關鍵樣式調用的地方）；
頁面進行標註（例如頁面模塊開始和結束）；
CSS跟HTML 分文件夾並行存放，命名都得統一（例如style.css）；
JS 分文件夾存放命名以該JS功能爲準的英文翻譯。
圖片採用整合的 images.png png8 格式文件使用 - 儘可能整合在一塊兒使用方便未來的管理
人事面
面試完你還有什麼問題要問的嗎
你有什麼愛好?
你最大的優勢和缺點是什麼?
你爲何會選擇這個行業，職位?
你以爲你適合從事這個崗位嗎?
你有什麼職業規劃?
你對工資有什麼要求?
如何看待前端開發？
將來三到五年的規劃是怎樣的？
常問
自我介紹
你的項目中技術難點是什麼？遇到了什麼問題？你是怎麼解決的？
你認爲哪一個項目作得最好？
最近在看哪些前端方面的書？
平時是如何學習前端開發的？
你最有成就感的一件事
你是怎麼學習前端的

原文連接 http://blog.poetries.top/2017/03/12/front-end-interview-summary

一、 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 問題

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

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

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

1 經過jsonp跨域
    1.）原生實現：

<script>
 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));
 }
</script>

二、 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)

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

弊端：請看下面渲染加載優化

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

更多跨域的具體內容請看  https://segmentfault.com/a/1190000011145364

三、渲染優化
1.禁止使用iframe（阻塞父文檔onload事件）；
iframe會阻塞主頁面的Onload事件； 搜索引擎的檢索程序沒法解讀這種頁面，不利於SEO;
*iframe和主頁面共享鏈接池，而瀏覽器對相同域的鏈接有限制，因此會影響頁面的並行加載。

使用iframe以前須要考慮這兩個缺點。若是須要使用iframe，最好是經過javascript
    動態給iframe添加src屬性值，這樣能夠繞開以上兩個問題。

2.禁止使用gif圖片實現loading效果（下降CPU消耗，提高渲染性能）；
三、使用CSS3代碼代替JS動畫（儘量避免重繪重排以及迴流）；
四、對於一些小圖標，能夠使用base64位編碼，以減小網絡請求。但不建議大圖使用，比較耗費CPU；
        小圖標優點在於：
            1.減小HTTP請求；
            2.避免文件跨域；
            3.修改及時生效；

五、頁面頭部的<style></style> 會阻塞頁面；（由於 Renderer進程中 JS線程和渲染線程是互斥的）；
六、頁面頭部<script</script> 會阻塞頁面；（由於 Renderer進程中 JS線程和渲染線程是互斥的）；
七、頁面中空的 href 和 src 會阻塞頁面其餘資源的加載 (阻塞下載進程)；

八、網頁Gzip，CDN託管，data緩存 ，圖片服務器；
九、前端模板 JS+數據，減小因爲HTML標籤致使的帶寬浪費，前端用變量保存AJAX請求結果，每次操做本地變量，不用請求，減小請求次數
十、用innerHTML代替DOM操做，減小DOM操做次數，優化javascript性能。
十一、當須要設置的樣式不少時設置className而不是直接操做style。
十二、少用全局變量、緩存DOM節點查找的結果。減小IO讀取操做。
1三、避免使用CSS Expression（css表達式)又稱Dynamic properties(動態屬性)。
1四、圖片預加載，將樣式表放在頂部，將腳本放在底部  加上時間戳。

1五、 避免在頁面的主體佈局中使用table，table要等其中的內容徹底下載以後纔會顯示出來，顯示比div+css佈局慢。
    對普通的網站有一個統一的思路，就是儘可能向前端優化、減小數據庫操做、減小磁盤IO。
        向前端優化指的是，在不影響功能和體驗的狀況下，能在瀏覽器執行的不要在服務端執行，
        能在緩存服務器上直接返回的不要到應用服務器，程序能直接取得的結果不要到外部取得，
        本機內能取得的數據不要到遠程取，內存能取到的不要到磁盤取，緩存中有的不要去數據庫查詢。
        減小數據庫操做指減小更新次數、緩存結果減小查詢次數、將數據庫執行的操做盡量的讓你的程序完成（例如join查詢），
        減小磁盤IO指儘可能不使用文件系統做爲緩存、減小讀寫文件次數等。程序優化永遠要優化慢的部分，換語言是沒法「優化」的。

四、事件的各個階段
1：捕獲階段 —> 2：目標階段 —> 3：冒泡階段
document —> target目標 —-> document

由此，addEventListener的第三個參數設置爲true和false的區別已經很是清晰了：

true表示該元素在事件的「捕獲階段」（由外往內傳遞時）響應事件；

false表示該元素在事件的「冒泡階段」（由內向外傳遞時）響應事件。
五、let var const
let 容許你聲明一個做用域被限制在塊級中的變量、語句或者表達式
let綁定不受變量提高的約束，這意味着let聲明不會被提高到當前
該變量處於從塊開始到初始化處理的「暫存死區」。

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

const 聲明建立一個值的只讀引用 (即指針)
這裏就要介紹下 JS 經常使用類型
String、Number、Boolean、Array、Object、Null、Undefined
其中基本類型有 Undefined、Null、Boolean、Number、String，保存在棧中；
複合類型有 Array、Object ，保存在堆中；

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

六、箭頭函數
語法比函數表達式更短，而且不綁定本身的this，arguments，super或 new.target。這些函數表達式最適合用於非方法函數，而且它們不能用做構造函數。

七、快速的讓一個數組亂序

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

此處解釋：（語言組織能力不足，請勿吐槽）

首先：當return 的值

小於 0 ，那麼 a 會被排列到 b 以前；
等於 0 ， a 和 b 的相對位置不變；
大於 0 ， b 會被排列到 a 以前；

這裏你會發現起始的時候數組是正序排列，每當進行一次排列的時候，都會先隨機一個隨機數
（注意這裏的每一次排列指每個紅框指一次排列，共9次排列，一次排列中可能存在屢次比較）；

當一次排列的隨機數大於0.5 時將會進行第二次比較，當第二次隨機數仍然大於0.5 時，
將會再進行一次比較，直到隨機數大於0.5 或者排列到第一位；

當一次排列的隨機數小於0.5時當前比較的兩項索引將不會改變，繼續下一次的排列；
八、字體font-family

@ 宋體      SimSun
@ 黑體 SimHei
@ 微信雅黑 Microsoft Yahei
@ 微軟正黑體 Microsoft JhengHei
@ 新宋體 NSimSun
@ 新細明體 MingLiU
@ 細明體 MingLiU
@ 標楷體 DFKai-SB
@ 仿宋 FangSong
@ 楷體 KaiTi
@ 仿宋_GB2312 FangSong_GB2312
@ 楷體_GB2312 KaiTi_GB2312 
@
@ 說明：中文字體多數使用宋體、雅黑，英文用Helvetica

body { font-family: Microsoft Yahei,SimSun,Helvetica; }

九、可能用到的meta標籤

<!-- 設置縮放 -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
<!-- 可隱藏地址欄，僅針對IOS的Safari（注：IOS7.0版本之後，safari上已看不到效果） -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 僅針對IOS的Safari頂端狀態條的樣式（可選default/black/black-translucent ） -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- IOS中禁用將數字識別爲電話號碼/忽略Android平臺中對郵箱地址的識別 -->
<meta name="format-detection"content="telephone=no, email=no" />

其餘meta標籤
<!-- 啓用360瀏覽器的極速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 針對手持設備優化，主要是針對一些老的不識別viewport的瀏覽器，好比黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微軟的老式瀏覽器 -->
<meta name="MobileOptimized" content="320">
<!-- uc強制豎屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ強制豎屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC強制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ強制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC應用模式 -->
<meta name="browsermode" content="application">
<!-- QQ應用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 點擊無高光 -->
<meta name="msapplication-tap-highlight" content="no">

十、消除transition閃屏

.css {
 -webkit-transform-style: preserve-3d;
 -webkit-backface-visibility: hidden;
 -webkit-perspective: 1000;
}

過渡動畫（在沒有啓動硬件加速的狀況下）會出現抖動的現象， 以上的 解決方案只是改變 視角 來啓動硬件加速的一種方式；
啓動硬件加速的 另一種方式：

.css {
 -webkit-transform: translate3d(0,0,0);
 -moz-transform: translate3d(0,0,0);
 -ms-transform: translate3d(0,0,0);
 transform: translate3d(0,0,0);
}

啓動硬件加速
最經常使用的方式：translate3d、translateZ、transform

opacity屬性/過渡動畫（須要動畫執行的過程當中纔會建立合成層，動畫沒有開始或結束後元素還會回到以前的狀態）

will-chang屬性（這個比較偏僻），通常配合opacity與translate使用（並且經測試，除了上述能夠引起硬件加速的屬性外，
其它屬性並不會變成複合層），

弊端： 硬件加速會致使 CPU性能佔用量過大，電池電量消耗加大 ；所以 儘可能避免氾濫使用硬件加速。

十一、android 4.x bug
1.三星 Galaxy S4中自帶瀏覽器不支持border-radius縮寫
2.同時設置border-radius和背景色的時候，背景色會溢出到圓角之外部分
3.部分手機(如三星)，a連接支持鼠標:visited事件，也就是說連接訪問後文字變爲紫色
4.android沒法同時播放多音頻audio
5.oppo 的border-radius 會失效
十二、JS 判斷設備來源

function deviceType(){
 var ua = navigator.userAgent;
 var agent = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"]; 
 for(var i=0; i<len,len = agent.length; i++){
 if(ua.indexOf(agent[i])>0){ 
 break;
 }
 }
}
deviceType();
window.addEventListener('resize', function(){
 deviceType();
})


微信的 有些不太同樣
function isWeixin(){
 var ua = navigator.userAgent.toLowerCase();
 if(ua.match(/MicroMessenger/i)=='micromessenger'){
 return true;
 }else{
 return false;
 }
}

1三、audio元素和video元素在ios和andriod中沒法自動播放

緣由： 由於各大瀏覽器都爲了節省流量，作出了優化，在用戶沒有行爲動做時（交互）不予許自動播放；

/音頻，寫法一

1	<audio src="music/bg.mp3" autoplay loop controls>你的瀏覽器還不支持哦</audio>

//音頻，寫法二

<audio controls="controls"> 
 <source src="music/bg.ogg" type="audio/ogg"></source>
 <source src="music/bg.mp3" type="audio/mpeg"></source>
 優先播放音樂bg.ogg，不支持在播放bg.mp3
</audio>

//JS綁定自動播放（操做window時，播放音樂）

1
2
3

$(window).one('touchstart', function(){
 music.play();
})

//微信下兼容處理

1
2
3

document.addEventListener("WeixinJSBridgeReady", function () {
 music.play();
}, false);

//小結
//1.audio元素的autoplay屬性在IOS及Android上沒法使用，在PC端正常；
//2.audio元素沒有設置controls時，在IOS及Android會佔據空間大小，而在PC端Chrome是不會佔據任何空間；
//3.注意不要遺漏微信的兼容處理須要引用微信JS；

1四、css實現單行文本溢出顯示 …
直接上效果：相對於多行文本溢出作處理，單行要簡單多，且更容易理解。

實現方法


overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

固然還須要加寬度width屬來兼容部分瀏覽。
1五、實現多行文本溢出顯示…
效果：

實現方法：

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

適用範圍：

因使用了WebKit的CSS擴展屬性，該方法適用於WebKit瀏覽器及移動端；

注：

一、-webkit-line-clamp用來限制在一個塊元素顯示的文本的行數。爲了實現該效果，它須要組合其餘的WebKit屬性。常見結合屬性：
二、display: -webkit-box; 必須結合的屬性，將對象做爲彈性伸縮盒子模型顯示。
三、-webkit-box-orient 必須結合的屬性，設置或檢索伸縮盒對象的子元素的排列方式。
若是你覺着這樣還不夠美觀，那麼就接着往下看：

效果：

這樣是否是你想要的呢？

實現方法：

div {
 position: relative;
 line-height: 20px;
 max-height: 40px;
 overflow: hidden;
}

div:after {
 content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
 background: -webkit-linear-gradient(left, transparent, #fff 55%);
 background: -o-linear-gradient(right, transparent, #fff 55%);
 background: -moz-linear-gradient(right, transparent, #fff 55%);
 background: linear-gradient(to right, transparent, #fff 55%);
}

不要只顧着吃，要注意胃口，此方法有個弊端那就是【未超出行的狀況下也會出現省略號】，這樣會不會很挫！！！沒辦法，只能結合JS 進行優化該方法了。

注：

一、將height設置爲line-height的整數倍，防止超出的文字露出。
二、給p::after添加漸變背景可避免文字只顯示一半。
三、因爲ie6-7不顯示content內容，因此要添加標籤兼容ie6-7（如：…）；兼容ie8須要將::after替換成:after。
1六、讓圖文不可複製
這點應該你們都很熟悉了，某些時候【你懂的】爲了快捷搜索答案，但是打死也不讓你複製


-webkit-user-select: none; 
-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;

那有些網頁爲了尊重原創，複製的文本都會被加上一段來源說明，是如何作到的呢？問的好！等的就是你這個問題 -_- 。

大體思路：

一、答案區域監聽copy事件，並阻止這個事件的默認行爲。
二、獲取選中的內容（window.getSelection()）加上版權信息，而後設置到剪切板（clipboarddata.setData()）。

1七、盒子垂直水平居中
這個問題好像面試必問的吔！反正我是必問的，哈哈！！！其實無關多少種實現思路，只要你能實現就能夠！

提供4種方法

一、定位盒子寬高已知， position: absolute; left: 50%; top: 50%; margin-left:-自身一半寬度; margin-top: -自身一半高度;

二、table-cell佈局父級 display: table-cell; vertical-align: middle; 子級 margin: 0 auto;

三、定位 + transform ; 適用於子盒子寬高不定時；（這裏是本人經常使用方法）


position: relative / absolute;
/*top和left偏移各爲50%*/
 top: 50%;
 left: 50%;
/*translate(-50%,-50%) 偏移自身的寬和高的-50%*/
transform: translate(-50%, -50%); 注意這裏啓動了3D硬件加速哦 會增長耗電量的 （至於何是3D加速 請看瀏覽器進程與線程篇）

四、flex 佈局
父級：
/flex 佈局/
display: flex;
/實現垂直居中/
align-items: center;
/實現水平居中/
justify-content: center;

再加一種水平方向上居中：margin-left : 50% ; transform: translateX(-50%);
1八、改變placeholder的字體顏色大小
其實這個方法也就在PC端能夠，真機上屁用都沒有，當時我就哭了。但仍是貼出來吧


input::-webkit-input-placeholder { 
 /* WebKit browsers */ 
 font-size:14px;
 color: #333;
} 
input::-moz-placeholder { 
 /* Mozilla Firefox 19+ */ 
 font-size:14px;
 color: #333;
} 
input:-ms-input-placeholder { 
 /* Internet Explorer 10+ */ 
 font-size:14px;
 color: #333;
}

1九、最快捷的數組求最大值

1 2	var arr = [ 1,5,1,7,5,9]; Math.max(...arr) // 9

20、更短的數組去重寫法

1
2
3

[...new Set([2,"12",2,12,1,2,1,6,12,13,6])]

// [2, "12", 12, 1, 6, 13]

2一、 vue 父子組件嵌套時，組件內部的各個生命週期鉤子觸發前後順序
首先咱們能夠把子組件當作function函數來看待，當父組件 import 子組件的時候，就當是聲明瞭並加載了這個函數，
在調用的時候纔會去執行這個函數（子組件）。那麼父子組件中的各個聲明週期鉤子觸發的前後順序是怎樣的呢？
以下圖：

做者：三毛丶
連接：http://www.javashuo.com/article/p-miphhbgw-dw.html
來源：掘金
著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。

flex 佈局與 grid 佈局。
實現 Vue SSR 。
從 SPA 使用最小成本遷移到 SSR 。
實現方法：（未完成）
根據指定元素，在數組裏面找出 ff 數組（ff 數組這個名字是我瞎說的）。好比數組 [2, 3, 6, 7] ，指定元素 7，則 ff 數組是 [2, 2, 3]（2+2+3 = 7）和 [7]。若指定元素 6，則 ff 數組爲 [2, 2, 2], [3, 3], 和 [6] 。
實現 Promise.finally。
另外一種方式實現 Vue 的響應式原理。
Vue 組件 data 爲何必須是函數。
Vue computed 實現。
diff 算法實現。
Vue complier 實現。
快排及其優化。
緩存算法實現及其優化（緩存算法簡單模型：假設能夠緩存三個數據，請求前三個數據時，直接進緩存列表，當請求第四個數據時，若命中緩存，將被緩存的數據放入緩存列表頭部，不然把新加入的數據放入緩存列表頭部，淘汰最後一個數據）。
怎麼快速定位哪一個組件出現性能問題。
http 狀態碼 202, 204 。
WebSocket 。
儘量多的說出你對 Electron 的理解。

相關解答
flex 佈局與 grid 佈局
這個問題比較簡單，用 flex 與 grid 實現以下便可：

實現方式以下：

<html>
 <head>
 <style>
 
 /* flex */
 .box {
 display: flex;
 flex-wrap: wrap;
 width: 100%;
 }
 .box div {
 width: calc(100% / 3 - 2px);
 height: 100px;
 border: 1px solid black;
 }

 /* grid */
 .box {
 display: grid;
 grid-template-columns: 1fr 1fr 1fr;
 width: 100%;
 }

 .box div {
 height: 100px;
 border: 1px solid black;
 }
 </style>
 <head>
 <body>
 <div class="box">
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 </div> 
 <body>
</html>

grid 學習：https://www.jianshu.com/p/d183265a8dad
實現 Vue SSR
一些想法寫在下題。
從 SPA 使用最小成本遷移到 SSR
Vue SSR 的好處就很少說了，這有一篇相關文章服務端渲染與客戶端渲染。
簡單的總結下 Vue SSR 的實現。
有一張實現圖：

其基本實現原理：

app.js 做爲客戶端與服務端的公用入口，導出 Vue 根實例，供客戶端 entry 與服務端 entry 使用。客戶端 entry 主要做用掛載到 DOM 上，服務端 entry 除了建立和返回實例，還進行路由匹配與數據預獲取。
webpack 爲客服端打包一個 Client Bundle ，爲服務端打包一個 Server Bundle 。
服務器接收請求時，會根據 url，加載相應組件，獲取和解析異步數據，建立一個讀取 Server Bundle 的 BundleRenderer，而後生成 html 發送給客戶端。
客戶端混合，客戶端收到從服務端傳來的 DOM 與本身的生成的 DOM 進行對比，把不相同的 DOM 激活，使其能夠可以響應後續變化，這個過程稱爲客戶端激活。爲確保混合成功，客戶端與服務器端須要共享同一套數據。在服務端，能夠在渲染以前獲取數據，填充到 stroe 裏，這樣，在客戶端掛載到 DOM 以前，能夠直接從 store 裏取數據。首屏的動態數據經過 window.INITIAL_STATE 發送到客戶端。

Vue SSR 的實現，主要就是把 Vue 的組件輸出成一個完整 HTML, vue-server-renderer 就是幹這事的。
純客戶端輸出過程有一個 complier 過程（「下題」中有一個簡單描述），主要做用是將 template 轉化成 render 字符串。
Vue SSR 須要作的事多點（輸出完整 HTML），除了 complier -> vnode，還需如數據獲取填充至 HTML、客戶端混合（hydration）、緩存等等。
相比於其餘模板引擎（ejs, jade 等），最終要實現的目的是同樣的，性能上可能要差點。
參考：

https://ssr.vuejs.org/zh/
http://www.javashuo.com/article/p-odhdjmon-kk.html

ff 數組
實現 Promise.finally
finally 方法用於指定無論 Promise 對象最後狀態如何，都會執行的操做，使用方法以下：

Promise
 .then(result => { ··· })
 .catch(error => { ··· })
 .finally(() => { ··· })

finally 特色：

不接收任何參數。
finally 本質上是 then 方法的特例。


Promise.prototype.finally = function (callback) {
 let P = this.constructor
 return this.then(
 value => P.resolve(callback()).then(() => value),
 reason => P.resolve(callback()).then(() => { throw reason })
 )
}

另外一種方式實現 Vue 的響應式原理
Vue 的響應式原理是使用 Object.defineProperty 追蹤依賴，當屬性被訪問或改變時通知變化。
有兩個不足之處：

不能檢測到增長或刪除的屬性。
數組方面的變更，如根據索引改變元素，以及直接改變數組長度時的變化，不能被檢測到。

緣由差很少，無非就是沒有被 getter/setter 。
第一個比較容易理解，爲何數組長度不能被 getter/setter ？
在知乎上找了一個答案：若是你知道數組的長度，理論上是能夠預先給全部的索引設置 getter/setter 的。可是一來不少場景下你不知道數組的長度，二來，若是是很大的數組，預先加 getter/setter 性能負擔較大。
如今有一個替代的方案 Proxy，但這東西兼容性很差，早晚要上的。
Proxy，在目標對象以前架設一層攔截。具體，能夠參考 http://es6.ruanyifeng.com/#docs/reference
Vue 組件 data 爲何必須是函數
理解兩點：

每一個組件都是 Vue 的實例。
組件共享 data 屬性，當 data 的值是同一個引用類型的值時，改變其中一個會影響其餘。

Vue computed 實現

這個題目有兩家問了，感受都不是答得很好。

從兩個問題出發：

創建與其餘屬性（如：data、 Store）的聯繫；
屬性改變後，通知計算屬性從新計算。

實現時，主要以下

初始化 data，使用 Object.defineProperty 把這些屬性所有轉爲 getter/setter。
初始化 computed, 遍歷 computed 裏的每一個屬性，每一個 computed 屬性都是一個 watch 實例。每一個屬性提供的函數做爲屬性的 getter，使用 Object.defineProperty 轉化。
Object.defineProperty getter 依賴收集。用於依賴發生變化時，觸發屬性從新計算。
若出現當前 computed 計算屬性嵌套其餘 computed 計算屬性時，先進行其餘的依賴收集。

參考：http://www.javashuo.com/article/p-kosprlqj-bd.html
diff 算法實現

之前寫過兩篇文章討論這個算法的實現，沒想到過的過久，忘記了。（文章地址：https://github.com/jkchao/blog/issues/3 ，https://github.com/jkchao/blog/issues/4）。
也好，稱此機會總結下

diff 的實現主要經過兩個方法，patchVnode 與 updateChildren 。
patchVnode 有兩個參數，分別是老節點 oldVnode, 新節點 vnode 。主要分五種狀況：

if (oldVnode === vnode)，他們的引用一致，能夠認爲沒有變化。
if(oldVnode.text !== null && vnode.text !== null && oldVnode.text !== vnode.text)，文本節點的比較，須要修改，則會調用Node.textContent = vnode.text。
if( oldCh && ch && oldCh !== ch ), 兩個節點都有子節點，並且它們不同，這樣咱們會調用 updateChildren 函數比較子節點，這是diff的核心，後邊會講到。
if (ch)，只有新的節點有子節點，調用createEle(vnode)，vnode.el已經引用了老的dom節點，createEle函數會在老dom節點上添加子節點。
if (oldCh)，新節點沒有子節點，老節點有子節點，直接刪除老節點。

updateChildren 是關鍵，這個過程能夠歸納以下：

oldCh 和 newCh 各有兩個頭尾的變量 StartIdx 和 EndIdx ，它們的2個變量相互比較，一共有4種比較方式。若是 4 種比較都沒匹配，若是設置了key，就會用key進行比較，在比較的過程當中，變量會往中間靠，一旦 StartIdx > EndIdx 代表 oldCh 和 newCh 至少有一個已經遍歷完了，就會結束比較。
Vue complier 實現

之前寫過一篇「Vue 生面週期總結的文章」的文章，裏面提到了 complier 的做用，沒有作深刻了解。。。

模板解析這種事，本質是將數據轉化爲一段 html ，最開始出如今後端，通過各類處理吐給前端。隨着各類 mv* 的興起，模板解析交由前端處理。
總的來講，Vue complier 是將 template 轉化成一個 render 字符串。
能夠簡單理解成如下步驟：

parse 過程，將 template 利用正則轉化成 AST 抽象語法樹。
optimize 過程，標記靜態節點，後 diff 過程跳過靜態節點，提高性能。
generate 過程，生成 render 字符串。

參考：

http://www.javashuo.com/article/p-qawivsrh-dg.html
https://github.com/answershuto/learnVue/blob/master/docs/%E8%81%8A%E8%81%8AVue%E7%9A%84template%E7%BC%96%E8%AF%91.MarkDown

快排及其優化

前端對算法的要求仍是比較低的，但也是必不可少的一部分。

找到一篇比較不錯的文章：https://www.cnblogs.com/zichi/p/4788953.html
緩存算法實現及其優化
最簡單的一種思路就是使用數組存儲，而後讓我優化。
我。。。一臉懵逼。
有興趣的同窗能夠參考這個： http://www.cnblogs.com/dolphin0520/p/3749259.html 。
ps: 看來我得補補數據結構和算法相關的知識了。
怎麼快速定位哪一個組件出現性能問題
當面試官問這個問題，沒有 get 到面試官的點，扯了一堆亂七八糟沒用的 - -。
後來面試官說主要是用 timeline 工具。
大意是經過 timeline 來查看每一個函數的調用時常，定位出哪一個函數的問題，從而能判斷哪一個組件出了問題。
附上兩個使用 timeline 的文章：

http://www.javashuo.com/article/p-hbizibnk-bz.html
https://developers.google.cn/web/tools/chrome-devtools/?hl=zh-cn

http 狀態碼 202, 204

面試官不知道爲什麼扯到了 202, 204。。。好像是由本身帶進坑的。- -

202: 服務器已接受請求，但還沒有處理。
204: 服務器成功處理了請求，沒有返回任何內容。
這些狀態碼感受只要能記住經常使用的就 ok 了，固然還得了解 200 +, 300+, 400+, 500+ 表明什麼意思。
WebSocket

WebSocket 應該算是一個比較常問的面試點，若是問的不深的話，應該比較好回答。

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

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

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

http://www.ruanyifeng.com/blog/2017/05/websocket.html
https://www.cnblogs.com/chyingp/p/websocket-deep-in.html

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

之前寫過一篇簡單的關於 electron-vue 的文章，沒想到真有面試官問，並且問的挺深的。

最最重要的一點，electron 其實是一個套了 Chrome 的 node 程序。
因此應該是從兩個方面說開來：

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

Chrome 沒什麼好說的，是個前端都懂。

Vue、React相關問題

來源： segmentfault Cymiran
一、active-class是哪一個組件的屬性？嵌套路由怎麼定義？

答：vue-router模塊的router-link組件。
二、怎麼定義vue-router的動態路由？怎麼獲取傳過來的動態參數？

答：在router目錄下的index.js文件中，對path屬性加上/:id。使用router對象的params.id
三、vue-router有哪幾種導航鉤子？

答：三種，一種是全局導航鉤子：router.beforeEach(to,from,next)，
做用：跳轉前進行判斷攔截。第二種：組件內的鉤子；第三種：單獨路由獨享組件
四、scss是什麼？安裝使用的步驟是？有哪幾大特性？
答：預處理css，把css當前函數編寫，定義變量,嵌套。
先裝css-loader、node-loader、sass-loader等加載器模塊，
在webpack-base.config.js配置文件中加多一個拓展:extenstion，
再加多一個模塊：module裏面test、loader
4.一、scss是什麼？在vue.cli中的安裝使用步驟是？有哪幾大特性？

答：css的預編譯。
使用步驟：
第一步：用npm 下三個loader（sass-loader、css-loader、node-sass）
第二步：在build目錄找到webpack.base.config.js，在那個extends屬性中加一個拓展.scss
第三步：仍是在同一個文件，配置一個module屬性
第四步：而後在組件的style標籤加上lang屬性，例如：lang=」scss」
有哪幾大特性:
一、能夠用變量，例如（$變量名稱=值）；
二、能夠用混合器，例如（）
三、能夠嵌套
五、mint-ui是什麼？怎麼使用？說出至少三個組件使用方法？

答：基於vue的前端組件庫。npm安裝，而後import樣式和js，
vue.use（mintUi）全局引入。在單個組件局部引入：
import {Toast} from ‘mint-ui’。組件一：
Toast(‘登陸成功’)；組件二：mint-header；組件三：mint-swiper
六、v-model是什麼？怎麼使用？ vue中標籤怎麼綁定事件？

答：能夠實現雙向綁定，指令（v-class、v-for、v-if、v-show、v-on）。
vue的model層的data屬性。綁定事件：
七、axios是什麼？怎麼使用？描述使用它實現登陸功能的流程？

答：請求後臺資源的模塊。npm install axios -S裝好，
而後發送的是跨域，需在配置文件中config/index.js進行設置。
後臺若是是Tp5則定義一個資源路由。js中使用import進來，
而後.get或.post。返回在.then函數中若是成功，
失敗則是在.catch函數中
八、axios+tp5進階中，調用axios.post(‘api/user’)是進行的什麼操做？axios.put(‘api/user/8′)呢？

答：跨域，添加用戶操做，更新操做。
九、什麼是RESTful API？怎麼使用?

答：是一個api的標準，無狀態請求。請求的路由地址是固定的，
若是是tp5則先路由配置中把資源路由配置好。標準有：.post .put .delete
十、vuex是什麼？怎麼使用？哪一種功能場景使用它？

答：vue框架中狀態管理。在main.js引入store，注入。
新建了一個目錄store，….. export 。
場景有：單頁應用中，組件之間的狀態。音樂播放、登陸狀態、加入購物車
十一、mvvm框架是什麼？它和其它框架（jquery）的區別是什麼？哪些場景適合？

答：一個model+view+viewModel框架，數據模型model，viewModel鏈接兩個
區別：vue數據驅動，經過數據來顯示視圖層而不是節點操做。
場景：數據操做比較多的場景，更加便捷
十二、自定義指令（v-check、v-focus）的方法有哪些？它有哪些鉤子函數？還有哪些鉤子函數參數？

答：全局定義指令：在vue對象的directive方法裏面有兩個參數，一個是指令名稱，另一個是函數。組件內定義指令：directives
鉤子函數：bind（綁定事件觸發）、inserted(節點插入的時候觸發)、update（組件內相關更新）
鉤子函數參數：el、binding
1三、說出至少4種vue當中的指令和它的用法？

答：v-if：判斷是否隱藏；v-for：數據循環出來；v-bind:class：綁定一個屬性；v-model：實現雙向綁定
1四、vue-router是什麼？它有哪些組件？

答：vue用來寫路由一個插件。router-link、router-view
1五、導航鉤子有哪些？它們有哪些參數？

答：導航鉤子有：a/全局鉤子和組件內獨享的鉤子。b/beforeRouteEnter、afterEnter、beforeRouterUpdate、beforeRouteLeave
參數：有to（去的那個路由）、from（離開的路由）、next（必定要用這個函數才能去到下一個路由，若是不用就攔截）最經常使用就這幾種
1六、Vue的雙向數據綁定原理是什麼？

答：vue.js 是採用數據劫持結合發佈者-訂閱者模式的方式，經過Object.defineProperty()來劫持各個屬性的setter，getter，在數據變更時發佈消息給訂閱者，觸發相應的監聽回調。
具體步驟：
第一步：須要observe的數據對象進行遞歸遍歷，包括子屬性對象的屬性，都加上 setter和getter
這樣的話，給這個對象的某個值賦值，就會觸發setter，那麼就能監聽到了數據變化
第二步：compile解析模板指令，將模板中的變量替換成數據，而後初始化渲染頁面視圖，並將每一個指令對應的節點綁定更新函數，添加監聽數據的訂閱者，一旦數據有變更，收到通知，更新視圖
第三步：Watcher訂閱者是Observer和Compile之間通訊的橋樑，主要作的事情是:
一、在自身實例化時往屬性訂閱器(dep)裏面添加本身
二、自身必須有一個update()方法
三、待屬性變更dep.notice()通知時，能調用自身的update()方法，並觸發Compile中綁定的回調，則功成身退。
第四步：MVVM做爲數據綁定的入口，整合Observer、Compile和Watcher三者，經過Observer來監聽本身的model數據變化，經過Compile來解析編譯模板指令，最終利用Watcher搭起Observer和Compile之間的通訊橋樑，達到數據變化 -> 視圖更新；視圖交互變化(input) -> 數據model變動的雙向綁定效果。
ps：16題答案一樣適合」vue data是怎麼實現的？」此面試題。
1七、請詳細說下你對vue生命週期的理解？

答：總共分爲8個階段建立前/後，載入前/後，更新前/後，銷燬前/後。
建立前/後：在beforeCreated階段，vue實例的掛載元素 $e l 和数据对象 d a t a 都为 u n d e f i n e d ，还未初始化。在 c r e a t e d 阶段， v u e 实例的数据对象 d a t a 有了，$

答：首先，組件能夠提高整個項目的開發效率。可以把頁面抽象成多個相對獨立的模塊，解決了咱們傳統項目開發：效率低、難維護、複用性等問題。
而後，使用Vue.extend方法建立一個組件，而後使用Vue.component方法註冊組件。子組件須要數據，能夠在props中接受定義。而子組件修改好數據後，想把數據傳遞給父組件。能夠採用emit方法。
1九、你是怎麼認識vuex的？

答：vuex能夠理解爲一種開發模式或框架。好比PHP有thinkphp，java有spring等。
經過狀態（數據源）集中管理驅動組件的變化（比如spring的IOC容器對bean進行集中管理）。
應用級的狀態集中放在store中；改變狀態的方式是提交mutations，這是個同步的事物；異步邏輯應該封裝在action中。
20、vue-loader是什麼？使用它的用途有哪些？

答：解析.vue文件的一個加載器，跟template/js/style轉換成js模塊。
用途：js能夠寫es六、style樣式能夠scss或less、template能夠加jade等
2一、請說出vue.cli項目中src目錄每一個文件夾和文件的用法？

答：assets文件夾是放靜態資源；components是放組件；router是定義路由相關的配置;view視圖；app.vue是一個應用主組件；main.js是入口文件
2二、vue.cli中怎樣使用自定義的組件？有遇到過哪些問題嗎？

答：第一步：在components目錄新建你的組件文件（smithButton.vue），script必定要export default {
第二步：在須要用的頁面（組件）中導入：import smithButton from ‘../components/smithButton.vue’
第三步：注入到vue的子組件的components屬性上面,components:{smithButton}
第四步：在template視圖view中使用，
問題有：smithButton命名，使用的時候則smith-button。
2三、聊聊你對Vue.js的template編譯的理解？

答：簡而言之，就是先轉化成AST樹，再獲得的render函數返回VNode（Vue的虛擬DOM節點）
詳情步驟：
首先，經過compile編譯器把template編譯成AST語法樹（abstract syntax tree 即源代碼的抽象語法結構的樹狀表現形式），compile是createCompiler的返回值，createCompiler是用以建立編譯器的。另外compile還負責合併option。
而後，AST會通過generate（將AST語法樹轉化成render funtion字符串的過程）獲得render函數，render的返回值是VNode，VNode是Vue的虛擬DOM節點，裏面有（標籤名、子節點、文本等等）
2四、vue的組件是怎麼定義的？父組件怎麼給子組件傳值？

答：首先註冊vue.components，第一個參數是組件名稱，第二個參數是選項。
直接綁定一個屬性，而後在子組件props裏面接收
2五、使用過element.ui嗎？說下它其中兩個組件的使用方法？

答：使用過用過一個佈局的，它是由24份，它的寫法是:span後面帶的數字它佔24份裏面的寬度。:offset是它
的間距，後面也是跟數字，也是從24份裏面取的。
input按鈕，標籤是el-input，後面type跟上一個屬性就是顯示不一樣按鈕的類型，有默認的default
（默認的）、success（成功的）、warning（警告）、danger（危險）、info（）、primary（）
2六、說下你對mvvm的理解？雙向綁定的理解?

答：mvvm就是vm框架視圖、m模型就是用來定義驅動的數據、v通過數據改變後的html、vm就是用來實現雙向綁定
雙向綁定:一個變了另一個跟着變了，例如：視圖一個綁定了模型的節點有變化，模型對應的值會跟着變
2七、說出你所使用過的vue指令

答：v-on（監聽事件、@change、@click）、v-if（判斷的）、v-show（顯示/隱藏）、v-bind（綁定屬性、:disabled、:src）
2八、你以爲怎樣的自定義組件是完善的？至少說出4點

答：第一點、能夠通用
第二點、代碼儘可能簡潔
第三點、容易修改
第四點、功能要多一點
1、請說下具體使用vue的理解？

答：一、使用vue沒必要擔憂佈局更改和類名重複致使的js重寫，由於它是靠數據驅動雙向綁定，底層是經過Object.defineProperty() 定義的數據 set、get 函數原理實現。
二、組件化開發，讓項目的可拓展性、移植性更好，代碼重用性更高，就好像農民工建房子，拿起本身的工具包就能夠開工。項目經理坐等收樓就好。
三、單頁應用的體驗零距離接觸安卓原生應用，局部組件更新界面，讓用戶體驗更快速省時。
四、js的代碼無形的規範，團隊合做開發代碼可閱讀性更高。
2、你以爲哪些項目適合vue框架？

答：一、數據信息量比較多的，反之相似企業網站就無需此框架了。
二、手機web和app應用多端共用一套界面的項目，由於使用vue.cli+webpack後的前端目錄，很是有利於項目的跨平臺部署。
3、怎麼理解MVVM模式的這些框架？

答：一、M就是Model模型層，存的一個數據對象。
二、V就是View視圖層，全部的html節點在這一層。
三、VM就是ViewModel，它經過data屬性鏈接Model模型層，經過el屬性鏈接View視圖層。
4、PC端項目你會在哪些場景使用Vue框架？

答：上萬級數據須要瀑布流更新和搜索的時候，由於數據龐大的時候，用原生的dom操做js和html都會有列表的html佈局，迭代很困難。再一個dom節點的大面積添加會影響性能。
那麼vue爲何解決這些問題呢？
第一：只需用v-for在view層一個地方遍歷數據便可，無需複製一段html代碼在js和html兩個地方。
第二：vue經過Virtual Dom就是在js中模擬DOM對象樹來優化DOM操做。
vuex
一、vuex有哪幾種屬性？

答：有五種，分別是 State、 Getter、Mutation 、Action、 Module
二、vuex的State特性是？

答：
1、Vuex就是一個倉庫，倉庫裏面放了不少對象。其中state就是數據源存放地，對應於與通常Vue對象裏面的data
2、state裏面存放的數據是響應式的，Vue組件從store中讀取數據，如果store中的數據發生改變，依賴這個數據的組件也會發生更新
3、它經過mapState把全局的 state 和 getters 映射到當前組件的 computed 計算屬性中
三、vuex的Getter特性是？

答：
1、getters 能夠對State進行計算操做，它就是Store的計算屬性
2、雖然在組件內也能夠作計算屬性，可是getters 能夠在多組件之間複用
3、若是一個狀態只在一個組件內使用，是能夠不用getters
四、vuex的Mutation特性是？

答：
1、Action 相似於 mutation，不一樣在於：
2、Action 提交的是 mutation，而不是直接變動狀態。
3、Action 能夠包含任意異步操做
五、Vue.js中ajax請求代碼應該寫在組件的methods中仍是vuex的actions中？

答：
1、若是請求來的數據是否是要被其餘組件公用，僅僅在請求的組件內使用，就不須要放入vuex 的state裏。
2、若是被其餘地方複用，這個很大概率上是須要的，若是須要，請將請求放入action裏，方便複用，幷包裝成promise返回，在調用處用async await處理返回的數據。若是不要複用這個請求，那麼直接寫在vue文件裏很方便。
六、不用Vuex會帶來什麼問題？

答：
1、可維護性會降低，你要想修改數據，你得維護三個地方
2、可讀性會降低，由於一個組件裏的數據，你根本就看不出來是從哪來的
3、增長耦合，大量的上傳派發，會讓耦合性大大的增長，原本Vue用Component就是爲了減小耦合，如今這麼用，和組件化的初衷相背。
生命週期
一、什麼是vue生命週期？

答： Vue 實例從建立到銷燬的過程，就是生命週期。也就是從開始建立、初始化數據、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列過程，咱們稱這是 Vue 的生命週期。
二、vue生命週期的做用是什麼？

答：它的生命週期中有多個事件鉤子，讓咱們在控制整個Vue實例的過程時更容易造成好的邏輯。
三、vue生命週期總共有幾個階段？

答：它能夠總共分爲8個階段：建立前/後, 載入前/後,更新前/後,銷燬前/銷燬後
四、第一次頁面加載會觸發哪幾個鉤子？

答：第一次頁面加載時會觸發 beforeCreate, created, beforeMount, mounted 這幾個鉤子
五、DOM 渲染在哪一個週期中就已經完成？
答：DOM 渲染在 mounted 中就已經完成了。

六、簡單描述每一個週期具體適合哪些場景？

答：生命週期鉤子的一些使用方法： beforecreate : 能夠在這加個loading事件，在加載實例時觸發 created : 初始化完成時的事件寫在這裏，如在這結束loading事件，異步請求也適宜在這裏調用 mounted : 掛載元素，獲取到DOM節點 updated : 若是對數據統一處理，在這裏寫上相應函數 beforeDestroy : 能夠作一個確認中止事件的確認框 nextTick : 更新數據後當即操做dom
axios
一、axios的特色有哪些？

答：
1、Axios 是一個基於 promise 的 HTTP 庫，支持promise全部的API
2、它能夠攔截請求和響應
3、它能夠轉換請求數據和響應數據，並對響應回來的內容自動轉換成 JSON類型的數據
4、安全性更高，客戶端支持防護 XSRF
二、axios有哪些經常使用方法？

答：
1、axios.get(url[, config]) //get請求用於列表和信息查詢
2、axios.delete(url[, config]) //刪除
3、axios.post(url[, data[, config]]) //post請求用於信息的添加
4、axios.put(url[, data[, config]]) //更新操做
三、說下你瞭解的axios相關配置屬性？

答：
url是用於請求的服務器URL

method是建立請求時使用的方法,默認是get

baseURL將自動加在url前面，除非url是一個絕對URL。它能夠經過設置一個baseURL便於爲axios實例的方法傳遞相對URL

transformRequest容許在向服務器發送前，修改請求數據，只能用在’PUT’,’POST’和’PATCH’這幾個請求方法

headers是即將被髮送的自定義請求頭
headers:{‘X-Requested-With’:’XMLHttpRequest’},

params是即將與請求一塊兒發送的URL參數，必須是一個無格式對象(plainobject)或URLSearchParams對象
params:{
ID:12345
},

auth表示應該使用HTTP基礎驗證，並提供憑據
這將設置一個Authorization頭，覆寫掉現有的任意使用headers設置的自定義Authorization頭
auth:{
username:’janedoe’,
password:’s00pers3cret’
},

‘proxy’定義代理服務器的主機名稱和端口
auth表示HTTP基礎驗證應當用於鏈接代理，並提供憑據
這將會設置一個Proxy-Authorization頭，覆寫掉已有的經過使用header設置的自定義Proxy-Authorization頭。

proxy:{
host:'127.0.0.1',
port:9000,
auth::{
username:'mikeymike',
password:'rapunz3l'
}
},
keep-alive

vue性能

polyfill imort引入並執行應用場景：頁面開始一片空白
一、vue響應式原理？
二、vue-router實現原理？
三、爲何要選vue？與其它框架對比的優點和劣勢？
四、vue如何實現父子組件通訊，以及非父子組件通訊？
五、vuejs與angularjs以及react的區別？
六、vuex是用來作什麼的？
七、vue源碼結構

react

原文來自segmentfault 王下邀月熊_Chevalier

調用 setState 以後發生了什麼？
在代碼中調用setState函數以後，React 會將傳入的參數對象與組件當前的狀態合併，而後觸發所謂的調和過程（Reconciliation）。通過調和過程，React 會以相對高效的方式根據新的狀態構建 React 元素樹而且着手從新渲染整個UI界面。在 React 獲得元素樹以後，React 會自動計算出新的樹與老樹的節點差別，而後根據差別對界面進行最小化重渲染。在差別計算算法中，React 可以相對精確地知道哪些位置發生了改變以及應該如何改變，這就保證了按需更新，而不是所有從新渲染。

React 中 Element 與 Component 的區別是？
簡單而言，React Element 是描述屏幕上所見內容的數據結構，是對於 UI 的對象表述。典型的 React Element 就是利用 JSX 構建的聲明式代碼片而後被轉化爲createElement的調用組合。而 React Component 則是能夠接收參數輸入而且返回某個 React Element 的函數或者類。更多介紹能夠參考React Elements vs React Components。

在什麼狀況下你會優先選擇使用 Class Component 而不是 Functional Component？
在組件須要包含內部狀態或者使用到生命週期函數的時候使用 Class Component ，不然使用函數式組件。

React 中 refs 的做用是什麼？
Refs 是 React 提供給咱們的安全訪問 DOM 元素或者某個組件實例的句柄。咱們能夠爲元素添加ref屬性而後在回調函數中接受該元素在 DOM 樹中的句柄，該值會做爲回調函數的第一個參數返回：


class CustomForm extends Component {
 handleSubmit = () => {
 console.log("Input Value: ", this.input.value)
 }
 render () {
 return (
 <form onSubmit={this.handleSubmit}>
 <input
 type='text'
 ref={(input) => this.input = input} />
 <button type='submit'>Submit</button>
 </form>
 )
 }
}

上述代碼中的input域包含了一個ref屬性，該屬性聲明的回調函數會接收input對應的 DOM 元素，咱們將其綁定到this指針以便在其餘的類函數中使用。另外值得一提的是，refs 並非類組件的專屬，函數式組件一樣可以利用閉包暫存其值：


function CustomForm ({handleSubmit}) {
 let inputElement
 return (
 <form onSubmit={() => handleSubmit(inputElement.value)}>
 <input
 type='text'
 ref={(input) => inputElement = input} />
 <button type='submit'>Submit</button>
 </form>
 )
}

React 中 keys 的做用是什麼？
Keys 是 React 用於追蹤哪些列表中元素被修改、被添加或者被移除的輔助標識。

render () {
 return (
 <ul>
 {this.state.todoItems.map(({task, uid}) => {
 return <li key={uid}>{task}</li>
 })}
 </ul>
 )
}

在開發過程當中，咱們須要保證某個元素的 key 在其同級元素中具備惟一性。在 React Diff 算法中 React 會藉助元素的 Key 值來判斷該元素是新近建立的仍是被移動而來的元素，從而減小沒必要要的元素重渲染。此外，React 還須要藉助 Key 值來判斷元素與本地狀態的關聯關係，所以咱們毫不可忽視轉換函數中 Key 的重要性。

若是你建立了相似於下面的Twitter元素，那麼它相關的類定義是啥樣子的？

<Twitter username='tylermcginnis33'>
 {(user) => user === null
 ? <Loading />
 : <Badge info={user} />}
</Twitter>
import React, { Component, PropTypes } from 'react'
import fetchUser from 'twitter'
// fetchUser take in a username returns a promise
// which will resolve with that username's data.
class Twitter extends Component {
 // finish this
}

若是你還不熟悉回調渲染模式（Render Callback Pattern），這個代碼可能看起來有點怪。這種模式中，組件會接收某個函數做爲其子組件，而後在渲染函數中以props.children進行調用：


import React, { Component, PropTypes } from 'react'
import fetchUser from 'twitter'
class Twitter extends Component {
 state = {
 user: null,
 }
 static propTypes = {
 username: PropTypes.string.isRequired,
 }
 componentDidMount () {
 fetchUser(this.props.username)
 .then((user) => this.setState({user}))
 }
 render () {
 return this.props.children(this.state.user)
 }
}

這種模式的優點在於將父組件與子組件解耦和，父組件能夠直接訪問子組件的內部狀態而不須要再經過Props傳遞，這樣父組件可以更爲方便地控制子組件展現的UI界面。譬如產品經理讓咱們將本來展現的Badge替換爲Profile，咱們能夠輕易地修改下回調函數便可：


<Twitter username='tylermcginnis33'>
 {(user) => user === null
 ? <Loading />
 : <Profile info={user} />}
</Twitter>
Controlled Component 與 Uncontrolled Component 之間的區別是什麼？

React 的核心組成之一就是可以維持內部狀態的自治組件，不過當咱們引入原生的HTML表單元素時（input,select,textarea 等），咱們是否應該將全部的數據託管到 React 組件中仍是將其仍然保留在 DOM 元素中呢？這個問題的答案就是受控組件與非受控組件的定義分割。受控組件（Controlled Component）代指那些交由 React 控制而且全部的表單數據統一存放的組件。譬以下面這段代碼中username變量值並無存放到DOM元素中，而是存放在組件狀態數據中。任什麼時候候咱們須要改變username變量值時，咱們應當調用setState函數進行修改。


class ControlledForm extends Component {
 state = {
 username: ''
 }
 updateUsername = (e) => {
 this.setState({
 username: e.target.value,
 })
 }
 handleSubmit = () => {}
 render () {
 return (
 <form onSubmit={this.handleSubmit}>
 <input
 type='text'
 value={this.state.username}
 onChange={this.updateUsername} />
 <button type='submit'>Submit</button>
 </form>
 )
 }
}

而非受控組件（Uncontrolled Component）則是由DOM存放表單數據，並不是存放在 React 組件中。咱們能夠使用 refs 來操控DOM元素：


class UnControlledForm extends Component {
 handleSubmit = () => {
 console.log("Input Value: ", this.input.value)
 }
 render () {
 return (
 <form onSubmit={this.handleSubmit}>
 <input
 type='text'
 ref={(input) => this.input = input} />
 <button type='submit'>Submit</button>
 </form>
 )
 }
}

居然非受控組件看上去更好實現，咱們能夠直接從 DOM 中抓取數據，而不須要添加額外的代碼。不過實際開發中咱們並不提倡使用非受控組件，由於實際狀況下咱們須要更多的考慮表單驗證、選擇性的開啓或者關閉按鈕點擊、強制輸入格式等功能支持，而此時咱們將數據託管到 React 中有助於咱們更好地以聲明式的方式完成這些功能。引入 React 或者其餘 MVVM 框架最初的緣由就是爲了將咱們從繁重的直接操做 DOM 中解放出來。

在生命週期中的哪一步你應該發起 AJAX 請求？
咱們應當將AJAX 請求放到 componentDidMount 函數中執行，主要緣由有下：

React 下一代調和算法 Fiber 會經過開始或中止渲染的方式優化應用性能，其會影響到 componentWillMount 的觸發次數。對於 componentWillMount 這個生命週期函數的調用次數會變得不肯定，React 可能會屢次頻繁調用 componentWillMount。若是咱們將 AJAX 請求放到 componentWillMount 函數中，那麼顯而易見其會被觸發屢次，天然也就不是好的選擇。

若是咱們將 AJAX 請求放置在生命週期的其餘函數中，咱們並不能保證請求僅在組件掛載完畢後纔會要求響應。若是咱們的數據請求在組件掛載以前就完成，而且調用了setState函數將數據添加到組件狀態中，對於未掛載的組件則會報錯。而在 componentDidMount 函數中進行 AJAX 請求則能有效避免這個問題。

shouldComponentUpdate 的做用是啥以及爲什麼它這麼重要？
shouldComponentUpdate 容許咱們手動地判斷是否要進行組件更新，根據組件的應用場景設置函數的合理返回值可以幫咱們避免沒必要要的更新。

如何告訴 React 它應該編譯生產環境版本？
一般狀況下咱們會使用 Webpack 的 DefinePlugin 方法來將 NODE_ENV 變量值設置爲 production。編譯版本中 React 會忽略 propType 驗證以及其餘的告警信息，同時還會下降代碼庫的大小，React 使用了 Uglify 插件來移除生產環境下沒必要要的註釋等信息。

爲何咱們須要使用 React 提供的 Children API 而不是 JavaScript 的 map？
props.children並不必定是數組類型，譬以下面這個元素：

<Parent>
 <h1>Welcome.</h1>
</Parent>
若是咱們使用props.children.map函數來遍歷時會受到異常提示，由於在這種狀況下props.children是對象（object）而不是數組（array）。React 當且僅當超過一個子元素的狀況下會將props.children設置爲數組，就像下面這個代碼片：

<Parent>
 <h1>Welcome.</h1>
 <h2>props.children will now be an array</h2>
</Parent>

這也就是咱們優先選擇使用React.Children.map函數的緣由，其已經將props.children不一樣類型的狀況考慮在內了。

概述下 React 中的事件處理邏輯
爲了解決跨瀏覽器兼容性問題，React 會將瀏覽器原生事件（Browser Native Event）封裝爲合成事件（SyntheticEvent）傳入設置的事件處理器中。這裏的合成事件提供了與原生事件相同的接口，不過它們屏蔽了底層瀏覽器的細節差別，保證了行爲的一致性。另外有意思的是，React 並無直接將事件附着到子元素上，而是以單一事件監聽器的方式將全部的事件發送到頂層進行處理。這樣 React 在更新 DOM 的時候就不須要考慮如何去處理附着在 DOM 上的事件監聽器，最終達到優化性能的目的。

createElement 與 cloneElement 的區別是什麼？
createElement 函數是 JSX 編譯以後使用的建立 React Element 的函數，而 cloneElement 則是用於複製某個元素並傳入新的 Props。

傳入 setState 函數的第二個參數的做用是什麼？
該函數會在setState函數調用完成而且組件開始重渲染的時候被調用，咱們能夠用該函數來監聽渲染是否完成：

this.setState(
 { username: 'tylermcginnis33' },
 () => console.log('setState has finished and the component has re-rendered.')
)

下述代碼有錯嗎？

this.setState((prevState, props) => {
 return {
 streak: prevState.streak + props.count
 }
})

這段代碼沒啥問題，不過只是不太經常使用罷了，詳細能夠參考React中setState同步更新策略

相關標籤/搜索

每日一句

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