| With the continuous development of Web technology,Web applications have gradually developed from the display of a single page to applications with strong interactivity,high usability,and rich functions,which also brings huge challenges to the performance of Web applications.The traditional front-end and back-end coupled development model has problems such as poor application availability,difficult code maintenance,and slow project change,which has led to the separation of front-end and back-end programs of web applications.The front-end starts to display the page,while the back-end is responsible for providing data interfaces.The front-end and the back-end each perform their own duties.The front-end gradually derives the concept of componentization and engineering.Web applications should not only consider the realization of functions,but also pay attention to performance issues from the perspective of user experience and application quality attributes,so as to improve user experience.The improvement of Web application performance is of great significance for improving the competitiveness of products and reducing the cost of product development.This paper designs and implements a satellite orbit determination system,displays the services and data related to satellite orbit determination in the form of an interactive interface,and provides users with a visual and interactive access method.According to the needs of business scenarios,the system is optimized and implemented from two points of first screen loading and page freezing.The main work of the paper includes the following aspects:(1)Analysis of requirements and performance problems.Firstly,the research and development background and business of the system are described,and then the functional requirements of the system are analyzed according to the software requirements power of attorney,the main functions of the business are analyzed and sorted,and the main functions are modeled.At the same time,it describes the loading problem of the first screen and the page freeze problem,introduces the indicators for judging the performance of the first screen and the page freeze,and analyzes the key to improving the performance of the first screen and optimizing the page freeze problem.(2)System design and implementation.First,the front-end architecture of the system is designed,and the front-end architecture of the system is divided into five layers: view layer,routing layer,data layer,interface layer,and support layer.Then,the overall architecture of the system is introduced,and the middle of the traditional front-end and back-end architecture is designed.The architecture of the Node middle layer is built;then the frontend part of the main functional modules of the system is designed and implemented;finally,the performance optimization design and implementation are introduced in detail.In the aspect of loading performance optimization of the first screen,the server-side rendering is used instead of the client-side Rendering is optimized,instead of the browser executing Java Script when the page is opened for the first time by establishing a Node intermediate service,splicing the data into the template,and finally returning an HTML string for the browser to render directly,reducing the loading time of the first screen.In terms of page freeze performance optimization,the diff algorithm used by the original front-end framework has a low proportion of reused nodes.The diff algorithm combined with the longest increasing subsequence is used to replace the original algorithm to improve node reuse and reduce page re-rendering costs.It takes time;secondly,the virtual scrolling technology is used to optimize the freezing problem caused by scrolling a long list.(3)System test.First,the environment and configuration of the system test are explained,and then the functional requirements of the system are tested.The specific test steps and results are described using the test table,and the screenshot of the system operation is given.Finally,the optimization work of the system is tested,and the unoptimized and optimized test results and comparison results are given.The satellite orbit determination system is finally able to deploy and operate all functions,and the performance is excellent,meeting the functional requirements as well as the performance requirements.To sum up,the realization and optimization of the paper are effective. |