摘要：是上一次加載資源時，服務(wù)器返回的，是對該資源的一種唯一標識，只要資源有變化，就會重新生成。同源限制如果非同源以下三種行為將受到限制和無法讀取。

Js相關(guān)執(zhí)行環(huán)節(jié)和作用域

執(zhí)行環(huán)節(jié)定義了函數(shù)或者變量可以訪問的其它數(shù)據(jù)，決定了他們各自的行為。
每個執(zhí)行環(huán)境都有一個與之關(guān)聯(lián)的變量對象，在環(huán)境中定義的所有變量和函數(shù)都保存在這個變量中，并且是我們無法訪問。
每個函數(shù)都有自己的執(zhí)行環(huán)境，當(dāng)執(zhí)行流進入一個函數(shù)的時候，就把函數(shù)的執(zhí)行環(huán)境壓入執(zhí)行環(huán)境棧，執(zhí)行完畢后，再將環(huán)境推出，把控制權(quán)交給之前的執(zhí)行環(huán)境。

當(dāng)代碼在一個環(huán)境中執(zhí)行的時候，會創(chuàng)建變量對象的作用域鏈，作用域鏈的用途是保證對執(zhí)行環(huán)境有權(quán)訪問的所有變量和函數(shù)的有序訪問。
作用域鏈的前端,始終都是當(dāng)前執(zhí)行代碼所在環(huán)境的變量對象.如果這個環(huán)境是函數(shù),則將其活動對象作為變量對象.作用域鏈中的下一個變量對象來自包含環(huán)境,最終到全局對象window.
延長作用域鏈 try catch  和 with語句.

垃圾回收機制

標記清除  (比較常用)

垃圾收集器在運行的時候會給存儲在內(nèi)存中的所有變量都加上標記,然后,他會去掉環(huán)境中的變量以及被環(huán)境中變量引用的變量的標記.
而在此之后有標記的變量將被視為準備刪除的變量.

引用計數(shù).

跟蹤記錄每個值被引用的次數(shù) ,通過引用來適當(dāng)增加他的引用次數(shù),當(dāng)引用計數(shù)為0時,表明該變量可以被清除.

typeof 操作符

undefiend/變量未定義 boolean/布爾值  string/字符串 number/數(shù)值 object對象或者null function/函數(shù) symbol/Symbol

相等(==)規(guī)則

如果有一個操作數(shù)為布爾值,則先轉(zhuǎn)為數(shù)值(false 0  true 1);

如果一個操作數(shù)為字符串,另一個為數(shù)值,將字符串轉(zhuǎn)換為數(shù)值

如果一個操作數(shù)為對象,另一個不是,調(diào)用對象的valurOf方法,用得到的原始值調(diào)用之前的規(guī)則比較;

[注意]:

null和 undefiend是相等的;

比較之前,不能見null和undefined轉(zhuǎn)換為其他任何值;

如果有一個操作數(shù)為NaN,返回false,即便兩個NaN比較也是false

如果兩個都是對象,比較是不是同一個對象,如果兩個操作數(shù)指向同一個對象,返回true.

全等(===)規(guī)則

全等比較前不會轉(zhuǎn)換操作數(shù),其他情況一樣.

瀏覽器緩存

可以分為 強緩存和協(xié)商緩存

1.強緩存：不會向服務(wù)器發(fā)送請求，直接從緩存中讀取資源，在chrome控制臺的network選項中可以看到該請求返回200的狀態(tài)碼，并且size顯示from disk cache或from memory cache；

2.協(xié)商緩存：向服務(wù)器發(fā)送請求，服務(wù)器會根據(jù)這個請求的request header的一些參數(shù)來判斷是否命中協(xié)商緩存，如果命中，則返回304狀態(tài)碼并帶上新的response header通知瀏覽器從緩存中讀取資源；

3.兩者的共同點是，都是從客戶端緩存中讀取資源；區(qū)別是強緩存不會發(fā)請求，協(xié)商緩存會發(fā)請求

