guybedford
commented
8 years ago See also https://github.com/JonahBraun/jspm-perf-test for related performance benchmarks here.
Closed laurentgoudet closed 8 years ago
guybedford
commented
8 years ago See also https://github.com/JonahBraun/jspm-perf-test for related performance benchmarks here.
guybedford
commented
8 years ago I'm wondering if its worth posting a devtools bug for this.
laurentgoudet
commented
8 years ago Something SystemJS does is definitely not playing nice with the Chrome DevTools. While playing with the CPU profiler, I've realized that:
System.register Angular bundle vs. the CommonJS oneWhen looking at chrome://tracing it seems that the complete(evt) callback takes 3x more time with the profiler is off (314ms to 939ms):
robwormald
commented
8 years ago one point to mention - the distributed angular2 bundles are still using quite an old version of the System bundler - i believe its 10.0.3 - so perhaps something weird has happened in the interim.
guybedford
commented
8 years ago @laurentgoudet so to confirm, are you saying that the bundle at https://s3.amazonaws.com/angular2-bug/build.js is slower than the bundle at https://code.angularjs.org/2.0.0-alpha.45/angular2.js when devtools is open?
Note that the first bundle is a System.registerDynamic bundle not a System.register which is an important distinction here as well.
laurentgoudet
commented
8 years ago Yeah looking at it in http://embed.plnkr.co/Q3tmBtiBVjQmcEHqcFoF/preview and http://embed.plnkr.co/cgcaaCISIheWSv5jPAGi/preview it does seem that System.register performs better than System.registerDynamic when the DevTools are openned.
On a side note angular2 is still alpha and not really playing nice SystemJS: for instance, dynamically loading the router through SystemJS (as modules or as a bundle) silently breaks the framework (no more binding resolution or anything but no error), so I'd be wary of the side effects until it reaches beta quality.
guybedford
commented
8 years ago Interesting to know. System.registerDynamic has much deeper execution stacks by its nature of handling CommonJS stack-based execution, which may go some way to explaining it.
Thanks for mentioning - I believe angular2 are looking to support SystemJS workflows, so it may just be a case of reporting these sorts of issues to ensure they can work out correctly.
robwormald
commented
8 years ago Innnteresting. Does that mean it would be preferable for end users to build from the ES6 distribution?
On Nov 16, 2015, at 3:07 AM, Guy Bedford notifications@github.com wrote:
Interesting to know. System.registerDynamic has much deeper execution stacks by its nature of handling CommonJS stack-based execution, which may go some way to explaining it.
Thanks for mentioning - I believe angular2 are looking to support SystemJS workflows, so it may just be a case of reporting these sorts of issues to ensure they can work out correctly.
— Reply to this email directly or view it on GitHub https://github.com/systemjs/systemjs/issues/908#issuecomment-156996138.
guybedford
commented
8 years ago I'm not sure it's a good enough reason on its own for using the ES6 directly, but if there are other arguments it can be worth considering. Since this is a devtools thing it could be worth waiting to see if browsers optimize this further in due course as well.
Imported from https://github.com/angular/angular/issues/5196.
This plunker is a fork of the "original" Angular plunker, only the Angular version has been updated to the latest (2.0.0-alpha.45, unminifed).
This other fork is based on the first one, expect that the angular2 bundle has been generated by the System builder through
jspm bundle angular2/angular2 + reflect-metadata(version 0.16.14, see logs below).For some reason, the later is noticeably slower to bootstrap than the former: "loading..." is shown for several seconds while that the same Angular app bootstrap almost instantaneously in the first plunker. Both bundles have roughly the same size (~1MB).
I see the same issue in my local test app: swapping the System builder bundle (constructed through tracing angular2 ES6 imports) for the distributed bundle (
jspm_packages/npm/angular2@2.0.0-alpha.45/bundles/angular2.dev.js) saves several seconds of load time.After further testing - I was trying to look at the timeline - I've realized that it only happens when the Chrome DevTools are opened 0_o. I've grabbed a screencast of the issue https://youtu.be/e1cTPIDCCZE, which I can reproduce using the previous plunkers in both Chrome stable v46 and Canary v48. Even worse, trying the capture a timeline "fixes" the issue: no more visible lag with the System builder's bundle.
I had Async debugging enabled in the DevTools, which makes the issue way worse. Without it, the
System.registerbundle is still consistently 30% to 50% slower than the CommonJS one (1s vs. 1.5s fully loaded), only when the DevTools are opened (JS source maps are disabled).My first guess would be that it's due to the
System.registercircular reference "correctness" overhead, however I can't explain why I'm only seeing that when the DevTools are enabled. Maybe theSystem.registerformat lead to deeper call stacks which makes the JS instrumentation more costly.