在線閱讀 http://interview.poetries.top

關(guān)注公眾號：前端進(jìn)階之旅。獲取更多資訊

面試經(jīng)驗談--來自知乎芋頭Live

$HTML裙顽， HTTP，web綜合問題

1粗井、前端需要注意哪些SEO

• 合理的title、description街图、keywords：搜索對著三項的權(quán)重逐個減小浇衬，title值強調(diào)重點即可，重要關(guān)鍵詞出現(xiàn)不要超過2次餐济，而且要靠前径玖，不同頁面title要有所不同；description把頁面內(nèi)容高度概括颤介，長度合適梳星，不可過分堆砌關(guān)鍵詞，不同頁面description有所不同滚朵；keywords列舉出重要關(guān)鍵詞即可
• 語義化的HTML代碼冤灾，符合W3C規(guī)范：語義化代碼讓搜索引擎容易理解網(wǎng)頁
• 重要內(nèi)容HTML代碼放在最前：搜索引擎抓取HTML順序是從上到下，有的搜索引擎對抓取長度有限制辕近，保證重要內(nèi)容一定會被抓取
• 重要內(nèi)容不要用js輸出：爬蟲不會執(zhí)行js獲取內(nèi)容
• 少用iframe：搜索引擎不會抓取iframe中的內(nèi)容
• 非裝飾性圖片必須加alt
• 提高網(wǎng)站速度：網(wǎng)站速度是搜索引擎排序的一個重要指標(biāo)

2韵吨、<img>的title和alt有什么區(qū)別

• 通常當(dāng)鼠標(biāo)滑動到元素上的時候顯示
• alt是<img>的特有屬性，是圖片內(nèi)容的等價描述移宅，用于圖片無法加載時顯示归粉、讀屏器閱讀圖片÷┓澹可提圖片高可訪問性糠悼，除了純裝飾圖片外都必須設(shè)置有意義的值，搜索引擎會重點分析浅乔。

3倔喂、HTTP的幾種請求方法用途

• 1铝条、GET方法

  • 發(fā)送一個請求來取得服務(wù)器上的某一資源

• 2、POST方法

  • 向URL指定的資源提交數(shù)據(jù)或附加新的數(shù)據(jù)

• 3席噩、PUT方法

  • 跟POST方法很像班缰，也是想服務(wù)器提交數(shù)據(jù)。但是悼枢，它們之間有不同埠忘。PUT指定了資源在服務(wù)器上的位置，而POST沒有

• 4馒索、HEAD方法

  • 只請求頁面的首部

• 5给梅、DELETE方法

  • 刪除服務(wù)器上的某資源

• 6、OPTIONS方法

  • 它用于獲取當(dāng)前URL所支持的方法双揪。如果請求成功，會有一個Allow的頭包含類似“GET,POST”這樣的信息

• 7包帚、TRACE方法

  • TRACE方法被用于激發(fā)一個遠(yuǎn)程的渔期，應(yīng)用層的請求消息回路

• 8、CONNECT方法

  • 把請求連接轉(zhuǎn)換到透明的TCP/IP通道

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

• 瀏覽器根據(jù)請求的URL交給DNS域名解析疯趟，找到真實IP，向服務(wù)器發(fā)起請求谋梭；
• 服務(wù)器交給后臺處理完成后返回數(shù)據(jù)信峻，瀏覽器接收文件（HTML、JS瓮床、CSS盹舞、圖象等）；
• 瀏覽器對加載到的資源（HTML隘庄、JS踢步、CSS等）進(jìn)行語法解析，建立相應(yīng)的內(nèi)部數(shù)據(jù)結(jié)構(gòu)（如HTML的DOM）丑掺；
• 載入解析到的資源文件获印，渲染頁面，完成街州。

5兼丰、如何進(jìn)行網(wǎng)站性能優(yōu)化

• content方面

  1. 減少HTTP請求：合并文件、CSS精靈唆缴、inline Image
  2. 減少DNS查詢：DNS緩存鳍征、將資源分布到恰當(dāng)數(shù)量的主機名
  3. 減少DOM元素數(shù)量

• Server方面

  1. 使用CDN
  2. 配置ETag
  3. 對組件使用Gzip壓縮

• Cookie方面

  1. 減小cookie大小

• css方面

  1. 將樣式表放到頁面頂部
  2. 不使用CSS表達(dá)式
  3. 使用<link>不使用@import

• Javascript方面

  1. 將腳本放到頁面底部
  2. 將javascript和css從外部引入
  3. 壓縮javascript和css
  4. 刪除不需要的腳本
  5. 減少DOM訪問

• 圖片方面

  1. 優(yōu)化圖片：根據(jù)實際顏色需要選擇色深、壓縮
  2. 優(yōu)化css精靈
  3. 不要在HTML中拉伸圖片

6面徽、HTTP狀態(tài)碼及其含義

• 1XX：信息狀態(tài)碼
  • 100 Continue 繼續(xù)蟆技，一般在發(fā)送post請求時箭昵，已發(fā)送了http header之后服務(wù)端將返回此信息昂拂，表示確認(rèn)，之后發(fā)送具體參數(shù)信息
• 2XX：成功狀態(tài)碼
  • 200 OK 正常返回信息
  • 201 Created 請求成功并且服務(wù)器創(chuàng)建了新的資源
  • 202 Accepted 服務(wù)器已接受請求蛛淋，但尚未處理
• 3XX：重定向
  • 301 Moved Permanently 請求的網(wǎng)頁已永久移動到新位置爽航。
  • 302 Found 臨時性重定向吮螺。
  • 303 See Other 臨時性重定向寒锚，且總是使用 GET 請求新的 URI。
  • 304 Not Modified 自從上次請求后，請求的網(wǎng)頁未修改過。
• 4XX：客戶端錯誤
  • 400 Bad Request 服務(wù)器無法理解請求的格式揖膜，客戶端不應(yīng)當(dāng)嘗試再次使用相同的內(nèi)容發(fā)起請求。
  • 401 Unauthorized 請求未授權(quán)薄啥。
  • 403 Forbidden 禁止訪問貌矿。
  • 404 Not Found 找不到如何與 URI 相匹配的資源。
• 5XX: 服務(wù)器錯誤
  • 500 Internal Server Error 最常見的服務(wù)器端錯誤罪佳。
  • 503 Service Unavailable 服務(wù)器端暫時無法處理請求（可能是過載或維護）逛漫。

7、語義化的理解

• 用正確的標(biāo)簽做正確的事情赘艳！
• html語義化就是讓頁面的內(nèi)容結(jié)構(gòu)化酌毡，便于對瀏覽器克握、搜索引擎解析；
• 在沒有樣式CSS情況下也以一種文檔格式顯示枷踏，并且是容易閱讀的菩暗。
• 搜索引擎的爬蟲依賴于標(biāo)記來確定上下文和各個關(guān)鍵字的權(quán)重，利于 SEO旭蠕。
• 使閱讀源代碼的人對網(wǎng)站更容易將網(wǎng)站分塊停团，便于閱讀維護理解

8、介紹一下你對瀏覽器內(nèi)核的理解掏熬？

• 主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎

• 渲染引擎：負(fù)責(zé)取得網(wǎng)頁的內(nèi)容（HTML佑稠、XML、圖像等等）旗芬、整理訊息（例如加入CSS等）舌胶，以及計算網(wǎng)頁的顯示方式，然后會輸出至顯示器或打印機疮丛。瀏覽器的內(nèi)核的不同對于網(wǎng)頁的語法解釋會有不同幔嫂，所以渲染的效果也不相同。所有網(wǎng)頁瀏覽器誊薄、電子郵件客戶端以及其它需要編輯履恩、顯示網(wǎng)絡(luò)內(nèi)容的應(yīng)用程序都需要內(nèi)核

• JS引擎則：解析和執(zhí)行javascript來實現(xiàn)網(wǎng)頁的動態(tài)效果

• 最開始渲染引擎和JS引擎并沒有區(qū)分的很明確，后來JS引擎越來越獨立呢蔫，內(nèi)核就傾向于只指渲染引擎

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

• HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集昙衅，主要是關(guān)于圖像扬霜，位置定鸟，存儲，多任務(wù)等功能的增加

  • 繪畫 canvas
  • 用于媒介回放的 video 和 audio 元素
  • 本地離線存儲 localStorage 長期存儲數(shù)據(jù)著瓶，瀏覽器關(guān)閉后數(shù)據(jù)不丟失
  • sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除
  • 語意化更好的內(nèi)容元素联予，比如article、footer材原、header沸久、nav、section
  • 表單控件余蟹，calendar卷胯、date、time威酒、email窑睁、url挺峡、search
  • 新的技術(shù)webworker, websocket, Geolocation

