週末待整理

彙總

項目結構 js-node-java ng

移動端適配 IP6 750 rem

設備像素

屏幕物理像素 任何設備屏幕的物理像素的數量都是固定不變的，單位是pt

css像素 px

https://github.com/riskers/blog/issues/17
https://github.com/riskers/blog/issues/18

延伸 「像素」「渲染像素」以及「物理像素」

display 佈局展示

1. none; block; 
2. inline <span>  
3. inline-block <input>  
4. list-item <li> 
5. table <table>
6. inline-table 
7. table-row-group <tbody>
8. table-header-group <thead>
9. table-footer-group <tfoot>
10. table-row <tr>
11. table-column-group <colgroup>
12. table-column <col>
13. table-cell <td> <th>
14. table-caption <caption>
15. run-in:
16. 舊版本 flexbox 的使用 safari瀏覽器
        box: 塊伸縮容器
        inline-box: 內聯級伸縮容器
17. 混合版本flexbox模型 IE10瀏覽器 「-ms-」 
       flexbox: 
        inline-flexbox:
18. 新版本flexbox模型 
        flex:
        inline-flex:

position static

1. static 文檔的常規位置 不會從新定位  
2. relative
3. absolute
4. fixed

1-10000的隨機數 獲得1-10

1-10000 取特定數 取幾回 2進制

hybrid 原理。橋 協議 js注入webview

es6多了什麼新特性

添加了塊級做用域，

一個{}表明一個塊級做用，做用域嵌套時外層代碼塊不受內層代碼塊的影響，
使得當即執行匿名函數（IIFE）不在必要； IIFE本來的做用是爲了造成局部做用域，防止變量污染；
函數自己的做用域，在其所在的塊級做用域以內。 es5 存在函數提高，無論函數在何處聲明，函數聲明都會提高到當前做用域的頂部，獲得執行.而es6支持塊級做用域，其內部聲明的函數皆不會影響到做用域的外部。

增長了語法糖

let命令 所聲明的變量，只在let命令所在代碼塊內有效

• 不會像var同樣聲明提早，只能在定義以後使用
• 只要做用域內有let聲明的變量，這個變量就會被綁定，不受原來變量聲明規則的影響。es明確規定，若是區塊中存在let和const命令，這個區塊對這些命令聲明的變量，從一開始就造成了封閉做用域。凡是在聲明以前就使用這些命令，就會報錯ReferenceError。 這在語法上，稱爲「暫時性死區」。
• 函數的做用域是其聲明時所在的做用域
• 不容許在相同做用域內，重複聲明同一個變量。所以不能在函數內部從新聲明參數。

const命令 用來聲明常量， 一旦聲明， 常量的值就不能改變

• 對常量從新賦值不會報錯，只會默默地失敗
• 只在聲明所在的塊級做用域內有效
• 不存在提高，只能在聲明的後面使用，提早使用會拋出ReferenceError
• 不可重複聲明

• 只是指向變量所在的地址； 若是將const常量賦值爲一個對象，則此常量儲存的是一個地址，不可變的只是這個地址，但對象自己是可變的，依然能夠爲其添加新屬性。

  全局對象的屬性

• 全局對象是最頂層的對象，在瀏覽器環境指的是window對象， 在Node.js指的是global對象。ES5規定，全部全局變量都是全局對象的屬性；ES6規定，var命令和function命令聲明的全局變量，屬於全局對象的屬性； let命令、const命令、class命令聲明的全局變量，不屬於全局對象的屬性。

變量的解構賦值

• 按照必定模式，從數組和對象中提取值，對變量進行賦值，這被稱之爲解構（Destructing）。解構只能用於數組或對象。其餘原始類型的值都是能夠轉爲相應的對象，除了undefined 和null
• 對數組的解構賦值，容許指定默認值。（只要某種數據結構具備Iterator接口，均可以採用數組形式的解構賦值，set結構也可用）
• 對象的解構，屬性沒有次序，變量必須與屬性同名。 能夠很方便地將現有對象的方法，賦值到某個變量。對象的解構一樣能夠指定默認值，而且能夠與函數參數的默認值一塊兒使用。

增長了字符串處理、

