CN111159604A

CN111159604A - Picture resource loading method and device

Info

Publication number: CN111159604A
Application number: CN201911402685.1A
Authority: CN
Inventors: 杨浩为; 刘洋河; 楚著
Original assignee: Beijing Sankuai Online Technology Co Ltd
Current assignee: Beijing Sankuai Online Technology Co Ltd
Priority date: 2019-12-30
Filing date: 2019-12-30
Publication date: 2020-05-15

Abstract

The application discloses a picture resource loading method, a picture resource loading device, a terminal and a storage medium, and belongs to the technical field of networks. The method comprises the following steps: detecting a first webpage resource through a resource loader, wherein the first webpage resource is a webpage resource corresponding to a webpage to be displayed by a browser; if the resource loader detects that a first picture link exists in a first webpage resource and the browser supports displaying of a picture in a WebP format, replacing the first picture link in the first webpage resource with a second picture link to obtain a second webpage resource, wherein the first picture link refers to a picture link of a picture in a non-WebP format, and the second picture link refers to a picture link of a picture in a WebP format; and displaying the webpage corresponding to the second webpage resource through the browser according to the second webpage resource. According to the method and the device, the browser can load the WebP format picture by configuring the resource loader for the browser, and the browser is high in universality and has certain safety.

Description

Picture resource loading method and device

Technical Field

The present application relates to the field of network technologies, and in particular, to a method and an apparatus for loading picture resources.

Background

The WebP format is a picture format which is newly introduced at present and can provide lossy compression and lossless compression at the same time, the size of picture resources can be greatly reduced by using the WebP format, the traffic consumption for loading the picture resources is saved, and the webpage loading speed is increased. Based on these advantages of the WebP format, the current terminal is required to be able to load the picture resource in the WebP format.

In the related art, a method for loading picture resources based on a Domain Name System (DNS) server is provided, where the DNS server is a core server of the internet, and supports mapping of a Domain Name to an Internet Protocol (IP) address, so as to facilitate access to the internet according to the Domain Name. In the method, the service logic of the DNS server can be changed, so that when a picture resource loading request of a terminal is received, whether the terminal supports displaying the picture in the WebP format or not can be judged according to the request header information of the picture resource loading request, if the terminal supports displaying the picture in the WebP format, the address of the picture in the WebP format is redirected according to the address of the picture in the non-WebP format requested by the picture resource loading request to obtain the picture in the WebP format, and then the picture in the WebP format is returned to the terminal.

However, because the DNS server is a public server in the internet, and has the characteristics of high stability and low correlation with services, it is difficult to change and configure the DNS, and the implementation difficulty is high, and after the service logic of the DNS server is changed, the DNS may be hijacked and attacked easily, so that the DNS is easily loaded to wrong resources and malicious resources, which causes a security problem.

Disclosure of Invention

The embodiment of the application provides a picture resource loading method, a picture resource loading device, a terminal and a storage medium, which can be used for solving the problems that the configuration change of a DNS is difficult and the security is low when picture resources are loaded based on the DNS in the related technology. The technical scheme is as follows:

in one aspect, a method for loading picture resources is provided, where the method includes:

detecting a first webpage resource through a resource loader, wherein the first webpage resource is a webpage resource corresponding to a webpage to be displayed by a browser;

if the first picture link in the first webpage resource is detected to exist through the resource loader and the browser supports displaying of pictures in a WebP format, replacing the first picture link in the first webpage resource with a second picture link to obtain a second webpage resource, wherein the first picture link refers to a picture link of a picture in a non-WebP format, and the second picture link refers to a picture link of a picture in a WebP format;

and displaying a webpage corresponding to the second webpage resource through the browser according to the second webpage resource, wherein the webpage corresponding to the second webpage resource comprises a picture in a WebP format.

Optionally, the first picture link refers to a picture link that includes a first picture identifier, where the first picture identifier includes a first picture name and a first suffix name, the first picture name conforms to a first naming rule, the first suffix name is used to indicate a non-WebP format, and the first naming rule is used to indicate that a picture format needs to be replaced with a WebP format.

Optionally, the first picture name includes a WebP format replacement flag, and the WebP format replacement flag is used to indicate that the picture format needs to be replaced by the WebP format.

Optionally, the replacing the first picture link in the first webpage resource with a second picture link includes:

and modifying the first picture identifier included in the first picture link in the first webpage resource into a second picture identifier to obtain a second webpage resource, wherein the second picture identifier includes a second picture name and a second suffix name, the second picture name conforms to a second naming rule, the second suffix name is used for indicating a WebP format, and the second naming rule is used for indicating that the picture format is replaced by the WebP format.

