为什么HTML / Web UI的响应比本地UI慢?(Why HTML/Web UI respons

2019-07-29 12:46发布

我不明白,为什么HTML / Web UI的响应比的WinForms / WPF / Android设备上查看/原生UI慢?

本机UI也有风格,元素嵌套,事件比CSS,DOM,JavaScript的Web UI中的事件。

事件响应时间包括:焦点改变,下拉,滚动,移动动画,动画尺寸调整等

DOM树的插入/更换也慢,插入10000个字符HTML将花费在谷歌浏览器100毫秒,机器人4.0在解析其模板只花费20毫秒(jQuery的微模板)。

我releazied也许最大的因素是经济放缓事件的回应是:

  1. 平行的JavaScript处理之间的UI锁定;
  2. 渲染引擎是处理新的UI改变从JavaScript工人邮件太慢了,尤其是当浏览器渲染引擎正忙于最后的UI更新(因为第3点);
  3. HTML布局方法(例如:CSS层叠,直列流布局,响应布局等)可能会减慢局部UI更新。
  4. 解析HTML / XML成本长的时间,一个提示:机器人视图通货膨胀在很大程度上依赖于被生成时进行的XML文件预处理( http://developer.android.com/reference/android/view/LayoutInflater.html )

的HTML和CSS标准的子集也许对的WebView应用开发未来的解决方案:

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/

原生UI标记语言一堆: http://en.wikipedia.org/wiki/User_interface_markup_language

为什么没有一个简单的HTML标准和简化的WebCore排版引擎,以取代这些本地UIML?

也许我们可以实现kivy.org项目的一个子集的HTML。

PC,Android浏览器=应用程序线程+ UI线程

iOS的浏览器应用=螺纹+ UI数据螺纹+ UI硬件线程(CoreAnimation /的OpenGL ES)

在iOS系统中的浏览器,应用程序线程可以直接调用UI硬件线程。

Answer 1:

如果网络用户界面是由JavaScript在客户端完全实现,从的WinForms /原生UI的差异将是微不足道的。

然而,在大多数情况下,在Web UI触发一些Web请求到Web服务器,那么它要经过以下步骤来实现作为一个WinForms /原生应用相同的效果:

  1. 发送一个HTTP请求(GET / POST / ...)到Web服务器
  2. Web服务器是听一个或多个端口的可执行文件(在外部应用程序或服务的格式)。 当接收到请求,分析它,并找到Web应用程序。
  3. Web服务器应用程序内执行的后端(服务器端)的逻辑。
    Web应用程序如ASP.NET是预编译。 时间这个步骤的复杂性可能会非常接近一个Windows应用程序。
  4. Web服务器呈现结果为标记,并将其发送回客户端
  5. 客户端(浏览器)分析结果,并在必要时更新UI。 在Web页面控件/图像/其他资源,通常需要较长的时间来在浏览器中渲染速度比一个Windows应用程序呈现其显示。

即使在Web服务器是本地的,成本产生的数据解析/格式化/转让不能简单地忽视。

在另一方面,具有的WinForms应用/本地UI通常维护一个消息循环,这是活动的,在机器代码托管。 甲UI请求通常只触发的查找在消息表,然后执行后端逻辑(步骤2在上述)
当它返回结果和更新的用户界面,它可以是简单的二进制数据结构(无需在标记),不回答其他应用程序(浏览器)呈现在屏幕上。

最后,一个WinForms /机应用程序通常具有完全的控制,以保持多个线程逐步更新UI,而Web应用程序拥有这种类型的服务器端资源的直接控制。

更新
当我们比较一个Web应用程序和一个Windows / WPF(或本机)应用程序消耗了相同的Web服务,以部分地更新自己的用户界面

这两个用户界面应该作出反应,并与忽略的速度差刷新。 二进制的脚本执行之间的差异实现响应并刷新UI是几乎没有。
无论是用户界面的需要重建控件树和刷新整个外观。 由于相同的条件下,他们可以有相同的优先级的CPU,内存/虚拟内存缓存,和相同/关闭数内核对象与GDI句柄的进程/线程级。
在这种情况下,如你所描述的,应该几乎没有视觉上的差异。

更新2:
在Web和Windows应用程序实际上事件处理机制是相似的。 DOM有事件冒泡。 类似地,具有MFC命令路由; 的WinForms有事件流; WPF活动冒泡和隧道等。 这个想法是一个UI事件可能不是严格属于一个控制和控制有某种方式来声称被“处理”的事件。 对于标准控件,焦点不断变化,文字变化,下拉菜单,滚动事件应该有类似的客户端的响应时间为Web和应用程序的Windows。

Performancewise,渲染是最大的区别。 Web浏览器 - 因为网页是由外部应用程序托管的Web应用程序具有有限的“设备上下文”的控制。 Windows应用程序可以实现利用GPU的资源,如WPF动画效果,加快通过刷新“设备上下文”部分的渲染。 这就是为什么HTML5 Canvas使得在Windows游戏开发商一直在使用的OpenGL /的DirectX 10多年来激发Web开发人员。

更新3:
每个Web浏览器引擎( http://en.wikipedia.org/wiki/Layout_engine )都有自己的执行渲染DOM,CSS的; 和执行(CSS)选择。 移动和调整Web页面中的元素是改变DOM,CSS(树)的设置。 选择器和渲染性能高度依赖于Web浏览器引擎。

  1. UI操作可以使选择经过必要的步骤来更新UI。
  2. 一个Web页面不具有控制告知浏览器做局部呈现。

这使得看中的JavaScript控件(一些jQuery UI的,道场,Ext JS的)不能实时快速,通常比闪存控制慢。



Answer 2:

的数据相比花费在网络上传播的时间花费在客户端上的时间是可以忽略不计。 实际的渲染Windows窗体的时间或在浏览器网页在微秒(几十甚至可能是数百)测量。 发送到服务器的请求,并且获取结果返回以毫秒为单位。

你可以很容易地证实了这一点:

  1. 创建一个简单的WinForms应用程序,一次。
  2. 创建一个类似的基于Web的应用程序。 在Web服务器上运行它自己的电脑,IE //localhost/myapp.asp和时间它。
  3. 在远程网络服务器和一次运行它。

你会看到一个1是最快的2紧随其后(慢一点,解释HTML,CSS的等等)和3个是因为网络的时间大大慢。

要回答你的问题,网络延迟,这是数量级比本地处理时间,更大的订单到期的差异几乎完全。

编辑:那将是怎样的downvoters的添加注释解释为什么。



Answer 3:

只有在不合格的浏览器(包括所有的Android浏览器,所有的Mac OS浏览器,所有的Linux浏览器,和最差的谷歌浏览器的所有版本的每一个)。 这些都写的不好,未优化的浏览器不关心触摸屏的延迟,用户界面的响应和平滑滚动。 他们任何类型的CPU活动,磁盘或网络I / O和用户输入的过程中锁定和口吃。

高级浏览器,如Internet Explorer 11或iOS的Safari有时甚至比未优化的本地应用程序的响应速度。

基本上仅适用于Windows 8.1和iOS有响应的浏览器。 所有其他浏览器不如尽可能UI响应速度而言。 所不同的是真正巨大的。 IE11和iOS的Safari 抹杀 UI延迟和平滑度等浏览器。



Answer 4:

3个大差异

  1. Web用户界面的应用程序是一个浏览器,然后依赖于浏览器是如何很好的优化内运行。

  2. 该浏览器也有自己的JavaScript JVM。 有运行,它运行之前解释的代码另一个进程。

所有这一切是一个额外的层是在本地操作系统之上。 如果你要打开你的电脑的活动监视器,并弹出一个网页,在浏览器中,你会发现什么吃资源的Web浏览器是。

  1. 原生的UI元素具有图形加速支持。 取决于操作系统,原生的UI模板被编译成不必解析呈现原生格式。


Answer 5:

有一点要记住的是,浏览器本身是一个原生应用程序,所以任何内置了浏览器运行本质上是用抽象的(至少)一个附加层,对一些直接写为本地执行写入。

这也是值得注意的,例如动态就象这样:

300ms的延时水龙头,走了 http://updates.html5rocks.com/2013/12/300ms-tap-delay-gone-away

此人为延迟最初的动力是为了支持捏缩放VS其他触摸交互 - 也就是,在这种情况下的响应速度较慢是消除歧义不同的用户行为是故意的方式。

理所当然的,而这是一个相当特定的用例,一般概念并用作用于不同的考虑的示例的基于浏览器VS本机实现。 也就是说,基于浏览器的经验,包括一些用于解决各种各样的互动和内容的一般框架的成本,而本土经验自然是量身定制更具体地只监听/到所需的交互模型作出回应。

整个实施,许多小零件(如本)是原始原生版本,这将有助于更好的响应效果一般苗条,更有针对性。



文章来源: Why HTML/Web UI response slower than Native UI?