前端面試題目彙總

關於js

1.原型鏈
2.AJAX請求數據時解決緩存的辦法
3.js的繼承
4.簡單談談事件冒泡和事件捕獲
5.閉包何時會用到有什麼好處
6.三目運算符
7.圖表的使用
8.AJAX跨域如何解決
9.談談Promise的理解
10.遞歸
11.ES6

關於前端框架

1.angular和jquery有什麼區別
2.三大框架的區別和特性，項目案列VUE REACT ANGULAR
3.三大框架實戰演練
4.angular路由
5.倆個angular之間如何傳值
6.VUE的寫法

關於JAVASCRIPT自動化構建工具

1.GULP GRUNT WEBPACK的瞭解
2.搭建項目步驟的演示

移動端兼容性問題

1.IE opacity不起做用解決辦法
2.Placeholder不起做用解決辦法
3.input被鍵盤遮擋解決辦法
4.audio在微信裏音樂沒法自動播放

關於CSS3 HTML5

1.CSS3 HTML5新屬性
2.LESS SASS和css的區別
3.rem和px的區別
4.微信登陸 第三方支付 分享
5.地圖 Geolocation
6.WEbsockt

關於版本控制系統

1.GIT

更新/提交代碼

1. cd kake/ 項目名

2. sh.git

3. pull／push

4. update_1／描述用英文並用下劃線分割
   注： 更新以前可以使用git status查看是否有修改，git diff查看所修改文件

更新完 source下面 npm run all

修改host文件

1. sudo vim /ect/hosts

2. i 鍵盤修改

3. Esc :

4. wq 保存並退出

解決衝突

CONFLICT
cd 目錄名
git add 文件衝突路徑
kake/frontend/less/detail/index.less

2.SVN

關於數據結構與算法## box-sizing: border-box的做用

當你設置一個元素爲 box-sizing: border-box; 時，此元素的內邊距和邊框再也不會增長它的寬度。
例如：
<div class="box">舉個例子</div>
.box {

width: 500px;     
height:100px;  
border: 1px solid #000;
-webkit-box-sizing: border-box;     
    -moz-box-sizing: border-box;
              box-sizing: border-box;

}
若是這時候你加上一個內邊距屬性，padding: 10px;
這個div不會撐開，即你所見的邊框位置沒有任何變更，可是「舉個例子」這句話會和div邊框有10px的間距。
通常在寫頁面的時候用這個屬性就不會再考慮邊框和內邊距會改變總體所佔寬度，即不用再根據盒子模型再去計算，省去不少麻煩。

在不使用第三個變量的狀況下使倆個變量的值互換

算術運算
int a,b;
a=10;b=12;
a=b-a; //a=2;b=12
b=b-a; //a=2;b=10
a=b+a; //a=10;b=10
它的原理是：把a、b看作數軸上的點，圍繞兩點間的距離來進行計算。
具體過程：第一句「a=b-a」求出ab兩點的距離，而且將其保存在a中；第二句「b=b-a」求出a到原點的距離（b到原點的距離與ab兩點距離之差），而且將其保存在b中；第三句「a=b+a」求出b到原點的距離（a到原點距離與ab兩點距離之和），而且將其保存在a中。完成交換。
此算法與標準算法相比，多了三個計算的過程，可是沒有藉助臨時變量。（如下稱爲算術算法）

this的指向：

一、做爲普通函數調用（this指向全局對象window對象）
二、做爲對象的方法調用（this指向該對象）
三、構造器調用（this指向用new返回的這個對象）
四、call、apply、bind的調用（this指向第一個參數對象）

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

一、建立一個新對象
二、將構造函數的做用域賦給新對象（所以this就指向了這個新對象）
三、執行構造函數中的代碼（爲這個新對象添加屬性）
四、返回新對象

null和undefined的區別？

一、null是一個表示」無」的對象，轉爲數值時爲0；undefined是一個表示」無」的原始值，轉爲數值時爲NaN。
二、undefined表示」缺乏值」，就是此處應該有一個值，可是尚未定義。
三、null表示」沒有對象」，即該處不該該有值。

call、apply、bind的區別

三者都是用來改變函數的this對象的指向的。
三者第一個參數都是this要指向的對象，也就是想指定的上下文。
call 傳入的參數數量不固定，第二部分參數要一個一個傳，用，隔開。
apply 接受兩個參數，第二個參數爲一個帶下標的集合，能夠爲數組，也能夠爲類數組。
bind 是返回一個改變了上下文的函數副本，便於稍後調用；apply 、call 則是當即調用 。
本地存儲

