CN114817807A - Page processing method, device, equipment, readable storage medium and product - Google Patents
Page processing method, device, equipment, readable storage medium and product Download PDFInfo
- Publication number
- CN114817807A CN114817807A CN202210452721.0A CN202210452721A CN114817807A CN 114817807 A CN114817807 A CN 114817807A CN 202210452721 A CN202210452721 A CN 202210452721A CN 114817807 A CN114817807 A CN 114817807A
- Authority
- CN
- China
- Prior art keywords
- target
- loading
- browser
- attribute
- page
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000003672 processing method Methods 0.000 title claims abstract description 21
- 230000003111 delayed effect Effects 0.000 claims abstract description 131
- 238000012216 screening Methods 0.000 claims description 27
- 238000000034 method Methods 0.000 claims description 26
- 238000012545 processing Methods 0.000 claims description 16
- 238000004590 computer program Methods 0.000 claims description 5
- 238000005516 engineering process Methods 0.000 abstract description 2
- 238000010276 construction Methods 0.000 description 4
- 238000010586 diagram Methods 0.000 description 4
- 238000004891 communication Methods 0.000 description 3
- 230000003068 static effect Effects 0.000 description 3
- 230000001934 delay Effects 0.000 description 2
- 230000000694 effects Effects 0.000 description 2
- 230000006870 function Effects 0.000 description 2
- 238000004458 analytical method Methods 0.000 description 1
- 230000000903 blocking effect Effects 0.000 description 1
- 230000006835 compression Effects 0.000 description 1
- 238000007906 compression Methods 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 238000007781 pre-processing Methods 0.000 description 1
- 230000008569 process Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/955—Retrieval from the web using information identifiers, e.g. uniform resource locators [URL]
- G06F16/9562—Bookmark management
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Information Transfer Between Computers (AREA)
Abstract
The present application relates to the field of computer technologies, and in particular, to a page processing method, apparatus, device, readable storage medium, and product. When a first browser is used for loading a target page, the initial address attribute of a target element on the target page is obtained, the attribute value of the initial address attribute of the target element is assigned to the target address attribute, the initial address attribute of the target element is deleted, a delayed loading attribute is added to the class attribute of the target element, a script tag is created for the target element, and a content distribution network address which is delayed to be loaded is configured to be the initial address attribute of the script tag, so that the first browser can delay the loading of the target element. And when the second browser is used for loading the target page, adding a loading attribute to the target element, and marking the attribute value of the loading attribute as delay, so that the second browser can delay the loading of the target element. Therefore, all browsers can delay loading of the target elements, and the delay loading efficiency is improved.
Description
Technical Field
The present application relates to the field of computer technologies, and in particular, to a page processing method, apparatus, device, readable storage medium, and product.
Background
Web page performance refers to the time it takes for a page to be loaded to be interactable and respondent, as well as the fluency of the page while interacting. The worse the Web page performance, the longer the page load time.
At present, the page loading time can be shortened through delayed loading (lazy load), and the page performance is improved. Lazy loading is a policy that identifies resources as non-blocking (non-critical) resources and loads only when needed.
However, not all browsers can implement delayed loading, which affects delayed loading efficiency.
Disclosure of Invention
The application provides a page processing method, a page processing device, page processing equipment, a readable storage medium and a page processing product, so that all browsers can realize delayed loading and the delayed loading efficiency is improved.
In a first aspect, the present application provides a page processing method, including:
the method comprises the steps of obtaining a target page and a browser array operated by a website, and screening a first browser which does not support delayed loading and a second browser which supports delayed loading in the browser array;
when the first browser is used for loading the target page, acquiring an initial address attribute of a target element on the target page, assigning an attribute value of the initial address attribute of the target element to the target address attribute, deleting the initial address attribute of the target element, adding a delayed loading attribute to the class attribute of the target element, creating a script tag for the target element, and configuring a content distribution network address of a delayed loading library as the initial address attribute of the script tag so as to enable the first browser to utilize a target plug-in to delay loading of the target element;
when the second browser is used for loading the target page, adding a loading attribute to a target element on the target page, and marking an attribute value of the loading attribute as delay, so that the second browser uses the target plug-in to delay the loading of the target element.
Optionally, the adding a loading attribute to the target element on the target page and marking an attribute value of the loading attribute as a delay so that the second browser uses the target plug-in to delay loading of the target element specifically includes:
and acquiring initial elements on the target page, screening target elements without immediate loading attributes in the initial elements, adding loading attributes to the target elements, and marking attribute values of the loading attributes as delay so that the second browser utilizes the target plug-in to delay the loading of the target elements.
Optionally, the obtaining of the initial element on the target page, screening a target element that does not have an immediate loading attribute in the initial element, adding a loading attribute to the target element, and marking an attribute value of the loading attribute as a delay, so that the second browser uses the target plug-in to delay loading of the target element specifically includes:
and acquiring initial picture elements on the target page, screening out target picture elements which do not have immediate loading attribute in the initial picture elements, adding loading attribute to the target picture elements, and marking the attribute value of the loading attribute as delay, so that the second browser utilizes the target plug-in to delay the loading of the target picture elements.
Optionally, the obtaining of the initial element on the target page, screening a target element that does not have an immediate loading attribute in the initial element, adding a loading attribute to the target element, and marking an attribute value of the loading attribute as a delay, so that the second browser uses the target plug-in to delay loading of the target element specifically includes:
and acquiring initial frame elements on the target page, screening out target frame elements which do not have immediate loading attributes in the initial frame elements, adding loading attributes to the target frame elements, and marking attribute values of the loading attributes as delay, so that the second browser utilizes the target plug-in to delay the loading of the target frame elements.
Optionally, the obtaining of the picture element on the target page specifically includes:
analyzing the target page into a syntax tree by using a hypertext markup language analyzer;
and circularly traversing the elements of which the element names are pictures or frames in the syntax tree.
Optionally, the screening a first browser that does not support deferred loading and a second browser that supports deferred loading in the browser array specifically includes:
and judging whether each browser in the browser array supports delayed loading or not by using the first target library, and screening out a first browser which does not support delayed loading and a second browser which supports delayed loading in the browser array.
Optionally, the acquiring a browser array operated by a website specifically includes:
and acquiring a browser running environment of the website, and acquiring a matched browser array according to the browser running environment of the website.
Optionally, the obtaining a matched browser array according to the browser environment operated by the website specifically includes:
the method comprises the steps of obtaining a browser running environment of a website by using a second target library, analyzing a target attribute of a first target file or a second target file in the browser running environment by using the second target library, and obtaining a browser array matched with the target attribute of the first target file or the second target file.
Optionally, the screening a first browser that does not support deferred loading and a second browser that supports deferred loading in the browser array specifically includes:
and judging whether all browsers in the browser array support delayed loading, if so, marking all browsers as second browsers, if not, screening out the browsers supporting delayed loading and the browsers not supporting delayed loading in the browser array, marking the browsers supporting delayed loading as the second browsers, and marking the browsers not supporting delayed loading as the first browsers.
In a second aspect, the present application provides a page processing apparatus, including:
the system comprises an acquisition module, a display module and a display module, wherein the acquisition module is used for acquiring a target page and a browser array operated by a website, and screening a first browser which does not support delayed loading and a second browser which supports delayed loading in the browser array;
a first delay module, configured to, when the first browser is used to load the target page, obtain an initial address attribute of a target element on the target page, assign an attribute value of the initial address attribute of the target element to the target address attribute, delete the initial address attribute of the target element, add a delayed loading attribute to a class attribute of the target element, create a script tag for the target element, and configure a content distribution network address of a delayed loading library as the initial address attribute of the script tag, so that the first browser uses a target plug-in to delay loading of the target element;
and the second delay module is used for adding a loading attribute to a target element on the target page and marking the attribute value of the loading attribute as delay when the target page is loaded by using the second browser, so that the second browser can delay the loading of the target element by using the target plug-in.
In a third aspect, the present application provides an electronic device, comprising: a memory and a processor;
the memory is used for storing instructions; the processor is configured to call instructions in the memory to perform the page handling method of the first aspect and any one of the possible designs of the first aspect.
In a fourth aspect, the present application provides a computer-readable storage medium, where computer instructions are stored, and when at least one processor of an electronic device executes the computer instructions, the electronic device executes the page processing method in any one of the possible designs of the first aspect and the first aspect.
In a fifth aspect, the present application provides a computer program product comprising computer instructions that, when executed by at least one processor of an electronic device, cause the electronic device to perform the method for page processing in any one of the possible designs of the first aspect and the first aspect.
According to the page processing method, the target page and the browser array operated by the website browser are obtained, and the first browser which does not support delayed loading and the second browser which supports delayed loading in the browser data are screened. When a target page is loaded by using a first browser, the initial address attribute of a target element on the target page is obtained, the attribute value of the initial address attribute of the target element is assigned to the target address attribute, the initial address attribute of the target element is deleted, a delayed loading attribute is added to the class attribute of the target element, a script tag is created for the target element, and a content distribution network address of delayed loading is configured to be the initial address attribute of the script tag, so that the browser which does not support delayed loading can utilize a target plug-in to delay loading of the target element on the target page. When the second browser is used for loading the target page, the loading attribute is added to the target element on the target page, and the attribute value of the loading attribute is marked as delay, so that the second browser supporting delayed loading can delay the loading of the target element on the target page by using the target plug-in. Therefore, the browser supporting the delayed loading and the browser not supporting the delayed loading can both realize the delayed loading of the target element, and the delayed loading efficiency is improved.
Drawings
In order to more clearly illustrate the technical solutions in the present application or the prior art, the drawings needed for the description of the embodiments or the prior art will be briefly introduced below, and it is obvious that the drawings in the following description are some embodiments of the present application, and it is obvious for those skilled in the art to obtain other drawings based on these drawings without creative efforts.
Fig. 1 is a flowchart of a page processing method according to an embodiment of the present application;
fig. 2 is a flowchart of a page processing method according to an embodiment of the present application;
fig. 3 is a schematic structural diagram of a page processing apparatus according to an embodiment of the present application;
fig. 4 is a schematic diagram of a hardware structure of an electronic device according to an embodiment of the present application.
Detailed Description
To make the purpose, technical solutions and advantages of the present application clearer, the technical solutions in the present application will be clearly and completely described below with reference to the drawings in the present application, and it is obvious that the described embodiments are some, but not all embodiments of the present application. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present application.
At present, the page loading time can be shortened through delayed loading (lazy load), and the page performance is improved. However, not all browsers can implement delayed loading, which affects delayed loading efficiency. However, not all browsers can implement delayed loading, which affects delayed loading efficiency.
In order to solve the above problems, the present application provides a page processing method, which includes obtaining a target page and a browser array in which a website runs, and screening a first browser that does not support delayed loading and a second browser that supports delayed loading in the browser array. When a first browser which does not support delayed loading is used for loading a target page, the initial address attribute of a target element on the target page is obtained, the attribute value of the initial address attribute of the target element is assigned to the target address attribute, the initial address attribute of the target element is deleted, the delayed loading attribute is added to the class attribute of the target element, a script tag is created for the target element, the content distribution network address of a delayed loading library is used as the initial address attribute of the script tag, and the first browser which does not support delayed loading can also realize delayed loading of the target element on the target page. When the target page is loaded by the second browser supporting the delayed loading, the target element on the target page is added with a loading attribute, and the attribute value of the loading attribute is marked as the delay, so that the second browser supporting the delayed loading can delay the loading of the target element on the target page. Therefore, the browser supporting delayed loading and the browser not supporting delayed loading can both carry out delayed loading on the target element, the delayed loading efficiency is improved, the loading time is shortened, and the page performance is improved.
The technical solution of the present application will be described in detail below with specific examples. The following several specific embodiments may be combined with each other, and details of the same or similar concepts or processes may not be repeated in some embodiments.
An embodiment of the present application provides a page processing scenario. The method comprises the steps that a server obtains a target page and a browser array operated by a website, whether all browsers in the browser array support delayed loading is judged, if yes, the server marks all the browsers as second browsers, if not, the server screens out browsers which do not support delayed loading and browsers which support delayed loading in the browser array, marks browsers which do not support delayed loading as first browsers, and marks browsers which support delayed loading as second browsers. When a target page is loaded by using a first browser, a server acquires an initial address attribute of a target element on the target page, assigns an attribute value of the initial address attribute of the target element to the target address attribute, deletes the initial address attribute of the target element, adds a delayed loading attribute to a class attribute of the target element, creates a script tag for the target element, and configures a content distribution network address of a delayed loading library as the initial address attribute of the script tag, so that the first browser can utilize a target plug-in to delay loading of the target element on the target page. When the second browser is used for loading the target page, the server adds the loading attribute to the target element on the target page, and marks the attribute value of the loading attribute as delay, so that the second browser can delay the loading of the target element on the target page by using the target plug-in.
Fig. 1 shows a flowchart of a page processing method according to an embodiment of the present application. With the server as the execution subject, the method of this embodiment may include the following steps:
s101, obtaining a target page and a browser array operated by a website, and screening a first browser which does not support delayed loading and a second browser which supports delayed loading in the browser array.
The website is, for example, a web website, the web website needs to be constructed by a construction tool before being online and then can be deployed online, and common construction tools include webpack, rollup, gulp and the like. The construction tool performs static analysis according to the dependency relationship of the modules of the website, and then generates corresponding static resources according to specified rules by the modules of the website, for example, compiling high-version JavaScript codes (ES6) into JavaScript codes (ES5) with higher browser support, compiling preprocessing languages such as LES (leaner styles sheets), SCSS (Sassy capturing styles sheets) and the like into CSS (Cascade styles sheets) codes, html (Hypertext Markup Language) file processing, picture resource compression and the like. The product constructed by the construction tool is a static resource file, including html files, css style files, JavaScript files, picture resources, font resources and the like. The html file is a file which can be opened by a browser, the css style file is a style file of a website page, and the JavaScript file is a file of website interaction.
The target page is a page to be loaded, and in some embodiments, the target page may be an html page, and the html page may include non-text elements such as pictures, links, music, and programs.
In some embodiments, the target property may be configured in a second target file, or the first target file may be newly created in a project root directory, to configure the browser runtime environment for the web, i.e., the browser runtime environment of the web includes the target property of the first target file or the second target file. Therefore, after the browser running environment of the website is acquired, the matched browser array can be acquired according to the browser running environment of the website. Specifically, after the browser running environment of the website is obtained, the target attributes of the first target file or the second target file in the browser running environment are analyzed, the browser matched with the target attributes of the first target file or the second target file is obtained, and the browsers matched with the target attributes of the first target file or the second target file are integrated into a browser array.
As an implementation manner, the first target file is a browsersslistrc file, the second target file is a package json file, and the target attribute is browsersslistrc. And acquiring a browser running environment of the website by using a second target library, wherein the second target library can analyze whether a target attribute of a browser running environment exists in a browser running environment or not, and when the target attribute of the browser running environment exists in the browser running environment, acquiring a browser matched with the target attribute of the browser running environment or the target attribute of the browser running environment, and acquiring a browser array matched with the browser running environment. For example, a browser environment in which a web site runs is obtained by using a browser, and the browser parses a packet json file or a browser file configured with a browser attribute in the web site to obtain a browser matched with the running environment of the web site.
The delayed loading characteristic of the browser can be supported by part of the browser and cannot be supported by part of the browser, for example, the IE, the Edge of the low version, the Firefox of the low version, the Safari of the low version and other browsers do not support delayed loading, and the Edge of the high version, the Firefox of the high version, the Safari of the high version and other browsers support delayed loading. Therefore, after the browser array operated by the website is obtained, the browsers which do not support the delayed loading and the browsers which support the delayed loading in the browser array are screened, the browser which does not support the delayed loading is marked as a first browser, and the browser which supports the delayed loading is marked as a second browser.
In some embodiments, the first target library may be utilized to determine whether each browser in the browser array supports lazy loading, so as to screen out a first browser that does not support lazy loading and a second browser that supports lazy loading. The first target library may be, for example, a cariuse-lite, which may determine whether the browser supports a deferred loading (loading) attribute, thereby obtaining whether the browser supports deferred loading.
S102, when a target page is loaded by using a first browser, acquiring an initial address attribute of a target element on the target page, assigning an attribute value of the initial address attribute of the target element to the target address attribute, deleting the initial address attribute of the target element, adding a delayed loading attribute to the class attribute of the target element, creating a script tag for the target element, and configuring a content distribution network of a delayed loading library as the initial address attribute of the script tag so that the first browser can utilize a target plug-in to delay loading of the target element.
In some embodiments, the target page may be parsed into a syntax tree by the html parser, where the syntax tree is a tree-shaped parsing structure, so as to facilitate subsequent acquisition of the target element. The hypertext markup language parser can be, for example, parse 5. After the syntax tree is obtained, the element names (nodenames) in the syntax tree are elements of the picture (img) or the frame (iframe) in a loop traversal manner, and the target elements are obtained, so that the target elements here are elements of the syntax tree with the element names of the picture or the frame.
It should be noted that, even if the browser does not support deferred loading, the browser that does not support deferred loading may be enabled to defer loading of the target element by processing the target element on the target page. When a browser which does not support the delayed loading is required to load a target page, processing a target element on the target page, and delaying to load the target element by using a first browser which does not support the delayed loading by using a delayed loading library (lazysizes), wherein the first browser which does not support the delayed loading can also be understood as a low-version browser.
When a target page is loaded by using a first browser which does not support delayed loading, acquiring an initial address (src) attribute of a target element on the target page, wherein the initial address attribute of the target element refers to a storage path of the target element, assigning an attribute value of the initial address attribute of the target element to a target address (data-src) attribute, and deleting the initial address attribute of the target element so as to store the target element to the storage path of the target element after deleting the initial address attribute of the target element. Then, a lazy load attribute is added to the class attribute of the target element, and a script tag is created for the target element. And judging whether the delay loading library is configured with a content distribution network (SDN) address, if so, configuring the content distribution network address of the delay loading library as an initial address attribute of the script tag, and if not, configuring a default content distribution network address as the initial address attribute of the script tag. Since the class attribute of the target element includes the load-deferred attribute and the script tag of the target element includes the initial address attribute, the first browser which does not support load-deferred is enabled to load the target element with a delay.
It should be noted that, when the browser loads the target page, the browser needs to load the target element on the target page by using the target plug-in. The target plug-in can be a webpack plug-in, and when the target page is loaded by using the first browser which does not support the deferred loading, the target page can be processed by using a hook function (hook) of an html-webpack plug-in the webpack plug-in, so that the target element on the target page can support the deferred loading. The first browser can then delay loading the target element with the target plug-in.
S103, when the second browser is used for loading the target page, adding a loading attribute to the target element on the target page, and marking the attribute value of the loading attribute as delay so that the second browser can delay the loading of the target element by using the target plug-in.
In some embodiments, the target page may be parsed into a syntax tree by the html parser, where the syntax tree is a tree-shaped parsing structure, so as to facilitate subsequent acquisition of the target element. After obtaining the syntax tree, the element name (nodeName) in the syntax tree is circularly traversed to the element of the picture (img) or the frame (iframe), and the initial element is obtained. And judging whether the initial element has a data-loading attribute, and screening the element without the immediate loading attribute as a target element. Therefore, the target element here is an element in the syntax tree whose element name is a picture or a frame and which has no immediate load attribute.
And adding a loading (loading) attribute to the target element, and marking the attribute value of the loading attribute as delay (lazy), wherein the second browser can delay the loading of the target element when the attribute value of the loading attribute of the target element is delay due to the fact that the second browser supports the delay loading characteristic.
In some embodiments, an initial picture element on the target page is obtained, a target picture element which does not have the immediate loading attribute in the initial picture element is screened out, the loading attribute is added to the target picture element, and the loading attribute of the target picture element is marked as delay, so that the second browser can utilize the target plug-in to delay the loading of the target picture element.
In some embodiments, the initial frame elements on the target page are obtained, the target frame elements which do not have the immediate loading property in the initial frame elements are screened out, the loading property is added to the target frame elements, and the loading property of the target frame elements is marked as delay, so that the second browser can utilize the target plug-in to delay the loading of the target frame elements.
According to the page processing method, when a first browser which does not support delayed loading is used for loading a target page, the initial address attribute of a target element on the target page is obtained, the attribute value of the initial address attribute of the target element is assigned to the target address attribute, the initial address attribute of the target element is deleted, the delayed loading attribute is added to the class attribute of the target element, a script tag is created for the target element, the content distribution network address of a delayed loading library is used as the initial address attribute of the script tag, and therefore the first browser which does not support delayed loading can also achieve delayed loading of the target element on the target page. When the target page is loaded by using the second browser supporting delayed loading, adding a loading attribute to a target element on the target page, and marking an attribute value of the loading attribute as delayed, so that the second browser supporting delayed loading can delay loading of the target element on the target page. Therefore, all browsers can carry out delayed loading on the target elements, the delayed loading efficiency is improved, the loading time is shortened, and the page performance is improved.
Fig. 2 shows a flowchart of a page processing method according to an embodiment of the present application. As shown in fig. 2, with the server as the execution subject, the method of this embodiment may include the following steps:
s201, obtaining a target page and a browser array operated by a website, and judging whether all browsers of the browser array support delayed loading.
And the target page is a page to be loaded, acquiring the page to be loaded and all browsers matched with the browser operating environment of the website, and judging whether all the browsers support delayed loading. For example, for the same browser, the cache-lite may be used to perform a delayed loading determination on the browser of the lowest version or the browser of the highest version, and if the browser of the lowest version supports delayed loading, all browsers of the browser support delayed loading, and if the browser of the highest version does not support delayed loading, all browsers of the browser do not support delayed loading. Therefore, when the browser array includes multiple types of browsers, such as Edge, Firefox and Safari, the delayed loading judgment can be performed only on the lowest version and/or the highest version of the same browser, and the efficiency is improved.
If all browsers support lazy loading, step S202 is executed, and if some browsers do not support lazy loading, step S203 is executed.
S202, marking all browsers as second browsers.
The second browser is a browser supporting deferred loading.
S203, screening browsers which do not support delayed loading in the browser array, marking the browsers which do not support delayed loading as first browsers, screening browsers which support delayed loading in the browser array, and marking the browsers which support delayed loading as second browsers.
When the part of the browsers do not support the delayed loading, distinguishing a second browser supporting the delayed loading from a first browser not supporting the delayed loading.
S204, when a target page is loaded by using a first browser, acquiring an initial address attribute of a target element on the target page, assigning an attribute value of the initial address attribute of the target element to the target address attribute, deleting the initial address attribute of the target element, adding a delayed loading attribute to the class attribute of the target element, creating a script tag for the target element, and configuring a content distribution network of a delayed loading library as the initial address attribute of the script tag so as to enable the first browser to delay loading of the target element.
S205, when the second browser is used for loading the target page, adding a loading attribute to the target element on the target page, and marking the attribute value of the loading attribute as delay so as to enable the second browser to delay the loading of the target element.
Step S204 is similar to step S102 in the embodiment of fig. 1, and is not described herein again. Step S205 is similar to the step S103 in the embodiment of fig. 1, and this embodiment is not described herein again.
According to the page processing method, whether all browsers support delayed loading or not is judged, and when part of browsers do not support delayed loading, the browsers supporting delayed loading and the browsers not supporting delayed loading are distinguished, so that the efficiency is improved. And then, when the target page is loaded by using the browser supporting the delayed loading or the browser not supporting the delayed loading, different processing is carried out on the target page, so that the browser supporting the delayed loading and the browser not supporting the delayed loading can carry out the delayed loading on the target element, the delayed loading efficiency is improved, the loading time is shortened, and the page performance is improved.
Fig. 3 is a schematic structural diagram of a page processing apparatus according to an embodiment of the present application, and as shown in fig. 3, the page processing apparatus 10 of the present embodiment includes:
the acquisition module 11 is configured to acquire a target page and a browser array in which a website runs, and screen a first browser which does not support delayed loading and a second browser which supports delayed loading in the browser array;
a first delay module 12, configured to, when a target page is loaded by using a first browser, obtain an initial address attribute of a target element on the target page, assign an attribute value of the initial address attribute of the target element to the target address attribute, delete the initial address attribute of the target element, add a delayed loading attribute to a class attribute of the target element, create a script tag for the target element, and configure a content distribution network address of a delayed loading library as the initial address attribute of the script tag, so that the first browser delays loading of the target element by using a target plug-in;
and a second delay module 13, configured to add a loading attribute to a target element on the target page when the target page is loaded by using the second browser, and mark an attribute value of the loading attribute as a delay, so that the second browser delays loading of the target element by using the target plug-in.
The page processing apparatus 10 provided in the embodiment of the present application can execute the above method embodiment, and for concrete implementation principles and technical effects, reference may be made to the above method embodiment, which is not described herein again.
Fig. 4 shows a hardware structure diagram of an electronic device according to an embodiment of the present application. As shown in fig. 4, the electronic device 20 of the present embodiment may include: memory 21, processor 22 and communication interface 23.
A memory 21 for storing computer instructions. The Memory 21 may include a Random Access Memory (RAM), a Non-Volatile Memory (NVM), at least one disk Memory, a usb disk, a removable hard disk, a read-only Memory, a magnetic disk or an optical disk.
The processor 22 is used for executing the computer instructions stored in the memory to implement the page processing method in the above embodiment. Reference may be made in particular to the description relating to the method embodiments described above. The Processor 22 may be a Central Processing Unit (CPU), other general purpose Processor, a Digital Signal Processor (DSP), an Application Specific Integrated Circuit (ASIC), or the like. A general purpose processor may be a microprocessor or the processor may be any conventional processor or the like. The steps of a method disclosed in connection with the present invention may be embodied directly in a hardware processor, or in a combination of the hardware and software modules within the processor.
Alternatively, the memory 21 may be separate or integrated with the processor 22.
A communication interface 23, which may be coupled to the processor 22. Processor 22 may control communication interface 23 to perform the functions of receiving and transmitting information.
The electronic device provided in this embodiment may be configured to execute the page processing method, and the implementation manner and the technical effect of the electronic device are similar, which are not described herein again.
The present application also provides a computer readable storage medium, in which computer instructions are stored, and the computer instructions are executed by a processor to implement the methods provided by the above-mentioned various embodiments.
The present application also provides a computer program product comprising computer instructions stored in a computer readable storage medium. The computer instructions may be read by at least one processor of the device from a computer-readable storage medium, and execution of the computer instructions by the at least one processor causes the device to perform the methods provided by the various embodiments described above.
The embodiment of the present application further provides a chip, which includes a memory and a processor, where the memory is used to store computer instructions, and the processor is used to call and execute the computer instructions from the memory, so that a device in which the chip is installed executes the method described in the above various possible embodiments.
Finally, it should be noted that: the above embodiments are only used to illustrate the technical solutions of the present application, and not to limit the same. Although the present application has been described in detail with reference to the foregoing embodiments, those of ordinary skill in the art will understand that: it is also possible to modify the solutions described in the previous embodiments or to substitute some or all of them with equivalents. And the modifications or the substitutions do not make the essence of the corresponding technical solutions depart from the scope of the technical solutions of the embodiments of the present application.
Claims (13)
1. A page processing method, characterized in that the method comprises:
the method comprises the steps of obtaining a target page and a browser array operated by a website, and screening a first browser which does not support delayed loading and a second browser which supports delayed loading in the browser array;
when the first browser is used for loading the target page, acquiring an initial address attribute of a target element on the target page, assigning an attribute value of the initial address attribute of the target element to the target address attribute, deleting the initial address attribute of the target element, adding a delayed loading attribute to the class attribute of the target element, creating a script tag for the target element, and configuring a content distribution network address of a delayed loading library as the initial address attribute of the script tag so as to enable the first browser to utilize a target plug-in to delay loading of the target element;
when the second browser is used for loading the target page, adding a loading attribute to a target element on the target page, and marking an attribute value of the loading attribute as delay, so that the second browser uses the target plug-in to delay the loading of the target element.
2. The method according to claim 1, wherein the adding a load attribute to the target element on the target page and marking an attribute value of the load attribute as a delay, so that the second browser uses the target plug-in to delay loading of the target element specifically includes:
and acquiring initial elements on the target page, screening target elements which do not have immediate loading attributes in the initial elements, adding the loading attributes to the target elements, and marking the attribute values of the loading attributes as delay so that the second browser utilizes the target plug-in to delay the loading of the target elements.
3. The method according to claim 2, wherein the obtaining of the initial elements on the target page, the screening of the target elements that do not have an immediate load attribute from the initial elements, the adding of a load attribute to the target elements, and the marking of the attribute value of the load attribute as a delay, so that the second browser uses the target plug-in to delay the loading of the target elements specifically includes:
and acquiring initial picture elements on the target page, screening out target picture elements which do not have immediate loading attribute in the initial picture elements, adding loading attribute to the target picture elements, and marking the attribute value of the loading attribute as delay, so that the second browser utilizes the target plug-in to delay the loading of the target picture elements.
4. The method according to claim 2, wherein the obtaining of the initial elements on the target page, the screening of the target elements that do not have an immediate load attribute from the initial elements, the adding of a load attribute to the target elements, and the marking of the attribute value of the load attribute as a delay, so that the second browser uses the target plug-in to delay the loading of the target elements specifically includes:
and acquiring initial frame elements on the target page, screening out target frame elements which do not have immediate loading attributes in the initial frame elements, adding loading attributes to the target frame elements, and marking attribute values of the loading attributes as delay, so that the second browser utilizes the target plug-in to delay the loading of the target frame elements.
5. The method according to claim 2, wherein the obtaining of the initial element on the target page specifically includes:
analyzing the target page into a syntax tree by using a hypertext markup language analyzer;
and circularly traversing the elements of which the element names are pictures or frames in the syntax tree.
6. The method according to any one of claims 1 to 5, wherein the screening the first browser which does not support the deferred loading and the second browser which supports the deferred loading in the browser array specifically includes:
and judging whether each browser in the browser array supports delayed loading or not by using the first target library, and screening out a first browser which does not support delayed loading and a second browser which supports delayed loading in the browser array.
7. The method according to any one of claims 1 to 5, wherein the acquiring a browser array run by a website specifically includes:
and acquiring a browser running environment of the website, and acquiring a matched browser array according to the browser running environment of the website.
8. The method according to claim 7, wherein the obtaining a matching browser array according to the browser environment operated by the website specifically comprises:
the method comprises the steps of obtaining a browser running environment of a website by using a second target library, analyzing a target attribute of a first target file or a second target file in the browser running environment by using the second target library, and obtaining a browser array matched with the target attribute of the first target file or the second target file.
9. The method according to any one of claims 1 to 5, wherein the screening the first browser which does not support the deferred loading and the second browser which supports the deferred loading in the browser array specifically includes:
and judging whether all browsers in the browser array support delayed loading, if so, marking all browsers as second browsers, if not, screening out the browsers supporting delayed loading and the browsers not supporting delayed loading in the browser array, marking the browsers supporting delayed loading as the second browsers, and marking the browsers not supporting delayed loading as the first browsers.
10. A page processing apparatus, characterized in that the apparatus comprises:
the system comprises an acquisition module, a display module and a display module, wherein the acquisition module is used for acquiring a target page and a browser array operated by a website, and screening a first browser which does not support delayed loading and a second browser which supports delayed loading in the browser array;
a first delay module, configured to, when the first browser is used to load the target page, obtain an initial address attribute of a target element on the target page, assign an attribute value of the initial address attribute of the target element to the target address attribute, delete the initial address attribute of the target element, add a delayed loading attribute to a class attribute of the target element, create a script tag for the target element, and configure a content distribution network address of a delayed loading library as the initial address attribute of the script tag, so that the first browser uses a target plug-in to delay loading of the target element;
and the second delay module is used for adding a loading attribute to a target element on the target page and marking the attribute value of the loading attribute as delay when the target page is loaded by using the second browser, so that the second browser can delay the loading of the target element by using the target plug-in.
11. An electronic device, comprising: a processor, and a memory communicatively coupled to the processor;
the memory stores computer-executable instructions;
the processor executes computer-executable instructions stored by the memory to implement the page processing method of any of claims 1 to 9.
12. A computer-readable storage medium having stored thereon computer instructions for implementing the page processing method according to any one of claims 1 to 9 when executed by a processor.
13. A computer program product, characterized in that the computer program product comprises a computer program which, when being executed by a processor, carries out the page processing method of any one of claims 1 to 9.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210452721.0A CN114817807A (en) | 2022-04-27 | 2022-04-27 | Page processing method, device, equipment, readable storage medium and product |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210452721.0A CN114817807A (en) | 2022-04-27 | 2022-04-27 | Page processing method, device, equipment, readable storage medium and product |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN114817807A true CN114817807A (en) | 2022-07-29 |
Family
ID=82508542
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210452721.0A Pending CN114817807A (en) | 2022-04-27 | 2022-04-27 | Page processing method, device, equipment, readable storage medium and product |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114817807A (en) |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103019720A (en) * | 2012-12-14 | 2013-04-03 | 北京奇虎科技有限公司 | Method and device for processing page in browser |
| KR20140118135A (en) * | 2013-03-28 | 2014-10-08 | 네이버 주식회사 | System, method and computer readable recording medium for synchronous script lazy loading |
| CN104102643A (en) * | 2013-04-03 | 2014-10-15 | 阿里巴巴集团控股有限公司 | Method and device for snapshoting page |
| CN111309332A (en) * | 2020-02-11 | 2020-06-19 | 北京达佳互联信息技术有限公司 | File content on-demand loading method and device, electronic equipment and storage medium |
-
2022
- 2022-04-27 CN CN202210452721.0A patent/CN114817807A/en active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103019720A (en) * | 2012-12-14 | 2013-04-03 | 北京奇虎科技有限公司 | Method and device for processing page in browser |
| KR20140118135A (en) * | 2013-03-28 | 2014-10-08 | 네이버 주식회사 | System, method and computer readable recording medium for synchronous script lazy loading |
| CN104102643A (en) * | 2013-04-03 | 2014-10-15 | 阿里巴巴集团控股有限公司 | Method and device for snapshoting page |
| CN111309332A (en) * | 2020-02-11 | 2020-06-19 | 北京达佳互联信息技术有限公司 | File content on-demand loading method and device, electronic equipment and storage medium |
Non-Patent Citations (3)
| Title |
|---|
| 王苗: "基于教辅资料学习***的Web性能优化", 中国优秀硕士学位论文全文数据库 社会科学Ⅱ辑, no. 02, pages 24 - 30 * |
| 王苗: "基于教辅资料学习***的Web性能优化", 硕士学位论文, vol. 2022, no. 02, pages 24 - 30 * |
| 记忆怪 BUG: "何为懒加载", Retrieved from the Internet <URL:https://blog.csdn.net/m0_66051368/article/details/124407677> * |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN111680253B (en) | Page application data packet generation method and device, computer equipment and storage medium | |
| AU2015210760B2 (en) | Static feature extraction from structured files | |
| US8423978B2 (en) | Configurable java server pages processing framework | |
| US8387008B2 (en) | Method for sharing a function between web contents | |
| US7334220B2 (en) | Data driven test automation of web sites and web services | |
| US11200033B2 (en) | Application programming interface (API) based object oriented software development and textual analysis | |
| US20150082298A1 (en) | Packaging and deploying hybrid applications | |
| US9772830B2 (en) | System and method for modeling cloud rules for migration to the cloud | |
| CN110333863B (en) | Method and device for generating and displaying applet page | |
| US20150317156A1 (en) | Systems and Methods for Automated Generation of Interactive Documentation Based on Web Application Description Language Files | |
| CN112965719B (en) | Method and device for generating small program | |
| US10452730B2 (en) | Methods for analyzing web sites using web services and devices thereof | |
| US20130275951A1 (en) | Race detection for web applications | |
| CN111158687B (en) | Interface generation method and device of JAVA plugin, computer equipment and storage medium | |
| US11991202B2 (en) | Scanning unexposed web applications for vulnerabilities | |
| CN112685105A (en) | Front-end component sharing method and device, computer equipment and storage medium | |
| CN111723314B (en) | Webpage display method and device, electronic equipment and computer readable storage medium | |
| CN117519877A (en) | Rendering method and device of quick application card, storage medium and electronic equipment | |
| US9870216B2 (en) | Application providing method including extracting and converting packaged application | |
| CN114817807A (en) | Page processing method, device, equipment, readable storage medium and product | |
| Losada et al. | Efficient execution of web navigation sequences | |
| CN113641594B (en) | Cross-terminal automatic testing method and related device | |
| EP2721494B1 (en) | System and method to in-line script dependencies | |
| JP2014519671A5 (en) | ||
| CN110780983A (en) | Task exception handling method and device, computer equipment and storage medium |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |