前端知識小遊戲

小遊戲

今天有意思，玩上了與瀏覽器相關的小遊戲。先附上連接http://game.cyqdata.com/

先是第一關：

 

一上來就是空白頁連個連接都沒有，惟點擊開始有一個提示框。打開控制檯發現超連接的onclick()並無實現跳轉功能

因此只須要將a標籤修改成onclik="gotoUrl()"

---

 第二關

:

答案可是毫無疑問是2，再聰明點多是3，那麼問題來了哪裏去輸入2？再次打開控制檯。發現有一個隱藏input。

此時發現有個奇奇怪怪的value="5LqM6L+b5Yi2Lmh0bWw="。幸好以前有學到這個編碼方式，Base64編碼。經過Base64在線編碼器解碼獲得二進制.html；好的第二個頁面出來了。

？？？？什麼東西？？？？按道理不該該是這樣的。冷靜想一想，二進制指的會不會是要2的二進制10，因而嘗試了10.html

？？非法？難不成我沒有辦理護照？想了好久，非法入境，設置了權限？而後找了好久的答案。並無結果，若是服務器端設置了權限，那麼我就根本沒法繼續下去，因而換了一個角度思考，會不會缺乏了參數。因而我在控制檯不停的刷新數據，都是一篇空白。而後查看了好久響應內容，都是一堆亂碼，然而並無關係，重要的是我發現了進入這個頁面須要一個參數"？t=1"。因此在路徑中須要有加上這一字符串就行了。

 

---

第三關：

 

so easy？不要被騙了。打開控制檯看到一下內容

 

 這是什麼？？？因而糾結開始了。這特麼是什麼鬼？難道我要去解釋這些編碼？

因而開始了個人解碼之旅。在dom選項窗口中發現了對我編碼彷佛頗有用的東西。

因而我在想，會不會是一串$符號對應一個字符？而後我就去解釋這些$符號，發現這個不可行，這串編碼自己就是爲了避免給其餘人看出來而設置的編碼，我單獨去解釋也不必定解釋的出來，固然不是不能夠，只是須要花點時間。陷入沉思。最後在表哥的幫助下，提示，瀏覽器自己有許多能夠存放消息的地方，要去了解瀏覽器的機制，是如何接受消息，如何存放文件的，因而靈光以上，在瀏覽器中存放數據機制中，最多見的就是cookie，果不其然就是存在這裏。一樣的base64解碼就能夠得到一個界面了。

---

總結一下，那麼做爲一個走向前端的編程人員，瀏覽器是必需要熟悉瞭解的工具，由於咱們所作的一塊兒頁面都必須在瀏覽器中顯示。

 

瀏覽器緩存說明

 1、http緩存

http緩存是基於HTTP協議的瀏覽器文件級緩存機制。即針對文件的重複請求狀況下，瀏覽器能夠根據協議頭判斷從服務器端請求文件仍是從本地讀取文件，chrome控制檯下的Frames即展現的是瀏覽器的http文件級緩存。如下是瀏覽器緩存的整個機制流程。主要是針對重複的http請求，在有緩存的狀況下判斷過程主要分3步：

◆判斷expires，若是未過時，直接讀取http緩存文件，不發http請求，不然進入下一步。

◆判斷是否含有etag，有則帶上if-none-match發送請求，未修改返回304，修改返回200，不然進入下一步。

◆判斷是否含有last-modified，有則帶上if-modified-since發送請求，無效返回200，有效返回304，不然直接向服務器請求。 

 

若是經過etag和last-modified判斷，即便返回304有至少有一次http請求，只不過返回的是304的返回內容，而不是文件內容。因此合理設計實現expires參數能夠減小較多的瀏覽器請求。

2、websql

websql這種方式只有較新的chrome瀏覽器支持，並以一個獨立規範形式出現，主要有如下特色：

◆Web Sql 數據庫API 實際上不是HTML5規範的組成部分;

◆在HTML5以前就已經存在了，是單獨的規範;

◆它是將數據以數據庫的形式存儲在客戶端，根據需求去讀取;

◆跟Storage的區別是： Storage和Cookie都是以鍵值對的形式存在的;

◆Web Sql 更方便於檢索，容許sql語句查詢;

◆讓瀏覽器實現小型數據庫存儲功能;

◆這個數據庫是集成在瀏覽器裏面的，目前主流瀏覽器基本都已支持;

websql API主要包含三個核心方法：

◆openDatabase : 這個方法使用現有數據庫或建立新數據庫建立數據庫對象。

◆transaction : 這個方法容許咱們根據狀況控制事務提交或回滾。

◆executeSql : 這個方法用於執行真實的SQL查詢。

openDatabase方法能夠打開已經存在的數據庫，不存在則建立：