sessionStorage和localStorage的區別

sessionStorage用於本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問而且當會話結束後數據也隨之銷燬。所以sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。
localStorage用於持久化的本地存儲，除非主動刪除數據，不然數據是永遠不會過時的。
具體參見：本地存儲sessionStorage與localStorage

cookie 和session

一、cookie數據存放在客戶的瀏覽器上，session數據放在服務器上。
二、cookie不是很安全，別人能夠分析存放在本地的COOKIE並進行COOKIE欺騙，考慮到安全應當使用session。
三、session會在必定時間內保存在服務器上。當訪問增多，會比較佔用你服務器的性能，考慮到減輕服務器性能方面，應當使用COOKIE。
四、單個cookie保存的數據不能超過4K，不少瀏覽器都限制一個站點最多保存20個cookie。每次請求一個新的頁面的時候Cookie都會被髮送過去，與服務器進行交互。

XML和JSON的區別？

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

如何實現瀏覽器內多個標籤頁之間的通訊?

調用localstorge、cookies等本地存儲方式

線程與進程的區別

一、一個程序至少有一個進程,一個進程至少有一個線程.
二、線程的劃分尺度小於進程，使得多線程程序的併發性高。
三、進程在執行過程當中擁有獨立的內存單元，而多個線程共享內存，從而極大地提升了程序的運行效率。
四、線程在執行過程當中與進程仍是有區別的。每一個獨立的線程有一個程序運行的入口、順序執行序列和程序的出口。可是線程不可以獨立執行，必須依存在應用程序中，由應用程序提供多個線程執行控制。
五、從邏輯角度來看，多線程的意義在於一個應用程序中，有多個執行部分能夠同時執行。但操做系統並無將多個線程看作多個獨立的應用，來實現進程的調度和管理以及資源分配。這就是進程和線程的重要區別。

漸進加強和優雅降級

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

優雅降級 ：一開始就構建完整的功能，而後再針對低版本瀏覽器進行兼容。

性能優化

網頁內容
減小 http請求次數
減小 DNS查詢次數
避免頁面跳轉
緩存 Ajax
延遲加載
提早加載
減小 DOM元素數量
避免 404
服務器
使用CDN(內容分發網絡)
添加Expires或Cache-Control報文頭
Gzip壓縮傳輸文件
CSS
將樣式表置頂
用代替@import
JavaScript
把腳本置於頁面底部
使用外部JavaScript和CSS
精簡JavaScript和CSS
去除重複腳本
減小DOM訪問
圖片
優化圖像
優化CSS Spirite
不要在HTML中縮放圖片
favicon.ico要小並且可緩存

如何解決跨域問題?

jsonp、CORS、document.domain+iframe、window.name、window.postMessage

jsonp的原理就是利用了<script>標籤能夠連接到不一樣源的js腳本，來到達跨域目的。利用 頁面上 script 標籤能夠跨域，而且其 src 指定的js腳本到達瀏覽器會執行的特性，咱們能夠進行跨域取得數據

請解釋一下 JavaScript 的同源策略

。

這裏的同源策略指的是：協議，域名，端口相同，同源策略是一種安全協議。

指一段腳本只能讀取來自同一來源的窗口和文檔的屬性。

哪些操做會形成內存泄漏？

一、內存泄漏指任何對象在您再也不擁有或須要它以後仍然存在。
二、垃圾回收器按期掃描對象，並計算引用了每一個對象的其餘對象的數量。若是一個對象的引用數量爲 0（沒有其餘對象引用過該對象），或對該對象的唯一引用是循環的，那麼該對象的內存便可回收。
三、setTimeout 的第一個參數使用字符串而非函數的話，會引起內存泄漏。
閉包、控制檯日誌、循環（在兩個對象彼此引用且彼此保留時，就會產生一個循環）

Javascript垃圾回收方法

一、標記清除：這是JavaScript最多見的垃圾回收方式，當變量進入執行環境的時候，好比函數中聲明一個變量，垃圾回收器將其標記爲「進入環境」，當變量離開環境的時候（函數執行結束）將其標記爲「離開環境」。

