Hybrid App 技术路径带动性能的提升

这篇具有很好参考价值的文章主要介绍了Hybrid App 技术路径带动性能的提升。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

说到 Hybrid App(混合应用)大家都不陌生,因为这种开发模式大行其道发展的这些年取代了很多原生和 Web 应用,为什么大家对这种「Native + HTML5」的开发模式额外偏爱呢?

因为一方面在一定程度上兼顾了原生应用的优质体验,另一方面又兼顾到了 HTML5 灵活的开发模式。

这种模式的核心就在于使用了 HTML、CSS 和 JavaScript 语言进行编写,继而封装到原生应用中,这个模式下应用不是在用户的浏览器中显示,而是在本地应用程序和自己的嵌入式浏览器中运行,用户基本上看不到它。例如,iOS 应用程序将使用 WKWebView 来显示我们的业务功能,而在 Android 上,它将使用 WebView 元素来实现相同的功能。

不过既然说到 Hybrid App 的核心在于使用 WebView 来实现业务功能的对外展示,那有浏览器也必然存在大大小小的毛病,至少说和原生页面的体验会有较为明显的差异。

那是否有方式能够缩小(或者说一定程度上弥补)和原生的性能差距呢?这也是今天希望进行探讨的。

提升加载速度

体验过 Hybrid App 的都知道,最烦人的就是长时间的白屏加载,背后的原因就是页面加载速度过慢造成的,所以我第一个关注点就是加载速度。

在 Hybrid App 中,一般是可以通过减少 HTTP 请求、压缩文件、使用缓存等方法来提升加载速度。

1、减少HTTP数量

我主要想分享两个办法,一是可以将多个小的 JavaScript 或 CSS 文件合并为一个文件,从而实现减少请求的数量的目的,但也要注意合并文件时,需要平衡文件的大小和并发请求的数量。第二个办法是对于多个 icon 或图片,将它们合并到一个雪碧图(Sprite Sheets)中,然后使用 CSS 的 background-position 属性来显示不同的图标,这个办法也可以在一定程度上减少多个图标的 HTTP 请求。

2、压缩文件大小

在 Hybrid App 中可以通过使用 ImageOptim、UglifyJS 等压缩工具减少压缩文件的大小,当然也可以在服务器端启用 Gzip 和 Brotli 进行压缩,这也能够将在传输过程中的资源文件进行压缩,从而减少网络传输量。

3、设置缓存策略

我们可以设置合理的缓存策略,缓存策略比较多:浏览器缓存、服务端缓存、本地缓存、缓存清除、缓存优先级等都可以作为我们的缓存策略,这里以浏览器的缓存机制为例,我们可以将一些常用的文件存储在用户的设备上,从而减少网络请求提升加载速度。

优化 JavaScript 性能

JavaScript 是 Hybrid App 中最主要的执行环境,因此 JavaScript 的性能也直接影响到整个 App 的性能。

对于 JavaScript 的性能优化,我主要想到的是2个点:

1、减少 DOM 操作

应该大家都知道频繁的 DOM 操作会引起重排 reflow 和重绘 repaint ,自然而然的也会影响 App 的性能,这里推荐批量更新和离线 DOM 来减少操作次数。

批量更新顾名思义就是将多次 DOM 操作合并为一次,再通过一次性更新多个元素,达到减少重排和重绘的效果。一般可以使用 Fragment 文档片段 来批量添加多个元素,然后一次性插入到 DOM 中。

另外还可以试试离线 DOM 操作,在 DOM 外部进行修改再将修改的部分一次性添加到 DOM,主要可以通过使用字符串拼接、模板引擎、虚拟 DOM 等方式来实现。

2、避免内存泄漏

另外还有一个比较重要且需要注意的是 JavaScript 的内存管理,在整个管理环节避免内存泄漏的问题出现,我们除了可以使用工具来监控内存使用情况,还有一些使用的技巧需要注意。例如减少全局变量的使用、手动解除引用 null 、避免循环使用引用等。

写在后面

当然 Hybrid App 性能优化是一个比较复杂的过程,可以实践的途径还有其他的角度,像是 WebView 优化是一个非常重要的部分,也是一个值得后续详细展开细讲的部分,这篇文章就先不对 WebView 优化做过多的介绍了。

另外需要说明一点随着小程序容器技术的持续推动,新的移动混合应用方式「Native+小程序」也开始受到关注,其实技术原理就是以非入侵性的方式把 FinClip SDK 嵌入到现有的 App,让App 具备小程序运行能力,从而转变为「Native+小程序」的混合开发模式,这个模式的使用体验会明显的好于「Native + HTML5」。

这个模式也是符合用户越来越重视各个产品使用体验的趋势,「原生+小程序」更优质的混合开发模式也会更多的受到开发者的关注和认可。文章来源地址https://www.toymoban.com/news/detail-633055.html

