(The Requirements for High-Performance Web Apps
知识点掌握了,还需要不断练习才能熟练运用。下面golang学习网给大家带来一个文章开发实战,手把手教大家学习《(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》的内容了。个人认为,基础知识的学习和巩固,是为了更好的将其运用到项目中,欢迎关注golang学习网公众号,带你了解更多关于的知识点!

- 上一篇
- php函数测试与调试技巧:如何调试缓存问题?

- 下一篇
- JavaScript 数组方法:综合指南
-
- 文章 · 前端 | 42秒前 | SEO 可访问性 语义化 time标签 datetime属性
- HTML标签是什么?快速掌握语义化使用技巧
- 273浏览 收藏
-
- 文章 · 前端 | 4分钟前 |
- 手把手教你用Vue封装axios,快速搞定第三方库集成!
- 319浏览 收藏
-
- 文章 · 前端 | 5分钟前 |
- CSShover怎么用?3个hover悬浮实战技巧超详解
- 395浏览 收藏
-
- 文章 · 前端 | 5分钟前 |
- 低版本安卓浏览器HTML兼容性修复技巧
- 373浏览 收藏
-
- 文章 · 前端 | 7分钟前 |
- JS字符串分割超简单技巧!分分钟提升你的开发效率
- 474浏览 收藏
-
- 文章 · 前端 | 13分钟前 | JavaScript CSS样式 动态样式 ``标签 `::marker`伪元素
- summary标签是啥?HTMLsummary标签样式调整秘籍
- 197浏览 收藏
-
- 文章 · 前端 | 15分钟前 |
- JS小技巧:手把手教你用JS轻松读取LocalStorage数据
- 224浏览 收藏
-
- 文章 · 前端 | 23分钟前 |
- JSPromise链式调用超简单!手把手教你搞定异步编程
- 262浏览 收藏
-
- 文章 · 前端 | 27分钟前 |
- JS触屏党必看!教你轻松搞定触摸事件处理
- 486浏览 收藏
-
- 文章 · 前端 | 8小时前 | html CSS JavaScript SEO 折叠内容
- HTML轻松实现可折叠区域,超简单教程来了!
- 150浏览 收藏
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
- 542次学习
-
- GO语言核心编程课程
- 本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
- 508次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
- 497次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
- 484次学习
-
- 茅茅虫AIGC检测
- 茅茅虫AIGC检测,湖南茅茅虫科技有限公司倾力打造,运用NLP技术精准识别AI生成文本,提供论文、专著等学术文本的AIGC检测服务。支持多种格式,生成可视化报告,保障您的学术诚信和内容质量。
- 43次使用
-
- 赛林匹克平台(Challympics)
- 探索赛林匹克平台Challympics,一个聚焦人工智能、算力算法、量子计算等前沿技术的赛事聚合平台。连接产学研用,助力科技创新与产业升级。
- 63次使用
-
- 笔格AIPPT
- SEO 笔格AIPPT是135编辑器推出的AI智能PPT制作平台,依托DeepSeek大模型,实现智能大纲生成、一键PPT生成、AI文字优化、图像生成等功能。免费试用,提升PPT制作效率,适用于商务演示、教育培训等多种场景。
- 73次使用
-
- 稿定PPT
- 告别PPT制作难题!稿定PPT提供海量模板、AI智能生成、在线协作,助您轻松制作专业演示文稿。职场办公、教育学习、企业服务全覆盖,降本增效,释放创意!
- 68次使用
-
- Suno苏诺中文版
- 探索Suno苏诺中文版,一款颠覆传统音乐创作的AI平台。无需专业技能,轻松创作个性化音乐。智能词曲生成、风格迁移、海量音效,释放您的音乐灵感!
- 71次使用
-
- 优化用户界面体验的秘密武器:CSS开发项目经验大揭秘
- 2023-11-03 501浏览
-
- 使用微信小程序实现图片轮播特效
- 2023-11-21 501浏览
-
- 解析sessionStorage的存储能力与限制
- 2024-01-11 501浏览
-
- 探索冒泡活动对于团队合作的推动力
- 2024-01-13 501浏览
-
- UI设计中为何选择绝对定位的智慧之道
- 2024-02-03 501浏览