2018前端常見問題整理

$HTML， HTTP，web綜合問題

一、前端須要注意哪些SEO

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

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

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

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

一、GET方法

• 發送一個請求來取得服務器上的某一資源

二、POST方法

• 向URL指定的資源提交數據或附加新的數據

三、PUT方法

• 跟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方面

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中拉伸圖片

六、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> 聲明位於文檔中的最前面，處於 <html> 標籤以前。告知瀏覽器的解析器， 用什麼文檔類型 規範來解析這個文檔
• 嚴格模式的排版和 JS 運做模式是 以該瀏覽器支持的最高標準運行
• 在混雜模式中，頁面以寬鬆的向後兼容的方式顯示。模擬老式瀏覽器的行爲以防止站點沒法工做。 DOCTYPE不存在或格式不正確會致使文檔以混雜模式呈現

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

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

1八、HTML全局屬性(global attribute)有哪些

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

1九、Canvas和SVG有什麼區別？

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

20、HTML5 爲何只須要寫 ？

• 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的區別

1. link是HTML方式， @import是CSS方式
2. link最大限度支持並行下載，@import過多嵌套致使串行下載，出現FOUC
3. link能夠經過rel="alternate stylesheet"指定候選樣式
4. 瀏覽器對link支持早於@import，能夠使用@import對老瀏覽器隱藏樣式
5. @import必須在樣式規則以前，能夠在css文件中引用其餘文件
6. 整體來講：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>元素的每一個<p> 元素。
• p:last-of-type 選擇屬於其父元素的最後 <p> 元素的每一個<p> 元素。
• p:only-of-type 選擇屬於其父元素惟一的 <p>元素的每一個 <p> 元素。
• p:only-child 選擇屬於其父元素的惟一子元素的每一個 <p> 元素。
• p:nth-child(2) 選擇屬於其父元素的第二個子元素的每一個 <p> 元素。
• :after 在元素以前添加內容,也能夠用來作清除浮動。
• :before 在元素以後添加內容
• :enabled
• :disabled 控制表單控件的禁用狀態。
• :checked 單選框或複選框被選中

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


<divclass="container"><divclass="left"></div><divclass="right"></div><divclass="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;
        }


<divclass="container"><divclass="main"></div><divclass="left"></div><divclass="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;
        }


<divclass="content"><divclass="main"></div></div><divclass="left"></div><divclass="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方法去實現較簡單，建議使用構造函數與原型混合方式

functionParent(){
        this.name = 'wang';
    }

    functionChild(){
        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 - <a>後的跳轉。在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 = newPromise(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來模擬無參的構造函數

  functionPerson(){} 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關鍵字定義構造的上下文屬性）

  functionPet(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 =newObject(); wcDog.name="旺財"; wcDog.age=3; wcDog.work=function(){ alert("我是"+wcDog.name+",汪汪汪......"); } wcDog.work();

• 用原型方式來建立

  functionDog(){

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

• 用混合方式來建立

  functionCar(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 instanceofArray; // true

• constructor方法

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

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

• 最簡單的方法

• 這種寫法，是 jQuery 正在使用的

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

• ES5新增方法isArray()

  var a = newArray(123); var b = newDate(); console.log(Array.isArray(a)); //trueconsole.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.$ = jQuery;

在閉包當中將 jQuery 和 暴露爲全局變量

三、jQuery.fn 的 init 方法返回的 this 指的是什麼對象？ 爲何要返回 this？

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

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

• $.fn.extend() 和 $.extend() 是 jQuery 爲擴展插件提拱了兩個方法

• $.extend(object); // 爲jQuery添加「靜態方法」（工具方法）

  .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添加「成員函數」（實例方法）

  (this).click(function(){ alert($(this).val()); }); } });

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

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

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

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

六、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", func2); // push func2 to queue1// 替換隊列事件 ('#box').queue("queue1", [func3, func4]); // replace queue1// 獲取隊列事件（返回一個函數數組） ('#box').dequeue("queue1"); // return func3 and do func3 ('#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) {
    returnJSON.stringify(array);
 }

 $.json2array = function(array) {
    // $.parseJSON(array); // 3.0 開始，已過期returnJSON.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 方法
• 在觸發元素的事件時預先中止全部的動畫，再執行相應的動畫事件：$('.tab').stop().slideUp();

1四、jQuery UI 如何自定義組件？

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

1五、jQuery 與 jQuery UI、jQuery Mobile 區別？

jQuery 是 JS 庫，兼容各類PC瀏覽器，主要用做更方便地處理 DOM、事件、動畫、AJAX

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

jQuery Mobile 以 jQuery 爲基礎，用於建立「移動Web應用」的框架

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

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

1七、jQuery對象的特色

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

$編程題

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

// event(事件)工具集，來源：github.com/markyun
    markyun.Event = {
       
        // 視能力分別使用dom0||dom2||IE方式 來綁定事件// 參數： 操做的元素,事件名稱 ,事件處理程序
        addEvent : function(element, type, handler) {
            if (element.addEventListener) {
                //事件類型、須要執行的函數、是否捕捉
                element.addEventListener(type, handler, false);
            } elseif (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);
            } elseif (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;
        }
複製代碼

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

functionisArray(arg) {
    if (typeof arg === 'object') {
        returnObject.prototype.toString.call(arg) === '[object Array]';
    }
    returnfalse;
}
複製代碼

三、冒泡排序

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

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

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

四、快速排序

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

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

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

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

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

  functionGetBytes(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;
    returnfunction() {
        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 格式文件使用 - 儘可能整合在一塊兒使用方便未來的管理

前端技術 微信羣 歡迎加入

添加管理員微信申請入羣 : yiyalan0826