Optionally, before replacing the first picture link in the first web resource with a second picture link, the method further includes:

acquiring a check picture in a WebP format through the resource loader;

displaying the verification picture through the browser;

and acquiring a display result of the verification picture through the resource loader, and if the display result indicates that the browser successfully displays the verification picture, determining that the browser supports displaying the picture in the WebP format.

Optionally, after the first web resource returned by the web server is acquired by the resource loader corresponding to the web server, the method further includes:

if it is determined that the first picture link does not exist in the first webpage resource and/or the browser does not support displaying pictures in a WebP format through the resource loader, displaying a webpage corresponding to the first webpage resource through the browser according to the first webpage resource, wherein the webpage corresponding to the first webpage resource does not include pictures in the WebP format.

Optionally, the resource loader is sent by the web server to the terminal when the browser first requests to load the web resource provided by the web server.

In one aspect, an apparatus for loading picture resources is provided, where the apparatus includes:

the detection module is used for detecting a first webpage resource through a resource loader, wherein the first webpage resource is a webpage resource corresponding to a webpage to be displayed by a browser;

a replacing module, configured to replace a first picture link in the first web resource with a second picture link to obtain a second web resource if it is detected that a first picture link exists in the first web resource and the browser supports displaying of a picture in a WebP format through the resource loader, where the first picture link is a picture link of a picture in a non-WebP format and the second picture link is a picture link of a picture in a WebP format;

and the display module is used for displaying a webpage corresponding to the second webpage resource through the browser according to the second webpage resource, wherein the webpage corresponding to the second webpage resource comprises a picture in a WebP format.

Optionally, the replacement module is configured to:

Optionally, the apparatus further comprises:

the acquisition module is used for acquiring the check picture in the WebP format through the resource loader;

the display module is used for displaying the verification picture through the browser;

and the determining module is used for acquiring a display result of the check picture through the resource loader, and if the display result indicates that the browser successfully displays the check picture, determining that the browser supports displaying the picture in the WebP format.

Optionally, the display module is further configured to:

In one aspect, a terminal is provided, which includes:

one or more processors;

one or more memories for storing the one or more processor-executable instructions;

wherein the one or more processors are configured to perform any of the above-described picture resource loading methods.

In one aspect, a non-transitory computer readable storage medium is provided, wherein instructions of the storage medium, when executed by a processor of a device, enable the device to perform any of the above-described picture resource loading methods.

In one aspect, a computer program product is provided, which when executed, is used to implement any one of the above-mentioned picture resource loading methods.

The technical scheme provided by the embodiment of the application has the following beneficial effects:

in the embodiment of the application, the browser can load the webpage resources through the resource loader, and in the loading process, the resource loader can replace the picture links of the non-WebP format pictures in the webpage resources with the picture links of the WebP format pictures for displaying of the browser when detecting that the browser supports the WebP format. In addition, the resource loader has the verification and anti-hijack capabilities, so that the safety problem is not easy to occur, and certain safety is achieved.

Drawings

In order to more clearly illustrate the technical solutions in the embodiments of the present application, the drawings needed to be used in the description of the embodiments are briefly introduced below, and it is obvious that the drawings in the following description are only 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 schematic illustration of an implementation environment to which embodiments of the present application relate;

fig. 2 is a flowchart of a method for loading web page resources according to an embodiment of the present application;

FIG. 3 is a flowchart of another method for loading web page resources according to an embodiment of the present application;

fig. 4 is a block diagram of a web resource loading apparatus according to an embodiment of the present application;

fig. 5 is a block diagram of a terminal according to an embodiment of the present disclosure.

Detailed Description

To make the objects, technical solutions and advantages of the present application more clear, embodiments of the present application will be described in further detail below with reference to the accompanying drawings.

Before explaining the embodiments of the present application in detail, an application scenario of the embodiments of the present application will be described.

Although the use of the WebP format can greatly reduce the size of the picture resource, save the traffic consumption for loading the picture resource, and increase the web page loading speed, because some browsers cannot fully support the WebP format at present, the pictures in the WebP format cannot be directly used, so that the WebP format cannot be directly and popularly used on all browsers even if the WebP format has the high-quality characteristics.

The method can manage webpage resources of a browser on the basis of a resource loader, if the browser supports a WebP format, picture links of non-WebP format pictures in the webpage resources are replaced by the picture links of the WebP format pictures through the resource loader and then transmitted to the browser to be displayed, and if the browser does not support the WebP format, the picture links are not replaced and are directly displayed by the browser. Therefore, the front-end developer can accurately, safely and flexibly use the pictures in the WebP format in all client browsers compatible with the WebP format only by accessing the resource loader in the project and configuring the use of the pictures in the WebP format.

