SFDC Lightning Performance Tuning

https://help.salesforce.com/s/articleView?id=000382793&type=1

1.Geographical Issues（确认org的服务器和用户使用org的位置是不是一样的）
确认org的服务器位置的方法：
In Salesforce Classic: Setup | Company Profile | Company Information
In Lightning Experience: Gear icon | Setup | Company Settings | Company Information
2. Device and Browser-Related Issues（设备和关联问题）
确认电脑和网络是不是在健康状态
关闭浏览器等无用的扩展软件从而提高
保持浏览器始终是最新版本
不行就换个浏览器
重新启动或者重启浏览器

3. Salesforce org设定
   调整VF的性能
   把Aura的Debug模式关闭掉（go to Setup, select Lightning Components, and then deselect the Enable Debug Mode checkbox）
   重新配置你的复杂画面
   客户要看的再去取
   打破大的画面，第一个初期显示的Tab里的内容尽量少，其他不那么重要的分散到别的tab里。
   自定制的组件，开发之后测试一下加上组件和不加组件的区别，考虑是否用Action等代替直接显示在画面上

4. Lightning Components Performance Best Practices
   获取数据
   在从服务器取数据之前，确定没有别的办法了
   如果能在不同的component之间传递数据尽量传递 不要从服务端获取
   从服务器端获取数据的时候尽量少的获取项目，在用limit获取数据量
   不要提前获取客户可能不用的数据，采用懒人加载方式，通过点击link，或者tab来获取额外的数据
   不要为了排序和过滤取调用服务器端，尽量在客户端进行处理
   把需要处理的请求结合成一个请求一起去服务器端获取（请求次数影响效率）
   如果可能缓存数据
   数据缓存
   storable actions and Lightning Data Service能够在客户端缓存数据，减少服务器调用
   storable actions
   Caching Data with Storable Actions
   
   server action：是服务器端的Apex方法
   storable action ：是调用服务器端方法之后保存在客户端的缓存里的（同样的方法，同样的参数）
   var action = component.get(“c.getItems”);
   action.setStorable();
   action.setCallback(this, function(response) {
   // handle response
   };
   $A.enqueueAction(action);
   当action.setStorable();被调用之后，如果缓存里有那么马上就返回数据，如果缓存里的和服务器的数据不一致那么会在后台调用服务器并返回。
   框架给storable action设置两个参数来控制它。
   Expiration age: 缓存的数据存在时间如果比Expiration age更久的话，就会被废弃，现在框架设置的是900秒，这个数值不能被修改。
   Refresh age: 是30秒，缓存的时间比这个大的话，就会刷新。

               The response is available in the cache and doesn’t need to be refreshed
               ![test](https://img-blog.csdnimg.cn/6420cbe58f324db090017ab463f003e5.png)
   		    1:The component calls a server method
   			2:The framework checks if the response is available in the cache
   			3:The response is available, and doesn’t need to be refreshed (cached response age <= refresh age)
   			4:The framework calls the action callback function, providing the cached response
   			5:There is no server round-trip in this scenario—a nice performance win!
   			
   			The response is available in the cache and needs to be refreshed
   			![test](https://img-blog.csdnimg.cn/c4192b0ab2dc4b6aa568a5cf17e71733.png)
   			1:The component calls a server method
   			2:The framework checks if the response is available in the cache
   			3:The response is available in the cache and needs to be refreshed (cached response age > refresh age)
   			4:The framework calls the action callback function providing the cached response
   			5:The framework calls the server method to get a fresh response
   			6:The server returns the response
   			7:The framework updates the cache with the new response
   			8:If the server response is different from the cached response, the framework calls the action callback function for the second time with the updated response
   			什么可以缓存？
   				不同的方法的调用不会被保存，更新，插入等更改数据不会被保存
   			     缓存是整个系统缓存，不同的画面是共享缓存的，所以不同画面同一个服务器调用是可以共享缓存数据的。
   		    storable actions vs Lightning Data Service vs custom cache
   		   ![test](https://img-blog.csdnimg.cn/11ae1928aa1841c5bb4267a9e36ce980.png)
   	Lightning Data Service
   		不用调用apex，框架来控制数据和在本地缓存中保存着,在所有的组件中传递数据，并且把变化传递给服务器。他只保持客户需要的项目，如果别的请求追加了项目请求，他会从服务器端取下来然后更新缓存，他不像Storable Action可以存储各种数据类型，他只能保持Sobject类型，也就是某个object的数据,最后他更新的数据会同时通知给其他使用的组件，会自动刷新。
   	Custom cache
   		如果Storable Action和LDS都不能满足需求，那么就用Custom Cache吧，注意最好的使用场景是不变的master数据，例如一个国家的省份列表等等。
   		DataCache static resource (File > Open > Static Resource > Data Cache in the developer console).
   		[Sample Code](https://developer.salesforce.com/blogs/developer-relations/2017/04/mutual-fund-explorer-new-lightning-components-sample-application)
   	懒人加载
   		用<aura:if> 来判断哪些组件优先加载，哪些延后加载
   		<lightning:tabset> and <lightning:tab>等本来就支持懒人加载
   		实在不行用 $A.createComponent()来写代码实现，但是这样做势必提高开发成本
   	按条件引用
   		用CSS来控制组件是否显示
   			<div aura:id="error">{!v.errorMessage}</div>
               cmp.find("error").toggleClass(!isError, "slds-hide");
       第三方插件引用
       	DOM manipulation libraries（Jquery）
       	UI libraries（Bootstrap and jQuery UI.）
       	MVC frameworks（React and AngularJS）
       	以上都慎用
       Base Lightning Components
       	lightning namespace比ui namespace更优秀
       		Styles
       		Performance
       		Innovation
       		Accessibility
       		Client-side validation
       图片
       	尽量使用<lightning:icon> 来加载
       	不用加载尺寸不定的图片
       Rendering and reflow
       	[Rendering Lifecycle](https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/js_renderers.htm) 
       	1:A browser event triggers one or more Lightning events.
   		2:Each Lightning event triggers one or more actions that can update data. The updated data can fire more events.
       	3:The rendering service tracks the stack of events that are fired.
       	4:The framework rerenders all the components that own modified data by calling each component’s rerender() method.
       	5:The framework fires a render event, enabling you to interact with the DOM tree after the framework rerenders a component.             	Handling the render event is preferred to creating a custom renderer and overriding rerender().
       开发和生产的设定区别
       	![test](https://img-blog.csdnimg.cn/a3c0b14c21e54ac189bdefa1996fa03b.png)
   	To enable/disable debug mode: Setup > Custom Code > Lightning Components
   	To enable/disable component caching: Setup > Security > Session Settings > Caching, and uncheck Enable secure and persistent browser caching to improve performance
   	性能调优工具
   		Profile Components with Chrome Timeline
   		Use the Salesforce Lightning Inspector Chrome Extension
   		Analyze with the Salesforce Community Page Optimizer