摘要：并減少對樣式的請求。缺點暴露了模塊成員，外部可以修改模塊內部狀態。所有依賴這個模塊的語句，都定義在一個回調函數中，等到加載完成之后，這個回調函數才會運行。

1. 結構（Structure）：html   語言：XHTML[可擴展超文本標識語言]和XML[可擴展標記語言]
2. 表現（Preasentation）:css
3. 行為（Behavior）：JS[DOM+ES]

其中一些小的具體要求：

結構：標簽小寫、閉合、不能隨意嵌套

CSS+JS：精良使用外鏈，不用行內

1. 易于維護
2. 頁面響應快
3. 可訪問性高
4. 提高設備兼容性
5. 易被解析（搜索引擎）

Ps：

可維護性：出現問題時，修復Bug成本低且維護性好，還有一點是代碼能夠被其他開發人員理解。

可訪問性：所有人都能理解，解析

> - IE：Trident內核(多稱：IE內核)
> - Chrome：Webkit內核 ==>  Blink內核
> - Firefox：Gecko內核(多稱：IE內核)
> - Safari：Webkit內核
> - Opear：Preato====>Webkit內核  ====>  Blink內核

Dom Tree：瀏覽器將Html解析成屬性的數據結構

Parse(構建Dom樹)：生成Dom樹的行為

Css Rule Tree：瀏覽器將Css解析成屬性的數據結構

Render Tree：DOM和CSSOM合并后生成Render Tree

Construct(構建渲染樹)：解析對應的CSS樣式文件信息（包括js生成的樣式和外部css文件），而這些文件信息以及HTML中可見的指令（如），構建渲染樹

Layout：根據Render Tree已知各個節點以及節點之間的從屬關系，計算節點在屏幕中的位置

Painting：根據Layout算出來的結果，通過顯卡，把內容滑倒屏幕上

Reflow(回流)：當瀏覽器發現某個部分發生了點變化影響了布局，需要倒回去重新渲染，這個回退的過程

解析HTML：瀏覽器會將HTML解析成一個DOM樹，DOM 樹的構建過程是一個深度遍歷過程：當前節點的所有子節點都構建好后才會去構建當前節點的下一個兄弟節點。

解析CSS：將CSS解析成 CSS Rule Tree 。

生成渲染樹：根據DOM樹和CSSOM來構造 Rendering Tree。注意：Rendering Tree 渲染樹并不等同于 DOM 樹，因為一些像Header或display:none的東西就沒必要放在渲染樹中了。

布局渲染樹：已知道網頁中有哪些節點、各個節點的CSS定義以及他們的從屬關系。從根節點遞歸調用，計算每一個元素的大小、位置等，給出每個節點所應該在屏幕上出現的精確坐標

繪制渲染樹：遍歷render樹，并使用UI后端層繪制每個節點。

當渲染樹中的一部分(或全部)因為元素的規模尺寸，布局，隱藏等改變而需要重新構建, 這就稱為回流(reflow)。==每個頁面至少需要一次回流，就是在頁面第一次加載的時候(第一次布局也稱作回流)==。
reflow 幾乎是無法避免的。現在界面上流行的一些效果，比如樹狀目錄的折疊、展開（實質上是元素的顯示與隱藏：display:none和visibility:hidden）等，都將引起瀏覽器的 reflow。鼠標滑過、點擊……只要這些行為引起了頁面上某些元素的占位面積、定位方式、邊距等屬性的變化，都會引起它內部、周圍甚至整個頁面的重新渲染。通常我們都無法預估瀏覽器到底會 reflow 哪一部分的代碼，它們都彼此相互影響著。

改變某個元素的背景色、文字顏色、邊框顏色等等==(外觀屬性)==不影響它周圍或內部布局的屬性時，屏幕的一部分要重畫，但是元素的幾何尺寸==(布局)==沒有變。

頁面渲染初始化；(無法避免)

添加或刪除可見的DOM元素；

元素位置的改變，或者使用動畫；

元素尺寸的改變——大小，外邊距，邊框；

瀏覽器窗口尺寸的變化（resize事件發生時）；

填充內容的改變，比如文本的改變或圖片大小改變而引起的計算值寬度和高度的改變；

讀取某些元素屬性：（offsetLeft/Top/Height/Width,　clientTop/Left/Width/Height,　scrollTop/Left/Width/Height,　width/height,　getComputedStyle(),　currentStyle(IE)　

改變元素外觀屬性。如：color，background-color等。

在回流(重排)的時候，瀏覽器會使布局發生變化。完成回流將變化后的新頁面繪制到頁面上，則觸發重繪。
反之，重繪時不會不一定會使布局發生變化，這不一定觸發重排(回流)
有些情況下，比如修改了元素的樣式，瀏覽器并不會立刻reflow 或 repaint 一次，而是會把這樣的操作積攢一批，然后做一次 reflow，這又叫==異步 reflow 或增量異步 reflow==。但是在有些情況下，比如==resize== 窗口，改變了頁面默認的字體等。對于這些操作，==瀏覽器會馬上進行 reflow==。
==重排(回流)必定會引發重繪，但重繪不一定會引發重排(回流)==