到了这里,关于Hybrid App 技术路径带动性能的提升的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Hybrid App开发模式

    Hybrid App(混合模式移动应用)是指介于web-app、native-app这两者之间的app,兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。 Native App 移动互联网刚开始兴起的时候,我们手机上的应用(App)都是通过Native App开发而成的;Native App的开发具备很多的优势:

    2024年02月15日
    浏览(60)
  • Hybrid App(原生+H5)开发

    市面上主流的hybrid app框架主要有 React Native:由FaceBook开发,使用JavaScript和React来构建原生应用程序 Flutter:由Google开发,使用Dart语言。Flutter使用自己的渲染引擎 Ionic:基于 Web 技术(HTML、CSS 和 JavaScript),使用 Angular 框架。Ionic 提供了一组 UI 组件和工具,使开发人员能够构

    2024年02月05日
    浏览(40)
  • 比较几种热门Hybrid App前端框架

    作为一种既能够在原生应用程序环境中运行,也能够在 Web 浏览器中运行的应用程序,Hybrid App 主要使用 Web 技术进行开发,如 HTML、CSS 和JavaScript,并使用一个中间层将其封装在原生应用程序中。 随着技术的持续推进,Hybrid App 相关的前端框架也应运而生。今天就来比较几种

    2023年04月18日
    浏览(45)
  • 云计算在智能制造中的应用 如何通过数字孪生技术营销5G智能制造工程应用——提升产品性能与效率

    作者:禅与计算机程序设计艺术 2021年双十一购物节即将到来,作为一名电商从业者或互联网公司的技术经理、产品经理或主管,作为一个市场营销专家,我想用自己的见识和经验来谈一下数字孪生技术如何帮助企业进行精准营销,以便实现零售额的增长。首先需要说明的是

    2024年02月09日
    浏览(56)
  • 在Winform中一分钟入门使用好看性能还好的Blazor Hybrid

    创建完成打开项目文件 WinformDesktop.csproj 文件 打开以后的项目文件,启动项目 这是提供的简单的项目Demo 我们只需要使用masa Blazor提供的模板,一分钟入门使用,你要做的只需要去Masa Blazor组件库去CV代码, 并且Masa Blazor也提供了Blazor在线编辑器去体验Masa Blazor的组件 MASA Try

    2024年02月05日
    浏览(39)
  • 强推Linux高性能服务器编程, 真的是后端开发技术提升, 沉淀自身不容错过的一本经典书籍

    目录 第1章 TCP/IP协议 1.1 TCP/IP协议族体系结构以及主要协议 1.1.1 数据链路层 1.1.2 网络层 1.1.3 传输层 1.1.4 应用层 1.2 封装 1.3 分用 1.5 ARP协议工作原理 1.5.1 以太网ARP请求/应答报文详解 1.5.2 ARP高速缓存的查看和修改 1.5.3 使用tcpdump观察ARP通信过程所得结果如下 本篇核心关键所在

    2024年02月07日
    浏览(50)
  • 阿里云高级技术专家林立翔:基于阿里云弹性GPU服务的神龙AI加速引擎,无缝提升AI训练性能

    2023 年 3 月 23 日 14:00,NVIDIA GTC 开发者大会阿里云开发者社区观看入口正式开放,阿里云高级技术专家林立翔带来了题为《基于阿里云弹性 GPU 服务的神龙 AI 加速引擎,无缝提升 AI 训练性能》的分享,以下是他的演讲内容整理。 阿里云弹性 GPU 服务是阿里云为云上客户提供的

    2024年01月17日
    浏览(48)
  • flutterui构建工具,Java+性能优化+APP开发+NDK+跨平台技术

    面试的时候除了算法题,其他被怼成弟弟,没想到面试官给过了,一天面完三面并且一周之后收到了oc,觉得自己非常的幸运,终于得到了大厂的认可(虽然是颗白菜)。这里建议网友如果有自己亮点的话,还是可以勇敢大胆的尝试一下大厂,毕竟除了实力之外,运气与机遇也占

    2024年03月15日
    浏览(60)
  • 从iOS App启动速度看如何为基础性能保驾护航 | 京东物流技术团队

    启动是App给用户的第一印象,一款App的启动速度,不单单是用户体验的事情,往往还决定了它能否获取更多的用户。所以到了一定阶段App的启动优化是必须要做的事情。App启动基本分为以下两种 App 点击启动前,它的进程不在系统里,需要系统新创建一个进程分配给它启动的

    2024年02月15日
    浏览(42)
  • 1.UnityProfiler性能分析提升性能

    1.main thread 主线程 业务逻辑都在这里,我们调用Unity API都在这里;例如设置transform位置,main thread里面处理 2.render thread,渲染线程,负责渲染图像、执行渲染循环、处理GPU命令、帧同步。 3.  这个则表示当前负载最多可以绘制多少次(当前帧数) 4.Batches :批次,绘制场景,

    2024年01月25日
    浏览(60)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包