Website mobile terminal speed optimization method

Abstract

A website mobile terminal speed optimization method is based on an SaaS provider platform server built by components and blocks and published on a website, and comprises the steps: 1, calculating block components in a first screen area of a mobile terminal, wherein only the calculated blocks and components need to be displayed and loaded during first-time loading, and after recognition or calculation is completed, the blocks and components in the first screen area of the mobile terminal are displayed and loaded; carrying out lazy loading on the component blocks which are not in the first screen area, and when the component blocks roll to the positions of the component blocks which are not in the first screen area, loading js and css files on the component blocks; 2) developing corresponding mobile terminal components and blocks for the block components, simplifying the dom structure, js and css, slimming the code while ensuring the display effect, extracting a necessary css style of the block component in the first screen area, and performing inline of the css style for mobile terminal display.

Description

technical field [0001] The invention belongs to the field of computer data processing, and in particular relates to a speed optimization solution based on a mobile terminal of a website. Background technique [0002] A SaaS provider (such as the applicant's leading cloud marketing platform) is a cloud site building tool based on the Saas model (the SaaS provider builds all the network infrastructure, software and hardware operating platforms required for informatization for enterprises, and is responsible for For a series of services such as all early implementation and later maintenance, enterprises can use the information system through the Internet without purchasing software and hardware, building computer rooms, and recruiting IT personnel), there are many building blocks and blocks on the SaaS platform, and customers can use it through a Or multiple components are combined into a row of a web page, or blocks are used as a row, and the customer page is composed of these...

AI Technical Summary

Problems solved by technology

However, with the rapid development of the SaaS provider's business, the content of the page has become richer, and the number of components and blocks has also increased. As a result, the loading speed of the mobile terminal of the page has slowed down, and too many files have been loaded:

[0003] 1) The components and blocks of the SaaS provider can be regarded as a single small page, which has independent style files, dom elements and js codes. The more content on the page, the more related codes, resulting in slow loading

[0004] 2) On the mobile side, all js files and style files are loaded at the beginning, resulting in too many requests. Google page speed test, one of the detection items is the number of loaded resources in the page, too many requests, resulting in a very low page score

[0005] 3) The display of the mobile terminal is adapted to the mobile terminal through the code of the PC terminal and the responsive method of css, but the dom structure of the PC terminal (DOM is the standard model used to represent the objects in the document in the web page, and the JavaScript in the web page can be modified. All DOM objects are operated) is not suitable for the display habits of the mobile terminal, and the display effect is not very good

[0006] 4) The usual habit is to import css files (css files refer to css codes placed in a separate file and named with a css extension such as yangshi.css, which is a css file) with link tags, but when Most of the time, although lazy loading is performed, only the css of the first screen area is loaded, but the relative style file is also relatively large, and it takes a certain amount of time to load with an external style

Images