Shulou(Shulou.com)06/03 Report--

This article mainly explains the "brief introduction and performance testing of the imba framework". The content of the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "the brief introduction and performance testing of the imba framework".

Brief introduction of imba

Imba is a new programming language that can be compiled into high-performance JavaScript. Can be directly used for Web programming (server and client) development.

Here is the syntax:

/ / Custom tag tag App / / attribute prop items / / method definition def addItem if @ input.value items.push (title: @ input.value) @ input.value = "" def toggleItem item item:completed =! item:completed / / Mount Imba.mount (element, into) / / if there is no second parameter Imba.mount 'add' for item in items item:title is mounted to document.body by default.

You can refer to the imba documentation for specific syntax.

The performance basis of extreme Speed in imba Framework

Any implementation of performance optimization has its theoretical basis, so what is the basis of imba performance so fast? The answer is memoized DOM (memory DOM).

Theoretical basis

The DOM operation of the browser can be said to be the ultimate function of the browser, whether the framework is based on virtual DOM or real DOM, ultimately inseparable from the operation of DOM objects.

HTML DOM is a standard way for browsers to access and manipulate HTML documents. But the interface for operating DOM is JavaScript. But browsers usually implement the js engine and the rendering engine separately. That is, the actual rendering part of the page is separate from the parsing js part. In the words of "high-performance JavaScript", if you think of DOM and js as islands. They need a bridge to communicate. So every time you perform a DOM operation, you cross the bridge.

Let's talk about virtual DOM first. The performance improvement of virtual DOM is that the comparison of DOM is placed on the js layer. And then by comparing the differences to carry out the actual DOM rendering. In other words, there is no "real" performance benefit for virtual DOM, and the bridge is still there. Only on the side where the js engine needs to cross the bridge, we found a smart uncle to optimize and limit the people who cross the bridge and the goods that cross the bridge (virtual DOM high-performance diff algorithm, status batch update).

So how does memoized DOM do it? Put the control of the DOM node directly into memory. Similar to this kind of optimization.

Function getEls (sel) {/ / set cache if (! getEls.cache) getEls.cache = {}; / / if el exists in the cache, return if (getEls.cache [sel]) {return getEls.cache [sel] directly;} / / did not query const r = document.querySelectorAll (sel | | '☺'), length = r.length via DOM / / cache and return the element node return getEls.cache [sel] = (length = = 1)? R [0]: r;}

We can test it. Here I write a getElsByDocument and simplePerTest.

/ / obtain node function getElsByDocument (sel) {const r = document.querySelectorAll (sel | | '☺') directly through querySelectorAll, length = r.resume; return length = = 1? R [0]: r;} / / simple performance test function simplePerTest (fn, el) {const fnfnName = fn.name console.time (fnName) / / 2000 operations for (let I = 0Len = 2000; I

< len; i++) { fn(el) } console.timeEnd(fnName) }

This cached node query is more than 140x faster than querySelectorAll, and the more img nodes, the higher the performance improvement. What if all the nodes in the imba framework are in memory? At the same time, we get a js runtime optimization (a significant reduction in GC), because the virtual DOM maintains a tree, which results in a large number of useless objects after multiple crud, which causes the browser to GC, while memoized DOM does not do multiple GC in multiple crud. (may GC in the rendering engine? But I think the impact of GC in the rendering engine is much smaller than that in JS. Dig a hole, study the rendering engine and then discuss it)

Framework practice

The example is as follows:

Tag Component def render "Welcome"I am a component"

The above custom component is compiled into the following js:

Var Component = Imba.defineTag ('Component', function (tag) {tag.prototype.render = function () {var $= this.$) / / return dom return this.setChildren ($. $= $. $| | createElement ('title'). SetText ("Welcome"), createElement (' desc'). SetText ("I am a component")]. Flag ();};})

If you take a closer look at the functions here, you will see that the component will use createElement to create two child nodes, set their properties and cache them when rendering is called *.

/ at the time of * call $. $does not exist. $will be equal to the following array / / the second call $. $exists, no runtime consumption of $. $= $. $| Array

Looking at the source code, we can see that the setChildren functions operate on the real DOM. Get the previous DOM node returns the current node and caches it after a series of operations.

