前端常見問題整理

$HTML， HTTP，web綜合問題

1、前端需要注意哪些SEO

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

2、img的title和alt有什麼區別

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

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

1、GET方法
- 傳送一個請求來取得伺服器上的某一資源
2、POST方法
- 向URL指定的資源提交資料或附加新的資料
3、PUT方法
- 跟POST方法很像，也是想伺服器提交資料。但是，它們之間有不同。PUT指定了資源在伺服器上的位置，而POST沒有
4、HEAD方法
- 只請求頁面的首部
5、DELETE方法
- 刪除伺服器上的某資源
6、OPTIONS方法
- 它用於獲取當前URL所支援的方法。如果請求成功，會有一個Allow的頭包含類似“GET,POST”這樣的資訊
7、TRACE方法
- TRACE方法被用於激發一個遠端的，應用層的請求訊息迴路
8、CONNECT方法
- 把請求連線轉換到透明的TCP/IP通道

4、從瀏覽器位址列輸入url到顯示頁面的步驟

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

5、如何進行網站效能優化

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

6、HTTP狀態碼及其含義

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

7、語義化的理解

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

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

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

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

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

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

在使用者沒有與因特網連線時，可以正常訪問站點或應用，在使用者與因特網連線時，更新使用者機器上的快取檔案
原理：HTML5的離線儲存是基於一個新建的.appcache檔案的快取機制(不是儲存技術)，通過這個檔案上的解析清單離線儲存資源，這些資源就會像cookie一樣被儲存了下來。之後當網路在處於離線狀態下時，瀏覽器會通過被離線儲存的資料進行頁面展示
如何使用：
- 頁面頭部像下面一樣加入一個manifest的屬性；
- 在cache.manifest檔案的編寫離線儲存的資源
- 在離線狀態時，操作window.applicationCache進行需求實現

CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
複製程式碼

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

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

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

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

13、iframe有那些缺點？

iframe會阻塞主頁面的Onload事件
搜尋引擎的檢索程式無法解讀這種頁面，不利於SEO
iframe和主頁面共享連線池，而瀏覽器對相同域的連線有限制，所以會影響頁面的並行載入
使用iframe之前需要考慮這兩個缺點。如果需要使用iframe，最好是通過javascript動態給iframe新增src屬性值，這樣可以繞開以上兩個問題

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

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

15、xhtml和html有什麼區別?

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

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

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

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

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

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

class:為元素設定類標識
data-*: 為元素增加自定義屬性
draggable: 設定元素是否可拖拽
id: 元素id，文件內唯一
lang: 元素內容的的語言
style: 行內css樣式
title: 元素相關的建議資訊

19、Canvas和SVG有什麼區別？

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

20、HTML5 為什麼只需要寫？

HTML5 不基於 SGML，因此不需要對DTD進行引用，但是需要doctype來規範瀏覽器的行為
而HTML4.01基於SGML,所以需要對DTD進行引用，才能告知瀏覽器文件所使用的文件型別

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

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

22、網頁驗證碼是幹嘛的，是為了解決什麼安全問題

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

$CSS部分

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

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

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

聯絡：它們都能讓元素不可見
區別：
- display:none;會讓元素完全從渲染樹中消失，渲染的時候不佔據任何空間；visibility: hidden;不會讓元素從渲染樹消失，渲染師元素繼續佔據空間，只是內容不可見
- display: none;是非繼承屬性，子孫節點消失由於元素從渲染樹消失造成，通過修改子孫節點屬性無法顯示；visibility: hidden;是繼承屬性，子孫節點消失由於繼承了hidden，通過設定visibility: visible;可以讓子孫節點顯式
- 修改常規流中元素的display通常會造成文件重排。修改visibility屬性只會造成本元素的重繪。
- 讀屏器不會讀取display: none;元素內容；會讀取visibility: hidden;元素內容

3、link與@import的區別

link是HTML方式， @import是CSS方式
link最大限度支援並行下載，@import過多巢狀導致序列下載，出現FOUC
link可以通過rel="alternate stylesheet"指定候選樣式
瀏覽器對link支援早於@import，可以使用@import對老瀏覽器隱藏樣式
@import必須在樣式規則之前，可以在css檔案中引用其他檔案
總體來說：link優於@import

4、什麼是FOUC?如何避免

Flash Of Unstyled Content：使用者定義樣式表載入之前瀏覽器使用預設樣式顯示文件，使用者樣式載入渲染之後再從新顯示文件，造成頁面閃爍。
解決方法：把樣式表放到文件的head

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

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

6、display,float,position的關係

如果display為none，那麼position和float都不起作用，這種情況下元素不產生框
否則，如果position值為absolute或者fixed，框就是絕對定位的，float的計算值為none，display根據下面的表格進行調整。
否則，如果float不是none，框是浮動的，display根據下表進行調整
否則，如果元素是根元素，display根據下表進行調整
其他情況下display的值為指定值
總結起來：絕對定位、浮動、根元素都需要調整display

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

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

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

因為瀏覽器的相容問題，不同瀏覽器對有些標籤的預設值是不同的，如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。
當然，初始化樣式會對SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化

9、css3有哪些新特性

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

CSS3新增偽類有那些？