Next, an implementation environment of the embodiment of the present application will be described.

Fig. 1 is a schematic diagram of an implementation environment related to an embodiment of the present application, and as shown in fig. 1, the implementation environment includes a terminal 10 and a web server 20, and the terminal 10 and the web server 20 may be connected through a wired or wireless network.

The terminal 10 is installed with a browser 11 and a resource loader 12, and the browser 11 is configured to send a web resource loading request to the web server 20. The resource loader 12 is configured to manage a web resource loaded by the browser 11, for example, detect a web resource returned by the web server 20, and if it is detected that a picture link of a non-WebP format picture exists in the web resource and the browser 11 supports a WebP format, replace the picture link of the non-WebP format picture in the web resource with a picture link of a WebP format picture, and transmit the picture link to the browser 11 for display.

Wherein the resource loader 12 is transmitted to the terminal 10 by the web server 20. As an example, the web server 20 may send the resource loader 12 to the terminal 10 when receiving a web resource loading request sent by the terminal 10 for the first time. As an example, the resource loader 12 corresponds to the web server 20 for processing web resources provided by the web server 20.

Next, a detailed description is given of a picture resource loading method provided in the embodiment of the present application.

Fig. 2 is a flowchart of a method for loading web page resources provided in an embodiment of the present application, where the method is applied to a terminal, and as shown in fig. 2, the method includes:

step 201: and detecting a first webpage resource through a resource loader, wherein the first webpage resource is a webpage resource corresponding to a webpage to be displayed by a browser.

The resource loader is used for managing the webpage resources of the browser on the terminal side, for example, taking over the webpage resources loaded by the browser, detecting and processing the webpage resources, and then transmitting the webpage resources to the browser for display. For example, the first web page resource may be a JS (JavaScript, a programming language) file, a CSS (Cascading Style Sheets) file, or the like.

Wherein the resource loader can be sent to the terminal by the web server. For example, before the terminal detects the first web resource through the resource loader, the resource loader sent by the web server may be received. For example, the terminal may send a web resource loading request to the web server through the browser, and the web server returns the first web resource and the resource loader to the terminal based on the web resource loading request after receiving the web resource loading request.

In some embodiments, the resource loader may be sent by the web server to the terminal when the browser first requests to load the web resource provided by the web server, and after receiving the resource loader, the terminal may manage the web resource of the browser by using the resource loader.

In other embodiments, the resource loader may also be sent by the web server to the terminal when the web server first requests to load the web resource provided by the web server after the browser is opened. That is, when the browser requests the web page server to load the web page resource for the first time after being opened, the resource loader returned by the web page server may be received, and then the web page resource of the browser may be managed by using the resource loader. In addition, after the browser is closed, the browser can delete the resource loader so as to save storage resources.

As an example, the resource loader corresponds to the web server and is configured to manage web resources returned by the web server. For example, the web server is a background server of the target website, and the resource loader may be developed by a developer of the target website and is used to manage the web resources returned by the web server.

During development, a front-end developer of a target website can access the resource loader in a project of the front-end developer, and specified webpage resources are uniformly managed by the resource loader, so that when the project runs, a browser of a terminal can load and manage the webpage resources through the resource loader. For example, the picture links that want to use the WebP format are identified according to the convention rules.

As an example, before the first web resource is detected by the resource loader, a web resource loading request may be sent to the web server through the browser, and then the first web resource returned by the web server based on the web resource loading request may be received.

In the embodiment of the application, the first webpage resource is detected through the resource loader, so as to detect whether a first picture link exists in the first webpage resource, wherein the first picture link refers to a picture link of a non-WebP format picture.

As an example, the first picture link refers to a picture link including a first picture identification. The first picture identification comprises a first picture name and a first suffix name, the first picture name conforms to a first naming rule, and the first suffix name is used for indicating a non-WebP format. The first naming rule is used to indicate that the picture format needs to be replaced with a WebP format. That is, for a picture that needs to be replaced by the WebP format, the picture name of the picture may be named according to the first naming rule.

As an example, the first naming convention can be to include a WebP format replacement token, i.e., the first picture name includes a WebP format replacement token, the WebP format replacement token to indicate that the picture format needs to be replaced with a WebP format. For example, for a picture that needs to be replaced by a WebP format, the picture id may be xxx @ WebP. Wherein xxx @ WebP is a picture name, and @ WebP is a WebP format replacement mark in the picture name, indicating that the picture format needs to be replaced by a WebP format; png is a suffix name, indicating png format.

