Canvas和SVG
Canvas 通過(guò)Javascript 來(lái)繪制 2D 圖形护蝶。Canvas 是逐像素進(jìn)行渲染的华烟。在 Canvas 中，一旦圖形被繪制完成持灰，它就不會(huì)繼續(xù)得到瀏覽器的關(guān)注盔夜。如果其位置發(fā)生變化，那么整個(gè)場(chǎng)景也需要重新繪制堤魁，包括任何或許已被圖形覆蓋的對(duì)象喂链。
SVG 是一種使用 XML 描述 2D 圖形的語(yǔ)言。SVG 基于 XML妥泉，這意味著 SVG DOM 中的每個(gè)元素都是可用的椭微。你可以為某個(gè)元素附加 JavaScript 事件處理器。在 SVG 中涛漂，每個(gè)被繪制的圖形均被視為對(duì)象赏表。如果 SVG 對(duì)象的屬性發(fā)生變化，那么瀏覽器能夠自動(dòng)重現(xiàn)圖形匈仗。
Canvas和SVG相比瓢剿，canvas更依賴于分辨率，不支持事件處理器悠轩，文本渲染能力弱间狂，比較適合密集型游戲，其中的許多對(duì)象會(huì)被頻繁繪制火架，而svg則比較適用于類似谷歌地圖帶有大型渲染區(qū)域的應(yīng)用程序鉴象。
瀏覽器緩存機(jī)制
瀏覽器緩存機(jī)制是指通過(guò) HTTP 協(xié)議頭里的 Cache-Control（或 Expires）和 Last-Modified（或 Etag）等字段來(lái)控制文件緩存的機(jī)制忙菠。
Cache-Control 用于控制文件在本地緩存有效時(shí)長(zhǎng)。最常見(jiàn)的纺弊，比如服務(wù)器回包：Cache-Control:max-age=600 表示文件在本地應(yīng)該緩存牛欢，且有效時(shí)長(zhǎng)是600秒（從發(fā)出請(qǐng)求算起）。在接下來(lái)600秒內(nèi)淆游，如果有請(qǐng)求這個(gè)資源傍睹，瀏覽器不會(huì)發(fā)出 HTTP 請(qǐng)求，而是直接使用本地緩存的文件犹菱。
Last-Modified 是標(biāo)識(shí)文件在服務(wù)器上的最新更新時(shí)間拾稳。下次請(qǐng)求時(shí)，如果文件緩存過(guò)期腊脱，瀏覽器通過(guò) If-Modified-Since 字段帶上這個(gè)時(shí)間访得，發(fā)送給服務(wù)器，由服務(wù)器比較時(shí)間戳來(lái)判斷文件是否有修改陕凹。如果沒(méi)有修改悍抑，服務(wù)器返回304告訴瀏覽器繼續(xù)使用緩存；如果有修改杜耙，則返回200传趾，同時(shí)返回最新的文件。
Cache-Control 通常與 Last-Modified 一起使用泥技。一個(gè)用于控制緩存有效時(shí)間眉菱，一個(gè)在緩存失效后看成，向服務(wù)查詢是否有更新光羞。
Cache-Control 還有一個(gè)同功能的字段：Expires碗降。Expires 的值一個(gè)絕對(duì)的時(shí)間點(diǎn)啤誊，如：Expires: Thu, 10 Nov 2015 08:45:11 GMT饺窿，表示在這個(gè)時(shí)間點(diǎn)之前鲫咽，緩存都是有效的姨伤。
Expires 是 HTTP1.0 標(biāo)準(zhǔn)中的字段劫恒，Cache-Control 是 HTTP1.1 標(biāo)準(zhǔn)中新加的字段贩幻，功能一樣，都是控制緩存的有效時(shí)間两嘴。當(dāng)這兩個(gè)字段同時(shí)出現(xiàn)時(shí)丛楚，Cache-Control 是高優(yōu)化級(jí)的。
Etag 也是和 Last-Modified 一樣憔辫，對(duì)文件進(jìn)行標(biāo)識(shí)的字段趣些。不同的是，Etag 的取值是一個(gè)對(duì)文件進(jìn)行標(biāo)識(shí)的特征字串贰您。在向服務(wù)器查詢文件是否有更新時(shí)坏平，瀏覽器通過(guò) If-None-Match 字段把特征字串發(fā)送給服務(wù)器拢操，由服務(wù)器和文件最新特征字串進(jìn)行匹配，來(lái)判斷文件是否有更新舶替。沒(méi)有更新回包304令境，有更新回包200。Etag 和 Last-Modified 可根據(jù)需求使用一個(gè)或兩個(gè)同時(shí)使用顾瞪。兩個(gè)同時(shí)使用時(shí)舔庶，只要滿足基中一個(gè)條件，就認(rèn)為文件沒(méi)有更新玲昧。
另外有兩種特殊的情況：
手動(dòng)刷新頁(yè)面（F5)栖茉，瀏覽器會(huì)直接認(rèn)為緩存已經(jīng)過(guò)期（可能緩存還沒(méi)有過(guò)期），在請(qǐng)求中加上字段：Cache-Control:max-age=0孵延，發(fā)包向服務(wù)器查詢是否有文件是否有更新吕漂。
強(qiáng)制刷新頁(yè)面（Ctrl+F5)，瀏覽器會(huì)直接忽略本地的緩存（有緩存也會(huì)認(rèn)為本地沒(méi)有緩存）尘应，在請(qǐng)求中加上字段：Cache-Control:no-cache（或 Pragma:no-cache）惶凝，發(fā)包向服務(wù)重新拉取文件。
在所有瀏覽器中犬钢，任何cookie大小超過(guò)限制都被忽略苍鲜，且永遠(yuǎn)不會(huì)被設(shè)置。
html5提供了兩種在客戶端存儲(chǔ)數(shù)據(jù)的新方法：localStorage 和 sessionStorage, 它們都是以key/value 的形式來(lái)存儲(chǔ)數(shù)據(jù)玷犹，前者是永久存儲(chǔ)混滔，后者的存儲(chǔ)期限僅限于瀏覽器會(huì)話(session),即當(dāng)瀏覽器窗口關(guān)閉后，sessionStorage中的數(shù)據(jù)被清除歹颓。
localStorage的存儲(chǔ)空間大約5M左右(不同瀏覽器可能不同坯屿，分 HOST)，這個(gè)相當(dāng)于一個(gè)5M大小的前端頁(yè)面的數(shù)據(jù)庫(kù)巍扛，相比于cookie可以節(jié)約帶寬领跛，但localStorage在瀏覽器隱私模式下是不可讀取的，當(dāng)存儲(chǔ)數(shù)據(jù)超過(guò)了localStorage的存儲(chǔ)空間后會(huì)拋出異常撤奸。
