docs: update FAQ (#4128)

* docs: perf doc table

* docs: update FAQ

* docs: perf links and imgs

packages/site/docs/manual/FAQ/faq.en.md

@@ -12,3 +12,64 @@ order: 0
 - [Multiple Edges between Two Nodes](/en/docs/manual/middle/elements/methods/multi-line)
 - [G6 in React](/en/docs/manual/advanced/g6InReact)
 - [How to auto zoom Tooltip、ContextMenu when zoom canvas](/en/docs/manual/middle/plugins/autoZoomTooltip)
+
+
+### fitView Failed
+> I configured `fitView: true` on the graph instance, but it is not taking effect
+
+The reasons and solutions for it：
+
+1. The value of `minZoom` is too big. If you have a graph with large range, e.g. positions of nodes range from 0 to 10000, the zoom ratio to propertly fit to the view requires a very small value of `minZoom`. So the zoom failed. The default value of `minZoom` is 0.02. To address it, you could assign a small value to `minZoom`, e.g. 0.0000001;
+
+2. If you are using `type: force` layout, or other force family layouts e,g, force2、forceAtlas2 etc. and assigned `animate: true` for them. The animation looks like force simulation is the result of rendering the mid-result after each iteration during the layout calculation. If we do `fitView` every single time the graph renders, the view might flashes a lot. So the `fitView` will be called after the layout is totaly done. And, when the force layout going to end, the displacements of the nodes might be micro. It looks like the animation is finished but the graph did not fit to view. It is also expected, since the `fitView` will only be called after the force layout is totaly fininshed.
+
+P.S. force does not support silence layout right now. But we add a new force family layout named `force2`, whichi supports config it by `animate`. If it is assigned to `false` and the graph instance is configured with `fitView: true`, the graph will not be rendered until the layout is done and fit to the view in the same time.
+
+3. The `width` or `height` for the graph instance is not correct. Oversize comparing to the container, initial state at React, or some other reasons might lead to the problem. If you want to keep the graph fitting the the container, listen to the changes of `width` and `height` of the container, and call `graph.changeSize` and `graph.fitView`. e.g. call `graph.changeSize` after the user resize the browser:
+
+```javascript
+if (typeof window !== 'undefined') {
+  window.onresize = () => {
+    if (!graph || graph.get('destroyed')) return;
+    if (!container || !container.scrollWidth || !container.scrollHeight) return;
+    graph.changeSize(container.scrollWidth, container.scrollHeight);
+  };
+}
+```
+
+### Rendering Residuals
+
+G6 4.x depends on the rendering engine @antv/g@4.x, which supports the local refresh. Local refresh definitely brings the performance improvements, but the residual problem in the same time. e.e. the label of the node leaves the residuals while dragging the node. Recently, @antv/g is in the process of upgrading to v5.x, it might not consider to fix the issue at v4.x. So when we encounter the problem, we could try the following steps to alleviate the problem:
+
+1. Check the attributes of the shapes in the node/edge/combo who leaves the residuals to avoid the invalid values, e.g. `null`, `NaN`, etc.;
+
+2. Use the round number for the number type attributes if it is possible, e.g. `r`, `width`, `height`, `fontSize`, etc.;
+
+3. Assign `labelCfg.style.fontFamily` or `fontFamily` in the text shape who leaves residuals with the font of the brower;
+
+4. Add white stroke to the text, e.g.:
+
+```javascript
+// node/edge/combo config
+labelCfg: {
+  style: {
+    stroke: '#fff',
+    lineWidth: 4
+  }
+}
+// for the text shape in custom node/edge/combo
+group.addShape('text', {
+  attrs: {
+    // ... other attributes,
+    stroke: '#fff',
+    lineWidth: 4,
+  }
+})
+```
+
+5. If the steps above did not solve your problem, disable local refresh by `graph.get('canvas').set('localRefresh', false)`, and this might slow down the rendering.
+
+
+### Performance Improvement
+
+The performance problem in G6 has two aspect: rendering and calculation(e.g. layout). We are trying our best to improve the built-in code in G6 to make the proformance better. But sometimes, we suggest users to implement graph app with better way to alleviate the probmen. Refre to [Performance Tips for G6 Apps](/en/docs/manual/faq/performance-opt) to see the tips for your app!

packages/site/docs/manual/FAQ/faq.zh.md

@@ -12,3 +12,63 @@ order: 0
 - [两点之间存在多条边](/zh/docs/manual/middle/elements/methods/multi-line)
 - [React 中使用 G6](/zh/docs/manual/advanced/g6InReact)
 - [缩放画布时如何让 Tooltip、ContextMenu 自动缩放](/zh/docs/manual/middle/plugins/autoZoomTooltip)
+
+### fitView 失败
+> 为什么明明在图实例上配置了 `fitView: true`，但却不生效？
+
+fitView 不生效的原因可能是：
+
+1. `minZoom` 值不够小。如果你的图范围很大，要缩放到小于 `minZoom` 的值才能完成适配，这种情况下缩放就会失败。图默认的 `minZoom` 是 0.02。解决方案是在实例化图的时候将 `minZoom` 设置一个很小的值；
+
+2. 如果使用的是 `type: force` 布局，布局过程是实时渲染计算结果的，所以会出现模拟力相互作用的动画效果。这种情况下如果每一次渲染都进行 fitView，那么图可能就忽大忽小的，因此若配置了 fitView 那么 G6 会在布局结束的时候，进行一次图的适配。即动画结束时进行大小适配。而 force 在迭代的尾声接近收敛，节点移动的幅度很小，有时候看起来好像动画已经结束了却还没有适配，需要等它完全稳定下来才意味着布局结束，从而进行大小适配；
+
+P.S. force 不支持无动画的布局，近期新增的 `force2` 支持配置 `animate` 来控制是否一边计算布局一边渲染，设置为 `false`，且图实例配置了 `fitView: true`，那么将布局完成后直接绘制出适配容器大小的图。
+
+3. 给到 graph 的 `width` 或 `height` 在图实例化时不准确，导致创建的画布大小不对。这很有可能出现在 React 初始化时，图的容器还没有渲染。如果需要图始终适配容器大小，可以监听容器的 `width`、`height` 变化，进行 `graph.changeSize` 和必要的 `graph.fitView`。例如在用户拖拽浏览器改变大小时，使用 `graph.changeSize`:
+
+```javascript
+if (typeof window !== 'undefined') {
+  window.onresize = () => {
+    if (!graph || graph.get('destroyed')) return;
+    if (!container || !container.scrollWidth || !container.scrollHeight) return;
+    graph.changeSize(container.scrollWidth, container.scrollHeight);
+  };
+}
+```
+
+### 渲染残影问题
+
+G6 4.x 依赖的渲染引擎 @antv/g@4.x 版本支持了局部渲染，带了性能提升的同时，也带来了图形更新时可能存在渲染残影的问题。比如拖拽节点时，节点的文本会留下轨迹。由于目前 @antv/g 正在进行大版本的升级（到 5.x），可能不考虑在 4.x 彻底修复这个问题。当我们遇到这个问题的时候，考虑通过下面几种方法解决：
+
+1. 检查节点中的图形，包括文本图形，样式配置中是否存在非法值，例如 `null`、`NaN` 等；
+
+2. 尽量使用整数作为数值型的样式值，例如 `r`、`width`、`height`、`fontSize` 等；
+
+3. 使用浏览器字体作为 `labelCfg.style.fontFamily` 或留下残影的文本图形的 `fontFamily` 属性；
+
+4. 给文本增加白色描边，如：
+
+```javascript
+// 节点/边/ combo 的文本配置
+labelCfg: {
+  style: {
+    stroke: '#fff',
+    lineWidth: 4
+  }
+}
+// 自定义节点/边/ combo 中的文字图形
+group.addShape('text', {
+  attrs: {
+    // ... other attributes,
+    stroke: '#fff',
+    lineWidth: 4,
+  }
+})
+```
+
+5. 以上方法都不奏效，关闭局部渲染 `graph.get('canvas').set('localRefresh', false)`。这个方法可能导致性能有所降低。
+
+
+### 卡顿 / 性能差
+
+G6 的性能主要存在两个瓶颈：渲染、计算（例如布局计算）。G6 内部的代码在持续迭代性能优化，尽可能保持内置代码性能最优。有时候，可能是大家在使用 G6 实现自己的应用时，由于不熟悉或 G6 文档不够全面等问题，使得功能设计、写法问题、或 API 使用不太合理导致的表现出卡顿现象。请看专文[《从卡掉渣到满帧率需要几步？》](/docs/manual/faq/performance-opt)，介绍了一些 tips 来帮助你优化实现方式导致的性能问题。