产品文档
ADC
14.1 - Current Release 13.1 13.0 12.1
查看 PDF

前端优化

October 7, 2021
投稿者: 
C

注意： 如果您拥有高级或高级 Citrix ADC 许可证，并且正在运行 Citrix ADC 10.5 或更高版本，则可以进行前端优化。

作为 Web 应用程序基础的 HTTP 协议最初是为了支持简单网页的传输和呈现。JavaScript 和级联样式表 (CSS) 等新技术，以及 Flash 视频和图形丰富的图像等新媒体类型，对前端性能（即浏览器级别的性能）提出了沉重的要求。

Citrix ADC 前端优化 (FEO) 功能可以通过以下方式解决此类问题，并缩短网页的加载时间和渲染时间：

  • 减少请求的数量。
  • 渲染每个页面需要。
  • 减少页面响应中的字节数。

简化和优化提供给客户端浏览器的内容。

您可以自定义 FEO 配置，为您的用户提供最佳结果。Citrix ADC 支持针对桌面和移动用户的众多 Web 内容优化。下表介绍了 FEO 功能提供的前端优化，以及对不同类型的文件执行的操作。

由 FEO 功能执行的优化

网页优化 问题 Citrix ADC FEO 功能的功能 优势
内联 客户端浏览器通常向服务器发送多个请求，以加载与网页关联的外部 CSS、图像和 JavaScript。 CSS 内联，JavaScript 内联，CSS 组合 加载外部 CSS，图像和 JavaScript 内联 HTML 文件可以提高页面渲染时间。这种优化对仅查看一次的内容以及缓存大小有限的移动设备有益。
缩小 从服务器获取的数据包括不必要的字符，如空格、注释和换行符。浏览器用于处理此类数据的时间会导致网站延迟。 CSS 缩小，JavaScript 缩小，删除 HTML 注释 缩小文件消耗更少的带宽，避免特殊处理造成的延迟。
图像优化 移动浏览器通常具有较慢的连接速度和有限的缓存内存。在移动客户端上下载图像会消耗更多的带宽、处理时间和缓存空间，从而导致网站延迟。 JPEG 优化、CSS 图像内联、 图像缩缩至 属性、GIF 到 PNG 转换、HTML 图像内联、WebP 图像转换、JPEG、GIF、PNG 到 JPEG-XR 图像转换 将图像缩小至 Citrix ADC 在图像标签中指示的大小，从而使客户端浏览器能够更快地加载图像。
重新定位 外部 CSS、图像和 JavaScript 处理效率低下会增加页面加载时间。 图像延迟加载，CSS 移动到头，JavaScript 移动到尾 重新定位 HTML 元素，以减少网页的渲染时间，并使客户端浏览器能够更快地加载对象。
连接管理 许多浏览器对可以建立到单个域的同时连接的数量设置了限制。这可能会导致浏览器一次下载一个网页资源，导致浏览器时间更长。 域分片 克服了连接限制，通过允许客户端浏览器并行下载更多资源，从而缩短了页面呈现时间。

不同文件类型的 Web 优化：

Citrix ADC 可以在 CSS、图像、JavaScript 和 HTML 上执行 Web 优化。有关更多信息，请参阅 Web 优化 PDF。

注意： 前端优化功能仅支持 ASCII 字符。它不支持 Unicode 字符集。

前端优化的工作原理

Citrix ADC 收到来自服务器的响应后：

  1. 解析页面的内容，在缓存中创建一个条目（如果适用），并应用 FEO 策略。

    例如，Citrix ADC 可以应用以下优化规则：

    • 删除 CSS 或 JavaScript 中存在的空格或注释。
    • 将一个或多个 CSS 文件合并为一个文件。
    • 将 GIF 图像格式转换为 PNG 格式。
  2. 重写嵌入的对象并将优化的内容保存在缓存中，其签名与用于初始缓存条目的签名不同。
  3. 对于后续请求，从缓存（而不是从服务器）中获取优化的对象，然后将响应转发到客户端。

** 删除无关信息，例如空格和注释。

浏览器可以在不检查服务器上是否可用的情况下使用缓存资源的时间段。

配置前端优化

或者，您可以更改前端优化全局设置的值。否则，首先创建指定要应用于嵌入对象的优化规则的操作。

配置操作后，创建策略，每个策略都具有指定要优化响应的请求类型的规则，并将操作与策略关联。

注意： Citrix ADC 仅在请求时，而不是在响应时间评估前端优化策略。

要使策略生效，请将它们绑定到绑定点。您可以全局绑定策略，以便将其应用于流经 Citrix ADC 的所有流量，也可以将策略绑定到 HTTP 或 SSL 类型的负载平衡或内容交换虚拟服务器。绑定策略时，为其分配优先级。优先级数较低表示值越高。Citrix ADC 按照策略的优先级顺序应用策略。

