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

Js相關執行環節和作用域

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

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

垃圾回收機制

標記清除  (比較常用)

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

引用計數.

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

typeof 操作符

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

相等(==)規則

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

如果一個操作數為字符串,另一個為數值,將字符串轉換為數值

如果一個操作數為對象,另一個不是,調用對象的valurOf方法,用得到的原始值調用之前的規則比較;

[注意]:

null和 undefiend是相等的;

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

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

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

全等(===)規則

全等比較前不會轉換操作數,其他情況一樣.

瀏覽器緩存

可以分為 強緩存和協商緩存

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

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

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

強緩存

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

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

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

協商緩存

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

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

區別

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

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

第三在優先級上，服務器校驗優先考慮Etag。

瀏覽器緩存過程

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

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

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

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

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

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

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

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

跨域什么是跨域

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

什么是同源

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

協議相同

域名相同

端口相同

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

同源限制

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

跨域方法

JSONP

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

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

CORS

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

通過修改document.domain來跨子域

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

使用window.name來進行跨域

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

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

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

節流

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

請輸入代碼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)
    }
  }
}

防抖

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

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元素水平居中

如果需要居中的元素為常規流中inline元素，為父元素設置text-align: center;即可實現

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

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

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

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

元素豎直居中

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

如塊級格式化上下文

(block formatting context),
創建規則：

根元素（html）

浮動元素（float不是none）

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

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

overflow不是visible的元素

作用：

可以包含浮動元素

不被浮動元素覆蓋

阻止父子元素的margin折疊

CSS元素匹配

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

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

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

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

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

為什么是用集合

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

position四個值的區別

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

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

2、relative：生成相對定位的元素，通過top,bottom,left,right的設置相對于其正常位置進行定位?？赏ㄟ^z-index進行層次分級。

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

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

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

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

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

relative與absolute的主要區別：

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

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

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

響應式設計和自適應設計

　　自適應布局（Adaptive Layout）

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

　　流式布局（Liquid Layout）

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

　　響應式布局（Responsive Layout）

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

可以把響應式布局看作是流式布局和自適應布局設計理念的融合。

其它HTTP狀態碼及其含義

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

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

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

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

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

5XX  服務器端錯誤 -   服務器未能實現合法的請求
 500 (服務器內部錯誤) 服務器遇到錯誤，無法完成請求。
 501 (尚未實施) 服務器不具備完成請求的功能。 例如，服務器無法識別請求方法時可能會返回此代碼。
 502 (錯誤網關) 服務器作為網關或代理，從上游服務器收到無效響應。
 503 (服務不可用) 服務器目前無法使用(由于超載或停機維護)。 通常，這只是暫時狀態。
 504 (網關超時) 服務器作為網關或代理，但是沒有及時從上游服務器收到請求。
 505 (HTTP 版本不受支持) 服務器不支持請求中所用的 HTTP 協議版本。

sessionStorage,localStorage,cookie區別

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

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

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

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

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

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

cookie有secure屬性要求HTTPS傳輸

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

網站優化

content方面

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

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

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

使Ajax可緩存

非必須組件延遲加載

未來所需組件預加載

減少DOM元素數量

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

減少iframe數量

不要404

Server方面

使用CDN

添加Expires或者Cache-Control響應頭

對組件使用Gzip壓縮

配置ETag

Flush Buffer Early

Ajax使用GET進行請求

避免空src的img標簽

Cookie方面

減小cookie大小

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

css方面

將樣式表放到頁面頂部

不使用CSS表達式

使用不使用@import

不使用IE的Filter

Javascript方面

將腳本放到頁面底部

將javascript和css從外部引入

壓縮javascript和css

刪除不需要的腳本

減少DOM訪問

合理設計事件監聽器

圖片方面

優化圖片：根據實際顏色需要選擇色深、壓縮

優化css精靈

不要在HTML中拉伸圖片

保證favicon.ico小并且可緩存

移動方面

保證組件小于25k

Pack Components into a Multipart Document

文件合并， 減少調用其他頁面、文件的數量。

文件最小化/文件壓縮

即將需要傳輸的內容壓縮后傳輸到客戶端再解壓，這樣在網絡上傳輸的 數據量就會大幅減小。通常在服務器上的Apache、Nginx可以直接開啟這個設置，也可以從代碼角度直接設置傳輸文件頭，增加gzip的設置，也可以 從 負載均衡設備直接設置。不過需要留意的是，這個設置會略微增加服務器的負擔。建議服務器性能不是很好的網站，要慎重考慮。

使用 CDN 托管

CDN的全稱是Content Delivery Network，即內容分發網絡。其基本思路是盡可能避開互聯網上有可能影響數據傳輸速度和穩定性的瓶頸和環節，使內容傳輸的更快、更穩定。其目的是使用戶可就近取得所需內容，解決 Internet網絡擁擠的狀況，提高用戶訪問網站的響應速度。

緩存的使用

Ajax調用都采用緩存調用方式，一般采用附加特征參數方式實現，注意其中的