1998 年,我有一台配备 233MHz Pentium MMX CPU 和 GFX 卡(没有 3D 加速)的计算机。它能够以不错的 FPS 速率运行 Quake II 等游戏。我现在的计算机性能高出很多,GPU 也属于中端水平,但在使用 WebGL 渲染天空盒内的单个模型时,却难以达到 20 FPS。即使是包含大量 2D CSS 动画的普通页面也会让许多现代计算机不堪重负。
作为一名网页开发者,我知道网页中有很多东西,但不知道是什么让它那很重。现代浏览器在运行 JavaScript 之前会将其编译为 CPU 本机机器代码,并且渲染到画布元素中不应触发 DOM 重建,因此理论上它应该比现在快得多。
我在这里遗漏了什么?是否有可能避免或减少导致浏览器变慢的任何因素,以构建更高效的网站?
答案1
如今的网页比二十年前大得多,而且还使用了更多 CPU 密集型组件,例如 Flash。
二十年前的网页大约 7KB,而如今则大约 200-300K?那时候,你只能使用极少量的 JavaScript,图片也很少,如果是图片,你只能查看 GIF 或小型 JPEG。Flash 的性能很差,可能会死机。现在,你的网站上有多个 Flash 项目,上面有 1920x1080 或更大的 JPEG。
浏览器的效率已经达到了极限。
答案2
将一个包含完整 3D、CSS、AJAX 和 JavaScript 的现代网页与旧网页进行比较有点不公平,旧网页最复杂的部分就是每隔几秒钟在按钮上或页面上交换图像。
你要求浏览器执行的操作要复杂几个数量级,仅仅将 3D 计算建模传递给显卡就需要比过去简单的“将图像放在这里”的网页更多的处理能力。
Quake 中的模型并不复杂,每个模型只需管理几十个多边形,而不像现代游戏那样需要每个模型管理几万个多边形。
即使如此,我也不认为浏览器的性能会大幅下降,我会关注模型本身。模型中的多边形越多,计算和传递到显卡所需的时间就越长。
尝试查看是否可以首先降低模型的复杂性(多边形数量),3D 一直以来都更注重在模型中获得适当的复杂性水平,以使它们看起来不错,但不会对性能造成太大影响。
本网站从Chrome 实验是浏览器内 3D 的一个很好的例子,在我看来非常流畅(在 Firefox 中),而且它的细节水平是我期望的。如果你也遇到过该网站速度慢的问题,那么我很好奇你的浏览器是否真的在使用显卡来渲染 3D。
答案3
很多页面感觉很慢,因为它们从不同的地方请求广告。其他页面感觉很慢,因为 javascript 写得不好。Mokubai 和用户* 描述了其他因素。但共同的“分母”是 javascript。它基本上是导致浏览器变慢的原因。有些人会说主要是 flash,但我不同意。编写良好的 flash 页面精简而高效。3D 动画、互动游戏等等……主要问题是人们不知道如何高效编程。而且这并不总是那么容易!
无论如何。如果你运行 Firefox,请获取无脚本。它将阻止所有 javascript(和 flash),同时允许您逐个或逐页启用“丰富”元素。如果您不喜欢 Firefox,那么 Google Chrome 是您的最佳选择,因为它的速度非常快。