試常見問題整理

1.1.1 圖片優化

項目中圖片處理相關的優化，項目中用到的優化方案，圖片大小達到多少的時候選擇處理？

1.首先了解在web開發中常見的圖片有那些格式。

JPG 通常使用的背景圖片，照片圖片，商品圖片等等。這一類型的圖片都屬于大尺寸圖片或較大尺寸圖片一般使用的是這種格式。

PNG 這種格式的又分為兩種 一種PNG-8 一種 PNG-24

PNG-8格式不支持半透明，也是IE6兼容的圖片存儲方式。

PNG-24圖片質量要求較高的半透明或全透明背景，保存成PNG-24更合適（為了兼容IE6可以試用js插件pngfix）一般是背景圖標中試用的多。

GIF 這種格式顯而易見的是在需要gif動畫的時候試用了。

2．優化方案

l樣式代替圖片

例如：半透明、圓角、陰影、高光、漸變等。這些效果主流的瀏覽器都能夠完美支持，而對于那些低端瀏覽器，我們并不會完全拋棄他們，“漸進增強”則是一個很好的解決方案。

l精靈圖

CSS Sprites，將同類型的圖標或按鈕等背景圖合到一張大圖中，減少頁面請求。

l字體圖標

Icon Font，將圖標做成字體文件。優點是圖標支持多個尺寸，兼容所有瀏覽器，減少頁面請求等。美中不足的是只支持純色的icon。SVG，對于絕大多數圖案、圖標等，矢量圖更小，且可縮放而無需生成多套圖。現在主流瀏覽器都支持SVG了，所以可放心使用！

lBase64

將圖片轉化為base64編碼格式，資源內嵌于CSS或HTML中，不必單獨請求。

Base64格式

data:[][;charset=][;base64],

Base64 在CSS中的使用

.demoImg{background-image:url("data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL....");}

Base64 在HTML中的使用

<img width="40" height="30" src="data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL...." />

l圖片響應式

通常圖片加載都是可以通過lazy加載的形式來的，那么可以在加載的時候來判斷屏幕的尺寸來達到加載大圖還是小圖的目的來達到優化。

1.1.2 提高網站的性能

你知道有哪些方法可以提高網站的性能？

我們從兩個方面來講：

1.資源加載

CSS頂部, JS底部

CSS JS文件壓縮

盡量使用圖片使用精靈圖，字體圖標

圖片加載可通過懶加載的方式。

總之就是減少資源體積減少資源請求次數。

2.代碼性能

Css:

使用CSS縮寫，減少代碼量；

減少查詢層級：如.header .logo要好過.header .top .logo；

減少查詢范圍：如.header>li要好過.header li；

避免TAG標簽與CLASS或ID并存：如a.top、button#submit；

刪除重復的CSS；

….

Html:

減少DOM節點：加速頁面渲染；

正確的閉合標簽：如避免使用<div/>，瀏覽器會多一個將它解析成<div\></div\>的過程；

減少頁面重繪。比如 給圖片加上正確的寬高值：這可以減少頁面重繪，

……

Js：

盡量少用全局變量；

使用事件代理綁定事件，如將事件綁定在body上進行代理；

避免頻繁操作DOM節點；

減少對象查找，如a.b.c.d這種查找方式非常耗性能，盡可能把它定義在變量里；

….

給大家推薦一本書《高性能javascript》

1.1.3 z-index

說說z-index的工作原理及適用范圍?

原理：

z-index 這個屬性控制著元素在z軸上的表現形式。

該屬性僅適用于定位元素。即擁有 relative , absolute , fixed 屬性的position 元素。

堆疊順序（Stacking Level）

堆疊順序是當前元素位于 z 軸上的值。數值越大表明元素的堆疊順序越高，越靠近屏幕。

未定義時 后來居上

如果未指定 z-index 的屬性，元素的堆疊順序基于它所在的文檔樹。默認情況下，文檔中后來聲明的元素具有更高的堆疊順序

當父元素的堆疊順序被設置的時候，這也意味著，它的子元素的堆疊順序不能高于或低于這一順序 (相對于父元素的堆疊上下文)。。

適用范圍：

1.網頁兩側浮動窗口(播放器,置頂按鈕,浮動廣告，功能按鈕等)

2.導航欄浮動置頂。

3.隱藏div實現彈窗功能(通過設置div的定位和z-index控制div的位置和出現隱藏)

1.1.4 響應式開發

能否簡述一下如何使一套設計方案，適應不同的分辨率，有哪些方法可以實現？

