CN112800372B - Page loading method and device and electronic equipment - Google Patents

Page loading method and device and electronic equipment Download PDF

Info

Publication number
CN112800372B
CN112800372B CN202110146604.7A CN202110146604A CN112800372B CN 112800372 B CN112800372 B CN 112800372B CN 202110146604 A CN202110146604 A CN 202110146604A CN 112800372 B CN112800372 B CN 112800372B
Authority
CN
China
Prior art keywords
picture
page
webp format
pictures
format
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.)
Active
Application number
CN202110146604.7A
Other languages
Chinese (zh)
Other versions
CN112800372A (en
Inventor
唐钊
倪成华
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Netease Hangzhou Network Co Ltd
Original Assignee
Netease Hangzhou Network Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Netease Hangzhou Network Co Ltd filed Critical Netease Hangzhou Network Co Ltd
Priority to CN202110146604.7A priority Critical patent/CN112800372B/en
Publication of CN112800372A publication Critical patent/CN112800372A/en
Application granted granted Critical
Publication of CN112800372B publication Critical patent/CN112800372B/en
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

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/957—Browsing optimisation, e.g. caching or content distillation
    • G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
    • Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management

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 invention provides a page loading method, a page loading device and electronic equipment, wherein the method comprises the following steps: responding to a loading request of a designated page in a target browser, and detecting whether the target browser supports displaying pictures in a WebP format; and if the display of the pictures in the WebP format is supported, loading the pictures in the WebP format through the cascading style sheet of the specified page, and displaying the loaded pictures in the specified page. In the mode, a picture link in a WebP format and a picture link in a non-WebP format corresponding to a picture which can be displayed on a page are stored in a cascading style sheet corresponding to the page in advance; when the page is loaded, according to the picture format supported by the browser to be displayed, the picture displayed in the page can be obtained through the picture links stored in the cascading style sheet, and the picture links in the page resource are not required to be replaced, so that the page loading speed is improved, and the user experience is also improved.

Description

Page loading method and device and electronic equipment
Technical Field
The present invention relates to the field of page development technologies, and in particular, to a page loading method, a device and an electronic device.
Background
With the increasing maturity of the display effect of the web page, the use of pictures in the browser is more and more widespread. In the traditional page development, the JPG format or PNG format pictures are generally directly used, but the compression efficiency of the format pictures is lower, so that the network transmission quantity of the pictures is huge, and the user experience of browsing the web pages is poor.
Because the WebP format is a picture format capable of providing lossy compression and lossless compression at the same time, the size of picture resources can be reduced by the pictures in the WebP format, the same picture display effect as that of pictures in the non-WebP format can be ensured, and the flow consumption for loading the picture resources can be saved. Therefore, in the related art, a picture format conversion manner is provided, in which a web page resource corresponding to a web page to be displayed by a browser is detected by a resource loader, and if a picture link of a non-WebP picture exists in the web page resource detected by the resource loader, and the browser supports displaying of the WebP picture, the picture link of the non-WebP picture in the web page resource is replaced with the picture link of the WebP picture. However, the method only modifies the picture links in the page structure, so that the picture links in the page resource need to be detected and replaced every time the page is loaded, the page loading time is long, and the user experience is affected.
Disclosure of Invention
The invention aims to provide a page loading method, a page loading device and electronic equipment, so that page loading time is shortened, and user experience is improved.
In a first aspect, the present invention provides a page loading method, including: responding to a loading request of a designated page in a target browser, and detecting whether the target browser supports displaying pictures in a WebP format; if the display of the pictures in the WebP format is supported, loading the pictures in the WebP format through a cascading style sheet of the designated page, and displaying the loaded pictures in the designated page; the cascading style sheet stores picture links in a WebP format and picture links in a non-WebP format, wherein the picture links in the WebP format correspond to pictures which can be displayed on a designated page.
In an optional embodiment, a non-WebP format picture link corresponding to a picture that can be displayed on a designated page is pre-stored in the cascading style sheet; the picture links in WebP format corresponding to the pictures which can be displayed by the designated pages stored in the cascading style sheet are obtained by the following steps: converting a non-WebP format picture in pictures which can be displayed on a designated page into a WebP format picture through a preset construction tool to obtain a WebP format picture link; and saving the picture links in the WebP format to the cascading style sheet.
In an alternative embodiment, the build tool includes a Webpack tool.
In an optional embodiment, the step of detecting whether the target browser supports displaying the WebP-format picture includes: detecting whether a target browser can successfully draw the picture in the WebP format; if drawing is successful, determining that the target browser supports displaying the pictures in the WebP format.
In an optional embodiment, the step of detecting whether the target browser can successfully render the WebP format picture includes: detecting whether a target browser can draw a picture in a WebP format with a specified size by using a preset drawing mode; if the specified size of the picture in the WebP format can be drawn, the target browser is determined to be capable of successfully drawing the picture in the WebP format.
In an optional embodiment, if the displaying of the WebP format picture is supported, the step of loading the WebP format picture through the cascading style sheet of the designated page includes: if the target browser supports displaying the pictures in the WebP format, adding a preset first class name into a page tag of a specified page; and loading the pictures in the WebP format through the cascading style sheets of the designated pages according to the page tags of the designated pages.
In an alternative embodiment, the cascading style sheet further includes: a first class name corresponding to the picture link in the WebP format and a second class name corresponding to the picture link in the non-WebP format; the step of loading the WebP format picture through the cascading style sheet of the specified page according to the page tag of the specified page comprises the following steps: searching a picture link in a WebP format corresponding to the first type name in the cascading style sheet according to the first type name carried in the page tag; based on the picture links in the WebP format, loading the pictures in the WebP format.
In an alternative embodiment, the method further comprises: if the target browser does not support displaying the pictures in the WebP format, loading the pictures in the non-WebP format through the cascading style sheets of the designated pages; and displaying the loaded picture in the appointed page.
In an alternative embodiment, the cascading style sheet further includes: a first class name corresponding to the picture link in the WebP format and a second class name corresponding to the picture link in the non-WebP format; if the target browser does not support displaying the pictures in the WebP format, loading the pictures in the non-WebP format through the cascading style sheet of the designated page, wherein the method comprises the following steps: if the target browser does not support displaying the pictures in the WebP format, adding a preset second class name into a page tag of the appointed page; according to the second class name carried in the page tag, searching a picture link in a non-WebP format corresponding to the second class name in the cascading style sheet; based on the non-WebP format picture links, loading the non-WebP format pictures.
In alternative embodiments, the non-WebP format described above includes JPG format and/or PNG format.
In a second aspect, the present invention provides a page loading apparatus, the apparatus comprising: the detection module is used for responding to a loading request of a designated page in the target browser and detecting whether the target browser supports displaying pictures in a WebP format or not; the loading module is used for loading the pictures in the WebP format through the cascading style sheet of the designated page if the pictures in the WebP format are supported to be displayed, and displaying the loaded pictures in the designated page; the cascading style sheet stores picture links in a WebP format and picture links in a non-WebP format, wherein the picture links in the WebP format correspond to pictures which can be displayed on a designated page.
In a third aspect, the present invention provides an electronic device comprising a processor and a memory storing machine executable instructions executable by the processor to implement the page loading method of any of the preceding embodiments.
In a fourth aspect, the present invention provides a computer readable storage medium storing computer executable instructions which, when invoked and executed by a processor, cause the processor to implement a page loading method as described in any one of the preceding embodiments.
The embodiment of the invention has the following beneficial effects:
according to the page loading method, the page loading device and the electronic equipment, whether the target browser supports displaying of pictures in a WebP format or not is detected in response to a loading request of a designated page in the target browser; and if the display of the pictures in the WebP format is supported, loading the pictures in the WebP format through a cascading style sheet storing the picture links in the WebP format and the picture links in the non-WebP format corresponding to the pictures which can be displayed in the designated page, and displaying the loaded pictures in the designated page. In the mode, a picture link in a WebP format and a picture link in a non-WebP format corresponding to a picture which can be displayed on a page are stored in a cascading style sheet of the page in advance; when the page is loaded, according to the picture format supported by the browser to be displayed, the picture displayed in the page can be obtained through the picture links stored in the cascading style sheet without replacing the picture links in the page resource, so that the page loading speed is improved, and the user experience is improved.
Additional features and advantages of the invention will be set forth in the description which follows, or in part will be obvious from the description, or may be learned by practice of the invention.
In order to make the above objects, features and advantages of the present invention more comprehensible, preferred embodiments accompanied with figures are described in detail below.
Drawings
In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings that are needed in the description of the embodiments or the prior art will be briefly described, and it is obvious that the drawings in the description below are some embodiments of the present invention, and other drawings can be obtained according to the drawings without inventive effort for a person skilled in the art.
FIG. 1 is a flowchart of a page loading method according to an embodiment of the present invention;
FIG. 2 is a flowchart of another page loading method according to an embodiment of the present invention;
FIG. 3 is a flowchart of another page loading method according to an embodiment of the present invention;
FIG. 4 is a schematic structural diagram of a page loading device according to an embodiment of the present invention;
Fig. 5 is a schematic structural diagram of an electronic device according to an embodiment of the present invention.
Detailed Description
For the purpose of making the objects, technical solutions and advantages of the embodiments of the present invention more apparent, the technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings in the embodiments of the present invention, and it is apparent that the described embodiments are some embodiments of the present invention, but not all embodiments of the present invention. The components of the embodiments of the present invention generally described and illustrated in the figures herein may be arranged and designed in a wide variety of different configurations.
Thus, the following detailed description of the embodiments of the invention, as presented in the figures, is not intended to limit the scope of the invention, as claimed, but is merely representative of selected embodiments of the invention. All other embodiments, which can be made by those skilled in the art based on the embodiments of the invention without making any inventive effort, are intended to be within the scope of the invention.
In the related art, a picture format conversion mode is provided, a web page resource corresponding to a web page to be displayed by a browser is detected through a resource loader, and if a picture link of a non-WebP format picture exists in the web page resource and the browser supports displaying of the picture in the WebP format, the picture link of the non-WebP format picture in the web page resource is replaced by the picture link of the WebP format picture. However, the method only modifies the picture links in the page structure, so that the picture links in the page resource need to be detected and replaced every time the page is loaded, the page loading time is long, and the user experience is affected.
Based on the above problems, the embodiment of the invention provides a page loading method, a device and electronic equipment, and the technology can be applied to scenes such as page display, page loading or page development. In order to facilitate understanding of the embodiments of the present invention, a page loading method disclosed in the embodiments of the present invention is first described in detail, as shown in fig. 1, and the method includes the following specific steps:
step S102, in response to a loading request of a designated page in the target browser, detecting whether the target browser supports displaying pictures in a WebP format.
The target browser may be a browser that the user wants to log in or a browser that is logging in, and the browser may be various browsers provided by various vendors. The specified page is a page (which may be a web page) that the user wants to access and that can be displayed in the target browser; when the user accesses the specified page, the user can send a loading request for the specified page in the target browser through a terminal device (the terminal device can be a mobile terminal, such as a mobile phone or a tablet computer, or a computer), and when the loading request is received, whether the target browser supports displaying the pictures in the WebP format or not can be detected immediately.
In a specific implementation, a detection script may be set in the target browser, where the detection script is used to detect whether the target browser supports displaying the WebP format picture, and when receiving a loading request of the specified page, the target browser automatically executes the detection script to automatically detect whether the target browser supports displaying the WebP format picture. The detection codes in the detection script are set in advance by a developer in the development process.
Step S104, if the display of the pictures in the WebP format is supported, loading the pictures in the WebP format through a cascading style sheet of the designated page, and displaying the loaded pictures in the designated page; the cascading style sheet stores picture links in a WebP format and picture links in a non-WebP format, wherein the picture links in the WebP format correspond to pictures which can be displayed on a designated page.
The cascading style sheet (Cascading Style Sheets, abbreviated as CSS) is generally a computer language for representing file styles such as HTML (HyperText Markup Language ) or XML (Extensible Markup Language, extensible markup language); the cascading style sheet not only can statically decorate the webpage, but also can dynamically format each element of the webpage in cooperation with various script languages, and can accurately control the typesetting of the element positions in the webpage at the pixel level, support almost all font size styles, and has the capability of editing webpage objects and model styles; meanwhile, CSS describes the problem of how elements on screen, paper, audio, etc. media should be rendered.
The content stored in the cascading style sheet is preprocessed in the page development stage, and after preprocessing, the cascading style sheet stores picture links in WebP format and picture links in non-WebP format, which correspond to pictures that can be displayed by the appointed page. The pretreatment process can be as follows: and converting the pictures which are not in the WebP format and can be displayed in the appointed page into pictures in the WebP format, and storing the picture links corresponding to the pictures in the WebP format and the picture links corresponding to the pictures in the non-WebP format into a cascading style sheet so that the picture links corresponding to the two picture formats of one picture are stored in the cascading style sheet. That is, the picture links saved in the cascading style sheet are divided into a portion supporting the webP format and a portion not supporting the webP format.
If the target browser supports displaying the pictures in the WebP format (or the target browser can use the pictures in the WebP format), the pictures in the WebP format can be loaded through the pictures in the WebP format stored in the cascading style sheet of the designated page in a linked mode, and then the loaded pictures in the WebP format are displayed in the designated page, so that loading of the designated page is completed. If the target browser does not support displaying the pictures in the WebP format, the pictures in the non-WebP format can be loaded through linking the pictures in the non-WebP format stored in the cascading style sheet of the designated page, and then the loaded pictures in the non-WebP format are displayed in the designated page, so that loading of the designated page is completed. Therefore, the method can be compatible with various complex environments, can improve the loading speed of the page to the greatest extent, and reduces the flow use.
According to the page loading method provided by the embodiment of the invention, firstly, whether a target browser supports displaying a picture in a WebP format or not is detected in response to a loading request of a designated page in the target browser; and if the display of the pictures in the WebP format is supported, loading the pictures in the WebP format through a cascading style sheet storing the picture links in the WebP format and the picture links in the non-WebP format corresponding to the pictures which can be displayed in the designated page, and displaying the loaded pictures in the designated page. In the mode, a picture link in a WebP format and a picture link in a non-WebP format corresponding to a picture which can be displayed on a page are stored in a cascading style sheet of the page in advance; when the page is loaded, according to the picture format supported by the browser to be displayed, the picture displayed in the page can be obtained through the picture links stored in the cascading style sheet without replacing the picture links in the page resource, so that the page loading speed is improved, and the user experience is improved.
The embodiment of the invention also provides another page loading method, which is realized on the basis of the embodiment, and the method focuses on describing a specific process of detecting whether the target browser supports displaying the pictures in the WebP format (particularly realized through the following step S202), and a specific process of loading the pictures in the WebP format through the cascading style sheets of the designated pages (particularly realized through the following steps S206-S208) if the target browser supports displaying the pictures in the WebP format; as shown in fig. 2, the method comprises the following specific steps:
Step S202, responding to a loading request of a designated page in a target browser, and detecting whether the target browser can successfully draw pictures in a WebP format; if drawing is successful, executing step S204; otherwise, step S210 is performed.
When the method is specifically implemented, the browser usually has a drawing function, when a loading request of a designated page is received, a preset detection script is automatically executed to detect whether a target browser can successfully draw pictures in a WebP format, and if so, the target browser is determined to support to display the pictures in the WebP format; if the drawing cannot be successfully performed, the target browser is determined not to support displaying the pictures in the WebP format.
Specifically, the process of detecting whether the target browser can successfully draw the WebP format picture may include: detecting whether a target browser can draw a picture in a WebP format with a specified size by using a preset drawing mode; if the image in the WebP format with the specified size can be drawn, determining that the target browser can successfully draw the image in the WebP format; if the picture in the WebP format with the specified size cannot be drawn, the target browser is determined to be incapable of successfully drawing the picture in the WebP format. The preset drawing mode can be set according to the research and development requirements, for example, a canvas mode or other drawing modes can be used; the above specified size may also be set according to development requirements, for example, may be set to 1 pixel, 2 pixels, or more. In some embodiments, to enable detection of whether the fast target browser supports pictures in WebP format, the specified size may be set to a 1-pixel size.
In some embodiments, if the target browser is able to successfully draw the WebP formatted picture, the target browser will return the first symbol; if the target browser cannot successfully draw the pictures in the WebP format, the target browser returns a second symbol; and then determining whether the target browser supports displaying the pictures in the WebP format according to the symbols returned by the target browser. The first symbol and the second symbol are two different symbols, and can be set according to research and development requirements, and the first symbol and the second symbol can be composed of numbers, characters, symbols or character strings, etc., for example, the first symbol can be set as "TRUE" or "support", etc., and the second symbol can be set as "FALSE" or "non-report", etc.
Step S204, determining that the target browser supports displaying the pictures in the WebP format.
Step S206, adding the preset first class name to the page tag of the appointed page.
When the browser supports displaying pictures in WebP format at present, a preset first class name is added to a page tag of a designated page, wherein the first class name can be class name, a specific setting symbol of the first class name needs to be set according to requirements of research personnel, the first class name can be composed of one or more of symbols, numbers, letters, character strings or the like, and for example, a setting rule of the first class name can be as follows: english letters, numbers and "-" and "_" designations are adopted; and may begin with lower case letters, not numbers, "-" and "_" and the first category may be set to "support" or "aabb-" and the like.
In a specific implementation, the page tag may be an HTML tag, where the HTML tag is the most basic unit in the HTML language, the content of the page needs to be displayed in the head tag of the page by information such as a title, a character format, a language, compatibility, a keyword, a description, and the like, and the content to be displayed by the web page needs to be nested in the body tag of the page.
Step S208, loading the pictures in the WebP format through the cascading style sheets of the designated pages according to the page tags of the designated pages; step S212 is performed.
In a specific implementation, since the browser generally supports displaying pictures in a non-WebP format, a cascading style sheet generally stores a non-WebP format picture link corresponding to a picture that can be displayed on a designated page in advance. In order to implement the embodiment of the present invention, a WebP format picture link corresponding to a picture that can be displayed on a designated page needs to be stored in a cascading style sheet, and a specific setting manner may be: converting a non-WebP format picture in pictures which can be displayed on a designated page into a WebP format picture through a preset construction tool to obtain a WebP format picture link; the WebP formatted picture links are then saved to the cascading style sheet.
The build tool may be a weback tool, which is typically an open-source front-end packaging tool that provides a modular development approach to front-end development deficiency, treats various static resources as modules, and generates optimized code from it. In the development process of using the construction tool, in order to realize the process of automatically converting the non-WebP-format picture into the WebP-format picture, a preset picture format conversion plug-in is required to be added in a plug-in list option (for example, a plug-in list option of the weback tool) of the construction tool, and after the picture format conversion plug-in is set in a page plug-in, when the construction tool is started, the non-WebP-format picture used by the page plug-in can be automatically converted into the WebP-format picture, the non-WebP-format picture and the WebP-format picture are simultaneously saved, and the picture links of the saved pictures are sent to a cascading style sheet to be stored, so that the WebP-format picture links and the non-WebP-format picture links corresponding to the pictures used by pages are saved in the cascading style sheet.
The method has the advantages that the webP-format picture links can be automatically added in the cascading style sheets through the construction tool, manual addition of research personnel is not needed, the research personnel is not needed to write codes to convert non-webP-format pictures into webP-format pictures, and picture format conversion plug-ins in the construction tool can be automatically completed, so that labor cost is saved.
In a specific implementation, since the generation of the page is also generated by converting by means of a page plug-in, according to the implementation logic sequence of the present invention, the picture format conversion plug-in needs to be executed after the page plug-in, so that a detection code for detecting browser compatibility (that is, a detection code for detecting whether the browser supports displaying pictures in WebP format) can be added to the page. In some embodiments, detection code to detect browser compatibility may be automatically added to the head tag at the top of the page when the build tool packages the build. According to the mode, the supporting condition of the browser on the webP format picture can be automatically detected according to the detection code added by the page script, so that whether the webP format picture is used or not is determined, and the mode is higher in compatibility.
In some embodiments, the non-WebP format described above includes a JPG (jointphoto expertise group) format and/or a PNG (Portable Network Graphics ) format. That is, the non-WebP format may include only JPG format, may include only PNG format, and may include both JPG and PNG formats. In particular implementations, the non-WebP format may also include other picture formats (e.g., gif format), and the specific non-WebP format includes which formats are set according to development requirements and are not listed here.
In some embodiments, the above cascading style sheet further stores a first class name corresponding to a picture link in WebP format and a second class name corresponding to a picture link in non-WebP format, where the second class name may be a class name, the second class name is a class name different from the first class name, a specific symbol of the second class name is set in advance according to development requirements, and the second class name may be formed by one or more of a symbol, a number, a letter, a character string, or the like, and for example, a setting rule of the second class name may be: english letters, numbers and "-" and "_" designations are adopted; and may begin with lower case letters, not numbers, "-" and "_", the second class name may be set to "non-upper" or "ccdd-" etc.
In a specific implementation, while the picture links in the WebP format are saved to the cascading style sheet, the picture links in the WebP format may be carried with a first type name, so that the picture links in the WebP format are marked by the first type name. Likewise, while the non-WebP formatted picture links are saved to the cascading style sheet, the non-WebP formatted picture links may be carried with a second type name by which to tag the non-WebP formatted picture links.
In implementing the step S208, a WebP format picture link corresponding to the first type name indicated by the page tag may be searched in the cascading style sheet based on the first type name carried by the page tag of the specified page, and then the WebP format picture is unloaded according to the picture link. After loading is completed, the pictures displayed in the appointed page are in a WebP format, so that the loading speed of the page is improved.
Step S210, determining that the target browser does not support displaying the pictures in the WebP format, and loading the pictures in the non-WebP format through the cascading style sheets of the designated pages; step S212 is performed.
If the target browser cannot successfully draw the pictures in the WebP format, determining that the target browser does not support displaying the pictures in the WebP format, and loading the pictures in the non-WebP format through the cascading style sheets of the designated pages. After loading is completed, the pictures displayed in the designated page are in a non-WebP format, and the pictures can be understood as regular pictures used in the designated page.
Step S212, displaying the loaded picture in the designated page.
Taking a non-webP format as a JPG/PNG as an example, embodiments of the present invention will be briefly described: the JPG/PNG pictures are automatically converted into pictures in webP format in the development process using weback, and at the same time, the picture links in the cascading style sheet are divided into a webP supporting part (corresponding to the picture links in webP format) and a webP non-supporting part (corresponding to the picture links in non-webP format). Loading a detection code for judging whether the browser supports displaying the webP-format picture into the page code by the client, and directly loading the cascading style sheet content of the webP supporting part if the browser supports displaying the webP-format picture according to the detection judging result of the client; if the browser does not support, the cascading style sheet content of the original JPG/PNG part is used, so that the cascading style sheet is compatible with various complex environments.
According to the page loading method, firstly, whether a target browser can successfully draw a picture in a WebP format or not is detected in response to a loading request of a designated page in the target browser; if drawing is successful, determining that the target browser supports displaying the pictures in the WebP format, adding a preset first type name into the page tag of the appointed page, and then loading the pictures in the WebP format through the cascading style sheet of the appointed page according to the page tag of the appointed page; if drawing cannot be successfully performed, determining that the target browser does not support displaying the pictures in the WebP format, and loading the pictures in the non-WebP format through the cascading style sheets of the designated pages; and finally, displaying the loaded picture in the appointed page. In the mode, if the browser supports displaying the pictures in the webP format, the content corresponding to the webP format is directly used in the cascading style sheet, so that the page loading speed is improved; if the browser does not support displaying the pictures in the webP format, the original pictures corresponding to the non-webP format are still used, and the mode does not cause any damage to the page content, so that the stability of page display is facilitated.
The embodiment of the invention also provides another page loading method, which is realized on the basis of the embodiment, and the method mainly describes a specific process of loading the pictures in the WebP format through the cascading style sheet of the appointed page according to the page label of the appointed page under the condition that the picture links in the WebP format and the picture links in the non-WebP format corresponding to the pictures which can be displayed by the appointed page and the first class names corresponding to the picture links in the WebP format and the second class names corresponding to the picture links in the non-WebP format are stored in the cascading style sheet (particularly realized through the following step S308); as shown in fig. 3, the method comprises the following specific steps:
Step S302, a loading request of a designated page in a target browser is received.
Step S304, detecting whether the target browser supports displaying pictures in the WebP format; if yes, step S306 is performed, otherwise step S310 is performed.
When a loading request of a specified page is received in a target browser, whether the target browser supports displaying pictures in a WebP format or not is automatically detected. In specific implementation, the detection method may be: drawing a picture in a webP format with the size of 1 pixel by using a canvas mode through a target browser, if drawing is successful, supporting the display of the picture in the webP format by the target browser, and returning a Boolean value "TRUE" by the target browser; if the rendering fails, the target browser does not support displaying pictures in WebP format, and the target browser returns a Boolean value of "FALSE".
In some embodiments, it may be determined to add a class name of one of the first class name or the second class name to the page tag according to the boolean value returned by the target browser, so that the subsequent step may determine which picture format to load according to the class name added in the page tag.
In step S306, the first class name is added to the page tag of the specified page.
Step S308, searching a picture link in a WebP format corresponding to the first type name in the cascading style sheet according to the first type name carried in the page tag; loading the pictures in the WebP format based on the picture links in the WebP format; step S314 is performed.
If the target browser is detected to support displaying the pictures in the WebP format, adding the first type name into a page tag of a specified page, searching a picture link in the WebP format corresponding to the first type name in a cascading style sheet according to the first type name carried in the page tag, determining a position for storing the pictures in the WebP format through the picture link in the WebP format, and loading the pictures in the WebP format from the position.
Step S310, adding the second class name to the page tag of the specified page.
Step S312, searching a non-WebP format picture link corresponding to the second class name in the cascading style sheet according to the second class name carried in the page tag; loading a picture in a non-WebP format based on the picture link in the non-WebP format; step S314 is performed.
If the target browser is detected not to support displaying the pictures in the WebP format, adding a second class name into a page tag of a designated page, searching a picture link in a non-WebP format corresponding to the second class name in a cascading style sheet according to the second class name carried in the page tag, determining a position for storing the pictures in the non-WebP format through the picture link in the non-WebP format, and loading the pictures in the non-WebP format from the position.
Step S314, the loaded picture is displayed in the designated page.
According to the page loading method, firstly, whether a target browser supports displaying pictures in a WebP format or not is detected in response to a loading request of a designated page in the target browser; if so, adding the first type name into a page tag of the appointed page, and searching a picture link in a WebP format corresponding to the first type name in the cascading style sheet according to the first type name carried in the page tag; loading the pictures in the WebP format based on the picture links in the WebP format; if not, adding the second class name into a page tag of the appointed page, and searching a picture link in a non-WebP format corresponding to the second class name in the cascading style sheet according to the second class name carried in the page tag; loading a picture in a non-WebP format based on the picture link in the non-WebP format; the loaded picture is then displayed in the designated page. In the mode, if the browser supports the use of the webP format, the style sheet content of the webP part is directly loaded, and if the original style sheet content of the picture part is not supported, the style sheet is compatible with various complex environments, the loading speed of the webpage is improved to the greatest extent, and the traffic use is reduced.
Corresponding to the above method embodiment, the embodiment of the present invention provides a page loading device, as shown in fig. 4, including:
the detecting module 40 is configured to detect whether the target browser supports displaying a picture in WebP format in response to a loading request of a specified page in the target browser.
A loading module 41, configured to load a picture in WebP format through a cascading style sheet of a specified page and display the loaded picture in the specified page if supporting displaying the picture in WebP format; the cascading style sheet stores picture links in a WebP format and picture links in a non-WebP format, wherein the picture links in the WebP format correspond to pictures which can be displayed on a designated page.
The page loading device firstly responds to a loading request of a designated page in a target browser, and detects whether the target browser supports displaying pictures in a WebP format; and if the display of the pictures in the WebP format is supported, loading the pictures in the WebP format through a cascading style sheet storing the picture links in the WebP format and the picture links in the non-WebP format corresponding to the pictures which can be displayed in the designated page, and displaying the loaded pictures in the designated page. In the mode, a picture link in a WebP format and a picture link in a non-WebP format corresponding to a picture which can be displayed on a page are stored in a cascading style sheet of the page in advance; when the page is loaded, according to the picture format supported by the browser to be displayed, the picture displayed in the page can be obtained through the picture links stored in the cascading style sheet without replacing the picture links in the page resource, so that the page loading speed is improved, and the user experience is improved.
Specifically, the cascading style sheet stores a non-WebP format picture link corresponding to a picture that can be displayed by a designated page in advance; the device further comprises a picture link storage module for: converting a non-WebP format picture in pictures which can be displayed on a designated page into a WebP format picture through a preset construction tool to obtain a WebP format picture link; and saving the picture links in the WebP format to the cascading style sheet.
In particular implementations, the build tool includes a Webpack tool.
Further, the detection module 40 is further configured to: detecting whether a target browser can successfully draw a picture in a WebP format; if drawing is successful, determining that the target browser supports displaying the pictures in the WebP format.
Specifically, the above detection module 40 is further configured to: detecting whether a target browser can draw a picture in a WebP format with a specified size by using a preset drawing mode; if the specified size of the picture in the WebP format can be drawn, the target browser is determined to be capable of successfully drawing the picture in the WebP format.
Further, the loading module 41 includes: the tag setting module is used for adding a preset first class name into a page tag of a specified page if the target browser supports displaying pictures in a WebP format; the image acquisition module is used for: and loading the pictures in the WebP format through the cascading style sheets of the designated pages according to the page tags of the designated pages.
Specifically, the cascading style sheet further includes: a first class name corresponding to the picture link in the WebP format and a second class name corresponding to the picture link in the non-WebP format; the above-mentioned picture acquisition module is further used for: searching a picture link in a WebP format corresponding to the first type name in the cascading style sheet according to the first type name carried in the page tag; based on the picture links in the WebP format, loading the pictures in the WebP format.
Further, the loading module 41 is further configured to: if the target browser does not support displaying the pictures in the WebP format, loading the pictures in the non-WebP format through the cascading style sheets of the designated pages; and displaying the loaded picture in the appointed page.
Specifically, the cascading style sheet further includes: a first class name corresponding to the picture link in the WebP format and a second class name corresponding to the picture link in the non-WebP format; the loading module 41 is further configured to: if the target browser does not support displaying the pictures in the WebP format, adding a preset second class name into a page tag of the appointed page; according to the second class name carried in the page tag, searching a picture link in a non-WebP format corresponding to the second class name in the cascading style sheet; based on the non-WebP format picture links, loading the non-WebP format pictures.
In particular implementations, the non-WebP format includes a JPG format and/or a PNG format.
The implementation principle and the generated technical effects of the page loading device provided by the embodiment of the invention are the same as those of the embodiment of the page loading method, and for the sake of brief description, the corresponding contents in the embodiment of the method can be referred to where the embodiment of the device is not mentioned.
An embodiment of the present invention further provides an electronic device, as shown in fig. 5, where the electronic device includes a processor 101 and a memory 100, where the memory 100 stores machine executable instructions that can be executed by the processor 101, and the processor 101 executes the machine executable instructions to implement the page loading method described above.
Further, the electronic device shown in fig. 5 further includes a bus 102 and a communication interface 103, and the processor 101, the communication interface 103, and the memory 100 are connected through the bus 102.
The memory 100 may include a high-speed random access memory (RAM, randomAccessMemory) and may further include a non-volatile memory (non-volatile memory), such as at least one magnetic disk memory. The communication connection between the system network element and at least one other network element is implemented via at least one communication interface 103 (which may be wired or wireless), and may use the internet, a wide area network, a local network, a metropolitan area network, etc. Bus 102 may be an ISA bus, a PCI bus, an EISA bus, or the like. The buses may be classified as address buses, data buses, control buses, etc. For ease of illustration, only one bi-directional arrow is shown in FIG. 5, but not only one bus or type of bus.
The processor 101 may be an integrated circuit chip with signal processing capabilities. In implementation, the steps of the above method may be performed by integrated logic circuits of hardware in the processor 101 or instructions in the form of software. The processor 101 may be a general-purpose processor, including a Central Processing Unit (CPU), a Network Processor (NP), and the like; but may also be a digital signal processor (Digital Signal Processing, DSP for short), application specific integrated circuit (Application Specific Integrated Circuit, ASIC for short), off-the-shelf programmable gate array (Field-Programmable Gate Array, FPGA for short), or other programmable logic device, discrete gate or transistor logic device, discrete hardware components.
The disclosed methods, steps, and logic blocks in the embodiments of the present invention may be implemented or performed. A general purpose processor may be a microprocessor or the processor may be any conventional processor or the like. The steps of the method disclosed in connection with the embodiments of the present invention may be embodied directly in the execution of a hardware decoding processor, or in the execution of a combination of hardware and software modules in a decoding processor. The software modules may be located in a random access memory, flash memory, read only memory, programmable read only memory, or electrically erasable programmable memory, registers, etc. as well known in the art. The storage medium is located in the memory 100 and the processor 101 reads information in the memory 100 and in combination with its hardware performs the steps of the method of the previous embodiments.
The embodiment of the invention also provides a computer readable storage medium, which stores computer executable instructions that, when being called and executed by a processor, cause the processor to implement the above page loading method, and specific implementation can be seen in the method embodiment and will not be described herein.
The page loading method, the page loading device and the computer program product of the electronic device provided by the embodiments of the present invention include a computer readable storage medium storing program codes, and instructions included in the program codes may be used to execute the method described in the foregoing method embodiment, and specific implementation may refer to the method embodiment and will not be described herein.
The functions, if implemented in the form of software functional units and sold or used as a stand-alone product, may be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present invention may be embodied essentially or in a part contributing to the prior art or in a part of the technical solution, in the form of a software product stored in a storage medium, comprising several instructions for causing a computer device (which may be a personal computer, an electronic device, or a network device, etc.) to perform all or part of the steps of the method according to the embodiments of the present invention. And the aforementioned storage medium includes: a U-disk, a removable hard disk, a Read-Only Memory (ROM), a random access Memory (RAM, random Access Memory), a magnetic disk, or an optical disk, or other various media capable of storing program codes.
In the description of the present invention, it should be noted that the directions or positional relationships indicated by the terms "center", "upper", "lower", "left", "right", "vertical", "horizontal", "inner", "outer", etc. are based on the directions or positional relationships shown in the drawings, are merely for convenience of describing the present invention and simplifying the description, and do not indicate or imply that the devices or elements referred to must have a specific orientation, be configured and operated in a specific orientation, and thus should not be construed as limiting the present invention. Furthermore, the terms "first," "second," and "third" are used for descriptive purposes only and are not to be construed as indicating or implying relative importance.
Finally, it should be noted that: the above examples are only specific embodiments of the present invention, and are not intended to limit the scope of the present invention, but it should be understood by those skilled in the art that the present invention is not limited thereto, and that the present invention is described in detail with reference to the foregoing examples: any person skilled in the art may modify or easily conceive of the technical solution described in the foregoing embodiments, or perform equivalent substitution of some of the technical features, while remaining within the technical scope of the present disclosure; such modifications, changes or substitutions do not depart from the spirit and scope of the technical solutions of the embodiments of the present invention, and are intended to be included in the scope of the present invention. Therefore, the protection scope of the present invention shall be subject to the protection scope of the claims.

Claims (12)

1. A method of page loading, the method comprising:
responding to a loading request of a designated page in a target browser, and detecting whether the target browser supports displaying pictures in a WebP format;
if the display of the pictures in the WebP format is supported, loading the pictures in the WebP format through the cascading style sheet of the specified page, and displaying the loaded pictures in the specified page; the cascading style sheet stores a picture link in the WebP format and a picture link in a non-WebP format, which correspond to pictures which can be displayed by the appointed page;
the step of detecting whether the target browser supports displaying the pictures in the WebP format comprises the following steps:
detecting whether the target browser can successfully draw the picture in the WebP format;
and if drawing is successful, determining that the target browser supports displaying the pictures in the WebP format.
2. The method according to claim 1, wherein a non-WebP format picture link corresponding to a picture that can be displayed by the designated page is stored in the cascading style sheet in advance;
the WebP format picture links corresponding to the pictures which can be displayed by the designated page and stored in the cascading style sheet are obtained by the following steps:
Converting a picture which is not in a WebP format in pictures which can be displayed on the designated page into the picture in the WebP format through a preset construction tool, and obtaining a picture link in the WebP format;
and storing the picture links in the WebP format to the cascading style sheet.
3. The method of claim 2, wherein the build tool comprises a weback tool.
4. The method of claim 1, wherein the step of detecting whether the target browser is able to successfully render the WebP formatted picture comprises:
detecting whether the target browser can draw a picture in a WebP format with a specified size by using a preset drawing mode; and if the picture in the WebP format with the specified size can be drawn, determining that the target browser can successfully draw the picture in the WebP format.
5. The method according to claim 1, wherein the step of loading the WebP-formatted picture through the cascading style sheet of the specified page if the WebP-formatted picture is supported for display comprises:
if the target browser supports displaying the pictures in the WebP format, adding a preset first class name into the page tag of the appointed page;
And loading the pictures in the WebP format through the cascading style sheets of the specified pages according to the page tags of the specified pages.
6. The method of claim 5, wherein the cascading style sheet further comprises: the first class name corresponding to the picture link in the WebP format and the second class name corresponding to the picture link in the non-WebP format; the step of loading the pictures in the WebP format through the cascading style sheets of the specified pages according to the page tags of the specified pages comprises the following steps:
searching the picture links in the WebP format corresponding to the first type name in the cascading style sheet according to the first type name carried in the page tag;
and loading the pictures in the WebP format based on the picture links in the WebP format.
7. The method according to claim 1, wherein the method further comprises:
if the target browser does not support displaying the pictures in the WebP format, loading the pictures in the non-WebP format through the cascading style sheets of the designated page; and displaying the loaded picture in the appointed page.
8. The method of claim 7, wherein the cascading style sheet further comprises: the first class name corresponding to the picture link in the WebP format and the second class name corresponding to the picture link in the non-WebP format;
The step of loading the non-WebP format picture through the cascading style sheet of the specified page if the target browser does not support displaying the WebP format picture comprises the following steps:
if the target browser does not support displaying the pictures in the WebP format, adding a preset second class name into the page tag of the appointed page;
searching the picture links in the non-WebP format corresponding to the second class name in the cascading style sheet according to the second class name carried in the page tag;
and loading the non-WebP format picture based on the non-WebP format picture link.
9. The method of any of claims 1-8, wherein the non-WebP format comprises JPG format and/or PNG format.
10. A page loading apparatus, the apparatus comprising:
the detection module is used for responding to a loading request of a designated page in a target browser and detecting whether the target browser supports displaying pictures in a WebP format or not;
the loading module is used for loading the pictures in the WebP format through the cascading style sheet of the specified page and displaying the loaded pictures in the specified page if the pictures in the WebP format are supported to be displayed; the cascading style sheet stores a picture link in the WebP format and a picture link in a non-WebP format, which correspond to pictures which can be displayed by the appointed page;
Wherein, detection module still is used for: detecting whether the target browser can successfully draw the picture in the WebP format; and if drawing is successful, determining that the target browser supports displaying the pictures in the WebP format.
11. An electronic device comprising a processor and a memory, the memory storing machine executable instructions executable by the processor, the processor executing the machine executable instructions to implement the page loading method of any of claims 1 to 9.
12. A computer readable storage medium storing computer executable instructions which, when invoked and executed by a processor, cause the processor to implement the page loading method of any one of claims 1 to 9.
CN202110146604.7A 2021-02-03 2021-02-03 Page loading method and device and electronic equipment Active CN112800372B (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202110146604.7A CN112800372B (en) 2021-02-03 2021-02-03 Page loading method and device and electronic equipment

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110146604.7A CN112800372B (en) 2021-02-03 2021-02-03 Page loading method and device and electronic equipment

Publications (2)

Publication Number Publication Date
CN112800372A CN112800372A (en) 2021-05-14
CN112800372B true CN112800372B (en) 2023-06-13

Family

ID=75813840

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202110146604.7A Active CN112800372B (en) 2021-02-03 2021-02-03 Page loading method and device and electronic equipment

Country Status (1)

Country Link
CN (1) CN112800372B (en)

Families Citing this family (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113836452A (en) * 2021-07-12 2021-12-24 上海一谈网络科技有限公司 Picture display optimization method, system, equipment and storage medium
CN114036419A (en) * 2021-11-10 2022-02-11 中国建设银行股份有限公司 Webpage picture resource processing method and device
CN114095783A (en) * 2021-11-29 2022-02-25 中国平安财产保险股份有限公司 Picture uploading method and device, computer equipment and storage medium

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2014052960A (en) * 2012-09-10 2014-03-20 Ricoh Co Ltd Image processing apparatus and program
CN108965430A (en) * 2018-07-16 2018-12-07 深圳鼎盛电脑科技有限公司 Image acquisition method, device, computer equipment and storage medium
CN110246266A (en) * 2019-06-19 2019-09-17 深圳市丰巢科技有限公司 A kind of information displaying method, device, equipment and medium
CN111159604A (en) * 2019-12-30 2020-05-15 北京三快在线科技有限公司 Picture resource loading method and device
CN111198999A (en) * 2020-01-03 2020-05-26 北京字节跳动网络技术有限公司 Method, device, medium and electronic equipment for loading pictures of webpage end
CN111259289A (en) * 2020-01-15 2020-06-09 北京达佳互联信息技术有限公司 Picture loading method and device, electronic equipment and storage medium

Family Cites Families (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109086374A (en) * 2018-07-23 2018-12-25 北京达佳互联信息技术有限公司 Webpage loading display method, device, terminal device and readable storage medium storing program for executing
CN109525796A (en) * 2018-12-12 2019-03-26 四川商通实业有限公司 A kind of Webp picture format conversion method
CN111104631B (en) * 2019-11-30 2023-06-20 四川商通实业有限公司 Webp picture format conversion method
CN112099790B (en) * 2020-09-10 2024-03-29 北京百度网讯科技有限公司 Method, device, equipment and storage medium for determining page theme

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2014052960A (en) * 2012-09-10 2014-03-20 Ricoh Co Ltd Image processing apparatus and program
CN108965430A (en) * 2018-07-16 2018-12-07 深圳鼎盛电脑科技有限公司 Image acquisition method, device, computer equipment and storage medium
CN110246266A (en) * 2019-06-19 2019-09-17 深圳市丰巢科技有限公司 A kind of information displaying method, device, equipment and medium
CN111159604A (en) * 2019-12-30 2020-05-15 北京三快在线科技有限公司 Picture resource loading method and device
CN111198999A (en) * 2020-01-03 2020-05-26 北京字节跳动网络技术有限公司 Method, device, medium and electronic equipment for loading pictures of webpage end
CN111259289A (en) * 2020-01-15 2020-06-09 北京达佳互联信息技术有限公司 Picture loading method and device, electronic equipment and storage medium

Also Published As

Publication number Publication date
CN112800372A (en) 2021-05-14

Similar Documents

Publication Publication Date Title
CN112800372B (en) Page loading method and device and electronic equipment
US6477549B1 (en) Transmission document editing device, a server device in a communication document processing system, and a computer-readable record medium that stores the function thereof
US10853319B2 (en) System and method for display of document comparisons on a remote device
CN104050238A (en) Map labeling method and map labeling device
US9117000B2 (en) Information retrieval using decoded machine-readable optical codes
CN108874922B (en) Client device, webpage rendering method based on single page application and storage medium
CN113382083B (en) Webpage screenshot method and device
CN112417338B (en) Page adaptation method, system and equipment
CN111708535A (en) Image-text display control method and device and electronic equipment
JP2023541186A (en) Visualization page rendering method, device, equipment and storage medium
CN111562911B (en) Webpage editing method and device and storage medium
CN114791988A (en) Browser-based PDF file analysis method, system and storage medium
US10198408B1 (en) System and method for converting and importing web site content
CN113297425B (en) Document conversion method, device, server and storage medium
CN104021127A (en) Information processing method and electronic device
CN113127776A (en) Breadcrumb path generation method and device and terminal equipment
CN111125605B (en) Page element acquisition method and device
CN101233494B (en) Plug-in module execution method, browser execution method, mailer execution method and terminal device
CN110309454B (en) Interface display method, device, equipment and storage medium
CN113806667B (en) Method and system for supporting webpage classification
CN115169292A (en) Document processing method and device, electronic equipment and computer readable storage medium
CN104239432A (en) Method and device for identifying responsive pages
CN112749528B (en) Text processing method, text processing device, electronic equipment and computer readable storage medium
JP2002351781A (en) Content generating device using screen display page layout
CN113343137A (en) Optimized SEO page generation method and device, electronic 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
GR01 Patent grant
GR01 Patent grant