摘要：值得一提的是，微信瀏覽器的內(nèi)核，也即是瀏覽器內(nèi)核已經(jīng)內(nèi)置了很多游戲引擎比如白鷺游戲引擎與，供開(kāi)發(fā)者開(kāi)發(fā)游戲，所以長(zhǎng)時(shí)間來(lái)看，微信瀏覽器的畫(huà)布性能將會(huì)越來(lái)越強(qiáng)大。

1、什么是流暢的用戶體驗(yàn)？

游戲的開(kāi)發(fā)界有一個(gè)理論，就是當(dāng)動(dòng)畫(huà)或者交互響應(yīng)達(dá)到60FPS(60幀每秒)的時(shí)候，就可以定義為流暢，按此理論，那么每幀里所有操作必須在16ms完成。要想提高頁(yè)面的用戶體驗(yàn)，必須在性能上下功夫。最早做動(dòng)畫(huà)都是用 setTimeout來(lái)實(shí)現(xiàn)的，而 setTimeout的處理回調(diào)的時(shí)間精度都在 16ms 左右。所以，可以想象正常用頁(yè)面這兩個(gè)函數(shù)就已經(jīng) 16 ms了，再加上reflow/repaint/compositing 卡頓或跳幀就是家常便飯了。不過(guò)還好的是w3c 標(biāo)準(zhǔn)和各瀏覽器廠商較早就支持了動(dòng)畫(huà)接口 RAF（RequestAnimationFrame 函數(shù)）來(lái)處理動(dòng)畫(huà)幀回調(diào)。解決了上述 setTimeout不足的問(wèn)題。但是，另一個(gè)問(wèn)題仍然沒(méi)解決，當(dāng)瀏覽器打開(kāi)網(wǎng)頁(yè)時(shí)，需要解析文檔，在內(nèi)存中生成DOM結(jié)構(gòu)，如果遇到復(fù)雜的文檔，這個(gè)過(guò)程是很慢的。如果遇上低端的手機(jī)瀏覽器，可以想象一下，如果網(wǎng)頁(yè)上有上萬(wàn)個(gè)形狀（不管是圖片或CSS），生成DOM需要多久？更不要提與其中某一個(gè)形狀互動(dòng)了。

用戶與瀏覽器互動(dòng)，從技術(shù)上看就是用戶在操作DOM，所有的DOM操作都是同步的，會(huì)堵塞瀏覽器。JavaScript操作DOM時(shí)，必須等前一個(gè)操作結(jié)束，才能執(zhí)行后一個(gè)操作。只要一個(gè)操作有卡頓，整個(gè)網(wǎng)頁(yè)就會(huì)短暫失去響應(yīng)。瀏覽器重繪網(wǎng)頁(yè)的頻率是60FPS，JavaScript做不到在16毫秒內(nèi)完成DOM操作，因此產(chǎn)生了跳幀。用戶體驗(yàn)上的不流暢、不連貫就源于此。JavaScript語(yǔ)言運(yùn)行效率本身很快，但是DOM太慢了，DOM拖慢JavaScript。為了解決這個(gè)問(wèn)題，React出現(xiàn)了，React是 Facebook 推出的一個(gè)用來(lái)構(gòu)建用戶界面的 JavaScript 開(kāi)源框架，React的最引人注目的特征就是引入了虛擬DOM（Virtual DOM）這個(gè)概念，在瀏覽器端用JavaScript實(shí)現(xiàn)了一套DOM API。基于React進(jìn)行開(kāi)發(fā)時(shí)所有的DOM構(gòu)造都是通過(guò)虛擬DOM進(jìn)行，每當(dāng)用戶界面需要變化時(shí)，React都會(huì)重新構(gòu)建整個(gè)DOM樹(shù)，然后React將當(dāng)前整個(gè)DOM樹(shù)和上一次的DOM樹(shù)進(jìn)行對(duì)比，得到DOM結(jié)構(gòu)的區(qū)別，然后僅僅將需要變化的部分進(jìn)行實(shí)際的瀏覽器DOM更新。React實(shí)現(xiàn)了代碼最小化參與DOM操作的方法，大大提升了瀏覽器的性能。

