Visualforce最佳实践

了解改进 Visualforce 页面的策略。

注意

在可能的情况下，我们更改了非包容性条款，以符合我们公司的平等价值观。我们保留了某些条款，以避免对客户实施产生任何影响。

提高 Visualforce 性能的最佳实践了解提高 Visualforce 页面性能
的策略。
访问组件 ID 的最佳实践
静态资源的最佳实践
控制器和控制器扩展的最佳实践
使用组件分面的最佳实践
页面块组件的最佳实践
渲染 PDF 文件的
最佳实践将 Visualforce 页面呈现为 PDF 文件是共享有关 Salesforce 组织信息的好方法。以下是一些可供您考虑的最佳做法。
<apex：panelbar> 最佳实践
文档排版约定

提高 Visualforce 性能的最佳实践

学习提高性能的策略视觉力页面。

注意

在可能的情况下，我们更改了非包容性条款，以符合我们公司的平等价值观。我们保留了某些条款，以避免对客户实施产生任何影响。

调查性能问题
Visualforce 旨在为开发人员提供与标准 Salesforce 页面的功能、行为和性能相匹配的能力。如果您的用户遇到延迟、意外行为或专门针对 Visualforce 的其他问题，请首先调查问题的可能来源。
遵循 Visualforce 设计准则
要优化 Visualforce 页面性能，请设计以任务为中心的页面，使用标准对象和声明性功能，并展平组件层次结构。
控制数据大小
Visualforce 页面的标准响应限制为 15 MB，较小的页面加载速度比较大的页面快。若要最大程度地缩短加载时间，请限制每个页面显示的数据量。
缓存经常访问的数据缓存任何经常访问的数据
，例如图标图形，并在自定义设置中缓存全局数据。
延迟加载页面组件
若要减少或延迟成本高昂的计算，请使用延迟加载。使用延迟加载时，页面首先加载其基本组件，并延迟其他功能，直到用户执行需要信息的操作。这种技术使用户能够更快地访问基本功能，并使大页面看起来更具响应性，即使整个页面的加载总时间相同。
处理多个并发请求并发请求
是长时间运行的任务，可以阻止其他待处理的任务。若要减少延迟，请尽可能将代码移动到异步代码块，并确保使用该组件的操作方法是轻量级的。<apex:actionPoller>
编写高效的 Apex 和 SOQL 要提高 Visualforce 页面的整体性能，请编写高效的 Apex 和 SOQL
。
编写高效的 Getter 方法 Visualforce 请求评估表达式、操作属性和其他方法
调用。表单提交等请求可以多次调用类中的 getter 方法。使用更高效的 getter 方法，可以防止对同一记录进行不必要的查找。
优化列表和表格要提高包含列表和表格
的 Visualforce 页面的性能，请限制每页显示的数据量，并减少每个表格的可编辑字段数。您还可以实现分页或将组件替换为静态 HTML 表。<apex:pageBlockTable>
优化视图状态
为了维护 Visualforce 页面的视图状态，Lightning Platform 将组件、字段值和控制器的状态作为加密字符串存储在隐藏的表单元素中。视图状态的限制为 170 KB。大型视图状态需要更长的处理时间，包括序列化和反序列化时间，以及加密和解密时间。如果减小视图状态大小，则页面加载速度更快，停顿频率更低。
优化 HTML 在 Visualforce 验证 HTML 的服务器端，优化的 HTML
提高了处理效率。在客户端，优化的 HTML 使 Visualforce 页面在用户浏览器中的响应速度更快。
优化 CSS 为确保高效交付给客户端，请在 Visualforce 页面中优化 CSS
。优化的 CSS 还改进了缓存并减少了加载时间。
优化 JavaScript 为确保高效交付给客户端，请在 Visualforce 页面中优化 JavaScript 优化的 JavaScript
还改进了缓存并缩短了加载时间。
优化图像图像
通常是网页中最大的组成部分，因此它们会显著影响 Visualforce 页面的性能。
防止字段从页面上
掉落包含许多字段的 Visualforce 页面（尤其是那些具有大型文本区域字段或与其他实体具有主从关系的页面）可能无法显示请求的每个字段。由于批处理限制和对返回的数据大小的限制，可能会删除数据。为防止字段从页面上删除，请减少显示的字段数。或者，创建一个控制器扩展，该扩展可以查询子记录并在相关列表中显示结果。
使用设置了属性的即时属性 Visualforce
组件来执行操作，而无需处理页面上关联字段的任何验证规则。仅当组件执行在完成后导航离开页面的操作时，才应使用此属性。immediatetrue
Visualforce 性能案例研究
要了解 Visualforce 性能优化如何协同工作，请研究如何减少具有大型数据网格和复杂对象层次结构的页面的加载时间。

