Why HTML/Web UI response slower than Native UI?

问题:

I can't understand, Why HTML/Web UI response slower than WinForms/WPF/Android View/Native UI?

The Native UI also have styles, elements nesting, events than the CSS, DOM, javascript events of the Web UI.

Event response time includes: focus changing, dropdown, scrolling, animation moving, animation resizing, etc.

The DOM tree insertion/replacing is also slow, inserting 10000 chars html will cost 100 ms in google chrome in android 4.0 while parsing its template only cost 20 ms(jQuery micro template).

I releazied maybe the biggest factor that slowdown event response is:

1. The UI locking between parallel javascript processes;
2. The rendering engine is too slow to process the new UI changing messages from javascript workers, especially when the browser rendering engine is busy with the last UI updating(because of the point 3);
3. The html layout method (for example: css cascading, inline flow layout, responsive layout etc) may slow down partial UI updating.
4. Parsing html/xml cost long time, a hint: Android view inflation relies heavily on pre-processing of XML files that is done at build time(http://developer.android.com/reference/android/view/LayoutInflater.html)

A subset of HTML and CSS standards maybe the future solution for webview app development:

http://www.silexlabs.org/haxe/cocktail/

http://www.terrainformatica.com/htmlayout/

http://www.nativecss.com/

http://www.pixate.com/

https://github.com/tombenner/nui

http://steelratstory.com/steelrat-products/wrathwebkit

http://trac.webkit.org/wiki/EFLWebKit

https://github.com/WebKitNix/webkitnix

http://qt-project.org/doc/qt-4.8/richtext-html-subset.html

http://sealedabstract.com/rants/why-mobile-web-apps-are-slow/

A pile of native UI markup languages: http://en.wikipedia.org/wiki/User_interface_markup_language

why there is not a simplified HTML standard and a simplified Webcore layout engine to replace these native UIML?

Maybe we could realize a subset html in kivy.org project.

PC, android browser = application thread + ui thread

iOS browser = application thread + ui data thread + ui hardware thread(CoreAnimation/OpenGL ES)

In ios browser, application thread could directly call ui hardware thread.

回答1:

If Web UI is completely implemented by JavaScript on the client side, the difference from WinForms/Native UI will be trivial.

However, in most cases, the Web UI triggers some Web request to the Web server, then it has to go through the following steps to achieve the same effect as a WinForms/Native app:

1. Send a HTTP request (GET/POST/...) to the Web server
2. The Web server is an executable (in the format of an external app or a service) listening to one or multiple ports. When it receives the request, parses it, and finds the Web application.
3. Web server executes backend (server-side) logic within application.
   Web application such as ASP.NET is pre-compiled. Time complexity of this step could be very close to a Windows app.
4. Web server renders the result into markup and sends it back to the client
5. Client (Browser) parses the result and updates the UI if necessary. Controls/images/other resources in a Web page normally take a little longer to render within a browser than a Windows app renders its display.

Even the Web server is local, the cost generated the data parsing/formatting/transfer cannot be simply ignored.

On the other hand, an application with WinForms/Native UI typically maintains a message loop, which is active and hosted in machine code. A UI request normally just triggers a lookup in the message table and then execute the backend logic (Step 2 in the above)
When it returns result and updates UI, it can be simply binary data structure (doesn't need to be in markup), and doesn't reply another application(browser) to render to the screen.

Lastly, a WinForms/Native application normally has full control to maintain multiple threads to update UI gradually, while a Web application has no direct control over that type of server-side resources.

UPDATE:
When we compare a Web application and a Windows/WPF (or native) application consuming a same Web service to partially update their UIs

The two UIs should respond and refresh with ignorable speed difference. The implementation difference between binary & scripting execution to respond and refresh UI is almost nothing.
Neither of the UIs needs to reconstruct the control tree and refresh entire appearance. Given same conditions, they could have same CPU priority, memory/virtual memory caching, and same/close number of kernel object & GDI handles at process/thread level.
In this case, as you described, there should be almost no visual difference.

UPDATE 2:
Actually event handling mechanisms in Web and Windows apps are similar. DOM has event bubbling. Similarly, MFC has command routing; Winforms has its event flow; WPF has event bubbling and tunnelling, and so on. The idea is a UI event might not strictly belong to one control and a control has some way to claim an event has been "handled". For standard controls, focus changing, text changing, dropdown, scrolling events should have similar client-side response time for both Web and Windows apps.

Performancewise, rendering is the biggest difference. Web apps have limited control of "device context" because a Web page is hosted by an external application - the Web browser. Windows applications can implement animation effects using GPU resources like WPF and speed up rendering by refreshing the "device context" partially. That's why HTML5 canvas makes Web developers excited while Windows game developers have been using OpenGL/DirectX for over 10 years.

UPDATE 3:
Each Web browser engine (http://en.wikipedia.org/wiki/Layout_engine) has its own implementation of rendering DOM, CSS; and implementation of (CSS) selectors. Moving and resizing elements within a Web page is changing DOM, CSS (tree) setup. The selector and rendering performance highly depends on the Web browser engine.

1. UI operations could make selectors go through unnecessary steps to update UI.
2. A Web page doesn't have control to inform the browser to do partial rendering.

which make fancy JavaScript controls (some jQuery UI, dojo, Ext JS) cannot be real-time fast, usually slower than Flash controls.

回答2:

The time spent on the client is negligible compared to the time the data spends travelling over the network. The actual render time of a Windows form or a webpage in a browser is measured in (tens or maybe hundreds) of microseconds. Sending a request to a server and getting the result back is measured in milliseconds.

You can confirm this quite easily:

1. Create a simple Winforms application, time it.
2. Create a similar Web-based application. Run it on the webserver on your own PC, I.E. //localhost/myapp.asp and time it.
3. Run it on a remote webserver and time it.

You'll see that 1 is fastest followed closely by 2 (a little slower, interpreting the HTML, the CSS etc) and 3 is vastly slower because of the network time.

To answer your question, the difference due almost entirely to network delays, which are an order of magnitude greater than local processing time.

EDIT: It would be kind of the downvoters to add a comment explaining why.

回答3:

Only in substandard browsers (this includes all Android browsers, all Mac OS browsers, all Linux browsers, and worst of all every version of Google Chrome). These are badly written, unoptimised browsers with no concern for touchscreen latency, UI responsiveness and smooth scrolling. They lock up and stutter during any kind of CPU activity, disk or network I/O and user input.

Superior browsers such as Internet Explorer 11 or iOS Safari are sometimes even more responsive than unoptimised native apps.

Basically only Windows 8.1 and iOS have responsive browsers. All other browsers are inferior as far as UI responsiveness is concerned. The difference is really huge. IE11 and iOS Safari obliterate other browsers in UI latency and smoothness.

回答4:

3 big differences

1. WebUI apps are run within a browser, which then depends on how well the browser is optimized.

2. The browser also has its own javascript jvm. another process that has to run and interpret the code before it runs.

All of this is an extra layer that is on top of the native OS. If you were to bring up the activity monitor of you computer and bring up a web page in your browser, you will notice what a resource hog web browsers are.

1. Native UI elements have graphics acceleration support. depending on the os, native ui templates are compiled to a native format that does not have to be parsed for rendering.

回答5:

One thing to keep in mind is that the browser itself is a native application, so anything built for the browser to run is inherently written with (at least) one additional layer of abstraction, versus something written directly for native execution.

It's also worth noting such dynamics as this:

300ms tap delay, gone away http://updates.html5rocks.com/2013/12/300ms-tap-delay-gone-away

The initial impetus for this artificial delay was to support pinch-zooming vs other touch interactions -- that is, slower responsiveness in this case was a deliberate way to disambiguate different user actions.

Granted, while this is a rather specific use-case, the general concept does serve as an example of the different considerations for browser-based vs native implementations. That is, browser-based experiences include some of the usual framework cost of solving for a wide variety of interactions and content, whereas native experiences are naturally tailored more specifically to only listen for / respond to the desired interaction models.

Throughout the implementation, many tiny parts (such as this) are slimmer and more focused in a raw native version, which can contribute to the general effect of better responsiveness.