二、引用計數：引用計數的策略是跟蹤記錄每一個值被使用的次數，當聲明瞭一個 變量並將一個引用類型賦值給該變量的時候這個值的引用次數就加1，若是該變量的值變成了另一個，則這個值得引用次數減1，當這個值的引用次數變爲0的時 候，說明沒有變量在使用，這個值無法被訪問了，所以能夠將其佔用的空間回收，這樣垃圾回收器會在運行的時候清理掉引用次數爲0的值佔用的空間。

事件、IE與火狐的事件機制有什麼區別？ 如何阻止冒泡？

事件處理機制：IE是事件冒泡、firefox同時支持兩種事件模型，也就是：捕獲型事件和冒泡型事件。

阻止冒泡：ev.stopPropagation()

說說嚴格模式的限制

變量必須聲明後再使用
函數的參數不能有同名屬性，不然報錯
禁止this指向全局對象
不能使用with語句
增長了保留字
arguments不會自動反映函數參數的變化
設立」嚴格模式」的目的：

消除Javascript語法的一些不合理、不嚴謹之處，減小一些怪異行爲;

消除代碼運行的一些不安全之處，保證代碼運行的安全；

提升編譯器效率，增長運行速度；

爲將來新版本的Javascript作好鋪墊。

請解釋什麼是事件代理

事件代理（Event Delegation），又稱之爲事件委託。便是把本來須要綁定的事件委託給父元素，讓父元素擔當事件監聽的職務。事件代理的原理是DOM元素的事件冒泡。使用事件代理的好處是能夠提升性能。

Event Loop、消息隊列、事件輪詢

緩存

瀏覽器緩存（Browser Caching）是瀏覽器端保存數據用於快速讀取或避免重複資源請求的優化機制，有效的緩存使用能夠避免重複的網絡請求和瀏覽器快速地讀取本地數據，

http緩存

http緩存是基於HTTP協議的瀏覽器文件級緩存機制。即針對文件的重複請求狀況下，瀏覽器能夠根據協議頭判斷從服務器端請求文件仍是從本地讀取文件
判斷expires，若是未過時，直接讀取http緩存文件

ES6

ES6的瞭解

es6是一個新的標準，它包含了許多新的語言特性和庫，是JS最實質性的一次升級。好比’箭頭函數’、’字符串模板’、’generators(生成器)’、’async/await’、’解構賦值’、’class’等等，還有就是引入module模塊的概念。

箭頭函數可讓this指向固定化，這種特性頗有利於封裝回調函數
（1）函數體內的this對象，就是定義時所在的對象，而不是使用時所在的對象。
（2）不能夠看成構造函數，也就是說，不可使用new命令，不然會拋出一個錯誤。
（3）不可使用arguments對象，該對象在函數體內不存在。若是要用，能夠用Rest參數代替。
（4）不可使用yield命令，所以箭頭函數不能用做Generator函數。

async/await是寫異步代碼的新方式，之前的方法有回調函數和Promise。
async/await是基於Promise實現的，它不能用於普通的回調函數。
async/await與Promise同樣，是非阻塞的。
async/await使得異步代碼看起來像同步代碼，這正是它的魔力所在。

說說你對Promise的理解

Promise 是異步編程的一種解決方案，比傳統的解決方案——回調函數和事件監聽——更合理和更強大。

所謂Promise，簡單說就是一個容器，裏面保存着某個將來纔會結束的事件（一般是一個異步操做）的結果。從語法上說，Promise 是一個對象，從它能夠獲取異步操做的消息。Promise 提供統一的 API，各類異步操做均可以用一樣的方法進行處理。

Promise對象有如下兩個特色:

對象的狀態不受外界影響，Promise對象表明一個異步操做，有三種狀態：Pending（進行中）、Resolved（已完成，又稱 Fulfilled）和Rejected（已失敗）
一旦狀態改變，就不會再變，任什麼時候候均可以獲得這個結果。
說說你對AMD和Commonjs的理解

CommonJS是服務器端模塊的規範，Node.js採用了這個規範。CommonJS規範加載模塊是同步的，也就是說，只有加載完成，才能執行後面的操做。AMD規範則是非同步加載模塊，容許指定回調函數。

AMD推薦的風格經過返回一個對象作爲模塊對象，CommonJS的風格經過對module.exports或exports的屬性賦值來達到暴露模塊對象的目的。

Gulp、Webpack比較