调查性能问题

Visualforce 旨在为开发人员提供匹配标准 Salesforce 页面的功能、行为和性能。如果您的用户体验延迟、意外行为或专门针对 Visualforce 的其他问题，请首先进行调查问题的可能根源。

验证您的网页是否遵循网页设计的一般最佳实践，例如：

JavaScript 和 CSS 缩小。
网络图像优化。
尽可能避免使用 iframe。

通过测试调查 Visualforce 性能

为确保问题不仅限于单个用户的计算机，请测试您的 Visualforce 页面在多台机器上，使用多个浏览器。检查其他Salesforce的加载时间页面和其他网站。如果 Salesforce 页面加载缓慢，请检查 Salesforce 服务器位于 https://status.salesforce.com。如果所有网页加载缓慢，请检查您的网络配置。

测试并帮助阻止性能回归：

使用 Lightning 平台开发人员控制台调查页面上的 Visualforce 标记和其他 Lightning Platform 功能。与开发人员控制台中，您可以查看消耗系统资源的内容并识别代码中的问题。这开发人员控制台有一个调试日志，其中详细说明了请求作为服务器的性能处理它们。详细信息显示方法、查询、工作流、标注、DML、验证、触发器和页面（按类型和时间）。
使用 Selenium 等工具自动测试繁琐或复杂的工作流程，这些工作流程可以产生不一致的结果。自动化测试可以点击链接、输入和检索数据、并记录执行时间，以发现手动测试可以发现的瓶颈和缺陷思念。
在尽可能多的浏览器和尽可能多的版本中进行测试。
使用大量数据进行测试。这些测试可以揭示数据偏斜的场景，其中某些用户有权访问过多的记录。避免无界数据，实现分页，以及仅显示相关数据。
使用 HTML、CSS 和 JavaScript 分析和调试工具提供对网络的洞察延迟、加载时间和代码效率。
在真实的移动设备上进行测试，以发现开发人员不明显的性能问题机器。由于处理器速度较慢，移动客户端具有不同的性能配置文件，内存有限，网络连接速度较慢。

提示

将 WebPageTest 等工具用于初始移动浏览器测试，但使用真实设备进行深入测试。

遵循 Visualforce 设计准则

要优化 Visualforce 页面性能，请设计以任务为中心的页面，请使用标准对象和声明性功能，并扁平化组件层次结构。

设计以任务为中心的页面

围绕特定任务设计页面，具有逻辑工作流和清晰的导航任务之间。不要用功能和数据使页面过载。Visualforce 页面具有无界数据或大量组件、行和字段的差可用性和性能。它们可能会达到视图状态和堆的调控器限制大小，并且它们可能会超过记录检索限制和页面大小限制。推回到包含非必要功能和构建原型的请求验证性能问题。

尽可能使用标准功能

Lightning Platform 的编程功能使其易于自定义功能性。但标准对象和声明性功能（如审批）流程、流程和工作流规则 – 已经高度优化，但尚未优化计入大多数调控器限制。标准功能简化了数据模型，并且经常减少业务流程所需的 Visualforce 页面数量。

扁平化组件层次结构

