首页 > 其他分享 >什么是 Angular 应用的 rerender 机制

什么是 Angular 应用的 rerender 机制

时间:2023-10-28 11:23:56浏览次数:29  
标签:prerender rerender 渲染 静态 JavaScript 列表 HTML 机制 Angular

我们在某些 Angular 应用的 angular.json 文件里,能看到下面的代码:

prerender": {
          "builder": "@nguniversal/builders:prerender",
          "options": {
            "routes": ["/"]
          }
}

首先,让我们来理解上述代码的作用。这是一个在 angular.json 文件中定义的 prerender 配置,该配置是用于预渲染的设置。预渲染(Prerendering)是一种在服务端生成静态 HTML 页面的策略,这样在客户端首次加载时,可以立即显示出内容,而不需要等待 JavaScript 执行完毕。这可以提高页面的首屏加载速度,同时也有助于改善 SEO,因为搜索引擎可以直接解析静态 HTML 页面内容,而不需要执行 JavaScript。

这段配置中有三个重要的部分:

  • "builder":指定了预渲染的构建器,这里使用的是 Angular Universal 提供的预渲染构建器 @nguniversal/builders:prerender。这个构建器的任务就是按照配置,生成静态 HTML 文件。

  • "options":这是预渲染的选项,提供了预渲染构建器需要的一些参数。

  • "routes":这是一个数组,指定了需要预渲染的路由列表。在这个例子中,只有一个元素:/,意味着只有根路径 / 需要被预渲染。

现在,让我们通过一个详细的例子来解释这段代码的作用。假设我们有一个 Angular 项目,它的根路径 / 对应的是首页,首页中有一些从服务器动态获取的内容,例如新闻列表。如果我们不使用预渲染,那么当用户访问首页时,浏览器首先需要下载和执行所有的 JavaScript 代码,然后 JavaScript 代码会向服务器发送请求获取新闻列表,然后再将新闻列表渲染到页面上。在这个过程中,用户需要等待一段时间才能看到新闻列表,这会影响用户体验,同时,搜索引擎也可能因为无法执行 JavaScript 而无法获取到新闻列表的内容。

为了解决这个问题,我们可以使用预渲染。通过预渲染,我们可以在服务器端先生成一个包含了新闻列表的静态 HTML 文件,然后当用户访问首页时,服务器直接返回这个静态 HTML 文件。这样,用户可以立即看到新闻列表,不需要等待 JavaScript 执行完毕。同时,搜索引擎也可以直接解析这个静态 HTML 文件,获取到新闻列表的内容。

在这个例子中,我们可以在 angular.json 文件中添加以下配置:

`prerender`: {
  `builder`: `@nguniversal/builders:prerender`,
  `options`: {
    `routes`: [`/`]
  }
}

这样,当我们运行预渲染命令时,Angular Universal 的预渲染构建器会根据这个配置,生成一个包含了新闻列表的静态 HTML 文件。这个静态 HTML 文件会被保存在服务器上,当用户访问首页时,服务器就可以直接返回该静态页面。

标签:prerender,rerender,渲染,静态,JavaScript,列表,HTML,机制,Angular
From: https://www.cnblogs.com/sap-jerry/p/17793845.html

相关文章

  • 什么是 Angular Pre-built libraries
    首先,Angular是一个非常强大的前端框架,由Google维护,用于构建复杂、大型的单页应用。它支持双向数据绑定、依赖注入、模块化以及类型检查等特性,可帮助开发者更好地管理代码和提高开发效率。然而,尽管Angular本身已经非常强大,但在实际开发过程中,我们可能还需要一些额外的功能或......
  • Angular 动态导入和懒加载的深入介绍
    动态导入,这是一种用于实现懒加载和代码分割的技术,但需要注意的是,它只能在主应用程序中使用。在现代的前端开发中,性能和用户体验一直是至关重要的考虑因素。随着应用程序变得越来越复杂,加载时间的优化变得尤为关键。动态导入是一项强大的技术,可以帮助我们在Angular应用程序中实现......
  • Angular 应用懒加载模块中的配置管理
    在Angular应用程序的开发中,懒加载模块(Lazy-LoadedModules)是一种重要的技术,它允许我们将应用程序划分为可延迟加载的模块,以提高性能和用户体验。然而,当我们在懒加载模块中提供额外的配置时,这会引发一些有趣的技术细节和挑战。本文将详细探讨懒加载模块中的配置管理以及相关的技术......
  • 关于 Angular 的 hierarchical injector
    Angular的"dependencyinjection"是一种设计模式,它可以帮助我们更有效地组织和共享代码。在Angular中,我们可以通过注入服务(一个常见的可注入对象类型)到组件、指令或其他服务中,实现代码的复用和模块化。Angular的注入器系统是分层级的,也被称为"hierarchicalinjector"。这......
  • Java 垃圾回收机制
    目录垃圾回收的基础知识堆空间的基本结构内存分配和回收原则对象优先在Eden区分配大对象直接进入老年代长期存活的对象将进入老年代GC分类对象是否可被回收引用计数算法可达性分析算法引用类型强引用(StrongReference)软引用(SoftReference)弱引用(WeakReference)虚引用(PhantomRefere......
  • Unity DOTS系列之Aspect核心机制分析
      最近DOTS发布了正式的版本,我们来分享一下DOTS里面Aspect机制,方便大家上手学习掌握UnityDOTS开发。Aspect 机制概述当我们使用ECS开发的时候,编写某个功能可能需要某个entity的一些组件,如果我们一个个组件的查询出来,可能参数会写很长。如果我们编写某个功能的时候,需要enti......
  • 加入Ban-Pick机制对即时战略游戏的意义
    1.一定程度上的解决平衡性的问题:即时战略游戏的平衡性设计是一个很难的工作,很多开发团队为了达到平衡的目的而选择让各种族的兵种同质化。与其把这个难度都交给开发者,不如学习Dota等游戏,引入Ban-Pick机制。2. 减少兵种设计难度,让设计师放开手脚:在大多数的即时战略游戏中,平衡性......
  • AngularJS: 服务 vs 提供者 vs 工厂
    内容来自DOC[https://q.houxu6.top/?s=AngularJS:服务vs提供者vs工厂](https://q.houxu6.top/?s=AngularJS:服务vs提供者vs工厂)AngularJS中Service、Provider和Factory的区别是什么?从AngularJS邮件列表中我得到了一个很棒的帖子,它解释了服务、工厂和提供者的区......
  • 分享!10个使用Angular CLI的实战应用技巧
    如果您正在使用Angular,就知道AngularCLI有多有用。它简化了创建和管理Angular项目的过程,凭借其直观的命令行界面,它可以轻松处理复杂的任务,如生成组件、服务、管道、指令等。但是您知道如何有效地使用AngularCLI吗?在本文中,我们将分享10个超级棒的实战应用技巧,来帮助您掌握Angula......
  • Angular 12简单安装运行相关
    创建安装Angular12版本:npminstall-g@angular/[email protected]创建工程:ngnewjp-demo1addAngularroting?y...................touse?scss运行cdjp-demo目录下ngserve--open--open运行抛异常ngserve--open无法加载文件C:\ProgramFiles......