H5在線編輯器優化總結

花了三個半月作了個編輯器。本身一我的寫寫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。