Illustratively, the first picture link is background: url ('// abc.com/pic @ webp.png'), wherein the first picture link has a first picture identification pic @ webp.png.

As an example, detecting, by the resource loader, the first web page resource includes: detecting whether a picture link of which the picture format is a non-WebP format and needs to be replaced by a picture in a WebP format exists in the first webpage resource, and if the picture link of which the picture format is the non-WebP format and needs to be replaced by the picture in the WebP format exists in the first webpage resource through the resource loader, determining that the first picture link exists in the first webpage resource.

As an example, the operation of detecting whether there is a picture link in the first web page resource, where the picture format is a non-WebP format and needs to be replaced by a picture in the WebP format, includes: detecting whether a picture link comprising a first picture identifier exists in the first webpage resource, and if the picture link comprising the first picture identifier exists in the first webpage resource through the resource loader, determining that the picture link which is in a non-WebP format and needs to be replaced by a picture in a WebP format exists in the first webpage resource.

Besides detecting the first webpage resource through the resource loader, the browser can also be detected through the resource loader so as to detect whether the browser supports displaying the picture in the WebP format.

As an example, detecting, by the resource loader, the first web page resource includes: acquiring a check picture in a WebP format through a resource loader; displaying the check picture through a browser; and acquiring a display result of the check picture through the resource loader, and if the display result indicates that the browser successfully displays the check picture, determining that the browser supports displaying the picture in the WebP format.

As an example, when the browser displays the verification picture, if the verification picture is successfully displayed, the display success prompt message may be generated, and if the verification picture is not generated, the display error prompt message may be generated. If the prompt information of successful display of the browser is received through the resource loader, it can be determined that the browser supports displaying the pictures in the WebP format, and if the prompt information of display error of the browser is received through the resource loader, it can be determined that the browser does not support displaying the pictures in the WebP format.

By detecting the browser in the mode, the support condition of the browser to the WebP format can be accurately judged, and the accuracy is high.

It should be noted that, in this embodiment of the present application, the first web resource may be detected first, and then the browser may be detected, or the browser may be detected first, and then the first web resource may be detected, and of course, both may also be detected at the same time, which is not limited in this embodiment of the present application.

As one example, before the first web page resource is detected by the resource loader, the compatibility of the browser is detected by the resource loader. And if the browser supports displaying the picture in the WebP format, detecting the first webpage resource. And if the browser does not support the display of the pictures in the WebP format, the first webpage resource is not detected any more, but the webpage corresponding to the first webpage resource is displayed through the browser directly on the basis of the first webpage resource.

As another example, the first web resource is detected by the resource loader, and if it is detected that the first image link exists in the first web resource, the browser is detected. If it is detected that the first picture link does not exist in the first webpage resource, the browser is not detected any more, and the webpage corresponding to the first webpage resource is displayed through the browser directly on the basis of the first webpage resource.

Step 202: if the first picture link in the first webpage resource is detected to exist through the resource loader and the browser supports displaying of the pictures in the WebP format, the first picture link in the first webpage resource is replaced by the second picture link to obtain the second webpage resource.

The first picture link refers to a picture link of a non-WebP format picture, and the second picture link refers to a picture link of a WebP format picture. That is, the picture link of the non-WebP format picture in the first web page resource may be replaced with the picture link of the WebP format picture by the resource loader.

As an example, the second picture link refers to a picture link including a second picture identifier, the second picture identifier including a second picture name and a second suffix name, the second picture name conforming to a second naming convention, the second suffix name indicating a WebP format, the second naming convention indicating that the picture format has been replaced with the WebP format.

As an example, if the first picture link refers to a picture link including a first picture identifier, the operation of replacing the first picture link in the first webpage resource with the second picture link may be: and modifying the first picture identifier included in the first picture link in the first webpage resource into a second picture identifier to obtain a second webpage resource.

As one example, the second naming convention can be a picture name that does not include a WebP format replacement token. For example, the first picture id may be xxx @ webp.png, and the second picture id may be xxx. Wherein xxx is the picture name without the WebP format substitution mark, and WebP is the suffix name, which represents the WebP format.

For example, assume that the first picture link is background: url ('// abc.com/pic @ webp.png'), where the first picture link has a first picture identification pic @ webp.png. The resource loader can modify the first picture identifier pic @ webpng in the first picture link into a second picture identifier pic.

After the resource loader replaces the first picture link in the first webpage resource with the second picture link to obtain the second webpage resource, the second webpage resource can be sent to the browser, and the browser loads and executes the second webpage resource to display a webpage corresponding to the second webpage resource.

