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

前端优化

April 15, 2024
投稿者: 
C

注意：

如果您拥有 Advanced 或 Premium 版 NetScaler 许可证并运行 NetScaler 版本 12.1 或更高版本，则可以使用前端优化。

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

NetScaler 前端优化 (FEO) 功能通过以下方式解决了此类问题并减少了网页的加载时间和渲染时间：

  • 减少请求的数量。
  • 呈现每个页面时必需。
  • 减少页面响应中的字节数。

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

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

由 FEO 功能执行的优化

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

不同文件类型的 Web 优化：

NetScaler 可以对 CSS、图片、Javascript 和 HTML 进行网页优化。有关更多信息，请参阅 Web 优化 PDF。

注意：

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

前端优化的工作原理

在 NetScaler 收到来自服务器的响应后：

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

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

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

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

浏览器无需检查服务器上是否有新内容即可使用缓存资源的时间段。

配置前端优化

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

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

注意：

NetScaler 仅在请求时评估前端优化策略，而不是在响应时评估前端优化策略。

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

有关如何使用 NetScaler 配置前端优化的详细信息，请观看以下视频：

必备条件

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

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

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

注意：

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

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

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

  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. 保存配置。save ns config

使用 GUI 配置前端优化

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

验证前端优化配置

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

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

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

使用 CLI 查看 FEO 统计信息

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

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

在 NetScaler 控制面板上查看 FEO 统计数据

在控制板 GUI 中，您可以：

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

示例优化：

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

前端优化
April 15, 2024
投稿者: 
C
April 15, 2024
投稿者: 
C

在本文中

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