The present situation of animation in WebApp

One of the great advantages of webapp is that it can have an animated effect comparable to native when the view is switched on, but most of the time it's just an idea, but the real situation is not the reason for this problem: ① phone CPU sucks! ② Phone card bad! Even if the quad-core rendering is also very problematic ③ high-end mobile browser will have Bug④ low-end mobile phone support is not good (domestic shanzhai machine laugh without words) because of the above reasons, in fact, do WebApp will be different degrees of the weakening animation, or in the local area use animation problem although difficult, there are plans, in fact, A few lines of code to kill, on our animation problem, before and after a few rounds back to my hand, the middle even handled the domestic well-known front end, of which two people also out of the book, so that animation is really difficult problem in the mobile is hard, today I know the animation to do a share, I hope you have a good plan, It's difficult to enlighten you. too many dom treesThe movement of the view is very different from the simple Picture slider component! The reason is that the DOM structure may be very complex, the move of the large DOM tree is very poor on the mobile side of the Simple list page, when the project more than 100, use the Iscroll class plug-in should be very cautious, such a move may be very card! and Dom tree complexity is directly related to the business, we have no way to control the DOM tree, because the business code may not go through our hands, even after passing, you are sure to make out of the DOM tree how small? Not necessarily. Short and Long page questionsThe so-called Short page is a view very long a view is very small, here problem handling is very annoying first of all we do the switch needs to switch the view position to the head (window.scroll (0, 0)) so the iOS will cause changes in the page viewport (the system occurs automatically), Or it will trigger the appearance of the low-end toolbar, this time the page jitter can not be avoided if each time do not execute window.scroll (0, 0), the switch will cause the short view is not visible I think of the solution is, mobile time will be scroll set to a relatively large, Moving when the top value of bview and scrolltop the same finally still need to perform the operation of Window.Scroll (0, 0), so this problem can only alleviate, cannot solve Phone Rendering problemsAs long as the mobile friends, will be the Samsung machine or some low-end machine rendering scorn! After the operation of the style, after the operation of the browser will not respond to your solution is: ① caused the browser to strongly redraw ② temporary additions and deletions a DOM structure but involves the view switch animation, very likely will appear some inexplicable question! Animation struggle above is a few inevitable problems, so-called solutions, but also self-deception if not improve efficiency, animation when the maximum reduction of the DOM structure is the only way, even if the reduction of the render tree is a progress its basic idea is to display only the elements of the viewport, the rest of the IgnoreHTTP://SANDBOX.RUNJS.CN/SHOW/5SZC5WCF

1 varFastrender =NewInherit ({2 3Initializefunction(opts) {4      This. Handleopts (opts);5      This. Init ();6   },7 8Handleopts:function(opts) {9     if(!opts | |!opts.doms | |!opts.doms.length)Throw' Fastrender param error ';Ten      This. Doms =opts.doms; One      This. Container = Opts.container | |$ (window); A      This. Rendercontainer = {}; -      This. Step = 50; -  the   }, -  -Init:function() { -      This. Initimgcontainer (); +      This. Initrender (); -      This. bindevents (); +   }, A  atBindevents:function() { -  -     //binding Events for container -      This. Container.on (' Scroll.fastrender ', $.proxy (function() { -        This. Initrender (); -     }, in      This)); -   }, to  +Initimgcontainer:function() { -     varEl, I, Len, offset; the      for(i = 0, Len = This. doms.length; i < Len; i++) { *El = $ ( This. Doms[i]); $offset =El.offset ();Panax Notoginseng  -       //this piece of cards the       //(function (EL) { +       //setTimeout (function () { A El.css ({ the' Width ': Offset.width, +' Height ': Offset.height -       }); $       //}, 0); $       //}) (EL); -  -       if(! This. Rendercontainer[offset.top]) { the          This. rendercontainer[offset.top] = []; -       }Wuyi        This. Rendercontainer[offset.top].push (EL); the     } -  Wu   }, -  About   /* $ the object traversal needs to be optimized to replace the numeric search with the coordinate search. -  -         */ -Initrender:function() { A     varHeight = This. Container.height (); +     varSrollheight = This. Container.scrolltop (); the     varK, _imgs, El, I, Len, Els; -  $      This. Doms.removeclass (' WL '); the  the      for(kinch  This. Rendercontainer) { the       //if ((parseint (k) < Srollheight + height + this.step) && (parseint (k) > Srollheig Ht-this.step)) { the       if((parseint (k) < Srollheight + Height- This. Step) && (parseint (k) > Srollheight + This. Step)) { -  inEls = This. Rendercontainer[k]; the          for(i = 0, len = els.length; i < Len; i++) { theEl =$ (els[i]); AboutEl.find ('. Lazy_wrapper ')). Show (); the         } the}Else { theEls = This. Rendercontainer[k]; +          for(i = 0, len = els.length; i < Len; i++) { -El =$ (els[i]); theEl.find ('. Lazy_wrapper ')). Hide ();Bayi         } the  the       } -}// for -  the   }, the  theDestroyfunction() { the     //binding Events for container -      This. Container.off ('. Fastrender '); the   } the  the });94  the varf =NewFastrender ({ theDoms: $ ('. Js_hotel_detail ')) the});

This demo idea is very good, if achievable, is undoubtedly the mobile side of a major contributor, in fact, is

Browser:10 points

IOS (4000):6 points

Android Xiaomi (1800):5 points

To 4 cores:4 points (1800)

Its performance in the browser is very good, the mobile phone will not be, so today's argument failed, the program also needs to optimize

This result can be predicted, in the rendering of the phone at all, so the smoothness is not up, the scheme abandoned

Another way to think, if you can bypass the DOM tree too much problem is also advisable, such as mobile time directly with a white page animation, this scheme is more shameful

Another option is to use Cavas to generate a thumbnail for this page, each move is actually a thumbnail, so the animation is smooth, but this scenario is very difficult, but also may cause other problems, this scenario I have to do verification

Ending

The end is not good, this problem I did not find a good solution, mobile animation has a long way to go ...