一、數組亂序實現
方法一：實現算法性能不好
ary.sort(function(){
return Math.random()>0.5?1:-1
})
方法二：
var len = ary.length;
for (var i = 0; i < len - 1; i++) {
var index = parseInt(Math.random() * (len - i));
var temp = ary[index];
ary[index] = ary[len - i - 1];
ary[len - i - 1] = temp;
};
用兩個棧模擬隊列
function push(node)
{
while(stack2.length !== 0){
stack1.push(stack2.pop());
}
stack1.push(node);
}
function pop()
{
while(stack1.length !== 0){
stack2.push(stack1.pop());
}
return stack2.pop();
}
二、懶加載圖片源碼
首先，介紹一下clientHeight和screenHeight、scrollTop、offsetTop
網頁可見區域高：document.body.clientHeight
網頁被捲去的高：document.body.scrollTop
屏幕分辨率高：window.screen.height
offsetTop: 當前元素頂部距離最近父元素頂部的距離,和有沒有滾動條沒有關係。單位px，只讀元素。
var lazyload = function(){
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
var winTop = window.innerHeight;
for(var i=0;i < imgs.length;i++){
if(imgs[i].offsetTop < scrollTop + winTop ){
imgs[i].src = imgs[i].getAttribute('data-src');
}
}
}
三、CSS
1、bacground-image屬性解讀
background-image :url("")用來展示背景圖片，默認repeat重複展示。
.bg{
width:50%;
height:900px;
background-image: url("bg.JPG");
/*background-size:200px 200px;*/
font-size: 8px;
color:#fff;
background-repeat:no-repeat;
background-position: 50% 50%;
background-size:contain;
background-origin:padding-box;
}
(1)background-origin:屬性規定 background-position 屬性相對於什麼位置來定位。
background-origin: padding-box|border-box|content-box;
padding-box 背景圖像相對於內邊距框來定位。默認
border-box 背景圖像相對於邊框盒來定位。
content-box 背景圖像相對於內容框來定位
(2)background-size 屬性規定背景圖像的尺寸。默認值auto
background-size: length|percentage|cover|contain;
2、BFC的作用（塊級格式化上下文）
形成 BFC 的條件
| 浮動元素，float 除 none 以外的值； | 絕對定位元素，position（absolute，fixed）； |
| display 爲以下其中之一的值 inline-blocks，table-cells，table-captions； | overflow 除了 visible 以外的值（hidden，auto，scroll） |
作用：（1）父元素高度塌陷問題：場景爲：子元素爲浮動元素，導致父元素的高度爲0.BFC可以解決高度塌陷問題，overflow: hidden；
(2)、解決margin合併問題：場景爲：在標準文檔流中，塊級標籤之間豎直方向的margin會以大的爲準，這就是margin的塌陷現象。可以用overflow：hidden產生bfc來解決。
(3)、BFC裏面的元素內容不會影響影響到外面的元素
補充：清除浮動的方式：可以給父元素height;給父元素overflow:hidden;也可以給浮動元素最後加空div標籤，添加樣式：clear:both；
3、讓chorme支持小於12Px的字
p{
font-size:10px;
-webkit-transform:scale(0.8);
}
transform:常見的屬性值
transform:translateY(100px) rotate(7deg) scale(0.6);
5、宏觀任務和微觀任務有哪些
宏觀任務：宿主發起的任務爲宏觀任務，如setTimeout、setInterval、setImmediate，I/O
微觀任務：JavaScript引擎發起的任務爲微觀任務,如Promise
setTimeout(function(){
console.log('1')
});
new Promise(function(resolve){
console.log('2');
resolve();
}).then(function(){
console.log('3')
});
console.log('4');
運行結果：2，4，3，1。
原理解讀：
同步任務指的是，在主線程上排隊執行的任務，只有前一個任務執行完畢，才能執行後一個任務；異步任務指的是，不進入主線程、而進入"任務隊列"（task queue）的任務，只有"任務隊列"通知主線程，某個異步任務可以執行了，該任務纔會進入主線程執行。
同步和異步任務分別進入不同的執行"場所"，同步的進入主線程，異步的進入Event Table並註冊函數。
先運行主線程，主線程完了找微隊列，微隊列結束之後再執行宏隊列第一個，再檢測微隊列有沒有，如此循環
6、http緩存
前端緩存可分爲兩大類：http緩存和瀏覽器緩存。
當客戶端向服務器請求資源時，會先抵達瀏覽器緩存，如果瀏覽器有“要請求資源”的副本，就可以直接從瀏覽器緩存中提取而不是從原始服務器中提取這個資源。
強制緩存：在緩存數據未失效的情況下（即Cache-Control的max-age沒有過期或者Expires的緩存時間沒有過期），那麼就會直接使用瀏覽器的緩存數據，不會再向服務器發送任何請求。強制緩存生效時，http狀態碼爲200。
強緩存是利用http的返回頭中的Expires或者Cache-Control兩個字段來控制的，用來表示資源的緩存時間。
協商緩存：當第一次請求時服務器返回的響應頭中沒有Cache-Control和Expires或者Cache-Control和Expires過期還或者它的屬性設置爲no-cache時(即不走強緩存)，那麼瀏覽器第二次請求時就會與服務器進行協商，與服務器端對比判斷資源是否進行了修改更新。如果服務器端的資源沒有修改，那麼就會返回304狀態碼，告訴瀏覽器可以使用緩存中的數據，這樣就減少了服務器的數據傳輸壓力。如果數據有更新就會返回200狀態碼，服務器就會返回更新後的資源並且將緩存信息一起返回。跟協商緩存相關的header頭屬性有（ETag/If-Not-Match 、Last-Modified/If-Modified-Since）請求頭和響應頭需要成對出現
對於協商緩存，將緩存信息中的Etag和Last-Modified通過請求發送給服務器，由服務器校驗，返回304狀態碼時，瀏覽器直接使用緩存。
7、position float display三者的優先級
如果'display'值爲'none'，則'position' 和 'float'無作用。這種情況下，不生成box。
如果'display'值不爲'none'，position 優先級最高，float被忽略
8、addEventListener的第三個參數默認爲false,即事件爲冒泡方式。
target.addEventListener('click', function() {
// do something...
}, false);
當第三個參數爲false時（不傳參數時，默認也是這種冒泡方式）
如何阻止事件冒泡？
evt.stopPropagation();
9、cookie
cookie的path屬性
path字段爲可以訪問此cookie的頁面路徑。 比如domain是abc.com,path是/test，那麼只有/test路徑下的頁面可以讀取此cookie。
HttpOnly屬性
HttpOnly 屬性限制了 cookie 對 HTTP 請求的作用範圍。特別的，該屬性指示用戶代理忽略那些通過"非 HTTP" 方式對 cookie 的訪問（比如瀏覽器暴露給js的接口）。注意 HttpOnly 屬性和 Secure 屬性相互獨立：一個 cookie 既可以是 HttpOnly 的也可以有 Secure 屬性。