扁平组件结构的处理速度比深层分层组件快结构。限制自定义组件的嵌套以进行逻辑组织功能，并且仅当该逻辑旨在重用时才使用自定义组件或包含在另一个包中。庞大的层次结构增强了服务器端管理和处理时间，因为 Visualforce 在整个过程中维护上下文请求。组件层次结构的每次遍历都会消耗时间和资源。巨大层次结构还使页面面临达到堆大小调控器限制的风险。

控制数据大小

Visualforce 页面的标准响应限制为 15 MB，较小的页面加载速度更快比较大的页面。若要最大程度地减少加载时间，请限制每个页面的数据量显示。

筛选查询结果

使用筛选器限制 Salesforce 对象查询语言（SOQL）调用的数据，以及 Apex 控制器返回。例如，在子句中使用语句。还可以删除 null 查询结果。ANDWHERE
创建 Apex 控制器时，请使用关键字仅检索用户可以访问的记录。with sharing
首先在 SOQL 中过滤，然后在 Apex 中过滤，最后在 Visualforce 中过滤。

使用分页

具有无限数据的页面可能会导致加载时间延长，达到调控器限制，并成为随着数据集的增长而不可用。若要防止列表视图显示未绑定的数据，请执行以下操作：使用列表控制器实现分页。默认情况下，列表控制器返回 20 每页记录数，但您可以将列表视图配置为一次最多显示 100 条记录。要控制每个页面显示的记录数，请使用控制器扩展将 .pageSize
使用 SOQL 子句编写逻辑分页到 SOQL 中结果的特定子集。OFFSET

缓存经常访问的数据

缓存任何经常访问的数据，例如图标图形，并缓存全局数据在自定义设置中。

Visualforce 页面有时会全局使用计算结果。页面使用相同的数据跨用户和请求。要提高使用全局数据的页面的性能，请缓存在自定义设置中计算结果，并定期刷新结果，而不是在每个请求。自定义设置是应用程序缓存的一部分，不需要数据库查询检索。在此方法与更新自定义缓存所需的时间之间取得平衡数据。

延迟加载页面组件

若要减少或延迟成本高昂的计算，请使用延迟加载。使用延迟加载，页面首先加载其基本组件，并延迟其他功能，直到用户执行需要信息的操作。这种技术使用户能够更快地访问基本功能，并使大页面看起来更具响应性，即使整个页面采用加载的总时间相同。

要延迟加载 Visualforce 页面的某些部分，请使用以下技术：

使用 Visualforce 组件上的 rerender 属性更新组件，而不更新整个页面。
使用 JavaScript 远程处理调用控制器中的函数并检索辅助或静态数据。
创建自定义组件以根据用户操作显示和隐藏数据。

延迟加载页面时，请考虑用户数和预期的数据量页面。请注意并发 API 调用限制等限制。例如，如果导航树仅根据需要加载元素，查询数量可能最终超出与数据的比例。

处理多个并发请求

并发请求是长时间运行的任务，可以阻止其他待处理的任务。减少延迟，尽可能将代码移动到异步代码块，并确保操作方法使用组件是轻。

<apex:actionPoller>

编写异步代码

若要卸载成本高昂的处理，请使用异步 JavaScript 和 XML （Ajax）移动异步代码块的非必要逻辑。例如，对于仅使用同步代码，用户单击按钮并等待长时间运行的任务完成在他们看到确认消息之前。相反，如果页面将长时间运行的任务进行异步处理，则控件会立即返回给用户。您可以将页面配置为在任务完成时通知用户。

保持 <apex：actionPoller> 轻量级

该组件是一个计时器，它发出 Ajax 请求。使用该组件的页面在服务器上发出连续请求。如果用户长时间打开页面或在同一页面上打开多个窗口页面（例如，获取多个帐户的详细信息）会降低性能。<apex:actionPoller><apex:actionPoller>

为避免性能下降，请避免执行 DML、外部服务调用等调用的操作方法中的资源密集型操作。仔细考虑重复调用的动作方法的效果间隔。当该方法用于广泛分布或持续活跃的页面。<apex:actionPoller><apex:actionPoller>

