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

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

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

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

利用閉包生成一個自增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ù)后返回的對象或函數(shù)擁有對外部函數(shù)的變量，參數(shù)和函數(shù)聲明具有訪問權(quán)。因此，在js的回收機制上，是會被標記這些變量，參數(shù)，函數(shù)聲明引用（在定義時確定哪些變量會被添加標記），在定時回收的時候不會考慮將這些占用的內(nèi)存回收。如果我們將返回的對象或函數(shù)設(shè)置為null, 那么就失去了對內(nèi)部變量的控制，就會被回收。

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

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的引用不存在, 則該對象被標記為回收狀態(tài)
clouse = null;

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

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

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

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

要了解如何預(yù)防內(nèi)存泄漏，需要了解對象的基本生命周期。對象生命周期, JS為引用類型分配適當(dāng)?shù)膬?nèi)存, 從分配的開始起垃圾回收器會不斷對該對象進行評估，檢查是否屬于有效的對象。
垃圾回收器定期掃描對象， 會將引用數(shù)量為0或?qū)ο笪ㄒ灰檬茄h(huá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");
      }
    };
    // 顯示標記釋放內(nèi)存
    // originalThing = null;
  };
  setInterval(replaceThing, 1000);

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

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

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

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

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

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

內(nèi)存泄露方式3: 被遺忘的計時器或回調(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é)點不存在, someResource則成為了不需要的引用，由于setInterval定時器仍然存在的關(guān)系, 則無法回收someResource的數(shù)據(jù). 解決辦法, 使用clearInterval回收定時器

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

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

跨域方式1： 主域相同兩個子域進行跨域. 設(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對象, 則可以利用這個window對象下的 XMLHttpRequest API對 m.liylblog.com的資源進行ajax請求

在線演示地址

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

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

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

跨域方式5：CORS

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

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

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

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

改變窗口大小

改變文字大小

添加/刪除樣式表

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

激活偽類，如:hover

操作class屬性

腳本操作DOM

計算offsetWidth和offsetHeight

設(shè)置style屬性

PS: 回流必定引起重繪

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

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

requestAnimationFrame 優(yōu)點:

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

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

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

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

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

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

簡單的請求

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

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

持久連接

分塊編碼傳輸

字節(jié)范圍請求

增強緩存機制

傳輸編碼請求管道

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

協(xié)議升級方式

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

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

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

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

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

幀通信

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

- Pragma 1.0
- Expires
- Cache-Control

OSI七層模型

TCP/IP 協(xié)議棧

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

面向連接

傳輸可靠

保準傳輸順序

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

面向非連接

傳輸不可靠

速度非?？?/p>

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

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

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

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

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

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

top 查看CPU顯示狀況

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

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

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

free -m MB為單位

free -g GB為單位

常見排序算法

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

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

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

HTTP訪問控制（CORS）

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