Canvas 是 HTML5 的畫(huà)布元素，也一個(gè)原生的DOM 元素。它相當(dāng)于一個(gè)“白板”，我們可以通過(guò)javascript在這塊白板上增加文字與圖像，“繪制”一些可視內(nèi)容。目前大多數(shù)H5游戲和動(dòng)畫(huà)特效都是用canvas實(shí)現(xiàn)的。很多在微信里傳播的小游戲和小應(yīng)用，也是用canvas實(shí)現(xiàn)的。用canvas的話整個(gè)頁(yè)面只用一個(gè)DOM 元素，并且瀏覽器只需要繪制一次形成一幅圖。這大大降低了DOM 數(shù)量與渲染的復(fù)雜度。更好的是，canvas默認(rèn)支持GPU硬件加速的，可以將原來(lái) CPU 密集型操作變成 GPU 操作。提高了動(dòng)畫(huà)的流暢度。值得一提的是，微信瀏覽器的內(nèi)核，也即是QQ瀏覽器 X5 內(nèi)核已經(jīng)內(nèi)置了很多游戲引擎（比如白鷺游戲引擎與cocos2dx），供開(kāi)發(fā)者開(kāi)發(fā)canvas游戲，所以長(zhǎng)時(shí)間來(lái)看，微信瀏覽器的畫(huà)布性能將會(huì)越來(lái)越強(qiáng)大。

大多數(shù)現(xiàn)代移動(dòng)設(shè)備都擁有硬件加速的 canvas，我們?yōu)槭裁床焕闷饋?lái)呢？HTML5 游戲已經(jīng)做到了。我們?yōu)槭裁床徊捎糜螒虻乃悸吩O(shè)計(jì)界面，在 canvas 上開(kāi)發(fā)應(yīng)用界面么，用canvas來(lái)渲染頁(yè)面呢？相信你已經(jīng)想到了，但是有人已經(jīng)做到了，那就是Flipboard公司的React-canvas。React-canvas是什么呢？光看名字就知道這是跟react和canvas相關(guān)的。React-canvas，可以使我們用react技術(shù)渲染canvas。

React Canvas 是依賴于React的一個(gè)組件，它擁有了渲染到canvas的能力，它可以讓我們脫離繁瑣的canvas命令式繪圖，使用簡(jiǎn)單的css布局(Layout)。接下來(lái)給大家演示一個(gè)簡(jiǎn)單的圖文實(shí)現(xiàn)。

新時(shí)代的前端開(kāi)發(fā)離不開(kāi)node環(huán)境，所以，react-canvas也不例外，node安裝的具體步驟不再贅述。記住，Node版本不低于4.0。

5.2創(chuàng)建項(xiàng)目空間

在D: odejs eactdemo創(chuàng)建文件夾，此為開(kāi)發(fā)的根目錄 打開(kāi)到此目錄，切換到命令行，執(zhí)行 npm init，默認(rèn)回車(chē)，初始化package.json

需要在node環(huán)境上安裝一系列框架 切換到命令行， 執(zhí)行

npm install react

安裝基礎(chǔ)框架react（注：安裝v0.13.0，新版本我沒(méi)試驗(yàn)，不知是否可行）， 執(zhí)行

npm install jsx-loader

安裝編譯react用的jsx-loader插件， 執(zhí)行

npm install react-canvas

安裝核心框架react-canvas， 執(zhí)行

npm install webpack

安裝打包代碼用的工具webpack。 然后創(chuàng)建文本文件index.html， 創(chuàng)建配置文件webpack.config.js， 創(chuàng)建js文件夾存放代碼文件。 至此，你的工作環(huán)境下應(yīng)該有

