摘要：協(xié)議主要是通過請求頭當(dāng)中的一些字段來和服務(wù)器進行通信，從而采用不同的緩存策略。會緩存所有的結(jié)構(gòu)，但是問題在于，一些頁面開始時進行的上報或者請求可能會被影響。

1.如何用一個div實現(xiàn)下圖

css

#demo{
        width:120px;
        height: 120px;
        border:2px solid #333;
        border-radius: 20px;
        position:relative;
    }
    #demo:before,#demo:after{
        content: "";
        width: 60px;
        height: 60px;
        position: absolute;
        left: 50%;
        top: 50%;
    }
    #demo:before{
        margin-left: -30px;
        border-top: 2px solid;
    }
    #demo:after{
        margin-top: -30px;
        border-left: 2px solid;
    }
    

html

類似這樣用偽類實現(xiàn)圖形的題目還有很多，分享兩個：
用純CSS實現(xiàn)一個帶三角的正方形 僅用一個div
https://blog.csdn.net/hahahah...
CSS實現(xiàn)太極圖（1個DIV實現(xiàn)）
https://www.cnblogs.com/web12...

2.如何實現(xiàn)①平行四邊形 ②三角形
① 平行四邊形
css

div {
  width:100px;
  height:100px;
  border: 2px solid #333;
  color: #333;
  transform: skew(-20deg);
}

html

運行結(jié)果：

②三角形
css

div{
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-top-style: #333;
  }

html

運行結(jié)果：

3.請寫出下列alert的結(jié)果

alert(typeof null) //object
alert(typeof undefined) //undefined
alert(typeof NaN) //number
alert(NaN == undefined) //false
alert(NaN ==NaN) //false
var str="123abc"
alert(typeof str++)//number
alert(str)//NaN

4.已知有數(shù)組 [[1,2,2],[3,4,5,5],[6,7,8,9,[11,12,[12,13,[14]]]],10],扁平化數(shù)組后應(yīng)該得到的數(shù)組為：[1,2,2,3,4,5,5,6,7,8,9,11,12,12,13,14,10],請寫出實現(xiàn)扁平化額代碼。
第一種方法：

var arr=[[1,2,2],[3,4,5,5],[6,7,8,9,[11,12,[12,13,[14]]]],10]
function Flat1(arr){
  var newArr =[];
  for(var i= 0; i < arr.length; i++){
    if(arr[i] instanceof Array){
      newArr = newArr.concat(Flat1(arr[i]));
      // newArr.push.apply(newArr, Flat1(arr[i]));
    }else{
      newArr.push(arr[i]);
    }
  }
  return newArr;
}
console.log(Flat1(arr))

第二種方法：（es6的方法）

var arr=[[1,2,2],[3,4,5,5],[6,7,8,9,[11,12,[12,13,[14]]]],10]
const Flat2 = arr => arr.reduce((a, b) => a.concat(Array.isArray(b) ? 
Flat2(b) : b), []); 
console.log(Flat2(arr))

對應(yīng)es5的代碼

var arr=[[1,2,2],[3,4,5,5],[6,7,8,9,[11,12,[12,13,[14]]]],10]
var Flat3 = function (arr){
    return arr.reduce(function(a,b){
      return a.concat(Array.isArray(b)? Flat3(b):b)
    },[]);
}
console.log(Flat3(arr))

5.寫出下列代碼執(zhí)行結(jié)果：

async function async1(){
  console.log("async1 start")
  await async2()
  console.log("async1 end")
}
async function async2(){
  console.log("async2")
}
console.log("script start")
setTimeout(function(){
  console.log("setTimeout")
},0)  
async1();
new Promise(function(resolve){
  console.log("promise1")
  resolve();
}).then(function(){
  console.log("promise2")
})
console.log("script end")

運行結(jié)果：

script start
async1 start
async2
promise1
script end
promise2
async1 end
setTimeout

類似題目修改：

async function async1(){
  console.log("async1 start")
  await async2()
  console.log("async1 end")
}
function async2(){ // 去掉了 async 關(guān)鍵字
  console.log("async2")
}
console.log("script start")
setTimeout(function(){
  console.log("setTimeout")
},0)  
async1();
new Promise(function(resolve){
  console.log("promise1")
  resolve();
}).then(function(){
  console.log("promise2")
})
console.log("script end")

