打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
什么是 Angular 应用的 re-hydration 过程
userphoto

2023.10.20 四川

关注

在讨论 Angular 的服务器端渲染(Server-Side Rendering,简称 SSR)以及重水合(Re-hydration)的过程之前,我们首先需要理解一些基本概念。

Angular 是一个流行的前端 JavaScript 框架,能够用于开发单页应用(SPA)。SPA 在浏览器中加载一次,之后所有的用户交互都通过 JavaScript 来处理,这样能提供流畅的用户体验。然而,这种方法的一个问题是,因为整个应用都需要在客户端加载和执行,所以首屏加载可能会比较慢。而且,由于内容是通过 JavaScript 动态生成的,搜索引擎可能无法正确地索引这些内容。

为了解决这些问题,Angular 提供了一个叫做 Angular Universal 的解决方案。Angular Universal 通过在服务器端运行 Angular 应用,生成静态的 HTML 页面,然后将这个静态的 HTML 发送到客户端。这样,用户可以立即看到页面的内容,同时搜索引擎也能正确地索引这些内容。

那么,当我们启用 Angular 的 SSR 之后,用户在浏览器端访问 Angular 应用时,背后到底发生了什么呢?

首先,当用户请求一个页面时,请求会被发送到服务器。服务器上运行的 Angular 应用会处理这个请求,执行相关的路由,获取必要的数据,并生成一个完整的 HTML 页面。这个页面包含了所有的静态内容,以及一些额外的信息,比如状态数据和其他配置信息。然后,服务器将这个 HTML 页面以及其他相关的文件(比如 CSS、JavaScript 文件等)发送到客户端。

然后,客户端收到这个 HTML 页面和其他文件后,浏览器会立即开始渲染页面。因为页面已经是完整的 HTML,用户可以立即看到页面的内容,而不需要等待 JavaScript 加载和执行。这就是所谓的 " 首屏优化 "。

然后,浏览器开始加载和执行 JavaScript。在这个过程中,Angular 会启动并开始 " 重水合 " 的过程。重水合是一个特殊的步骤,用于将服务器生成的静态 HTML " 转变 " 为一个完全交互的 SPA。重水合的过程包括以下几个步骤:

  1. Angular 会解析 HTML,创建一个新的 Angular 应用实例。这个新的应用实例会与 HTML 页面中的元素进行关联,创建一个完整的组件树。

  2. 然后,Angular 会加载和初始化服务(Services)、路由(Routes)、模块(Modules)等。这个过程中,Angular 会利用 HTML 中的状态数据和其他配置信息,来正确地初始化应用的状态。

  3. 之后,Angular 会开始 " 激活 " 组件。激活的过程中,Angular 会执行组件的生命周期钩子函数,比如 ngOnInitngAfterViewInit 等。

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
AngularJS开发下一代Web应用笔记(一)
浅谈HB中mui几种实现页面跳转的方法
Famo.us+Angular联手,呈现最好的JavaScript
HTML页面基本结构和加载过程
(详解)从浏览器输入 URL 到页面展示过程发生了什么?
话题
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服