強緩存

Expires：response header里的過期時間，瀏覽器再次加載資源時，如果在這個過期時間內(nèi)，則命中強緩存。

Cache-Control：當(dāng)值設(shè)為max-age=300時，則代表在這個請求正確返回時間（瀏覽器也會記錄下來）的5分鐘內(nèi)再次加載資源，就會命中強緩存。

Expires和Cache-Control:max-age=* 的作用是差不多的，區(qū)別就在于 Expires 是http1.0的產(chǎn)物，Cache-Control是http1.1的產(chǎn)物，兩者同時存在的話，Cache-Control優(yōu)先級高于Expires；在某些不支持HTTP1.1的環(huán)境下，Expires就會發(fā)揮用處。所以Expires其實是過時的產(chǎn)物，現(xiàn)階段它的存在只是一種兼容性的寫法

協(xié)商緩存

ETag和If-None-Match：這兩個要一起說。Etag是上一次加載資源時，服務(wù)器返回的response header，是對該資源的一種唯一標識，只要資源有變化，Etag就會重新生成。瀏覽器在下一次加載資源向服務(wù)器發(fā)送請求時，會將上一次返回的Etag值放到request header里的If-None-Match里，服務(wù)器接受到If-None-Match的值后，會拿來跟該資源文件的Etag值做比較，如果相同，則表示資源文件沒有發(fā)生改變，命中協(xié)商緩存。

Last-Modified和If-Modified-Since：這兩個也要一起說。Last-Modified是該資源文件最后一次更改時間，服務(wù)器會在response header里返回，同時瀏覽器會將這個值保存起來，在下一次發(fā)送請求時，放到request header里的If-Modified-Since里，服務(wù)器在接收到后也會做比對，如果相同則命中協(xié)商緩存。

區(qū)別

首先在精確度上，Etag要優(yōu)于Last-Modified。Last-Modified的時間單位是秒，如果某個文件在1秒內(nèi)改變了多次，那么他們的Last-Modified其實并沒有體現(xiàn)出來修改，但是Etag每次都會改變確保了精度；如果是負載均衡的服務(wù)器，各個服務(wù)器生成的Last-Modified也有可能不一致。

第二在性能上，Etag要遜于Last-Modified，畢竟Last-Modified只需要記錄時間，而Etag需要服務(wù)器通過算法來計算出一個hash值。

第三在優(yōu)先級上，服務(wù)器校驗優(yōu)先考慮Etag。

瀏覽器緩存過程

瀏覽器第一次加載資源，服務(wù)器返回200，瀏覽器將資源文件從服務(wù)器上請求下載下來，并把response header及該請求的返回時間一并緩存；

下一次加載資源時，先比較當(dāng)前時間和上一次返回200時的時間差，如果沒有超過cache-control設(shè)置的max-age，則沒有過期，命中強緩存，不發(fā)請求直接從本地緩存讀取該文件（如果瀏覽器不支持HTTP1.1，則用expires判斷是否過期）；如果時間過期，則向服務(wù)器發(fā)送header帶有If-None-Match和If-Modified-Since 的請求；

服務(wù)器收到請求后，優(yōu)先根據(jù)Etag的值判斷被請求的文件有沒有做修改，Etag值一致則沒有修改，命中協(xié)商緩存，返回304；如果不一致則有改動，直接返回新的資源文件帶上新的Etag值并返回 200；

如果服務(wù)器收到的請求沒有Etag值，則將If-Modified-Since和被請求文件的最后修改時間做比對，一致則命中協(xié)商緩存，返回304；不一致則返回新的last-modified和文件并返回 200；

用戶行為對瀏覽器緩存的控制

地址欄訪問，鏈接跳轉(zhuǎn)是正常用戶行為，將會觸發(fā)瀏覽器緩存機制；

F5刷新，瀏覽器會設(shè)置max-age=0，跳過強緩存判斷，會進行協(xié)商緩存判斷；