p:first-of-type 選擇屬於其父元素的首個元素的每個 元素。
p:last-of-type 選擇屬於其父元素的最後  元素的每個 元素。
p:only-of-type 選擇屬於其父元素唯一的 元素的每個  元素。
p:only-child 選擇屬於其父元素的唯一子元素的每個  元素。
p:nth-child(2) 選擇屬於其父元素的第二個子元素的每個  元素。
:after 在元素之前新增內容,也可以用來做清除浮動。
:before 在元素之後新增內容
:enabled
:disabled 控制表單控制元件的禁用狀態。
:checked 單選框或核取方塊被選中

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

block 象塊型別元素一樣顯示。
none 預設值。象行內元素型別一樣顯示。
inline-block 象行內元素一樣顯示，但其內容象塊型別元素一樣顯示。
list-item 象塊型別元素一樣顯示，並新增樣式列表標記。
table 此元素會作為塊級表格來顯示
inherit 規定應該從父元素繼承 display 屬性的值

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

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

12、CSS優先順序演算法如何計算？

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

13、對BFC規範的理解？

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

14、談談浮動和清除浮動

浮動的框可以向左或向右移動，直到他的外邊緣碰到包含框或另一個浮動框的邊框為止。由於浮動框不在文件的普通流中，所以文件的普通流的塊框表現得就像浮動框不存在一樣。浮動的塊框會漂浮在文件普通流的塊框上

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

absolute：生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位
fixed：生成絕對定位的元素，相對於瀏覽器視窗進行定位
relative：生成相對定位的元素，相對於其正常位置進行定位
static 預設值。沒有定位，元素出現在正常的流中
inherit 規定從父元素繼承 position 屬性的值

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

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

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

GIF
- 8位畫素，256色
- 無失真壓縮
- 支援簡單動畫
- 支援boolean透明
- 適合簡單動畫
JPEG
- 顏色限於256
- 有失真壓縮
- 可控制壓縮質量
- 不支援透明
- 適合照片
PNG
- 有PNG8和truecolor PNG
- PNG8類似GIF顏色上限為256，檔案小，支援alpha透明度，無動畫
- 適合圖示、背景、按鈕

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

浮動後，行內元素不會成為塊狀元素，但是可以設定寬高。行內元素要想變成塊狀元素，佔一行，直接設定display:block;。但如果元素設定了浮動後再設定display:block;那就不會佔一行。

19、在網頁中的應該使用奇數還是偶數的字型？為什麼呢？

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

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

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

21、如果需要手動寫動畫，你認為最小時間間隔是多久，為什麼？（阿里）

多數顯示器預設頻率是60Hz，即1秒重新整理60次，所以理論上最小間隔為1/60＊1000ms ＝ 16.7ms

22、CSS合併方法

避免使用@import引入多個css檔案，可以使用CSS工具將CSS合併為一個CSS檔案，例如使用Sass\Compass等

23、CSS不同選擇器的權重(CSS層疊的規則)

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

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

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

25、CSS在效能優化方面的實踐

css壓縮與合併、Gzip壓縮
css檔案放在head裡、不要用@import
儘量用縮寫、避免用濾鏡、合理使用選擇器

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

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

27、base64的原理及優缺點

優點可以加密，減少了http請求
缺點是需要消耗CPU進行編解碼

28、幾種常見的CSS佈局

流體佈局

.left {
        float: left;
        width: 100px;
        height: 200px;
        background: red;
    }
    .right {
        float: right;
        width: 200px;
        height: 200px;
        background: blue;
    }
    .main {
        margin-left: 120px;
        margin-right: 220px;
        height: 200px;
        background: green;
    }
複製程式碼

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div>
</div>
複製程式碼

聖盃佈局

.container {
            margin-left: 120px;
            margin-right: 220px;
        }
        .main {
            float: left;
            width: 100%;
            height:300px;
            background: green;
        }
        .left {
            position: relative;
            left: -120px;
            float: left;
            height: 300px;
            width: 100px;
            margin-left: -100%;
            background: red;
        }
        .right {
            position: relative;
            right: -220px;
            float: right;
            height: 300px;
            width: 200px;
            margin-left: -200px;
            background: blue;
        }
複製程式碼

<div class="container">
    <div class="main"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>
複製程式碼

雙飛翼佈局

 .content {
            float: left;
            width: 100%;
        }
        .main {
            height: 200px;
            margin-left: 110px;
            margin-right: 220px;
            background: green;
        }
        .main::after {
            content: '';
            display: block;
            font-size:0;
            height: 0;
            zoom: 1;
            clear: both;
        }
        .left {
            float:left;
            height: 200px;
            width: 100px;
            margin-left: -100%;
            background: red;
        }
        .right {
            float: right;
            height: 200px;
            width: 200px;
            margin-left: -200px;
            background: blue;
        }
複製程式碼

<div class="content">
    <div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>
複製程式碼

29、stylus/sass/less區別

均具有“變數”、“混合”、“巢狀”、“繼承”、“顏色混合”五大基本特性
Scss和LESS語法較為嚴謹，LESS要求一定要使用大括號“{}”，Scss和Stylus可以通過縮排表示層次與巢狀關係
Scss無全域性變數的概念，LESS和Stylus有類似於其它語言的作用域概念
Sass是基於Ruby語言的，而LESS和Stylus可以基於NodeJS NPM下載相應庫後進行編譯；

30、postcss的作用