Gulp
一、Gulp就是爲了規範前端開發流程，實現先後端分離、模塊化開發、版本控制、文件合併與壓縮、mock數據等功能的一個前端自動化構建工具。
二、Gulp就像是一個產品的流水線，整個產品從無到有，都要受流水線的控制，在流水線上咱們能夠對產品進行管理。
三、Gulp是經過task對整個開發過程進行構建。

Webpack
一、當下最熱門的前端資源模塊化管理和打包工具
二、能夠很好的管理模塊以及各個模塊之間的依賴
三、對js、css、圖片等資源文件都支持打包
四、有獨立的配置文件webpack.config.js
五、能夠將代碼切割成不一樣的chunk，實現按需加載，下降了初始化時間
六、能夠生成優化且合併後的靜態資源

兩大特點：一、代碼能夠自動完成編譯。二、loader 能夠處理各類類型的靜態文件，而且支持串聯操做

CSS

display:none和visibility:hidden的區別？

display:none 隱藏對應的元素，在文檔佈局中再也不給它分配空間，它各邊的元素會合攏，就當他歷來不存在。

visibility:hidden 隱藏對應的元素，可是在文檔佈局中仍保留原來的空間。

position:absolute和float屬性的異同

A：共同點：
對內聯元素設置float和absolute屬性，可讓元素脫離文檔流，而且能夠設置其寬高。

B：不一樣點：
float仍會佔據位置，position會覆蓋文檔流中的其餘元素。

box-sizing屬性

content-box：讓元素維持W3C的標準盒模型。元素的寬度/高度由border + padding + content的寬度/高度決定，設置width/height屬性指的是content部分的寬/高，一旦修改了元素的邊框或內距，就會影響元素的盒子尺寸，就不得不從新計算元素的盒子尺寸，從而影響整個頁面的佈局。

border-box：讓元素維持IE傳統盒模型（IE6如下版本和IE6~7的怪異模式）。設置width/height屬性指的是border + padding + content

position的值

static 默認值。沒有定位，元素出如今正常的流中
relative 生成相對定位的元素，相對於其在普通流中的位置進行定位。
absolute 生成絕對定位的元素， 相對於最近一級的 定位不是 static 的父元素來進行定位。
fixed （老IE不支持）生成絕對定位的元素，相對於瀏覽器窗口進行定位。
CSS3新特性

CSS3實現圓角（border-radius），陰影（box-shadow），
對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉,縮放,定位,傾斜
增長了更多的CSS選擇器 多背景 rgba
在CSS3中惟一引入的僞元素是::selection.
媒體查詢，多欄佈局
border-image

CSS sprites

CSS Sprites 其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的「background-image」，「background- repeat」，「background-position」的組合進行背景定位，background-position能夠用數字能精確的定位出背景圖片的位置。這樣能夠減小不少圖片請求的開銷，由於請求耗時比較長；請求雖然能夠併發，可是也有限制，通常瀏覽器都是6個。對於將來而言，就不須要這樣作了，由於有了http2。
解釋下浮動和它的工做原理？清除浮動的技巧

浮動元素脫離文檔流，不佔據空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。
1.使用空標籤清除浮動。
這種方法是在全部浮動標籤後面添加一個空標籤 定義css clear:both. 弊端就是增長了無心義標籤。
2.使用overflow。
設置overflow爲hidden或者auto，給包含浮動元素的父標籤添加css屬性 overflow:auto; zoom:1; zoom:1用於兼容IE6。
3.使用after僞對象清除浮動。
該方法只適用於非IE瀏覽器。該方法中必須爲須要清除浮動元素的僞對象中設置 height:0，不然該元素會比實際高出若干像素；

box:after{

content:".";
height:0;
visibility:hidden;
display:block;
clear:both;

}
浮動元素引發的問題

一、父元素的高度沒法被撐開，影響與父元素同級的元素
二、與浮動元素同級的非浮動元素（內聯元素）會跟隨其後
三、若非第一個元素浮動，則該元素以前的元素也須要浮動，不然會影響頁面顯示的結構

HTML

說說你對語義化的理解

一、去掉或者丟失樣式的時候可以讓頁面呈現出清晰的結構
二、有利於SEO：和搜索引擎創建良好溝通，有助於爬蟲抓取更多的有效信息：爬蟲依賴於標籤來肯定上下文和各個關鍵字的權重；
三、方便其餘設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；
四、便於團隊開發和維護，語義化更具可讀性，是下一步吧網頁的重要動向，遵循W3C標準的團隊都遵循這個標準，能夠減小差別化。

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