• 移除的元素：

  • 純表現(xiàn)的元素：basefont，big担钮，center橱赠，font, s，strike箫津，tt狭姨，u`
  • 對可用性產(chǎn)生負(fù)面影響的元素：frame，frameset苏遥，noframes

• 支持HTML5新標(biāo)簽：

  • IE8/IE7/IE6支持通過document.createElement方法產(chǎn)生的標(biāo)簽
  • 可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽
  • 瀏覽器支持新標(biāo)簽后饼拍，還需要添加標(biāo)簽?zāi)J(rèn)的樣式

• 當(dāng)然也可以直接使用成熟的框架、比如html5shim

10暖眼、HTML5的離線儲存怎么使用惕耕，工作原理能不能解釋一下？

• 在用戶沒有與因特網(wǎng)連接時诫肠，可以正常訪問站點或應(yīng)用司澎，在用戶與因特網(wǎng)連接時，更新用戶機器上的緩存文件

• 原理：HTML5的離線存儲是基于一個新建的.appcache文件的緩存機制(不是存儲技術(shù))栋豫，通過這個文件上的解析清單離線存儲資源挤安，這些資源就會像cookie一樣被存儲了下來。之后當(dāng)網(wǎng)絡(luò)在處于離線狀態(tài)下時丧鸯，瀏覽器會通過被離線存儲的數(shù)據(jù)進(jìn)行頁面展示

• 如何使用：

  • 頁面頭部像下面一樣加入一個manifest的屬性蛤铜；
  • 在cache.manifest文件的編寫離線存儲的資源
  • 在離線狀態(tài)時，操作window.applicationCache進(jìn)行需求實現(xiàn)

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

11丛肢、瀏覽器是怎么對HTML5的離線儲存資源進(jìn)行管理和加載的呢

• 在線的情況下围肥，瀏覽器發(fā)現(xiàn)html頭部有manifest屬性，它會請求manifest文件蜂怎，如果是第一次訪問app穆刻，那么瀏覽器就會根據(jù)manifest文件的內(nèi)容下載相應(yīng)的資源并且進(jìn)行離線存儲。如果已經(jīng)訪問過app并且資源已經(jīng)離線存儲了杠步，那么瀏覽器就會使用離線的資源加載頁面氢伟，然后瀏覽器會對比新的manifest文件與舊的manifest文件，如果文件沒有發(fā)生改變幽歼，就不做任何操作朵锣，如果文件改變了，那么就會重新下載文件中的資源并進(jìn)行離線存儲甸私。

• 離線的情況下诚些，瀏覽器就直接使用離線存儲的資源。

12皇型、請描述一下 cookies诬烹，sessionStorage 和 localStorage 的區(qū)別助析？

• cookie是網(wǎng)站為了標(biāo)示用戶身份而儲存在用戶本地終端（Client Side）上的數(shù)據(jù)（通常經(jīng)過加密）

• cookie數(shù)據(jù)始終在同源的http請求中攜帶（即使不需要），記會在瀏覽器和服務(wù)器間來回傳遞

• sessionStorage和localStorage不會自動把數(shù)據(jù)發(fā)給服務(wù)器椅您，僅在本地保存

• 存儲大型饧健：

  • cookie數(shù)據(jù)大小不能超過4k
  • sessionStorage和localStorage雖然也有存儲大小的限制，但比cookie大得多掀泳，可以達(dá)到5M或更大

• 有期時間：

  • localStorage 存儲持久數(shù)據(jù)雪隧，瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非主動刪除數(shù)據(jù)
  • sessionStorage 數(shù)據(jù)在當(dāng)前瀏覽器窗口關(guān)閉后自動刪除
  • cookie 設(shè)置的cookie過期時間之前一直有效，即使窗口或瀏覽器關(guān)閉

13员舵、iframe有那些缺點脑沿？

• iframe會阻塞主頁面的Onload事件
• 搜索引擎的檢索程序無法解讀這種頁面，不利于SEO
• iframe和主頁面共享連接池马僻，而瀏覽器對相同域的連接有限制庄拇，所以會影響頁面的并行加載
• 使用iframe之前需要考慮這兩個缺點。如果需要使用iframe韭邓，最好是通過javascript動態(tài)給iframe添加src屬性值措近，這樣可以繞開以上兩個問題

14、WEB標(biāo)準(zhǔn)以及W3C標(biāo)準(zhǔn)是什么?

• 標(biāo)簽閉合女淑、標(biāo)簽小寫瞭郑、不亂嵌套、使用外鏈css和js鸭你、結(jié)構(gòu)行為表現(xiàn)的分離

15屈张、xhtml和html有什么區(qū)別?

• 一個是功能上的差別

  • 主要是XHTML可兼容各大瀏覽器、手機以及PDA袱巨，并且瀏覽器也能快速正確地編譯網(wǎng)頁

• 另外是書寫習(xí)慣的差別

  • XHTML 元素必須被正確地嵌套阁谆，閉合，區(qū)分大小寫愉老，文檔必須擁有根元素

16场绿、Doctype作用? 嚴(yán)格模式與混雜模式如何區(qū)分？它們有何意義?

• 頁面被加載的時俺夕，link會同時被加載裳凸，而@imort頁面被加載的時贱鄙，link會同時被加載劝贸，而@import引用的CSS會等到頁面被加載完再加載
  import只在IE5以上才能識別，而link是XHTML標(biāo)簽逗宁，無兼容問題
  link方式的樣式的權(quán)重 高于@import的權(quán)重
• <!DOCTYPE> 聲明位于文檔中的最前面映九，處于 <html> 標(biāo)簽之前。告知瀏覽器的解析器瞎颗， 用什么文檔類型 規(guī)范來解析這個文檔
• 嚴(yán)格模式的排版和 JS 運作模式是 以該瀏覽器支持的最高標(biāo)準(zhǔn)運行
• 在混雜模式中件甥，頁面以寬松的向后兼容的方式顯示捌议。模擬老式瀏覽器的行為以防止站點無法工作。 DOCTYPE不存在或格式不正確會導(dǎo)致文檔以混雜模式呈現(xiàn)

17引有、行內(nèi)元素有哪些瓣颅？塊級元素有哪些？ 空(void)元素有那些譬正？行內(nèi)元素和塊級元素有什么區(qū)別宫补？

• 行內(nèi)元素有：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>
• 行內(nèi)元素不可以設(shè)置寬高，不獨占一行
• 塊級元素可以設(shè)置寬高曾我，獨占一行

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

• class:為元素設(shè)置類標(biāo)識
• data-*: 為元素增加自定義屬性
• draggable: 設(shè)置元素是否可拖拽
• id: 元素id，文檔內(nèi)唯一
• lang: 元素內(nèi)容的的語言
• style: 行內(nèi)css樣式
• title: 元素相關(guān)的建議信息

19抒巢、Canvas和SVG有什么區(qū)別贫贝？

• svg繪制出來的每一個圖形的元素都是獨立的DOM節(jié)點，能夠方便的綁定事件或用來修改蛉谜。canvas輸出的是一整幅畫布
• svg輸出的圖形是矢量圖形稚晚，后期可以修改參數(shù)來自由放大縮小，不會是真和鋸齒型诚。而canvas輸出標(biāo)量畫布蜈彼，就像一張圖片一樣，放大會失真或者鋸齒

20俺驶、HTML5 為什么只需要寫 <!DOCTYPE HTML>幸逆？

• HTML5 不基于 SGML，因此不需要對DTD進(jìn)行引用暮现，但是需要doctype來規(guī)范瀏覽器的行為
• 而HTML4.01基于SGML,所以需要對DTD進(jìn)行引用还绘，才能告知瀏覽器文檔所使用的文檔類型

21、如何在頁面上實現(xiàn)一個圓形的可點擊區(qū)域栖袋？

• svg
• border-radius
• 純js實現(xiàn) 需要求一個點在不在圓上簡單算法拍顷、獲取鼠標(biāo)坐標(biāo)等等

22、網(wǎng)頁驗證碼是干嘛的塘幅，是為了解決什么安全問題

• 區(qū)分用戶是計算機還是人的公共全自動程序昔案。可以防止惡意破解密碼电媳、刷票踏揣、論壇灌水
• 有效防止黑客對某一個特定注冊用戶用特定程序暴力破解方式進(jìn)行不斷的登陸嘗試

$CSS部分

1、css sprite是什么,有什么優(yōu)缺點

• 概念：將多個小圖片拼接到一個圖片中匾乓。通過background-position和元素尺寸調(diào)節(jié)需要顯示的背景圖案捞稿。

• 優(yōu)點：

  • 減少HTTP請求數(shù)，極大地提高頁面加載速度
  • 增加圖片信息重復(fù)度，提高壓縮比娱局，減少圖片大小
  • 更換風(fēng)格方便彰亥，只需在一張或幾張圖片上修改顏色或樣式即可實現(xiàn)

• 缺點：

  • 圖片合并麻煩
  • 維護麻煩，修改一個圖片可能需要從新布局整個圖片衰齐，樣式

2任斋、display: none;與visibility: hidden;的區(qū)別

• 聯(lián)系：它們都能讓元素不可見

• 區(qū)別：

  • display:none;會讓元素完全從渲染樹中消失，渲染的時候不占據(jù)任何空間耻涛；visibility: hidden;不會讓元素從渲染樹消失仁卷，渲染師元素繼續(xù)占據(jù)空間，只是內(nèi)容不可見
  • display: none;是非繼承屬性，子孫節(jié)點消失由于元素從渲染樹消失造成，通過修改子孫節(jié)點屬性無法顯示妓湘；visibility: hidden;是繼承屬性，子孫節(jié)點消失由于繼承了hidden丰介，通過設(shè)置visibility: visible;可以讓子孫節(jié)點顯式
  • 修改常規(guī)流中元素的display通常會造成文檔重排。修改visibility屬性只會造成本元素的重繪鉴分。
  • 讀屏器不會讀取display: none;元素內(nèi)容哮幢；會讀取visibility: hidden;元素內(nèi)容

3、link與@import的區(qū)別

1. link是HTML方式志珍， @import是CSS方式
2. link最大限度支持并行下載橙垢，@import過多嵌套導(dǎo)致串行下載，出現(xiàn)FOUC
3. link可以通過rel="alternate stylesheet"指定候選樣式
4. 瀏覽器對link支持早于@import伦糯，可以使用@import對老瀏覽器隱藏樣式
5. @import必須在樣式規(guī)則之前柜某，可以在css文件中引用其他文件
6. 總體來說：link優(yōu)于@import

4、什么是FOUC?如何避免

• Flash Of Unstyled Content：用戶定義樣式表加載之前瀏覽器使用默認(rèn)樣式顯示文檔敛纲，用戶樣式加載渲染之后再從新顯示文檔喂击，造成頁面閃爍。
• 解決方法：把樣式表放到文檔的head

5淤翔、如何創(chuàng)建塊級格式化上下文(block formatting context),BFC有什么用

• 創(chuàng)建規(guī)則：

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

• 作用：

  • 可以包含浮動元素
  • 不被浮動元素覆蓋
  • 阻止父子元素的margin折疊

6翰绊、display,float,position的關(guān)系

• 如果display為none，那么position和float都不起作用旁壮，這種情況下元素不產(chǎn)生框
• 否則监嗜，如果position值為absolute或者fixed，框就是絕對定位的抡谐，float的計算值為none裁奇，display根據(jù)下面的表格進(jìn)行調(diào)整。
• 否則童叠，如果float不是none框喳，框是浮動的，display根據(jù)下表進(jìn)行調(diào)整
• 否則厦坛，如果元素是根元素五垮，display根據(jù)下表進(jìn)行調(diào)整
• 其他情況下display的值為指定值
• 總結(jié)起來：絕對定位、浮動杜秸、根元素都需要調(diào)整display

7放仗、清除浮動的幾種方式，各自的優(yōu)缺點

• 父級div定義height
• 結(jié)尾處加空div標(biāo)簽clear:both
• 父級div定義偽類:after和zoom
• 父級div定義overflow:hidden
• 父級div也浮動撬碟，需要定義寬度
• 結(jié)尾處加br標(biāo)簽clear:both
• 比較好的是第3種方式诞挨，好多網(wǎng)站都這么用

8、為什么要初始化CSS樣式?

• 因為瀏覽器的兼容問題呢蛤，不同瀏覽器對有些標(biāo)簽的默認(rèn)值是不同的惶傻，如果沒對CSS初始化往往會出現(xiàn)瀏覽器之間的頁面顯示差異。
• 當(dāng)然其障，初始化樣式會對SEO有一定的影響银室，但魚和熊掌不可兼得，但力求影響最小的情況下初始化

9励翼、css3有哪些新特性

• 新增各種css選擇器
• 圓角 border-radius
• 多列布局
• 陰影和反射
• 文字特效text-shadow
• 線性漸變
• 旋轉(zhuǎn)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 在元素之前添加內(nèi)容,也可以用來做清除浮動否过。
• :before 在元素之后添加內(nèi)容
• :enabled
• :disabled 控制表單控件的禁用狀態(tài)。
• :checked 單選框或復(fù)選框被選中

10惭蟋、display有哪些值叠纹？說明他們的作用

• block 象塊類型元素一樣顯示。
• none 缺省值敞葛。象行內(nèi)元素類型一樣顯示誉察。
• inline-block 象行內(nèi)元素一樣顯示，但其內(nèi)容象塊類型元素一樣顯示惹谐。
• list-item 象塊類型元素一樣顯示持偏，并添加樣式列表標(biāo)記。
• table 此元素會作為塊級表格來顯示
• inherit 規(guī)定應(yīng)該從父元素繼承 display 屬性的值

11氨肌、介紹一下標(biāo)準(zhǔn)的CSS的盒子模型鸿秆？低版本IE的盒子模型有什么不同的？

• 有兩種怎囚， IE盒子模型卿叽、W3C盒子模型桥胞；
• 盒模型： 內(nèi)容(content)、填充(padding)考婴、邊界(margin)贩虾、 邊框(border)；
• 區(qū) 別： IE的content部分把 border 和 padding計算了進(jìn)去;

12沥阱、CSS優(yōu)先級算法如何計算缎罢？

• 優(yōu)先級就近原則，同權(quán)重情況下樣式定義最近者為準(zhǔn)
• 載入樣式以最后載入的定位為準(zhǔn)
• 優(yōu)先級為: !important > id > class > tag important 比 內(nèi)聯(lián)優(yōu)先級高

13考杉、對BFC規(guī)范的理解策精？

• 它決定了元素如何對其內(nèi)容進(jìn)行定位,以及與其他元素的關(guān)系和相互作用

14、談?wù)劯雍颓宄?/h3>

• 浮動的框可以向左或向右移動崇棠，直到他的外邊緣碰到包含框或另一個浮動框的邊框為止咽袜。由于浮動框不在文檔的普通流中，所以文檔的普通流的塊框表現(xiàn)得就像浮動框不存在一樣枕稀。浮動的塊框會漂浮在文檔普通流的塊框上

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

• absolute：生成絕對定位的元素抽莱，相對于 static 定位以外的第一個父元素進(jìn)行定位
• fixed：生成絕對定位的元素范抓，相對于瀏覽器窗口進(jìn)行定位
• relative：生成相對定位的元素，相對于其正常位置進(jìn)行定位
• static 默認(rèn)值食铐。沒有定位匕垫，元素出現(xiàn)在正常的流中
• inherit 規(guī)定從父元素繼承 position 屬性的值

16、display:inline-block 什么時候不會顯示間隙虐呻？(攜程)

• 移除空格
• 使用margin負(fù)值
• 使用font-size:0
• letter-spacing
• word-spacing

17象泵、PNG,GIF,JPG的區(qū)別及如何選

• GIF

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

• JPEG

  • 顏色限于256
  • 有損壓縮
  • 可控制壓縮質(zhì)量
  • 不支持透明
  • 適合照片

• PNG

  • 有PNG8和truecolor PNG
  • PNG8類似GIF顏色上限為256斟叼，文件小偶惠，支持alpha透明度，無動畫
  • 適合圖標(biāo)朗涩、背景忽孽、按鈕

18、行內(nèi)元素float:left后是否變?yōu)閴K級元素谢床？

• 浮動后兄一，行內(nèi)元素不會成為塊狀元素，但是可以設(shè)置寬高识腿。行內(nèi)元素要想變成塊狀元素出革，占一行，直接設(shè)置display:block;渡讼。但如果元素設(shè)置了浮動后再設(shè)置display:block;那就不會占一行骂束。

19耳璧、在網(wǎng)頁中的應(yīng)該使用奇數(shù)還是偶數(shù)的字體？為什么呢展箱？

• 偶數(shù)字號相對更容易和 web 設(shè)計的其他部分構(gòu)成比例關(guān)系

20旨枯、::before 和 :after中雙冒號和單冒號 有什么區(qū)別？解釋一下這2個偽元素的作用

• 單冒號(:)用于CSS3偽類析藕，雙冒號(::)用于CSS3偽元素
• 用于區(qū)分偽類和偽元素

21召廷、如果需要手動寫動畫凳厢，你認(rèn)為最小時間間隔是多久账胧，為什么？（阿里）

• 多數(shù)顯示器默認(rèn)頻率是60Hz先紫，即1秒刷新60次治泥，所以理論上最小間隔為1/60＊1000ms ＝ 16.7ms

22、CSS合并方法

• 避免使用@import引入多個css文件遮精，可以使用CSS工具將CSS合并為一個CSS文件居夹，例如使用Sass\Compass等

23、CSS不同選擇器的權(quán)重(CSS層疊的規(guī)則)

• 本冲！important規(guī)則最重要准脂，大于其它規(guī)則
• 行內(nèi)樣式規(guī)則，加1000
• 對于選擇器中給定的各個ID屬性值檬洞，加100
• 對于選擇器中給定的各個類屬性狸膏、屬性選擇器或者偽類選擇器，加10
• 對于選擇其中給定的各個元素標(biāo)簽選擇器添怔，加1
• 如果權(quán)值一樣湾戳，則按照樣式規(guī)則的先后順序來應(yīng)用，順序靠后的覆蓋靠前的規(guī)則

24广料、列出你所知道可以改變頁面布局的屬性

• position砾脑、display、float艾杏、width韧衣、height、margin购桑、padding汹族、top、left其兴、right顶瞒、`