流式布局：

使用非固定像素來定義網頁內容，也就是百分比布局，通過盒子的寬度設置成百分比來根據屏幕的寬度來進行伸縮，不受固定像素的限制，內容向兩側填充。

這樣的布局方式 就是移動web開發使用的常用布局方式

這樣的布局可以適配移動端不同的分辨率設備。

響應式開發：

那么Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，就是一個網站能夠兼容多個終端。

越來越多的設計師也采用了這種設計。

?CSS3中的Media Query（媒介查詢）

?通過查詢screen的寬度來指定某個寬度區間的網頁布局。

?超小屏幕（移動設備） 768px以下

?小屏設備 768px-992px

?中等屏幕 992px-1200px

?寬屏設備 1200px以上

由于響應式開發顯得繁瑣些，一般使用第三方響應式框架來完成，比如bootstrap來完成一部分工作，當然也可以自己寫響應式。

闡述下移動web和響應式的區別：

1.1.5 事件封裝和自定義

如何實現事件的封裝、如何實現自定義事件？

什么是事件：

JavaScript 使我們有能力創建動態頁面。事件是可以被 JavaScript 偵測到的行為。

網頁中的每個元素都可以產生某些可以觸發 JavaScript 函數的事件。比方說，我們可以在用戶點擊某按鈕時產生一個 onClick 事件來觸發某個函數。事件在 HTML 頁面中定義。

事件的封裝：

functionaddEvent(dom,type,callback){

if(dom.addEventListener){

dom.addEventListener(type,callback,false);

}else if(dom.attachEvent){

dom.attachEvent('on'+type,callback);

}

};

functionremoveEvent(dom,type,callback){

if(dom.removeEventListener){

dom.removeEventListener(type);

}else if(dom.detachEvent){

dom.detachEvent('on'+type);

}

};

事件封裝：

比如zepto中的touch事件都是自定義事件。

1.1.6 漸進堅強、優雅降級

你能描述一下漸進增強和優雅降級之間的不同嗎？

優雅降級和漸進增強印象中是隨著css3流出來的一個概念。由于低級瀏覽器不支持css3，但css3的效果又太優秀不忍放棄，所以在高級瀏覽中使用css3而低級瀏覽器只保證最基本的功能。咋一看兩個概念差不多，都是在關注不同瀏覽器下的不同體驗，關鍵的區別是他們所側重的內容，以及這種不同造成的工作流程的差異。

舉個例子：

a{

display: block;

width: 200px;

height: 100px;

background:aquamarine;

/*我就是要用這個新css屬性*/

transition: all1s ease0s;

/*可是發現了一些低版本瀏覽器不支持怎么吧*/

/*往下兼容*/

-webkit-transition:all1s ease0s;

-moz-transition:all1s ease0s;

-o-transition: all1s ease0s;

/*那么通常這樣考慮的和這樣的側重點出發的css就是優雅降級*/

}

a:hover{

height: 200px;

}

/*那如果我們的產品要求我們要重低版本的瀏覽器兼容開始*/

a{

/*優先考慮低版本的*/

-webkit-transition:all1s ease0s;

-moz-transition:all1s ease0s;

-o-transition: all1s ease0s;

/*高版本的就肯定是漸進漸強*/

transition: all1s ease0s;

}

“優雅降級”觀點認為應該針對那些最高級、最完善的瀏覽器來設計網站。

“漸進增強”觀點則認為應關注于內容本身。

1.1.7 客戶端數據存儲

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

cookies兼容所有的瀏覽器，Html5提供的storage存儲方式。

Document.cookie

Window.localstorage

Window.sessionstorage

cookie數據始終在同源的http請求中攜帶（即使不需要），即cookie在瀏覽器和服務器間來回傳遞。而sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。

存儲大小限制也不同，cookie數據不能超過4k，同時因為每次http請求都會攜帶cookie，所以cookie只適合保存很小的數據，如會話標識。sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。

數據有效期不同，sessionStorage：僅在當前瀏覽器窗口關閉前有效，自然也就不可能持久保持；localStorage：始終有效，窗口或瀏覽器關閉也一直保存，因此用作持久數據；cookie只在設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉。

作用域不同，sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個頁面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。

1.1.8 重置瀏覽器的CSS默認屬性

描述一個”reset”的CSS文件并如何使用它。知道normalize.css嗎？你了解他們的不同之處？

