花了三個半月做了個編輯器。自己一個人寫寫CSS，搞搞html，弄下JS，大部分精力都是掏鼓js，時間很倉促,后面領導幫忙寫了四個頁面邏輯（音頻，圖片，視頻）。
很多能優化的，以此文章記錄要已經優化和未來要優化的內容。
這貨能干哈子，這貨其實就是能做動畫的，當然，有交互，樣式。跟易企秀差不多，但，還有其他一些功能。
用戶能編輯組件的樣子。
修改事件動作。
動畫可以實時預覽。
詳細可以看：編輯器
手機端預覽：手機端預覽
說回正題,優化，其實這一版優化不行。
組件拖拽優化。
拖拽是很常用的功能，不就是修改left,top就行了？還能優化嗎？
可以，首先第一點，我可以做函數節流。第二點，left，top會觸發reflow，所以在拖動過程中可以先修改transform,結束的時候，再一次性修改left,top。
時間軸優化。
時間軸使用的是canvas，當內容很多，而且動畫很長的時候，時間軸必須只顯示滑動到的內容。例如下面這張圖，只顯示1-85幀的內容，而不是所有。
動畫優化。
動畫優化牽扯是最大的，這版本的動畫使用的是requestAnimationFrame（簡稱:RAF），封裝成ticker單例，其他要做動畫的組件都由ticker拋出事件進行更新。
這樣保證整個工程只有一處地方使用RAF。但是，還是不夠流暢。還能不能優化？我經常問自己。
能！動畫性能CSS3 > canvas動畫>RAF>setTimeout。按照這個順序，PC端還是使用RAF，手機端使用CSS3。實現方法，保存課件的時候，生成CSS3動畫字符串，當然，字符還能壓縮，壓縮算法可以參考HTTP2.0的頭部壓縮技術，生成的CSS3動畫字符串，在手機端獲取之后，轉換成style，轉換style的代碼具體參考手淘（這不算偷吧）。
組件自定義樣式優化。
現在的組件樣式，PC端編輯之后，保存到服務器，手機拿到之后，還要解析，解析需要花時間啊，明顯可以看出換頁的時候有一段空白時間。
優化方法：PC端編輯后生成CSS，組件使用狀態機。
資源預加載。
圖片現在手機瀏覽器有個特性，看不到的圖片不會加載，等要顯示的時候才加載，這樣很糟糕，也許顯示的時候，圖片還沒加載完，沒內容。
還有就是，假設場景里面有一百張圖片，不能一開始就一百張圖片雜亂無章的加載吧，要有順序，當然，哪張先顯示的就先加載，沒顯示的按順序預加載。
所以還要弄個圖片加載管理，包括預加載,按順序加載。
課件頁面數據預加載。
當用戶在播放第一頁的過程中，第一頁的資源已經全部加載了，這時候可以馬上加載下一頁的頁面數據。
數據保存優化。
每個課件有對應的工程數據，每個頁面有對應的頁面數據。數據的優化目前想到的就是不要保存默認值。例如下面的data,它的width是默認值，那么width就沒必要保存在服務器了。
var data = { width:100,//默認值 height:200 }
組件樣式更新優化。
動畫過程中，會設置組件的skewX,skewY等，在同一幀每次操作skewX或者skewY都要更改組件的transform。性能肯定不如，把當前幀的所有樣式操作放到下一幀，下一幀一開始把同一個對象修改transform的所有操作合並了，再更改樣式。
開發流程優化。
傳統開發，在工程里新建一個js文件，然后引入。
1就是寫script標簽，設置順序。2使用require.js寫配置，然后define。3使用sea.js，require.
本人as3出生，一個文件對應一個類，一個類只完成一個職責。這個項目總共249個類，每個類都去配置或者寫require，那太糟糕。
這流程能優化嗎？可以，自己定個規范，利用gulp，配合require.js自動生成配置文件，自動生成引用。無論是個人開發，還是團隊合作，都很方便。
下下圖的R.js就是自動生成的。為什么叫R.js。因為我曾經玩過安卓開發。
圖片優化.
使用svg代替一些簡單的圖形。svg體積小，保存工程的時候可以合並成一個或多個字符串，讀取的時候，分割就好。這樣可以減少HTTP請求。
離職了，第一版可優化空間還是很大，第二版也不知道什么時候做好，畢竟是用業余時間。
第二版准備使用ES6，angular2.0，當然引擎部分可能引入VUE。