25、CSS在性能優(yōu)化方面的實踐

• css壓縮與合并元旬、Gzip壓縮
• css文件放在head里榴徐、不要用@import
• 盡量用縮寫守问、避免用濾鏡、合理使用選擇器

26坑资、CSS3動畫（簡單動畫的實現(xiàn)耗帕，如旋轉(zhuǎn)等）

• 依靠CSS3中提出的三個屬性：transition、transform袱贮、animation
• transition：定義了元素在變化過程中是怎么樣的仿便，包含transition-property、transition-duration攒巍、transition-timing-function嗽仪、transition-delay。
• transform：定義元素的變化結(jié)果柒莉，包含rotate闻坚、scale、skew兢孝、translate窿凤。
• animation：動畫定義了動作的每一幀（@keyframes）有什么效果，包括animation-name跨蟹，animation-duration雳殊、animation-timing-function、animation-delay窗轩、animation-iteration-count夯秃、animation-direction

27、base64的原理及優(yōu)缺點

• 優(yōu)點可以加密品姓，減少了http請求
• 缺點是需要消耗CPU進(jìn)行編解碼

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區(qū)別

• 均具有“變量”腹备、“混合”衬潦、“嵌套”、“繼承”植酥、“顏色混合”五大基本特性
• Scss和LESS語法較為嚴(yán)謹(jǐn)镀岛，LESS要求一定要使用大括號“{}”，Scss和Stylus可以通過縮進(jìn)表示層次與嵌套關(guān)系
• Scss無全局變量的概念友驮，LESS和Stylus有類似于其它語言的作用域概念
• Sass是基于Ruby語言的漂羊，而LESS和Stylus可以基于NodeJS NPM下載相應(yīng)庫后進(jìn)行編譯；

30卸留、postcss的作用

• 可以直觀的理解為：它就是一個平臺走越。為什么說它是一個平臺呢？因為我們直接用它耻瑟，感覺不能干什么事情旨指，但是如果讓一些插件在它上面跑赏酥，那么將會很強大
• PostCSS 提供了一個解析器，它能夠?qū)?CSS 解析成抽象語法樹
• 通過在 PostCSS 這個平臺上谆构，我們能夠開發(fā)一些插件裸扶，來處理我們的CSS，比如熱門的：autoprefixer
• postcss可以對sass處理過后的css再處理 最常見的就是autoprefixer

$JavaScript

1搬素、閉包

• 閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)

• 閉包是指有權(quán)訪問另一個函數(shù)作用域中變量的函數(shù)呵晨，創(chuàng)建閉包的最常見的方式就是在一個函數(shù)內(nèi)創(chuàng)建另一個函數(shù)，通過另一個函數(shù)訪問這個函數(shù)的局部變量,利用閉包可以突破作用鏈域

• 閉包的特性：

  • 函數(shù)內(nèi)再嵌套函數(shù)
  • 內(nèi)部函數(shù)可以引用外層的參數(shù)和變量
  • 參數(shù)和變量不會被垃圾回收機制回收

說說你對閉包的理解

• 使用閉包主要是為了設(shè)計私有的方法和變量熬尺。閉包的優(yōu)點是可以避免全局變量的污染摸屠，缺點是閉包會常駐內(nèi)存，會增大內(nèi)存使用量，使用不當(dāng)很容易造成內(nèi)存泄露。在js中歉甚，函數(shù)即閉包筋夏，只有函數(shù)才會產(chǎn)生作用域的概念

• 閉包 的最大用處有兩個，一個是可以讀取函數(shù)內(nèi)部的變量税手，另一個就是讓這些變量始終保持在內(nèi)存中

• 閉包的另一個用處蜂筹，是封裝對象的私有屬性和私有方法

• 好處：能夠?qū)崿F(xiàn)封裝和緩存等；

