摘要：三性能優(yōu)化處理做工具類的項(xiàng)目，性能是非常大的挑戰(zhàn)，我總結(jié)了以下幾個(gè)常見(jiàn)的性能優(yōu)化點(diǎn)數(shù)據(jù)緩存。防抖，節(jié)流，事件委托內(nèi)存釋放。

1、功能介紹

2、技術(shù)架構(gòu)

3、性能優(yōu)化

4、細(xì)節(jié)分享

5、開(kāi)源說(shuō)明

很久沒(méi)寫(xiě)過(guò)技術(shù)類的文章了，這次給大家分享一個(gè)近期的項(xiàng)目，采用react+mobx+jquery構(gòu)建的大型工具類項(xiàng)目。查看項(xiàng)目網(wǎng)址。

如果用過(guò)易企秀，maka或者百度H5，搜狐快站的朋友應(yīng)該對(duì)這個(gè)工具是非常熟悉的，用戶通過(guò)托拉拽等操作，即可輕松實(shí)現(xiàn)HTML5代碼的編輯工作，大大節(jié)約了開(kāi)發(fā)成本，也可以對(duì)模板進(jìn)行二次編輯，快速生成新的H5頁(yè)面，今天的主角是H5DS (全稱：HTML5 Design software) 這是一款WEB的H5制作工具。讓不會(huì)寫(xiě)代碼的人也能輕松快速上手制作H5頁(yè)面。

做產(chǎn)品前，規(guī)劃很重要，這將直接決定項(xiàng)目的成?。∮械捻?xiàng)目需要1年，2年或者更長(zhǎng)的時(shí)間去規(guī)劃，規(guī)劃 好了才能厚積薄發(fā)！這時(shí)候我們需要逃離程序員的思維，不要單純的從程序開(kāi)發(fā)的角度去看待整個(gè)項(xiàng)目！

產(chǎn)品思維：程序員在要求產(chǎn)品經(jīng)理懂一些代碼的時(shí)候，作為程序員也要有產(chǎn)品思維，在做產(chǎn)品前，心里得有個(gè)譜，要做一個(gè)怎樣的產(chǎn)品（大型項(xiàng)目，小型項(xiàng)目，精品項(xiàng)目，隨便搞搞練手…）？面向的用戶群體（to C, to B，面向設(shè)計(jì)師，面向程序員…）？產(chǎn)品定位（面向高端用戶，面向低端用戶）？用戶群體的需求特征（懂程序？懂設(shè)計(jì)？…）？用戶的操作習(xí)慣（比如設(shè)計(jì)師大部分都會(huì)使用PS，是按照PS的設(shè)計(jì)風(fēng)格來(lái)做？…）？等等，一大堆的問(wèn)題，在做產(chǎn)品前，先盡量的總結(jié)這些疑問(wèn)，然后給產(chǎn)品一個(gè)比較好的定位。

程序員思維：一款優(yōu)秀的工具具備有高拓展性，方便易用，性能卓越，我們的目標(biāo)不只是做工具，還要做一個(gè)vscode一樣的高擴(kuò)展性的工具，如何解決高擴(kuò)展性的問(wèn)題？如何做編輯器的內(nèi)核抽離？這些應(yīng)該是程序員考慮的事情。

如何推廣？如何包裝？如何運(yùn)營(yíng)？如何讓這個(gè)項(xiàng)目火起來(lái)并被大家接受和認(rèn)可？如何讓更多程序員參與其中？這些是站在一個(gè)運(yùn)營(yíng)人員的角度考慮的問(wèn)題。

兼顧以上幾點(diǎn)，我們不僅是一個(gè)優(yōu)秀的程序員，還是一個(gè)優(yōu)秀的產(chǎn)品經(jīng)理，更是一個(gè)接地氣的運(yùn)營(yíng)人員，當(dāng)我們做項(xiàng)目的前期，無(wú)論是產(chǎn)品，程序員，運(yùn)營(yíng)推廣，這些方面的都得考慮到，雖然一個(gè)人不能做全部的工作，但是懂點(diǎn)不至于被別人忽悠。如果你的目標(biāo)是做管理而不僅僅是一個(gè)程序員，那這些能力，多少應(yīng)該掌握一點(diǎn)。