其中node_modules文件夾下，應(yīng)該至少有自動(dòng)生成的react、react-canvas、webpack三個(gè)文件夾。

打開(kāi)index.html文件，代碼如下：

  "Content-type" content="text/html; charset=utf-8">
  "viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  


  
"main">
  

主頁(yè)面只有一個(gè)id=main的div標(biāo)簽，并外鏈一個(gè)js文件。 打開(kāi)js文件夾，創(chuàng)建index.js，代碼如下

var React = require("react");
var ReactCanvas = require("react-canvas");

var Surface = ReactCanvas.Surface;
var Image = ReactCanvas.Image;
var Text = ReactCanvas.Text;

var MyComponent = React.createClass({

// 界面渲染
  render: function () {
    var surfaceWidth = window.innerWidth;
    var surfaceHeight = window.innerHeight;
    var imageStyle = this.getImageStyle();
    var textStyle = this.getTextStyle();

    return (
      
        "http://img1.gtimg.com/joke/pics/hv1/193/44/1996/129801313.png" />
        
          哈哈，你來(lái)打我呀
        
      
    );
  },
// 計(jì)算居中
  getImageHeight: function () {
    return Math.round(window.innerHeight / 2);
  },
   getImageWidth: function () {
    return Math.round(window.innerWidth / 2);
  },

//  圖片樣式
  getImageStyle: function () {
    return {
      top: this.getImageHeight() -32,
      left: this.getImageWidth() -32,
      width: 64,
      height: 64
    };
  },

// 文字樣式
  getTextStyle: function () {
    return {
      top: this.getImageHeight() + 64,
      left: 0,
      width: window.innerWidth,
      height: 20,
      lineHeight: 20,
      fontSize: 12,
      textAlign : "center"
    };
  }

});
React.render(, document.getElementById("main"));

配置webpack.config.js

module.exports = {
	//入口文件
  entry: "./js/main.jsx",
	//輸出文件
  output: {
    path: __dirname,
    filename: "bundle.js"
  },
module: {
    loaders: [
// 凡是遇到j(luò)sx、js結(jié)尾的，都用jsx-loader這個(gè)插件來(lái)加載，
 // 且啟用harmony模式
      { test: /.jsx$/, loader: "jsx-loader");},
      { test: /.js$/, loader: "jsx-loader");},
    ]
  },
 // 表示這個(gè)依賴項(xiàng)是外部lib，遇到require它不需要編譯，
 // 且在瀏覽器端對(duì)應(yīng)window.React
  //externals: {
    //"react": "window.React"
  //},
// 現(xiàn)在可以寫(xiě) require("file") 代替 require("file.jsx")
  resolve: {
    root: __dirname,
    extensions: ["", ".js", ".jsx"]
  }
};

配置完畢后，切換到命令行執(zhí)行 webpack -p 命令，打包，編譯 打包后在根目錄下生成一個(gè)bundle.js，直接用瀏覽器打開(kāi)，就可以看到效果了。

線上demo地址：點(diǎn)我

react-canvas的語(yǔ)法和react一樣，如果你熟悉react，react-canvas很容易上手。react-canvas自定義了幾個(gè)標(biāo)簽。這些標(biāo)簽也都是標(biāo)準(zhǔn)的React components。

Surface是一個(gè)頂級(jí)標(biāo)簽，是一個(gè)容器，你可以把任何元素放在上面，可以把它看成canvas元素，整個(gè)項(xiàng)目要被套在一個(gè)surface里面。在上述示例中已經(jīng)使用。

Layer 層級(jí)僅次于surface，可以放其他元素。 基本樣式和屬性例如top, width, left, height, backgroundColor and zIndex可以在這一層設(shè)置。