可以直觀的理解為：它就是一個平臺。為什麼說它是一個平臺呢？因為我們直接用它，感覺不能幹什麼事情，但是如果讓一些外掛在它上面跑，那麼將會很強大
PostCSS 提供了一個解析器，它能夠將 CSS 解析成抽象語法樹
通過在 PostCSS 這個平臺上，我們能夠開發一些外掛，來處理我們的CSS，比如熱門的：autoprefixer
postcss可以對sass處理過後的css再處理最常見的就是autoprefixer

$JavaScript

1、閉包

閉包就是能夠讀取其他函式內部變數的函式
閉包是指有權訪問另一個函式作用域中變數的函式，建立閉包的最常見的方式就是在一個函式內建立另一個函式，通過另一個函式訪問這個函式的區域性變數,利用閉包可以突破作用鏈域
閉包的特性：
- 函式內再巢狀函式
- 內部函式可以引用外層的引數和變數
- 引數和變數不會被垃圾回收機制回收

說說你對閉包的理解

使用閉包主要是為了設計私有的方法和變數。閉包的優點是可以避免全域性變數的汙染，缺點是閉包會常駐記憶體，會增大記憶體使用量，使用不當很容易造成記憶體洩露。在js中，函式即閉包，只有函式才會產生作用域的概念
閉包的最大用處有兩個，一個是可以讀取函式內部的變數，另一個就是讓這些變數始終保持在記憶體中
閉包的另一個用處，是封裝物件的私有屬性和私有方法
好處：能夠實現封裝和快取等；
壞處：就是消耗記憶體、不正當使用會造成記憶體溢位的問題

使用閉包的注意點

由於閉包會使得函式中的變數都被儲存在記憶體中，記憶體消耗很大，所以不能濫用閉包，否則會造成網頁的效能問題，在IE中可能導致記憶體洩露
解決方法是，在退出函式之前，將不使用的區域性變數全部刪除

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

作用域鏈的作用是保證執行環境裡有權訪問的變數和函式是有序的，作用域鏈的變數只能向上訪問，變數訪問到window物件即被終止，作用域鏈向下訪問變數是不被允許的
簡單的說，作用域就是變數與函式的可訪問範圍，即作用域控制著變數與函式的可見性和生命週期

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

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

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

事件代理（Event Delegation），又稱之為事件委託。是 JavaScript 中常用繫結事件的常用技巧。顧名思義，“事件代理”即是把原本需要繫結的事件委託給父元素，讓父元素擔當事件監聽的職務。事件代理的原理是DOM元素的事件冒泡。使用事件代理的好處是可以提高效能
可以大量節省記憶體佔用，減少事件註冊，比如在table上代理所有td的click事件就非常棒
可以實現當新增子物件時無需再次對其繫結

5、Javascript如何實現繼承？

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

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

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

    var demo = new Child();
    alert(demo.age);
    alert(demo.name);//得到被繼承的屬性
  }
複製程式碼

6、談談This物件的理解

this總是指向函式的直接呼叫者（而非間接呼叫者）
如果有new關鍵字，this指向new出來的那個物件
在事件中，this指向觸發這個事件的物件，特殊的是，IE中的attachEvent中的this總是指向全域性物件Window

7、事件模型

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

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

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

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

9、Ajax原理

Ajax的原理簡單來說是在使用者和伺服器之間加了—箇中間層(AJAX引擎)，通過XmlHttpRequest物件來向伺服器發非同步請求，從伺服器獲得資料，然後用javascript來操作DOM而更新頁面。使使用者操作與伺服器響應非同步化。這其中最關鍵的一步就是從伺服器獲得請求資料
Ajax的過程只涉及JavaScript、XMLHttpRequest和DOM。XMLHttpRequest是ajax的核心機制

 // 1. 建立連線
    var xhr = null;
    xhr = new XMLHttpRequest()
    // 2. 連線伺服器
    xhr.open('get', url, true)
    // 3. 傳送請求
    xhr.send(null);
    // 4. 接受請求
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if(xhr.status == 200){
                success(xhr.responseText);
            } else { // fail
                fail && fail(xhr.status);
            }
        }
    }
複製程式碼

ajax 有那些優缺點?

優點：
- 通過非同步模式，提升了使用者體驗.
- 優化了瀏覽器和伺服器之間的傳輸，減少不必要的資料往返，減少了頻寬佔用.
- Ajax在客戶端執行，承擔了一部分本來由伺服器承擔的工作，減少了大使用者量下的伺服器負載。
- Ajax可以實現動態不重新整理（區域性重新整理）
缺點：
- 安全問題 AJAX暴露了與伺服器互動的細節。
- 對搜尋引擎的支援比較弱。
- 不容易除錯。

10、如何解決跨域問題?

jsonp、 iframe、window.name、window.postMessage、伺服器上設定代理頁面

11、模組化開發怎麼做？

立即執行函式,不暴露私有成員

var module1 = (function(){
　　　　var _count = 0;
　　　　var m1 = function(){
　　　　　　//...
　　　　};
　　　　var m2 = function(){
　　　　　　//...
　　　　};
　　　　return {
　　　　　　m1 : m1,
　　　　　　m2 : m2
　　　　};
　　})();
複製程式碼

12、非同步載入JS的方式有哪些？

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

13、那些操作會造成記憶體洩漏？

