摘要：介紹以及它的狀態碼是一個它為客戶端提供了在客戶端和服務器之間傳輸數據的功能。的節點綁定事件后如果直接刪除，但事件未被刪除，這也會造成泄露。回流當元素改變的時候，將會影響文檔內容或結構，或元素位置，此過程稱為。通過響應頭部指定。

XMLHttpRequest 是一個API, 它為客戶端提供了在客戶端和服務器之間傳輸數據的功能。它提供了一個通過 URL 來獲取數據的簡單方式，并且不會使整個頁面刷新。

readyState屬性, 共有以下5種狀態

需要提到作用域，作用域分全局作用域和局部作用域，外部變量屬于全局作用域，函數內部變量屬于局部作用域。 函數作用域是定義時確定的。 內部函數可以訪問外部函數的變量, 參數， 其它函數聲明。 如果這個內部函數允許在包含的這個函數外被調用，就會形成一個閉包。

利用閉包生成一個自增id函數

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

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

下面是一個簡單的例子 在線測試

var createClouse = function () {
    var args = [].slice.call(arguments, 0);
    return {
      // 保存了對 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的引用不存在, 則該對象被標記為回收狀態
clouse = null;

采用 Mark-and-sweep（標記掃描）算法

創建"根"列表， 保存引用的全局變量。 在瀏覽器中, window 對象總是存在的， window對象下的對象變量總是存在，所以不會被標記回收。

從“根”可到達的一切子節點不會被標記回收。

所有未被標記為活動的內存塊都可以被標記，交由垃圾回收器進行回收。

要了解如何預防內存泄漏，需要了解對象的基本生命周期。對象生命周期, JS為引用類型分配適當的內存, 從分配的開始起垃圾回收器會不斷對該對象進行評估，檢查是否屬于有效的對象。
垃圾回收器定期掃描對象， 會將引用數量為0或將對象唯一引用是循環到對象進行回收。

內存泄露方式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");
      }
    };
    // 顯示標記釋放內存
    // originalThing = null;
  };
  setInterval(replaceThing, 1000);

如果一直執行的話，可以在chrome工具欄 memory下給 Heap 拍幾張快照，會發現內存會每隔1s鐘不斷增加

原因在于theThing 的 someMethod 與 unused 都為同一個父作用域, unused 引用了originalThing，someMethod與 unsued 共享閉包范圍. 則對originalThing引用強制保持活動狀態防回收.

如果在replaceThing 后面加入 originalThing = null, 則循環后不會使內存增長

內存泄露方式2: 意外的全局變量

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

一般來說，盡量少用全局變量. 而多用戶函數聲明運行創建一個私有的函數作用域. 局部變量會在執行后進行釋放. 使用 "use strict" 防止出現隱式定義全局變量的情況

內存泄露方式3: 被遺忘的計時器或回調函數

  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節點不存在, someResource則成為了不需要的引用，由于setInterval定時器仍然存在的關系, 則無法回收someResource的數據. 解決辦法, 使用clearInterval回收定時器

內存泄露方式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內還有存在被引用, 則也不會產生垃圾回收。
DOM的節點綁定事件后如果直接刪除DOM，但事件未被刪除，這也會造成泄露。

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

跨域方式1： 主域相同兩個子域進行跨域. 設置 document.domain

比如: http://m.liylblog.com 與 http://www.liylblog.com
設置 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對象, 則可以利用這個window對象下的 XMLHttpRequest API對 m.liylblog.com的資源進行ajax請求

在線演示地址

跨域方式2： window.postMessage
HTML5新增的postMessage方法, 可以實現跨文檔消息傳輸， 通過綁定window.addEventListner("message") 事件來監聽發送文檔消息傳輸內容。

跨域方式3： proxy 服務端代理
將要請求的地址以參數的方式發送給同域的服務器，由服務器代理請求目標地址

跨域方式4： jsonp 動態插入腳本
利用script腳本動態插入并執行的特性, 將請求地址存放至script的src屬性中，當onload加載完畢后執行腳本。

跨域方式5：CORS

跨域資源共享（ CORS ）機制允許 Web 應用服務器進行跨域訪問控制，從而使跨域數據傳輸得以安全進行。瀏覽器支持在 API 容器中（例如 XMLHttpRequest 或 Fetch ）使用 CORS，以降低跨域 HTTP 請求所帶來的風險。
跨域資源共享標準新增了一組 HTTP 首部字段，允許服務器聲明哪些源站有權限訪問哪些資源。
規范要求，對那些可能對服務器數據產生副作用的 HTTP 請求方法， 進行OPTIONS方法 預檢查請求（preflight request）