display:none 的節點不會被加入Render Tree，如果某個節點最開始是不顯示的，設為display:none是更優的

visibility: hidden 的節點會被加入Render Tree

display:none 會觸發 reflow，而 visibility:hidden 只會觸發 repaint，因為沒有發現位置變化。

==重繪重排的代價：耗時，導致瀏覽器卡慢==

需要大量重繪重排的場景，例如：動畫

優化：

==瀏覽器==自己的優化：==(多次攢一次)==瀏覽器會維護1個隊列，把所有會引起回流、重繪的操作放入這個隊列，等隊列中的操作到了一定的數量或者到了一定的時間間隔，瀏覽器就會flush隊列，進行一個批處理。這樣就會讓多次的回流、重繪變成一次回流重繪。

==程序員==注意的優化：減少重繪和重排就是要==減少對渲染樹的操作==，可以合并多次的DOM和樣式的修改。并減少對style樣式的請求。以下：

直接改變元素的className(==一次改變多個需要同樣的樣式變化的元素==)

display：none；先設置元素為display：none；然后進行頁面布局等操作；設置完成后將元素設置為display：block；這樣的話就只引發兩次重繪和重排；(將重繪重排隱藏起來操作)

不要經常訪問瀏覽器的flush隊列屬性；如果一定要訪問，可以利用緩存。將訪問的值存儲起來，接下來使用就不會再引發回流

使用cloneNode(true or false) 和 replaceChild 技術，引發一次回流和重繪；(==操作復制節點，將改變后的節點一次重新繪制==)

將需要多次重排的元素，position屬性設為absolute或fixed，元素脫離了文檔流，它的變化不會影響到其他元素；(==脫離文檔會不會再影響頁面布局==)

如果需要創建多個DOM節點，可以使用DocumentFragment創建完后一次性的加入document；(==一次改變多個==)

==盡量不要使用table布局==

* CommonJs用在服務器端，AMD和CMD用在瀏覽器環境
* AMD 是 RequireJS 在推廣過程中對模塊定義的規范化產出。
* MD 是 SeaJS 在推廣過程中對模塊定義的規范化產出。
* AMD:提前執行（異步加載：依賴先執行）+延遲執行
* CMD:延遲執行（運行到需加載，根據順序執行）

模塊就是實現特定功能的文件，把幾個函數放在一個文件里就構成了一個模塊。
需要的時候加載這個文件，調用其中的函數即可。

（1）函數寫法

   function f1(){
　　　　//...
　　}
　　function f2(){
　　　　//...
　　}

==缺點==：
這樣做會==污染全局變量==，無法保證不與其他模塊發生==變量名沖突==，而且==模塊成員之間沒什么關系==。

（2）對象寫法

 var module = {
　　　　star : 0,
　　　　f1 : function (){
　　　　　　//...
　　　　},
　　　　f2 : function (){
　　　　　　//...
　　　　}
　　};
 module.f1();
 module.star = 1;

==優點==：模塊寫成一個對象，模塊成員都封裝在對象里，通過調用對象屬性，訪問使用模塊成員。
==缺點==：==暴露了模塊成員==，==外部可以修改模塊內部狀態==。

（3）立即執行函數

   var module = (function(){
　　　　var star = 0;
　　　　var f1 = function (){
　　　　　　console.log("ok");
　　　　};
　　　　var f2 = function (){
　　　　　　//...
　　　　};
         return {
            f1:f1,
            f2:f2
         };
　　})();
    module.f1();  //ok
    console.log(module.star)  //undefined

==優點==：外部無法訪問內部私有變量

CommonJS是服務器端模塊的規范，由Node推廣使用。
由于服務端編程的復雜性，如果==沒有模塊很難與操作系統及其他應用程序互動==。

CommonJS規范:

一個多帶帶的文件就是一個模塊。每一個模塊都是一個多帶帶的作用域，也就是說，在該==模塊內部定義的變量，無法被其他模塊讀取==，除非定義為==global==對象的屬性。

==輸出模塊變量==的最好方法是使用==module.exports==對象。

==加載模塊使用require==方法，該方法==讀取一個文件并執行==，==返回文件內部module.exports對象==

使用方法如下：

//math.js
exports.add = function() {
    var sum = 0, i = 0, args = arguments, l = args.length;
    while (i < l) {
      sum += args[i++];
    }
    return sum;
};

//increment.js
var add = require("math").add;
exports.increment = function(val) {
    return add(val, 1);
};