技術(shù)選型如下：

前端：react, mobx, less, jquery
后端：nodejs, mysql, ngnix
工具：babel, webpack, gulp, eslint
H5DS的技術(shù)選型基本上是JS的技術(shù)棧，只能說(shuō)這套技術(shù)很前端。接下來(lái)我解釋下，為什么要這樣選型。

why react ?

整個(gè)H5頁(yè)面制作的思路是這樣的：生成后的H5頁(yè)面雖然是單頁(yè)，但是單頁(yè)下面還是有多個(gè)子頁(yè)面，我們可以大致的可以分為3個(gè)類。APP包含了整個(gè)頁(yè)面的內(nèi)容。Page包含了單個(gè)子頁(yè)面的內(nèi)容，Layer是每個(gè)子頁(yè)面里面的元素。這樣理解我們的思路就很清晰了。每個(gè)H5頁(yè)面對(duì)應(yīng)有一個(gè)JSON文件，而JSON轉(zhuǎn)化為JSX模板，再通過(guò)renderToStaticMarkup將JSX轉(zhuǎn)化為HTML, 我覺(jué)得這幅圖是最有效的說(shuō)明，react強(qiáng)大的服務(wù)端渲染函數(shù)，可以直接吧JSX轉(zhuǎn)化為HTML。沒(méi)有任何人說(shuō)過(guò)，服務(wù)器渲染方法就只能在服務(wù)器端使用，這里我直接拿到前端使用，而且效果還非常棒，具體的方法renderToStaticMarkup

// 這個(gè)JSON 文件大致格式
{
  ...,
  "name": "H5頁(yè)面名稱",
  "desc": "H5頁(yè)面描述信息",
  "pic": "主圖URL",
  "pages": [ // H5由多個(gè)子頁(yè)面組成
    {
      ...,
      layers: [] // 子頁(yè)面由多個(gè)圖層組成
    }
  ]
}

// JSX -> HTML 的方法
import { renderToStaticMarkup } from "react-dom/server";
renderToStaticMarkup(JSX);

why mobx ?

我是個(gè)野蠻的開(kāi)發(fā)者，喜歡用最簡(jiǎn)單的代碼，去實(shí)現(xiàn)業(yè)務(wù)，而mobx更加靈活多變，沒(méi)有那么多限制和約束，而redux好比墨守成規(guī)的名門(mén)子弟，雖然約束是可以讓代碼更加規(guī)范，如果是以大量的代碼堆積出來(lái)的規(guī)范，我還是覺(jué)得已經(jīng)脫離了技術(shù)的實(shí)際意義，同樣是增加維護(hù)成本的，我絕對(duì)不是一個(gè)合格的程序員，如果能 code less，do more，我寧愿犧牲規(guī)范不擇手段。

why jquery ?

之前很多朋友這樣對(duì)我說(shuō)：用了react就不要用jquery了，jquery能做的事情react也能做，為什么還要用其他庫(kù)？一點(diǎn)也不規(guī)范。其實(shí)我的回答往往是這樣的：我比較任性，而且喜歡jquery！為什么都普遍認(rèn)為jquery和react不要共存，大致有以下幾點(diǎn)：

從框架層面講，react可以通過(guò)state修改dom，數(shù)據(jù)會(huì)從Virtual DOM到真實(shí)的DOM走一遍，如果用了jquery是直接修改DOM，這樣導(dǎo)致的結(jié)果就是state和真實(shí)的DOM就不能對(duì)應(yīng)起來(lái)了，react也就失去了他存在的意義。

從思想方面來(lái)講，jquery直接操作dom和react的思想所違背。

