(The Requirements for High-Performance Web Apps

(the requirements for high-performance web apps

“高性能网络应用程序”或“前端”到底是什么?

自从 Internet Explorer 时代衰落以来,JavaScript 生态系统变得越来越强大,“前端”一词已成为高性能、现代 Web 客户端的代名词。这个“前端”世界的核心是 React。事实上,在前端开发中不使用 React 常常会让一个人看起来像个局外人。

但正如并非所有游戏都是 AAA 级游戏一样,我们在讨论网络应用程序时也必须仔细考虑“高性能”的含义。这种区别对于今天的主题至关重要。

1。高性能 Web 应用程序的范围

在大多数情况下,术语“高性能 Web 应用程序”是指使用基于 JavaScript 的框架(如 React、Vue 或 Angular)构建的交互式动态 Web 客户端。这些应用程序通常拥有快速加载时间和客户端路由,而 React 的虚拟 DOM 在提高渲染速度方面发挥着重要作用。

但是,有些 Web 应用程序利用了 WASM 模块的全部 4GB 内存限制,在构建时考虑了系统内存管理,并旨在实现与 Blender 或 3Ds Max 等本机程序相当的性能。这些应用程序更符合利用浏览器选项卡的所有资源的“程序”概念,而不是针对 SEO 优化的传统“网页”。

尽管由于内存限制和开销,当前的浏览器环境可能仍难以提供类似本机的性能,但此类应用程序的目标根本不同。他们处理大型数据集,目标是使用完整的 2-4GB 内存,同时追求最高的渲染速度。

鉴于这些类型的网络应用程序面临的问题与典型的“高性能”应用程序面临的问题不同,它们追求的方向也有所不同。

一开始提到的“高性能 Web 应用程序”和我在这里描述的“高性能 Web 应用程序”在路径上有根本的不同。将它们归为一个术语是有问题的。我们需要不同的术语来反映这些差异。

这就是为什么我建议我们停止将后者称为“高性能网络应用程序”或“前端”,而是使用以下术语:

基于浏览器的高性能框架工程(BBHPFE)(基于浏览器的)高性能系统工程 (HPSE)

我相信这些术语清楚地定义了前端和 HPSE 之间的要求差异。并非所有基于浏览器的客户端都是前端;有些是 HPSE。考虑以下示例以了解为什么这种区别很重要:

[对话 1]

A:“我正在开发一个前端应用程序,但没有使用 React。”
B:“没有 React 的前端应用?React 在前端市场占有率超过 60%!你为什么不使用它?”

[对话2]

答:“我正在开发 HPSE 应用程序,但没有使用 React。”
B:“这对 HPSE 来说是有道理的。游戏公司经常广泛定制他们的引擎,但 React 的内部功能和渲染管道无法修改。它从来不是为此目的而设计的。”

现在,我们来讨论 HPSE 必须具备的基本组件。

2-1。内存管理
不谈内存就谈不上高性能程序。无论是使用垃圾收集器还是手动释放动态分配的内存,都必须始终释放未使用的内存。

考虑一个基于浏览器的游戏,玩家移动到新地图。游戏需要从服务器异步获取新的地图数据,创建新的网格物体,并删除旧的网格物体。用于生成旧网格的数据也必须被释放。

如果对旧数据的引用没有正确释放,内存使用量将随着每次地图转换而不断增长。一旦达到 2GB 左右,您可能会遇到“内存不足”错误,并且浏览器将崩溃。

确实,JavaScript 并不是为低级内存控制而设计的——无论是语言还是其开发人员的理念都没有优先考虑它。我并不是说内存管理始终至关重要,但正如他们所说,“天下没有免费的午餐”。如果需要内存管理,就一定要做。

2-2。灵活满足要求
我曾经听到有人说,“当你从初级开发人员转变为中级开发人员时,你应该能够构建任何你要求的东西。”

JavaScript 已经是一种令人印象深刻的语言,几乎没有固有的限制(除了内存限制)。如果你想构建一些东西,它很可能可以完成。

真正的问题是你当前的项目是否能够真正满足各种各样的需求。

就像工厂里的机器在连续运转后就会出现故障一样,追求高性能、定制化功能必然会遇到意想不到的挑战。当这种情况发生时,灵活性和满足独特要求的能力至关重要。

例如,您听说过《失落的方舟》是基于虚幻引擎 3 构建的吗?虚幻引擎 5 现已发布,但他们仍然使用 2004 年创建的虚幻引擎 3。为了使该项目维持到现在,他们必须对引擎进行大量修改——实际上是彻底检修。由于游戏的特点,他们必须不断地通过延迟渲染、实例化、剔除、屏幕空间反射等技术来定制渲染管线和循环,以满足性能和美观的要求。

修改引擎源代码的能力至关重要。如果引擎被关闭或耦合得太紧而无法进行修改,失落的方舟可能永远不会被开发出来。

HPSE 是一样的。虽然环境已经变成了基于浏览器的环境,但对自定义功能和灵活修改的需求仍然没有改变。因此,HPSE 中使用的库和外部模块必须是可修改的,如果浏览器的渲染管道或内部模块耦合过于严格而不允许这些更改,则会成为一个严重的问题。

2-3。不可避免的面向对象方法
在处理大型程序时,有一件事是不可避免的:面向对象编程(OOP)。

JavaScript是一种多范式语言,函数式编程(FP)被广泛使用。然而,FP 虽然适合 Web 客户端,但很少用于多个对象以复杂方式交互的大型程序,因为 FP 中的实例缺乏内部状态。

React 通过全局状态管理和 useEffect 来弥补这一点,但它不如让每个实例维护自己的状态并通过公共方法控制方法调用那么直观。

虽然 OOP 并不总是最佳选择,但在考虑 HPSE 的高度定制开发需求时,很难想到更好的选择。许多大型程序,包括操作系统和游戏,都是使用 OOP 原理构建的。即使是最流行的引擎源也是面向对象的,在方法上略有不同。

参与过大型项目的开发者可能对OOP很熟悉。这使得基于 OOP 的开发有利于协作。

也就是说,没有必要放弃 JavaScript 的优势。由于 JavaScript 支持函数和 const 声明,因此不需要实例的简单模块函数可以使用 const 或函数定义为对象文字。这可以提高生产力并利用 JavaScript 的多功能性。

总之,我相信结合面向对象原则的多范式方法对于 HPSE 来说是理想的选择。

以上就是(The Requirements for High-Performance Web Apps的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1492019.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月19日 14:27:54
下一篇 2025年12月19日 14:28:07

相关推荐

  • 如何使用 vue-color 创建交互式颜色渐变页面?

    如何创建交互式颜色渐变页面? 实现交互式颜色渐变页面可以通过利用第三方库来简化开发流程。 推荐解决方案: vue-color 立即学习“前端免费学习笔记(深入)”; vue-color是一个vue.js库,提供了一个功能强大的调色板组件。它允许你轻松创建和管理颜色渐变。 特性: 颜色选择器:选择单一…

    2025年12月24日
    200
  • 如何利用 vue-color 库打造交互式色彩渐变页面?

    打造交互性前端:色彩渐变页面的制作方法 在前端开发中,色彩渐变页面和交互式元素深受设计师和开发人员的欢迎。本文将探讨如何利用 vue-color 库轻松实现这样的页面。 使用 vue-color 库构建调色板 vue-color 是一个 vue.js 库,可用于创建可定制的调色板。其基本功能包括: …

    2025年12月24日
    300
  • 如何使用前端技术创建交互式颜色渐变页面?

    如何创建交互式颜色渐变页面? 当您希望在前端界面实现颜色渐变效果并实现交互功能时,可以使用以下方法: 解决方案: 1. 使用 vue-color 库 vue-color 库是一个功能强大的 vue.js 库,可用于创建色板和处理颜色操作。它可以帮助您轻松实现颜色渐变效果,如下所示: 立即学习“前端免…

    好文分享 2025年12月24日
    000
  • Vue 中如何动态添加带有动态样式的伪元素?

    vue 动态添加具有动态样式的伪元素 在某些情况下,需要根据动态条件向 dom 元素添加带有动态样式的伪元素。例如,元素的伪元素“before”可能只有在满足特定条件时才会出现,并且其样式(如长度、高度和其他属性)也是不确定的。 解决方案:css 变量 由于伪元素的样式不能直接在 css 中定义,可…

    2025年12月24日
    000
  • Vue 中如何动态添加伪元素?

    vue中如何动态添加伪元素 在某些情况下,需要动态地为元素添加伪元素,但传统方法受限于伪元素不能写死在 css 中。本文将介绍一种使用 css 变量解决此问题的方法。 使用 css 变量 css 变量允许在样式表中定义可重复使用的变量,然后可以在其他样式中使用这些变量。利用这个特性,我们可以动态地控…

    2025年12月24日
    100
  • 如何使用 CSS 变量动态控制 Vue 应用中 DOM 伪元素的样式?

    灵活操纵 vue 中 dom 伪元素 在 vue 应用中,有时需要在特定条件下动态添加和修改伪元素样式。虽然 css 中的伪元素通常是静态定义的,但有些情况下,需要根据用户的行为或数据动态调整其样式。 动态控制伪元素样式 可以使用 css 变量来解决此问题。css 变量允许您在样式表中存储可变值,然…

    2025年12月24日
    100
  • Vue中如何利用CSS变量动态操纵伪元素样式?

    利用css变量动态操纵伪元素 在vue中,有时需要动态地给dom元素添加伪元素,并且伪元素的样式也是动态变化的。不能在css文件中直接定义伪元素样式,因为伪元素包含动态参数。 这个问题的解决方法之一是使用css变量。css变量允许我们在css中定义变量并动态地将其分配给元素的样式。 代码示例: 立即…

    2025年12月24日
    300
  • HTMLrev 上的免费 HTML 网站模板

    HTMLrev 是唯一的人工策划的库专门专注于免费 HTML 模板,适用于由来自世界各地慷慨的模板创建者制作的网站、登陆页面、投资组合、博客、电子商务和管理仪表板世界。 这个人就是我自己 Devluc,我已经工作了 1 年多来构建、改进和更新这个很棒的免费资源。我自己就是一名模板制作者,所以我知道如…

    2025年12月24日
    300
  • Vue/UniApp 中如何实现选中效果的切换?

    vue/uniapp中复现选中的效果 在vue/uniapp中实现此效果,可以使用view元素和样式类来控制外观。让我们来看看这个问题的示例代码。 日 周 月 年 .tabs { display: flex; justify-content: space-between; flex-directio…

    2025年12月24日
    000
  • 如何简化五子棋代码中的重复部分?

    五子棋代码简化 问题: 如何简化五子棋代码中重复的部分? 问题内容: 提供了vue编写的五子棋代码,但其中有多个重复的部分。希望得到一个更简化的代码版本。 问题答案: 拆分重复方法 将大方法中的重复部分拆分成更小的函数,例如: placepiece():放置棋子checkandplace():检查某…

    2025年12月24日
    000
  • Vue/Uniapp 中如何实现类似图片所示的日周月年切换标签效果?

    vue/uniapp中,如何实现类似图片中效果的日周月年切换标签? 图片中呈现了四个标签,选中”日”后,背景变成蓝色,字体变成白色。而其他未选中的标签,背景为灰色,字体也呈灰色。 一位网友通过纯html实现了一个简易的版本,代码如下: 日 周 月 年 具体效果,可以点开上面的…

    2025年12月24日
    000
  • Vue/UniApp中如何制作圆角选项卡,且选中状态颜色与未选中状态颜色不同?

    vue/uniapp中,如何制作圆角栏目的选项卡效果? 你想要创建一个圆角栏目的选项卡效果,其中一个选中的选项是用白色文本填充蓝色背景,而其他选项是黑色文本填充灰色背景。 以下是使用html和css实现此效果的方法: 日 周 月 年 .tabs { display: flex; justify-co…

    2025年12月24日
    000
  • Vue2表格隐藏列后,固定列出现空白行怎么办?

    vue2表格隐藏列导致固定列空白行 当使用vue2表格库(例如element-table)时,隐藏其中一列可能会导致固定列(通常包含操作按钮)最上方出现空白行。 解决方案 要解决此问题,需要在切换列显示状态后手动调用dolayout()方法。该方法会重新计算表格的布局,消除空白行。 立即学习“前端免…

    2025年12月24日
    000
  • 如何优化 Vue 五子棋程序中的重复代码?

    简化代码 问题: 一个使用 vue 编写的五子棋程序中存在大量重复代码,需要进行简化。 代码重复: 立即学习“前端免费学习笔记(深入)”; 部分的 clickbox 函数中重复的条件检查和棋子放置逻辑。 部分的 aripoint 函数中重复的四种条件检查和棋子放置逻辑。 部分的 determinee…

    2025年12月24日
    100
  • Vue/UniApp 选项卡选中时如何添加边框和背景色?

    vue/uniapp中选中时有边框和背景色的选项卡如何实现 原帖中提供的代码不能实现选中时有边框和背景色的效果。下面是用 html 实现这种效果的代码: Document 日 周 月 年 .tabs { display: flex; justify-content: space-between; f…

    2025年12月24日
    000
  • 如何使用 Vue/Uniapp 实现美观实用的“选框”样式页面元素?

    vue/uniapp页面设计优化 在vue/uniapp中,为实现类似“选框”样式的页面元素,可采用以下优化方案: 创建层叠布局(flex layout): 设置外层容器的显示方式为“flex”,并启用水平排列。 定义“选框”元素: 立即学习“前端免费学习笔记(深入)”; 为每个“选框”创建一个子元…

    2025年12月24日
    000
  • 让我们只用一根安装线就可以使网络响应起来吗?我正在寻找贡献者!

    最近我发布了一个 npm 包,其使命如标题所示:让项目只需一行代码即可响应! 我与您分享响应式应用程序 [beta] 包 我花了几年时间尝试和开发这项技术,目前包括: 动态设置 html 标签字体大小(通过 js 脚本),考虑:(1) 屏幕分辨率和 (2) 浏览器字体大小(用于网络可访问性)将像素定…

    2025年12月24日
    000
  • uniapp/vue 中父元素 pointer-events: none 如何让子元素点击事件生效?

    在 uniapp/vue 中解决父元素 pointer-events: none 下子元素点击事件无效的问题 在使用 uniapp/vue 时,当父元素设置了 pointer-events: none 属性后,子元素的点击事件可能会失效。 问题分析 当父元素设置为 pointer-events: n…

    2025年12月24日
    200
  • 如何将 Element UI 的 CSS 文件优雅地引入本地项目?

    如何优雅地引入 element ui 的 css 文件? element ui 是一个非常流行的前端 ui 框架,它的样式表通常通过 cdn url 引入,但偶尔 cdn 会出现访问不稳定的情况,导致样式无法正常加载。为了解决这个问题,我们可以将样式文件下载到本地。 引入本地样式文件的步骤如下: 下…

    2025年12月24日
    000
  • UniApp/Vue 中如何让父元素 Pointer-Events: None 下的子元素点击生效?

    在 uniapp/vue 中让父元素 pointer-events: none 下的子元素点击生效 当我们设置父元素的 pointer-events 为 none 时,它将阻止鼠标或触摸事件传递给子元素。在这种情况下,底部的点击事件将无法生效。 要解决此问题,可以给需要点击事件的子元素添加 poin…

    2025年12月24日
    200

发表回复

登录后才能评论
关注微信