• 壞處：就是消耗內(nèi)存芦倒、不正當(dāng)使用會造成內(nèi)存溢出的問題

使用閉包的注意點

• 由于閉包會使得函數(shù)中的變量都被保存在內(nèi)存中艺挪，內(nèi)存消耗很大，所以不能濫用閉包兵扬，否則會造成網(wǎng)頁的性能問題麻裳，在IE中可能導(dǎo)致內(nèi)存泄露
• 解決方法是，在退出函數(shù)之前器钟，將不使用的局部變量全部刪除

2津坑、說說你對作用域鏈的理解

• 作用域鏈的作用是保證執(zhí)行環(huán)境里有權(quán)訪問的變量和函數(shù)是有序的，作用域鏈的變量只能向上訪問傲霸，變量訪問到window對象即被終止疆瑰，作用域鏈向下訪問變量是不被允許的
• 簡單的說，作用域就是變量與函數(shù)的可訪問范圍昙啄，即作用域控制著變量與函數(shù)的可見性和生命周期

3穆役、JavaScript原型，原型鏈 ? 有什么特點梳凛？

• 每個對象都會在其內(nèi)部初始化一個屬性耿币，就是prototype(原型)，當(dāng)我們訪問一個對象的屬性時

• 如果這個對象內(nèi)部不存在這個屬性韧拒，那么他就會去prototype里找這個屬性淹接，這個prototype又會有自己的prototype秘狞，于是就這樣一直找下去蹈集，也就是我們平時所說的原型鏈的概念

• 關(guān)系：instance.constructor.prototype = instance.__proto__

• 特點：

  • JavaScript對象是通過引用來傳遞的烁试，我們創(chuàng)建的每個新對象實體中并沒有一份屬于自己的原型副本。當(dāng)我們修改原型時拢肆，與之相關(guān)的對象也會繼承這一改變

• 當(dāng)我們需要一個屬性的時减响，Javascript引擎會先看當(dāng)前對象中是否有這個屬性， 如果沒有的

• 就會查找他的Prototype對象是否有這個屬性郭怪，如此遞推下去支示，一直檢索到 Object 內(nèi)建對象

4、請解釋什么是事件代理

• 事件代理（Event Delegation）鄙才，又稱之為事件委托颂鸿。是 JavaScript 中常用綁定事件的常用技巧。顧名思義攒庵，“事件代理”即是把原本需要綁定的事件委托給父元素嘴纺，讓父元素?fù)?dān)當(dāng)事件監(jiān)聽的職務(wù)。事件代理的原理是DOM元素的事件冒泡浓冒。使用事件代理的好處是可以提高性能
• 可以大量節(jié)省內(nèi)存占用栽渴，減少事件注冊，比如在table上代理所有td的click事件就非常棒
• 可以實現(xiàn)當(dāng)新增子對象時無需再次對其綁定

5稳懒、Javascript如何實現(xiàn)繼承闲擦？

• 構(gòu)造繼承

• 原型繼承

• 實例繼承

• 拷貝繼承

• 原型prototype機制或apply和call方法去實現(xiàn)較簡單，建議使用構(gòu)造函數(shù)與原型混合方式

 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墅冷、談?wù)凾his對象的理解

• this總是指向函數(shù)的直接調(diào)用者（而非間接調(diào)用者）
• 如果有new關(guān)鍵字，this指向new出來的那個對象
• 在事件中或油，this指向觸發(fā)這個事件的對象寞忿，特殊的是，IE中的attachEvent中的this總是指向全局對象Window

7装哆、事件模型

W3C中定義事件的發(fā)生經(jīng)歷三個階段：捕獲階段（capturing）罐脊、目標(biāo)階段（targetin）、冒泡階段（bubbling）

• 冒泡型事件：當(dāng)你使用事件冒泡時蜕琴，子級元素先觸發(fā)萍桌，父級元素后觸發(fā)
• 捕獲型事件：當(dāng)你使用事件捕獲時，父級元素先觸發(fā)凌简，子級元素后觸發(fā)
• DOM事件流：同時支持兩種事件模型：捕獲型事件和冒泡型事件
• 阻止冒泡：在W3c中上炎，使用stopPropagation（）方法；在IE下設(shè)置cancelBubble = true
• 阻止捕獲：阻止事件的默認(rèn)行為，例如click - <a>后的跳轉(zhuǎn)藕施。在W3c中寇损，使用preventDefault（）方法，在IE下設(shè)置window.event.returnValue = false

8裳食、new操作符具體干了什么呢?

• 創(chuàng)建一個空對象矛市，并且 this 變量引用該對象，同時還繼承了該函數(shù)的原型
• 屬性和方法被加入到 this 引用的對象中
• 新創(chuàng)建的對象由 this 所引用诲祸，并且最后隱式的返回 this

9浊吏、Ajax原理

• Ajax的原理簡單來說是在用戶和服務(wù)器之間加了—個中間層(AJAX引擎)，通過XmlHttpRequest對象來向服務(wù)器發(fā)異步請求救氯，從服務(wù)器獲得數(shù)據(jù)找田，然后用javascript來操作DOM而更新頁面。使用戶操作與服務(wù)器響應(yīng)異步化着憨。這其中最關(guān)鍵的一步就是從服務(wù)器獲得請求數(shù)據(jù)
• Ajax的過程只涉及JavaScript墩衙、XMLHttpRequest和DOM。XMLHttpRequest是ajax的核心機制

 // 1. 創(chuàng)建連接
    var xhr = null;
    xhr = new XMLHttpRequest()
    // 2. 連接服務(wù)器
    xhr.open('get', url, true)
    // 3. 發(fā)送請求
    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 有那些優(yōu)缺點?

• 優(yōu)點：
  • 通過異步模式甲抖，提升了用戶體驗.
  • 優(yōu)化了瀏覽器和服務(wù)器之間的傳輸漆改，減少不必要的數(shù)據(jù)往返，減少了帶寬占用.
  • Ajax在客戶端運行惧眠，承擔(dān)了一部分本來由服務(wù)器承擔(dān)的工作籽懦，減少了大用戶量下的服務(wù)器負(fù)載于个。
  • Ajax可以實現(xiàn)動態(tài)不刷新（局部刷新）
• 缺點：
  • 安全問題 AJAX暴露了與服務(wù)器交互的細(xì)節(jié)氛魁。
  • 對搜索引擎的支持比較弱。
  • 不容易調(diào)試厅篓。

10秀存、如何解決跨域問題?

• jsonp、 iframe羽氮、window.name或链、window.postMessage、服務(wù)器上設(shè)置代理頁面

11档押、模塊化開發(fā)怎么做澳盐？

• 立即執(zhí)行函數(shù),不暴露私有成員

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

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

• defer叼耙，只支持IE
• async：
• 創(chuàng)建script，插入到DOM中粒没，加載完畢后callBack

13筛婉、那些操作會造成內(nèi)存泄漏？

• 內(nèi)存泄漏指任何對象在您不再擁有或需要它之后仍然存在
• setTimeout 的第一個參數(shù)使用字符串而非函數(shù)的話癞松，會引發(fā)內(nèi)存泄漏
• 閉包使用不當(dāng)

14爽撒、XML和JSON的區(qū)別入蛆？

• 數(shù)據(jù)體積方面

  • JSON相對于XML來講，數(shù)據(jù)的體積小硕勿，傳遞的速度更快些哨毁。

• 數(shù)據(jù)交互方面

  • JSON與JavaScript的交互更加方便，更容易解析處理源武，更好的數(shù)據(jù)交互

• 數(shù)據(jù)描述方面

  • JSON對數(shù)據(jù)的描述性比XML較差

• 傳輸速度方面

  • JSON的速度要遠(yuǎn)遠(yuǎn)快于XML

15挑庶、談?wù)勀銓ebpack的看法

• WebPack 是一個模塊打包工具，你可以使用WebPack管理你的模塊依賴软能，并編繹輸出模塊們所需的靜態(tài)文件迎捺。它能夠很好地管理、打包Web開發(fā)中所用到的HTML查排、Javascript凳枝、CSS以及各種靜態(tài)文件（圖片、字體等）跋核，讓開發(fā)過程更加高效岖瑰。對于不同類型的資源，webpack有對應(yīng)的模塊加載器砂代。webpack模塊打包器會分析模塊間的依賴關(guān)系蹋订，最后 生成了優(yōu)化且合并后的靜態(tài)資源

16、說說你對AMD和Commonjs的理解

• CommonJS是服務(wù)器端模塊的規(guī)范刻伊，Node.js采用了這個規(guī)范露戒。CommonJS規(guī)范加載模塊是同步的，也就是說捶箱，只有加載完成智什，才能執(zhí)行后面的操作。AMD規(guī)范則是非同步加載模塊丁屎，允許指定回調(diào)函數(shù)
• AMD推薦的風(fēng)格通過返回一個對象做為模塊對象荠锭，CommonJS的風(fēng)格通過對module.exports或exports的屬性賦值來達(dá)到暴露模塊對象的目的

17、常見web安全及防護原理

• sql注入原理

  • 就是通過把SQL命令插入到Web表單遞交或輸入域名或頁面請求的查詢字符串晨川，最終達(dá)到欺騙服務(wù)器執(zhí)行惡意的SQL命令

• 總的來說有以下幾點

  • 永遠(yuǎn)不要信任用戶的輸入证九，要對用戶的輸入進(jìn)行校驗，可以通過正則表達(dá)式共虑，或限制長度愧怜，對單引號和雙"-"進(jìn)行轉(zhuǎn)換等
  • 永遠(yuǎn)不要使用動態(tài)拼裝SQL，可以使用參數(shù)化的SQL或者直接使用存儲過程進(jìn)行數(shù)據(jù)查詢存取
  • 永遠(yuǎn)不要使用管理員權(quán)限的數(shù)據(jù)庫連接看蚜，為每個應(yīng)用使用單獨的權(quán)限有限的數(shù)據(jù)庫連接
  • 不要把機密信息明文存放叫搁，請加密或者hash掉密碼和敏感的信息

XSS原理及防范

• Xss(cross-site scripting)攻擊指的是攻擊者往Web頁面里插入惡意html標(biāo)簽或者javascript代碼。比如：攻擊者在論壇中放一個看似安全的鏈接，騙取用戶點擊后渴逻，竊取cookie中的用戶私密信息疾党；或者攻擊者在論壇中加一個惡意表單，當(dāng)用戶提交表單的時候惨奕，卻把信息傳送到攻擊者的服務(wù)器中雪位，而不是用戶原本以為的信任站點

