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

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

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

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

垃圾回收機(jī)制

標(biāo)記清除  (比較常用)

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

引用計(jì)數(shù).

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

typeof 操作符

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

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

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

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

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

[注意]:

null和 undefiend是相等的;

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

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

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

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

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

瀏覽器緩存

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

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

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

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

強(qiáng)緩存

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

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

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

協(xié)商緩存

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

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

區(qū)別

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

第二在性能上，Etag要遜于Last-Modified，畢竟Last-Modified只需要記錄時(shí)間，而Etag需要服務(wù)器通過(guò)算法來(lái)計(jì)算出一個(gè)hash值。

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

瀏覽器緩存過(guò)程

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

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

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

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

用戶行為對(duì)瀏覽器緩存的控制

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

F5刷新，瀏覽器會(huì)設(shè)置max-age=0，跳過(guò)強(qiáng)緩存判斷，會(huì)進(jìn)行協(xié)商緩存判斷；

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

跨域什么是跨域

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

什么是同源

同源需要同時(shí)滿足以下三個(gè)條件：

協(xié)議相同

域名相同

端口相同

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

同源限制

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

跨域方法

JSONP

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

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

CORS

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

通過(guò)修改document.domain來(lái)跨子域

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

使用window.name來(lái)進(jìn)行跨域

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

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

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

節(jié)流

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

請(qǐng)輸入代碼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ā)后過(guò)一段你指定的時(shí)間才觸發(fā)。按照這個(gè)解釋，寫(xiě)一個(gè)基本版的。

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;即可實(shí)現(xiàn)

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

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

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

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

元素豎直居中

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

如塊級(jí)格式化上下文

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

根元素（html）

浮動(dòng)元素（float不是none）

絕對(duì)定位元素（position取值為absolute或fixed）

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

overflow不是visible的元素

作用：

可以包含浮動(dòng)元素

不被浮動(dòng)元素覆蓋

阻止父子元素的margin折疊

CSS元素匹配

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

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

為什么從后往前匹配因?yàn)樾屎臀臋n流的解析方向。

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

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

為什么是用集合

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

position四個(gè)值的區(qū)別

先看下各個(gè)屬性值的定義：

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

2、relative：生成相對(duì)定位的元素，通過(guò)top,bottom,left,right的設(shè)置相對(duì)于其正常位置進(jìn)行定位?？赏ㄟ^(guò)z-index進(jìn)行層次分級(jí)。

3、absolute：生成絕對(duì)定位的元素，相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位。元素的位置通過(guò) "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定?？赏ㄟ^(guò)z-index進(jìn)行層次分級(jí)。

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

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

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

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

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

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

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

fixed：生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位。

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

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

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

　　流式布局（Liquid Layout）

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

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

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

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

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

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

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

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

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

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

5XX  服務(wù)器端錯(cuò)誤 -   服務(wù)器未能實(shí)現(xiàn)合法的請(qǐng)求
 500 (服務(wù)器內(nèi)部錯(cuò)誤) 服務(wù)器遇到錯(cuò)誤，無(wú)法完成請(qǐng)求。
 501 (尚未實(shí)施) 服務(wù)器不具備完成請(qǐng)求的功能。 例如，服務(wù)器無(wú)法識(shí)別請(qǐng)求方法時(shí)可能會(huì)返回此代碼。
 502 (錯(cuò)誤網(wǎng)關(guān)) 服務(wù)器作為網(wǎng)關(guān)或代理，從上游服務(wù)器收到無(wú)效響應(yīng)。
 503 (服務(wù)不可用) 服務(wù)器目前無(wú)法使用(由于超載或停機(jī)維護(hù))。 通常，這只是暫時(shí)狀態(tài)。
 504 (網(wǎng)關(guān)超時(shí)) 服務(wù)器作為網(wǎng)關(guān)或代理，但是沒(méi)有及時(shí)從上游服務(wù)器收到請(qǐng)求。
 505 (HTTP 版本不受支持) 服務(wù)器不支持請(qǐng)求中所用的 HTTP 協(xié)議版本。

sessionStorage,localStorage,cookie區(qū)別

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

cookie會(huì)在請(qǐng)求時(shí)發(fā)送到服務(wù)器，作為會(huì)話標(biāo)識(shí)，服務(wù)器可修改cookie；web storage不會(huì)發(fā)送到服務(wù)器

cookie有path概念，子路徑可以訪問(wèn)父路徑cookie，父路徑不能訪問(wèn)子路徑cookie

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

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

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

cookie有secure屬性要求HTTPS傳輸

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

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

content方面

減少HTTP請(qǐng)求：合并文件、CSS精靈、inline Image

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

避免重定向：多余的中間訪問(wèn)

使Ajax可緩存

非必須組件延遲加載

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

減少DOM元素?cái)?shù)量

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

減少iframe數(shù)量

不要404

Server方面

使用CDN

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

對(duì)組件使用Gzip壓縮

配置ETag

Flush Buffer Early

Ajax使用GET進(jìn)行請(qǐng)求

避免空src的img標(biāo)簽

Cookie方面

減小cookie大小

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

css方面

將樣式表放到頁(yè)面頂部

不使用CSS表達(dá)式

使用不使用@import

不使用IE的Filter

Javascript方面

將腳本放到頁(yè)面底部

將javascript和css從外部引入

壓縮javascript和css

刪除不需要的腳本

減少DOM訪問(wèn)

合理設(shè)計(jì)事件監(jiān)聽(tīng)器

圖片方面

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

優(yōu)化css精靈

不要在HTML中拉伸圖片

保證favicon.ico小并且可緩存

移動(dòng)方面

保證組件小于25k

Pack Components into a Multipart Document

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

文件最小化/文件壓縮

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

使用 CDN 托管

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

緩存的使用

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