8.22接到唯品會的內推電面，問的問題都不難，聊了40分鐘，結果沒過。有點傷心(；′⌒`)
那就把面經發一發，順便發一下在面試前蒐集的網上的唯品會面經，整理出來了CSS和JS兩大類問題，以及一些其他方面的問題，就當攢攢RP吧，給想去唯品會的小夥伴們一個參考。
每個問題都大概寫了個答題方向，如果有不對的歡迎指正，有些問題沒寫答案，也歡迎小夥伴們給個方向。

面經

上來先讓介紹一個最近做的專案，然後專案的難點是什麼。我說了一個難點，然後又說了一個還在構想沒實現的功能。面試小哥哥就跟我探討了一下怎麼去實現，但是感覺我跟他腦回路不太對的上，反正他把我的意思理解錯了（不過下來想了想確實他的思路才更清晰）。
說完這個又問有沒有做過大一點的很多網頁的專案，我說之前跟同學一起做的一個購票網站。然後他問你們專案中網頁怎麼多，重複的像header和footer這種是怎麼去實現的。我說當時就是複製貼上。他就問你現在有什麼其他想法沒，我說可以用像webpack這樣的構建工具去做一個模板再插入不同的內容（下來查了下也可以用react，vue這些框架的元件去實現）。
然後他就問用過webpack沒，我說只是瞭解各項配置，沒有具體去用webpack做過什麼專案。
然後問了js的閉包，答完之後還問函式的作用域是定義的時候確認的還是呼叫的時候。我說定義的時候。他還再三跟我確認，嚇得我差點以為自己答錯了。
然後是HTTP快取，又問如果是我的話怎麼實現HTTP快取。
問最近在學什麼，這裡我有點作死，他打電話前我正在看vue，他一問我就答這個了，但其實我才看了半個小時，問了幾個基礎點的問題都支支吾吾的，他就下一題了。
然後問為什麼做前端吧。我說因為開心啊（是不是聽起來不太靠譜哈哈哈(:з」∠)），多說了幾句之後又問為什麼想來唯品會，我說唯品會電商的話肯定會比較注重效能優化這塊吧，我覺得可以學到很多東西。
然後他就問效能優化了，我說了一堆，說完之後他問你剛剛說了用CDN，那你跟我說說CDN吧。
我就說了CDN是什麼，幹嘛用的。他又讓我說原理，這個我就有點矇蔽了，不知道他到底想問啥。具體的反正也沒答上來，然後時間差不多了。他就讓我問問題了。

面試題整理

CSS類

CSS盒子模型

Margin(外邊距) - 清除邊框外的區域，外邊距是透明的。
Border(邊框) - 圍繞在內邊距和內容外的邊框。
Padding(內邊距) - 清除內容周圍的區域，內邊距是透明的。
Content(內容) - 盒子的內容，顯示文字和影象。
position的幾種值，相對誰定位，百分比以誰為參照

absolute:絕對定位，相對於static定位以外的第一個父元素進行定位

fixed：絕對定位，相對於瀏覽器視窗進行定位

relative：相對定位，按照元素的原始位置對該元素進行定位

static：預設值。元素出現在文件流中。

inherit：從父元素繼承position屬性的值。

百分比以父容器為參照

CSS reset

因為不同核心的瀏覽器對CSS的解析效果呈現各異，導致所期望的效果跟瀏覽器的“理解”效果有偏差，css reset就是用來重置（復位）元素在不同核心瀏覽器下的預設值，儘量保證元素在不同瀏覽器下的同一“起跑線”。

有必要重置的元素才寫，不要照搬全抄。

CSS放在底部和頂部的區別（？）

css放在頂部；如果放在底部，瀏覽器構建完DOM樹，然後才開始渲染，當渲染樹構建完成，又要重新渲染整個頁面，造成資源的浪費。

重要的CSS和JS放在頂部，次要的放在底部

（JS放在body和header中的區別）

CSS選擇器的優先順序

CSS的選擇器型別：標籤選擇器、類選擇器、ID選擇器、全域性選擇器、組合選擇器、後代選擇器、群組選擇器、繼承選擇器、偽類選擇器、字串匹配的屬性選擇器、子選擇器、CSS相鄰兄弟選擇器

!important屬性會覆蓋任何樣式，權重最高

!important>行內樣式>ID選擇器>類選擇器>標籤>萬用字元>繼承>瀏覽器預設屬性

後寫的樣式會覆蓋先寫的樣式

ID選擇器是唯一的，不要再在前面寫其他選擇器了

CSS link和import的區別

，link是html標籤，只能放在html原始碼中。link引入的css檔案在頁面載入之前完成。
@import url(…) ,import在html和css中都可以使用，相當於一種css樣式。import引入的css會在頁面載入完成後再載入。（如果寫在頭部的

lt{ float: left;width:200px; background: #ff0;}

rt{ overflow: hidden; background: #f0f;}

左邊左浮動，右邊加個margin-left;

lt{ float: left; width:200px; background: #ff0;}

rt{ margin-left: 200px; background: #f0f;}

左邊絕對定位，右邊加個margin-left;

lt{ position: absolute; top:0; left:0; width:200px; background: #ff0;}

rt{ margin-left: 200px; background: #f0f;}

左右兩邊絕對定位，右邊加個width,top,left,right

lt{ position: absolute; top:0 ; left:0 ;width:200px; background: #ff0;}

rt{ position: absolute; top:0 ; left:200px; width: 100% ; rigth:0;background: #f0f;}

​

左右兩邊固定，中間自適應，且中間內容優先顯示佈局的幾種方法
第一種：左右兩邊絕對定位法,中間用margin-left、margin-right；

main{margin:0 200px; overflow: hidden; background: #ccc;}

left{position:absolute; top:0; left: 0;width:200px;background: #ff0;}

right{ position: absolute;top:0; right:0; width:200px; background: #0ff;}

第二種： 中間的盒子絕對定位，左右兩邊的盒子左右浮動

main{ position: absolute; top:0; left:200px; right:200px;background: #ccc;}

left{ float:left;width:200px;background: #ff0;}

right{ float:right;width:200px; background: #0ff;}

雙飛翼和聖盃佈局？

如果下面再來一個元素，怎麼處理（分別對應上一題不浮動、浮動、絕對定位等等的情況） （？）

清除浮動的方式 clear:both的含義

元素兩側都不允許出現浮動元素

對佈局有什麼心得

響應式@media screen and （max-width=780px）

螢幕尺寸小於780px

rem em px區別

px：畫素，相對長度單位，相對於顯示器的螢幕解析度

rem：相對長度單位，相對於根目錄。移動端一般採用rem。

em：相對長度單位，繼承父元素的字型大小。值不固定。

在css中的body選擇器中宣告Font-size=62.5%，這就使em值變為 16px*62.5%=10px, 這樣12px=1.2em, 10px=1em
display visibility opacity 的區別

{ display: none; /* 不佔據空間，無法點選 */ }
{ visibility: hidden; /* 佔據空間，無法點選 */ }
{ opacity: 0; filter:Alpha(opacity=0); /* 佔據空間，可以點選 */ }
​

IE6下的雙邊距、內聯和塊級元素等

雙邊距問題：當元素的浮動方向與它的margin方向一致時，IE6會把margin值解析為原來的2倍

如何解決： 1.給float元素新增display:inline

​ 2.給ie6寫一個hack，值為正常值的一半，例如：margin-left:20px; ie6:_margin-left:10px;

做表單類頁面需要注意哪些問題？

font-face是什麼

可以自定義字型

實現一個圓環進度條，如何用css畫圓環裡的進度條

兩個div，一個左邊一個右邊，都只有一半的border，然後分別設定overflow:hidden，通過旋轉來得到想要的樣式

頁面效果切換，當滑鼠劃過時當前div消失，換成另一個div顯示，用css怎麼實現

hover屬性，設定z-index

JS、框架類

閉包是什麼，寫一個閉包，一般可以用在哪裡，好處在哪

閉包是指一個函式的內部函式被返回之後，在函式外部被另一個變數引用的時候，就形成了閉包。

function a(){
var i=0;
function b(){
console.log(i);
}
return b;
}
var c = a();//這時c的引用就指向了a的內部函式b
c();//此時c會打印出i的值，0
i = 1;
c();//此時打印出來的值還是0，因為函式中的自由變數只會在函式定義時的父作用域去找
通常用於建立一個內部變數（私有變數），使得這個內部變數不能被外部修改。但可以通過傳遞的指定函數借口來進行修改。

常用的例如用for迴圈來繫結事件的時候。

（注意，由於閉包內的部分資源無法自動釋放，容易造成記憶體洩漏）

JS原型和原型鏈（大概說到物件proto和建構函式prototype的關係就差不多了，沒有繼續問繼承）

proto：隱式原型，每個引用型別都有，每一個物件的私有屬性，天生的。

prototype：顯示原型，所有的函式（建構函式？）都有，是後天賦予的。

原型鏈查詢：呼叫一個物件的屬性或方法，一旦這個物件沒有，就去這個物件的proto中查詢，物件的proto指向自己的建構函式的prototype屬性。

JavaScript中每個物件都有一個內建屬性prototype，ES5之前沒有方法可以得到這個屬性，大多數瀏覽器都支援通過proto來訪問。

網站的效能優化、CDN、怎樣減少首屏載入時間？

兩大原則：

多使用記憶體、快取或其他方法
減少CPU計算、減少網路請求
從哪入手：

載入頁面和靜態資源
靜態資源的壓縮合並
靜態資源快取
使用CDN讓資源載入更快
使用SSR（服務端渲染），資料直接輸出到HTML中
頁面渲染
CSS放前面，JS放後面
懶載入（圖片懶載入，下拉載入更多）
減少DOM查詢，對DOM查詢做快取
減少DOM操作，多個操作儘量合併在一起
事件節流
儘早執行函式
CDN：Content Delivery|Distribute NetworkCDN是將源站內容分發至最接近使用者的節點，使使用者可就近取得所需內容，提高使用者訪問的響應速度和成功率。解決因分佈、頻寬、伺服器效能帶來的訪問延遲問題，適用於站點加速、點播、直播等場景。

怎樣減少首屏載入時間：

圖片懶載入：先指向一張較小的或者不指向圖片，將真正的圖片地址放到元素屬性如data-src中，監聽頁面的滾動事件，到滾動到時才載入。（可以給頁面滾動事件加一個節流函式）

瀏覽器快取機制，怎麼處理瀏覽器快取問題

主要是HTTP協議定義的快取機制。瀏覽器依靠請求和相應中的頭資訊來控制快取。

頭資訊中的Cache-Control的值可以是public、private、no-cache、no-store、no-transform等等等

public:所有內容都將被快取。

private:內容只快取到私有快取中。

no-cache:所有內容都不會被快取。

no-store:所有內容都不會被快取到Internet臨時檔案中。

must-revalidate/proxy-revalidation:如果快取的內容失敗，請求必須傳送到伺服器/代理進行重新驗證。

max-age=xxx(xxx is numeric):快取的內容將在xxx秒失效，在HTTP1.1中可用，比expires、last-modified優先順序高。

last-modified，Etag

js和css中快取是怎樣的

在專案中，當第一次從伺服器download時，第一次下載快取了，然後如果你要更新的話，是如何更新快取的。（如果修改的檔案很多呢？）

瀏覽器載入過程，一個網站的網頁是如何載入的（解析文字、樹節點…）

載入一個資源的過程
瀏覽器通過DNS得到域名的IP地址
向這個IP的伺服器傳送HTTP請求
伺服器收到，處理並返回HTTP請求
瀏覽器得到返回內容
頁面載入過程
根據HTML結構生成DOM樹
根據CSS生成CSSOM（CSS Object Model）
結合DOM和CSSOM，生成一顆渲染樹
根據渲染樹開始渲染和展示
遇到