H5 Online Editor Optimization summary

It took 3.5 months to make an editor. Time is short, many can be optimized, and this article records the content to be optimized and optimized in the future.

This goods is capable ha son, this goods actually can make the animation, of course, has the interaction, the style. Similar to Yi Penxio, but there are some other features.

The user can edit the appearance of the component.

Modifies an event action.

Animations can be previewed in real time.

Details can be seen: http://120.25.241.85:8080/Main.html#/Editor/?projectId=77bffcbe4af14a92b76c32bd673bf629

Mobile-side preview: Mobile-side preview

Say back to the point, optimization, in fact, this version of the optimization does not.

Component drag-and-drop optimization.

Drag and drop is a very common function, is not to modify the Left,top on the line? Can you optimize it?

Yes, first 1th, I can do function throttling. 2nd, Left,top will trigger reflow, so in the drag process can be modified transform, the end of the time, and then modify the Left,top once.

Time axis optimization.

The timeline uses canvas, and when there is a lot of content and the animation is long, the timeline must show only the content that is sliding. For example, the following diagram shows only 1-85 frames of content, not all.

Animation optimization.

Animation optimization involved is the largest, this version of the animation using requestanimationframe (abbreviation: RAF), encapsulated into a ticker single case, the other components to be animated by the ticker throw events to update.

This ensures that the RAF is used only in one place throughout the project. However, it is still not smooth enough. Can we optimize it? I often ask myself.

Yes! Animated performance CSS3 > Canvas animation >raf>settimeout. In this order, the PC side is still using the RAF, the mobile phone side uses CSS3. Implementation method, when saving courseware, generate CSS3 animated string, of course, characters can also compress, Compression algorithm can refer to HTTP2.0 's head compression technology, generated by the CSS3 animation string, after the mobile phone to obtain, converted to style, the code to convert style specific reference manual (this is not a steal).

Component Custom Style optimization.

Now the component style, PC-side editing, save to the server, after the phone to get, but also to parse, parsing takes time Ah, obviously can see the time of the change of the page has a blank time.

Optimization method: PC-side editing after the generation of CSS, components using state machine.

The resource is pre-loaded.

Picture now Mobile browser has a feature, can not see the picture will not load, and so on to display the time before loading, this is very bad, perhaps displayed, the picture has not loaded, no content.

There is, suppose that there are 100 pictures in the scene, you can not start with 100 pictures of the cluttered loading bar, to have the order, of course, which Zhang Xian displayed on the first load, not shown in the order of pre-loading.

So we're going to get a picture. Load management, including preload, is loaded sequentially.

Courseware page data pre-loaded.

When the user plays the first page of the process, the first page of the resources have been loaded, this time you can immediately load the next page of page data.

Quit, the second version also do not know when to do, after all, is in spare time. The second edition is ready to use es6,angular2.0, of course the engine part may introduce Vue. I do not know if the code can not be open source after recognition.

H5 Online Editor Optimization summary