为避免达到调控器限制，请增加 Ajax 请求之间的时间间隔。组件的 interval 属性以秒为单位测量 Ajax 更新请求之间的时间间隔。此值必须为 5 秒或更大，如果未指定，则默认为 60 秒。<apex:actionPoller>

该组件适用于不需要昂贵处理的页面，但适用于计算需要的页面更多的服务器时间，请考虑将组件与 JavaScript 一起使用远程处理相反。这种替代方法需要更多的代码，但提供了更大的灵活性和效率。<apex:actionPoller><apex:actionFunction>

写入高效的 Apex 和 SOQL

自提高整体性能一个视觉力页面，写入效率高 Apex 和 SOQL。

当您编写 Apex 或 SOQL 以在 Visualforce 页面中使用时：

尽可能在 SOQL 中执行计算，而不是在 Apex 中执行计算。
切勿在循环中执行数据操作语言（DML）操作。
首先在 SOQL 中过滤，然后在 Apex 中过滤，最后在 Visualforce 中过滤。

编写高效的 getter 方法

Visualforce 请求评估表达式、操作属性和其他方法调用。一个表单提交等请求可以多次调用类中的 getter 方法。跟更有效的 getter 方法，您可以防止不必要的查找记录。

若要减少每个请求的处理负载，请缓存属性计算的值，以便其他调用可以在不重新计算值的情况下访问该属性。

您还可以在 Apex 类中配置 getter 方法，使其仅在 object 为 null。例如，以下代码片段返回关联的客户记录与页面。在第一次方法调用时，该方法查询记录，因为 MyAccount 对象为 null。在后续调用中，它将返回对象的存储值，该值防止其他相同的查询：SELECT


 Account MyAccount;
 public Account getMyAccount() {
    if (MyAccount == null) {
            MyAccount = [SELECT name, annualRevenue FROM Account
            WHERE
            id = :ApexPages.currentPage().getParameters().
            get('id')];
        }
    return MyAccount;
 }

优化列表和表格

要提高包含列表和表格的 Visualforce 页面的性能，请限制数量每页显示的数据，并减少每个表的可编辑字段数。您还可以实现分页或将组件替换为静态 HTML 表。

<apex:pageBlockTable>

如果可能，避免使用数据网格

数据网格是显示具有可编辑字段的记录的表。数据网格频繁扩展到页面上的数千个输入组件，并超过最大视图状态大小。大型数据网格会导致 Visualforce 组件树的处理速度较慢。

如果您的 Visualforce 页面有数据网格：

使用分页和过滤器。
若要减小视图状态大小，请尽可能将数据设置为只读。
仅显示给定记录的基本数据。提供指向基于 Ajax 的详细信息的链接框或到单独的详细信息页面。

考虑静态 HTML 表格

具有迭代组件的 Visualforce 页面最多可以包含 1,000 个项目，或者当页面以只读模式执行。但是，页面性能有时会在之前下降如果包含具有 Render 属性的组件，则此限制明确指定。<apex:pageBlockTable><apex:pageBlockTable><apex:column>

如果您的 Visualforce 页面包含大型表格，我们建议您实现分页。或者，您可以使用静态 HTML 表而不是组件。在 HTML 表中，使用组件循环访问 HTML 行元素。有关使用的示例 HTML 表，请参阅 apex：repeat 组件参考页面。<apex:pageBlockTable><apex:repeat><apex:repeat>

注意

与表格不同，静态 HTML 表没有标准的 Salesforce 样式。<apex:pageBlockTable>

优化视图状态

为了维护 Visualforce 页面的视图状态，Lightning Platform 会存储组件、字段值和控制器作为隐藏表单元素中的加密字符串。视图状态的限制为 170 KB。大型视图状态需要更长的处理时间每个请求，包括序列化和反序列化时间，以及加密和解密时间。如果减小视图状态大小，则页面加载速度更快，停滞更少经常。

