sessionstorage、localstorage、cookie區別

cookie是網站為了標示使用者身份而儲存在使用者本地終端（Client Side）上的資料（通常經過加密）。
cookie資料始終在同源的http請求中攜帶（即使不需要），記會在瀏覽器和伺服器間來回傳遞。
sessionStorage和localStorage不會自動把資料發給伺服器，僅在本地儲存。
cookie有path概念，子路徑可以訪問父路徑cookie，父路徑不能訪問子路徑cookie

儲存大小：
cookie資料大小不能超過4k。
sessionStorage和localStorage 雖然也有儲存大小的限制，但比cookie大得多，可以達到5M或更大。

有期時間：
localStorage 儲存持久資料，瀏覽器關閉後資料不丟失除非主動刪除資料；
sessionStorage 資料在當前瀏覽器視窗關閉後自動刪除。
cookie 設定的cookie過期時間之前一直有效，即使視窗或瀏覽器關閉

• seessionStorage

    臨時性的，頁面開啟有，頁面關閉沒有  
    資料不共享  
    通過a標籤來跳出一個頁面，則sessionStorage共享
  

• localStorage

    永久性的儲存  
     不能跨域
    資料共享
  

• cookie
  cookie在同源且符合path規則的文件之間共享

如何實現瀏覽器內多個標籤頁之間的通訊?

WebSocket、SharedWorker；
也可以呼叫localstorge、cookies等本地儲存方式；

localstorge另一個瀏覽上下文裡被新增、修改或刪除時，它都會觸發一個事件，
我們通過監聽事件，控制它的值來進行頁面資訊通訊；
注意quirks：Safari 在無痕模式下設定localstorge值時會丟擲 QuotaExceededError 的異常；

懶載入和預載入

• 用CSS和JavaScript實現預載入:backgrond
• 僅使用JavaScript實現預載入

• 使用Ajax實現預載入

  1. 第一種是純粹的延遲載入，使用setTimeOut或setInterval進行載入延遲.
  2. 第二種是條件載入，符合某些條件，或觸發了某些事件才開始非同步下載。
  3. 第三種是可視區載入，即僅載入使用者可以看到的區域，這個主要由監控滾動條來實現，一般會在距使用者看到某圖片前一定距離遍開始載入，這樣能保證使用者拉下時正好能看到圖片。

• 根元素
• float屬性不為none
• position為absolute或fixed
• display為inline-block, table-cell, table-caption, flex, inline-flex
• overflow不為visible