字符串處理的加強，字符以utf-16格式儲，每一個字符固定2個字節。對於那些須要4個字符，js 會認爲是兩個字符。 es6 加強了對碼點大於0xFFFF的字符的總體處理和正則匹配。

• codePointAt() 正確返回四字節的UTF-16字符的 對於常規字符返回結果與 charCodeAt 方法相同
• String.fromCodePoint() 正確返回編號大約0xFFFF碼點對應的字符 彌補String.fromCharCode 方法的不足
• at() 返回字符串給定位置的字符，若是該字符的Unicode 編號大於 0xFFFF，能夠返回正確的字符。 chatAt（）只能返回UTF-16編碼的第一個字節，不能正確返回
• 字符的Unicode表示法: "\u{20BB7}"的形式能夠正確表示超出\uFFFF的雙字節字符
• normalize() String.prototype.normalize()方法。。。
• includes() 返回布爾值，是否找到參數字符串，支持第二個參數，表示開始搜索的位置
• startsWith() 返回布爾值,表示參數字符串是否在源字符串的頭部，支持第二個參數，表示開始搜索的位置
• endsWith() 返回布爾值，表示參數字符串是否存在源文件的尾部。支持第二個參數，表示對前N個字符進行搜索
• repeat() 返回一個新字符串，表示將原字符串重複n次

模板字符串