要检查 Visualforce 页面的视图状态，请设置“开发模式”和“显示视图状态” 在开发模式下的用户权限。开发模式页脚中的“视图状态”选项卡显示视图状态的分布。确保您知道每个视图的状态大小页面，并使用大量数据进行测试，以防止部署后可能出现的问题。

要减少视图状态，请执行以下操作：

使用筛选器和分页来减少需要状态的数据。
使用关键字声明实例变量如果该变量仅对当前请求有用。不包括瞬态变量在视图状态中。transient
优化 SOQL 调用，以仅返回与 Visualforce 页面相关的数据。
减少页面所依赖的组件数量。
将数据设置为只读。使用组件而不是组件。<apex:outputText><apex:inputField>
使用 JavaScript 远程处理。与组件不同，JavaScript 远程处理不需要组件。JavaScript 远程处理不会降低页面的整体视图状态，但您的页面通常性能更好，而没有需要传输、序列化和反序列化视图状态。权衡是损失 reRender 属性和其他 JavaScript 代码的必要性处理回调。<apex:actionFunction><apex:form>

优化 HTML

在服务器上 Visualforce 验证 HTML 的一侧，优化 HTML 改进了处理效率。在客户端，优化的 HTML 使 Visualforce 页面在用户的浏览器。

要优化 Visualforce 中的 HTML 页：

查看 Visualforce 组件生成的 HTML。Visualforce 页面更正无效编译期间的 HTML，这可能会导致这 HTML 以意外的方式呈现。例如，如果您的标签内有一个 or 标签，则 Visualforce 页面会在运行时间。<head><body><apex:page>
查看 Ajax 代码。在阿贾克斯期间请求，以确保响应正确地适合 DOM的，服务器验证并更正入站 HTML。处理时间减少如果您的 Visualforce 页面包含有效的标记，以及是否需要更正。
减少 HTML 膨胀。虽然浏览器缓存 HTML 和编译的 Visualforce 标记，从缓存中检索它们会影响性能。必要 HTML 还增加了组件树的大小和 Ajax 的处理时间请求。

优化 CSS

为确保高效交付给客户，优化 Visualforce 中的 CSS 页。优化的 CSS 还改进了缓存并减少了负荷次。

改进 CSS 一个 Visualforce 页面：

外部化样式表。从 Visualforce 页面中删除内联 CSS 代码，并将其放在单独的 CSS 文件。这种做法会增加初始 HTTP 请求的数量，但会减少单个页面的大小。浏览器缓存样式表后，整体请求尺寸减小。
将所有 CSS 文件合并到一个文件中，从而减少 HTTP 请求的数量。
删除注释和多余的空格。压缩生成的文件以加快速度下载。
使用静态资源提供 CSS 文件。以这种方式提供的样式表受益于缓存和 Salesforce 中内置的内容分发网络（CDN）。
对于不使用 Salesforce CSS 文件的页面，请将标记的 showHeaders 和 standardStylesheets 属性设置为 .这种做法排除了标准生成的页眉中的 Salesforce CSS 文件。<apex:page>false

优化 JavaScript的

为确保高效交付给客户，优化 Visualforce 中的 JavaScript 页面优化的 JavaScript 还改进了缓存和减少加载时间。

为了改进 JavaScript的在一个 Visualforce 页面：

外部化 JavaScript 文件。此过程会增加初始 HTTP 请求的数量，但它也减小了单个页面的大小并利用了浏览器缓存。
仅使用您需要的函数构建 JavaScript 库的自定义版本。这进程显著减小了 JavaScript 文件的大小。许多开源 JavaScript 库（如 jQuery）提供此选项。
减少 HTTP 请求者结合将所有 JavaScript 文件合并为一个文件。删除可能导致多个 HTTP 的重复函数请求。
删除注释和空格。压缩生成的文件以加快下载速度。
使用静态资源提供 JavaScript 文件。JavaScript 以这种方式提供服务好处来自 Salesforce 内置的缓存和内容分发网络（CDN）。
将脚本放在页面底部。如果脚本直接在结束标记之前加载，则页面可以下载其他组件首先，逐步呈现页面。</body>注意仅将 JavaScript 移动到页面底部如果你确定那它没有任何不良影响影响。例如，不要从元素中移动需要或事件处理程序的 JavaScript 代码片段。document.write<head>
而不是使用标签，考虑直接在之前使用标准 HTML 标记您的结束标签。标记将 JavaScript 置于正确的位置在关闭元素之前，这会导致浏览器尝试加载 JavaScript，然后再在页。<apex:includeScript><script></apex:page><apex:includeScript></head>