//index.js
var increment = require("increment").increment;
var a = increment(1); //2

問題：

require 是同步的。模塊系統需要同步讀取模塊文件內容，并編譯執行以得到模塊接口。
但在瀏覽器端問題多多。

原因：

瀏覽器端，加載 JavaScript 最佳、最容易的方式是在 document 中插入script標簽。
但腳本標簽天生異步，傳統 CommonJS 模塊在瀏覽器環境中無法正常加載。

解決思路

開發一個服務器端組件，對模塊代碼作靜態分析，將模塊與它的依賴列表一起返回給瀏覽器端。 這很好使，但需要服務器安裝額外的組件，并因此要調整一系列底層架構。

另一種解決思路是，用一套標準模板來封裝模塊定義：

define(function(require, exports, module) {

  // The module code goes here

});

這套模板代碼為模塊加載器提供了機會，使其能在模塊代碼執行之前，對模塊代碼進行靜態分析，并動態生成==依賴列表==。

//math.js
define(function(require, exports, module) {
  exports.add = function() {
    var sum = 0, i = 0, args = arguments, l = args.length;
    while (i < l) {
      sum += args[i++];
    }
    return sum;
  };
});

//increment.js
define(function(require, exports, module) {
  var add = require("math").add;
  exports.increment = function(val) {
    return add(val, 1);
  };
});

//index.js
define(function(require, exports, module) {
  var inc = require("increment").increment;
  inc(1); // 2
});

* AMD是"Asynchronous Module Definition"的縮寫。

* 由于不是JavaScript原生支持，使用AMD規范進行頁面開發需要用到對應的庫函數RequireJS

* AMD 是 RequireJS 在推廣過程中對模塊定義的規范化的產出

* 采用異步方式加載模塊，模塊的加載不影響它后面語句的運行。所有依賴這個模塊的語句，都定義在一個回調函數中，等到加載完成之后，這個回調函數才會運行。

==RequireJS主要解決兩個問題：==

多個js文件可能有依賴關系，被依賴的文件需要早于依賴它的文件加載到瀏覽器

js加載的時候瀏覽器會停止頁面渲染，加載文件越多，頁面失去響應時間越長

==RequireJs采用require()語句加載模塊，不同于CommonJS，它要求兩個參數：==

第一個參數[module]，是一個數組，里面的成員就是要加載的模塊；

第二個參數callback，則是加載成功之后的回調函數。math.add()與math模塊加載不是同步的，瀏覽器不會發生假死。

require([module], callback);

require([increment"], function (increment) {
　   increment.add(1);
});

==define()函數==

RequireJS定義了一個函數 define，它是全局變量，用來定義模塊:

define(id?, dependencies?, factory);

==參數說明：==

id：指定義中模塊的名字，可選；如果沒有提供該參數，模塊的名字應該默認為模塊加載器請求的指定腳本的名字。如果提供了該參數，模塊名必須是“頂級”的和絕對的（不允許相對名字）。

依賴dependencies：是一個當前模塊依賴的，已被模塊定義的模塊標識的數組字面量。

依賴參數是可選的，如果忽略此參數，它應該默認為["require", "exports", "module"]。然而，如果工廠方法的長度屬性小于3，加載器會選擇以函數的長度屬性指定的參數個數調用工廠方法。

工廠方法factory，模塊初始化要執行的函數或對象。如果為函數，它應該只被執行一次。如果是對象，此對象應該為模塊的輸出值。

define("alpha", ["require", "exports", "beta"], function (require, exports, beta) {
      exports.verb = function() {
          return beta.verb();
          //Or:
          return require("beta").verb();
      }
  });

==RequireJs使用例子==

require.config是用來定義別名的，在paths屬性下配置別名。然后通過requirejs(參數一，參數二)；

第一個參數是數組，傳入我們需要引用的模塊名

第二個參數是個回調函數，回調函數傳入一個變量，代替剛才所引入的模塊。

main.js
//別名配置
requirejs.config({
    paths: {
        jquery: "jquery.min" //可以省略.js
    }
});
//引入模塊，用變量$表示jquery模塊
requirejs(["jquery"], function ($) {
    $("body").css("background-color","red");
});

引入模塊也可以只寫require()。requirejs通過define()定義模塊，定義的參數上同。在==此模塊內的方法和變量外部是無法訪問的==，只有通過return返回才行.

//將該模塊命名為math.js保存。
//math.js
define("math",["jquery"], function ($) {//引入jQuery模塊
    return {
        add: function(x,y){
            return x + y;
        }
    };
});

//main.js引入模塊方法
require(["jquery","math"], function ($,math) {
    console.log(math.add(10,100));//110
});

* CMD 即Common Module Definition通用模塊定義
* CMD規范是國內發展出來的
* CMD有個瀏覽器的實現SeaJS
* SeaJS要解決的問題和requireJS一樣，只在