XSS防范方法

• 首先代碼里對用戶輸入的地方和變量都需要仔細(xì)檢查長度和對”<”,”>”,”;”,”’”等字符做過濾；其次任何內(nèi)容寫到頁面之前都必須加以encode梨撞，避免不小心把html tag 弄出來雹洗。這一個層面做好，至少可以堵住超過一半的XSS 攻擊

XSS與CSRF有什么區(qū)別嗎卧波？

• XSS是獲取信息时肿，不需要提前知道其他用戶頁面的代碼和數(shù)據(jù)包。CSRF是代替用戶完成指定的動作港粱，需要知道其他用戶頁面的代碼和數(shù)據(jù)包螃成。要完成一次CSRF攻擊，受害者必須依次完成兩個步驟

• 登錄受信任網(wǎng)站A查坪，并在本地生成Cookie

• 在不登出A的情況下寸宏，訪問危險網(wǎng)站B

CSRF的防御

• 服務(wù)端的CSRF方式方法很多樣，但總的思想都是一致的偿曙，就是在客戶端頁面增加偽隨機數(shù)
• 通過驗證碼的方法

18氮凝、用過哪些設(shè)計模式？

• 工廠模式：

  • 工廠模式解決了重復(fù)實例化的問題望忆，但還有一個問題,那就是識別問題罩阵，因為根本無法
  • 主要好處就是可以消除對象間的耦合，通過使用工程方法而不是new關(guān)鍵字

• 構(gòu)造函數(shù)模式

  • 使用構(gòu)造函數(shù)的方法炭臭，即解決了重復(fù)實例化的問題永脓，又解決了對象識別的問題，該模式與工廠模式的不同之處在于
  • 直接將屬性和方法賦值給 this對象;

19鞋仍、為什么要有同源限制？

• 同源策略指的是：協(xié)議搅吁，域名威创，端口相同，同源策略是一種安全協(xié)議
• 舉例說明：比如一個黑客程序谎懦，他利用Iframe把真正的銀行登錄頁面嵌到他的頁面上肚豺，當(dāng)你使用真實的用戶名，密碼登錄時界拦，他的頁面就可以通過Javascript讀取到你的表單中input中的內(nèi)容吸申，這樣用戶名，密碼就輕松到手了。

20截碴、offsetWidth/offsetHeight,clientWidth/clientHeight與scrollWidth/scrollHeight的區(qū)別

• offsetWidth/offsetHeight返回值包含content + padding + border梳侨，效果與e.getBoundingClientRect()相同
• clientWidth/clientHeight返回值只包含content + padding，如果有滾動條日丹，也不包含滾動條
• scrollWidth/scrollHeight返回值包含content + padding + 溢出內(nèi)容的尺寸

21走哺、javascript有哪些方法定義對象

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

22、常見兼容性問題哲虾？

• png24位的圖片在iE6瀏覽器上出現(xiàn)背景丙躏，解決方案是做成PNG8
• 瀏覽器默認(rèn)的margin和padding不同。解決方案是加一個全局的*{margin:0;padding:0;}來統(tǒng)一,束凑，但是全局效率很低晒旅，一般是如下這樣解決：

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屬性.

22、說說你對promise的了解

• 依照 Promise/A+ 的定義汪诉，Promise 有四種狀態(tài)：

  • pending: 初始狀態(tài), 非 fulfilled 或 rejected.

  • fulfilled: 成功的操作.

  • rejected: 失敗的操作.

  • settled: Promise已被fulfilled或rejected敢朱，且不是pending

• 另外， fulfilled與 rejected一起合稱 settled

• Promise 對象用來進(jìn)行延遲(deferred) 和異步(asynchronous) 計算

Promise 的構(gòu)造函數(shù)

• 構(gòu)造一個 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)

• 接收兩個函數(shù)作為參數(shù)旗们，一個在 fulfilled 的時候被調(diào)用蚓哩，一個在rejected的時候被調(diào)用，接收參數(shù)就是 future上渴，onFulfilled 對應(yīng)resolve, onRejected對應(yīng) reject

23岸梨、你覺得jQuery源碼有哪些寫的好的地方

• jquery源碼封裝在一個匿名函數(shù)的自執(zhí)行環(huán)境中，有助于防止變量的全局污染稠氮，然后通過傳入window對象參數(shù)曹阔，可以使window對象作為局部變量使用，好處是當(dāng)jquery中訪問window對象的時候隔披，就不用將作用域鏈退回到頂層作用域了赃份，從而可以更快的訪問window對象。同樣奢米，傳入undefined參數(shù)抓韩，可以縮短查找undefined時的作用域鏈
• jquery將一些原型屬性和方法封裝在了jquery.prototype中，為了縮短名稱鬓长，又賦值給了jquery.fn谒拴，這是很形象的寫法
• 有一些數(shù)組或?qū)ο蟮姆椒ń?jīng)常能使用到，jQuery將其保存為局部變量以提高訪問速度
• jquery實現(xiàn)的鏈?zhǔn)秸{(diào)用可以節(jié)約代碼涉波，所返回的都是同一個對象英上，可以提高代碼效率

24炭序、vue、react苍日、angular

• Vue.js
  一個用于創(chuàng)建 web 交互界面的庫惭聂，是一個精簡的 MVVM。它通過雙向數(shù)據(jù)綁定把 View 層和 Model 層連接了起來易遣。實際的 DOM 封裝和輸出格式都被抽象為了Directives 和 Filters

• AngularJS
  是一個比較完善的前端MVVM框架彼妻，包含模板，數(shù)據(jù)雙向綁定豆茫，路由侨歉，模塊化，服務(wù)揩魂，依賴注入等所有功能幽邓，模板功能強大豐富，自帶了豐富的 Angular指令

• react
React 僅僅是 VIEW 層是facebook公司火脉。推出的一個用于構(gòu)建UI的一個庫牵舵，能夠?qū)崿F(xiàn)服務(wù)器端的渲染国夜。用了virtual dom尖殃，所以性能很好想鹰。

25、Node的應(yīng)用場景

• 特點：

  • 1憨栽、它是一個Javascript運行環(huán)境
  • 2浓领、依賴于Chrome V8引擎進(jìn)行代碼解釋
  • 3反镇、事件驅(qū)動
  • 4犯戏、非阻塞I/O
  • 5送火、單進(jìn)程，單線程

• 優(yōu)點：

  • 高并發(fā)（最重要的優(yōu)點）

• 缺點：

  • 1先匪、只支持單核CPU种吸，不能充分利用CPU
  • 2、可靠性低呀非，一旦代碼某個環(huán)節(jié)崩潰坚俗，整個系統(tǒng)都崩潰

26、談?wù)勀銓MD姜钳、CMD的理解

• CommonJS是服務(wù)器端模塊的規(guī)范坦冠，Node.js采用了這個規(guī)范。CommonJS規(guī)范加載模塊是同步的哥桥，也就是說，只有加載完成激涤，才能執(zhí)行后面的操作拟糕。AMD規(guī)范則是非同步加載模塊判呕，允許指定回調(diào)函數(shù)

• AMD推薦的風(fēng)格通過返回一個對象做為模塊對象，CommonJS的風(fēng)格通過對module.exports或exports的屬性賦值來達(dá)到暴露模塊對象的目的

27送滞、那些操作會造成內(nèi)存泄漏侠草？

• 內(nèi)存泄漏指任何對象在您不再擁有或需要它之后仍然存在
• setTimeout 的第一個參數(shù)使用字符串而非函數(shù)的話，會引發(fā)內(nèi)存泄漏
• 閉包犁嗅、控制臺日志边涕、循環(huán)（在兩個對象彼此引用且彼此保留時，就會產(chǎn)生一個循環(huán)）

28褂微、web開發(fā)中會話跟蹤的方法有哪些

• cookie
• session
• url重寫
• 隱藏input
• ip地址

29功蜓、介紹js的基本數(shù)據(jù)類型

• Undefined、Null宠蚂、Boolean式撼、Number、String

30求厕、介紹js有哪些內(nèi)置對象著隆？

• Object 是 JavaScript 中所有對象的父對象
• 數(shù)據(jù)封裝類對象：Object、Array呀癣、Boolean美浦、Number 和 String
• 其他對象：Function、Arguments项栏、Math浦辨、Date、RegExp忘嫉、Error

31荤牍、說幾條寫JavaScript的基本規(guī)范？

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

32康吵、JavaScript有幾種類型的值？访递，你能畫一下他們的內(nèi)存圖嗎晦嵌？

• 棧：原始數(shù)據(jù)類型（Undefined，Null拷姿，Boolean惭载，Number、String）
• 堆：引用數(shù)據(jù)類型（對象响巢、數(shù)組和函數(shù)）
• 兩種類型的區(qū)別是：存儲位置不同描滔；
• 原始數(shù)據(jù)類型直接存儲在棧(stack)中的簡單數(shù)據(jù)段，占據(jù)空間小踪古、大小固定含长，屬于被頻繁使用數(shù)據(jù)券腔，所以放入棧中存儲；
• 引用數(shù)據(jù)類型存儲在堆(heap)中的對象,占據(jù)空間大拘泞、大小不固定,如果存儲在棧中纷纫，將會影響程序運行的性能；引用數(shù)據(jù)類型在棧中存儲了指針陪腌，該指針指向堆中該實體的起始地址辱魁。當(dāng)解釋器尋找引用值時，會首先檢索其
• 在棧中的地址诗鸭，取得地址后從堆中獲得實體

image

33染簇、javascript創(chuàng)建對象的幾種方式？

javascript創(chuàng)建對象簡單的說,無非就是使用內(nèi)置對象或各種自定義對象只泼，當(dāng)然還可以用JSON剖笙；但寫法有很多種，也能混合使用

• 對象字面量的方式

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

• 用function來模擬無參的構(gòu)造函數(shù)

 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來模擬參構(gòu)造函數(shù)來實現(xiàn)（用this關(guān)鍵字定義構(gòu)造的上下文屬性）