ctrl+F5刷新，跳過強緩存和協(xié)商緩存，直接從服務(wù)器拉取資源。

跨域什么是跨域

說到跨域,首先就要提到一個前端的安全概念,即瀏覽器的同源策略.
簡單來說,就是瀏覽器為了保證用戶信息的安全，防止惡意的網(wǎng)站竊取數(shù)據(jù),只允許同源的js腳本操作本頁面。
那如果我們需要在同一個頁面中請求非同源的數(shù)據(jù)怎么辦呢？這個就涉及到跨域問題了。

什么是同源

同源需要同時滿足以下三個條件：

協(xié)議相同

域名相同

端口相同

注意：父域名一樣，子域名不一樣也是非同源的。

同源限制

如果非同源,以下三種行為將受到限制:
（1） Cookie、LocalStorage 和 IndexDB 無法讀取。
（2） DOM 無法獲得。
（3） AJAX 請求不能發(fā)送。

跨域方法

JSONP

這是一種最常用也是支持度比較高的跨域方式，其原理動態(tài)插入script標簽，通過script標簽引入一個js文件，這個js文件載入成功后會執(zhí)行我們在url參數(shù)中指定的函數(shù)，并且會把我們需要的json數(shù)據(jù)作為參數(shù)傳入。

優(yōu)點是兼容性好，簡單易用，支持瀏覽器與服務(wù)器雙向通信。缺點是只支持GET請求。

CORS

服務(wù)器端對于CORS的支持，主要就是通過設(shè)置Access-Control-Allow-Origin來進行的。如果瀏覽器檢測到相應(yīng)的設(shè)置，就可以允許Ajax進行跨域的訪問。
以上兩種方式主要用來跟后臺數(shù)據(jù)交互.

通過修改document.domain來跨子域

將子域和主域的document.domain設(shè)為同一個主域.前提條件：這兩個域名必須屬于同一個基礎(chǔ)域名!而且所用的協(xié)議，端口都要一致，否則無法利用document.domain進行跨域
主域相同的使用document.domain
此方法可以用來解決跨域cookie本地存儲的跨域訪問,LocalStorage 和 IndexDB 無法通過這種方法，規(guī)避同源政策，而要使用下文介紹的PostMessage API。

使用window.name來進行跨域

