Accelerating the Web performance by compiling Javascript code to WASM
This page contains a video recording of the presentation made during the breakout session, along with a transcript. Video captions and transcript were automatically generated and may not properly translate the speaker's speech. Please use GitHub to suggest corrections.
Table of contents
See also:
Video
Transcript
Nervion I: While I'm preparing for this topic, I happen to be the same prediction support web I 7 predictions that we made about the web 7 years ago with the folks on web trends. As you can see, the trend of the website.
… Webinar.
… 50% of us would. Page in a single application are based on web technology.
… Have almost the same interface.
… Of course the web is mentioned not just based on web view. But use the web bottom area.
… Okay, let's review the device Api mobile phones at the same time from gab and
… again to provide a computer device. However, what we almost experience difference with the native web application and thus possibility of web as an application developer. And it began to use
… is relatively special. Here is it for the new test by referencing traditional web components to build a new framework for application.
… high performance and modern user experience for applications
… since then, 50 weeks and engine in this way.
… between the rendering and the front and the unified phone Api.
… let's take a, we look at the technology stack used to develop applications using web technology
… from front from the end perspective
… developers to use the frontage environment under the framework user unified from the Api to interact with web runtime.
… Just be a application framework that can still the limited domain. Api.
… as mentioned that earlier. There are many technical solutions involving being both the web run and the
… so from the under application framework.
… Okay, however, that's your no.
… okay, thank you very much to speed up the business code. It can only be performed. That's the engine network
… with the emergence of the web simulate is widely used in computing in intensive past.
… especially use the tool scenarios.
… But maybe if you compile the framework and the gather into web simply and run it, even the wasn't engine, the speed of the entire application will increase
… which makes it possible
… exclusion. For
… so we can both have a development efficiency and a running performance. Yes, an ideal web device model to distancing
… model.
… The web web web application is compiled. Wasn't the overall development of real libraries, and even Api calls based on wasn't only in the special cases all for both Javascript for the libraries and for back to the just for better compatibility.
… Of course there are still many problems to be solved to achieve such a model. Some of them already be discussed all put into practice. For example, new programming model can be defined. So that relevant the Api directly.
… there is a problem that can be considered
… in addition the modernization of wasn't is also the application of wasn't in large scale projects.
… Sorry
… I'm alright. There will be discussing the following topic, how to compile just wasn't. There are also many problems that need to be studied and discussed.
… Okay, sounds good for awesome.
… I guess places bring out the
… challenges. Please try introducing the solution.
… And we have our
… just later. And he will present online.
… So perfect, this is just a so how was your temptation?
Shi Xiaohua, Beihang U.: Okay, okay, sounds the way
… Samsung suit. So can you hear me?
Nervion I: Yeah, yes.
Shi Xiaohua, Beihang U.: Okay. Okay. Thank you.
… So I'm sure from behind your diversity.
… Today I will introduce our standard Javascript to Webassembly compiler jwst.
… and some people believe that static compilation of programs
… does not achieve the desired performance.
… However, some people also believe that compiling tell us where you can effectively improve the performance.
… You see not. There is no consensus. Yet
… we think the better way is to build a standard tier's compiler and observe these behaviors.
… Today I will introduce the challenge of statically compiling
… programs some details of of a compiler as well as some demo and performance evaluation loss of the compiler.
… Now let's give, for the dynamic type features of Javascript type of Javascript is a big challenge for standard compiler.
… For example, the here
… is first defined as a member that's redefined the goal
… downstream, and lots of function
… and all divinities are legal for traditional standard type compiler. It must know the type of the arrival. When generate correct target code.
… the example is simple. Some compilers can statically analyze the price. However, a real program has much more complicated contacts than the example
… many times cannot be known until runtime.
… In Javascript, variables with different types could be operated together.
… The compiler should know each type and generate appropriate type conversion code.
… The definition of usage of Javascript objects are more flexible than or Java.
… For example, you can economically increase or decrease alternative views at wrong time.
… That means
… cannot figure out the option layout compile time.
… The off Texas as well.
… Zoom members may have different types and subscripts can be non continuous
… regarding dynamic loading programs.
… Any Javascript code could be dynamically loaded and excluded and applying by the evil function
… like the code here
… you can send the whole program as a string other than to the function table. That is code.
… So for standard compiler, the Javascript features of the name types. And then I'm loading key challenges.
… Now I will introduce our Javascript tool Assembly static translator to Wst.
… Is a standard compiler that compiles Javascript to wasp and native code. It compiles almost the full set of the Javascript language.
… Instead of a subset. it used quick jazz, spy code as include. And now who's Lvmir?
… And got a similar pass rate as quick as for 262
… now is about 30 and 50. No, js, we're running the spider until I selling Ccpu
… respectively for the first execution
… for release. No, we have native application. The native code generate by Jmar, actually about 30%
… in terms of the time to interactive.
… So this is a piece of sample code of wasp we do. Was this kind of step-based cycle similar to Java icon initially, it will use as a pocket for CC process or rust programs
… running together with Jess code to provide higher exclusion efficiency.
… Maybe someone will say it's easy to compile Java to Java icon similar for Javascript. To us. however, in terms of design, those what's when Java Icos are different.
… Java by Cody is designed for expression Java Province.
… while was designed for working with.
… tell us we not expression Javascript programs actually in the figure, right? It's easy to compile a Java program to Java micro
… because they have almost the same semantic expression capability.
… But it's more difficult to compile javascript code or Michael towards based on the for new reasons, such as
… what is not economically the type of language
… it does not support loading and the not does not have a Gc. At a setup.
… This is a combination process of
… the compiler. Use the by code generated by Qgss input and output. Lvm, irr.
… let me check the pointer. Okay.
… so you take the as input and output.
… We built a type profiler based on Q. Js to provide optional, optional, arrival, type information. The generate Wasp code. We'll be link with qt. And Ju. Jw. Long time ago.
… All last code can be replaced with native code support by the Lvm compiler.
… This is the demonstration of the compilation process. For example, the Javascript code here
… on the left side.
… We'll be compliance, Michael. First Yup.
… then the quick Ts. Michael will be compiled to by the compiler.
… In the compiler we use a mimic stack to compile Qjs by code
… due to the
… the An. Any function is not a real function, but can be considered as an inline function that performs the addition of ratios
… when the control of multiple basic block is merged into one. We use our Ss a file instruction to merge the elements remain in the stack
… of the predecessors
… to solve the problem of dynamic types. Jws team, we use the Js value data structure. Q. Js.
… all Javascript values are represented as just values, including number, both object, etc.
… I'm the 32 bit. Micro architecture. Just value is a 64 bit, vector
… except double is highest 32 based text, tech, tag, tech tech.
… and the lower. So you do based on values value value, value value, value.
… The double values are used in the unboxing. To avoid conflicts with other text before each operation, the type of just value must be determined.
… Here we demonstrate the coach and rate by the compiler for dynamic type operations.
… For example, here we assume the both A and B have any types.
… and the figure. Should the compiler will generate generate code to determine the type of A and B for a long time exclusion.
… it generates fast passes, or common paces for your stance. A and B are both integers, or A and B are those doubles
… for other cases a slow pass of calling the function as slow will be.
… We have pipe type of information at compile time. The compiler will remove use that type judgment code and the branches to get simple code. For example, if we don't in advance that 8 is an integer, we don't need to determine the type of A, and can read off all code related to double.
… Similarly, if we already know that both the Mbi integrers, there's no need to generate any branch at all.
… In this way we can improve the speed of computational, the intensive functions
… we build a type profiler based on Qgs to provide optional, arrival, type information. As you in the figure, a single
… function may produce multiple versions of type providing results. One version, another version.
… Before sending time information to the compiler, we need to merge the types of 10 by the provider.
… This is a type information. After running the fib function on the left you have 4 versions. one dose reform. We need to merge all versions of the type information before give it to the compiler.
… the type, information, interface, issue and the right figure.
… Now, every by code has times, maybe a certain time like
… x 32. Maybe I'll also type like Annie.
… maybe combined times of things 32 and double, not in this case.
… And regarding dynamic loading, Jd. Obviously is supposed to host Evo and new function to wrong dynamically load. Your code.
… however, due to the limitations of, was long time generating or linking statutory compiled code at one time is currently not supported.
… So now we use a mix Rami mode to skill compile code while calling embedded Qgs killed up. Then let me load the Javascript code
… as you in the right figure, the dispatch function
… text. If the standard compiled version is this, and if the argument types match.
… then call the compile code.
… if both match otherwise call the embedded queue. Yes.
… here is a more complicated mechanism for type fixing
… based on the fine grain that means micro level hybrid mechanics.
… if the compiler analyzing during co-generation. But these types may change during the execution.
… The compiler will generally speculate code based on this types, and determine whether these types are correct at all at one time.
… if not. if not correct, the Qs. Interpreted will be calm and run the optimized code hair is a bicycle. Before calling the interpreter one, we must review the
… first. We will allocate the interpreters of state in the stack, then restore the currently expanding curvature state.
… and last, call the interpreter, using the same state
… to manage memory upon the watch memory. The Gcrs is used in by default.
… The compiler will generally necessary code to manipulate. The reference counts for all objects
… regarding the exception support. There is no exception. Table in the 2 Js Pico. We know Java. I totally use exception tables. Okay.
… The catch. All set of the exception is directly installed in the stack
… and the jump depends on the state of the stack. Therefore it's a challenge to determine where to generate the catch basic bar.
… That means a jump target in advance through pre-analysis.
… Here we determine whether each exception will be called and where to jump after catching by simulation exclusion in the stack.
… This is an example about about a sink functions of the Javascript. When the program execute you to update the function flow will be passed after the main function has been completed.
… The remaining code out of the country, for where we resume
… Javascript is by de optimizing a sync functions.
… this is the overall flow diagram of the synchronous mechanics. all the past functions will be put into a drop query. The highlighted.
… After the main function has to be completed, the remain costly, the jockey will be scheduled one by one.
… Now we will introduce some typical optimizations of the compiler.
… Basically is that on one compiler at the stage of translating Qgs by code to.
… We don't use any other ir rehabilitation at this stage, but generating pocket Ir directly.
… So organizational type fixing has been introduced in the previous section. Now we prevent some other optimizations like Eli cash relay, author organization and global function caching.
… The ultimately of the Java screen is dynamic. So quick. Just create a link that table in the object to the same attribute.
… and use the shape structure here to save the mapping of field names through attributes, positions it's called hiding cost as well the shapes of object with same attributes point to the same address.
… Well, since the object we need to first query the hash table
… in the office shape to find the offset of a field and then find the property in the middle
… based on the office query. The process is complicated
… and around half of what's head is pretty high.
… so manage just long times like we ate
… implement app authorization. Call in my cash in my cache, add a cache area for each object, a certain site
… which is used to store the shape and the fields are previously saved objects
… in with this way we don't need to access anything inside the shape. Just compare the pointers of the show to, to to determine whether the object is just the same, and while we progress that says.
… and directly find the location of the obvious property through the cache.
… As we previously mentioned, the array type of Js is more flexible. If a real element signed out of sequence. data may be starting to hesitate
… like this continuous part like this
… in the future will be expensive. So the compiler can create a big enough memory space for ways to improve access efficiency
… at the same time, semantics of the Java, the Js program.
… Here's another simple organization for global function calling. Since Mo. Most chairs found you do not modify their name. At long time.
… A speculative organization can be used to reduce the cost of calling functions.
… The compiler resolved the definition of the compiler file.
… so the generated call calls into the function directly without going through the schedule. Other repairs.
… Now we will present some demos of performance. Evaluation results of our compiler. Let's see.
… the compiler has a consistent password comparing with Qas on the language, 2. 62. So exactly the same.
… Comparing compared with 2 Js.
… In terms of the building, a subset Jwrc. Has the similar password as Qs. As well except the atomic related test case.
… we should require multi spreading support while once one time do not support multi-threading. Currently.
… it's interesting that there was code generated by particular test case related to from the important precision
… while the naked code tossed.
… So let's see the test case.
… This is a fail test case about floating point precision. the code in the right figure. She was the reliable left here
… should be 3 e. Plus one on the makeup password. but 2 E. Passwords was wrong times. so the assertion fail.
… The reason we found this. So what's long time? And what's the libraries support less? Probably most comparative with a native platform. so, but also possible for native platform
… support. Doesn't support, doesn't support, doesn't support
… Webassembly, only support wrong to nearest. He does not support downward, upward and towards it, or rounding those. So it failed.
… For this test case
… we're rounding South Spider
… 21 or out of 26 test cases
… is faster than no js.
… well, I still do. Performance is about 15% faster than no jets. Katie, for the first week. Exclusion?
… the left part is no. Js.
… the second is quick. Yes.
… the middle one is quick chats on wask
… this one is, was including the loading time, and like running time.
… and the right one is Jwt. Native.
… so we can find for some cases
… for some cases right. For some cases
… the the Jw. Native wasp is up to 3 times faster than No. Js.
… the initialization we send in all caching functions
… 2 pi 3.0. With
… that will be argued
… the even faster than last version. For most cases
… this is a native version. This is a native version. For most cases it's even faster than worship.
… For some cases the native code is up to 8 times faster than low. Js. both.
… Thank you. So for fair comparation
… we compare jw. Was
… with Q. Js once. and we compare it out to native with
… Intel, i. 7 CPU. We got a similar performance collaboration with dogs.
… The 30% faster than notice. For the first exclusion.
… we use our
… react native location to demonstrate the compiler practical environments.
… The demo value is 10 times slower than bill. That's great. Okay?
… Okay, the startup time of the native application.
… The left one is a okay sorry
… change. The pointer. The left phone is way, 8 weeks cash.
… This is This is way in without cash. This is
… A.
… The compiler pre compiler just found the programs of our end to us and make your covid effectively. Then we run on the 40 cell phone.
… Where's our the native code? Then the way we cocache have almost the same Ti type.
… That means time to interactive. Those are which are significantly faster than we without Co cash.
… We will some more detail data. Okay.
… okay.
… after the Rm program has been fully loaded.
… the speed of the screen refreshing by creating one other issue here.
… This is Jw. Native.
… We ate with cash. We eat without cash. the without Co cash. In fact, the fraction time is partially
… all. The 4 versions are mostly enough.
… The the demo, while it was 10 times slower than real as well.
… We evaluate the exclusion time of the application.
… This initialization Javascript
… by this interface, and we ain't caught by this interface
… where we analyze the security overhead on the startup screen, you can find that for release mode, this part for release mode is about 10 times
… and 2 times faster than we, we thought, and respectively.
… I'm Katie, and I owe you
… coach, and
… that's really interesting. However, the loading time of is pretty long as is possible
… this far, including the the Jw. Was loading time.
… This part is the only time this part is okay
… in terms of the time to interacting
… for release mode our patient.
… So the thus we find the reason. The relay is a loading time of the Wassma.
… however, is about 30% faster than we need for the first execution.
… Now we are going to choose some weakness of the compiler, for the release version of our applications was co-size about 27 MB before linking, and about 25 MB, after linking
… and streaming, including all the
… the Javascript Sales code now is cosigned about
… 1.3 MB the South coast release portions. Comparing, we see all 3 process code. The copy code side of our
… Javascript compiler is on 8 to 10 times larger.
… and we found the business counting and type checking structure dominate the generates code. So far.
… the compartment about 640 s for about
… 200 s from
… the host machine is A has a intel CPU and 32 GB. Memory
… as last. Here are our expectations for Watson.
… I say most expectations have been proposed by others or under construction.
… However, they are our true feeding.
… It wasn't hazard that means similar to Dl. Which could significantly reduce the pre compilation loading time on once more times. The second is this is a call
… supporting Tc. At the level can reduce the size of Rc. Instruction
… in the Wasp code generally by the compiler. The third one is docile.
… So our question, our question is, when could we directly call Zoom api form was
… the last one is, furthermore. oh, question, yes.
… Is it possible to use what? As a fundamental language of by code for web applications?
… That means we're running.
… We run Javascript and all other language on what one time you see wrong, Javascript and voice on the Javascript Runtime.
… and that's all. Thank you very much.