var db = openDatabase('mydatabase', '2.0', my db',2*1024); 

openDatabasek中五個參數分別爲：數據庫名、版本號、描述、數據庫大小、建立回調。建立回調沒有也能夠建立數據庫。

database.transaction() 函數用來查詢，executeSql()用於執行sql語句。

 

3、indexDB

IndexedDB 是一個爲了可以在客戶端存儲可觀數量的結構化數據，而且在這些數據上使用索引進行高性能檢索的 API。雖然 DOM 存儲，對於存儲少許數據是很是有用的，可是它對大量結構化數據的存儲就顯得力不從心了。IndexedDB 則提供了這樣的一個解決方案。

IndexedDB 分別爲同步和異步訪問提供了單獨的 API 。同步 API 原本是要用於僅供 Web Workers 內部使用，可是尚未被任何瀏覽器所實現。異步 API 在 Web Workers 內部和外部均可以使用，另外瀏覽器可能對indexDB有50M大小的限制，通常用戶保存大量用戶數據並要求數據之間有搜索須要的場景。

異步API

異步 API 方法調用完後會當即返回，而不會阻塞調用線程。要異步訪問數據庫，要調用 window 對象 indexedDB 屬性的 open() 方法。該方法返回一個 IDBRequest 對象 (IDBOpenDBRequest);異步操做經過在 IDBRequest 對象上觸發事件來和調用程序進行通訊。

◆IDBFactory 提供了對數據庫的訪問。這是由全局對象 indexedDB 實現的接口，於是也是該 API 的入口。

◆IDBCursor 遍歷對象存儲空間和索引。

◆IDBCursorWithValue 遍歷對象存儲空間和索引並返回遊標的當前值。

◆IDBDatabase 表示到數據庫的鏈接。只能經過這個鏈接來拿到一個數據庫事務。

◆IDBEnvironment 提供了到客戶端數據庫的訪問。它由 window 對象實現。

◆IDBIndex 提供了到索引元數據的訪問。

◆IDBKeyRange 定義鍵的範圍。

◆IDBObjectStore 表示一個對象存儲空間。

◆IDBOpenDBRequest 表示一個打開數據庫的請求。

◆IDBRequest 提供了到數據庫異步請求結果和數據庫的訪問。這也是在你調用一個異步方法時所獲得的。

◆IDBTransaction 表示一個事務。你在數據庫上建立一個事務，指定它的範圍(例如你但願訪問哪個對象存儲空間)，並肯定你但願的訪問類型(只讀或寫入)。

◆IDBVersionChangeEvent 代表數據庫的版本號已經改變。

同步API

規範裏面還定義了 API 的同步版本。同步 API 尚未在任何瀏覽器中得以實現。它本來是要和webWork 一塊兒使用的。

 

4、cookie

Cookie(或者Cookies)，指通常網站爲了辨別用戶身份、進行session跟蹤而儲存在用戶本地終端上的數據(一般通過加密)。cookie通常經過http請求中在頭部一塊兒發送到服務器端。一條cookie記錄主要由鍵、值、域、過時時間、大小組成，通常用戶保存用戶的認證信息。cookie最大長度和域名個數由不一樣瀏覽器決定，具體以下：

瀏覽器 支持域名個數 最大長度 IE7以上 50個 4095B Firefox 50個 4097B Opera 30個 4096B Safari/WebKit 無限制 4097B

不一樣域名之間的cookie信息是獨立的，若是須要設置共享能夠在服務器端設置cookie的path和domain來實現共享。瀏覽器端也能夠經過document.cookie來獲取cookie，並經過js瀏覽器端也能夠方便地讀取/設置cookie的值。

5、localstorage

localStorage是html5的一種新的本地緩存方案，目前用的比較多，通常用來存儲ajax返回的數據，加快下次頁面打開時的渲染速度。

瀏覽器 最大長度 IE9以上 5M Firefox 8以上 5.24M Opera 2M Safari/WebKit 2.6M //localStorage核心API: localStorage.setItem(key, value)    //設置記錄 localStorage.getItem(key)           //獲取記錄 localStorage.removeItem(key)        //刪除該域名下單條記錄 localStorage.clear()                //刪除該域名下全部記錄 

值得注意的是，localstorage大小有限制，不適合存放過多的數據，若是數據存放超過最大限制會報錯，並移除最早保存的數據。

https://github.com/machao/localStorage

6、sessionstorage

sessionStorage和localstorage相似，可是瀏覽器關閉則會所有刪除，api和localstorage相同，實際項目中使用較少。

7、application cache

application cahce是將大部分圖片資源、js、css等靜態資源放在manifest文件配置中。當頁面打開時經過manifest文件來讀取本地文件或是請求服務器文件。

離線訪問對基於網絡的應用而言愈來愈重要。雖然全部瀏覽器都有緩存機制，但它們並不可靠，也不必定總能起到預期的做用。HTML5 使用ApplicationCache 接口能夠解決由離線帶來的部分難題。前提是你須要訪問的web頁面至少被在線訪問過一次。

使用緩存接口可爲您的應用帶來如下三個優點：

◆離線瀏覽 – 用戶可在離線時瀏覽您的完整網站。

◆速度 – 緩存資源爲本地資源，所以加載速度較快。

◆服務器負載更少 – 瀏覽器只會從發生了更改的服務器下載資源。

 

8、cacheStorage

CacheStorage是在ServiceWorker的規範中定義的。CacheStorage 能夠保存每一個serverWorker申明的cache對象，cacheStorage有open、match、has、delete、keys五個核心方法，能夠對cache對象的不一樣匹配進行不一樣的響應。

cacheStorage.has()

若是包含cache對象，則返回一個promise對象。

cacheStorage.open()

打開一個cache對象，則返回一個promise對象。

cacheStorage.delete()

刪除cache對象，成功則返回一個promise對象，不然返回false。

cacheStorage.keys()

含有keys中字符串的任意一個，則返回一個promise對象。

cacheStorage.delete()

匹配key中含有該字符串的cache對象，返回一個promise對象。

 

9、flash緩存

這種方式基本不用，這一方法主要基於flash有讀寫瀏覽器端本地目錄的功能，同時也能夠向js提供調用的api，則頁面能夠經過js調用flash去讀寫特定的磁盤目錄，達到本地數據緩存的目的。