优化图像

图像通常是网页中最大的组成部分，因此它们会显着影响 Visualforce 页面的性能。

要最大程度地减少映像对性能的影响，请执行以下操作：

使用更少的图像和较小的背景纹理。
尽可能使用 CSS 而不是图像。
使用 CSS 精灵而不是单个图像。使用 CSS 精灵，您可以将将大小相似的图形（如按钮和图标）集合到单个文件中。然后您可以使用 CSS background-image 和 background-position 属性来显示组合的部分图像。由于此技术减少了使用的图像数量，因此 HTTP 请求的数量发送量也减少。缓存一个 Sprite 文件也比缓存多个 Sprite 文件更有效图像。
使用静态资源提供图像。以这种方式提供的图像受益于缓存和 Salesforce 中内置的内容分发网络（CDN）。
压缩图像。图形工具通常使用默认设置，这些设置有利于视觉保真度保存图像时压缩和添加元数据。图像压缩工具可以减少在不降低视觉质量的情况下，图像的文件大小最多可减少 30%。

提示

要改进开发工作流程，请添加压缩图像的脚本资产。

防止字段从页面上删除

具有许多字段的 Visualforce 页面，尤其是具有大型文本区域字段的页面或通过与其他实体的主从关系，可以失败以显示请求的每个字段。由于批处理限制和限制，数据可能会被删除数据大小返回。为防止字段从页面上删除，请减少显示的字段数。或者创建一个控制器扩展，可以查询子记录并在相关中显示结果列表。

注意

在可能的情况下，我们更改了非包容性条款，以符合我们公司的平等价值观。我们保留了某些条款，以避免对客户实施产生任何影响。

谨慎使用 immediate 属性

具有属性的 Visualforce 组件设置为在不处理任何操作的情况下执行操作页面上关联字段的验证规则。仅当以下情况时，才应使用此属性该组件执行一个操作，该操作在完成后导航离开页面。

immediatetrue

当组件行为包含基本导航以外的内容时，会出现功能问题功能性。因为不会更新页面的数据模型，页面的数据模型不会反映在操作期间所做的任何更改。这种差异可能会导致未定义的行为和可能的数据损坏。immediate=”true”

建议仅在取消时使用 immediate 属性行动。下面的示例演示此属性的正确用法。当用户单击“取消”，组件将立即执行，无需用户修复验证错误。<apex:CommandLink>cancelApplication

<apex:CommandLink action="{!cancelApplication}" value="Cancel" styleClass="btn" id="btnCancel" immediate="true">

Visualforce 性能案例研究

要了解 Visualforce 性能优化如何协同工作，请查看以下方法减少具有大型数据网格和复杂对象的页面的加载时间等级制度。

想象一下，您有一个带有数据网格的 Visualforce 页面，用于收集销售预测。这预测的数据模型包含多级对象层次结构。该页面还包含用于显示透视数据的计算。对于普通用户，网格包含大约 1,500 个单元格，这会导致页面加载缓慢并达到堆和视图状态限制。

要优化页面性能，您可以：

使页面有针对性且以任务为中心。对输入和聚合使用同一页面报告增加了不必要的复杂性。
创建一个自定义对象来保存用于报告的聚合数据。删除所需的公式显示聚合数据可减小堆大小。
避免在单个页面上显示每个帐户。实现分页，从而改进页面加载速度并减小视图状态的大小。
将数据网格单元格设置为只读。让用户选择要编辑的单元格，然后使用 Ajax 保存用户的编辑。这些做法减小了视图状态的大小。