1.本地存儲

• navigator.onLine 判斷設(shè)備是否能上網(wǎng)
• HTML5應(yīng)用緩存，為離線web應(yīng)用設(shè)計，可以用一個描述文件manifest file，列出要下載和緩存的資源

1.1 cookie

• document.cookie 可以訪問cookie
• cookie 在客戶端存儲會話信息，用于保存客戶端狀態(tài)
• 響應(yīng)中包含Set-Cookie字段，要求設(shè)置相應(yīng)cookie
• 向相同域名發(fā)送請求都會包含這個cookie
• 瀏覽器對cookie數(shù)量限制在每個域30或50個，超過cookie數(shù)量，瀏覽器就會清楚之前設(shè)置的cookie，刪除最少使用的cookie，為了繞開限制可以使用子cookie
• cookie大小限制在4095B范圍內(nèi)
• cookie是由分號隔開，需要用encodeURIComponent編碼后存入
• 可以添加HTTP-only字段，cookie只能從服務(wù)器讀取，

1.2 localStorage

持久化存儲數(shù)據(jù)，同源策略

• clear
• setItem
• getItem
• removeItem
• length 獲取有多少鍵值對在Storage對象中
  在safa上，無痕模式下去寫入LocalStorage會報錯，要注意捕獲異常

1.3. SessionStorage

存儲會話數(shù)據(jù)，數(shù)據(jù)只保持到瀏覽器關(guān)閉

• 對存儲數(shù)據(jù)進(jìn)行修改，都會在文檔上觸發(fā)storage事件
• 每個來源2.5M的大小限制

1.4 IndexedDB

同源策略，對象存儲數(shù)據(jù)庫，所有操作為異步執(zhí)行，客戶端本地數(shù)據(jù)庫

2.nodejs

• 中間件
  是一個處理請求對象和響應(yīng)對象的函數(shù)，在express請求響應(yīng)循環(huán)中，下一個內(nèi)聯(lián)的中間件通常用變量next表示
• 執(zhí)行任何代碼
• 修改請求和響應(yīng)對象
• 終結(jié)請求-響應(yīng)循環(huán)
• 調(diào)用堆棧中的下一個中間
  如果中間件沒有終結(jié)請求響應(yīng)循環(huán)，則必須調(diào)用next方法將控制權(quán)交給下一個中間件，否則請求就會掛起
• 常用中間件
  • flash
    后臺管理部分用于顯示成功和錯誤信息
  • wechat, wechatCenter
    用于處理微信公眾號發(fā)過來的請求，

4.preact

• 與React相同的API，更容易遷移
• 更小的體積，更適用于移動端，首屏渲染時間小于React
• 渲染性能更好
• 專注于React服務(wù)端渲染
• 花更多時間去解決更關(guān)鍵的問題，而不是花在使用替換方案和解決其兼容性上
• React項目使用在自己的核心產(chǎn)品上

3.React生命周期

生命周期分為掛載，渲染，卸載這幾個階段

• 掛載階段
  componentWillMount可以在render方法之前執(zhí)行，componentDidMount會在render方法之后執(zhí)行，在componentWillMount中調(diào)用setState方法，組件會更新state，但組件只渲染一次

• 卸載階段
  componentWillUnmount
  執(zhí)行一些清理方法，事件回收或是清除定時器

• 更新階段
  如果組件自身的state更新了，會依次執(zhí)行

  • shouldComponentUpdate
    接受更新的props和state，在需要時更新，不需要時不更新，即是否執(zhí)行虛擬DOM對比

• componentWillUpdate
  渲染前后時刻，不能執(zhí)行setState，會造成死循環(huán)，自身調(diào)用自身

• componentDidUpdate
  渲染之后時刻

• componentWillReceiveProps
  在props傳入后，渲染之前setState，這里調(diào)用setState不會二次渲染

• 可以使用setstate的有
  componentWillMount
  componentDidMount
  componentWillReceiveProps
  componentDidUpdate

• 將無狀態(tài)組件寫成函數(shù)組件
  展示型組件，也無法使用組件的生命周期方法

4.React性能優(yōu)化

1.如果新的props和舊的一樣，這是React還是要進(jìn)行虛擬DOM的diff，，這個diff就是多余的性能損耗，而且在DOM結(jié)構(gòu)比較復(fù)雜的情況，整個diff會花費(fèi)較長的時間
可以通過集成React.pureComponent純組件來優(yōu)化性能，它重寫了shouldComponentUpdate，淺比較Props和state，當(dāng)兩者相等時返回false，這樣組件就不會進(jìn)行虛擬DOM的diff
2.有特殊需求時，可以使用shouldComponentUpdate來判斷是否需要更新組件，比如判斷傳入數(shù)據(jù)的id是否有變化等等
3.diff算法不會嘗試比較不同組件類的子樹，如果發(fā)現(xiàn)正在使用的兩個組件類輸出的DOM結(jié)構(gòu)非常相似，可以把這兩個組件類改成一個組件類
4.不要進(jìn)行DOM節(jié)點(diǎn)跨層級的操作，保持穩(wěn)定DOM結(jié)構(gòu)有助于性能的提升，可以通過CSS隱藏和顯示節(jié)點(diǎn)，而不是真正地移除和添加DOM節(jié)點(diǎn)
5.React會將所有顯示到DOM的字符串轉(zhuǎn)義，防止XSS