重繪
重繪是在一個元素的外觀被改變，但沒有改變布局的情況下發生的，如改變了visibility、outline、background等。當repaint發生時，瀏覽器會驗證DOM樹上所有其他節點的visibility屬性。

回流
當元素改變的時候，將會影響文檔內容或結構，或元素位置，此過程稱為 Reflow。

什么時候會導致回流發生:

改變窗口大小

改變文字大小

添加/刪除樣式表

內容的改變，(用戶在輸入框中寫入內容也會)

激活偽類，如:hover

操作class屬性

腳本操作DOM

計算offsetWidth和offsetHeight

設置style屬性

PS: 回流必定引起重繪

setTimeout 與 setInterval 主要通過定時任務的方式，執行修改DOM UI的代碼, 從而交給UI線程進行處理渲染. 如果前面有了任務隊列，則執行完前面的任務隊列后再執行動畫任務。

requestAnimationFrame 采用系統時間間隔，保持最佳繪制效率，不會因為間隔時間過短，造成過度繪制，增加開銷；也不會因為間隔時間太長，使用動畫卡頓不流暢，讓各種網頁動畫效果能夠有一個統一的刷新機制，從而節省系統資源，提高系統性能，改善視覺效果。

requestAnimationFrame 優點:

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

在隱藏或不可見的元素中，requestAnimationFrame將不會進行重繪或回流，這當然就意味著更少的CPU、GPU和內存使用量

requestAnimationFrame 是由瀏覽器專門為動畫提供的API，在運行時瀏覽器會自動優化方法的調用，并且如果頁面不是激活狀態下的話，動畫會自動暫停，有效節省了CPU開銷

請求過程:
- 請求行 HTTP版本號
- 請求首部 

響應過程:
- 響應HTTP版本號 響應狀態碼 響應狀態
- 響應首部
- 響應實體

每一個請求打開一個連接，請求結束后會關閉連接. 響應的對象本省可以是任何類型, HTML 文件，文本文件，圖片，其它格式內容。 通過響應頭部Content-Type 指定。

簡單的請求

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

相比于HTTP1.0, HTTP1.1多了比較多的性能優化。

持久連接

分塊編碼傳輸

字節范圍請求

增強緩存機制

傳輸編碼請求管道

第一次HTTP請求文檔成功后, 還會利用現有的連接發送一次請求獲取 favicon.png 網站縮略圖標. 如果任意一方想要中止連接，都可以發送 Connection: closed 關閉連接。

協議升級方式

ALPN協議(應用層協商協議)
瀏覽器在建立TLS連接時，告訴服務器自身支持HTTP1.1和HTTP2.0協議. 服務器端得到信息后，也告訴瀏覽器自身支持HTTP2.0協議。于是將協議轉換成HTTP2.0。接下來通過HTTP2.0進行通信。

基于HTTP的協商過程

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

HTTP Upgrade response    
HTTP/1.1 101 Switching Protocols   /*服務端同意升級到HTTP 2.0*/
Connection: Upgrade
Upgrade: h2c

HTTP Upgrade success               /*協商完成*/

幀通信

HTTP協議的緩存方式 主要分為強制緩存 和 協商緩存

- Pragma 1.0
- Expires
- Cache-Control

OSI七層模型

TCP/IP 協議棧

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

面向連接

傳輸可靠

保準傳輸順序

UDP(用戶數據報協議）是OSI參考模型中一種無連接的傳輸層協議，提供面向事務的簡單不可靠信息傳送服務。

面向非連接

傳輸不可靠

速度非?？?/p>

HTTP，FTP，TELENET, SSH 屬于TCP, ping命令屬于 UDP

lsof 查找哪些端口占用的進程

sudo lsof -i:80 查找使用80端口的進程

lsof -u www 查找用戶www的進程打開的文件

netstat 顯示與IP、TCP、UDP和ICMP協議相關的統計數據

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

top 查看CPU顯示狀況

top -u www 查看用戶www的的CPU 內存使用情況

pmap 根據進程查看內存情況

free 可用內存大小

free -m MB為單位

free -g GB為單位

常見排序算法

快速排序算法的時間復雜度

如何實現二分排序

了解 JavaScript 應用程序中的內存泄漏

HTTP訪問控制（CORS）

-------------------------分割線-------------------------
問題的答案會不定期補全
歡迎大家指正，能學到東西就是好的