DataV:faq-about-visual-page-performance-optimization

What are the common factors that affect visual page loading?

• Computer hardware configuration. For example, the graphics card, cpu, memory these three aspects.

• The network speed.

• Visualize the static resources used by the application. such as GIFs, svg images, and files.

• The response speed of the component configuration data interface and the amount of data loaded.

• You can call this operation to check whether the number, type, and version of components used by the application are old.

• In visualization applications, the network and computer configuration have a greater impact, followed by static resources and data interface response time.

• Check whether the types and versions of third-party libraries introduced by custom components in the application are consistent.

• The impact of machine configurations.

How long is it reasonable for a general page to load?

Browser page load time is related to the content, in the visual page, if you want to like a normal web page, optimize to open within 5 seconds is more difficult. Generally, visual applications use a large number of components to enrich the display content, which affects the page loading speed. This issue does not matter which product is used.

What are the common methods for troubleshooting page performance?

• Prerequisites

  • Check the computer configuration. It is recommended that you use the computer's CPU configuration not less than i5-6500, graphics card configuration not less than GTX960, and memory not less than 8GB. The specific configuration needs to be determined according to the actual visualization application, such as the resolution size and whether the 3D city builder component is available.

  • Check the network speed. We recommend that you use a network speed higher than 100 Mb/s.

• Perform the following steps to troubleshoot the issue:

  • Network troubleshooting: Open the browser console, find the Network tab option, and press ctrl + r on the keyboard to forcibly refresh the page. observe the request duration of each resource and the time required for dom rendering.

    When you query data by using the data interface initiated by the DataV server, the preview page request name is 0 in the network request, and the publish page request name is the visualization application ID.

    Note

    If you use the DataV server to request data, the request duration is limited to 10s. When you see that the request duration of a data interface is about 8 to 9s, the response speed of some component interfaces is too slow, which causes the request to time out. You can view the response information of a specific request, find the corresponding component ID according to whether the timeout is prompted, and search the layer list to determine which component interface affects data loading.

  • Performance troubleshooting: Open the browser console, find the Performance tab, press the shortcut key ctrl + e or click the refresh icon to go to the Performance Monitoring page, and check the specific request duration.

page performance optimization means what?

• recommend use computers with relatively high configurations and high-speed network access.

• check whether the image or video resource used is too large. if the image or video resource is too large, you can consider replacing it with another format. for example, use webp or webm as much as possible to avoid using gif. You can also use OSS endpoints to improve access speed.

  Note

  For video, recommend you use the. webm video format, if it is the. mp4 video format, you can convert it to the. webm format. The. webm format loads faster than. mp4 at the same resolution.

• Use the chrome browser to access chrome://gpu and check whether the hardware acceleration status of the corresponding configuration is active.

• Check whether the component data interface responds too slowly.

• Check whether the amount of data returned by the data interface is large. A large amount of data affects the rendering time of the widget. You can use conditional filtering to filter query results to reduce the amount of data returned.

• Check whether redundant components exist. If redundant or unused components exist, we recommend that you delete them.

• Check whether the display setting of windows control panel is 100%.

• Check whether a custom component is used in a visualization application and whether the versions and types of dependent libraries introduced in the custom component are the same. It also controls the size of the introduced js. For example, echarts.js is introduced with echarts.min.js.

• Check whether an earlier version of the component is used. We recommend that you update all components to the latest version and copy a copy of the visual application as a backup before you update the components.

FAQ about performance optimization