記憶體洩漏指任何物件在您不再擁有或需要它之後仍然存在
setTimeout 的第一個引數使用字串而非函式的話，會引發記憶體洩漏
閉包使用不當

14、XML和JSON的區別？

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

15、談談你對webpack的看法

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

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

CommonJS是伺服器端模組的規範，Node.js採用了這個規範。CommonJS規範載入模組是同步的，也就是說，只有載入完成，才能執行後面的操作。AMD規範則是非同步載入模組，允許指定回撥函式
AMD推薦的風格通過返回一個物件做為模組物件，CommonJS的風格通過對module.exports或exports的屬性賦值來達到暴露模組物件的目的

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

sql注入原理
- 就是通過把SQL命令插入到Web表單遞交或輸入域名或頁面請求的查詢字串，最終達到欺騙伺服器執行惡意的SQL命令
總的來說有以下幾點
- 永遠不要信任使用者的輸入，要對使用者的輸入進行校驗，可以通過正規表示式，或限制長度，對單引號和雙"-"進行轉換等
- 永遠不要使用動態拼裝SQL，可以使用引數化的SQL或者直接使用儲存過程進行資料查詢存取
- 永遠不要使用管理員許可權的資料庫連線，為每個應用使用單獨的許可權有限的資料庫連線
- 不要把機密資訊明文存放，請加密或者hash掉密碼和敏感的資訊

XSS原理及防範

Xss(cross-site scripting)攻擊指的是攻擊者往Web頁面裡插入惡意html標籤或者javascript程式碼。比如：攻擊者在論壇中放一個看似安全的連結，騙取使用者點選後，竊取cookie中的使用者私密資訊；或者攻擊者在論壇中加一個惡意表單，當使用者提交表單的時候，卻把資訊傳送到攻擊者的伺服器中，而不是使用者原本以為的信任站點

XSS防範方法

首先程式碼裡對使用者輸入的地方和變數都需要仔細檢查長度和對”<”,”>”,”;”,”’”等字元做過濾；其次任何內容寫到頁面之前都必須加以encode，避免不小心把html tag 弄出來。這一個層面做好，至少可以堵住超過一半的XSS 攻擊

XSS與CSRF有什麼區別嗎？

XSS是獲取資訊，不需要提前知道其他使用者頁面的程式碼和資料包。CSRF是代替使用者完成指定的動作，需要知道其他使用者頁面的程式碼和資料包。要完成一次CSRF攻擊，受害者必須依次完成兩個步驟
登入受信任網站A，並在本地生成Cookie
在不登出A的情況下，訪問危險網站B

CSRF的防禦

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

18、用過哪些設計模式？

工廠模式：
- 工廠模式解決了重複例項化的問題，但還有一個問題,那就是識別問題，因為根本無法
- 主要好處就是可以消除物件間的耦合，通過使用工程方法而不是new關鍵字
建構函式模式
- 使用建構函式的方法，即解決了重複例項化的問題，又解決了物件識別的問題，該模式與工廠模式的不同之處在於
- 直接將屬性和方法賦值給 this物件;

19、為什麼要有同源限制？

同源策略指的是：協議，域名，埠相同，同源策略是一種安全協議
舉例說明：比如一個黑客程式，他利用Iframe把真正的銀行登入頁面嵌到他的頁面上，當你使用真實的使用者名稱，密碼登入時，他的頁面就可以通過Javascript讀取到你的表單中input中的內容，這樣使用者名稱，密碼就輕鬆到手了。

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

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

21、javascript有哪些方法定義物件

物件字面量： var obj = {};
建構函式： var obj = new Object();
Object.create(): var obj = Object.create(Object.prototype);

22、常見相容性問題？

png24位的圖片在iE6瀏覽器上出現背景，解決方案是做成PNG8
瀏覽器預設的margin和padding不同。解決方案是加一個全域性的*{margin:0;padding:0;}來統一,，但是全域性效率很低，一般是如下這樣解決：

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

IE下,event物件有x,y屬性,但是沒有pageX,pageY屬性
Firefox下,event物件有pageX,pageY屬性,但是沒有x,y屬性.

22、說說你對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

23、你覺得jQuery原始碼有哪些寫的好的地方

jquery原始碼封裝在一個匿名函式的自執行環境中，有助於防止變數的全域性汙染，然後通過傳入window物件引數，可以使window物件作為區域性變數使用，好處是當jquery中訪問window物件的時候，就不用將作用域鏈退回到頂層作用域了，從而可以更快的訪問window物件。同樣，傳入undefined引數，可以縮短查詢undefined時的作用域鏈
jquery將一些原型屬性和方法封裝在了jquery.prototype中，為了縮短名稱，又賦值給了jquery.fn，這是很形象的寫法
有一些陣列或物件的方法經常能使用到，jQuery將其儲存為區域性變數以提高訪問速度
jquery實現的鏈式呼叫可以節約程式碼，所返回的都是同一個物件，可以提高程式碼效率

24、vue、react、angular

Vue.js
一個用於建立 web 互動介面的庫，是一個精簡的 MVVM。它通過雙向資料繫結把 View 層和 Model 層連線了起來。實際的 DOM 封裝和輸出格式都被抽象為了Directives 和 Filters
AngularJS
是一個比較完善的前端MVVM框架，包含模板，資料雙向繫結，路由，模組化，服務，依賴注入等所有功能，模板功能強大豐富，自帶了豐富的 Angular指令
react
React 僅僅是 VIEW 層是facebook公司。推出的一個用於構建UI的一個庫，能夠實現伺服器端的渲染。用了virtual dom，所以效能很好。

