如果你在2018面試前端，那這篇文章最好看一看！

Guakin_Huang 發(fā)布于2019-08-29 16:42 / 1352人閱讀

摘要：優(yōu)點是繼承了父類的模板，又繼承了父類的原型對象，缺點就是父類實例傳參，不是子類實例化傳參，不符合常規(guī)語言的寫法使用的方式繼承了父類的模板，不繼承了父類的原型對象。優(yōu)點是方便了子類實例傳參，缺點就是不繼承了父類的原型對

github版本戳,求star,follow

前端目錄

HTML相關(guān)

CSS相關(guān)

JAVASCRIPT相關(guān)

DOM相關(guān)

HTTP相關(guān)

VUE相關(guān)

算法相關(guān)

網(wǎng)絡(luò)安全相關(guān)

webpack相關(guān)

其他

Html相關(guān)

1 html語義化

意義：根據(jù)內(nèi)容的結(jié)構(gòu)化（內(nèi)容語義化），選擇合適的標(biāo)簽（代碼語義化）便于開發(fā)者閱讀和寫出更優(yōu)雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。
注意：
1.盡可能少的使用無語義的標(biāo)簽div和span；
2.在語義不明顯時，既可以使用div或者p時，盡量用p, 因為p在默認(rèn)情況下有上下間距，對兼容特殊終端有利；
3.不要使用純樣式標(biāo)簽，如：b、font、u等，改用css設(shè)置。
4.需要強調(diào)的文本，可以包含在strong或者em標(biāo)簽中（瀏覽器預(yù)設(shè)樣式，能用CSS指定就不用他們），strong默認(rèn)樣式是加粗（不要用b），em是斜體（不用i）；
5.使用表格時，標(biāo)題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和一般單元格要區(qū)分開，表頭用th，單元格用td；
6.表單域要用fieldset標(biāo)簽包起來，并用legend標(biāo)簽說明表單的用途；
7.每個input標(biāo)簽對應(yīng)的說明文本都需要使用label標(biāo)簽，并且通過為input設(shè)置id屬性，在lable標(biāo)簽中設(shè)置for=someld來讓說明文本和相對應(yīng)的input關(guān)聯(lián)起來。

新標(biāo)簽：

2 meta viewport相關(guān)

  H5標(biāo)準(zhǔn)聲明，使用 HTML5 doctype，不區(qū)分大小寫
 標(biāo)準(zhǔn)的 lang 屬性寫法
    聲明文檔使用的字符編碼
   優(yōu)先使用 IE 最新版本和 Chrome
       頁面描述
      頁面關(guān)鍵詞
    網(wǎng)頁作者
      搜索引擎抓取
 為移動設(shè)備添加 viewport
 iOS 設(shè)備 begin
  添加到主屏后的標(biāo)題（iOS 6 新增）
是否啟用 WebApp 全屏模式，刪除蘋果默認(rèn)的工具欄和菜單欄

添加智能 App 廣告條 Smart App Banner（iOS 6+ Safari）

  設(shè)置蘋果工具欄顏色
  啟用360瀏覽器的極速模式(webkit)
     避免IE使用兼容模式
    不讓百度轉(zhuǎn)碼
     針對手持設(shè)備優(yōu)化，主要是針對一些老的不識別viewport的瀏覽器，比如黑莓
   微軟的老式瀏覽器
   uc強制豎屏
    QQ強制豎屏
              UC強制全屏
       QQ強制全屏
   UC應(yīng)用模式
    QQ應(yīng)用模式
    windows phone 點擊無高光
設(shè)置頁面不緩存

3 canvas 相關(guān)

使用前需要獲得上下文環(huán)境，暫不支持3d
常用api:
    1.fillRect(x,y,width,height)實心矩形
    2.strokeRect(x,y,width,height)空心矩形
    3.fillText("Hello world",200,200);實心文字
    4.strokeText("Hello world",200,300)空心文字
各種東西！?。?/pre>
新標(biāo)簽兼容低版本

ie9之前版本通過createElement創(chuàng)建html5新標(biāo)簽
引入html5shiv.js

CSS相關(guān)
1.盒模型
1.ie盒模型算上border、padding及自身（不算margin），標(biāo)準(zhǔn)的只算上自身窗體的大小
css設(shè)置方法如下
/* 標(biāo)準(zhǔn)模型 */
box-sizing:content-box;
 /*IE模型*/
box-sizing:border-box;
2.margin、border、padding、content由外到里
3.幾種獲得寬高的方式
dom.style.width/height
　　這種方式只能取到dom元素內(nèi)聯(lián)樣式所設(shè)置的寬高，也就是說如果該節(jié)點的樣式是在style標(biāo)簽中或外聯(lián)的CSS文件中設(shè)置的話，通過這種方法是獲取不到dom的寬高的。
dom.currentStyle.width/height
　　這種方式獲取的是在頁面渲染完成后的結(jié)果，就是說不管是哪種方式設(shè)置的樣式，都能獲取到。但這種方式只有IE瀏覽器支持。
window.getComputedStyle(dom).width/height
　　這種方式的原理和2是一樣的，這個可以兼容更多的瀏覽器，通用性好一些。
dom.getBoundingClientRect().width/height
　　這種方式是根據(jù)元素在視窗中的絕對位置來獲取寬高的
dom.offsetWidth/offsetHeight
　　這個就沒什么好說的了，最常用的，也是兼容最好的。
4.拓展 各種獲得寬高的方式
獲取屏幕的高度和寬度（屏幕分辨率）：
window.screen.height/width
獲取屏幕工作區(qū)域的高度和寬度（去掉狀態(tài)欄）：
window.screen.availHeight/availWidth
網(wǎng)頁全文的高度和寬度：
document.body.scrollHeight/Width
滾動條卷上去的高度和向右卷的寬度：
document.body.scrollTop/scrollLeft
網(wǎng)頁可見區(qū)域的高度和寬度（不加邊線）：
document.body.clientHeight/clientWidth
網(wǎng)頁可見區(qū)域的高度和寬度（加邊線）：
document.body.offsetHeight/offsetWidth
5.邊距重疊解決方案(BFC)
BFC原理
內(nèi)部的box會在垂直方向，一個接一個的放置
每個元素的margin box的左邊，與包含塊border box的左邊相接觸（對于從做往右的格式化，否則相反）

box垂直方向的距離由margin決定，屬于同一個bfc的兩個相鄰box的margin會發(fā)生重疊
bfc的區(qū)域不會與浮動區(qū)域的box重疊
bfc是一個頁面上的獨立的容器，外面的元素不會影響bfc里的元素，反過來，里面的也不會影響外面的
計算bfc高度的時候，浮動元素也會參與計算

創(chuàng)建bfc

float屬性不為none（脫離文檔流）
position為absolute或fixed
display為inline-block,table-cell,table-caption,flex,inine-flex
overflow不為visible
根元素

demo

    上
    這塊margin-bottom:30px;



    
    下
    這塊margin-top:50px;
    

css reset 和 normalize.css 有什么區(qū)別

兩者都是通過重置樣式，保持瀏覽器樣式的一致性
前者幾乎為所有標(biāo)簽添加了樣式，后者保持了許多瀏覽器樣式，保持盡可能的一致
后者修復(fù)了常見的桌面端和移動端瀏覽器的bug：包含了HTML5元素的顯示設(shè)置、預(yù)格式化文字的font-size問題、在IE9中SVG的溢出、許多出現(xiàn)在各瀏覽器和操作系統(tǒng)中的與表單相關(guān)的bug。
前者中含有大段的繼承鏈
后者模塊化，文檔較前者來說豐富

