javascript - RxJS performance numbers at animation speeds -


anyone have numbers/resources on rxjs performance when events happen @ animation-like speeds (e.g @ least 20 times second)? i'm looking refactor javascript simulator (which performs simulation steps @ least 20 times second) using events , listeners , i'd know if it's feasible use rxjs event queue/listener solution (so don't have write own).

i'm curious how scales when have hundred things listening on observable give me idea on how structure view updates (whether should keep few listeners , keep map of set of view elements need updating or keep simple having each element register listener).

google searching got me this:

is rxjs faster imperative?

and results bit concerning (10x slower plainer code still additional .005ms per event system 1 listener). i'd run own experiments well, scalability info (not performance other things bookkeeping , garbage collection) who's used rxjs on real project considerable number of listeners useful.

i've run preliminary experiments on rxjs 5 , here results:

  • setup: 10000 length event array
  • subscriber count: 1 20
  • output format: rx_{n}x_observer : total time process subscribe calls n subscribers.

benchmark code:

  var eventqueue: number[];   var initeventqueue = function () {     const init_max = 10000;     eventqueue = new array<number>(init_max);     (let = 0; < init_max; i++) {       eventqueue[i] = i;     }   }    export var testobservables = function () {     let observable = rx.observable;     initeventqueue();      (let observers = 1; observers <=20; observers++) {       let timername = `rx_${observers}x_observer`;       console.time(timername);       let eventqueueobservable = observable.from(eventqueue)         .map(function (x: number) { return x; });        (let ctr = 0; ctr < observers; ctr++) {         eventqueueobservable         .subscribe(function (x: number) {           let y= x * ctr;           return y;         });       }       console.timeend(timername);     }   }

output:

rx_1x_observer: 7.261962890625ms rx_2x_observer: 9.14794921875ms rx_3x_observer: 2.1669921875ms rx_4x_observer: 1.617919921875ms rx_5x_observer: 1.93310546875ms rx_6x_observer: 3.100830078125ms rx_7x_observer: 3.074951171875ms rx_8x_observer: 2.90673828125ms rx_9x_observer: 5.216796875ms rx_10x_observer: 4.488037109375ms rx_11x_observer: 5.946044921875ms rx_12x_observer: 4.888916015625ms rx_13x_observer: 5.302978515625ms rx_14x_observer: 5.02197265625ms rx_15x_observer: 7.6201171875ms rx_16x_observer: 7.156005859375ms rx_17x_observer: 6.6640625ms rx_18x_observer: 8.875ms rx_19x_observer: 9.205078125ms rx_20x_observer: 9.756103515625ms

the high numbers on first few results result of jit optimizations not kicking in yet, latter results more indicative of actual performance. if numbers right, overhead below 0.01ms per event*subscriber, more sufficient animation-time updates (at least long keep subscriber code simple).

unfortunately i've found subscribers have explicitly unsubscribed avoid garbage collection issues, , won't work architecture i'm aiming for. i'll go standard listener pattern using weakmaps instead.


Comments

Post a Comment

Popular posts from this blog

Is there a better way to structure post methods in Class Based Views -

i'm using class based views in django , never specify url in ajax calls , omit action parameter in form because know these requests go through post method of class based view. notice view - profile page make many requests depending on user updating on page - post method become convoluted , if/else mess example: def post(self, request, *args, **kwargs): # handle user changing available date if request.post.get('availabledate') != none: self.updateavailabledate(request) return jsonresponse({'result':'success'}) if request.post.get('newprojectname') != none: creative_user = creativeuserprofile.objects.get(id = request.user.id) project = project.create_project(creative_user, request.post['newprojectname']) project.save() return jsonresponse({'projectid': project.id }) if request.post.get('projectimage') != none , request.files['file']: proj
Read more

performance - Why is XCHG reg, reg a 3 micro-op instruction on modern Intel architectures? -

i'm doing micro-optimization on performance critical part of code , came across sequence of instructions (in at&t syntax): add %rax, %rbx mov %rdx, %rax mov %rbx, %rdx i thought had use case xchg allow me shave instruction , write: add %rbx, %rax xchg %rax, %rdx however, dimay found agner fog's instruction tables , xchg 3 micro-op instruction 2 cycle latency on sandy bridge, ivy bridge, broadwell, haswell , skylake. 3 whole micro-ops , 2 cycles of latency! 3 micro-ops throws off 4-1-1-1 cadence , 2 cycle latency makes worse original in best case since last 2 instructions in original might execute in parallel. now... cpu might breaking instruction micro-ops equivalent to: mov %rax, %tmp mov %rdx, %rax mov %tmp, %rdx where tmp anonymous internal register , suppose last 2 micro-ops run in parallel latency 2 cycles. given register renaming occurs on these micro-architectures, though, doesn't make sense me done way. why wouldn't register renamer
Read more

jquery - Responsive Navbar with Sub Navbar -

good day, forgive me nav vocabulary not best. if question confusing apologize. i'm working on navigation bar needs centered on page @ 768px , above. items in nav open (or perhaps toggle) subnav lives directly below. these nav should appear centered on page. i have been able work through responsive portion of nav bar, having main items align vertically , sub nav menu of each item roll out below, , gave them indent separation. working well. however, issue not responsive side, behavior @ width greater 768px. happens toggling menu's sub navigation pushes other main items down page below sub nav. here's code: $(document).ready(function () { //stick in fixed 100% height behind navbar don't wrap $('#slide-nav.navbar-inverse').after($('<div class="inverse" id="navbar-height-col"></div>')); $('#slide-nav.navbar-default').after($('<div id="navbar-height-col"></d
Read more