必备条件

前端优化需要启用 Citrix ADC 集成缓存功能。此外，您必须执行以下集成缓存配置：

  • 分配缓存内存。
  • 设置默认缓存内容组的最大响应大小和内存限制。

有关配置集成缓存的更多信息，请参阅 集成缓存。

注意： 术语集成缓存可以与 AppCache 互换使用；请注意，从功能角度来看，两个术语的意思是相同的。

使用 Citrix ADC 命令界面配置前端优化

在命令提示窗口中执行以下操作：

  1. 启用前端优化功能。

enable ns feature FEO

  1. 创建一个或多个前端优化操作。

add feo action <name> [-imgShrinkToAttrib] [-imgGifToPng] ...

示例：要添加前端优化操作以将 GIF 格式的图像转换为 PNG 格式并延长缓存过期，请执行以下操作：

add feo action allact -imgGifToPng -pageExtendCache

  1. [可选] 为前端优化全局设置指定非默认值。

set feo parameter [-cacheMaxage <integer>] [-JpegQualityPercent <integer>] [-cssInlineThresSize <integer>] [-inlineJsThresSize <integer> [-inlineImgThresSize <integer>]

示例：要指定缓存最大有效期：

set feo parameter -cacheMaxage 10

  1. 创建一个或多个前端优化策略。

add feo policy <name> <rule> <action>

示例：要添加前端优化策略并将其与上述指定的 allact 操作关联：

>add feo policy pol1 TRUE all act
>add feo policy pol1 "(HTTP.REQ.URL.CONTAINS("testsite"))" allact1
<!--NeedCopy-->
  1. 将策略绑定到负载平衡或内容交换虚拟服务器，或将其全局绑定。

bind lb vserver <name> -policyName <string> -priority <num>

bind cs vserver <name> -policyName <string> -priority <num>

bind feo global <policyName> <priority> -type <type> <gotoPriorityExpression>

示例：将前端优化策略应用于名为“abc”的虚拟服务器：

> bind lb vserver abc -policyName pol1 -priority 1 -type NONE

示例：对到达 ADC 的所有流量应用前端优化策略：

> bind feo global pol1 100 -type REQ_DEFAULT

  1. 保存配置。保存 ns 配置

使用 GUI 配置前端优化

  1. 导航到 优化 > 前端优化 > 操作，然后单击 添加 ，然后通过指定相关详细信息来创建前端优化操作。
  2. [可选] 指定前端优化全局设置。
  3. 导航到“优化”>“前端优化”，然后在右窗格的“设置”下，单击“更改前端优化 设置”，然后指定前端优化全局设置。
  4. 创建前端优化策略。
  5. 导航到“优化”>“前端优化”>“策 略”，单击“添加”，然后通过指定相关详细信息来创建前端优化策略。
  6. 将策略绑定到负载平衡或内容交换虚拟服务器。
    1. 导航到 优化 > 前端优化 > 策略。
    2. 选择前端优化策略，然后单击 策略管理器。
    3. 在 前端优化策略管理器下，将前端优化策略绑定到负载平衡或内容交换虚拟服务器。

验证前端优化配置

仪表板实用程序以表格和图形格式显示摘要和详细统计信息。您可以查看 FEO 统计信息以评估您的 FEO 配置。

或者，您还可以显示 FEO 策略的统计信息，包括策略计数器在基于策略的 FEO 期间增加的选择数量。

注意： 有关统计信息和图表的更多信息，请参阅 Citrix ADC 设备上的控制面板帮助。

使用 CLI 查看 FEO 统计信息

在命令提示符下，键入以下命令以分别显示 FEO 统计信息、FEO 策略选择和详细信息以及详细的 FEO 统计信息的摘要：

  • stat feo 注意：统计 feo 策略命令仅显示高级 FEO 策略的统计信息。
  • show feo policy name
  • stat feo -detail

查看 Citrix ADC 仪表板上的 FEO 统计信息

在仪表板 GUI 中，您可以：

  • 选择前端优化以显示 FEO 统计信息摘要。
  • 单击“图形视图”选项卡以显示 FEO 功能处理的请求速率。

示例优化：

有关对 HTML 内容和 HTML 内容中的嵌入对象应用的内容优化操作的一些 示 例，请参阅示例 PDF。

前端优化
October 7, 2021
投稿者: 
C
October 7, 2021
投稿者: 
C

在本文中

站点反馈 | Your privacy choices footer link您的隐私选择 | 隐私和法律条款 | Cookie 首选项 | 同意设置 | docs.cloud.com
© 1999- Cloud Software Group, Inc. All rights reserved.