微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

为什么浏览器不能像游戏引擎那样每秒多次完全渲染DOM,而又不影响性能呢?

如何解决为什么浏览器不能像游戏引擎那样每秒多次完全渲染DOM,而又不影响性能呢?

我试图理解为什么浏览器要每秒多次完全渲染DOM是一项艰巨的任务,就像游戏引擎在画布上所做的那样。游戏引擎可以在每帧执行许多计算,计算光,阴影,物理等,并且仍然保持无缝的帧速率。 为什么浏览器不能做到这一点,从而允许每秒无缝地完整多次重新渲染DOM?

我知道渲染DOM和渲染游戏场景是两个完全不同的任务,但是我不明白为什么后面的渲染在性能上要难得多。

请尝试着重于呈现DOM的特定方面,并解释为什么游戏引擎不会面临同样的问题。例如-“浏览器需要解析HTML,而游戏的所有代码都已预编译并可以运行”。

编辑:我编辑了我的问题,因为它被标记为自以为是。我不是在这里要求观点,只是事实。我在问为什么浏览器不能像游戏引擎渲染画布那样每秒完全重新渲染DOM 60帧。我知道浏览器面临着更艰巨的任务,但我不明白为什么会这样。请仅坚持提供翔实的答案,并避免发表意见。

解决方法

游戏是为执行特定于其自身的操作而编写的程序-它们是使用低级语言asm / c / c ++或至少可以访问机器级操作的语言编写的。在图形方面,游戏可以将程序推入显卡进行渲染:绘制矢量和着色/光栅化

https://en.wikipedia.org/wiki/OpenGL

https://en.wikipedia.org/wiki/Rasterisation#:~:text=Rasterisation%20(or%20rasterization)%20is%20the,which%20was%20represented%20via%20shapes

它们还优化了内存,CPU使用率和IO。

浏览器是具有许多要求的应用程序。

主要用于通过创建表示html元素的对象来呈现HTML文档。浏览器的工作更为复杂,因为它们支持dom和文档类型(DTD)的多个版本,以及每个DTD所需的相关安全性。

https://en.wikipedia.org/wiki/Document_type_declaration#:~:text=A%20document%20type%20declaration%2C%20or,of%20HTML%202.0%20%2D%204.0)。

,并且必须支持发送一组非常通用的文档-一个页面与另一个页面不同。必须具有用于IO,CSS解析,图像解析(JPEG,PNG,BMP等)的库,以及电影播放器​​和关联的编解码器,音频播放器及其编解码器以及网络摄像头支持。此外,它们还支持JavaScript代码环境(不仅是语言,而且还包括IO和事件处理),还具有对COM,Java Applets的历史性支持。

这使它们成为通用的工具,但重量很重-携带很多行李。

在这方面,图形方面的性能永远无法像专用程序那样出色,因为它们为此类操作提供的API始终在更高级别上运行。

即使Canvas API(顾名思义)也是较低层渲染库上方的抽象层。并且每个抽象层都对性能产生了影响。

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API

为了获得更好的图形性能,现在在浏览器中提供了一个称为webGL的新标准-尽管它仍然是API,并且可以在沙盒中运行-因此仍然不如专用代码那么出色

https://en.wikipedia.org/wiki/WebGL

甚至使用游戏引擎的游戏:Unity,Unreal将以比浏览器更多的专用方式访问图形功能,CPU,内存和IO-因为游戏引擎本身提供了专用的渲染和光栅化功能,因此开发人员可以在他们的游戏中使用它们来优化图形功能。浏览器无法覆盖许多通用情况,但没有具体要求。

https://docs.unrealengine.com/en-US/Engine/index.html

https://learn.unity.com/tutorial/procedural-sky-19-1

,

首先,网络游戏使用的DOM很少。他们使用速度更快的Canvas API。 DOM用于更改document上的内容(这就是DOM中的D所代表的意思),因此它真的不适合游戏。

我的笨拙的手机怎么可能无缝运行《使命召唤》,但是很难编写一个可以在其上平稳运行的大网页?

我从未遇到过DOM的性能问题。当然,如果您每秒用单个<body>分配更新.innerHTML一次,每次60次,那么性能不好就不会感到惊讶,因为浏览器需要:

  1. 解析HTML并构建DOM树;
  2. 应用样式并计算每个元素的位置;
  3. 渲染元素。

这些步骤中的每个步骤对于CPU来说都是很多工作,并且在大多数浏览器中,该过程大部分都是单线程的。

您可以通过以下方式提高性能:

  • 从不使用.innerHTML .innerHTML使浏览器将HTML转换为DOM树,反之亦然。使用document.createElement().appendNode()
  • 避免更改DOM。如果可能,仅更改CSS样式。
,

通常,这取决于游戏。最强大的游戏是用C ++或C引擎开发的,因此它们可以直接与内存联系并充分利用处理器的力量。

与基于DOM的网页不同,它们是由诸如JavaScript之类的解释语言编写的。另外,如果网页部署不正确或服务器运行缓慢,问题可能出在服务器上。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。