因為瀏覽器的品種很多，每個瀏覽器的默認樣式也是不同的，比如<button>標簽，在IE瀏覽器、Firefox瀏覽器以及Safari瀏覽器中的樣式都是不同的，所以，通過重置button標簽的CSS屬性，然后再將它統一定義，就可以產生相同的顯示效果。

你可能會用Normalize來代替你的重置樣式文件。它沒有重置所有的樣式風格，但僅提供了一套合理的默認樣式值。既能讓眾多瀏覽器達到一致和合理，但又不擾亂其他的東西（如粗體的標題）。

1.1.9 IE和DOM事件流的區別

首先我們得搞懂 IE和DOM 是指的啥？

這里主要問的是 你IE瀏覽器和DOM兼容的瀏覽器也就是非IE瀏覽器或IE的高版本瀏覽器的事件方面的兼容性問題。

然后要搞明白的是 什么是事件流

IE5.5順序是div --body--document.

在IE6中div-body--html--document.

mozilla的順序是div--body- -html--document--window.

在IE中只有冒泡事件類型的事件流。

而在DOM兼容的瀏覽器中還有事件捕獲

首先window--document--body--div--click.

然后click--div--body--document--window.

處理函數的區別

在IE 中,每個元素和window對象都有2個方法:attachEvent()和detachEvent();attachEvent用來給一個事件附加事件處理函數.

dom中對應的方法是addEventListener()和removeEventListener ,這兩個方法有3個參數,事件名稱,要分配的函數和處理函數是用于冒泡階段還是捕獲階段.如果事件處理函數是用在捕獲階段,第三個參數為true

<div>

<ahref="javascript：;">dddd</a>

</div>

<script>

window.onload=function(){

document.getElementsByTagName('a')[0].addEventListener('click',function(e){

console.log('a');

},true);

/*處理函數在捕獲階段執行*/

document.getElementsByTagName('div')[0].addEventListener('click',function(e){

console.log('div');

/*在捕獲的時候禁止冒泡*/

e.stopPropagation();

},true);

/*處理函數在捕獲階段執行*/

}

</script>

1.1.10 call和apply的區別

Javascript的每個Function對象中有一個apply方法：

?

還有一個類似功能的call方法：

?

它們各自的定義：

apply：應用某一對象的一個方法，用另一個對象替換當前對象。

call：調用一個對象的一個方法，以另一個對象替換當前對象。

它們的共同之處：

都“可以用來代替另一個對象調用一個方法，將一個函數的對象上下文從初始的上下文改變為由 thisObj 指定的新對象。”

它們的不同之處：

apply：最多只能有兩個參數——新this對象和一個數組 argArray。如果給該方法傳遞多個參數，則把參數都寫進這個數組里面，當然，即使只有一個參數，也要寫進數組里面。如果 argArray 不是一個有效的數組或者不是 arguments 對象，那么將導致一個 TypeError。如果沒有提供 argArray 和 thisObj 任何一個參數，那么 Global 對象將被用作 thisObj， 并且無法被傳遞任何參數。

call：則是直接的參數列表，主要用在js對象各方法互相調用的時候，使當前this實例指針保持一致,或在特殊情況下需要改變this指針。如果沒有提供 thisObj 參數，那么 Global 對象被用作 thisObj。

更簡單地說，apply和call功能一樣，只是傳入的參數列表形式不同：如 func.call(func1,var1,var2,var3)對應的apply寫法為：func.apply(func1,[var1,var2,var3])

varfunc1=function(a,b,c){

this.name='func1';

//func2.call(this,a,b,c);

//func2.apply(this,arguments);

};

varfunc2=function(){

console.log(this.name);

console.log(arguments);

};

func1(1,2,3);

1.1.11 頁面緩存

HTTP協議中，header信息里面，怎么控制頁面失效時間？

在服務器端設置：這個是后臺搭建項目的時候web服務器做的工作。

在前端我們怎么去控制呢？

網頁的緩存是由HTTP消息頭中的“Cache-control”來控制的，常見的取值有private、no-cache、max-age、must-revalidate等，默認為private。其作用根據不同的重新瀏覽方式分為以下幾種情況：

（1） 打開新窗口

值為private、no-cache、must-revalidate，那么打開新窗口訪問時都會重新訪問服務器。

而如果指定了max-age值，那么在此值內的時間里就不會重新訪問服務器，例如：

Cache-control: max-age=5(表示當訪問此網頁后的5秒內再次訪問不會去服務器)

（2） 在地址欄回車

值為private或must-revalidate則只有第一次訪問時會訪問服務器，以后就不再訪問。

值為no-cache，那么每次都會訪問。

值為max-age，則在過期之前不會重復訪問。