window對象有個name屬性，該屬性有個特征：即在一個窗口(window)的生命周期內(nèi),窗口載入的所有的頁面都是共享一個window.name的，每個頁面對window.name都有讀寫的權(quán)限，window.name是持久存在一個窗口載入過的所有頁面中的
以上兩種主要用在 使用`iframe來實現(xiàn)頁面結(jié)構(gòu)的頁面.完成DOM之間的跨域交互.

使用HTML5中新引進的window.postMessage方法來跨域傳送數(shù)據(jù)

該方法允許跨窗口通信，不論這兩個窗口是否同源。
方法的第一個參數(shù)是具體的信息內(nèi)容，第二個參數(shù)是接收消息的窗口的源（origin），即"協(xié)議 + 域名 + 端口"。也可以設(shè)為*，表示不限制域名，向所有窗口發(fā)送。
postMessage/addEventListener 基本類似于一個全局的事件管理器.可以通過這兩個接口來發(fā)送/監(jiān)聽 事件,從而完成信息交互.

節(jié)流

不管怎么觸發(fā)，都是按照指定的間隔來執(zhí)行，同樣給個基本版。

請輸入代碼function throttle(func, wait) {
  var timer
  return function() {
    var context = this
    var args = arguments
    if (!timer) {
      timer = setTimeout(function () {
        timer = null
        func.apply(context, args)
      }, wait)
    }
  }
}

防抖

不管你觸發(fā)多少次，都等到你最后觸發(fā)后過一段你指定的時間才觸發(fā)。按照這個解釋，寫一個基本版的。

function debounce(func, wait) {
  var timer
  return function() {
    var context = this
    var args = arguments
    clearTimeout(timer)
    timer = setTimeout(function() {
      func.apply(context, args)
    }, wait)
  }
}

HTMl&Css元素水平居中

如果需要居中的元素為常規(guī)流中inline元素，為父元素設(shè)置text-align: center;即可實現(xiàn)

如果需要居中的元素為常規(guī)流中block元素，1）為元素設(shè)置寬度，2）設(shè)置左右margin為auto。3）IE6下需在父元素上設(shè)置text-align: center;,再給子元素恢復(fù)需要的值

如果需要居中的元素為浮動元素，1）為元素設(shè)置寬度，2）position: relative;，3）浮動方向偏移量（left或者right）設(shè)置為50%，4）浮動方向上的margin設(shè)置為元素寬度一半乘以-1

如果需要居中的元素為絕對定位元素，1）為元素設(shè)置寬度，2）偏移量設(shè)置為50%，3）偏移方向外邊距設(shè)置為元素寬度一半乘以-1

如果需要居中的元素為絕對定位元素，1）為元素設(shè)置寬度，2）設(shè)置左右偏移量都為0,3）設(shè)置左右外邊距都為auto

元素豎直居中

需要居中元素為單行文本，為包含文本的元素設(shè)置大于font-size的line-height：

如塊級格式化上下文

(block formatting context),
創(chuàng)建規(guī)則：

根元素（html）

浮動元素（float不是none）

絕對定位元素（position取值為absolute或fixed）

display取值為inline-block,table-cell, table-caption,flex, inline-flex之一的元素

overflow不是visible的元素

作用：

可以包含浮動元素

不被浮動元素覆蓋

阻止父子元素的margin折疊

CSS元素匹配

　　根據(jù)css rules 與dom tree 生成render tree。瀏覽器先產(chǎn)生一個元素集合，這個集合往往由最后一個部分的索引產(chǎn)生（如果沒有索引就是所有元素的集合）。
然后向上匹配，如果不符合上一個部分，就把元素從集合中刪除，直到真?zhèn)€選擇器都匹配完，還在集合中的元素就匹配這個選擇器了。

舉個例子，有選擇器：
body.ready #wrapper > .lol233
　　先把所有 class 中有 lol233 的元素拿出來組成一個集合，然后上一層，對每一個集合中的元素，如果元素的 parent id 不為 #wrapper 則把元素從集合中刪去。 再向上，從這個元素的父元素開始向上找，沒有找到一個 tagName 為 body 且 class 中有 ready 的元素，就把原來的元素從集合中刪去。至此這個選擇器匹配結(jié)束，所有還在集合中的元素滿足。

為什么從后往前匹配因為效率和文檔流的解析方向。

　　1）效率，找元素的父親和之前的兄弟比遍歷所有兒子快而且方便。

　　2）關(guān)于文檔流的解析方向，是因為現(xiàn)在的 CSS，一個元素只要確定了這個元素在文檔流之前出現(xiàn)過的所有元素，就能確定他的匹配情況。應(yīng)用在即使 html 沒有載入完成，瀏覽器也能根據(jù)已經(jīng)載入的這一部分信息完全確定出現(xiàn)過的元素的屬性。

為什么是用集合

主要也還是效率。
 基于 CSS Rule 數(shù)量遠遠小于元素數(shù)量的假設(shè)和索引的運用，遍歷每一條 CSS Rule 通過集合篩選，比遍歷每一個元素再遍歷每一條 Rule 匹配要快得多。

position四個值的區(qū)別

先看下各個屬性值的定義：

1、static：默認值。沒有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。

2、relative：生成相對定位的元素，通過top,bottom,left,right的設(shè)置相對于其正常位置進行定位。可通過z-index進行層次分級。

3、absolute：生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規(guī)定。可通過z-index進行層次分級。

4、fixed：生成絕對定位的元素，相對于瀏覽器窗口進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規(guī)定。可通過z-index進行層次分級。

static與fixed的定位方式較好理解，在此不做分析。下面對應(yīng)用的較多的relative和absolute進行分析：

1、relative。定位為relative的元素脫離正常的文本流中，但其在文本流中的位置依然存在，依然占有原來的位置，后面的元素?zé)o法向前補充。

2、absolute。定位為absolute的層脫離正常文本流，但與relative的區(qū)別是其在正常流中的位置不在存在，相當(dāng)于被提升到另一個層面去了，后面的元素會補占它的位置。

relative與absolute的主要區(qū)別：

首先，是上面已經(jīng)提到過的在正常流中的位置存在與否。

其次，relative定位的層總是相對于其最近的父元素，absolute定位的層總是相對于其最近的定義為absolute或 relative的父層，而這個父層并不一定是其直接父層。如果其父層中都未定義absolute或relative，則其將相對body進行定位。

fixed：生成絕對定位的元素，相對于瀏覽器窗口進行定位。

響應(yīng)式設(shè)計和自適應(yīng)設(shè)計

　　自適應(yīng)布局（Adaptive Layout）

　　自適應(yīng)布局（Adaptive）的特點是分別為不同的屏幕分辨率定義布局。布局切換時頁面元素發(fā)生改變，但在每個布局中，頁面元素不隨窗口大小的調(diào)整發(fā)生變化。
就是說你看到的頁面，里面元素的位置會變化而大小不會變化；你可以把自適應(yīng)布局看作是靜態(tài)布局的一個系列。

　　流式布局（Liquid Layout）

　　流式布局（Liquid）的特點（也叫"Fluid") 是頁面元素的寬度按照屏幕進行適配調(diào)整，主要的問題是如果屏幕尺度跨度太大，那么在相對其原始設(shè)計而言過小或過大的屏幕上不能正常顯示。

　　響應(yīng)式布局（Responsive Layout）

分別為不同的屏幕分辨率定義布局，同時，在每個布局中，應(yīng)用流式布局的理念，即頁面元素寬度隨著窗口調(diào)整而自動適配。

可以把響應(yīng)式布局看作是流式布局和自適應(yīng)布局設(shè)計理念的融合。

其它HTTP狀態(tài)碼及其含義

1XX  提示信息 - 表示請求已被成功接收，繼續(xù)處理

100 (繼續(xù)) 請求者應(yīng)當(dāng)繼續(xù)提出請求。 服務(wù)器返回此代碼表示已收到請求的第一部分，正在等待其余部分。
 101 (切換協(xié)議) 請求者已要求服務(wù)器切換協(xié)議，服務(wù)器已確認并準備切換。

2XX  成功 - 表示請求已被成功接收，理解，接受
 200 (成功) 服務(wù)器已成功處理了請求。 通常，這表示服務(wù)器提供了請求的網(wǎng)頁。
 201 (已創(chuàng)建) 請求成功并且服務(wù)器創(chuàng)建了新的資源。

3XX  重定向 - 要完成請求必須進行更進一步的處理
 304 (未修改) 自從上次請求后，請求的網(wǎng)頁未修改過。 服務(wù)器返回此響應(yīng)時，不會返回網(wǎng)頁內(nèi)容。

4XX  客戶端錯誤 -  請求有語法錯誤或請求無法實現(xiàn)
 400 (錯誤請求) 服務(wù)器不理解請求的語法。
 401 (未授權(quán)) 請求要求身份驗證。 對于需要登錄的網(wǎng)頁，服務(wù)器可能返回此響應(yīng)。
 403 (禁止) 服務(wù)器拒絕請求。
 404 (未找到) 服務(wù)器找不到請求的網(wǎng)頁。

5XX  服務(wù)器端錯誤 -   服務(wù)器未能實現(xiàn)合法的請求
 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é)議版本。

sessionStorage,localStorage,cookie區(qū)別

都會在瀏覽器端保存，有大小限制，同源限制

cookie會在請求時發(fā)送到服務(wù)器，作為會話標識，服務(wù)器可修改cookie；web storage不會發(fā)送到服務(wù)器

cookie有path概念，子路徑可以訪問父路徑cookie，父路徑不能訪問子路徑cookie

有效期：cookie在設(shè)置的有效期內(nèi)有效，默認為瀏覽器關(guān)閉；sessionStorage在窗口關(guān)閉前有效，localStorage長期有效，直到用戶刪除

共享：sessionStorage不能共享，localStorage在同源文檔之間共享，cookie在同源且符合path規(guī)則的文檔之間共享

localStorage的修改會促發(fā)其他文檔窗口的update事件

cookie有secure屬性要求HTTPS傳輸

瀏覽器不能保存超過300個cookie，單個服務(wù)器不能超過20個，每個cookie不能超過4k。web storage大小支持能達到5M

網(wǎng)站優(yōu)化

content方面

減少HTTP請求：合并文件、CSS精靈、inline Image

減少DNS查詢：DNS查詢完成之前瀏覽器不能從這個主機下載任何任何文件。方法：DNS緩存、將資源分布到恰當(dāng)數(shù)量的主機名，平衡并行下載和DNS查詢

避免重定向：多余的中間訪問

使Ajax可緩存

非必須組件延遲加載

未來所需組件預(yù)加載

減少DOM元素數(shù)量

將資源放到不同的域下：瀏覽器同時從一個域下載資源的數(shù)目有限，增加域可以提高并行下載量

減少iframe數(shù)量

不要404

Server方面

使用CDN

添加Expires或者Cache-Control響應(yīng)頭

對組件使用Gzip壓縮

配置ETag

Flush Buffer Early

Ajax使用GET進行請求

避免空src的img標簽

Cookie方面

減小cookie大小

引入資源的域名不要包含cookie

css方面

將樣式表放到頁面頂部

不使用CSS表達式

使用不使用@import

不使用IE的Filter

Javascript方面

將腳本放到頁面底部

將javascript和css從外部引入

壓縮javascript和css

刪除不需要的腳本

減少DOM訪問

合理設(shè)計事件監(jiān)聽器

圖片方面

優(yōu)化圖片：根據(jù)實際顏色需要選擇色深、壓縮

優(yōu)化css精靈

不要在HTML中拉伸圖片

保證favicon.ico小并且可緩存

移動方面

保證組件小于25k

Pack Components into a Multipart Document

文件合并， 減少調(diào)用其他頁面、文件的數(shù)量。

文件最小化/文件壓縮

即將需要傳輸?shù)膬?nèi)容壓縮后傳輸?shù)娇蛻舳嗽俳鈮海@樣在網(wǎng)絡(luò)上傳輸?shù)?數(shù)據(jù)量就會大幅減小。通常在服務(wù)器上的Apache、Nginx可以直接開啟這個設(shè)置，也可以從代碼角度直接設(shè)置傳輸文件頭，增加gzip的設(shè)置，也可以 從 負載均衡設(shè)備直接設(shè)置。不過需要留意的是，這個設(shè)置會略微增加服務(wù)器的負擔(dān)。建議服務(wù)器性能不是很好的網(wǎng)站，要慎重考慮。

使用 CDN 托管

CDN的全稱是Content Delivery Network，即內(nèi)容分發(fā)網(wǎng)絡(luò)。其基本思路是盡可能避開互聯(lián)網(wǎng)上有可能影響數(shù)據(jù)傳輸速度和穩(wěn)定性的瓶頸和環(huán)節(jié)，使內(nèi)容傳輸?shù)母臁⒏€(wěn)定。其目的是使用戶可就近取得所需內(nèi)容，解決 Internet網(wǎng)絡(luò)擁擠的狀況，提高用戶訪問網(wǎng)站的響應(yīng)速度。

緩存的使用

Ajax調(diào)用都采用緩存調(diào)用方式，一般采用附加特征參數(shù)方式實現(xiàn)，注意其中的