• 加強字符串，用反引號(')標識，普通字符串 多行字符串 字符串中嵌入變量
• 在模板字符串中嵌入變量，須要將變量名寫在$()之中
• 反引號 斜槓轉義
• 大括號內部能夠進行運算, 以及引用對象屬性，其中還能調用函數。
• 模板字符串能夠緊跟一個函數名後面，該函數將被調用來處理這個模板字符串。函數的參數爲模板字符串中沒有變量替換的部分組成的數組，第一個參數以後的參數，都是模板字符串各個變量依次被替換後的值， 擁有一個raw屬性

數值的擴展

• 二進制和八進制表示法 ？？？ 0b 0o
• 擴展函數
  Number.isFinite()用來檢查一個數值是否非無窮（infinity）；
  Number.isNaN() 用來檢查一個值是否爲NaN
  區別在於傳統方法先調用Number()，將非數值的值轉爲數值，再進行判斷，而這兩個新方法只對數值有效，非數值一概返回false
  Number.parseInt()與Number.parseFloat() 將全局方法，移植到Number對象上面，行爲徹底保持不變
  Number.isInteger() 用來判斷一個值是否爲整數。 在javascript內部，整數和浮點數是一樣的儲存方法，3和3.0被視爲同一個值
  Number.isSafeInteger() 則是用來判斷一個整數是否落在Number.MAX_SAFE_INTEGER 和Number.MIN_SAFE_INTEGER 這兩個常量表示的上下限範圍內
  Math對象上提供了許多新的數學方法

數組的擴展

• 數組推導：直接經過現有數組生成新數組的一種簡化寫法, 經過 for...of結構，容許多重循環。 注：新數組會當即在內存中生成，這時若是原數組是一個很大的數組，將會很是耗費內存。
• 數組處理的擴展方法：
  • Array.from()：用於將兩類對象轉爲真正的數組。相似數組的對象（array-like object）和可遍歷（iterable）的對象，其中包括ES6新增的Set和Map結構。 Array.from() 還能夠接受第二個參數，做用相似於數組的map方法，用來對每一個元素進行處理
    
  • Array.of() 用於將一組值，轉換爲數組。彌補數組構造函數Array()的不足。
  • 數組實例的find()用於找出第一個符合條件的數組元素
  • 數組實例的findIndex() 用於返回第一個符合條件的數組元素的位置。 這兩個方法均可以發現NaN
  • 數組實例的fill() 使用給定值 填充一個數組
  • 數組實例的entries() 鍵值對的遍歷 ，keys() 針對鍵名的遍歷 和values() 針對鍵值的遍歷， 用於遍歷數組，它們都返回一個遍歷

對象的擴展

加強的對象寫法 容許直接寫入變量和函數，做爲對象的屬性和方法
容許字面量定義對象時，用表達式做爲對象的屬性名，即把表達式放在方括號內，容許變量滲入key中

• Object.is() 用來比較兩個值是否嚴格相等。與嚴格比較浮的不一樣之處 ,+0不等於-0, NaN等於自身
  
• Object.assign() 用來將源對象（source）的全部可枚舉屬性，複製到目標對象（target）。它至少須要兩個對象做爲參數,第一個是目標對象，後面的參數都是源對象。 同名屬性，後面覆蓋前面。
• proto屬性
  用來讀取或設置當前對象的prototype對象
• Object.setPrototypeOf()方法的做用與proto相同，用來設置一個對象的prototype對象，是es6正式推薦的設置原型對象的方法
• Object.getPrototypeOf()方法用於讀取一個對象的prototype對象
• Symbol原始數據類型，表示獨一無二的ID，經過Symbol函數生成。凡是屬性名屬於Symbol類型，就都是獨一無二的，能夠保證不會與其餘屬性名產生衝突。Symbol函數能夠接受一個字符串做爲參數，表示Symbol實例的名稱。
  • Symbol.keyFor()
• Proxy
  用於修改某些操做的默認行爲，等於在目標對象以前，架設一層「攔截」，外界對該對象的訪問，都必須經過這層攔截，所以提供了一種機制，能夠對外界的訪問進行過濾和改寫。而 Proxy.revocable()方法則返回一個可取消的Proxy實例。
• Object.observe() Object.unobserve()
  Object.observe()方法用來監聽對象（以及數組）的變化。一旦監聽對象發生變化，就會觸發回調函數。
  Object.unobserve()方法用來取消監聽。
  • add 添加屬性
  • update 屬性值的變化
  • delete 刪除屬性
  • setPrototype設置原型
  • reconfigure 屬性的attributes 對象發生變化
  • preventExtensions 對象被禁止擴展

函數的擴展

• 函數參數默認值 使用=形式
  • 指定了默認值以後，函數的length屬性，將返回沒有指定默認值的參數個數
  • 參數默認值所處做用域 是函數做用域 而非全局做用域
  • 雙重默認值
• rest運算符
  • ...變量名：將多餘的參數放入一個數組中，rest參數必須爲最後一個， 函數的length屬性，不包括rest參數
  • ... 數組： 將數組轉爲用逗號分割的參數序列
• 箭頭函數
  • 函數體內this對象，綁定定義時所在的對象，而不是使用時所在的對象
  • 不能夠當作構造函數，不可使用new命令，不然拋出一個錯誤
  • 不可使用arguments對象，該對象在函數體內不存在
    

• 尾調用優化：

  Set Map數據結構

遍歷器（Iterator）

• 一種接口規格； 一是爲各類數據結構提供一個統一的 簡便的接口，二是使得數據結構的成員可以按某種次序排列
• 調用這個接口，返回一個遍歷器對象。 該對象具有next方法，每次調用該方法，會返回一個具備value 和done 兩個屬性的新對象，指向部署了 Iterator接口的數據結構的一個成員
• for...of 數組 類數組對象 Set Map結構
  默認的Iteratorj接口部署在數據結構的Symbol.iterator屬性，也就是說調用Symbol.iterator方法,就會獲得當前數據結構的默認遍歷器
• 調用默認iterator接口的場合：
  進行如下操做時，會自動去調用默認iterator接口：
  首先是上面介紹的for...of結構；
  對數組和Set結構進行解構賦值時，會默認調用iterator接口；
  擴展運算符（...）也會調用默認的iterator接口；
  yield*
  Array.from()
  Map(), Set(), WeakMap(), WeakSet()
  Promise.all(), Promise.race()

引入generator函數控制函數的內部狀態的變化

generator 普通函數

兩個特徵：

1. function命令與函數名之間有一個星號
2. 函數體內部使用 yield 語句，定義遍歷器的每一個成員
3. 一個函數的內部狀態的遍歷器，每調用一次，函數的內部狀態發生一次改變

next方法的參數

1. yield語句自己沒有返回值，或者說老是返回undefined。next方法能夠帶一個參數，該參數會被看成上一個yield語句的返回值。這個功能有很重要的語法意義，Generator函數從暫停狀態到恢復運行，它的上下文狀態（context）是不變的。經過next方法的參數，就有辦法在Generator函數開始運行以後，繼續向函數體內部注入值。

yield* 語句

1. 若是yield 後面跟的是一個遍歷器，須要在yield命令後面加上星號。表示返回的是一個遍歷器，則遍歷有地櫃效果 ，若是後面跟的是數組，表示該數組會返回一個遍歷器，所以就會遍歷數組成員
2. 二叉樹

Generator函數的應用

1. 異步操做同步化
2. 控制流管理：yield語句是同步運行，因此多層回調函數能夠改寫爲直線執行的形式。
3. 任意對象上部署 iterator 接口

原生提供了Promise對象

• 任務三種狀態： 默認（pending） 完成(fulfilled) 失敗（rejected）
  • 默認狀態能夠單向轉移到完成狀態，這個過程叫resolve
  • 默認狀態能夠單向轉移到失敗裝填，這個過程叫reject
  • deferred.notify(update)宣告任務執行信息，執行進度； 狀態轉移是一次性的，一旦任務由初始的pending 轉爲其餘狀態，就會進入到下一個任務的執行過程當中。
• 是一個構造函數，用來生成Promise實例。 接受函數做參數，resolve（）成功 reject（）失敗
  • 實例生成後 用then方法指定resolve方法 reject方法的回調函數； then方法 返回的是新的Promise對象，能夠採用鏈式寫法。多個then執行時前一個回調函數完成之後，會將返回結果做爲參數，傳入後一個回調函數。若是前一個回調函數返回的是Promise對象，這時後一個回調函數就會等待該Promise對象有了運行結果，纔會進一步調用。
  • Promise.prototype.catch方法是Promise.prototype.then(null, rejection)的別名，用於指定發生錯誤時的回調函數。

• Promise.all() 將多個Promise實例，包裝成一個新的Promise實例。
  var p = Promise.all([p1,p2,p3]); 只有p一、p二、p3的狀態都變成fulfilled，p的狀態纔會變成fulfilled，此時p一、p二、p3的返回值組成一個數組，傳遞給p的回調函數。 只要p一、p二、p3之中有一個被rejected，p的狀態就變成rejected，此時第一個被reject的實例的返回值，會傳遞給p的回調函數。 Promise.race()：與Promise.all()形式相似，不一樣的是隻要p一、p二、p3之中有一個實例率先改變狀態，p的狀態就跟着改變。那個率先改變的Promise實例的返回值，就傳遞給p的返回值。

  引入了Class（類）的概念，並在語言規格的層面上實現了模塊功能

  Class 「類」， constructor方法表示構造方法，this關鍵字表明實例對象。

• prototype 在ES6繼續存在，除了constructor方法外，類的方法都定義在類的prototype屬性上面
• extends關鍵字，實現繼承
  • 子類必須在constructor方法中調用super方法，不然新建實例時會報錯。
  • 若是子類沒有定義constructor方法，這個方法會被默認添加
  • 在子類的構造函數中，只有調用super以後，纔可使用this關鍵字，不然會報錯。
• Class做爲構造函數的語法糖，同時有prototype屬性和proto屬性：
  • 子類的proto屬性，表示構造函數的繼承，老是指向父類。
  • 子類prototype屬性的proto屬性，表示方法的繼承，老是指向父類的prototype屬性。
• 特殊狀況：
  • 子類繼承Object時，子類就是構造函數Object的複製，子類的實例就是Object的實例
  • class A{}， Function.prototype A調用後返回一個空對象Object實例 A.prototype.proto指向構造函數Object的prototype屬性

  • 子類繼承null時，至關與一個普通函數直接繼承Funciton.prototype，可是子類調用後返回的對象不繼承任何方法

    Module

• ES6模塊經過export命令顯式指定輸出的代碼，輸入時也採用靜態命令的形式。
• 取代import語句，總體輸入模塊做用
• export default 定義模塊的默認方法

• export * from circle "export *「 輸出circle模塊的全部屬性和方法 即繼承

• ES6 模塊轉碼
  • module transpiler CommonJS模塊 AMD模塊寫法
  • SystemJS 能夠在瀏覽器內加載ES6模塊 AMD模塊 CommonJS模塊 將其轉爲ES5格式

http://imweb.io/topic/55e330d6771670e207a16bbb
https://imququ.com/post/set-map-weakmap-in-es6.html

es6中新增的幾種集合類型 Set、Map和WeakMap的區別

set

類數組，成員值惟一 沒有重複值
    不會發生類型轉換，5「5」 內部判斷兩個值是否不一樣，相似於精確相等運算（===），例外NaN等於自身
    * 屬性
        Set.prototype.constructor 構造函數 默認是Set函數
        Set.prototype.size 返回Set的成員總數
    * 方法
        add（value） 添加某個值 返回Set結構自己
        delete（value） 刪除某個值，返回一個布爾值，表示刪除是否成功
        has(value) 布爾值，是否爲Set成員
        clear() 清除全部成員，沒有返回值
    values 返回一個遍歷器，set結構的默認遍歷器就是它的value方法 能夠直接用for...of 循環進行遍歷

WeakSet 不重複值結合

與Set區別
    * 成員只能是對象； 具備 iterable 接口的對象 eg 數組或者類數組對象
    * 對象都是弱引用，即垃圾回收機制不考慮WeakSet對該對象的引用，若是其餘對象不在引用該對象，那麼垃圾回收機制會自動回收該對象所佔用的內存，不考慮該對象還存在於WeakSet之中。 用途：儲存DOM借點，不用擔憂這些節點從文檔移除時，會引起內存泄漏。

Map結構

類對象 鍵值對集合， 各類類型的值（包括對象）均可以看成鍵
    Map的鍵 跟內存地址綁定，內存地址不同 視爲兩個鍵。同名屬性碰撞(clash)的問題。
    只有對同一個對象的引用，Map結構纔將其視爲同一個鍵
 * 屬性方法
  size 返回成員總數
  set(key，value) 設置一個鍵值對
  get(key) 讀取一個鍵
  has(key) 返回布爾值，鍵是否在Map數據結構中
  delete(key) 刪除某個鍵
  clear() 清除全部成員
  keys() 鍵名的遍歷器
  values() 鍵值的遍歷器
  entries() 成員
    
for...of 遍歷  firefox zhichia

WeakMap

只接受對象做爲鍵名（null除外），不接受原始類型的值做爲鍵名，並且鍵名所指向的對象，不計入垃圾回收機制，有助於防止內存泄漏

[https://imququ.com/post/set-map-weakmap-in-es6.html]

es6 promise VS es7 aysnc await

promise

循環執行 callback地獄 then
併發執行 併發執行多個任務時，能夠有一個地方回收結果 Promise.all([,]).then(success)； count
錯誤處理 統一用catch處理 promise chain裏面出現的錯誤 callback裏面沒法用一個try接到深層的error
getUser().then(getArticle).then(success).catch(error);
array reduce 返回 最後一次調用回調函數得到的累積結果。

```
    var p = Promise.resolve();
    tasks.reduce(function(p, fn) {
      return p = p.then(fn);
    }, p).then(success);
    
 ```

async await 基本上這個語法的目的就是讓程式能再某些想卡住的地方能卡住，可是不是真的卡住，只是種語法糖。

在async function內, 能夠用await語法去呼叫另外一個async function。
async function裏 非同步事件由 promise or generator發起。

另外貼心的一點是 async function 預設會回傳一個 promise，就像 promise api 裡面 then 會幫你作的事一樣，只是搭配 await 以後其實就能夠在非同步工做中用 await 語法取代掉 then 讓語法更簡潔。

http https 證書的做用

http

http 缺點 通信是用明文（不加密），內容可能會被竊聽
不驗證通訊方身份，一次有可能遭遇假裝
沒法真名報文的完整性，有可能已經被篡改

https

http+ 加密+認證+完整性保護 = https

1. 身披SSL協議的這層外殼的HTTP
2. 在採用SSL後, HTTP就擁有了HTTPS的加密, 證書和完整性的保護這些功能.
3. SSL是獨立於HTTP的協議, 全部不光是HTTP協議, 其餘運行在應用層的SMTP(郵件協議)和Telnet等協議都可配合SSL協議使用. 能夠說SSL是當今世界上應用最普遍的網絡安全技術.
   
4. SSL採用公開密鑰加密 加密算法公開，密鑰是保密的，安全性

5. 對稱密鑰加密/ 共享密鑰加密： 加密和解密同用一個密鑰的方式

6. 將密鑰--對方 在互聯網轉發密鑰時，通訊被監聽 ？ 安全轉交？ 使用兩把密鑰公開密鑰加密
7. 非對稱密鑰 ： 一把私有密鑰 一把公開密鑰; 使用公開密鑰加密方式, 發送密文的一方使用對方的公開密鑰進行加密處理, 對方收到被加密的信息後, 在使用本身的私有密鑰進行解密. 利用這種方式, 不須要發送用來解密的私有密鑰, 也不用擔憂密鑰被攻擊者竊聽而盜走.
   

8. https混合加密機制,公開密鑰加密和共享密鑰加密並用的混合加密機制。公開密鑰加密和共享密鑰加密相比, 其處理速度要慢. 在交換密鑰環節適用公開密鑰加密方式, 以後的創建通訊交換報文階段則使用共享密鑰加密方式.

證實公開密鑰的正確性的證書

數字證書認證機構和其餘相關機關頒發的公開密鑰證書；

1. 服務器把本身的公開密鑰登陸至數字證書認證機構
2. 數字證書認證機構用本身的私有密鑰向服務器的公開密鑰署數字簽名並頒發公鑰證書
3. 客戶端拿到服務器的公鑰證書後, 使用數字證書認證機構的公開密鑰, 向數字證書認證機構驗證公鑰證書上的數字簽名, 以確認服務器的公開密鑰的真實性
4. 使用服務器的公開密鑰對報文加密後發送
5. 服務器用私有密鑰對報文解

• SSL 服務器客戶端雙方加密及解密處理 消耗 cpu 資源和內存資源 可以處理的請求數量 一定會隨之減小

• 敏感數據 https 購買證書的開銷

  XSS csrf

  XSS 「跨站腳本」

  注入攻擊的一種，不對服務器端形成任何傷害，經過一些站內交互突進 發佈評論，太計較還有javascript內容的文本。 服務器端若是沒有過濾或轉義掉這些腳本，做爲內容發佈到頁面上，用戶訪問頁面會運行腳本。
• 關不掉窗口， 盜號或者其餘未受權的操做
• AJAX 不能跨域的初衷也是防範 XSS 。iframe post 請求
  
• 把全部的用戶輸入 就進行html轉義輸出
• 容許用戶輸入html，又要過濾腳本的 白名單整 使用html解析庫遍歷借點 獲取數據 html比xml有較強的容錯性。根據原有標籤屬性 從新構建html元素樹。 全部標籤屬性從白名單中拿。
• 模板引擎的web項目中，開啓默認轉義功能。不須要的場合取消，

• 富 AJAX 類應用（例如豆瓣網的阿爾法城）。這類應用的風險並不集中在 HTTP 的靜態響應內容，因此不是開啓模版自動轉義能就能一勞永逸的。再加上這類應用每每須要跨域，開發者不得不本身打開危險的大門。這種狀況下，站點的安全很是依賴開發者的細心和應用上線前有效的測試。如今亦有很多開源的 XSS 漏洞測試軟件包（彷佛有篇文章提到豆瓣網的開發也使用自動化 XSS 測試），但我都沒試用過，故不予評價。無論怎麼說，我認爲從用戶輸入的地方把好關老是成本最低而又最有效的作法。

  CSRF

跨站請求僞造。
僞造用戶的正常操做，最好的方法是經過 XSS 或連接欺騙等途徑，讓用戶在本機（即擁有身份 cookie 的瀏覽器端）發起用戶所不知道的請求。
xss XCSRF

• 非get請求
  發佈帖子這一類建立資源的操做，應該只接受 POST 請求，而 GET 請求應該只瀏覽而不改變服務器端資源。
• 請求令牌
  • 「請求令牌」和「同步令牌」原理是同樣的，只不過目的不一樣，後者是爲了解決 POST 請求重複提交問題，前者是爲了保證收到的請求必定來自預期的頁面。實現方法很是簡單，首先服務器端要以某種策略生成隨機字符串，做爲令牌（token），保存在 Session 裏。而後在發出請求的頁面，把該令牌以隱藏域一類的形式，與其餘信息一併發出。在接收請求的頁面，把接收到的信息中的令牌與 Session 中的令牌比較，只有一致的時候才處理請求，不然返回 HTTP 403 拒絕請求或者要求用戶從新登陸驗證身份。
  • 雖然請求令牌原理和驗證碼有類似之處，但不該該像驗證碼同樣，全局使用一個 Session Key。由於請求令牌的方法在理論上是可破解的，破解方式是解析來源頁面的文本，獲取令牌內容。若是全局使用一個 Session Key，那麼危險係數會上升。原則上來講，每一個頁面的請求令牌都應該放在獨立的 Session Key 中。咱們在設計服務器端的時候，能夠稍加封裝，編寫一個令牌工具包，將頁面的標識做爲 Session 中保存令牌的鍵。
• 在 ajax 技術應用較多的場合，由於頗有請求是 JavaScript 發起的，使用靜態的模版輸出令牌值或多或少有些不方便。但不管如何，請不要提供直接獲取令牌值的 API。這麼作無疑是鎖上了大門，卻又把鑰匙放在門口，讓咱們的請求令牌退化爲同步令牌。
• 第一點說了請求令牌理論上是可破解的，因此很是重要的場合，應該考慮使用驗證碼（令牌的一種升級，目前來看破解難度極大），或者要求用戶再次輸入密碼（亞馬遜、淘寶的作法）。但這兩種方式用戶體驗都很差，因此須要產品開發者權衡。
  不管是普通的請求令牌仍是驗證碼，服務器端驗證過必定記得銷燬。忘記銷燬用過的令牌是個很低級可是殺傷力很大的錯誤。咱們學校的選課系統就有這個問題，驗證碼用完並未銷燬，故只要獲取一次驗證碼圖片，其中的驗證碼能夠在屢次請求中使用（只要再也不次刷新驗證碼圖片），一直用到 Session 超時。這也是爲什麼選課系統加了驗證碼，外掛軟件升級一次以後仍然暢通無阻。

webkit渲染原理/渲染樹css樣式與dom結合/頁面優化cdn css放前面js放後面

關鍵渲染路徑

1. 建立DOM樹
   html能夠部分執行並顯示
2. 建立CSSOM樹（對附在DOM結構上的樣式的一種表示方式）
   css是一種渲染阻塞資源， 徹底被解析以後才能進入生成渲染樹環節
   css繼承屬性，解析完成； css文件適用於當前設備時才能形成阻塞，eg：設備屬性
   eg
3. 執行腳本
   JavaScript是一種解析阻塞資源(parser blocking resource)，它能阻塞HTML頁面的解析。
   當頁面解析到<script>標籤，無論腳本是內聯的仍是外聯，頁面解析都會暫停，轉而加載JavaScript文件（外聯的話）而且執行JavaScript。這也是爲何若是JavaScript文件有引用HTML文檔中的元素，JavaScript文件必須放在那個元素的後面。
   爲了不JavaScript文件阻塞頁面的解析，咱們能夠在<script>標籤上添加async屬性，使得JavaScript文件異步加載。
4. 生成渲染樹
   渲染樹是DOM和CSSOM的結合，是最終能渲染到頁面的元素的樹形結構表示。也就是說，它包含能在頁面中最終呈現的元素，而不包含那些用CSS樣式隱藏的元素，好比帶有display: none;屬性的元素。
5. 生成佈局
   佈局決定瀏覽器視窗大小， 提供上下文依賴的css 樣式 eg 百分比或窗口的單位
   視口大小由<meta name="viewport" content=「決定」>
   若是缺乏這個標籤 一般默認爲 980
6. 繪製
   頁面上可見內容轉化爲屏幕上的像素點
   繪製過程所需花費的時間取決於DOM的大小以及元素的css 樣式。。
   耗時樣式eg： 複雜的漸變背景色 比簡單的單色背景 渲染耗時

輸入一個url後,會發生什麼,一個頁面輸入後緩存會請求嗎? last

頁面的請求過程

1. 瀏覽器的URL請求
2. 遞歸尋找DNS服務器
3. 接目標IP並創建TCP鏈接
4. 向目標服務器發送http請求
5. web服務器接收請求後處理
6. web服務器返回相應的結果【無效、重定向、正確頁面等】
7. 瀏覽器接收返回的http內容
8. 解析html文件，自上而下 先頭部 後body
9. 解析到頭部的css外部連接時,同步去下載， 遇到外部js連接也是下載 【js 頂部 首屏加載時間】
10. 解析body 邊開始生辰該對應的DOM樹 同時等待css 文件下載
11. css文件下載完畢，DOM樹+CSSOM --》 renderTree
12. 渲染樹一旦有告終構模型，同步去計算渲染樹節點的佈局位置
13. 一旦計算出來渲染座標後，同步開始渲染
14. 10-13 若是遇到圖片則跳過去渲染下面內容，等待圖片下載成功後 會返回來在渲染原來圖片的位置
15. 同14步，若是渲染過程當中出現JS代碼調整DOM樹結構的狀況，也會再次從新來過，從修改DOM開始
16. 最終全部節點和資源都會渲染完成
17. 渲染完成後開始page的onload時間
18. 整個頁面load完成
    整個過程當中會有不少的分別請求，因此TCP鏈接會不少，而且每個用完都會本身關了，除非是keep-live類型的能夠請求屢次才關閉。

https://yq.aliyun.com/articles/20667

web前端優化規則

減小 http 請求

合併腳本跟樣式文件，如能夠把多個css文件合成一個，把多個JS文件合成一個。
CSS Sprites利用css background相關元素進行背景圖的絕對定位，把多個圖片合成一個圖片

使用瀏覽器緩存

在用戶瀏覽網站的不一樣頁面時，不少內容是重複的，好比相同的JS、CSS、圖片等。 強制瀏覽器在本地緩存這些文件，將大大下降頁面產生的流量，從而下降頁面載入時間。
根據服務器端的響應header，一個文件對瀏覽器而言，有幾級不一樣的緩存狀態。

1. 服務器端告訴瀏覽器不要緩存此文件，每次都到服務器上更新文件
2. 服務器端沒有給瀏覽器任何指示
3. 在上次傳輸中，服務器給瀏覽器發送了Last-Modified或Etag數據，再次瀏覽時瀏覽器將提交這些數據到服務器，驗證本地版本是否最新的，若是爲最新的則服務器返回304代碼，告訴瀏覽直接使用本地版本，不然下載新版本。通常來講有且只有靜態文件，服務器端纔會給出這些數據。

4. 服務器強制要求瀏覽器緩存文件，並設置了過時時間。在緩存未到期以前，瀏覽器將直接使用本地緩存文件，不會與服務器端產生任何通訊。
   儘可能強制瀏覽器到第四種狀態，特別是對於 JS、CSS、圖片等變更較少的文件。

   使用壓縮組件

   IE和Firefox瀏覽器都支持客戶端GZIP，傳輸以前，先使用GZIP壓縮再傳輸給客戶端，客戶端接收以後由瀏覽器解壓，這樣雖然稍微佔用了一些服務器和客戶端的CPU，可是換來的是更高的帶寬利用率。對於純文原本講，壓縮率是至關可觀的。若是每一個用戶節約50%的帶寬，那麼租用來的那點帶寬就能夠服務多一倍的客戶，而且縮短了數據的傳輸時間。

   圖片、JS的預載入

   JS中實例化一個新的Image()，

   將腳本放在底部

   腳本放在頂部帶來的問題：
5. 使用腳本時，對於位於腳本如下的內容，逐步呈現將被阻塞

6. 在下載腳本時會阻塞並行下載

   將樣式文件放在頁面頂部

7. 白屏

8. 無樣式內容閃爍

   使用外部的JS和CSS

   將內聯的作成外部的 減小重複下載內聯的JS 和CSS

   切分組件到多個域

   主要的目的是提升頁面組件並行下載能力. 但不要跨太多域名，建議採用2個域名。 img1.qunar。com img2.qunar.com

   精簡JS

9. 精簡：從代碼中移除沒必要要的字符以減小其大小

10. 混淆：在精簡的同時，還會改寫代碼、函數、變量名被轉換成更短的字符串
    可使用ShrinkSafe來精簡JS http://shrinksafe.dojotoolkit.org/

    精簡CSS

    從代碼中移除沒必要要的字符以減小其大小
    可使用CSS Compressor http://www.cssdrive.com/index.php/main/csscompressor /

    精簡圖片、Flash

    對大圖片、Flash,要在效果和大小以前作出平衡

ydoc

node 進程 集羣