（3） 按后退按扭

值為private、must-revalidate、max-age，則不會重訪問，

值為no-cache，則每次都重復訪問

（4） 按刷新按扭

無論為何值，都會重復訪問

Cache-control值為“no-cache”時，訪問此頁面不會在Internet臨時文章夾留下頁面備份。

另外，通過指定“Expires”值也會影響到緩存。例如，指定Expires值為一個早已過去的時間，那么訪問此網時若重復在地址欄按回車，那么每次都會重復訪問： Expires: Fri, 31 Dec 1999 16:00:00 GMT

應用

通過HTTP的META設置expires和cache-control

<meta http-equiv="Cache-Control" content="max-age=7200" />

<meta http-equiv="Expires" content="Mon, 20 Jul 2009 23:00:00 GMT" />

一般都會被服務器重置掉。

1.1.12 長連接和短連接的區別

HTTP協議目前常用的有哪幾個？KEEPALIVE從哪個版本開始出現的？

到現在http出現了 1.0和 1.1版本

Keep-Alive是從1.1默認就支持了。

1、什么是Keep-Alive模式？

我們知道HTTP協議采用“請求-應答”模式，當使用普通模式，即非KeepAlive模式時，每個請求/應答客戶和服務器都要新建一個連接，完成之后立即斷開連接（HTTP協議為無連接的協議）；當使用Keep-Alive模式（又稱持久連接、連接重用）時，Keep-Alive功能使客戶端到服務器端的連接持續有效，當出現對服務器的后繼請求時，Keep-Alive功能避免了建立或者重新建立連接。

http 1.0中默認是關閉的，需要在http頭加入"Connection: Keep-Alive"，才能啟用Keep-Alive；http 1.1中默認啟用Keep-Alive，如果加入"Connection: close "，才關閉。目前大部分瀏覽器都是用http1.1協議，也就是說默認都會發起Keep-Alive的連接請求了，所以是否能完成一個完整的Keep-Alive連接就看服務器設置情況。

2、啟用Keep-Alive的優點

從上面的分析來看，啟用Keep-Alive模式肯定更高效，性能更高。因為避免了建立/釋放連接的開銷。

1.1.13 從服務器考慮提高網站性能

業界常用的優化WEB頁面加載速度的方法（可以分別從頁面元素展現，請求連接，css,js,服務器等方面介紹）？

對于服務器方面前端能做的工作：

使用CDN加速，使用戶從離自己最近的服務器下載文件；

減少Cookie的大小，使用無cookie的域，客戶端請求靜態文件的時候，減少 Cookie 的反復傳輸對主域名的影響；

為文件頭指定Expires，使內容具有緩存性；

前端優化:DNS預解析提升頁面速度

<link rel="dns-prefetch" />

<link rel="dns-prefetch" />

服務器端能做的工作：

負載均衡，分布式存儲，提升服務器性能等等。。。

1.1.14 列舉常用的web頁面開發，調試以及優化工具

谷歌瀏覽器，火狐瀏覽器

1.FireBug

2012年以前，火狐貍幾乎是所有前端開發者最喜歡的瀏覽器，基于FireFox的插件FireBug成了Web前端工程師開發調試網頁的首選利器。

2.Chrome Developer Tools

自從2011年FireBug的開發者J.Barton跳槽到Google，負責開發Chrome Developer Tools后，Chrome Developer Tools就有了本質性的變化。于是，Web前端開發工程師最喜歡的瀏覽器又變成了Chrome，Chrome Developer Tools也就順理成章成為開發調試網頁的不二利器了。

1.1.15 解釋什么是sql注入，xss漏洞

Sql是數據庫語言。

XSS攻擊：跨站腳本攻擊(Cross Site Scripting)，為不和層疊樣式表(Cascading Style Sheets, CSS)的縮寫混淆，故將跨站腳本攻擊縮寫為XSS。

1.1.16 邏輯題

有1到10w這個10w個數，去除2個并打亂次序，如何找出那兩個數？

1.1.17 對象屬性

如何獲取對象a擁有的所有屬性（可枚舉的、不可枚舉的，不包括繼承來的屬性）?

首先你們要知道什么是 可沒舉性

可枚舉性（enumerable）用來控制所描述的屬性，是否將被包括在for...in循環之中。具體來說，如果一個屬性的enumerable為false，下面三個操作不會取到該屬性。

* for..in循環

* Object.keys方法

* JSON.stringify方法