居中方法
水平方向上
針對inline, 內(nèi)聯(lián)塊inline-block, 內(nèi)聯(lián)表inline-table, inline-flex元素及img,span,button等元素
.text_div{
    text-align:center;
}
不定寬塊狀元素居中
.text_div{
    margin:0 auto;
}

通過給父元素設(shè)置 float，然后給父元素設(shè)置 position:relative 和 left:50%，子元素設(shè)置 position:relative 和 left: -50% 來實現(xiàn)水平居中。
.wrap{
    float:left;
    position:relative;
    left:50%;
    clear:both;
}
.wrap-center{
    left:-50%;
}
垂直居中
單行內(nèi)聯(lián)(inline-)元素垂直居中 
通過設(shè)置內(nèi)聯(lián)元素的高度(height)和行高(line-height)相等，從而使元素垂直居中。

.text_div{
    height: 120px;
    line-height: 120px;
}
利用表布局
.father {
    display: table;
}
.children {
    display: table-cell;
    vertical-align: middle;
}
flex布局
.center-flex {
    display: flex;
    flex-direction: column;//上下排列
    justify-content: center;
}
絕對布局方式
已知高度
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; 
}
未知高度
.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
垂直水平居中根據(jù)上方結(jié)合
flex方式
.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}
grid方式
.parent {
  height: 140px;
  display: grid;
}
.child { 
  margin: auto;
}
css優(yōu)先級確定

每個選擇器都有權(quán)值，權(quán)值越大越優(yōu)先
繼承的樣式優(yōu)先級低于自身指定樣式
！important優(yōu)先級最高 js也無法修改
權(quán)值相同時，靠近元素的樣式優(yōu)先級高  順序為內(nèi)聯(lián)樣式表（標(biāo)簽內(nèi)部）> 內(nèi)部樣式表（當(dāng)前文件中）> 外部樣式表（外部文件中）

bfc內(nèi)容見盒模型
如何清除浮動
不清楚浮動會發(fā)生高度塌陷：浮動元素父元素高度自適應(yīng)（父元素不寫高度時，子元素寫了浮動后，父元素會發(fā)生高度塌陷）

clear清除浮動（添加空div法）在浮動元素下方添加空div,并給該元素寫css樣式：   {clear:both;height:0;overflow:hidden;}
給浮動元素父級設(shè)置高度
父級同時浮動（需要給父級同級元素添加浮動）
父級設(shè)置成inline-block，其margin: 0 auto居中方式失效
利用br標(biāo)簽的clear屬性
給父級添加overflow:hidden 清除浮動方法
萬能清除法 after偽類 清浮動（現(xiàn)在主流方法，推薦使用）

.float_div:after{
    content:".";
    clear:both;
    display:block;
    height:0;
    overflow:hidden;
    visibility:hidden;
}
.float_div{
    zoom:1
} 
自適應(yīng)布局
思路：

左側(cè)浮動或者絕對定位，然后右側(cè)margin撐開
使用div包含，然后靠負(fù)margin形成bfc
使用flex

畫三角形
#item {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 50px solid transparent;
    border-bottom: 50px solid blue;
    background: white;
}
link @import導(dǎo)入css

link是XHTML標(biāo)簽，除了加載CSS外，還可以定義RSS等其他事務(wù)；@import屬于CSS范疇，只能加載CSS。
link引用CSS時，在頁面載入時同時加載；@import需要頁面網(wǎng)頁完全載入以后加載。
link無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。
ink支持使用Javascript控制DOM去改變樣式；而@import不支持。

animation

長寬比方案

使用padding方式結(jié)合calc實現(xiàn)
長寬一項設(shè)置百分比另一項aspect-ratio實現(xiàn)（需借助插件實現(xiàn)）

display相關(guān)

block:div等容器類型
inline:img span等行內(nèi)類型
table系列：將樣式變成table類型
flex:重點把握，非常強大
grid:同上
inline-block:可設(shè)置寬度，兩者間有一點間隙
inherit:繼承父級

JavaScript相關(guān)
1 ["1", "2", "3"].map(parseInt)
首先, map接受兩個參數(shù), 一個回調(diào)函數(shù) callback, 一個回調(diào)函數(shù)的this值

其中回調(diào)函數(shù)接受三個參數(shù) currentValue, index, arrary;

而題目中, map只傳入了回調(diào)函數(shù)--parseInt.

其次, parseInt 只接受兩個兩個參數(shù) string, radix(基數(shù)).  
本題理解來說也就是key與 index 

所以本題即問
parseInt("1", 0);
parseInt("2", 1);
parseInt("3", 2);

parseInt(string, radix)
string    必需。要被解析的字符串。
radix 可選。表示要解析的數(shù)字的基數(shù)。該值介于 2 ~ 36 之間。
如果省略該參數(shù)或其值為 0，則數(shù)字將以 10 為基礎(chǔ)來解析。如果它以 “0x” 或 “0X” 開頭，將以 16 為基數(shù)。
2 [[3,2,1].reduce(Math.pow), [].reduce(Math.pow)]
arr.reduce(callback[, initialValue])
reduce接受兩個參數(shù), 一個回調(diào), 一個初始值.
回調(diào)函數(shù)接受四個參數(shù) previousValue, currentValue, currentIndex, array
需要注意的是 If the array is empty and no initialValue was provided, TypeError would be thrown.
所以第二個表達(dá)式會報異常. 第一個表達(dá)式等價于 Math.pow(3, 2) => 9; Math.pow(9, 1) =>9
3
var ary = [0,1,2];
ary[10] = 10;
ary.filter(function(x) { return x === undefined;});
我們看到在迭代這個數(shù)組的時候, 首先檢查了這個索引值是不是數(shù)組的一個屬性, 那么我們測試一下.