但是實(shí)際的業(yè)務(wù)千變?nèi)f化，有哪個(gè)框架能說(shuō)自己能輕松實(shí)現(xiàn)所有業(yè)務(wù)？jquery是工具庫(kù)，react是ui庫(kù)，如果運(yùn)用得當(dāng)，個(gè)人覺(jué)得配合起來(lái)還是非常不錯(cuò)的選擇！有時(shí)候用jquery操作DOM，在性能方面能完勝react。比如拖動(dòng)排序功能！

技術(shù)選型的問(wèn)題說(shuō)完了，接下來(lái)聊聊整個(gè)項(xiàng)目的架構(gòu)吧！

第三個(gè)模塊大家仔細(xì)看會(huì)發(fā)現(xiàn)，實(shí)際上是和中間的業(yè)務(wù)層獨(dú)立開(kāi)的，這樣更有利于項(xiàng)目的擴(kuò)展和二次開(kāi)發(fā)。第三個(gè)模塊這里我們把他定義為內(nèi)核，基于這個(gè)內(nèi)核，我們可以做web層，server層，以及擴(kuò)展layer層，內(nèi)核更像ueditor那樣的存在，可以直接在項(xiàng)目中引用，讓內(nèi)核不再依賴任何server，可以獨(dú)立使用。

做工具類的項(xiàng)目，性能是非常大的挑戰(zhàn)，我總結(jié)了以下幾個(gè)常見(jiàn)的性能優(yōu)化點(diǎn)：

數(shù)據(jù)緩存。（indexeddb,localStorage,localSession）

交互優(yōu)化。（防抖debounce，節(jié)流throttle，事件委托）

內(nèi)存釋放。（componentWillUnmount，DOM釋放，引用地址釋放）

因?yàn)榫庉嬈髦校瑘D片裁剪是常用的功能，如果采用傳統(tǒng)裁剪模式（前端把裁剪信息傳到服務(wù)器，由服務(wù)器完成裁剪，返回新的url）對(duì)服務(wù)器的壓力非常大，為了節(jié)約這些性能開(kāi)銷，我們自創(chuàng)了一個(gè)裁剪的方法，圖片裁剪后，并沒(méi)有直接丟到服務(wù)器去，該方法大大節(jié)約了服務(wù)器的開(kāi)銷。具體業(yè)務(wù)流程如下：

拖動(dòng)排序如果用純r(jià)eact去實(shí)現(xiàn)。業(yè)務(wù)應(yīng)該是這樣的：

如果用jquery + react 去實(shí)現(xiàn)：

第二種結(jié)合jquery的方式，大大減少了react中render函數(shù)的執(zhí)行，不用多次執(zhí)行diff操作，實(shí)現(xiàn)了高性能的拖動(dòng)方案。

我們固定了顯示區(qū)域大小為 320 x 514，要兼容所有機(jī)型，就要對(duì)其進(jìn)行縮放處理，要么高100%，要么是寬100%，通過(guò)JS去計(jì)算顯示區(qū)域的縮放比例，然后居中處理，就可做到最大化的兼容各種機(jī)型。背景是全局的，示意圖分別表示手機(jī)常用尺寸的實(shí)例，高度超出的處理，寬度超出的處理，紅色部分是顯示區(qū)域，灰色部分是320*486的原始尺寸比例，黑色陰影部分是灰色部分進(jìn)行scale縮放填充的區(qū)域。

項(xiàng)目已經(jīng)在github( https://github.com/h5ds/h5ds ) 上面開(kāi)源，供大家學(xué)習(xí)使用，擁抱開(kāi)源是我們的選擇，但是希望大家能遵守使用規(guī)范，針對(duì)個(gè)人，我們是免費(fèi)的，但是針對(duì)商業(yè)使用，我們是收費(fèi)的，這個(gè)決定相信大家都能理解。

歡迎加入QQ群交流：549856478