function Pet(name,age,hobby){
       this.name=name;//this作用域：當(dāng)前對象
       this.age=age;
       this.hobby=hobby;
       this.eat=function(){
          alert("我叫"+this.name+",我喜歡"+this.hobby+",是個程序員");
       }
    }
    var maidou =new Pet("麥兜",25,"coding");//實例化弥咪、創(chuàng)建對象
    maidou.eat();//調(diào)用eat方法

• 用工廠方式來創(chuàng)建（內(nèi)置對象）

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

• 用原型方式來創(chuàng)建

function Dog(){

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

• 用混合方式來創(chuàng)建

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

34十绑、eval是做什么的聚至？

• 它的功能是把對應(yīng)的字符串解析成JS代碼并運行
• 應(yīng)該避免使用eval，不安全本橙，非常耗性能（2次扳躬，一次解析成js語句，一次執(zhí)行）
• 由JSON字符串轉(zhuǎn)換為JSON對象的時候可以用eval甚亭，var obj =eval('('+ str +')')

35贷币、null，undefined 的區(qū)別亏狰？

• undefined 表示不存在這個值役纹。

• undefined :是一個表示"無"的原始值或者說表示"缺少值"，就是此處應(yīng)該有一個值暇唾，但是還沒有定義促脉。當(dāng)嘗試讀取時會返回 undefined

• 例如變量被聲明了，但沒有賦值時策州，就等于undefined

• null 表示一個對象被定義了瘸味，值為“空值”

• null : 是一個對象(空對象, 沒有任何屬性和方法)

• 例如作為函數(shù)的參數(shù)，表示該函數(shù)的參數(shù)不是對象够挂；

• 在驗證null時旁仿，一定要使用　=== ，因為 ==無法分別null 和　undefined

36孽糖、["1", "2", "3"].map(parseInt) 答案是多少丁逝？

• [1, NaN, NaN]因為 parseInt 需要兩個參數(shù) (val, radix)汁胆，其中radix 表示解析時用的基數(shù)梭姓。
• map傳了 3個(element, index, array)霜幼，對應(yīng)的 radix 不合法導(dǎo)致解析失敗。

37誉尖、javascript 代碼中的"use strict";是什么意思 ? 使用它區(qū)別是什么罪既？

• use strict是一種ECMAscript 5 添加的（嚴(yán)格）運行模式,這種模式使得 Javascript 在更嚴(yán)格的條件下運行,使JS編碼更加規(guī)范化的模式,消除Javascript語法的一些不合理、不嚴(yán)謹(jǐn)之處铡恕，減少一些怪異行為

38琢感、JSON 的了解？

• JSON(JavaScript Object Notation) 是一種輕量級的數(shù)據(jù)交換格式

• 它是基于JavaScript的一個子集探熔。數(shù)據(jù)格式簡單, 易于讀寫, 占用帶寬小

• JSON字符串轉(zhuǎn)換為JSON對象:

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

• JSON對象轉(zhuǎn)換為JSON字符串：

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

39驹针、js延遲加載的方式有哪些？

• defer和async诀艰、動態(tài)創(chuàng)建DOM方式（用得最多）柬甥、按需異步載入js

40、同步和異步的區(qū)別?

• 同步：瀏覽器訪問服務(wù)器請求其垄，用戶看得到頁面刷新苛蒲，重新發(fā)請求,等請求完，頁面刷新绿满，新內(nèi)容出現(xiàn)臂外，用戶看到新內(nèi)容,進(jìn)行下一步操作
• 異步：瀏覽器訪問服務(wù)器請求，用戶正常操作喇颁，瀏覽器后端進(jìn)行請求漏健。等請求完，頁面不刷新橘霎，新內(nèi)容也會出現(xiàn)蔫浆，用戶看到新內(nèi)容

41、漸進(jìn)增強和優(yōu)雅降級

• 漸進(jìn)增強 ：針對低版本瀏覽器進(jìn)行構(gòu)建頁面茎毁，保證最基本的功能克懊，然后再針對高級瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗七蜘。

• 優(yōu)雅降級 ：一開始就構(gòu)建完整的功能谭溉，然后再針對低版本瀏覽器進(jìn)行兼容

42、defer和async

• defer并行加載js文件橡卤，會按照頁面上script標(biāo)簽的順序執(zhí)行
• async并行加載js文件扮念，下載完成立即執(zhí)行，不會按照頁面上script標(biāo)簽的順序執(zhí)行

43碧库、說說嚴(yán)格模式的限制

• 變量必須聲明后再使用
• 函數(shù)的參數(shù)不能有同名屬性柜与，否則報錯
• 不能使用with語句
• 禁止this指向全局對象

44巧勤、attribute和property的區(qū)別是什么？

• attribute是dom元素在文檔中作為html標(biāo)簽擁有的屬性弄匕；
• property就是dom元素在js中作為對象擁有的屬性颅悉。
• 對于html的標(biāo)準(zhǔn)屬性來說，attribute和property是同步的迁匠，是會自動更新的
• 但是對于自定義的屬性來說剩瓶，他們是不同步的

45、談?wù)勀銓S6的理解

• 新增模板字符串（為JavaScript提供了簡單的字符串插值功能）
• 箭頭函數(shù)
• for-of（用來遍歷數(shù)據(jù)—例如數(shù)組中的值城丧。）
• arguments對象可被不定參數(shù)和默認(rèn)參數(shù)完美代替延曙。
• ES6將promise對象納入規(guī)范，提供了原生的Promise對象亡哄。
• 增加了let和const命令枝缔，用來聲明變量。
• 增加了塊級作用域蚊惯。
• let命令實際上就增加了塊級作用域愿卸。
• 還有就是引入module模塊的概念

46、ECMAScript6 怎么寫class么拣挪，為什么會出現(xiàn)class這種東西?

• 這個語法糖可以讓有OOP基礎(chǔ)的人更快上手js擦酌，至少是一個官方的實現(xiàn)了
• 但對熟悉js的人來說，這個東西沒啥大影響菠劝；一個Object.creat()搞定繼承赊舶，比class簡潔清晰的多

47、什么是面向?qū)ο缶幊碳懊嫦蜻^程編程赶诊，它們的異同和優(yōu)缺點

• 面向過程就是分析出解決問題所需要的步驟笼平，然后用函數(shù)把這些步驟一步一步實現(xiàn)，使用的時候一個一個依次調(diào)用就可以了
• 面向?qū)ο笫前褬?gòu)成問題事務(wù)分解成各個對象舔痪，建立對象的目的不是為了完成一個步驟寓调，而是為了描敘某個事物在整個解決問題的步驟中的行為
• 面向?qū)ο笫且怨δ軄韯澐謫栴}，而不是步驟

48锄码、面向?qū)ο缶幊趟枷?/h3>

• 基本思想是使用對象夺英，類，繼承滋捶，封裝等基本概念來進(jìn)行程序設(shè)計
• 優(yōu)點
  • 易維護
    • 采用面向?qū)ο笏枷朐O(shè)計的結(jié)構(gòu)痛悯，可讀性高，由于繼承的存在重窟，即使改變需求载萌，那么維護也只是在局部模塊，所以維護起來是非常方便和較低成本的
  • 易擴展
  • 開發(fā)工作的重用性、繼承性高扭仁，降低重復(fù)工作量垮衷。
  • 縮短了開發(fā)周期

49、對web標(biāo)準(zhǔn)乖坠、可用性搀突、可訪問性的理解

• 可用性（Usability）：產(chǎn)品是否容易上手，用戶能否完成任務(wù)瓤帚，效率如何描姚，以及這過程中用戶的主觀感受可好，是從用戶的角度來看產(chǎn)品的質(zhì)量戈次。可用性好意味著產(chǎn)品質(zhì)量高筒扒，是企業(yè)的核心競爭力
• 可訪問性（Accessibility）：Web內(nèi)容對于殘障用戶的可閱讀和可理解性
• 可維護性（Maintainability）：一般包含兩個層次怯邪，一是當(dāng)系統(tǒng)出現(xiàn)問題時，快速定位并解決問題的成本花墩，成本低則可維護性好悬秉。二是代碼是否容易被人理解，是否容易修改和增強功能冰蘑。

50和泌、如何通過JS判斷一個數(shù)組？

• instanceof方法
  • instanceof 運算符是用來測試一個對象是否在其原型鏈原型構(gòu)造函數(shù)的屬性

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

• constructor方法
  • constructor屬性返回對創(chuàng)建此對象的數(shù)組函數(shù)的引用祠肥，就是返回對象相對應(yīng)的構(gòu)造函數(shù)

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

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

Object.prototype.toString.call(value) == '[object Array]'
// 利用這個方法，可以寫一個返回數(shù)據(jù)類型的方法
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

51仇箱、談一談let與var的區(qū)別县恕？

• let命令不存在變量提升，如果在let前使用剂桥，會導(dǎo)致報錯
• 如果塊區(qū)中存在let和const命令忠烛，就會形成封閉作用域
• 不允許重復(fù)聲明，因此权逗，不能在函數(shù)內(nèi)部重新聲明參數(shù)

52美尸、map與forEach的區(qū)別？

• forEach方法斟薇，是最基本的方法师坎，就是遍歷與循環(huán)，默認(rèn)有3個傳參：分別是遍歷的數(shù)組內(nèi)容item奔垦、數(shù)組索引index屹耐、和當(dāng)前遍歷數(shù)組Array
• map方法，基本用法與forEach一致，但是不同的惶岭，它會返回一個新的數(shù)組寿弱，所以在callback需要有return值，如果沒有按灶，會返回undefined

53症革、談一談你理解的函數(shù)式編程？

• 簡單說鸯旁，"函數(shù)式編程"是一種"編程范式"（programming paradigm）噪矛，也就是如何編寫程序的方法論
• 它具有以下特性：閉包和高階函數(shù)、惰性計算铺罢、遞歸艇挨、函數(shù)是"第一等公民"、只用"表達(dá)式"

54韭赘、談一談箭頭函數(shù)與普通函數(shù)的區(qū)別缩滨？

• 函數(shù)體內(nèi)的this對象，就是定義時所在的對象泉瞻，而不是使用時所在的對象
• 不可以當(dāng)作構(gòu)造函數(shù)脉漏，也就是說，不可以使用new命令袖牙，否則會拋出一個錯誤
• 不可以使用arguments對象侧巨，該對象在函數(shù)體內(nèi)不存在。如果要用鞭达，可以用Rest參數(shù)代替
• 不可以使用yield命令司忱，因此箭頭函數(shù)不能用作Generator函數(shù)

