VisualForce Page经验分享

Testing Visualforce Pages

1. 如果VF加载很慢先到http://trust.salesforce.com/trust/status/里边看看所在服务器是否有异常或者维护中。
2. 可以用http://seleniumhq.org/等进行自动测试。
3. 尽量测试多浏览器多设备，保证没有问题。
4. 要进行大量数据读取等测试。
5. 要在真机上进行相关测试，确保兼容性

调整VF的性能

常规的开发注意事项

• VF画面要功能明确，避免业务交叉
• 不要加载大量数据到画面，灵活使用分页等技术
• 提交请求时不要带不必要的参数
• 创建Prototype来测试画面性能

尽量使用Salesforce的标准功能

• 尽量使用标准对象
• 尽量使用标准的自动工具，Process，Workflow，因为这些标准功能已经经过Salesforce的优化，并且很少使用系统资源

控制画面的size

VF的Size不能超过15M，为了降低响应时间有以下办法

• 使用Where等条件来减少SOQL查询出来的数据。
• 灵活使用Apex的With sharing关键字，减少检索的数据
• 遇到分页使用StandardSetController来实现避免自己写代码，容易触及Salesforce的限制，
• SOQL OFFSET 可以实现分页数据查询

Lazy Loading

画面加载优先加载对客户必要的信息，不要的信息延后加载。有以下方法

• 使用VF的rerender属性，根据条件显示数据
• 使用Javascript Remote方法来动态的调用Apex，检索数据。
• 创建共同Component来显示和隐藏数据

灵活使用异步方法

传统的点击按钮等待画面相应往往花费大量系统资源，客户体验也不是很好。
所以推荐客户使用异步方法，在功能执行完之后通过邮件或者其他方式通知客户。

经常使用的数据保存在Custom setting里

书写高效的Apex和SOQL

Apex开发和注意事项参考另外文章【Apex开发注意事项】

• 尽量在SOQL里实现计算，而不是在APEX里
• 不要把SOQL写在循环里
• 首先在SOQL里设定过滤条件，然后在APEX里过滤，最后在VF里过滤。

书写高效的Getter方法

确保当Object是Null的时候进行数据检索，同一个请求里是可以重复使用缓存数据的。

View State调优

• 使用transient来实现无状态传输数据
• 确保SOQL只返回画面需要的值，并减少画面显示的项目和数据条数。
• 减少引用组件的数量
• 考虑把只显示画面的项目使用apex:outputText 而不是apex:inputField.
• 在开发者模式下开发区域有个View State的Tab可以看到View State的状态。
• 考虑使用remoting javascript代替apex:actionFunction ，因为remoting javascript不使用Form表单来传递值，所以能有效的减少View State的大小

组件层级优化

扁平的组件模式比带有多层的组件模式效率更高，因为salesforce的一个请求要处理所有的组件，所以层级越多服务器端压力越大，相应时间就越长，更容易触及salesforce的limit。

Polling调优

当使用了apex:actionPoller 的时候适当调高interval的时间来降低服务器端的压力。
另外测试的时候要多打开几个Tab同时测试同一个画面，确认是有冲突的问题。

HTML调优

• Review由VF生成的HTML，确保生成的代码和VF的结构是一样的。因为有的时候VF在编译的时候会自动纠正HTML的错误，如果VF里有一些不合理的代码在VF执行的时候被修改了，如果没注意可能引起麻烦，另外也增加了服务器端的负荷。
• 确认Ajax代码，确保包含的HTML都能被正确的解析和返回，减少服务器端的校验。
• 减少HTML的不必要的代码，虽然浏览器缓存会加快访问速度，但是不必要的代码可能会增加组件的层级，从而增加服务器端的负荷。

CSS调优

• 一定要把CSS放到单独的文件里保存在静态资源里，然后在画面上引用，虽然这么做增加了画面初次访问时候的加载时间，但是他有效的减少的每个资源文件的size，这样可以有效的缓解服务器的压力，另外浏览器一次加载之后再次访问时是可以提高效率的。
• CSS文件不要创建多个要把所有的都放到一个文件里，减少Http的请求
• 删除掉文件里的空格，tab，注释等减少文件的体积。
• 自己开发的画面不要加载Salesforce的CSS，在 apex:page 里把showHeaders 和 standardStylesheets 设置成 false，这样在画面加载的时候就不会加载Salesforce的CSS了。

JavaScript调优

• 一定要把JS放到单独的文件里保存在静态资源里。
• 引用外部JS库的时候，注意只引用真正用的部分，这样可以减少加载JS的Size。
• 合并所有的文件到一个JS文件里，并且去除掉重复的方法。
• 删除掉文件里的空格，tab，注释等减少文件的体积。
• 把可以移动的部分移动到画面的底部，从而加快画面展示部分加载速度。（不能移动的部分就不要动了）
• 尽量使用

优化使用图片

• 尽量用CSS来代替图片，使用 CSS sprites 来拼接图片，然后用background-image and background-position来显示。
• 把图片放到静态资源里。
• 压缩图片

如果使用的是IE有以下建议

• 不要使用AlphaImageLoader，他会导致图片加载问题。
• 使用 来导入stylesheets，使用@import会改变画面加载顺序。
• 避免直接写CSS语句。