25、Node的應用場景

特點：
- 1、它是一個Javascript執行環境
- 2、依賴於Chrome V8引擎進行程式碼解釋
- 3、事件驅動
- 4、非阻塞I/O
- 5、單程式，單執行緒
優點：
- 高併發（最重要的優點）
缺點：
- 1、只支援單核CPU，不能充分利用CPU
- 2、可靠性低，一旦程式碼某個環節崩潰，整個系統都崩潰

26、談談你對AMD、CMD的理解

CommonJS是伺服器端模組的規範，Node.js採用了這個規範。CommonJS規範載入模組是同步的，也就是說，只有載入完成，才能執行後面的操作。AMD規範則是非同步載入模組，允許指定回撥函式
AMD推薦的風格通過返回一個物件做為模組物件，CommonJS的風格通過對module.exports或exports的屬性賦值來達到暴露模組物件的目的

27、那些操作會造成記憶體洩漏？

記憶體洩漏指任何物件在您不再擁有或需要它之後仍然存在
setTimeout 的第一個引數使用字串而非函式的話，會引發記憶體洩漏
閉包、控制檯日誌、迴圈（在兩個物件彼此引用且彼此保留時，就會產生一個迴圈）

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

cookie
session
url重寫
隱藏input
ip地址

29、介紹js的基本資料型別

Undefined、Null、Boolean、Number、String

30、介紹js有哪些內建物件？

Object 是 JavaScript 中所有物件的父物件
資料封裝類物件：Object、Array、Boolean、Number 和 String
其他物件：Function、Arguments、Math、Date、RegExp、Error

31、說幾條寫JavaScript的基本規範？

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

32、JavaScript有幾種型別的值？，你能畫一下他們的記憶體圖嗎？

棧：原始資料型別（Undefined，Null，Boolean，Number、String）
堆：引用資料型別（物件、陣列和函式）
兩種型別的區別是：儲存位置不同；
原始資料型別直接儲存在棧(stack)中的簡單資料段，佔據空間小、大小固定，屬於被頻繁使用資料，所以放入棧中儲存；
引用資料型別儲存在堆(heap)中的物件,佔據空間大、大小不固定,如果儲存在棧中，將會影響程式執行的效能；引用資料型別在棧中儲存了指標，該指標指向堆中該實體的起始地址。當直譯器尋找引用值時，會首先檢索其
在棧中的地址，取得地址後從堆中獲得實體

33、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(); 
複製程式碼

34、eval是做什麼的？

它的功能是把對應的字串解析成JS程式碼並執行
應該避免使用eval，不安全，非常耗效能（2次，一次解析成js語句，一次執行）
由JSON字串轉換為JSON物件的時候可以用eval，var obj =eval('('+ str +')')

35、null，undefined 的區別？

undefined 表示不存在這個值。
undefined :是一個表示"無"的原始值或者說表示"缺少值"，就是此處應該有一個值，但是還沒有定義。當嘗試讀取時會返回 undefined
例如變數被宣告瞭，但沒有賦值時，就等於undefined
null 表示一個物件被定義了，值為“空值”
null : 是一個物件(空物件, 沒有任何屬性和方法)
例如作為函式的引數，表示該函式的引數不是物件；
在驗證null時，一定要使用　=== ，因為 ==無法分別null 和　undefined

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

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

37、javascript 程式碼中的"use strict";是什麼意思 ? 使用它區別是什麼？

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

38、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);
複製程式碼

39、js延遲載入的方式有哪些？

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

40、同步和非同步的區別?

同步：瀏覽器訪問伺服器請求，使用者看得到頁面重新整理，重新發請求,等請求完，頁面重新整理，新內容出現，使用者看到新內容,進行下一步操作
非同步：瀏覽器訪問伺服器請求，使用者正常操作，瀏覽器後端進行請求。等請求完，頁面不重新整理，新內容也會出現，使用者看到新內容

41、漸進增強和優雅降級

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

42、defer和async

defer並行載入js檔案，會按照頁面上script標籤的順序執行
async並行載入js檔案，下載完成立即執行，不會按照頁面上script標籤的順序執行

43、說說嚴格模式的限制

變數必須宣告後再使用
函式的引數不能有同名屬性，否則報錯
不能使用with語句
禁止this指向全域性物件

44、attribute和property的區別是什麼？

attribute是dom元素在文件中作為html標籤擁有的屬性；
property就是dom元素在js中作為物件擁有的屬性。
對於html的標準屬性來說，attribute和property是同步的，是會自動更新的
但是對於自定義的屬性來說，他們是不同步的

45、談談你對ES6的理解

新增模板字串（為JavaScript提供了簡單的字串插值功能）
箭頭函式
for-of（用來遍歷資料—例如陣列中的值。）
arguments物件可被不定引數和預設引數完美代替。
ES6將promise物件納入規範，提供了原生的Promise物件。
增加了let和const命令，用來宣告變數。
增加了塊級作用域。
let命令實際上就增加了塊級作用域。
還有就是引入module模組的概念

46、ECMAScript6 怎麼寫class麼，為什麼會出現class這種東西?

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

47、什麼是物件導向程式設計及程式導向程式設計，它們的異同和優缺點