5.使用Symbol設(shè)置私有屬性

let Person=(function(){
    let _name=Symbol();
    class Person{
        constructor(name){
            this[_name]=name;
        }

        get name(){
            return this[_name];
        }
    }
    return Person;
})();

let a=new Person('red');
console.log(a.name);

首先在函數(shù)作用域內(nèi)創(chuàng)建屬性名，使用閉包引用這個變量，就不會被垃圾回收器回收，接著使用Symbol設(shè)置屬性名，保證不會重名，且外部無法生成同樣的值，保證唯一性

6.express特點(diǎn)

• 自帶路由和路由規(guī)則，需要body-parser解析請求主體
• 使用一個接一個的中間件的線性結(jié)構(gòu)

7.koa特點(diǎn)

• 洋蔥模型，調(diào)用next下一個中間件的前后都能執(zhí)行相應(yīng)的代碼

8.HTTP請求報文和響應(yīng)報文

8.1 請求報文

請求報文由

• 請求行，請求頭部，請求主體構(gòu)成
  請求行包含請求方法，請求URL，HTTP協(xié)議及版本
  響應(yīng)報文
• 響應(yīng)行，響應(yīng)頭部，響應(yīng)主體構(gòu)成
  響應(yīng)行包含HTTP協(xié)議及版本，狀態(tài)碼及描述

9.性能優(yōu)化

• 根據(jù)User-Agent判斷瀏覽器的類型，如果是谷歌瀏覽器返回webp格式

10.請求報文和響應(yīng)報文

請求報文由

• 請求行
  請求方法，URL字段，HTTP協(xié)議版本
• 請求頭部
  User-Agent 請求瀏覽器的類型
  Host 請求的主機(jī)名
• 請求主體

響應(yīng)報文

• 響應(yīng)行
  狀態(tài)碼，HTTP協(xié)議版本
• 響應(yīng)頭部
  Set-Cookie字段
  Content-Type字段
• 響應(yīng)主體

11.垃圾回收機(jī)制

內(nèi)存分配量達(dá)到了一個臨界值，垃圾收集器就會運(yùn)行，這個臨界值會動態(tài)調(diào)整。
如果垃圾回收的內(nèi)存分配量低于15%，那么臨界值就會加倍，垃圾回收的內(nèi)容分配量高于85%，那么臨界值會重置為默認(rèn)值

12.ES6

及時清除引用是非常重要的，WeakSet和WeakMap對值的引用都是不計入垃圾回收機(jī)制的，這是弱引用，一旦消除對該節(jié)點(diǎn)的引用，它占用的內(nèi)存就會被垃圾回收機(jī)制釋放，WeakMap保存的鍵值對也會自動消失，向向?qū)ο笊咸砑訑?shù)據(jù)，又不想干擾垃圾回收機(jī)制，就可以使用WeakMap

• WeakSet
  • 防止不重復(fù)值得集合，成員只能是對象，而不能是其他類型的值
  • WeakSet中的對象都是弱引用，即垃圾回收機(jī)制不考慮WeakSet對該對象的引用
  • 內(nèi)部有多少成員取決于垃圾回收機(jī)制有沒有運(yùn)行，運(yùn)行前后成員個數(shù)不同，垃圾回收機(jī)制何時運(yùn)行是不可預(yù)測的
  • WeakSet不可遍歷

13.暫時性死區(qū)

只要在塊級作用域內(nèi)存在let命令，聲明的變量就綁定這個區(qū)域，不再受外部影響，在聲明之前使用變量，會報錯
只要已進(jìn)入當(dāng)前作用域，索要使用的變量就已經(jīng)存在了，但是不可獲取，只有等到聲明變量的那一行代碼出現(xiàn)，才能獲取和使用該變量

14.前端SEO

• 合理的title，description，keywords
• 語義化HTML代碼
• 重要內(nèi)容HTML代碼放在最前 搜索引擎對抓取的長度有限制
• 重要內(nèi)容不要用js輸出
• 少用iframe
• 非裝飾性圖片必須加alt
• 提高網(wǎng)站速度：網(wǎng)站速度是搜索引擎排序的一個重要指標(biāo)