Step 203: and displaying a webpage corresponding to the second webpage resource through the browser according to the second webpage resource, wherein the webpage corresponding to the second webpage resource comprises a picture in a WebP format.

As an example, the second web resource may be loaded and executed by a browser, so as to display a web page corresponding to the second web resource.

Step 204: if the first picture link does not exist in the first webpage resource and/or the browser does not support displaying the picture in the WebP format, a webpage corresponding to the first webpage resource is displayed through the browser according to the first webpage resource, wherein the webpage corresponding to the first webpage resource does not include the picture in the WebP format.

When the resource loader detects that the first webpage resource does not have the first picture link and/or the browser does not support displaying the pictures in the WebP format, the first webpage resource can be directly sent to the browser, and the browser loads and executes the first webpage resource to display the webpage corresponding to the first webpage resource.

As an example, when a project is developed, a front-end developer may access a resource loader and name a picture that needs to be replaced by a WebP format in a code of a web page resource according to a first naming rule. When the project runs, the resource loader can detect the webpage resources after acquiring the webpage resources returned by the webpage server to detect whether a first picture link exists in the webpage resources and detect the browser to detect whether the browser supports the WebP format, if the first picture link exists in the webpage resources and the browser supports the WebP format, the first picture link in the webpage resources is replaced by a second picture link, the replaced webpage resources are sent to the browser to be displayed, and if the first picture link does not exist in the webpage resources and/or the browser does not support the WebP format, the webpage resources are directly sent to the browser to be displayed.

In the embodiment of the application, the browser can load the webpage resources through the resource loader, and in the loading process, the resource loader can replace the picture links of the non-WebP format pictures in the webpage resources with the picture links of the WebP format pictures for displaying of the browser when detecting that the browser supports the WebP format. In addition, the resource loader has the verification and anti-hijack capabilities, so that the safety problem is not easy to occur, and certain safety is achieved. In addition, the method is easy to access the front-end project of the existing service, completely independent of the terminal, and suitable for all browsers. In addition, only the name of the picture with the format needing to be adjusted needs to be appointed during access, the change is small, the granularity is fine, and the flexibility and the configurability of each picture file are guaranteed.

Fig. 3 is a flowchart of another method for loading web page resources according to an embodiment of the present application, and as shown in fig. 3, the method includes the following steps:

1, the browser of the terminal starts to request the webpage resource.

That is, the browser of the terminal sends a web resource loading request to the web server. As an example, the resource loader may take over resource loading service of the browser, that is, the browser may send a web page resource loading request to the web page server through the resource loader.

And 2, the webpage server returns webpage resources to the terminal based on the request of the terminal.

And 3, the resource loader of the terminal acquires the webpage resources returned by the webpage server.

And 4, judging whether the first picture link exists in the webpage resource by the resource loader of the terminal.

If yes, jumping to the step 5; if not, jumping to step 7.

And 5, the resource loader judges whether the browser supports displaying the pictures in the WebP format.

If yes, jumping to step 6, and if not, jumping to step 7.

And 6, the resource loader replaces the first picture link in the webpage resource with a second picture link and returns the replaced webpage resource to the browser.

And 7, the resource loader directly returns the webpage resources to the browser.

And 8, loading and executing the webpage resources returned by the resource loader by the browser.

And 9, ending.

Fig. 4 is a block diagram of a web resource loading apparatus according to an embodiment of the present application, and as shown in fig. 4, the apparatus includes a detection module 401, a replacement module 402, and a display module 403.

The detection module 401 is configured to detect, by a resource loader, a first web resource, where the first web resource is a web resource corresponding to a web page to be displayed by a browser;

a replacing module 402, configured to, if it is detected that a first picture link exists in the first web resource through the resource loader and the browser supports displaying of a picture in a WebP format, replace the first picture link in the first web resource with a second picture link to obtain a second web resource, where the first picture link is a picture link of a picture in a non-WebP format and the second picture link is a picture link of a picture in a WebP format;

a display module 403, configured to display, according to the second web resource, a web page corresponding to the second web resource through the browser, where the web page corresponding to the second web resource includes a picture in a WebP format.

Optionally, the replacing module 402 is configured to:

Optionally, the apparatus further comprises:

an obtaining module 404, configured to obtain, by the resource loader, a verification picture in a WebP format;

the display module 403 is configured to display the verification picture through the browser;

a determining module 405, configured to obtain a display result of the verification picture through the resource loader, and if the display result indicates that the browser successfully displays the verification picture, determine that the browser supports displaying a picture in a WebP format.