程式導向就是分析出解決問題所需要的步驟，然後用函式把這些步驟一步一步實現，使用的時候一個一個依次呼叫就可以了
物件導向是把構成問題事務分解成各個物件，建立物件的目的不是為了完成一個步驟，而是為了描敘某個事物在整個解決問題的步驟中的行為
物件導向是以功能來劃分問題，而不是步驟

48、物件導向程式設計思想

基本思想是使用物件，類，繼承，封裝等基本概念來進行程式設計
優點
- 易維護
  - 採用物件導向思想設計的結構，可讀性高，由於繼承的存在，即使改變需求，那麼維護也只是在區域性模組，所以維護起來是非常方便和較低成本的
- 易擴充套件
- 開發工作的重用性、繼承性高，降低重複工作量。
- 縮短了開發週期

49、對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
複製程式碼

51、談一談let與var的區別？

let命令不存在變數提升，如果在let前使用，會導致報錯
如果塊區中存在let和const命令，就會形成封閉作用域
不允許重複宣告，因此，不能在函式內部重新宣告引數

52、map與forEach的區別？

forEach方法，是最基本的方法，就是遍歷與迴圈，預設有3個傳參：分別是遍歷的陣列內容item、陣列索引index、和當前遍歷陣列Array
map方法，基本用法與forEach一致，但是不同的，它會返回一個新的陣列，所以在callback需要有return值，如果沒有，會返回undefined

53、談一談你理解的函數語言程式設計？

簡單說，"函數語言程式設計"是一種"程式設計正規化"（programming paradigm），也就是如何編寫程式的方法論
它具有以下特性：閉包和高階函式、惰性計算、遞迴、函式是"第一等公民"、只用"表示式"

54、談一談箭頭函式與普通函式的區別？

函式體內的this物件，就是定義時所在的物件，而不是使用時所在的物件
不可以當作建構函式，也就是說，不可以使用new命令，否則會丟擲一個錯誤
不可以使用arguments物件，該物件在函式體內不存在。如果要用，可以用Rest引數代替
不可以使用yield命令，因此箭頭函式不能用作Generator函式

55、談一談函式中this的指向吧？

this的指向在函式定義的時候是確定不了的，只有函式執行的時候才能確定this到底指向誰，實際上this的最終指向的是那個呼叫它的物件
《javascript語言精髓》中大概概括了4種呼叫方式：
方法呼叫模式
函式呼叫模式
構造器呼叫模式

graph LR
A-->B
複製程式碼

apply/call呼叫模式

56、非同步程式設計的實現方式？

回撥函式
- 優點：簡單、容易理解
- 缺點：不利於維護，程式碼耦合高
事件監聽(採用時間驅動模式，取決於某個事件是否發生)：
- 優點：容易理解，可以繫結多個事件，每個事件可以指定多個回撥函式
- 缺點：事件驅動型，流程不夠清晰
釋出/訂閱(觀察者模式)
- 類似於事件監聽，但是可以通過‘訊息中心’，瞭解現在有多少釋出者，多少訂閱者
Promise物件
- 優點：可以利用then方法，進行鏈式寫法；可以書寫錯誤時的回撥函式；
- 缺點：編寫和理解，相對比較難
Generator函式
- 優點：函式體內外的資料交換、錯誤處理機制
- 缺點：流程管理不方便
async函式
- 優點：內建執行器、更好的語義、更廣的適用性、返回的是Promise、結構清晰。
- 缺點：錯誤處理機制

57、對原生Javascript瞭解程度

資料型別、運算、物件、Function、繼承、閉包、作用域、原型鏈、事件、RegExp、JSON、Ajax、DOM、BOM、記憶體洩漏、跨域、非同步裝載、模板引擎、前端MVC、路由、模組化、Canvas、ECMAScript

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

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

59、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 毫不費力，構建工作盡在掌握：如同一系列流管道

61、說一下Vue的雙向繫結資料的原理

vue.js 則是採用資料劫持結合釋出者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter，getter，在資料變動時釋出訊息給訂閱者，觸發相應的監聽回撥

$jQuery

1、你覺得jQuery或zepto原始碼有哪些寫的好的地方

jquery原始碼封裝在一個匿名函式的自執行環境中，有助於防止變數的全域性汙染，然後通過傳入window物件引數，可以使window物件作為區域性變數使用，好處是當jquery中訪問window物件的時候，就不用將作用域鏈退回到頂層作用域了，從而可以更快的訪問window物件。同樣，傳入undefined引數，可以縮短查詢undefined時的作用域鏈

 (function( window, undefined ) {

         //用一個函式域包起來，就是所謂的沙箱

         //在這裡邊var定義的變數，屬於這個函式域內的區域性變數，避免汙染全域性

         //把當前沙箱需要的外部變數通過函式引數引入進來

         //只要保證引數對內提供的介面的一致性，你還可以隨意替換傳進來的這個引數

        window.jQuery = window.$ = jQuery;

    })( window );
複製程式碼

jquery將一些原型屬性和方法封裝在了jquery.prototype中，為了縮短名稱，又賦值給了jquery.fn，這是很形象的寫法
有一些陣列或物件的方法經常能使用到，jQuery將其儲存為區域性變數以提高訪問速度
jquery實現的鏈式呼叫可以節約程式碼，所返回的都是同一個物件，可以提高程式碼效率

