摘要：介紹以及它的狀態(tài)碼是一個(gè)它為客戶端提供了在客戶端和服務(wù)器之間傳輸數(shù)據(jù)的功能。的節(jié)點(diǎn)綁定事件后如果直接刪除，但事件未被刪除，這也會(huì)造成泄露。回流當(dāng)元素改變的時(shí)候，將會(huì)影響文檔內(nèi)容或結(jié)構(gòu)，或元素位置，此過(guò)程稱為。通過(guò)響應(yīng)頭部指定。

XMLHttpRequest 是一個(gè)API, 它為客戶端提供了在客戶端和服務(wù)器之間傳輸數(shù)據(jù)的功能。它提供了一個(gè)通過(guò) URL 來(lái)獲取數(shù)據(jù)的簡(jiǎn)單方式，并且不會(huì)使整個(gè)頁(yè)面刷新。

readyState屬性, 共有以下5種狀態(tài)

需要提到作用域，作用域分全局作用域和局部作用域，外部變量屬于全局作用域，函數(shù)內(nèi)部變量屬于局部作用域。 函數(shù)作用域是定義時(shí)確定的。 內(nèi)部函數(shù)可以訪問(wèn)外部函數(shù)的變量, 參數(shù)， 其它函數(shù)聲明。 如果這個(gè)內(nèi)部函數(shù)允許在包含的這個(gè)函數(shù)外被調(diào)用，就會(huì)形成一個(gè)閉包。

利用閉包生成一個(gè)自增id函數(shù)

function createIncId (seed) {
    seed = parseInt(seed) || 0;
   return function () {
        return seed++;
   }
}

var incFn1 = createIncId(100);
var incFn2 = createIncId(10);
incFn1(); // 100
incFn1(); // 101
incFn2(); // 10
incFn2(); // 11

首先，閉包是由于執(zhí)行函數(shù)后返回的對(duì)象或函數(shù)擁有對(duì)外部函數(shù)的變量，參數(shù)和函數(shù)聲明具有訪問(wèn)權(quán)。因此，在js的回收機(jī)制上，是會(huì)被標(biāo)記這些變量，參數(shù)，函數(shù)聲明引用（在定義時(shí)確定哪些變量會(huì)被添加標(biāo)記），在定時(shí)回收的時(shí)候不會(huì)考慮將這些占用的內(nèi)存回收。如果我們將返回的對(duì)象或函數(shù)設(shè)置為null, 那么就失去了對(duì)內(nèi)部變量的控制，就會(huì)被回收。

下面是一個(gè)簡(jiǎn)單的例子 在線測(cè)試

var createClouse = function () {
    var args = [].slice.call(arguments, 0);
    return {
      // 保存了對(duì) args 的 引用
      getValue: function (index) {
        return args[index] || undefined;
    },
    getIndex: function (val) {
        return args.findIndex(function (arg) {
          return val === arg;
      });
    }
  }
}

var clouse = createClouse({}, [], "", null, undefined, false, 0);

alert(clouse.getIndex(undefined));

// 一旦clouse的引用不存在, 則該對(duì)象被標(biāo)記為回收狀態(tài)
clouse = null;

采用 Mark-and-sweep（標(biāo)記掃描）算法

創(chuàng)建"根"列表， 保存引用的全局變量。 在瀏覽器中, window 對(duì)象總是存在的， window對(duì)象下的對(duì)象變量總是存在，所以不會(huì)被標(biāo)記回收。

從“根”可到達(dá)的一切子節(jié)點(diǎn)不會(huì)被標(biāo)記回收。

所有未被標(biāo)記為活動(dòng)的內(nèi)存塊都可以被標(biāo)記，交由垃圾回收器進(jìn)行回收。

要了解如何預(yù)防內(nèi)存泄漏，需要了解對(duì)象的基本生命周期。對(duì)象生命周期, JS為引用類型分配適當(dāng)?shù)膬?nèi)存, 從分配的開始起垃圾回收器會(huì)不斷對(duì)該對(duì)象進(jìn)行評(píng)估，檢查是否屬于有效的對(duì)象。
垃圾回收器定期掃描對(duì)象， 會(huì)將引用數(shù)量為0或?qū)?duì)象唯一引用是循環(huán)到對(duì)象進(jìn)行回收。

內(nèi)存泄露方式1: 閉包

  var theThing = null;
  var replaceThing = function () {
    var originalThing = theThing;
    var unused = function () {
      if (originalThing) {
      
        console.log("hi");
      }
    };
    theThing = {
      longStr: new Array(1000000).join("*"),
      someMethod: function () {
        console.log("some message");
      }
    };
    // 顯示標(biāo)記釋放內(nèi)存
    // originalThing = null;
  };
  setInterval(replaceThing, 1000);

