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。