(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:10

相关推荐

  • 比特币新手教程 比特币交易平台有哪些

    比特币是一种去中心化的数字货币,基于区块链技术实现点对点交易,具有匿名性、有限发行和不可篡改等特点;新手可通过交易所购买,P2P交易获得比特币,常用平台包括Binance、OKX和Huobi;交易流程包括注册账户、实名认证、绑定支付方式、充值法币并下单购买,可选择市价单或限价单;比特币存储方式有交易…

    2026年5月10日
    000
  • 修复点击时按钮抖动:CSS垂直对齐实践

    本文探讨了在Web开发中,交互式按钮(如播放/暂停按钮)在点击时发生意外垂直位移的问题。通过分析CSS样式变化对元素布局的影响,我们发现这是由于按钮不同状态下的边框样式和内边距改变,以及默认的垂直对齐行为共同作用所致。核心解决方案是利用CSS的vertical-align属性,将其设置为middle…

    2026年5月10日
    100
  • Golang使用Protobuf定义接口与消息格式

    Protobuf通过字段编号实现兼容性,新增字段可忽略、删除字段可保留编号,确保新旧版本互操作,支持服务独立演进。 在Golang项目中,利用Protobuf定义接口和消息格式,本质上是为服务间通信构建了一套高效、类型安全且跨语言的契约。它让数据结构清晰可见,RPC调用标准化,极大地简化了分布式系统…

    2026年5月10日
    000
  • 硬盘数据被误删除怎么办?教你快速找回删除的文件!

    硬盘数据被误删除,别慌!恢复数据并非不可能,关键在于你接下来的操作。立刻停止对该硬盘的任何写入操作,然后尝试使用专业的数据恢复软件。 解决方案 首先,数据恢复的原理是,删除文件后,操作系统只是将文件占用的空间标记为“可覆盖”,但文件本身的数据可能还存在于硬盘上。所以,避免新的数据写入覆盖掉旧数据,是…

    2026年5月10日
    000
  • Python官网用户调查的参与方式_Python官网反馈提交详细教程

    答案是通过访问Python官网新闻页面、邮件邀请链接或GitHub仓库提交反馈。具体为:访问官网查找用户调查公告,或点击邮件中的专属链接参与,在GitHub的cpython仓库提交技术建议,并注意如实填写问卷与保护隐私。 如果您希望参与Python官网的用户调查并提交反馈,可以通过官方指定的渠道完成…

    2026年5月10日
    000
  • Go语言连接外部MySQL数据库:DSN配置与常见错误解析

    本文详细阐述了go语言使用`go-sql-driver/mysql`驱动连接外部mysql数据库的正确方法。重点介绍了数据源名称(dsn)的规范格式,特别是主机地址部分的配置,以避免常见的“getaddrinfow: the specified class was not found.”等网络解析错…

    2026年5月10日
    000
  • Go语言与Microsoft SharePoint集成指南

    Go语言可以有效集成Microsoft SharePoint,主要通过两种途径:一是利用SharePoint提供的RESTful API进行数据交互,Go的标准HTTP客户端库即可轻松实现;二是通过SharePoint应用模型开发自托管应用,这种模型支持使用包括Go在内的任何语言编写后端逻辑。 1.…

    2026年5月10日
    000
  • javascript生命周期钩子是什么_组件有哪些关键阶段?

    JavaScript原生无生命周期钩子,这是Vue、React等框架为组件设计的机制;Vue按创建、挂载、更新、卸载四阶段提供对应钩子,React类组件有明确生命周期方法,函数组件则通过useEffect模拟,其核心价值在于精准控制执行时机以避免DOM操作错误和内存泄漏。 JavaScript 本身…

    2026年5月10日
    000
  • php源码怎么运行手机_php源码手机运行环境搭建步骤【教程】

    可在手机上通过特定工具运行PHP源码。首先选择支持PHP的移动应用,安卓用户可安装UserLAnd或KSWEB,iOS用户可尝试iSH Shell或a-Shell;然后配置本地服务器环境,启动HTTP和PHP服务,将PHP文件放入指定根目录;接着可通过Termux搭建完整开发环境,更新包列表并安装P…

    2026年5月10日
    200
  • 解决Python脚本中相对路径文件找不到的常见问题与策略

    本文旨在解决python脚本中因相对路径处理不当导致的文件找不到错误,尤其是在项目迁移后。文章将深入探讨python中相对路径的工作原理、当前工作目录(cwd)的影响,并提供使用`os.getcwd()`诊断问题以及利用`os.path.dirname(__file__)`结合`os.path.jo…

    2026年5月10日
    000
  • Go语言:检查预编译库的构建版本与平台信息

    本文详细介绍了如何利用go语言内置的`go tool pack`工具,从预编译的go静态库(`.a`文件)中提取其构建信息,包括go编译器版本、操作系统和cpu架构。当`go build`因库版本不匹配而失败时,此方法能帮助开发者准确诊断问题,确保构建环境与库的兼容性。 在Go语言的开发实践中,我们…

    2026年5月10日
    000
  • Golang如何提升TCP长连接处理效率_Golang TCP长连接处理性能优化实践详解

    答案:通过非阻塞I/O、单Goroutine双工模型、sync.Pool对象复用、TCP_NODELAY优化及高效心跳管理,结合系统调优,可显著提升Golang百万级TCP长连接处理效率。 在高并发网络服务场景中,TCP长连接的处理效率直接影响系统的吞吐能力和资源消耗。Golang凭借其轻量级Gor…

    2026年5月10日
    000
  • Golang 文件IO操作与性能优化实践

    合理使用Go标准库并优化IO策略可显著提升文件处理性能。1. 使用bufio减少系统调用,适合小块读写;2. 大文件用流式读取避免OOM,小文件可一次性加载;3. 并发分片读取大文件并配合预读提升吞吐;4. 结合系统调优如O_DIRECT、关闭atime等防止IO瓶颈。 Go语言在文件IO操作上提供…

    2026年5月10日
    000
  • 前后端分离项目中,如何解决“net::ERR_CONNECTION_REFUSED”错误?

    修复“bug:net::err_connection_refused”后端代码中的错误 在开发前后端分离项目时,使用vue2前端和fastapi后端,前端希望通过“http://10.96.67.161:8081/uploadimg/”接口传输图片给后端,但遇到了“post http://10.96…

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

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

    2026年5月10日
    000
  • c++如何调用系统命令_c++执行系统命令方法

    使用std::system()可执行系统命令,需包含cstdlib头文件,传入命令字符串,返回值表示执行结果。示例:Linux下用”ls -l”列出文件,Windows下用”dir”。返回0表示成功,非0表示失败,可用于判断命令执行状态。注意跨平台命令…

    2026年5月10日
    200
  • 如何在H5环境中实现EXCEL和Word文件的在线预览?

    H5环境下EXCEL和Word文件在线预览技术详解 在如今的Web应用中,在线预览文档功能至关重要,尤其对于需要处理大量文件的企业应用。本文将介绍两种无需插件,直接在浏览器中预览EXCEL和Word文件的方法。 企业对在线文档预览的需求日益增长,以提高效率和协同性。下面我们探讨两种有效的H5在线预览…

    2026年5月10日
    000
  • php文件怎么在服务器运行_php文件上传服务器后运行的配置方法

    首先确认服务器已安装PHP环境并正确配置Web服务器支持PHP,将文件放入指定Web目录并设置权限,通过测试页面验证执行,同时确保上传方式与编码格式无误。 如果您已经将PHP文件上传至服务器,但无法正常执行,可能是由于服务器环境未正确配置或缺少必要的服务支持。以下是使PHP文件在服务器上成功运行的详…

    2026年5月10日
    000
  • 火币app下载 火币app官方下载最新版 火币htx交易所安卓版

    若您需要下载火币htx官方最新版的安卓应用,最安全可靠的方式是通过其官方网站进行获取。为了保障您的数字资产安全,请务必避免使用任何非官方渠道提供的下载链接或安装包,因为这些来源可能包含恶意软件,对您的账户和资金构成威胁。访问官网后,通常可以在页面显眼位置找到app下载入口或二维码。 火币官网直达: …

    2026年5月10日
    000
  • 小程序如何自动切换语言,才能兼顾精准性和适用性?

    根据小程序实现自动切换语言 对于多语言环境的小程序,如何自动切换语言是一个常见问题。 方法一:根据用户定位 这种方法基于用户定位来获取所在国家,并根据国家对应语言设置。然而,这种方法存在一定的局限性,如用户可能不会允许位置共享。 方法二:通过 wx.getsysteminfo 这是微信官方提供的 a…

    2026年5月10日
    000

发表回复

登录后才能评论
关注微信