如果一直執(zhí)行的話，可以在chrome工具欄 memory下給 Heap 拍幾張快照，會(huì)發(fā)現(xiàn)內(nèi)存會(huì)每隔1s鐘不斷增加

原因在于theThing 的 someMethod 與 unused 都為同一個(gè)父作用域, unused 引用了originalThing，someMethod與 unsued 共享閉包范圍. 則對(duì)originalThing引用強(qiáng)制保持活動(dòng)狀態(tài)防回收.

如果在replaceThing 后面加入 originalThing = null, 則循環(huán)后不會(huì)使內(nèi)存增長(zhǎng)

內(nèi)存泄露方式2: 意外的全局變量

function foo () {
    // 意外的綁定在全局 window.bar 變量上
    bar = "global value";
}
foo();

一般來(lái)說(shuō)，盡量少用全局變量. 而多用戶函數(shù)聲明運(yùn)行創(chuàng)建一個(gè)私有的函數(shù)作用域. 局部變量會(huì)在執(zhí)行后進(jìn)行釋放. 使用 "use strict" 防止出現(xiàn)隱式定義全局變量的情況

內(nèi)存泄露方式3: 被遺忘的計(jì)時(shí)器或回調(diào)函數(shù)

  var someResource = getData();
  var interval = setInterval(function() {
    var node = document.getElementById("Node");
    if(node) {
      // Do stuff with node and someResource.
      node.innerHTML = JSON.stringify(someResource));
    } else {
      // clearInterval(interval);
    }
  }, 1000);

一旦node節(jié)點(diǎn)不存在, someResource則成為了不需要的引用，由于setInterval定時(shí)器仍然存在的關(guān)系, 則無(wú)法回收someResource的數(shù)據(jù). 解決辦法, 使用clearInterval回收定時(shí)器

內(nèi)存泄露方式4: 脫離 DOM 的引用

  var elements = {
    button: document.getElementById("button"),
    image: document.getElementById("image"),
    text: document.getElementById("text")
  };
  function doStuff() {
    image.src = "http://some.url/image";
    button.click();
    console.log(text.innerHTML);
    // Much more logic
  }
  function removeButton() {
    // The button is a direct child of body.
    document.body.removeChild(document.getElementById("button"));
    // At this point, we still have a reference to #button in the global
    // elements dictionary. In other words, the button element is still in
    // memory and cannot be collected by the GC.
  }

DOM的引用在文檔中被刪除，但是在js內(nèi)還有存在被引用, 則也不會(huì)產(chǎn)生垃圾回收。
DOM的節(jié)點(diǎn)綁定事件后如果直接刪除DOM，但事件未被刪除，這也會(huì)造成泄露。

首先要了解一下同源策略，是瀏覽器核心，基本的安全功能更。限制了一個(gè)源中的文本合伙腳本加載來(lái)自其他源的資源.
同源的意思： 同一個(gè)協(xié)議， 同一個(gè)域名， 同一個(gè)端口.

跨域方式1： 主域相同兩個(gè)子域進(jìn)行跨域. 設(shè)置 document.domain

比如: http://m.liylblog.com 與 http://www.liylblog.com
設(shè)置 http://m.liylblog.com/a.html 和 http://m.liylblog.com/b.html 的 document.domain為liylblog.com

www.html 腳本

var getDomainIframe = (function (domain, src) {
  document.domain = domain;
  var ifr = document.createElement("iframe");
  ifr.src = src;
  ifr.style.display = "none";
  document.body.appendChild(ifr);
  var promise = new Promise (function (resolve, reject) {
    ifr.onload = function () {
      ifr.onload = null;
      resolve(ifr.contentWindow);
    };
  });
  return function () {
    return promise;
  }
})("liylblog.com", "http://m.liylblog.com/public/examples/2017/cros_domain/diff_subdomain/m.html");


function getData (xhr, fn) {
  xhr.open("GET", "http://m.liylblog.com/public/examples/2017/cros_domain/diff_subdomain/m_data.json", true);
  xhr.onreadystatechange = function () {
    if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
      fn && fn(xhr.responseText);
    }
  }
  xhr.send();
}

document.querySelector("#btn").addEventListener("click", function () {
  getDomainIframe().then(function (win) {
    var xhr = new win.XMLHttpRequest();
    getData(xhr, function (data) {
      document.querySelector("#console").innerHTML = data;
    });
  });
}, false);

m.html 腳本

 document.domain = "liylblog.com";