55、談一談函數(shù)中this的指向吧碉怔？

• this的指向在函數(shù)定義的時候是確定不了的烘贴，只有函數(shù)執(zhí)行的時候才能確定this到底指向誰，實際上this的最終指向的是那個調(diào)用它的對象

• 《javascript語言精髓》中大概概括了4種調(diào)用方式：

• 方法調(diào)用模式

• 函數(shù)調(diào)用模式

• 構(gòu)造器調(diào)用模式

graph LR
A-->B

• apply/call調(diào)用模式

56撮胧、異步編程的實現(xiàn)方式桨踪？

• 回調(diào)函數(shù)

  • 優(yōu)點：簡單、容易理解
  • 缺點：不利于維護芹啥，代碼耦合高

• 事件監(jiān)聽(采用時間驅(qū)動模式锻离，取決于某個事件是否發(fā)生)：

  • 優(yōu)點：容易理解，可以綁定多個事件墓怀，每個事件可以指定多個回調(diào)函數(shù)
  • 缺點：事件驅(qū)動型汽纠，流程不夠清晰

• 發(fā)布/訂閱(觀察者模式)

  • 類似于事件監(jiān)聽震束，但是可以通過‘消息中心’陶舞，了解現(xiàn)在有多少發(fā)布者，多少訂閱者

• Promise對象

  • 優(yōu)點：可以利用then方法豌拙，進(jìn)行鏈?zhǔn)綄懛ǎ豢梢詴鴮戝e誤時的回調(diào)函數(shù)碴犬；
  • 缺點：編寫和理解絮宁，相對比較難

• Generator函數(shù)

  • 優(yōu)點：函數(shù)體內(nèi)外的數(shù)據(jù)交換、錯誤處理機制
  • 缺點：流程管理不方便

• async函數(shù)

  • 優(yōu)點：內(nèi)置執(zhí)行器服协、更好的語義绍昂、更廣的適用性、返回的是Promise偿荷、結(jié)構(gòu)清晰窘游。
  • 缺點：錯誤處理機制

57、對原生Javascript了解程度

• 數(shù)據(jù)類型跳纳、運算忍饰、對象、Function棒旗、繼承喘批、閉包、作用域铣揉、原型鏈、事件餐曹、RegExp逛拱、JSON、Ajax台猴、DOM朽合、BOM、內(nèi)存泄漏饱狂、跨域曹步、異步裝載、模板引擎休讳、前端MVC讲婚、路由、模塊化俊柔、Canvas筹麸、ECMAScript

58、Js動畫與CSS動畫區(qū)別及相應(yīng)實現(xiàn)

• CSS3的動畫的優(yōu)點
  • 在性能上會稍微好一些雏婶，瀏覽器會對CSS3的動畫做一些優(yōu)化
  • 代碼相對簡單
• 缺點
  • 在動畫控制上不夠靈活
  • 兼容性不好
• JavaScript的動畫正好彌補了這兩個缺點物赶，控制能力很強，可以單幀的控制留晚、變換酵紫，同時寫得好完全可以兼容IE6，并且功能強大。對于一些復(fù)雜控制的動畫奖地，使用javascript會比較靠譜橄唬。而在實現(xiàn)一些小的交互動效的時候，就多考慮考慮CSS吧

59鹉动、JS 數(shù)組和對象的遍歷方式轧坎，以及幾種方式的比較

通常我們會用循環(huán)的方式來遍歷數(shù)組。但是循環(huán)是 導(dǎo)致js 性能問題的原因之一泽示。一般我們會采用下幾種方式來進(jìn)行數(shù)組的遍歷

• for in循環(huán)

• for循環(huán)

• forEach

  • 這里的 forEach回調(diào)中兩個參數(shù)分別為 value缸血，index
  • forEach 無法遍歷對象
  • IE不支持該方法；Firefox 和 chrome 支持
  • forEach 無法使用 break械筛，continue 跳出循環(huán)捎泻，且使用 return 是跳過本次循環(huán)

• 這兩種方法應(yīng)該非常常見且使用很頻繁。但實際上埋哟，這兩種方法都存在性能問題

• 在方式一中笆豁，for-in需要分析出array的每個屬性，這個操作性能開銷很大赤赊。用在 key 已知的數(shù)組上是非常不劃算的闯狱。所以盡量不要用for-in，除非你不清楚要處理哪些屬性抛计，例如 JSON對象這樣的情況

• 在方式2中哄孤，循環(huán)每進(jìn)行一次，就要檢查一下數(shù)組長度吹截。讀取屬性（數(shù)組長度）要比讀局部變量慢瘦陈，尤其是當(dāng) array 里存放的都是 DOM 元素，因為每次讀取都會掃描一遍頁面上的選擇器相關(guān)元素波俄，速度會大大降低

60晨逝、gulp是什么？

• gulp是前端開發(fā)過程中一種基于流的代碼構(gòu)建工具懦铺，是自動化項目的構(gòu)建利器捉貌；它不僅能對網(wǎng)站資源進(jìn)行優(yōu)化，而且在開發(fā)過程中很多重復(fù)的任務(wù)能夠使用正確的工具自動完成
• Gulp的核心概念：流
• 流阀趴，簡單來說就是建立在面向?qū)ο蠡A(chǔ)上的一種抽象的處理數(shù)據(jù)的工具昏翰。在流中，定義了一些處理數(shù)據(jù)的基本操作刘急，如讀取數(shù)據(jù)棚菊，寫入數(shù)據(jù)等，程序員是對流進(jìn)行所有操作的叔汁，而不用關(guān)心流的另一頭數(shù)據(jù)的真正流向
• gulp正是通過流和代碼優(yōu)于配置的策略來盡量簡化任務(wù)編寫的工作
• Gulp的特點：
  • 易于使用：通過代碼優(yōu)于配置的策略统求，gulp 讓簡單的任務(wù)簡單检碗，復(fù)雜的任務(wù)可管理
  • 構(gòu)建快速 利用 Node.js 流的威力，你可以快速構(gòu)建項目并減少頻繁的 IO 操作
  • 易于學(xué)習(xí) 通過最少的 API码邻，掌握 gulp 毫不費力折剃，構(gòu)建工作盡在掌握：如同一系列流管道

61、說一下Vue的雙向綁定數(shù)據(jù)的原理

• vue.js 則是采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式像屋，通過Object.defineProperty()來劫持各個屬性的setter怕犁，getter，在數(shù)據(jù)變動時發(fā)布消息給訂閱者己莺，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)

$jQuery

1奏甫、你覺得jQuery或zepto源碼有哪些寫的好的地方

• jquery源碼封裝在一個匿名函數(shù)的自執(zhí)行環(huán)境中，有助于防止變量的全局污染凌受，然后通過傳入window對象參數(shù)阵子，可以使window對象作為局部變量使用，好處是當(dāng)jquery中訪問window對象的時候胜蛉，就不用將作用域鏈退回到頂層作用域了挠进，從而可以更快的訪問window對象。同樣誊册，傳入undefined參數(shù)领突，可以縮短查找undefined時的作用域鏈

 (function( window, undefined ) {

         //用一個函數(shù)域包起來，就是所謂的沙箱

         //在這里邊var定義的變量案怯，屬于這個函數(shù)域內(nèi)的局部變量攘须，避免污染全局

         //把當(dāng)前沙箱需要的外部變量通過函數(shù)參數(shù)引入進(jìn)來

         //只要保證參數(shù)對內(nèi)提供的接口的一致性，你還可以隨意替換傳進(jìn)來的這個參數(shù)

        window.jQuery = window.$ = jQuery;

    })( window );