Optionally, the display module 403 is further configured to:

It should be noted that: in the above-described embodiment, when loading the picture resource, the picture resource loading apparatus is described by way of example only by dividing the functional modules, and in practical applications, the function allocation may be completed by different functional modules according to needs, that is, the internal structure of the apparatus is divided into different functional modules, so as to complete all or part of the functions described above. In addition, the picture resource loading device and the picture resource loading method provided by the above embodiments belong to the same concept, and specific implementation processes thereof are detailed in the method embodiments and are not described herein again.

Fig. 5 is a block diagram of a terminal 500 according to an embodiment of the present disclosure. The terminal 500 may be: a smart phone, a tablet computer, an MP3 player (Moving Picture Experts Group Audio Layer III, motion video Experts compression standard Audio Layer 3), an MP4 player (Moving Picture Experts Group Audio Layer IV, motion video Experts compression standard Audio Layer 4), a notebook computer, or a desktop computer. Terminal 500 may also be referred to by other names such as user equipment, portable terminal, laptop terminal, desktop terminal, and the like.

In general, the terminal 500 includes: a processor 501 and a memory 502.

The processor 501 may include one or more processing cores, such as a 4-core processor, an 8-core processor, and so on. The processor 501 may be implemented in at least one hardware form of a DSP (Digital Signal Processing), an FPGA (Field-Programmable Gate Array), and a PLA (Programmable Logic Array). The processor 501 may also include a main processor and a coprocessor, where the main processor is a processor for processing data in an awake state, and is also called a Central Processing Unit (CPU); a coprocessor is a low power processor for processing data in a standby state. In some embodiments, the processor 501 may be integrated with a GPU (Graphics Processing Unit), which is responsible for rendering and drawing the content required to be displayed on the display screen. In some embodiments, processor 501 may also include an AI (Artificial Intelligence) processor for processing computational operations related to machine learning.

Memory 502 may include one or more computer-readable storage media, which may be non-transitory. Memory 502 may also include high-speed random access memory, as well as non-volatile memory, such as one or more magnetic disk storage devices, flash memory storage devices. In some embodiments, a non-transitory computer readable storage medium in memory 502 is used to store at least one instruction for execution by processor 501 to implement the picture resource loading method provided by method embodiments herein.

In some embodiments, the terminal 500 may further optionally include: a peripheral interface 503 and at least one peripheral. The processor 501, memory 502 and peripheral interface 503 may be connected by a bus or signal lines. Each peripheral may be connected to the peripheral interface 503 by a bus, signal line, or circuit board. Specifically, the peripheral device includes: at least one of radio frequency circuitry 504, touch screen display 505, camera 506, audio circuitry 507, positioning components 508, and power supply 509.

The peripheral interface 503 may be used to connect at least one peripheral related to I/O (Input/Output) to the processor 501 and the memory 502. In some embodiments, the processor 501, memory 502, and peripheral interface 503 are integrated on the same chip or circuit board; in some other embodiments, any one or two of the processor 501, the memory 502, and the peripheral interface 503 may be implemented on a separate chip or circuit board, which is not limited in this embodiment.

The Radio Frequency circuit 504 is used for receiving and transmitting RF (Radio Frequency) signals, also called electromagnetic signals. The radio frequency circuitry 504 communicates with communication networks and other communication devices via electromagnetic signals. The rf circuit 504 converts an electrical signal into an electromagnetic signal to transmit, or converts a received electromagnetic signal into an electrical signal. Optionally, the radio frequency circuit 504 includes: an antenna system, an RF transceiver, one or more amplifiers, a tuner, an oscillator, a digital signal processor, a codec chipset, a subscriber identity module card, and so forth. The radio frequency circuitry 504 may communicate with other terminals via at least one wireless communication protocol. The wireless communication protocols include, but are not limited to: metropolitan area networks, various generation mobile communication networks (2G, 3G, 4G, and 5G), Wireless local area networks, and/or WiFi (Wireless Fidelity) networks. In some embodiments, the rf circuit 504 may further include NFC (Near Field Communication) related circuits, which are not limited in this application.