2、jQuery 的實現原理？

(function(window, undefined) {})(window);
jQuery 利用 JS 函式作用域的特性，採用立即呼叫表示式包裹了自身，解決名稱空間和變數汙染問題
window.jQuery = window.$ = jQuery;
在閉包當中將 jQuery 和 $ 繫結到 window 上，從而將 jQuery 和 $ 暴露為全域性變數

3、jQuery.fn 的 init 方法返回的 this 指的是什麼物件？為什麼要返回 this？

jQuery.fn 的 init 方法返回的 this 就是 jQuery 物件
使用者使用 jQuery() 或 $() 即可初始化 jQuery 物件，不需要動態的去呼叫 init 方法

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

$.fn.extend() 和 $.extend() 是 jQuery 為擴充套件外掛提拱了兩個方法
$.extend(object); // 為jQuery新增“靜態方法”（工具方法）

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

$.extend([true,] targetObject, object1[, object2]); // 對targt物件進行擴充套件

var settings = {validate:false, limit:5};
var options = {validate:true, name:"bar"};
$.extend(settings, options);  // 注意：不支援第一個引數傳 false
// settings == {validate:true, limit:5, name:"bar"}
複製程式碼

$.fn.extend(json); // 為jQuery新增“成員函式”（例項方法）

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

$("#email").alertValue();
複製程式碼

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

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

6、jQuery 的佇列是如何實現的？佇列可以用在哪些地方？

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

var func1 = function(){alert('事件1');}
var func2 = function(){alert('事件2');}
var func3 = function(){alert('事件3');}
var func4 = function(){alert('事件4');}

// 入棧佇列事件
$('#box').queue("queue1", func1);  // push func1 to queue1
$('#box').queue("queue1", func2);  // push func2 to queue1

// 替換佇列事件
$('#box').queue("queue1", []);  // delete queue1 with empty array
$('#box').queue("queue1", [func3, func4]);  // replace queue1

// 獲取佇列事件（返回一個函式陣列）
$('#box').queue("queue1");  // [func3(), func4()]

// 出棧佇列事件並執行
$('#box').dequeue("queue1"); // return func3 and do func3
$('#box').dequeue("queue1"); // return func4 and do func4

// 清空整個佇列
$('#box').clearQueue("queue1"); // delete queue1 with clearQueue
複製程式碼

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

bind 直接繫結在目標元素上
live 通過冒泡傳播事件，預設document上，支援動態資料
delegate 更精確的小範圍使用事件代理，效能優於 live
on 是最新的1.9版本整合了之前的三種方式的新事件繫結機制

8、是否知道自定義事件？ jQuery 裡的 fire 函式是什麼意思，什麼時候用？

事件即“釋出/訂閱”模式，自定義事件即“訊息釋出”，事件的監聽即“訂閱訂閱”
JS 原生支援自定義事件，示例：

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

jQuery 裡的 fire 函式用於呼叫 jQuery 自定義事件列表中的事件

9、jQuery 通過哪個方法和 Sizzle 選擇器結合的？

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

10、jQuery 中如何將陣列轉化為 JSON 字串，然後再轉化回來？

// 通過原生 JSON.stringify/JSON.parse 擴充套件 jQuery 實現
 $.array2json = function(array) {
    return JSON.stringify(array);
 }

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

 // 呼叫
 var json = $.array2json(['a', 'b', 'c']);
 var array = $.json2array(json);
複製程式碼

11、jQuery 一個物件可以同時繫結多個事件，這是如何實現的？

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

  $("#btn").on({
      mouseover: func1,
      mouseout: func2,
      click: func3
  });
複製程式碼

12、針對 jQuery 的優化方法？

快取頻繁操作DOM物件
儘量使用id選擇器代替class選擇器
總是從#id選擇器來繼承
儘量使用鏈式操作
使用時間委託 on繫結事件
採用jQuery的內部函式data()來儲存資料
使用最新版本的 jQuery

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

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

14、jQuery UI 如何自定義元件？

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

15、jQuery 與 jQuery UI、jQuery Mobile 區別？

jQuery 是 JS 庫，相容各種PC瀏覽器，主要用作更方便地處理 DOM、事件、動畫、AJAX
jQuery UI 是建立在 jQuery 庫上的一組使用者介面互動、特效、小部件及主題
jQuery Mobile 以 jQuery 為基礎，用於建立“移動Web應用”的框架

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

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

17、jQuery物件的特點

只有 JQuery物件才能使用 JQuery 方法
JQuery 物件是一個陣列物件