• jquery將一些原型屬性和方法封裝在了jquery.prototype中殴泰，為了縮短名稱，又賦值給了jquery.fn浮驳，這是很形象的寫法
• 有一些數(shù)組或?qū)ο蟮姆椒ń?jīng)常能使用到悍汛，jQuery將其保存為局部變量以提高訪問速度
• jquery實現(xiàn)的鏈?zhǔn)秸{(diào)用可以節(jié)約代碼，所返回的都是同一個對象至会，可以提高代碼效率

2离咐、jQuery 的實現(xiàn)原理？

• (function(window, undefined) {})(window);

• jQuery 利用 JS 函數(shù)作用域的特性奉件，采用立即調(diào)用表達(dá)式包裹了自身宵蛀，解決命名空間和變量污染問題

• window.jQuery = window.$ = jQuery;

• 在閉包當(dāng)中將 jQuery 和 暴露為全局變量

3县貌、jQuery.fn 的 init 方法返回的 this 指的是什么對象术陶？ 為什么要返回 this？

• jQuery.fn 的 init 方法 返回的 this 就是 jQuery 對象
• 用戶使用 jQuery() 或 $() 即可初始化 jQuery 對象煤痕，不需要動態(tài)的去調(diào)用 init 方法

4梧宫、jQuery.extend 與 jQuery.fn.extend 的區(qū)別接谨？

• $.fn.extend() 和 $.extend() 是 jQuery 為擴展插件提拱了兩個方法
• $.extend(object); // 為jQuery添加“靜態(tài)方法”（工具方法）

$.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對象進(jìn)行擴展

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

• $.fn.extend(json); // 為jQuery添加“成員函數(shù)”（實例方法）

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

$("#email").alertValue();

5、jQuery 的屬性拷貝(extend)的實現(xiàn)原理是什么塘匣，如何實現(xiàn)深拷貝脓豪？

• 淺拷貝（只復(fù)制一份原始對象的引用）
  var newObject = $.extend({}, oldObject);

• 深拷貝（對原始對象屬性所引用的對象進(jìn)行進(jìn)行遞歸拷貝）
  var newObject = $.extend(true, {}, oldObject);

6、jQuery 的隊列是如何實現(xiàn)的忌卤？隊列可以用在哪些地方扫夜？

• jQuery 核心中有一組隊列控制方法，由 queue()/dequeue()/clearQueue() 三個方法組成驰徊。
• 主要應(yīng)用于 animate()笤闯，ajax，其他要按時間順序執(zhí)行的事件中

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

// 獲取隊列事件（返回一個函數(shù)數(shù)組）
$('#box').queue("queue1");  // [func3(), func4()]

// 出棧隊列事件并執(zhí)行
$('#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()的區(qū)別望侈？

• bind 直接綁定在目標(biāo)元素上
• live 通過冒泡傳播事件，默認(rèn)document上勋桶，支持動態(tài)數(shù)據(jù)
• delegate 更精確的小范圍使用事件代理脱衙，性能優(yōu)于 live
• on 是最新的1.9版本整合了之前的三種方式的新事件綁定機制

8、是否知道自定義事件例驹？ jQuery 里的 fire 函數(shù)是什么意思捐韩，什么時候用？

• 事件即“發(fā)布/訂閱”模式鹃锈，自定義事件即“消息發(fā)布”荤胁，事件的監(jiān)聽即“訂閱訂閱”
• JS 原生支持自定義事件，示例：

  document.createEvent(type); // 創(chuàng)建事件
  event.initEvent(eventType, canBubble, prevent); // 初始化事件
  target.addEventListener('dataavailable', handler, false); // 監(jiān)聽事件
  target.dispatchEvent(e);  // 觸發(fā)事件

• jQuery 里的 fire 函數(shù)用于調(diào)用 jQuery 自定義事件列表中的事件

9屎债、jQuery 通過哪個方法和 Sizzle 選擇器結(jié)合的仅政？

• Sizzle 選擇器采取 Right To Left 的匹配模式，先搜尋所有匹配標(biāo)簽盆驹，再判斷它的父節(jié)點
• jQuery 通過 $(selecter).find(selecter); 和 Sizzle 選擇器結(jié)合

10圆丹、jQuery 中如何將數(shù)組轉(zhuǎn)化為 JSON 字符串，然后再轉(zhuǎn)化回來躯喇？

// 通過原生 JSON.stringify/JSON.parse 擴展 jQuery 實現(xiàn)
 $.array2json = function(array) {
    return JSON.stringify(array);
 }

 $.json2array = function(array) {
    // $.parseJSON(array); // 3.0 開始辫封，已過時
    return JSON.parse(array);
 }

 // 調(diào)用
 var json = $.array2json(['a', 'b', 'c']);
 var array = $.json2array(json);

11、jQuery 一個對象可以同時綁定多個事件廉丽，這是如何實現(xiàn)的倦微？

  $("#btn").on("mouseover mouseout", func);

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

12、針對 jQuery 的優(yōu)化方法正压？

• 緩存頻繁操作DOM對象
• 盡量使用id選擇器代替class選擇器
• 總是從#id選擇器來繼承
• 盡量使用鏈?zhǔn)讲僮?/li>
• 使用時間委托 on綁定事件
• 采用jQuery的內(nèi)部函數(shù)data()來存儲數(shù)據(jù)
• 使用最新版本的 jQuery

13欣福、jQuery 的 slideUp 動畫，當(dāng)鼠標(biāo)快速連續(xù)觸發(fā), 動畫會滯后反復(fù)執(zhí)行蔑匣，該如何處理呢?

• 在觸發(fā)元素上的事件設(shè)置為延遲處理：使用 JS 原生 setTimeout 方法
• 在觸發(fā)元素的事件時預(yù)先停止所有的動畫劣欢，再執(zhí)行相應(yīng)的動畫事件：$('.tab').stop().slideUp();

14棕诵、jQuery UI 如何自定義組件？

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

15凿将、jQuery 與 jQuery UI校套、jQuery Mobile 區(qū)別？

• jQuery 是 JS 庫牧抵，兼容各種PC瀏覽器笛匙，主要用作更方便地處理 DOM、事件犀变、動畫妹孙、AJAX

• jQuery UI 是建立在 jQuery 庫上的一組用戶界面交互、特效获枝、小部件及主題

• jQuery Mobile 以 jQuery 為基礎(chǔ)蠢正，用于創(chuàng)建“移動Web應(yīng)用”的框架

16、jQuery 和 Zepto 的區(qū)別省店？ 各自的使用場景嚣崭？

• jQuery 主要目標(biāo)是PC的網(wǎng)頁中，兼容全部主流瀏覽器懦傍。在移動設(shè)備方面雹舀，單獨推出 `jQuery Mobile
• Zepto從一開始就定位移動設(shè)備，相對更輕量級粗俱。它的API 基本兼容jQuery`说榆，但對PC瀏覽器兼容不理想

17、jQuery對象的特點

• 只有 JQuery對象才能使用 JQuery 方法
• JQuery 對象是一個數(shù)組對象

$編程題

1寸认、寫一個通用的事件偵聽器函數(shù)

 // event(事件)工具集签财，來源：github.com/markyun
    markyun.Event = {
       
        // 視能力分別使用dom0||dom2||IE方式 來綁定事件
        // 參數(shù)： 操作的元素,事件名稱 ,事件處理程序
        addEvent : function(element, type, handler) {
            if (element.addEventListener) {
                //事件類型、需要執(zhí)行的函數(shù)偏塞、是否捕捉
                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;
            }
        },
        // 取消事件的默認(rèn)行為
        preventDefault : function(event) {
            if (event.preventDefault) {
                event.preventDefault();
            } else {
                event.returnValue = false;
            }
        },
        // 獲取事件目標(biāo)
        getTarget : function(event) {
            return event.target || event.srcElement;
        }

2、如何判斷一個對象是否為數(shù)組

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

3烛愧、冒泡排序

• 每次比較相鄰的兩個數(shù)，如果后一個比前一個小掂碱，換位置

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 - i - 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怜姿、快速排序

• 采用二分法，取出中間數(shù)疼燥，數(shù)組每次和中間數(shù)比較沧卢，小的放到左邊，大的放到右邊

var arr = [3, 1, 4, 6, 5, 7, 2];

function quickSort(arr) {
    if(arr.length == 0) {
        return [];    // 返回空數(shù)組
    }

    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醉者、編寫一個方法 求一個字符串的字節(jié)長度

• 假設(shè)：一個英文字符占用一個字節(jié)但狭，一個中文字符占用兩個字節(jié)

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的用法，以及如何實現(xiàn)bind的函數(shù)和需要注意的點

• bind的作用與call和apply相同立磁，區(qū)別是call和apply是立即調(diào)用函數(shù)呈队，而bind是返回了一個函數(shù)，需要調(diào)用的時候再執(zhí)行唱歧。
  一個簡單的bind函數(shù)實現(xiàn)如下

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

$其他

1宪摧、談?wù)勀銓χ貥?gòu)的理解

• 網(wǎng)站重構(gòu)：在不改變外部行為的前提下，簡化結(jié)構(gòu)颅崩、添加可讀性几于，而在網(wǎng)站前端保持一致的行為。也就是說是在不改變UI的情況下沿后，對網(wǎng)站進(jìn)行優(yōu)化沿彭， 在擴展的同時保持一致的UI

• 對于傳統(tǒng)的網(wǎng)站來說重構(gòu)通常是：

  • 表格(table)布局改為DIV+CSS

  • 使網(wǎng)站前端兼容于現(xiàn)代瀏覽器(針對于不合規(guī)范的CSS、如對IE6有效的)

  • 對于移動平臺的優(yōu)化

  • 針對于SEO進(jìn)行優(yōu)化

2尖滚、什么樣的前端代碼是好的

• 高復(fù)用低耦合喉刘，這樣文件小，好維護熔掺，而且好擴展饱搏。

3、對前端工程師這個職位是怎么樣理解的置逻？它的前景會怎么樣推沸？

• 前端是最貼近用戶的程序員，比后端券坞、數(shù)據(jù)庫鬓催、產(chǎn)品經(jīng)理、運營恨锚、安全都近

  • 實現(xiàn)界面交互
  • 提升用戶體驗
  • 有了Node.js宇驾，前端可以實現(xiàn)服務(wù)端的一些事情

• 前端是最貼近用戶的程序員，前端的能力就是能讓產(chǎn)品從 90分進(jìn)化到 100 分猴伶，甚至更好课舍，

• 與團隊成員，UI設(shè)計他挎，產(chǎn)品經(jīng)理的溝通筝尾；

• 做好的頁面結(jié)構(gòu)，頁面重構(gòu)和用戶體驗办桨；

4筹淫、你覺得前端工程的價值體現(xiàn)在哪

• 為簡化用戶使用提供技術(shù)支持（交互部分）

• 為多個瀏覽器兼容性提供支持

• 為提高用戶瀏覽速度（瀏覽器性能）提供支持

• 為跨平臺或者其他基于webkit或其他渲染引擎的應(yīng)用提供支持

• 為展示數(shù)據(jù)提供支持（數(shù)據(jù)接口）

5、平時如何管理你的項目呢撞？

• 先期團隊必須確定好全局樣式（globe.css）损姜，編碼模式(utf-8) 等饰剥；

• 編寫習(xí)慣必須一致（例如都是采用繼承式的寫法，單樣式都寫成一行）摧阅；

• 標(biāo)注樣式編寫人汰蓉，各模塊都及時標(biāo)注（標(biāo)注關(guān)鍵樣式調(diào)用的地方）；

• 頁面進(jìn)行標(biāo)注（例如 頁面 模塊 開始和結(jié)束）逸尖；

• CSS跟HTML 分文件夾并行存放古沥，命名都得統(tǒng)一（例如style.css）；

• JS 分文件夾存放 命名以該JS功能為準(zhǔn)的英文翻譯娇跟。

• 圖片采用整合的 images.png png8 格式文件使用 - 盡量整合在一起使用方便將來的管理

人事面

• 面試完你還有什么問題要問的嗎
• 你有什么愛好?
• 你最大的優(yōu)點和缺點是什么?
• 你為什么會選擇這個行業(yè)岩齿，職位?
• 你覺得你適合從事這個崗位嗎?
• 你有什么職業(yè)規(guī)劃?
• 你對工資有什么要求?
• 如何看待前端開發(fā)？
• 未來三到五年的規(guī)劃是怎樣的苞俘？

常問

• 自我介紹
• 你的項目中技術(shù)難點是什么盹沈？遇到了什么問題？你是怎么解決的吃谣？
• 你認(rèn)為哪個項目做得最好乞封？
• 最近在看哪些前端方面的書？
• 平時是如何學(xué)習(xí)前端開發(fā)的岗憋？
• 你最有成就感的一件事
• 你是怎么學(xué)習(xí)前端的

• Mardown原文
• PDF版本下載