The display screen 505 is used to display a UI (User Interface). The UI may include graphics, text, icons, video, and any combination thereof. When the display screen 505 is a touch display screen, the display screen 505 also has the ability to capture touch signals on or over the surface of the display screen 505. The touch signal may be input to the processor 501 as a control signal for processing. At this point, the display screen 505 may also be used to provide virtual buttons and/or a virtual keyboard, also referred to as soft buttons and/or a soft keyboard. In some embodiments, the display screen 505 may be one, providing the front panel of the terminal 500; in other embodiments, the display screens 505 may be at least two, respectively disposed on different surfaces of the terminal 500 or in a folded design; in still other embodiments, the display 505 may be a flexible display disposed on a curved surface or on a folded surface of the terminal 500. Even more, the display screen 505 can be arranged in a non-rectangular irregular figure, i.e. a shaped screen. The Display screen 505 may be made of LCD (liquid crystal Display), OLED (Organic Light-Emitting Diode), and the like.

The camera assembly 506 is used to capture images or video. Optionally, camera assembly 506 includes a front camera and a rear camera. Generally, a front camera is disposed at a front panel of the terminal, and a rear camera is disposed at a rear surface of the terminal. In some embodiments, the number of the rear cameras is at least two, and each rear camera is any one of a main camera, a depth-of-field camera, a wide-angle camera and a telephoto camera, so that the main camera and the depth-of-field camera are fused to realize a background blurring function, and the main camera and the wide-angle camera are fused to realize panoramic shooting and VR (Virtual Reality) shooting functions or other fusion shooting functions. In some embodiments, camera assembly 506 may also include a flash. The flash lamp can be a monochrome temperature flash lamp or a bicolor temperature flash lamp. The double-color-temperature flash lamp is a combination of a warm-light flash lamp and a cold-light flash lamp, and can be used for light compensation at different color temperatures.

Audio circuitry 507 may include a microphone and a speaker. The microphone is used for collecting sound waves of a user and the environment, converting the sound waves into electric signals, and inputting the electric signals to the processor 501 for processing, or inputting the electric signals to the radio frequency circuit 504 to realize voice communication. For the purpose of stereo sound collection or noise reduction, a plurality of microphones may be provided at different portions of the terminal 500. The microphone may also be an array microphone or an omni-directional pick-up microphone. The speaker is used to convert electrical signals from the processor 501 or the radio frequency circuit 504 into sound waves. The loudspeaker can be a traditional film loudspeaker or a piezoelectric ceramic loudspeaker. When the speaker is a piezoelectric ceramic speaker, the speaker can be used for purposes such as converting an electric signal into a sound wave audible to a human being, or converting an electric signal into a sound wave inaudible to a human being to measure a distance. In some embodiments, audio circuitry 507 may also include a headphone jack.

The positioning component 508 is used to locate the current geographic position of the terminal 500 for navigation or LBS (location based Service). The positioning component 508 may be a positioning component based on the GPS (global positioning System) in the united states, the beidou System in china, the graves System in russia, or the galileo System in the european union.

Power supply 509 is used to power the various components in terminal 500. The power source 509 may be alternating current, direct current, disposable or rechargeable. When power supply 509 includes a rechargeable battery, the rechargeable battery may support wired or wireless charging. The rechargeable battery may also be used to support fast charge technology.

In some embodiments, terminal 500 also includes one or more sensors 510. The one or more sensors 510 include, but are not limited to: acceleration sensor 511, gyro sensor 512, pressure sensor 513, fingerprint sensor 514, optical sensor 515, and proximity sensor 516.

The acceleration sensor 511 may detect the magnitude of acceleration on three coordinate axes of the coordinate system established with the terminal 500. For example, the acceleration sensor 511 may be used to detect components of the gravitational acceleration in three coordinate axes. The processor 501 may control the touch screen 505 to display the user interface in a landscape view or a portrait view according to the gravitational acceleration signal collected by the acceleration sensor 511. The acceleration sensor 511 may also be used for acquisition of motion data of a game or a user.

