热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Ionic3延迟加载使得大型html文件滞后

如何解决《Ionic3延迟加载使得大型html文件滞后》经验,为你挑选了1个好方法。

我在我的项目中使用离子3,我有一些延迟加载的问题.

我有一个ResultPage与模板resultpage.html有超过1000的HTML代码行.在HomePage我想导航到ResultPagenavCtrl.setRoot.当我打电话给它时,屏幕在3-4s内冻结,然后带我去ResultPage.这真的是一个糟糕的用户体验.它只发生在lagre teamplate并且在我第一次进入该页面时.我决定删除延迟加载ResultPage和滞后消失.我不知道这是正确的方法吗?有人可以告诉我在这种情况下该怎么做?

非常感谢!



1> sebaferreras..:

从用户那里隐藏它​​的一种方法是在你的应用程序中仍然使用延迟加载,但是急切地预加载该特定页面.您可以查看文档以获取更多信息.

默认情况下,预加载已关闭,因此设置此属性将不执行任何操作.在应用程序启动后,预加载会急切加载所有深层链接,而不是根据需要按需加载.要启用预加载,请将主应用程序模块config中的preloadModules设置为true:

@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp, {
      preloadModules: true // <- Here!
    })
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ]
})
export class AppModule { }

如果打开预加载,它将根据优先级值加载模块.优先级可以使用以下值:"高","低"和"关".没有优先级时,它将被设置为"低".

将首先加载优先级设置为"高"的所有深层链接.完成加载"高"优先级模块后,将加载优先级为"低"(或无优先级)的所有深层链接

设置优先级就像将其传递给@IonicPage装饰器一样简单:

@IonicPage({
  name: 'my-page',
  priority: 'high'
})

所以在你的情况下,我会尝试将优先级设置为高到:

加载应用时用户将与之交互的第一个页面(例如HomePage)

ResultPage以保持它已经预装和更快的表现出来,当用户被重定向到它.

请注意,预加载页面可能会增加应用程序的启动时间,因此请尽可能少地预加载页面.


推荐阅读
  • 1.脚本功能1)自动替换jar包中的配置文件。2)自动备份老版本的Jar包3)自动判断是初次启动还是更新服务2.脚本准备进入ho ... [详细]
  • 本文介绍了JavaScript进化到TypeScript的历史和背景,解释了TypeScript相对于JavaScript的优势和特点。作者分享了自己对TypeScript的观察和认识,并提到了在项目开发中使用TypeScript的好处。最后,作者表示对TypeScript进行尝试和探索的态度。 ... [详细]
  • 本文摘要配置目的:寄存器配置用于更改路由器启动过程。配置目的:寄存器配置用于更改路由器启动过程。启动位由4位16进制寄存器组成格式:0xA ... [详细]
  • Nginx使用AWStats日志分析的步骤及注意事项
    本文介绍了在Centos7操作系统上使用Nginx和AWStats进行日志分析的步骤和注意事项。通过AWStats可以统计网站的访问量、IP地址、操作系统、浏览器等信息,并提供精确到每月、每日、每小时的数据。在部署AWStats之前需要确认服务器上已经安装了Perl环境,并进行DNS解析。 ... [详细]
  • VScode格式化文档换行或不换行的设置方法
    本文介绍了在VScode中设置格式化文档换行或不换行的方法,包括使用插件和修改settings.json文件的内容。详细步骤为:找到settings.json文件,将其中的代码替换为指定的代码。 ... [详细]
  • Webpack5内置处理图片资源的配置方法
    本文介绍了在Webpack5中处理图片资源的配置方法。在Webpack4中,我们需要使用file-loader和url-loader来处理图片资源,但是在Webpack5中,这两个Loader的功能已经被内置到Webpack中,我们只需要简单配置即可实现图片资源的处理。本文还介绍了一些常用的配置方法,如匹配不同类型的图片文件、设置输出路径等。通过本文的学习,读者可以快速掌握Webpack5处理图片资源的方法。 ... [详细]
  • 本文介绍了在Linux下安装Perl的步骤,并提供了一个简单的Perl程序示例。同时,还展示了运行该程序的结果。 ... [详细]
  • r2dbc配置多数据源
    R2dbc配置多数据源问题根据官网配置r2dbc连接mysql多数据源所遇到的问题pom配置可以参考官网,不过我这样配置会报错我并没有这样配置将以下内容添加到pom.xml文件d ... [详细]
  • web.py开发web 第八章 Formalchemy 服务端验证方法
    本文介绍了在web.py开发中使用Formalchemy进行服务端表单数据验证的方法。以User表单为例,详细说明了对各字段的验证要求,包括必填、长度限制、唯一性等。同时介绍了如何自定义验证方法来实现验证唯一性和两个密码是否相等的功能。该文提供了相关代码示例。 ... [详细]
  • VueCLI多页分目录打包的步骤记录
    本文介绍了使用VueCLI进行多页分目录打包的步骤,包括页面目录结构、安装依赖、获取Vue CLI需要的多页对象等内容。同时还提供了自定义不同模块页面标题的方法。 ... [详细]
  • Python已成为全球最受欢迎的编程语言之一,然而Python程序的安全运行存在一定的风险。本文介绍了Python程序安全运行需要满足的三个条件,即系统路径上的每个条目都处于安全的位置、"主脚本"所在的目录始终位于系统路径中、若python命令使用-c和-m选项,调用程序的目录也必须是安全的。同时,文章还提出了一些预防措施,如避免将下载文件夹作为当前工作目录、使用pip所在路径而不是直接使用python命令等。对于初学Python的读者来说,这些内容将有所帮助。 ... [详细]
  • 本文介绍了在Go语言中可见性与scope的规则,包括在函数内外声明的可见性、命名规范和命名风格,以及变量声明和短变量声明的语法。同时,还介绍了变量的生命周期,包括包级别变量和局部变量的生命周期,以及变量在堆和栈上分配的规则和逃逸分析的概念。 ... [详细]
  • 本文介绍了在Android Studio中使用命令行build gradle的方法,并解决了一些常见问题,包括手动配置gradle环境变量和解决External Native Build Issues的方法。同时提供了相关参考文章链接。 ... [详细]
  • 在加载一个第三方厂商的dll文件时,提示“找不到指定模块,加载失败”。由于缺乏必要的技术支持,百思不得期间。后来发现一个有用的工具 ... [详细]
  • 这篇“Webpack是怎么工作的”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大 ... [详细]
author-avatar
mobiledu2502884357
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有