0 in ary; => true
3 in ary; => false
10 in ary; => true
也就是說 從 3 - 9 都是沒有初始化的bug !, 這些索引并不存在與數(shù)組中. 在 array 的函數(shù)調(diào)用的時候是會跳過這些坑的.
4 [typeof null, null instanceof Object]
typeof 返回一個表示類型的字符串.
instanceof 運算符用來檢測 constructor.prototype 是否存在于參數(shù) object 的原型鏈上.
type         result
Undefined   "undefined"
Null        "object"
Boolean     "boolean"
Number      "number"
String      "string"
Symbol      "symbol"
Host object Implementation-dependent
Function    "function"
Object      "object"
5 js數(shù)據(jù)類型
1.number; 
2.string;
3.boolean;
4.undefined;
5.null;
6.symbol（ES6新增，文章后面有對著新類型的解釋）Symbol 生成一個全局唯一的值。
7.Object.（包括Object，Array，F(xiàn)unction）
6 promise 用法
定義
var promise = new Promise(function(resolve, reject) {
  // ... some code
  if (/* 異步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});
使用
promise.then(function(value) {
  // success
}, function(error) {
  // failure
});
//等價于：
promise.then(function(){
  //success
}).catch(function(){
  //failure
})
7 es6 promise ajax
定義
const myHttpClient = url => {
  return new Promise((resolve, reject) => {
    let client = new XMLHttpRequest();
    client.open("GET", url);
    client.onreadystatechange = handler;
    client.responseType = "json";
    client.setRequestHeader("Accept", "application/json");
    client.send();
    function handler() {
      if (this.readyState !== 4) {
        return;
      }
      if (this.status === 200) {
        resolve(this.response);
      } else {
        reject(new Error(this.statusText));
      }
    }
  });
};
使用
myHttpClient("https://www.baidu.com").then(res => {
  console.log(res);
}).catch(error => {
  console.log(error);
});
8閉包
function foo(x) {
    var tmp = 3;
    return function (y) {
        alert(x + y + (++tmp));
    }
}
var bar = foo(2); // bar 現(xiàn)在是一個閉包
bar(10);
結(jié)果是16
es6通常用let const塊級作用域代替，
閉包缺點，ie中會引起內(nèi)存泄漏，嚴(yán)格來說是ie的缺點不是閉包的問題
9 什么是立即執(zhí)行函數(shù)？使用立即執(zhí)行函數(shù)的目的是什么？
常見兩種方式
1.(function(){...})()
  (function(x){
      console.log(x);
  })(12345)
2.(function(){...}())
  (function(x){
      console.log(x);
  }(12345))
作用 不破壞污染全局的命名空間，若需要使用，將其用變量傳入如
（function(window){...}(window)）
10 async/await 語法
作用：異步代碼的新方式
promise示例
const makeRequest = () => {
  return getJSON()
    .then(data => {
      if (data.needsAnotherRequest) {
        return makeAnotherRequest(data)
          .then(moreData => {
            console.log(moreData)
            return moreData
          })
      } else {
        console.log(data)
        return data
      }
    })
}
async/await示例
const makeRequest = async () => {
  const data = await getJSON()
  if (data.needsAnotherRequest) {
    const moreData = await makeAnotherRequest(data);
    console.log(moreData)
    return moreData
  } else {
    console.log(data)
    return data    
  }
}
函數(shù)前面多了一個aync關(guān)鍵字。await關(guān)鍵字只能用在aync定義的函數(shù)內(nèi)。async函數(shù)會隱式地返回一個promise，該promise的reosolve值就是函數(shù)return的值。(示例中reosolve值就是字符串"done")
11 深淺拷貝
let a = {
  aa: 1,
  bb: 2,
  cc: 3,
  dd: {
    ee: 5,
  },
  ff: {
    gg: 6,
  }
};
let d = JSON.parse(JSON.stringify(a));//深復(fù)制包含子對象
let c = {...a};//深拷貝單不包含子對象
let b = a;//淺拷貝
b.bb = 22;
c.cc = 33;
c.dd.ee = 55;
d.ff.gg = 66;
console.log(a);
console.log(b);
console.log(c);
console.log(d);
12數(shù)組去重
思路1：定義一個新數(shù)組，并存放原數(shù)組的第一個元素，然后將元素組一一和新數(shù)組的元素對比，若不同則存放在新數(shù)組中
思路2：先將原數(shù)組排序，在與相鄰的進(jìn)行比較，如果不同則存入新數(shù)組。
思路3：利用對象屬性存在的特性，如果沒有該屬性則存入新數(shù)組。
思路4（最常用）：使用es6 set
let arr= [1, 2, 3, 3, 5, 7, 2, 6, 8];
console.log([...new Set(arr)]);
13正則實現(xiàn)trim()功能
function myTrim(str) {
  let reg = /^s+|s+$/g;
  return str.replace(reg, "");
}
console.log(myTrim("    asdf    "));
14 JS原型
1.每個對象都有 __proto__ 屬性，但只有函數(shù)對象才有 prototype 屬性
2.個人粗略理解與python的類方法靜態(tài)方法實例方法差不多
15 es6 class
面向?qū)ο?，java中類
16 JS 如何實現(xiàn)繼承
1.使用原型繼承（既繼承了父類的模板，又繼承了父類的原型對象。優(yōu)點是繼承了父類的模板，又繼承了父類的原型對象，缺點就是父類實例傳參，不是子類實例化傳參，不符合常規(guī)語言的寫法）
2.使用call的方式（繼承了父類的模板，不繼承了父類的原型對象。優(yōu)點是方便了子類實例傳參，缺點就是不繼承了父類的原型對象）
17 手寫jquery插件
(function ($) {
    $.fn.myPlugins = function (options) {
      //參數(shù)賦值
      options = $.extend(defaults, options);//對象合并
      this.each(function () {
          //執(zhí)行代碼邏輯
      });
    };
})(jQuery);

$(selector).myPlugins({參數(shù)});
18 數(shù)組合并去重排序
let arr1 = [1, 25, 2, 26, 1234, 6, 213];
let arr2 = [2, 6, 2134, 6, 31, 623];
let c = [...new Set([...arr1, ...arr2])].sort((a, b) => {
    return a - b;
});
19 call apply
作用：在函數(shù)調(diào)用時改變函數(shù)的執(zhí)行上下文也就是this的值
區(qū)別：call采用不定長的參數(shù)列表，而apply使用一個參數(shù)數(shù)組。
性能優(yōu)化圖

20 for 中setTimeOut
要為循環(huán)題創(chuàng)建不同的循環(huán)副本
21 sort函數(shù)
V8 引擎 sort 函數(shù)只給出了兩種排序 InsertionSort 和 QuickSort，數(shù)量小于10的數(shù)組使用 插入，比10大的數(shù)組則使用 快排。
22 navigator

23 jquery綁定方式

click后者覆蓋
bind后者覆蓋
on(jquery>=1.7)
live
delegate

24 事件流向

冒泡：子節(jié)點一層層冒泡到根節(jié)點
捕獲順序與冒泡相反
addEventListener最后個參數(shù)true代表捕獲反之代表冒泡
阻止冒泡不停止父節(jié)點捕獲

25原生操作class
//判斷有無
function hasClass(ele, cls) {
    return ele.className.match(new RegExp("(s|^)" + cls + "(s|$)"));
}

//添加
function addClass(ele, cls) {
    if (!this.hasClass(ele, cls)) ele.className += " " + cls;
}

//刪除
function removeClass(ele, cls) {
    if (hasClass(ele, cls)) {
        let reg = new RegExp("(s|^)" + cls + "(s|$)");
        ele.className = ele.className.replace(reg, " ");
    }
}

html5中加入classList 
一系列操作
兼容至IE10
DOM相關(guān)
dom事件模型
DOM之事件模型分腳本模型、內(nèi)聯(lián)模型(同類一個，后者覆蓋)、動態(tài)綁定(同類多個)
demo









冒泡解釋：當(dāng)點擊一個元素觸發(fā)事件時. 事件會先從元素的最外層父元素一層一層進(jìn)入到觸發(fā)的元素, 然后在從觸發(fā)元素一層一層返回到最外層父元素, 從最外層一層一層進(jìn)入的階段叫事件捕獲階段, 從最里層一層一層往外的階段叫事件冒泡,
移動端觸摸事件
①touchstart：當(dāng)手指觸碰到屏幕的時候觸發(fā) 
②touchmove：當(dāng)手指在屏幕上滑動的時候觸發(fā) 
③touchend：當(dāng)手指離開屏幕的時候時候觸發(fā) 
④touchcancel事件：當(dāng)系統(tǒng)停止跟蹤觸摸的時候觸發(fā)(這個事件很少會用，一般不做深入研究)。 電話接入或者彈出信息等其他事件切入
event：

touches：表示當(dāng)前跟蹤的觸摸操作的touch對象的數(shù)組。
targetTouches：特定于事件目標(biāo)的Touch對象的數(shù)組。
changeTouches：表示自上次觸摸以來發(fā)生了什么改變的Touch對象的數(shù)組。

每個touch對象包含的屬性

clientX：觸摸目標(biāo)在視口中的x坐標(biāo)。
clientY：觸摸目標(biāo)在視口中的y坐標(biāo)。
identifier：標(biāo)識觸摸的唯一ID。
pageX：觸摸目標(biāo)在頁面中的x坐標(biāo)。
pageY：觸摸目標(biāo)在頁面中的y坐標(biāo)。
screenX：觸摸目標(biāo)在屏幕中的x坐標(biāo)。
screenY：觸摸目標(biāo)在屏幕中的y坐標(biāo)。
target：觸目的DOM節(jié)點目標(biāo)。

事件委托
參考定義：事件委托就是利用事件冒泡，只指定一個事件處理程序，就可以管理某一類型的所有事件
好處：給重復(fù)的節(jié)點添加相同操作，減少dom交互，提高性能
實現(xiàn)思路：給父組件添加事件，通過事件冒泡，排查元素是否為指定元素，并進(jìn)行系列操作
HTTP相關(guān)
常見狀態(tài)碼
2開頭 （請求成功）表示成功處理了請求的狀態(tài)代碼。
200   （成功）  服務(wù)器已成功處理了請求。 通常，這表示服務(wù)器提供了請求的網(wǎng)頁。 
201   （已創(chuàng)建）  請求成功并且服務(wù)器創(chuàng)建了新的資源。 
202   （已接受）  服務(wù)器已接受請求，但尚未處理。 
203   （非授權(quán)信息）  服務(wù)器已成功處理了請求，但返回的信息可能來自另一來源。 
204   （無內(nèi)容）  服務(wù)器成功處理了請求，但沒有返回任何內(nèi)容。 
205   （重置內(nèi)容） 服務(wù)器成功處理了請求，但沒有返回任何內(nèi)容。
206   （部分內(nèi)容）  服務(wù)器成功處理了部分 GET 請求。
3開頭 （請求被重定向）表示要完成請求，需要進(jìn)一步操作。 通常，這些狀態(tài)代碼用來重定向。
300   （多種選擇）  針對請求，服務(wù)器可執(zhí)行多種操作。 服務(wù)器可根據(jù)請求者 (user agent) 選擇一項操作，或提供操作列表供請求者選擇。 
301   （永久移動）  請求的網(wǎng)頁已永久移動到新位置。 服務(wù)器返回此響應(yīng)（對 GET 或 HEAD 請求的響應(yīng)）時，會自動將請求者轉(zhuǎn)到新位置。
302   （臨時移動）  服務(wù)器目前從不同位置的網(wǎng)頁響應(yīng)請求，但請求者應(yīng)繼續(xù)使用原有位置來進(jìn)行以后的請求。
303   （查看其他位置） 請求者應(yīng)當(dāng)對不同的位置使用多帶帶的 GET 請求來檢索響應(yīng)時，服務(wù)器返回此代碼。
304   （未修改） 自從上次請求后，請求的網(wǎng)頁未修改過。 服務(wù)器返回此響應(yīng)時，不會返回網(wǎng)頁內(nèi)容。 
305   （使用代理） 請求者只能使用代理訪問請求的網(wǎng)頁。 如果服務(wù)器返回此響應(yīng)，還表示請求者應(yīng)使用代理。 
307   （臨時重定向）  服務(wù)器目前從不同位置的網(wǎng)頁響應(yīng)請求，但請求者應(yīng)繼續(xù)使用原有位置來進(jìn)行以后的請求。
4開頭 （請求錯誤）這些狀態(tài)代碼表示請求可能出錯，妨礙了服務(wù)器的處理。
400   （錯誤請求） 服務(wù)器不理解請求的語法。 
401   （未授權(quán)） 請求要求身份驗證。 對于需要登錄的網(wǎng)頁，服務(wù)器可能返回此響應(yīng)。 
403   （禁止） 服務(wù)器拒絕請求。
404   （未找到） 服務(wù)器找不到請求的網(wǎng)頁。
405   （方法禁用） 禁用請求中指定的方法。 
406   （不接受） 無法使用請求的內(nèi)容特性響應(yīng)請求的網(wǎng)頁。 
407   （需要代理授權(quán)） 此狀態(tài)代碼與 401（未授權(quán)）類似，但指定請求者應(yīng)當(dāng)授權(quán)使用代理。
408   （請求超時）  服務(wù)器等候請求時發(fā)生超時。 
409   （沖突）  服務(wù)器在完成請求時發(fā)生沖突。 服務(wù)器必須在響應(yīng)中包含有關(guān)沖突的信息。 
410   （已刪除）  如果請求的資源已永久刪除，服務(wù)器就會返回此響應(yīng)。 
411   （需要有效長度） 服務(wù)器不接受不含有效內(nèi)容長度標(biāo)頭字段的請求。 
412   （未滿足前提條件） 服務(wù)器未滿足請求者在請求中設(shè)置的其中一個前提條件。 
413   （請求實體過大） 服務(wù)器無法處理請求，因為請求實體過大，超出服務(wù)器的處理能力。 
414   （請求的 URI 過長） 請求的 URI（通常為網(wǎng)址）過長，服務(wù)器無法處理。 
415   （不支持的媒體類型） 請求的格式不受請求頁面的支持。 
416   （請求范圍不符合要求） 如果頁面無法提供請求的范圍，則服務(wù)器會返回此狀態(tài)代碼。 
417   （未滿足期望值） 服務(wù)器未滿足"期望"請求標(biāo)頭字段的要求。
5開頭（服務(wù)器錯誤）這些狀態(tài)代碼表示服務(wù)器在嘗試處理請求時發(fā)生內(nèi)部錯誤。 這些錯誤可能是服務(wù)器本身的錯誤，而不是請求出錯。
500   （服務(wù)器內(nèi)部錯誤）  服務(wù)器遇到錯誤，無法完成請求。 
501   （尚未實施） 服務(wù)器不具備完成請求的功能。 例如，服務(wù)器無法識別請求方法時可能會返回此代碼。 
502   （錯誤網(wǎng)關(guān)） 服務(wù)器作為網(wǎng)關(guān)或代理，從上游服務(wù)器收到無效響應(yīng)。 
503   （服務(wù)不可用） 服務(wù)器目前無法使用（由于超載或停機維護）。 通常，這只是暫時狀態(tài)。 
504   （網(wǎng)關(guān)超時）  服務(wù)器作為網(wǎng)關(guān)或代理，但是沒有及時從上游服務(wù)器收到請求。 
505   （HTTP 版本不受支持） 服務(wù)器不支持請求中所用的 HTTP 協(xié)議版本。
緩存
Expires在http1.0中使用，與服務(wù)器時間有誤差，在1.1中由Cache-control替代


cdn
Cache-Control 和 Etag 的區(qū)別
如下圖

Cookie sessionStorage  localStorage
共同點：都是保存在瀏覽器端，且同源的。
區(qū)別：cookie數(shù)據(jù)始終在同源的http請求中攜帶，即cookie在瀏覽器和服務(wù)器間來回傳遞。而sessionStorage和localStorage不會自動把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存。cookie數(shù)據(jù)不能超過4k(適合保存小數(shù)據(jù))。
sessionStorage和localStorage容量較大，數(shù)據(jù)有效期不同，sessionStorage：僅在當(dāng)前瀏覽器窗口關(guān)閉前有效。localStorage：始終有效，窗口或瀏覽器關(guān)閉也一直保存，需手動清楚；cookie只在設(shè)置的cookie過期時間之前一直有效，即使窗口或瀏覽器關(guān)閉。作用域不同。
sessionStorage不在不同的瀏覽器窗口中共享；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。
應(yīng)用場景：localStorage：常用于長期登錄（+判斷用戶是否已登錄），適合長期保存在本地的數(shù)據(jù)。sessionStorage ：敏感賬號一次性登錄； cookies與服務(wù)器交互。
GET POST區(qū)別

請求行，請求頭，請求體詳解

1,2,3請求行，4請求體，5請求體
跨域、JSONP 、CORS、postMessage
跨域概念解釋：當(dāng)前發(fā)起請求的域與該請求指向的資源所在的域不一樣。這里的域指的是這樣的一個概念：我們認(rèn)為若協(xié)議 + 域名 + 端口號均相同，那么就是同域。
如下表

jsoup實現(xiàn)
原生

 
jquery
$.ajax({
    url: "http://www.domain2.com:8080/login",
    type: "get",
    dataType: "jsonp",  // 請求方式為jsonp
    jsonpCallback: "onBack",    // 自定義回調(diào)函數(shù)名
    data: {}
});

vue
this.$http.jsonp("http://www.domain2.com:8080/login", {
    params: {},
    jsonp: "onBack"
}).then((res) => {
    console.log(res); 
})

配合的后端node實現(xiàn),其他服務(wù)器語言也可以
const querystring = require("querystring");
const http = require("http");
const server = http.createServer();
server.on("request", function(req, res) {
    var params = qs.parse(req.url.split("?")[1]);
    var fn = params.callback;
 
    // jsonp返回設(shè)置
    res.writeHead(200, { "Content-Type": "text/javascript" });
    res.write(fn + "(" + JSON.stringify(params) + ")");
 
    res.end();
});
server.listen("8080");

jsoup缺點只能實現(xiàn)get請求
CORS：跨源資源共享 Cross-Origin Resource Sharing(CORS)，通常服務(wù)器設(shè)置，若帶cookie請求，則前后端都需要設(shè)置
后端常見設(shè)置
response.setHeader("Access-Control-Allow-Origin", "http://www.domain1.com");  // 若有端口需寫全（協(xié)議+域名+端口），允許那些外源請求
response.setHeader("Access-Control-Allow-Credentials", "true"); //是否需要驗證
前端示例
原生

var xhr = new XMLHttpRequest(); // IE8/9需用window.XDomainRequest兼容
// 前端設(shè)置是否帶cookie
xhr.withCredentials = true;
xhr.open("post", "http://www.domain2.com:8080/login", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("user=admin");
 
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        alert(xhr.responseText);
    }

jquery
$.ajax({
    ...
   xhrFields: {
       withCredentials: true    // 前端設(shè)置是否帶cookie
   },
   crossDomain: true,   // 會讓請求頭中包含跨域的額外信息，但不會含cookie
    ...
});
postMessage(data,origin)方法接受兩個參數(shù)
demo

a.html



b.html  與a.html不同源


osi模型
七層結(jié)構(gòu)：物理層、數(shù)據(jù)鏈路層、網(wǎng)絡(luò)層、傳輸層、會話層、表示層、應(yīng)用層
tcp ucp屬于傳輸層；http屬于應(yīng)用層
http2.0 http1

HTTP2.0的基本單位為二進(jìn)制幀
HTTP2.0中幀具有優(yōu)先級
HTTP2.0的多路復(fù)用（ 1次連接）
HTTP2.0壓縮消息頭
HTTP2.0服務(wù)端推送
HTTP2.0只適用于HTTPS的場景

Vue相關(guān)
生命周期順序

組件通信
1.父傳子用props,父用子用ref 子調(diào)父用$emit,無關(guān)系用Bus
Vuex
組件通信庫，可以避免子組件無法改變props的弊端等
mutations 同步操作， 用于改變狀態(tài) 官方不推薦異步
action 執(zhí)行多個mutaions，官方推薦異步操作
mapState、mapGetters、mapActions使用示例




后兩者類似
VueRouter
定義
var routes = [
    {
        path:"/one",

        component:導(dǎo)入的組件1
    },
    {
        path:"/two",
        component:導(dǎo)入的組件2
    },
];
// 定義路由組件
var router = new VueRouter({
    routes
});
// 定義路由
new Vue({
    el:"#box",
    router
});
 訪問設(shè)定的路由后 會將替換成相應(yīng)的模版
 html訪問方式 One(類似a標(biāo)簽)
 js訪問方式 this.$router.push("/one"); 
 replace方式 替換當(dāng)前頁面
 攜帶的參數(shù) 可以通過this.$route.query.xxxx來獲取
Vue雙向綁定
原理：利用了 Object.defineProperty() 這個方法重新定義了對象獲取屬性值(get)和設(shè)置屬性值(set)的操作來實現(xiàn)的。
缺點：雙向數(shù)據(jù)流是自動管理狀態(tài)的, 但是在實際應(yīng)用中會有很多不得不手動處理狀態(tài)變化的邏輯, 使得程序復(fù)雜度上升, 難以調(diào)試。
computed  watch methods
用法：
區(qū)別：

前兩者自動追蹤數(shù)據(jù)，執(zhí)行相關(guān)函數(shù)，最后一個手動調(diào)用；
computed是計算屬性，用法與data一致
watch像事件監(jiān)聽，對象發(fā)生變化時，執(zhí)行相關(guān)操作
methods與js中執(zhí)行方法類似
computed通常只有g(shù)et屬性
數(shù)據(jù)變化的同時進(jìn)行異步操作或者是比較大的開銷，那么watch為最佳選擇
watch的對象必須事先聲明

算法相關(guān)
各種排序?qū)崿F(xiàn)
相關(guān)數(shù)據(jù)

// 冒泡排序: 比較兩個相鄰的項，如果第一個大于第二個則交換他們的位置,元素項向上移動至正確的順序，就好像氣泡往上冒一樣
冒泡demo:
function bubbleSort(arr) {
    let len = arr.length;
    for (let i = 0; i < len; i++) {
        for (let j = 0; j < len - 1 - i; j++) {
            if (arr[j] > arr[j+1]) {        //相鄰元素兩兩對比
                [arr[j + 1], arr[j]] = [arr[j], arr[j + 1]];
            }
        }
    }
    return arr;
}
// 1) 首先，在數(shù)組中選擇一個中間項作為主元
// 2) 創(chuàng)建兩個指針，左邊的指向數(shù)組第一個項，右邊的指向最后一個項，移動左指針，直到找到一個比主元大的項，接著，移動右邊的指針，直到找到一個比主元小的項，然后交換它們。重復(fù)這個過程，直到
// 左側(cè)的指針超過了右側(cè)的指針。這個使比主元小的都在左側(cè)，比主元大的都在右側(cè)。這一步叫劃分操作
// 3) 接著，算法對劃分后的小數(shù)組（較主元小的值組成的的小數(shù)組， 以及較主元大的值組成的小數(shù)組）重復(fù)之前的兩個步驟，直到排序完成
快排demo:
function quickSort(arr, left, right) {
    let len = arr.length;
    let partitionIndex;
    left = typeof left !== "number" ? 0 : left;
    right = typeof right !== "number" ? len - 1 : right;
    if (left < right) {
        partitionIndex = partition(arr, left, right);
        quickSort(arr, left, partitionIndex - 1);
        quickSort(arr, partitionIndex + 1, right);
    }
    return arr;
}

function partition(arr, left, right) {     //分區(qū)操作
    let pivot = left;                      //設(shè)定基準(zhǔn)值（pivot）
    let index = pivot + 1;
    for (let i = index; i <= right; i++) {
        if (arr[i] < arr[pivot]) {
            [arr[i], arr[index]] = [arr[index], arr[i]];
            index++;
        }
    }
    [arr[pivot], arr[index - 1]] = [arr[index - 1], arr[pivot]];
    return index - 1;
}
// 選擇排序：大概思路是找到最小的放在第一位，找到第二小的放在第二位，以此類推 算法復(fù)雜度O(n^2)
選擇demo:
function selectionSort(arr) {
    let len = arr.length;
    let minIndex;
    for (let i = 0; i < len - 1; i++) {
        minIndex = i;
        for (let j = i + 1; j < len; j++) {
            if (arr[j] < arr[minIndex]) {     //尋找最小的數(shù)
                minIndex = j;                 //將最小數(shù)的索引保存
            }
        }
        [arr[i], arr[minIndex]] = [arr[minIndex], arr[i]];
    }
return arr;
}
// 插入排序：每次排一個數(shù)組項，假設(shè)數(shù)組的第一項已經(jīng)排序，接著，把第二項與第一項進(jìn)行對比，第二項是該插入到第一項之前還是之后，第三項是該插入到第一項之前還是第一項之后還是第三項
插入demo:
function insertionSort(arr) {
    let len = arr.length;
    let preIndex, current;
    for (let i = 1; i < len; i++) {
        preIndex = i - 1;
        current = arr[i];
        while (preIndex >= 0 && arr[preIndex] > current) {
            arr[preIndex + 1] = arr[preIndex];
            preIndex--;
        }
        arr[preIndex + 1] = current;
    }
    return arr;
}
// 歸并排序：Mozilla Firefox 使用歸并排序作為Array.prototype.sort的實現(xiàn)，而chrome使用快速排序的一個變體實現(xiàn)的,前面三種算法性能不好，但歸并排序性能不錯 算法復(fù)雜度O(nlog^n)
// 歸并排序是一種分治算法。本質(zhì)上就是把一個原始數(shù)組切分成較小的數(shù)組，直到每個小數(shù)組只有一個位置，接著把小數(shù)組歸并成較大的數(shù)組，在歸并過程中也會完成排序，直到最后只有一個排序完畢的大數(shù)組
歸并demo:
function mergeSort(arr) {  //采用自上而下的遞歸方法
    let len = arr.length;
    if(len < 2) {
        return arr;
    }
    let middle = Math.floor(len / 2),
    left = arr.slice(0, middle),
    right = arr.slice(middle);
    return merge(mergeSort(left), mergeSort(right));
}

function merge(left, right){
    let result = [];
    while (left.length && right.length) {
        if (left[0] <= right[0]) {
            result.push(left.shift());
        } else {
            result.push(right.shift());
        }
    }
    result.push(...left);
    result.push(...right);
    return result;
}
//堆排序：堆排序把數(shù)組當(dāng)中二叉樹來排序而得名。
// 1）索引0是樹的根節(jié)點；2）除根節(jié)點為，任意節(jié)點N的父節(jié)點是N/2；3）節(jié)點L的左子節(jié)點是2*L；4）節(jié)點R的右子節(jié)點為2*R + 1
// 本質(zhì)上就是先構(gòu)建二叉樹，然后把根節(jié)點與最后一個進(jìn)行交換，然后對剩下對元素進(jìn)行二叉樹構(gòu)建，進(jìn)行交換，直到剩下最后一個
堆demo:
var len;    //因為聲明的多個函數(shù)都需要數(shù)據(jù)長度，所以把len設(shè)置成為全局變量

function buildMaxHeap(arr) {   //建立大頂堆
    len = arr.length;
    for (let i = Math.floor(len / 2); i >= 0; i--) {
        heapify(arr, i);
    }
}

function heapify(arr, i) {     //堆調(diào)整
    let left = 2 * i + 1;
    let right = 2 * i + 2;
    let largest = i;
    if (left < len && arr[left] > arr[largest]) {
        largest = left;
    }
    if (right < len && arr[right] > arr[largest]) {
        largest = right;
    }
    if (largest !== i) {
        [arr[i], arr[largest]] = [arr[largest], arr[i]];
        heapify(arr, largest);
    }
}

function heapSort(arr) {
    buildMaxHeap(arr);
    for (let i = arr.length - 1; i > 0; i--) {
        [arr[0],arr[i]]=[arr[i],arr[0]];
        len--;
        heapify(arr, 0);
    }
    return arr;
}
二分查找
思路
（1）首先，從有序數(shù)組的中間的元素開始搜索，如果該元素正好是目標(biāo)元素（即要查找的元素），則搜索過程結(jié)束，否則進(jìn)行下一步。
（2）如果目標(biāo)元素大于或者小于中間元素，則在數(shù)組大于或小于中間元素的那一半?yún)^(qū)域查找，然后重復(fù)第一步的操作。
（3）如果某一步數(shù)組為空，則表示找不到目標(biāo)元素。
// 非遞歸算法
function binary_search(arr, key) {
    let low = 0;
    let high = arr.length - 1;
    while(low <= high){
        let mid = parseInt((high + low) / 2);
        if(key === arr[mid]){
            return  mid;
        }else if(key > arr[mid]){
            low = mid + 1;
        }else if(key < arr[mid]){
            high = mid -1;
        }else{
            return -1;
        }
    }
}
      

// 遞歸算法
function binary_search(arr,low, high, key) {
    if (low > high){
        return -1;
    }
    let mid = parseInt((high + low) / 2);
    if(arr[mid] === key){
        return mid;
    }else if (arr[mid] > key){
        high = mid - 1;
        return binary_search(arr, low, high, key);
    }else if (arr[mid] < key){
        low = mid + 1;
        return binary_search(arr, low, high, key);
    }
};
二叉樹相關(guān)
創(chuàng)建
function Node(data,left,right){
    this.data = data;//數(shù)值
    this.left = left;//左節(jié)點
    this.right = right;//右節(jié)點
};
插入二叉樹
function insert(node,data){
    //創(chuàng)建一個新的節(jié)點
    let newNode  = new Node(data,null,null);
    //判斷是否存在根節(jié)點，沒有將新節(jié)點存入
    if(node == null){
        node = newNode;
    }else{
        //獲取根節(jié)點
        let current = node;
        let parent;
        while(true){
            //將當(dāng)前節(jié)點保存為父節(jié)點
            parent = current;
            //將小的數(shù)據(jù)放在左節(jié)點
            if(data < current.data){
                //獲取當(dāng)前節(jié)點的左節(jié)點
                //判斷當(dāng)前節(jié)點下的左節(jié)點是否有數(shù)據(jù)
                current = current.left;
                if(current == null){
                    //如果沒有數(shù)據(jù)將新節(jié)點存入當(dāng)前節(jié)點下的左節(jié)點
                    parent.left = newNode;
                    break;
                }
            }else{
                current = current.right;
                if(current == null){
                    parent.right = newNode;
                    break;
                }
            }
        }    
    }
}
翻轉(zhuǎn)二叉樹
function invertTree(node) {
    if (node !== null) {
        node.left, node.right = node.left, node.right;
        invertTree(node.left);
        invertTree(node.right);
    }
    return node;
}
查找鏈表中倒數(shù)第k個結(jié)點
2個思路
1：先遍歷出長度，然后查找長度-k+1的值
2：2個指針，一個指針先走k-1，然后兩個一起走到底部，后者就是結(jié)果
網(wǎng)絡(luò)安全相關(guān)
XSS CSRF
XSS(跨站腳本攻擊)，惡意的注入html代碼，其他用戶訪問時，會被執(zhí)行
特點：能注入惡意的HTML/JavaScript代碼到用戶瀏覽的網(wǎng)頁上，從而達(dá)到Cookie資料竊取、會話劫持、釣魚欺騙等攻擊
防御手段：

瀏覽器禁止頁面的JS訪問帶有HttpOnly屬性的Cookie
兩端進(jìn)行輸入格式檢查
通過編碼轉(zhuǎn)義的方式進(jìn)行輸出檢查

CSRF(攻擊跨站請求偽造)
特點：重要操作的所有參數(shù)都是可以被攻擊者猜測到的。攻擊者預(yù)測出URL的所有參數(shù)與參數(shù)值，才能成功地構(gòu)造一個偽造的請求。
防御手段：

token驗證機制，比如請求數(shù)據(jù)字段中添加一個token，響應(yīng)請求時校驗其有效性
用戶操作限制，比如驗證碼（繁瑣，用戶體驗差）
請求來源限制，比如限制HTTP Referer才能完成操作（防御效果相比較差）

實踐中常用第一種
 webpack相關(guān)
打包體積
優(yōu)化思路

提取第三方庫或通過引用外部文件的方式引入第三方庫
代碼壓縮插件UglifyJsPlugin
服務(wù)器啟用gzip壓縮
按需加載資源文件 require.ensure
優(yōu)化devtool中的source-map
剝離css文件，多帶帶打包
去除不必要插件，通常就是開發(fā)環(huán)境與生產(chǎn)環(huán)境用同一套配置文件導(dǎo)致

打包效率

開發(fā)環(huán)境采用增量構(gòu)建，啟用熱更新
開發(fā)環(huán)境不做無意義的工作如提取css計算文件hash等
配置devtool
選擇合適的loader
個別loader開啟cache 如babel-loader
第三方庫采用引入方式
提取公共代碼
優(yōu)化構(gòu)建時的搜索路徑 指明需要構(gòu)建目錄及不需要構(gòu)建目錄
模塊化引入需要的部分

Loader
編寫一個loader
loader就是一個node模塊，它輸出了一個函數(shù)。當(dāng)某種資源需要用這個loader轉(zhuǎn)換時，這個函數(shù)會被調(diào)用。并且，這個函數(shù)可以通過提供給它的this上下文訪問Loader API。
reverse-txt-loader
定義
module.exports = function(src) {
  //src是原文件內(nèi)容（abcde），下面對內(nèi)容進(jìn)行處理，這里是反轉(zhuǎn)
  var result = src.split("").reverse().join(""); 
  //返回JavaScript源碼，必須是String或者Buffer
  return `module.exports = "${result}"`;
}
使用
{
    test: /.txt$/,
    use: [
        {
            "./path/reverse-txt-loader"
        }
    ]
},
plugins
使用范圍更廣，通常只需要require()然后添加到plugins數(shù)組中，且需要new一個
其他
URL到界面顯示發(fā)生了什么
DNS解析
先本地緩存找，在一層層找
將常見的地址解析成唯一對應(yīng)的ip地址基本順序為：本地域名服務(wù)器->根域名服務(wù)器->com頂級域名服務(wù)器依次類推下去,找到后記錄并緩存下來如www.google.com為
. -> .com -> google.com. -> www.google.com.
TCP連接
三次握手，只要沒收到確認(rèn)消息就要重新發(fā)
1. 主機向服務(wù)器發(fā)送一個建立連接的請求（您好，我想認(rèn)識您）；
2. 服務(wù)器接到請求后發(fā)送同意連接的信號（好的，很高興認(rèn)識您）；
3. 主機接到同意連接的信號后，再次向服務(wù)器發(fā)送了確認(rèn)信號（我也很高興認(rèn)識您），自此，主機與服務(wù)器兩者建立了連接。
發(fā)送HTTP請求
瀏覽器會分析這個url，并設(shè)置好請求報文發(fā)出。請求報文中包括請求行、請求頭、空行、請求主體。https默認(rèn)請求端口443， http默認(rèn)80。
常見的http請求如下
POST / HTTP1.1
Host:www.wrox.com
User-Agent:Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022)
Content-Type:application/x-www-form-urlencoded
Content-Length:40
Connection: Keep-Alive

name=Professional%20Ajax&publisher=Wiley
第一部分：請求行，第一行說明是post請求，以及http1.1版本。
第二部分：請求頭部，第二行至第六行。
第三部分：空行，第七行的空行。
第四部分：請求數(shù)據(jù)，第八行。
4. 服務(wù)器處理請求并返回HTTP報文
后端處理返回http報文如下
HTTP/1.1 200 OK
Date: Fri, 22 May 2009 06:07:21 GMT
Content-Type: text/html; charset=UTF-8


      
      
            
      

第一行為狀態(tài)行，（HTTP/1.1）表明HTTP版本為1.1版本，狀態(tài)碼為200，狀態(tài)消息為（ok）
第二行和第三行為消息報頭，
Date:生成響應(yīng)的日期和時間；Content-Type:指定了MIME類型的HTML(text/html),編碼類型是UTF-8
第三部分：空行，消息報頭后面的空行是必須的
第四部分：響應(yīng)正文，服務(wù)器返回給客戶端的文本信息。
空行后面的html部分為響應(yīng)正文。
瀏覽器解析渲染頁面

通過HTML解析器解析HTML文檔，構(gòu)建一個DOM Tree，同時通過CSS解析器解析HTML中存在的CSS，構(gòu)建Style Rules，兩者結(jié)合形成一個Attachment。
通過Attachment構(gòu)造出一個呈現(xiàn)樹（Render Tree）
Render Tree構(gòu)建完畢，進(jìn)入到布局階段（layout/reflow），將會為每個階段分配一個應(yīng)出現(xiàn)在屏幕上的確切坐標(biāo)。
最后將全部的節(jié)點遍歷繪制出來后，一個頁面就展現(xiàn)出來了。

遇到script會停下來執(zhí)行，所以通常把script放在底部
連接結(jié)束
組件封裝
目的：為了重用，提高開發(fā)效率和代碼質(zhì)量
注意：低耦合，單一職責(zé)，可復(fù)用性，可維護性
常用操作：

分析布局
初步開發(fā)
化繁為簡
組件抽象

JS異步加載

動態(tài)生成script標(biāo)簽
添加h5的async defer屬性，前者亂序不適合依賴性加載
async 是“下載完就執(zhí)行”， defer 是“渲染完再執(zhí)行”

css與js動畫差異

css性能好
css代碼邏輯相對簡單
js動畫控制好
js兼容性好
js可實現(xiàn)的動畫多
js可以添加事件

負(fù)載均衡
多臺服務(wù)器共同協(xié)作，不讓其中某一臺或幾臺超額工作，發(fā)揮服務(wù)器的最大作用

http重定向負(fù)載均衡：調(diào)度者根據(jù)策略選擇服務(wù)器以302響應(yīng)請求，缺點只有第一次有效果，后續(xù)操作維持在該服務(wù)器
dns負(fù)載均衡：解析域名時，訪問多個ip服務(wù)器中的一個（可監(jiān)控性較弱）
反向代理負(fù)載均衡：訪問統(tǒng)一的服務(wù)器，由服務(wù)器進(jìn)行調(diào)度訪問實際的某個服務(wù)器，對統(tǒng)一的服務(wù)器要求大，性能受到 服務(wù)器群的數(shù)量

CDN
內(nèi)容分發(fā)網(wǎng)絡(luò)，基本思路是盡可能避開互聯(lián)網(wǎng)上有可能影響數(shù)據(jù)傳輸速度和穩(wěn)定性的瓶頸和環(huán)節(jié)，使內(nèi)容傳輸?shù)母?、更穩(wěn)定。
內(nèi)存泄漏
定義：程序中己動態(tài)分配的堆內(nèi)存由于某種原因程序未釋放或無法釋放引發(fā)的各種問題
js中可能出現(xiàn)的內(nèi)存泄漏情況
結(jié)果：變慢，崩潰，延遲大等
原因：

全局變量
dom清空時，還存在引用
ie中使用閉包
定時器未清理
子元素存在引起的內(nèi)存泄露

避免策略：

減少不必要的全局變量，或者生命周期較長的對象，及時對無用的數(shù)據(jù)進(jìn)行垃圾回收；
注意程序邏輯，避免“死循環(huán)”之類的 ；
避免創(chuàng)建過多的對象  原則：不用了的東西要及時歸還。
減少層級過多的引用

babel原理
ES6、7代碼輸入 -> babylon進(jìn)行解析 -> 得到AST（抽象語法樹）-> plugin用babel-traverse對AST樹進(jìn)行遍歷轉(zhuǎn)譯 ->得到新的AST樹->用babel-generator通過AST樹生成ES5代碼、
promise
特性：Promise 對象的錯誤具有冒泡性質(zhì)，會一直向后傳遞，直到被捕獲為止，也即是說，錯誤總會被下一個catch語句捕獲
js自定義事件
三要素：
document.createEvent()
event.initEvent()
element.dispatchEvent()
demo:
(en:自定義事件名稱，fn:事件處理函數(shù)，addEvent:為DOM元素添加自定義事件，triggerEvent:觸發(fā)自定義事件)
window.onload = function(){
    var demo = document.getElementById("demo");
    demo.addEvent("test",function(){console.log("handler1")});
    demo.addEvent("test",function(){console.log("handler2")});
    demo.onclick = function(){
        this.triggerEvent("test");
    }
}
Element.prototype.addEvent = function(en,fn){
    this.pools = this.pools || {};
    if(en in this.pools){
        this.pools[en].push(fn);
    }else{
        this.pools[en] = [];
        this.pools[en].push(fn);
    }
}
Element.prototype.triggerEvent  = function(en){
    if(en in this.pools){
        var fns = this.pools[en];
        for(var i=0,il=fns.length;i
es6模塊 commonjs  amd cmd

CommonJS 的規(guī)范中，每個 JavaScript 文件就是一個獨立的模塊上下文（module context），在這個上下文中默認(rèn)創(chuàng)建的屬性都是私有的。也就是說，在一個文件定義的變量（還包括函數(shù)和類），都是私有的，對其他文件是不可見的。
CommonJS是同步加載模塊,在瀏覽器中會出現(xiàn)堵塞情況，所以不適用
AMD 異步，需要定義回調(diào)define方式
es6 一個模塊就是一個獨立的文件，該文件內(nèi)部的所有變量，外部無法獲取。如果你希望外部能夠讀取模塊內(nèi)部的某個變量，就必須使用export關(guān)鍵字輸出該變量
es6還可以導(dǎo)出類、方法，自動適用嚴(yán)格模式

前后端路由差別
1.后端每次路由請求都是重新訪問服務(wù)器
2.前端路由實際上只是JS根據(jù)URL來操作DOM元素，根據(jù)每個頁面需要的去服務(wù)端請求數(shù)據(jù)，返回數(shù)據(jù)后和模板進(jìn)行組合。

GPU云服務(wù)器云服務(wù)器前端面試前端工程師面試前端ddos 攻擊面試前端開發(fā)工程師面試

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/113918.html

發(fā)表評論

登陸后可評論

0條評論

Guakin_Huang

男|高級講師

我要關(guān)注我要私信

TA的文章

RangCloud：雙十一促銷，全年最低價，香港CN2+BGP線路VPS/5折優(yōu)惠，1核/1G套餐月

閱讀 1718·2021-11-02 14:47
好看漂亮的html5網(wǎng)頁特效學(xué)習(xí)筆記(5)_弧形菜單

閱讀 3664·2019-08-30 15:44
如果你在2018面試前端，那這篇文章最好看一看！

閱讀 1353·2019-08-29 16:42
重學(xué)前端學(xué)習(xí)筆記（二十三）--狹義的文檔對象DOM

閱讀 1746·2019-08-26 13:53
vue實現(xiàn)自定義dialog組件

閱讀 948·2019-08-26 10:41
WebGL three.js學(xué)習(xí)筆記使用粒子系統(tǒng)模擬時空隧道（蟲洞）

閱讀 3479·2019-08-23 17:10
H5拍照、選擇圖片上傳組件核心

閱讀 616·2019-08-23 14:24
微信小程序自定義組件(一)

閱讀 1734·2019-08-23 11:59

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

如果你在2018面試前端，那這篇文章最好看一看！

1 html語義化

2 meta viewport相關(guān)

3 canvas 相關(guān)

新標(biāo)簽兼容低版本

1.盒模型

上

下

css reset 和 normalize.css 有什么區(qū)別

居中方法

css優(yōu)先級確定

bfc內(nèi)容見盒模型

如何清除浮動

自適應(yīng)布局

畫三角形

link @import導(dǎo)入css

animation

長寬比方案

display相關(guān)

1 ["1", "2", "3"].map(parseInt)

2 [[3,2,1].reduce(Math.pow), [].reduce(Math.pow)]

3

4 [typeof null, null instanceof Object]

5 js數(shù)據(jù)類型

6 promise 用法

7 es6 promise ajax

8閉包

9 什么是立即執(zhí)行函數(shù)？使用立即執(zhí)行函數(shù)的目的是什么？

10 async/await 語法

11 深淺拷貝

12數(shù)組去重

13正則實現(xiàn)trim()功能

14 JS原型

15 es6 class

16 JS 如何實現(xiàn)繼承

17 手寫jquery插件

18 數(shù)組合并去重排序

19 call apply

20 for 中setTimeOut

21 sort函數(shù)

22 navigator

23 jquery綁定方式

24 事件流向

25原生操作class

dom事件模型

移動端觸摸事件

事件委托

常見狀態(tài)碼

緩存

Cache-Control 和 Etag 的區(qū)別

Cookie sessionStorage localStorage

GET POST區(qū)別

請求行，請求頭，請求體詳解

跨域、JSONP 、CORS、postMessage

osi模型

http2.0 http1

生命周期順序

組件通信

Vuex

VueRouter

Vue雙向綁定

computed watch methods

各種排序?qū)崿F(xiàn)

二分查找

二叉樹相關(guān)

XSS CSRF

打包體積

打包效率

Loader

plugins

URL到界面顯示發(fā)生了什么

組件封裝

JS異步加載

css與js動畫差異

負(fù)載均衡

CDN

內(nèi)存泄漏

babel原理

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

如果你在2018面試前端，那這篇文章最好看一看！

9 什么是立即執(zhí)行函數(shù)？使用立即執(zhí)行函數(shù)的目的是什么？

請求行，請求頭，請求體詳解

跨域、JSONP 、CORS、postMessage