一、<!DOCTYPE> 告知瀏覽器的解析器用什麼文檔標準解析這個文檔。
二、嚴格模式的排版和 JS 運做模式是以該瀏覽器支持的最高標準運行。
三、在混雜模式中，頁面以寬鬆的向後兼容的方式顯示。模擬老式瀏覽器的行爲以防止站點沒法工做。
四、<!DOCTYPE> 不存在或格式不正確會致使文檔以混雜模式呈現。

你知道多少種Doctype文檔類型？

該標籤可聲明三種 DTD 類型，分別表示嚴格版本、過渡版本以及基於框架的 HTML 文檔。
HTML 4.01 規定了三種文檔類型：Strict、Transitional 以及 Frameset。
XHTML 1.0 規定了三種 XML 文檔類型：Strict、Transitional 以及 Frameset。
Standards （標準）模式（也就是嚴格呈現模式）用於呈現遵循最新標準的網頁，而 Quirks（包容）模式（也就是鬆散呈現模式或者兼容模式）用於呈現爲傳統瀏覽器而設計的網頁。

HTML與XHTML——兩者有什麼區別

一、全部的標記都必需要有一個相應的結束標記
二、全部標籤的元素和屬性的名字都必須使用小寫
三、全部的XML標記都必須合理嵌套
四、全部的屬性必須用引號」」括起來
五、把全部<和&特殊符號用編碼表示
六、給全部屬性賦一個值
七、不要在註釋內容中使「–」
八、圖片必須有說明文字

html5有哪些新特性

語義化更好的內容標籤（header,nav,footer,aside,article,section）
音頻、視頻API(audio,video)
畫布(Canvas) API
地理(Geolocation) API
拖拽釋放(Drag and drop) API
本地離線存儲
表單控件，calendar、date、time、email、url、search

一個完整的URL包括如下幾部分

http://www.hzzly.net:8080/new...

一、協議部分
二、域名部分
三、端口部分
四、虛擬目錄部分：從域名後的第一個「/」開始到最後一個「/」爲止
五、文件名部分：從域名後的最後一個「/」開始到「？」爲止
六、參數部分：從「？」開始到「#」爲止之間的部分
七、錨部分：從「#」開始到最後

GET和POST的區別

GET：通常用於信息獲取，使用URL傳遞參數，對所發送信息的數量也有限制，通常在1024字節，Get是經過地址欄來傳值。

POST：通常用於修改服務器上的資源，對所發送的信息沒有限制。（經常使用於發送表單數據，新建、修改等），Post是經過提交表單來傳值。

數組去重

建一個空對象和空數組，循環遍歷須要去重的數組，判斷對象有沒有此屬性，沒有的話就給對象添加此屬性，並向空數組中push這個值。

//es5
function unique(arr){

var obj = {}
var result = []
for(var i in arr){
    if(!obj[arr[i]]){
        obj[arr[i]] = true;
        result.push(arr[i]);
    }
}
return result;

}
//es6
[...new Set(arr)]

冒泡排序

相鄰兩個對比，最後把最大的排到了最後，重複此過程。

function bubbleSort(arr) {

var len = arr.length;
for (var i = 0; i < len; i++) {
    for (var j = 0; j < len - 1 - i; j++) {
        if (arr[j] > arr[j+1]) {        //相鄰元素兩兩對比
            var temp = arr[j+1];        //元素交換
            arr[j+1] = arr[j];
            arr[j] = temp;
        }
    }
}
return arr;

}

選擇排序

尋找最小的數，保存索引，而後與第一層循環其下標對於的值進行交換

function selectionSort(arr) {

var len = arr.length;
var minIndex, temp;
for (var i = 0; i < len - 1; i++) {
    minIndex = i;
    for (var j = i + 1; j < len; j++) {
        if (arr[j] < arr[minIndex]) {     //尋找最小的數
            minIndex = j;                 //將最小數的索引保存
        }
    }
    temp = arr[i];
    arr[i] = arr[minIndex];
    arr[minIndex] = temp;
}
return arr;

}

快速排序

選取一個記錄做爲中間軸，而後將比‘這個記錄值’小的移到‘記錄值’以前，大的移到以後，而後遞歸

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

1. 列表項目

}