Method for increasing loading speed of front-end webpage

A technology for loading speed and front-end web pages. It is applied in website content management, network data retrieval, and network data browsing optimization. It can solve the problems of long initial website loading time, high server pressure, and poor user experience, so as to achieve a friendly experience and speed up The effect of loading speed and improving user experience

Inactive Publication Date: 2020-12-29
SICHUAN CHANGHONG ELECTRIC CO LTD
View PDF1 Cites 6 Cited by
  • Summary
  • Abstract
  • Description
  • Claims
  • Application Information

AI Technical Summary

Problems solved by technology

Using the combination of image loading on demand and Intersection Observer API to create observation functions, when there are a large number of images on the website, direct loading will have a lot of overhead, the server will be under great pressure, and the loading process will be time-consuming. The initial loading time will be very long, coupled with other influences such as the network, the user experience will be poor

Method used

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
View more

Image

Smart Image Click on the blue labels to locate them in the text.
Viewing Examples
Smart Image
  • Method for increasing loading speed of front-end webpage

Examples

Experimental program
Comparison scheme
Effect test

Embodiment 1

[0034] like figure 1 As shown, a method for improving the loading speed of a front-end web page includes the following steps:

[0035] Step 1. Load loading images for all images and listen to the DOMContentLoaded event on the page. When the initial HTML document is fully loaded and parsed, this event is triggered and all images to be loaded are obtained, that is, images without the data-isLoaded attribute Stored in the array lazyImages;

[0036] Step 2. Determine whether the browser is compatible with Intersection ObserverAPI;

[0037] Step 3. If the browser is compatible, create an observation function lazyImageObserver to perform a loop operation on the image array lazyImages. i is the loop variable. When i is smaller than the length of the array lazyImages, call the observation function lazyImageObserver to observe all the images that need to be loaded in sequence. , if the observed image enters the viewport, that is, when it can be seen, execute the operation of replacin...

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
Login to view more

PUM

No PUM Login to view more

Abstract

The invention discloses a method for increasing the loading speed of a front-end webpage, and the method comprises the following steps: 1, loading loading loading pictures to all the pictures, monitoring a DOMContented event on a page, and triggering the event when a triggering condition is met; 2, judging whether the browser is compatible with an Interface Object server API or not; 3, creating anobservation function lazyImageObserver, executing a loop operation on the picture array lazyImages, executing an operation of replacing a real src for the picture when a condition is met, and releasing the observation; 4, when the scroll bar is slid each time, executing a throttling function, calling back and updating the picture array lazyImages, and executing a picture loading function. According to the method, the front-end webpage loading speed is increased by adopting a mode of combining picture on-demand loading and observation function creation.

Description

technical field [0001] The invention belongs to the technical field of webpage processing, and in particular relates to a method for increasing the loading speed of front-end webpages. Background technique [0002] When opening a website, the browser will do a lot of work, including downloading various resources that may be used, and then rendering them. Assuming that the website has a large number of pictures, direct loading may have a lot of overhead, which is not conducive to performance. Then the loading process is very time-consuming, especially for sites like news, Taobao, Jingdong, etc. that require a lot of pictures. If there are many pictures on the page, there will be more pictures loaded, and the pressure on the server will be great. Not only affects rendering speed but also wastes bandwidth. For example, if a picture with a size of 1M is concurrent, if it reaches 1000 concurrency, that is, if 1000 people visit it at the same time, a bandwidth of 1 G will be gen...

Claims

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
Login to view more

Application Information

Patent Timeline
no application Login to view more
Patent Type & Authority Applications(China)
IPC IPC(8): G06F16/958G06F16/957
CPCG06F16/9577G06F16/986
Inventor 王洪贺
Owner SICHUAN CHANGHONG ELECTRIC CO LTD
Who we serve
  • R&D Engineer
  • R&D Manager
  • IP Professional
Why Eureka
  • Industry Leading Data Capabilities
  • Powerful AI technology
  • Patent DNA Extraction
Social media
Try Eureka
PatSnap group products

Browse by: Latest US Patents, China's latest patents, Technical Efficacy Thesaurus, Application Domain, Technology Topic.

© 2024 PatSnap. All rights reserved.Legal|Privacy policy|Modern Slavery Act Transparency Statement|Sitemap