至于for...in循環和Object.keys方法的區別，在于前者包括對象繼承自原型對象的屬性，而后者只包括對象本身的屬性。如果需要獲取對象自身的所有屬性，不管enumerable的值，可以使用Object.getOwnPropertyNames方法

Object.getOwnPropertyNames() 方法返回一個由指定對象的所有自身屬性的屬性名(包括不可枚舉屬性)組成的數組。

<script>

/*首先有個人*/

varPerson=function(){

/*對象本身擁有的屬性*/

this.name='小明';

};

Person.prototype={

/*通過原型繼承的屬性*/

age:10

};

varperson=newPerson();

/*首先我們遍歷下 student的屬性*/

varforin=[];

for(varo inperson){

forin.push(o);

}

console.log(forin);

/*這個時候我們發現 for in 的形式拿的是 所有的屬性 包括原型繼承的*/

console.log(Object.keys(person));

/*發現 Object.keys 拿到的是不包含 原型繼承的并且不包含非枚舉屬性*/

console.log('-------------------------------------');

/*什么是屬性枚舉性 enumerable 什么是非枚舉屬性*/

/*怎么定義非枚舉屬性 enumerable*/

Object.defineProperty(person,'sex',{value:'男',enumerable:false});

/*非枚舉屬性有什么特別*/

console.log(person.sex);

person.sex='女';

console.log(person.sex);//說明什么？非枚舉屬性不能重新定義值

console.log('-------------------------------------');

/*那么怎么獲取枚舉屬性*/

console.log(Object.keys(person));

/*getOwnPropertyNames 獲取自身的所有屬性不包含原型繼承*/

console.log(Object.getOwnPropertyNames(person));

varfields=Object.getOwnPropertyNames(person);

/* 我們兩個比價一下就可以了 getOwnPropertyNames keys */

</script>

1.1.18 Underscore

Underscore 對哪些 JS 原生對象進行了擴展以及提供了哪些好用的函數方法？

參考 underscore 文檔。

集合相關的方法

數組相關的方法

函數相關的

對象相關的

工具

1.1.19 Nodejs

(如果會用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering么?

1.1.20 前端路由

什么是“前端路由”?什么時候適合使用“前端路由”? “前端路由”有哪些優點和缺點?

路由 Router

前端的路由都是通過 hash 來實現的，hash 能兼容低版本的瀏覽器。

Web 服務并不會解析 hash，也就是說 # 后的內容 Web 服務都會自動忽略，但是 JavaScript 是可以通過 window.location.hash 讀取到的，讀取到路徑加以解析之后就可以響應不同路徑的邏輯處理。

優點可以控制 業務邏輯 做無頁面刷新 體驗更

缺點 頁面不刷的話無法釋放內存，如果過多的操作會造成頁面體驗不好。

1.1.21 This

說說你對this的理解？

this是一個關鍵字

它代表函數運行時，自動生成的一個內部對象，只能在函數內部使用

1.作為純粹的函數調用 this指向全局對象

2.作為對象的方法調用 this指向調用對象

3.作為構造函數被調用 this指向新的對象（new會改變this的指向）

4.apply調用 this指向apply方法的第一個參數

1.1.22 遞歸

談一下JS中的遞歸函數，并且用遞歸簡單實現階乘？

//遞歸 程序調用自身的編程技巧稱為遞歸 自己調用自己

functionfactorial(num) {

return( num <=1 ) ? 1 : num * factorial(num - 1);

}

console.log(factorial(8));

1.1.23 閉包

什么是閉包（closure），為什么要用？

閉包是指在 JavaScript 中，內部函數總是可以訪問其所在的外部函數中聲明的參數和變量，即使在其外部函數被返回（壽命終結）了之后。

1.1.24 異步加載

異步加載的方式？

什么？的異步加載方式我猜是說js。

方案一：<script>標簽的async="async"屬性（詳細參見：script標簽的async屬性）

HTML5中新增的屬性，Chrome、FF、IE9&IE9+均支持（IE6~8不支持）。此外，這種方法不能保證腳本按順序執行。

方案二：<script>標簽的defer="defer"屬性

兼容所有瀏覽器。此外，這種方法可以確保所有設置defer屬性的腳本按順序執行。

動態創建<script>標簽

方案四：AJAX eval（使用AJAX得到腳本內容，然后通過eval_r(xmlhttp.responseText)來運行腳本）

兼容所有瀏覽器。

方案五：iframe方式（這里可以參照：iframe異步加載技術及性能 中關于Meboo的部分）

兼容所有瀏覽器。

更多前端知識，請關注我的頭條號。