Tag.prototype.setChildren = function (new$,typ) {var old = this._tree_; if (new$ = old & (new$) | | new$.taglen = = undefined) {return this;}; if (! old & & typ! = 3) {this.removeAllChildren (); appendNested (this,new$);} else if (typ = 1) {var caret = null For (var I = 0, items = iter$ (new$), len = items.length; I

< len; i++) { caret = reconcileNested(this,items[i],old[i],caret); }; } else if (typ == 2) { return this; } else if (typ == 3) { var ntyp = typeof new$; if (ntyp != 'object') { return this.setText(new$); }; if (new$ && new$._dom) { this.removeAllChildren(); this.appendChild(new$); } else if (new$ instanceof Array) { if (new$._type == 5 && old && old._type == 5) { reconcileLoop(this,new$,old,null); } else if (old instanceof Array) { reconcileNested(this,new$,old,null); } else { this.removeAllChildren(); appendNested(this,new$); }; } else { return this.setText(new$); }; } else if (typ == 4) { reconcileIndexedArray(this,new$,old,null); } else if (typ == 5) { reconcileLoop(this,new$,old,null); } else if ((new$ instanceof Array) && (old instanceof Array)) { reconcileNested(this,new$,old,null); } else { // what if text? this.removeAllChildren(); appendNested(this,new$); }; this._tree_ = new$; return this; }; 如果我们使用了动态属性。代码如下： tag Component def render "Welcome" # 有 50% 几率 拥有 red class 0.5)>

"IMBA"

You can get the following code. If you look at it in detail, you can see that imba extracts variables and puts them into the synced function. Only the data in synced will be executed in each rendering, so you will still get a very high rendering speed.

Var Component = Imba.defineTag ('Component', function (tag) {tag.prototype.render = function () {var $= this.$) Return this.setChildren ($. $= $. $| | [_ 1 ('title'). SetText ("Welcome"), _ 1 (' desc'). SetText ("Roulette")], 2) .flag ($[1] .flagIf ('red') Math.random () > 0.5), true)) };)

Accurate extraction of invariants, and then no need for virtual DOM calculation, at the same time for the real DOM is also cached, we can see that memoized DOM is different from the virtual DOM, memoized DOM has real performance benefits.

Performance Test of "fake" imba Framework

We have seen the theoretical basis of the imba framework above, so is it really 50 times faster than vue? Of course not, that's why it says I'm the title party.

The operating mechanism of the browser

The browser itself can only reach 60 fps (60 refreshes per second). Of course, in fact, for the experience, the 60fps experience is almost enough, that is, the browser rendering probably requires 17ms to render once. In fact, whether you operate dom 5w or 1000 times per second, the browser rendering engine will only record the current dirty data. Then redraw and rearrange when you need to render.

Real-world memory limitations

Faced with the cache optimization of memoized DOM and the runtime enhancements brought about by less GC, we need more memory to cache each dom node. This consumes a lot when initializing the rendering. At the same time, the execution speed and rendering speed of our browser are fast enough, and the virtual DOM is enough.

Imagination of imba Framework and browser

Chorme Portals Technology of Google io Conference

Single-page applications (Single Page Applications,SPA) provide good page interaction, but at the cost of building more complex, multi-page applications (Multi-page Applications,MPA) are easier to build, but eventually there is a blank screen between pages.

Portals combines the advantages of both and is mainly used to improve the web interaction experience, with the goal of seamless navigation. It is similar to iframe, embedded in a web page, but can be navigated to the content of the page. When a user jumps to another content on one page, although the URL changes accordingly, there is no need to open another window. At this time, the Portals of the content tag becomes the * * page of the original page, while the original page maintains the status of the main process afterwards. This is a live demonstration of the great convenience of the shopping experience, as well as a demonstration of single-page applications such as comics.

Association between js engine and rendering engine

Previously, the browser js engine and rendering engine are not related, we can only write animation through setTimeout or setInterval, there is no way to know when the browser is idle, but with the development of time, we can use requestAnimationFrame and requestIdleCallback. RequestAnimationFrame requires the browser to call the specified callback function to update the animation before the next redraw. The requestIdleCallback method executes the queue function to be called during the browser's idle period.

Let's wait and see.

Thank you for reading, the above is the content of "brief introduction and performance testing of imba framework". After the study of this article, I believe you have a deeper understanding of the brief introduction of imba framework and performance testing, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.