Group是一個(gè)容器，因?yàn)閞eact渲染組件時(shí)必須要有一個(gè)總的標(biāo)簽包含所有的散列標(biāo)簽，在react-canvas中，Group扮演了div的角色，可以用來(lái)做零散標(biāo)簽的父標(biāo)簽。把一系列相關(guān)聯(lián)標(biāo)簽用Group封裝起來(lái)，一方面可以提高代碼的內(nèi)聚，更加模塊化，另一方面可以提高頁(yè)面滾動(dòng)時(shí)的性能。

Text 是用來(lái)存放文本的，是一個(gè)彈性的標(biāo)簽，canvas不支持自動(dòng)截?cái)鄵Q行，而Text標(biāo)簽支持。

Image 跟你想象的一樣，用來(lái)放圖片的。 但是它支持加載完畢后才顯示，并且可以隨意的隱藏。

ListView是一個(gè)列表，可以認(rèn)為它相當(dāng)于HTML頁(yè)面里的ul或者native app中的UITableView ，它可以提高頁(yè)面的滾動(dòng)性能。 同時(shí)react-canvas給各個(gè)標(biāo)簽以事件支持，有touchstart，move，end，click等事件。

接下來(lái)介紹如何在 React Canvas 中創(chuàng)建一個(gè)達(dá)到60 fps ，分頁(yè)的滾動(dòng)列表。事實(shí)證明這實(shí)現(xiàn)起來(lái)非常容易， 修改main.js代碼為

/** @jsx React.DOM */

"use strict";

var React = require("react");
var ReactCanvas = require("react-canvas");
// page文件負(fù)責(zé)渲染單個(gè)頁(yè)面
var Page = require("./components/Page");
// data文件存放json格式的圖文
var articles = require("./common/data");

var Surface = ReactCanvas.Surface;
var ListView = ReactCanvas.ListView;

var App = React.createClass({
// 渲染整個(gè)列表
  render: function () {
    var size = this.getSize();
    return (
      
        true}
          scrollingDeceleration={0.92}
          scrollingPenetrationAcceleration={0.13}
          numberOfItemsGetter={this.getNumberOfPages}
          itemHeightGetter={this.getPageHeight}
          itemGetter={this.renderPage} />
      
    );
  },
// 渲染單頁(yè)
  renderPage: function (pageIndex, scrollTop) {
    var size = this.getSize();
    var article = articles[pageIndex % articles.length];
    var pageScrollTop = pageIndex * this.getPageHeight() - scrollTop;
    return (
      
    );
  },
// 瀏覽器大小
  getSize: function () {
    return document.getElementById("main").getBoundingClientRect();
  },
// 整個(gè)列表的外觀
  getListViewStyle: function () {
    var size = this.getSize();
    return {
      top: 0,
      left: 0,
      width: size.width,
      height: size.height,
    };
  },
 // 設(shè)置頁(yè)面的可滾動(dòng)的次數(shù)，若超過(guò)頁(yè)面的數(shù)量，循環(huán)滾動(dòng)
  getNumberOfPages: function () {
    return 9;
  },
// 計(jì)算單頁(yè)的高度
  getPageHeight: function () {
    return this.getSize().height;
  }

});

React.render(, document.getElementById("main"));

整個(gè)頁(yè)面代碼由一個(gè)surface，一個(gè)listview，9個(gè)page組成，可以上下屏滾動(dòng)。react-canvas將網(wǎng)頁(yè)變成了一個(gè)canvas，用戶就等于在跟圖片互動(dòng)，這樣就繞開(kāi)了DOM，降低了操作時(shí)滯。而且，canvas可以被硬件加速，這樣就提高了性能，體驗(yàn)非常流暢。

你可以查看這個(gè)線上的Demo點(diǎn)我，pc用戶記得用chrome模擬手機(jī)瀏覽器。文章末尾附件里有完整實(shí)現(xiàn)的源代碼。