運行結(jié)果：

script start
async1 start
async2
promise1
script end
async1 end
promise2
setTimeout

解析：https://www.cnblogs.com/geyou...

6.寫出能夠?qū)ttp://www.sohu.com/a/2830163...{code:aaa,_f:index_cpc_0}的函數(shù)

function parseObject(url){
  var obj = {};
  if(url.indexOf("?")!==-1){
    var url = url.substring(url.indexOf("?")+1);
  }else{
  return ;
  }
  var arr = url.split("&");
  arr.forEach(function(val){
    var brr = val.split("=");
    obj[brr[0]] = brr[1];
  });
  return obj;
}
var url="http://www.sohu.com/a/283016366_267106?code=aaa&_f=index_cpc_0"
parseObject(url)

7.tcp/ip協(xié)議

TCP/IP 是一類協(xié)議系統(tǒng)，它是用于網(wǎng)絡(luò)通信的一套協(xié)議集合．
傳統(tǒng)上來說 TCP/IP 被認為是一個四層協(xié)議

1) 網(wǎng)絡(luò)接口層:
主要是指物理層次的一些接口,比如電纜等．

2) 網(wǎng)絡(luò)層:
提供獨立于硬件的邏輯尋址,實現(xiàn)物理地址與邏輯地址的轉(zhuǎn)換．

在 TCP / IP 協(xié)議族中，網(wǎng)絡(luò)層協(xié)議包括 IP 協(xié)議（網(wǎng)際協(xié)議），ICMP 協(xié)議（ Internet 互聯(lián)網(wǎng)控制報文協(xié)議），以及 IGMP 協(xié)議（ Internet 組管理協(xié)議）.

3) 傳輸層:
為網(wǎng)絡(luò)提供了流量控制,錯誤控制和確認服務(wù).

在　TCP / IP　協(xié)議族中有兩個互不相同的傳輸協(xié)議： TCP（傳輸控制協(xié)議）和 UDP（用戶數(shù)據(jù)報協(xié)議）.

4) 應(yīng)用層:
為網(wǎng)絡(luò)排錯,文件傳輸,遠程控制和　Internet 操作提供具體的應(yīng)用程序

8.關(guān)于緩存
1. 前端緩存概述
前端緩存主要是分為HTTP緩存和瀏覽器緩存。其中HTTP緩存是在HTTP請求傳輸時用到的緩存，主要在服務(wù)器代碼上設(shè)置；而瀏覽器緩存則主要由前端開發(fā)在前端js上進行設(shè)置。下面會分別具體描述。

2. 前端緩存分類
2.1 HTTP緩存
從HTTP協(xié)議開始說起
由于整個網(wǎng)絡(luò)服務(wù)都是基于http協(xié)議 的，因此先來介紹一下HTTP協(xié)議當(dāng)中定義的緩存機制。HTTP協(xié)議主要是通過請求頭當(dāng)中的一些字段來和服務(wù)器進行通信，從而采用不同的緩存策略。
一般來說，對于一個完整的HTTP GET請求緩存過程會包含七個主要的步驟：①從接收網(wǎng)絡(luò)請求開始，②客戶端會讀取請求報文并且對報文進行解析, 進而提取URL和各種首部，③然后將會查詢是否在本地有副本，如果本地沒有副本就會從服務(wù)器上獲取一份副本并且保存在本地。④接著會進行查看副本是否足夠新鮮（新鮮度檢測）， 如果緩存已經(jīng)失效就會詢問服務(wù)器是否有任何更新，⑤服務(wù)器就會用新的首部和已緩存的主體來構(gòu)建一條響應(yīng)報文，⑥最后發(fā)送給客戶端。⑦根據(jù)服務(wù)器的不同，會可選地選擇創(chuàng)建日志記錄該過程。