原理：
獲取到 m.html 的window對(duì)象, 則可以利用這個(gè)window對(duì)象下的 XMLHttpRequest API對(duì) m.liylblog.com的資源進(jìn)行ajax請(qǐng)求

在線演示地址

跨域方式2： window.postMessage
HTML5新增的postMessage方法, 可以實(shí)現(xiàn)跨文檔消息傳輸， 通過(guò)綁定window.addEventListner("message") 事件來(lái)監(jiān)聽發(fā)送文檔消息傳輸內(nèi)容。

跨域方式3： proxy 服務(wù)端代理
將要請(qǐng)求的地址以參數(shù)的方式發(fā)送給同域的服務(wù)器，由服務(wù)器代理請(qǐng)求目標(biāo)地址

跨域方式4： jsonp 動(dòng)態(tài)插入腳本
利用script腳本動(dòng)態(tài)插入并執(zhí)行的特性, 將請(qǐng)求地址存放至script的src屬性中，當(dāng)onload加載完畢后執(zhí)行腳本。

跨域方式5：CORS

跨域資源共享（ CORS ）機(jī)制允許 Web 應(yīng)用服務(wù)器進(jìn)行跨域訪問(wèn)控制，從而使跨域數(shù)據(jù)傳輸?shù)靡园踩M(jìn)行。瀏覽器支持在 API 容器中（例如 XMLHttpRequest 或 Fetch ）使用 CORS，以降低跨域 HTTP 請(qǐng)求所帶來(lái)的風(fēng)險(xiǎn)。
跨域資源共享標(biāo)準(zhǔn)新增了一組 HTTP 首部字段，允許服務(wù)器聲明哪些源站有權(quán)限訪問(wèn)哪些資源。
規(guī)范要求，對(duì)那些可能對(duì)服務(wù)器數(shù)據(jù)產(chǎn)生副作用的 HTTP 請(qǐng)求方法， 進(jìn)行OPTIONS方法 預(yù)檢查請(qǐng)求（preflight request）

重繪
重繪是在一個(gè)元素的外觀被改變，但沒有改變布局的情況下發(fā)生的，如改變了visibility、outline、background等。當(dāng)repaint發(fā)生時(shí)，瀏覽器會(huì)驗(yàn)證DOM樹上所有其他節(jié)點(diǎn)的visibility屬性。

回流
當(dāng)元素改變的時(shí)候，將會(huì)影響文檔內(nèi)容或結(jié)構(gòu)，或元素位置，此過(guò)程稱為 Reflow。

什么時(shí)候會(huì)導(dǎo)致回流發(fā)生:

改變窗口大小

改變文字大小

添加/刪除樣式表

內(nèi)容的改變，(用戶在輸入框中寫入內(nèi)容也會(huì))

激活偽類，如:hover

操作class屬性

腳本操作DOM

計(jì)算offsetWidth和offsetHeight

設(shè)置style屬性

PS: 回流必定引起重繪

setTimeout 與 setInterval 主要通過(guò)定時(shí)任務(wù)的方式，執(zhí)行修改DOM UI的代碼, 從而交給UI線程進(jìn)行處理渲染. 如果前面有了任務(wù)隊(duì)列，則執(zhí)行完前面的任務(wù)隊(duì)列后再執(zhí)行動(dòng)畫任務(wù)。

requestAnimationFrame 采用系統(tǒng)時(shí)間間隔，保持最佳繪制效率，不會(huì)因?yàn)殚g隔時(shí)間過(guò)短，造成過(guò)度繪制，增加開銷；也不會(huì)因?yàn)殚g隔時(shí)間太長(zhǎng)，使用動(dòng)畫卡頓不流暢，讓各種網(wǎng)頁(yè)動(dòng)畫效果能夠有一個(gè)統(tǒng)一的刷新機(jī)制，從而節(jié)省系統(tǒng)資源，提高系統(tǒng)性能，改善視覺效果。

requestAnimationFrame 優(yōu)點(diǎn):

requestAnimationFrame會(huì)把每一幀中的所有DOM操作集中起來(lái)，在一次重繪或回流中就完成，并且重繪或回流的時(shí)間間隔緊緊跟隨瀏覽器的刷新頻率

在隱藏或不可見的元素中，requestAnimationFrame將不會(huì)進(jìn)行重繪或回流，這當(dāng)然就意味著更少的CPU、GPU和內(nèi)存使用量

requestAnimationFrame 是由瀏覽器專門為動(dòng)畫提供的API，在運(yùn)行時(shí)瀏覽器會(huì)自動(dòng)優(yōu)化方法的調(diào)用，并且如果頁(yè)面不是激活狀態(tài)下的話，動(dòng)畫會(huì)自動(dòng)暫停，有效節(jié)省了CPU開銷