React-canvas使用一個(gè) canvas 元素來(lái)繪制界面，完成滾動(dòng)。在每一個(gè)觸摸事件時(shí)，根據(jù)當(dāng)前的滾動(dòng)程度去更新渲染樹(shù)。之后，整個(gè)渲染樹(shù)使用新的坐標(biāo)來(lái)重新渲染。在 canvas 上有個(gè)重要的技術(shù)叫離屏canvas（off-screen），可以現(xiàn)在內(nèi)存中完成繪制，之后可以一次性復(fù)制到用戶界面，并且使用離屏層重新繪制也是非?？斓?。React在界面更新之前會(huì)做虛擬 DOM 的 diff 。在render() 函數(shù)中只更新有變動(dòng)的界面，React進(jìn)一步提升了React-canvas的性能。流暢是React-canvas的主要優(yōu)點(diǎn)。 代碼基于react，因?yàn)閞eact現(xiàn)在比較火，很多前端已經(jīng)熟悉react的書(shū)寫(xiě)，react也有很多相關(guān)的組件，所以react-canvas比較應(yīng)景，讓一部分人很快的可以上手。另外兼容性也比較好，繼承react和canvas的兼容性和跨平臺(tái)優(yōu)點(diǎn)。

當(dāng)前不成熟和不穩(wěn)定，react一直在變動(dòng)，所以React-canvas也會(huì)隨之一并升級(jí)。react-canvas還不完善，很多DOM中的標(biāo)簽特性在目前react-canvas里面未能實(shí)現(xiàn)，比如無(wú)法對(duì)文本進(jìn)行復(fù)制，這讓使用React-canvas的時(shí)候會(huì)有一些限制。這個(gè)項(xiàng)目已經(jīng)在Github上開(kāi)源，作者也在對(duì)項(xiàng)目進(jìn)行重構(gòu)，期望下次更新的時(shí)候是一個(gè)功能強(qiáng)大的版本。另外，react-canvas的學(xué)習(xí)成本也比較高，使用react-canvas需要對(duì)react和canvas有一定的了解。

React Canvas并不能完全取代DOM。個(gè)人覺(jué)得只適用在移動(dòng)web（或者webview）上，手機(jī)的硬件資源相對(duì)有限，用戶互動(dòng)又相對(duì)頻繁，我們可以在我們的頁(yè)面中性能要求最關(guān)鍵的地方去使用它，尤其是在微信瀏覽器中很常見(jiàn)滾動(dòng)視圖這部分。當(dāng)渲染性能不是問(wèn)題的時(shí)候， DOM 可能是一個(gè)更好的方法。事實(shí)上，對(duì)于某些元素比如輸入字段，和音頻/視頻標(biāo)簽等，DOM是唯一的方法。從某種意義上說(shuō)，react-canvas也算是一個(gè)混合( hybird )的應(yīng)用程序。相比傳統(tǒng)的原生應(yīng)用，react-canvas內(nèi)容全部是 web 。我們?cè)陂_(kāi)發(fā)中可以把界面基于 dom 實(shí)現(xiàn)，并在適當(dāng)?shù)牡胤绞褂?canvas 渲染。DOM和canvas各取所長(zhǎng)，優(yōu)勢(shì)互補(bǔ)。React-canvas能將頁(yè)面的交互和性能水平提升到可以與本地應(yīng)用相競(jìng)爭(zhēng)，這就是它引人注意的地方。

我們?cè)趙eb開(kāi)發(fā)過(guò)程中，都見(jiàn)過(guò)或者使用過(guò)一些奇技淫巧，這種技術(shù)我們統(tǒng)稱(chēng)為黑魔法，這些黑魔法散落在各個(gè)角落，為了方便大家查閱和學(xué)習(xí)，我們做了收集、整理和歸類(lèi)，并在github上做了一個(gè)項(xiàng)目——awesome-blackmargic，希望各位愛(ài)鉆研的開(kāi)發(fā)者能夠喜歡，也希望大家可以把自己的獨(dú)門(mén)絕技分享出來(lái)，如果有興趣可以給我們發(fā)pr。

如果你對(duì)React感興趣，想進(jìn)一步了解React，加入我們的QQ群（784383520）吧！