整體流程：HTTP緩存都是從第二次請求開始的。
第一次請求資源時，服務(wù)器返回資源，并在respone header頭中回傳資源的緩存參數(shù)；第二次請求時，瀏覽器判斷這些請求參數(shù)，擊中強緩存就直接200，否則就把請求參數(shù)加到request header頭中傳給服務(wù)器，看是否擊中協(xié)商緩存，擊中則返回304，否則服務(wù)器會返回新的資源。
HTTP緩存分為強緩存和協(xié)議緩存，它們的區(qū)別如下：

200 from disk or 200 from memory :
強緩存的200也有兩種情況：200 from disk和200 from memory。現(xiàn)在我沒有找到明確的文檔來描述這種區(qū)別的發(fā)生條件。https://www.zhihu.com/questio... 這個問題知乎中提到了一些情景，可以自行取用。

2.1.1 強緩存

2.1.2 協(xié)商緩存
協(xié)商緩存都是成對出現(xiàn)的。

2.1.3 最佳優(yōu)化策略-消滅304
最佳優(yōu)化策略：因為協(xié)商緩存本身也有http請求的損耗，所以最佳優(yōu)化策略是要盡可能的將靜態(tài)文件存儲為較長的時間，多利用強緩存而不是協(xié)商緩存，即消滅304。

但是給文件設(shè)置一個很長的Cacha-Control也會帶來其他的問題，最主要的問題是靜態(tài)內(nèi)容更新時，用戶不能及時獲得更新的內(nèi)容。這時候就要使用hash的方法對文件進行命名，通過每次更新不同的靜態(tài)文件名來消除強緩存的影響。

Hash命名：
http://xxx.com/main.5eas34fa.js
http://xxx.com/main.js?5eas34fa
http://xxx.com/5eas34fa/main.js

2.2 瀏覽器緩存
2.2.1 本地存儲小容量
Cookie主要用于用戶信息的存儲，Cookie的內(nèi)容可以自動在請求的時候被傳遞給服務(wù)器。
LocalStorage的數(shù)據(jù)將一直保存在瀏覽器內(nèi)，直到用戶清除瀏覽器緩存數(shù)據(jù)為止。
SessionStorage的其他屬性同LocalStorage，只不過它的生命周期同標簽頁的生命周期，當(dāng)標簽頁被關(guān)閉時，SessionStorage也會被清除。

2.2.2 本地存儲大容量
WebSql和IndexDB主要用在前端有大容量存儲需求的頁面上，例如，在線編輯瀏覽器或者網(wǎng)頁郵箱。

2.2.3 應(yīng)用緩存與PWA
應(yīng)用緩存全稱為Offline Web Application，它的緩存內(nèi)容被存在瀏覽器的Application Cache中。它也是一個被W3C標準廢棄的功能，主要是通過manifest文件來標注要被緩存的靜態(tài)文件清單。但是在緩存靜態(tài)文件的同時，也會默認緩存html文件。這導(dǎo)致頁面的更新只能通過manifest文件中的版本號來決定。而且，即使我們更新了version，用戶的第一次訪問還是會訪問到老的頁面，只有下一次再訪問才能訪問到新的頁面。所以，應(yīng)用緩存只適合那種常年不變化的靜態(tài)網(wǎng)站。如此的不方便，也是被廢棄的重要原因。

PWA全稱是漸進式網(wǎng)絡(luò)應(yīng)用，主要目標是實現(xiàn)web網(wǎng)站的APP式功能和展示。盡管PWA也有manifest文件，但是與應(yīng)用緩存卻完全不同。不同于manifest簡單的將文件通過是否緩存進行分類，PWA用manifest構(gòu)建了自己的APP骨架。另外，PWA用Service Worker來控制緩存的使用。這一塊的內(nèi)容較多，在這里就不詳細展開了。

2.2.4 往返緩存
往返緩存又稱為BFCache，是瀏覽器在前進后退按鈕上為了提升歷史頁面的渲染速度的一種策略。BFCache會緩存所有的DOM結(jié)構(gòu)，但是問題在于，一些頁面開始時進行的上報或者請求可能會被影響。這個問題現(xiàn)在主要會出現(xiàn)在微信h5的開發(fā)中。
原文：http://web.jobbole.com/95057/