The gyro sensor 512 may detect a body direction and a rotation angle of the terminal 500, and the gyro sensor 512 may cooperate with the acceleration sensor 511 to acquire a 3D motion of the user on the terminal 500. The processor 501 may implement the following functions according to the data collected by the gyro sensor 512: motion sensing (such as changing the UI according to a user's tilting operation), image stabilization at the time of photographing, game control, and inertial navigation.

The pressure sensor 513 may be disposed on a side bezel of the terminal 500 and/or an underlying layer of the touch display screen 505. When the pressure sensor 513 is disposed on the side frame of the terminal 500, a user's holding signal of the terminal 500 may be detected, and the processor 501 performs left-right hand recognition or shortcut operation according to the holding signal collected by the pressure sensor 513. When the pressure sensor 513 is disposed at the lower layer of the touch display screen 505, the processor 501 controls the operability control on the UI interface according to the pressure operation of the user on the touch display screen 505. The operability control comprises at least one of a button control, a scroll bar control, an icon control and a menu control.

The fingerprint sensor 514 is used for collecting a fingerprint of the user, and the processor 501 identifies the identity of the user according to the fingerprint collected by the fingerprint sensor 514, or the fingerprint sensor 514 identifies the identity of the user according to the collected fingerprint. Upon recognizing that the user's identity is a trusted identity, the processor 501 authorizes the user to perform relevant sensitive operations including unlocking the screen, viewing encrypted information, downloading software, paying, and changing settings, etc. The fingerprint sensor 514 may be provided on the front, back, or side of the terminal 500. When a physical button or a vendor Logo is provided on the terminal 500, the fingerprint sensor 514 may be integrated with the physical button or the vendor Logo.

The optical sensor 515 is used to collect the ambient light intensity. In one embodiment, the processor 501 may control the display brightness of the touch display screen 505 based on the ambient light intensity collected by the optical sensor 515. Specifically, when the ambient light intensity is high, the display brightness of the touch display screen 505 is increased; when the ambient light intensity is low, the display brightness of the touch display screen 505 is turned down. In another embodiment, processor 501 may also dynamically adjust the shooting parameters of camera head assembly 506 based on the ambient light intensity collected by optical sensor 515.

A proximity sensor 516, also referred to as a distance sensor, is typically disposed on the front panel of the terminal 500. The proximity sensor 516 is used to collect the distance between the user and the front surface of the terminal 500. In one embodiment, when the proximity sensor 516 detects that the distance between the user and the front surface of the terminal 500 gradually decreases, the processor 501 controls the touch display screen 505 to switch from the bright screen state to the dark screen state; when the proximity sensor 516 detects that the distance between the user and the front surface of the terminal 500 becomes gradually larger, the processor 501 controls the touch display screen 505 to switch from the screen-rest state to the screen-on state.

Those skilled in the art will appreciate that the configuration shown in fig. 5 is not intended to be limiting of terminal 500 and may include more or fewer components than those shown, or some components may be combined, or a different arrangement of components may be used.

In an exemplary embodiment, a computer-readable storage medium is further provided, which stores instructions that when executed by a processor implement the above-mentioned picture resource loading method.

In an exemplary embodiment, a computer program product is also provided, which, when executed, is configured to implement the above-mentioned picture resource loading method.

It should be understood that reference to "a plurality" herein means two or more. "and/or" describes the association relationship of the associated objects, meaning that there may be three relationships, e.g., a and/or B, which may mean: a exists alone, A and B exist simultaneously, and B exists alone. The character "/" generally indicates that the former and latter associated objects are in an "or" relationship.

It will be understood by those skilled in the art that all or part of the steps for implementing the above embodiments may be implemented by hardware, or may be implemented by a program instructing relevant hardware, where the program may be stored in a computer-readable storage medium, and the above-mentioned storage medium may be a read-only memory, a magnetic disk or an optical disk, etc.

The above description is only exemplary of the present application and should not be taken as limiting, as any modification, equivalent replacement, or improvement made within the spirit and principle of the present application should be included in the protection scope of the present application.

Claims

1. A picture resource loading method is characterized by comprising the following steps:

2. The method according to claim 1, wherein the first picture link refers to a picture link including a first picture identifier, the first picture identifier includes a first picture name and a first suffix name, the first picture name conforms to a first naming rule, the first suffix name is used for indicating a non-WebP format, and the first naming rule is used for indicating that a picture format needs to be replaced by a WebP format.

3. The method of claim 2, wherein the first picture name comprises a WebP format replacement token, and wherein the WebP format replacement token is used to indicate that a picture format needs to be replaced by a WebP format.

4. The method of claim 2 or 3, wherein replacing the first picture link in the first webpage resource with a second picture link comprises:

5. The method of claim 1, wherein before replacing the first picture link in the first web page resource with a second picture link, further comprising:

acquiring a check picture in a WebP format through the resource loader;

displaying the verification picture through the browser;

6. The method according to claim 1, wherein after the acquiring, by the resource loader corresponding to the web server, the first web resource returned by the web server, further comprises:

7. The method according to claim 1, wherein the resource loader is sent by the web server to the terminal when the browser first requests to load the web resource provided by the web server.

8. An apparatus for loading picture resources, the apparatus comprising:

9. A terminal, characterized in that the terminal comprises:

one or more processors;

wherein the one or more processors are configured to perform the picture resource loading method of any one of claims 1-7.

10. A non-transitory computer readable storage medium, wherein instructions in the storage medium, when executed by a processor of a device, enable the device to perform the picture resource loading method of any one of claims 1-7.