$程式設計題

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

 // event(事件)工具集，來源：github.com/markyun
    markyun.Event = {
       
        // 視能力分別使用dom0||dom2||IE方式 來繫結事件
        // 引數： 操作的元素,事件名稱 ,事件處理程式
        addEvent : function(element, type, handler) {
            if (element.addEventListener) {
                //事件型別、需要執行的函式、是否捕捉
                element.addEventListener(type, handler, false);
            } else if (element.attachEvent) {
                element.attachEvent('on' + type, function() {
                    handler.call(element);
                });
            } else {
                element['on' + type] = handler;
            }
        },
        // 移除事件
        removeEvent : function(element, type, handler) {
            if (element.removeEventListener) {
                element.removeEventListener(type, handler, false);
            } else if (element.datachEvent) {
                element.detachEvent('on' + type, handler);
            } else {
                element['on' + type] = null;
            }
        },
        // 阻止事件 (主要是事件冒泡，因為IE不支援事件捕獲)
        stopPropagation : function(ev) {
            if (ev.stopPropagation) {
                ev.stopPropagation();
            } else {
                ev.cancelBubble = true;
            }
        },
        // 取消事件的預設行為
        preventDefault : function(event) {
            if (event.preventDefault) {
                event.preventDefault();
            } else {
                event.returnValue = false;
            }
        },
        // 獲取事件目標
        getTarget : function(event) {
            return event.target || event.srcElement;
        }
複製程式碼

2、如何判斷一個物件是否為陣列

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

3、氣泡排序

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

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

function bubbleSort(arr) {
    for (var i = 0; i < arr.length - 1; i++) {
        for(var j = 0; j < arr.length - 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、快速排序

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

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

function quickSort(arr) {
    if(arr.length == 0) {
        return [];    // 返回空陣列
    }

    var cIndex = Math.floor(arr.length / 2);
    var c = arr.splice(cIndex, 1);
    var l = [];
    var r = [];

    for (var i = 0; i < arr.length; i++) {
        if(arr[i] < c) {
            l.push(arr[i]);
        } else {
            r.push(arr[i]);
        }
    }

    return quickSort(l).concat(c, quickSort(r));
}

console.log(quickSort(arr));
複製程式碼

5、編寫一個方法求一個字串的位元組長度

假設：一個英文字元佔用一個位元組，一箇中文字元佔用兩個位元組

function GetBytes(str){

        var len = str.length;

        var bytes = len;

        for(var i=0; i<len; i++){

            if (str.charCodeAt(i) > 255) bytes++;

        }

        return bytes;

    }

alert(GetBytes("你好,as"));

複製程式碼

6、bind的用法，以及如何實現bind的函式和需要注意的點

bind的作用與call和apply相同，區別是call和apply是立即呼叫函式，而bind是返回了一個函式，需要呼叫的時候再執行。
一個簡單的bind函式實現如下

Function.prototype.bind = function(ctx) {
    var fn = this;
    return function() {
        fn.apply(ctx, arguments);
    };
};
複製程式碼

$其他

1、談談你對重構的理解

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

2、什麼樣的前端程式碼是好的

高複用低耦合，這樣檔案小，好維護，而且好擴充套件。

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

前端是最貼近使用者的程式設計師，比後端、資料庫、產品經理、運營、安全都近
- 實現介面互動
- 提升使用者體驗
- 有了Node.js，前端可以實現服務端的一些事情
前端是最貼近使用者的程式設計師，前端的能力就是能讓產品從 90分進化到 100 分，甚至更好，

與團隊成員，UI設計，產品經理的溝通；
做好的頁面結構，頁面重構和使用者體驗；

4、你覺得前端工程的價值體現在哪

為簡化使用者使用提供技術支援（互動部分）
為多個瀏覽器相容性提供支援
為提高使用者瀏覽速度（瀏覽器效能）提供支援
為跨平臺或者其他基於webkit或其他渲染引擎的應用提供支援
為展示資料提供支援（資料介面）

5、平時如何管理你的專案？

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

前端常見問題整理

$HTML， HTTP，web綜合問題

1、前端需要注意哪些SEO

2、img的title和alt有什麼區別

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

4、從瀏覽器位址列輸入url到顯示頁面的步驟

5、如何進行網站效能優化

6、HTTP狀態碼及其含義

7、語義化的理解

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

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

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

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

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

13、iframe有那些缺點？

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

15、xhtml和html有什麼區別?

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

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

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

19、Canvas和SVG有什麼區別？

20、HTML5 為什麼只需要寫 ？

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

22、網頁驗證碼是幹嘛的，是為了解決什麼安全問題

$CSS部分

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

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

3、link與@import的區別

4、什麼是FOUC?如何避免

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

6、display,float,position的關係

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

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

9、css3有哪些新特性

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

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

12、CSS優先順序演算法如何計算？

13、對BFC規範的理解？

14、談談浮動和清除浮動

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

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

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

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

19、在網頁中的應該使用奇數還是偶數的字型？為什麼呢？

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

21、如果需要手動寫動畫，你認為最小時間間隔是多久，為什麼？（阿里）

22、CSS合併方法

23、CSS不同選擇器的權重(CSS層疊的規則)

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

25、CSS在效能優化方面的實踐

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

27、base64的原理及優缺點

28、幾種常見的CSS佈局

流體佈局

聖盃佈局

雙飛翼佈局

29、stylus/sass/less區別

30、postcss的作用

$JavaScript

1、閉包

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

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

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

5、Javascript如何實現繼承？

6、談談This物件的理解

7、事件模型

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

9、Ajax原理

10、如何解決跨域問題?

11、模組化開發怎麼做？

12、非同步載入JS的方式有哪些？

13、那些操作會造成記憶體洩漏？

14、XML和JSON的區別？

15、談談你對webpack的看法

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

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

18、用過哪些設計模式？

19、為什麼要有同源限制？

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

21、javascript有哪些方法定義物件

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

20、HTML5 為什麼只需要寫？

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

3、jQuery.fn 的 init 方法返回的 this 指的是什麼物件？為什麼要返回 this？

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

5、編寫一個方法求一個字串的位元組長度