請(qǐng)求過(guò)程:
- 請(qǐng)求行 HTTP版本號(hào)
- 請(qǐng)求首部 

響應(yīng)過(guò)程:
- 響應(yīng)HTTP版本號(hào) 響應(yīng)狀態(tài)碼 響應(yīng)狀態(tài)
- 響應(yīng)首部
- 響應(yīng)實(shí)體

每一個(gè)請(qǐng)求打開一個(gè)連接，請(qǐng)求結(jié)束后會(huì)關(guān)閉連接. 響應(yīng)的對(duì)象本省可以是任何類型, HTML 文件，文本文件，圖片，其它格式內(nèi)容。 通過(guò)響應(yīng)頭部Content-Type 指定。

簡(jiǎn)單的請(qǐng)求

# telnet website.org 80
> GET /rfc/rfc1945.txt HTTP/1.0
> 兩次回車

相比于HTTP1.0, HTTP1.1多了比較多的性能優(yōu)化。

持久連接

分塊編碼傳輸

字節(jié)范圍請(qǐng)求

增強(qiáng)緩存機(jī)制

傳輸編碼請(qǐng)求管道

第一次HTTP請(qǐng)求文檔成功后, 還會(huì)利用現(xiàn)有的連接發(fā)送一次請(qǐng)求獲取 favicon.png 網(wǎng)站縮略圖標(biāo). 如果任意一方想要中止連接，都可以發(fā)送 Connection: closed 關(guān)閉連接。

協(xié)議升級(jí)方式

ALPN協(xié)議(應(yīng)用層協(xié)商協(xié)議)
瀏覽器在建立TLS連接時(shí)，告訴服務(wù)器自身支持HTTP1.1和HTTP2.0協(xié)議. 服務(wù)器端得到信息后，也告訴瀏覽器自身支持HTTP2.0協(xié)議。于是將協(xié)議轉(zhuǎn)換成HTTP2.0。接下來(lái)通過(guò)HTTP2.0進(jìn)行通信。

基于HTTP的協(xié)商過(guò)程

HTTP Upgrade request
GET / HTTP/1.1
host: nghttp2.org
connection: Upgrade, HTTP2-Settings
upgrade: h2c        /*發(fā)起帶有HTTP2.0 Upgrade頭部的請(qǐng)求*/       
http2-settings: AAMAAABkAAQAAP__   /*客戶端SETTINGS凈荷*/
user-agent: nghttp2/1.9.0-DEV

HTTP Upgrade response    
HTTP/1.1 101 Switching Protocols   /*服務(wù)端同意升級(jí)到HTTP 2.0*/
Connection: Upgrade
Upgrade: h2c

HTTP Upgrade success               /*協(xié)商完成*/

幀通信

HTTP協(xié)議的緩存方式 主要分為強(qiáng)制緩存 和 協(xié)商緩存

- Pragma 1.0
- Expires
- Cache-Control

OSI七層模型

TCP/IP 協(xié)議棧

TCP（傳輸控制協(xié)議）是一種面向連接的、可靠的、基于字節(jié)流的傳輸層通信協(xié)議

面向連接

傳輸可靠

保準(zhǔn)傳輸順序

UDP(用戶數(shù)據(jù)報(bào)協(xié)議）是OSI參考模型中一種無(wú)連接的傳輸層協(xié)議，提供面向事務(wù)的簡(jiǎn)單不可靠信息傳送服務(wù)。

面向非連接

傳輸不可靠

速度非常快

HTTP，F(xiàn)TP，TELENET, SSH 屬于TCP, ping命令屬于 UDP

lsof 查找哪些端口占用的進(jìn)程

sudo lsof -i:80 查找使用80端口的進(jìn)程

lsof -u www 查找用戶www的進(jìn)程打開的文件

netstat 顯示與IP、TCP、UDP和ICMP協(xié)議相關(guān)的統(tǒng)計(jì)數(shù)據(jù)

netstat -lntp 查看開啟了哪些端口

top 查看CPU顯示狀況

top -u www 查看用戶www的的CPU 內(nèi)存使用情況

pmap 根據(jù)進(jìn)程查看內(nèi)存情況

free 可用內(nèi)存大小

free -m MB為單位

free -g GB為單位

常見排序算法

快速排序算法的時(shí)間復(fù)雜度

如何實(shí)現(xiàn)二分排序

了解 JavaScript 應(yīng)用程序中的內(nèi)存泄漏

HTTP訪問(wèn)控制（CORS）

-------------------------分割線-------------------------
問(wèn)題的答案會(huì)不定期補(bǔ)全
歡迎大家指正，能學(xué)到東西就是好的