WO2018137470A1

WO2018137470A1 - User terminal and webpage image resource loading device and method, storage medium

Info

Publication number: WO2018137470A1
Application number: PCT/CN2017/120265
Authority: WO
Inventors: 吴伟勇
Original assignee: 广州市动景计算机科技有限公司
Priority date: 2017-01-25
Filing date: 2017-12-29
Publication date: 2018-08-02
Also published as: CN108280101A

Abstract

The present invention relates to the field of browser technologies. Disclosed are a user terminal and a webpage image resource loading device and method. In an imageless browsing mode, the user terminal and the webpage image resource loading device and method perform page parsing on acquired webpage data so as to generate a DOM tree (S501); traversing and detecting whether a DOM tree node in the DOM tree includes an externally-linked image resource requiring loading; determining, according to whether the DOM tree node includes an externally-linked image resource requiring loading, a loading rule for the externally-linked image resource (S502), thereby disabling the blocking of a part of functional portals (clickable links) having webpages using background images to realize visual effects, and webpages using map/area mechanism image resources, so as to enable the user to use normally related functions of the image resources, thus enhancing user experience.

Description

User terminal and webpage picture resource loading device and method, and storage medium

Cross reference

The present application claims the following priority: Application No.: 201710061038.3, filed on January 25, 2017, entitled: "User Terminal and Web Page Picture Resource Loading Apparatus and Method" Chinese Patent, the entire contents of which are hereby incorporated by reference. .

Technical field

The present application relates to the field of browser technologies, and in particular, to a user terminal and a webpage picture resource loading apparatus and method, and a storage medium.

Background technique

Mobile browsers are the primary tool for mobile terminal (smartphone/tablet) users to browse mobile Internet web pages. Since the main network access method is a wireless carrier network, how to reduce the user's wireless carrier network traffic (especially the domestic wireless carrier network traffic costs are at a high level), is a mobile browser needs to focus on the function implementation. The proposition of concern. The main traffic consumption of mobile Internet web pages is multimedia resources such as pictures/video/audio.

The mainstream mobile browsers in the prior art all provide a graphless mode function, which provides an optional way to effectively reduce traffic for users who are sensitive to wireless carrier network traffic. However, the current imageless mode of the mobile browser is relatively rough, which directly blocks all the outbound image resources on the webpage to be loaded. Of course, this implementation can maximize the effect of reducing image traffic. However, in some scenarios, the functionality of the web page itself may be missing. For example, through the comparison of the graph/no graph modes of different web pages, there are mainly two scenarios, and the no graph mode brings a certain negative experience. 1. There are some function entries (clickable links) on the webpage to use the background image to reflect the visual effects. In the no-picture mode, these function entries are not visually visible, and the user cannot use the related functions normally (such as the switching of the function pages of the site). 2. The map/area mechanism based on image resources is used on the webpage, and different click areas are defined on the image. In the no image mode, since the images are blocked, these clickable areas are invisible to the user, which also causes the user to fail. Basic use of related functions.

Application content

The purpose of the present application is to provide a user terminal and a webpage picture resource loading apparatus and method to improve the above problems.

In order to achieve the above object, the technical solution adopted by the embodiment of the present application is as follows:

In a first aspect, the embodiment of the present application provides a webpage image resource loading device, where the webpage image resource loading device includes:

a page parsing unit, configured to perform page parsing on the acquired webpage data to generate a DOM tree in the no-image browsing mode;

a detecting unit, configured to traverse and detect whether the DOM tree node in the DOM tree includes an out-of-picture resource that needs to be loaded;

And a picture resource loading unit, configured to determine a loading rule of the out-of-picture resource according to whether the DOM tree node includes an out-of-picture resource to be loaded.

In a second aspect, the embodiment of the present application provides a webpage image resource loading method, where the webpage image resource loading method includes:

In the no-view browsing mode, page analysis is performed on the obtained webpage data to generate a DOM tree;

Traversing and detecting whether the DOM tree node in the DOM tree includes an out-of-picture resource that needs to be loaded;

The loading rule of the out-of-picture resource is determined according to whether the DOM tree node includes an out-of-picture resource to be loaded.

In a third aspect, the embodiment of the present application further provides a user terminal, where the user terminal includes:

Memory

Processor; and

a webpage image resource loading device, the device being installed in the memory and comprising one or more software function modules executed by the processor, the webpage image resource loading device comprising:

In a fourth aspect, the embodiment of the present application further provides a computer readable storage medium carrying one or more computer instruction programs, where the computer instruction program is executed by one or more processors, the one or more processes The method for loading a webpage image resource according to the second aspect is performed. The user terminal and the webpage image resource loading apparatus and method and the storage medium provided by the embodiment of the present invention perform page parsing on the acquired webpage data to generate a DOM tree in the graphless browsing mode; traverse and detect the DOM tree. Whether the DOM tree node in the network includes an out-of-picture resource to be loaded; determining, according to whether the DOM tree node includes an out-of-picture resource to be loaded, determining a loading rule of the out-of-picture resource, so that the background is not blocked. The image function of the webpage that reflects the visual effect (clickable link) and the image resource of the webpage using the map/area mechanism enable the user to use the image resource to use the related function, thereby improving the user experience.

In a fifth aspect, the embodiment of the present application further provides a method for loading a webpage image resource, including:

In the no-image browsing mode, page analysis is performed on the obtained webpage data to generate a DOM tree node;

Detecting whether the DOM tree node includes an out-of-picture resource;

If the DOM tree node includes an out-of-picture resource, determine whether the out-of-picture resource meets the loading rule, and if yes, load and display the out-of-picture resource.

In a sixth aspect, the embodiment of the present application further provides a webpage image resource loading device, including:

a page parsing unit, configured to perform page parsing on the acquired webpage data to generate a DOM tree node in the no-image browsing mode;

a detecting unit, configured to detect whether the DOM tree node includes an out-of-picture resource;

a picture resource loading unit, if the DOM tree node includes an out-of-picture resource, the picture resource loading unit is configured to determine whether the out-of-picture resource meets a loading rule, and if yes, load and display the out-of-picture resource.

In a seventh aspect, the embodiment of the present application further provides a user terminal, including:

One or more processors;

Memory

One or more applications, wherein the one or more applications are stored in the memory and configured to be executed by the one or more processors, the one or more programs configured to:

Detecting whether the DOM tree node includes an out-of-picture resource;

In an eighth aspect, the embodiment of the present application further provides a computer readable storage medium carrying one or more computer instruction programs, where the computer instruction program is executed by one or more processors, the one or more The processor executes the webpage image resource loading method described in the fifth aspect.

The user terminal and the webpage image resource loading apparatus and method and the storage medium provided by the embodiment of the present invention perform page analysis on the obtained webpage data to generate a DOM tree node in the graphless browsing mode; and detect whether the DOM tree node is Include an out-of-picture resource; if the DOM tree node includes an out-of-picture resource, determine whether the out-of-picture resource meets a loading rule, and if yes, load and display the out-of-picture resource, so that the background is not blocked. The image function of the webpage that reflects the visual effect (clickable link) and the image resource of the webpage using the map/area mechanism enable the user to use the image resource to use the related function, thereby improving the user experience.

The above described objects, features, and advantages of the present invention will become more apparent from the following description.

DRAWINGS

In order to more clearly illustrate the technical solutions of the embodiments of the present application, the drawings to be used in the embodiments will be briefly described below. It should be understood that the following drawings show only certain embodiments of the present application, and therefore It should be seen as a limitation on the scope, and those skilled in the art can obtain other related drawings according to these drawings without any creative work.

FIG. 1 is a schematic diagram of an application environment of a user terminal and a webpage picture resource loading apparatus and method according to a first embodiment of the present application;

FIG. 2 is a structural block diagram of a processing manner of web page rendering provided by the second embodiment of the present application;

FIG. 3 is a structural block diagram of a user terminal according to a third embodiment of the present application;

FIG. 4 is a schematic diagram showing a display state of a webpage page according to a fourth embodiment of the present application;

FIG. 5 is a functional block diagram of a webpage image resource loading apparatus according to a fifth embodiment of the present application;

FIG. 6 is a flowchart of a method for loading a webpage picture resource according to a sixth embodiment of the present application.

Icon; 100-user terminal; 200-server; 300-network; 401-page parsing unit; 402-detecting unit; 403-picture resource loading unit; 404-judgement unit; 405-web page display unit; 406-outline picture resource 101-web page picture resource loading device; 102-memory; 103-storage controller; 104-processor; 105-peripheral interface; 106-radio module; 107-audio module; 108-touch screen.

detailed description

The technical solutions in the embodiments of the present application are clearly and completely described in the following with reference to the drawings in the embodiments of the present application. It is obvious that the described embodiments are only a part of the embodiments of the present application, and not all of the embodiments. The components of the embodiments of the present application, which are generally described and illustrated in the figures herein, may be arranged and designed in various different configurations. The detailed description of the embodiments of the present application, which is set forth in the claims All other embodiments obtained by a person skilled in the art based on the embodiments of the present application without creative efforts are within the scope of the present application.

It should be noted that similar reference numerals and letters indicate similar items in the following figures, and therefore, once an item is defined in a drawing, it is not necessary to further define and explain it in the subsequent drawings. Also, in the description of the present application, the terms "first", "second", and the like are used merely to distinguish a description, and are not to be construed as indicating or implying a relative importance.

The user terminal and webpage picture resource loading apparatus and method provided by the first embodiment of the present application can be applied to an application environment as shown in FIG. 1. As shown in FIG. 1, the user terminal 100 and the server 200 are located in the network 300. Through the network 300, the user terminal 100 performs data interaction with the server 200. In the embodiment of the present application, at least one application (Application, APP) is installed in the user terminal 100, and corresponds to the server 200 to provide services for the user.

2 is a structural block diagram of a processing manner of webpage page rendering provided by the second embodiment of the present application. As shown in FIG. 2, when a user inputs a webpage loading instruction through an application (for example, a browser), a specific webpage loading manner is shown. As follows: the application looks up the IP address of the domain name, sends an HTTP request to the server 200, the server 200 sends a permanent redirect response, the application tracks the redirected address, the server 200 "processes" the request, and sends back an HTML response, the user terminal 100 After the installed application receives the HTML response, it starts loading the web resources and renders and displays the web resources. The rendering method of the webpage resource is as shown in FIG. 2. Specifically, the first step is to input the loaded webpage resource into the HTML interpreter, and the HTML interpreter constructs a DOM tree after interpreting the webpage resource, and if the javascript code is encountered during this period, Handed over to the javascript engine for processing; if the web resource contains CSS, it is passed to the CSS interpreter for interpretation. When the DOM tree is built, the rendering engine interprets the style information from the CSS interpreter and builds a new internal drawing model. The model calculates the position and size information of each element in the model by the layout module, and finally draws the image from the model to the image by the drawing module, so that the webpage resource is rendered and displayed on the webpage of the user terminal 100.

In the embodiment of the present application, the user terminal 100 is preferably a mobile terminal device, and may include, for example, a smart phone, a tablet computer, an e-book reader, a laptop portable computer, a vehicle-mounted computer, a wearable mobile terminal, and the like.

FIG. 3 shows a structural block diagram of a user terminal applicable to the third embodiment of the present application. As shown in FIG. 3, the user terminal 100 includes a webpage image resource loading device 101, a memory 102, a memory controller 103, one or more (only one shown) processor 104, a peripheral interface 105, a radio frequency module 106, The audio module 107, the touch screen 108, and the like. These components communicate with one another via one or more communication bus/signal lines 116. The web page image resource loading device 101 includes at least one software function module that can be stored in the memory 102 or in an operating system (OS) of the user terminal 100 in the form of software or firmware.

The memory 102 can be used to store software programs and modules, such as program instructions/modules corresponding to the image processing devices and methods in the embodiments of the present application. The processor 104 executes various programs by running software programs and modules stored in the memory 102. The function application and data processing, such as the webpage image resource loading method provided by the embodiment of the present application.

Memory 102 can include high speed random access memory and can also include non-volatile memory, such as one or more magnetic storage devices, flash memory, or other non-volatile solid state memory. Access to the memory 102 by the processor 104 and other possible components can be performed under the control of the memory controller 103.

Peripheral interface 105 couples various input/output devices to processor 104 and memory 102. In some embodiments, peripheral interface 105, processor 104, and memory controller 103 can be implemented in a single chip. In other instances, they can be implemented by separate chips.

The radio frequency module 106 is configured to receive and transmit electromagnetic waves, and realize mutual conversion between electromagnetic waves and electric signals, thereby communicating with a communication network or other devices.

The audio module 107 provides an audio interface to the user, which may include one or more microphones, one or more speakers, and audio circuitry.

The touch screen 108 provides an output and input interface simultaneously between the user terminal 100 and the user. In this embodiment, the touch screen 108 supports single-point and multi-touch operations. For example, the touch screen 108 can be a capacitive touch screen or resistive touch that supports single-point and multi-touch operations. Control screen and so on. Supporting single-point and multi-touch operations is that the touch screen 108 can sense the simultaneous touch operation from one or more positions on the touch screen 11, and hand over the sensed multi-touch operation. The processor 104 performs processing.

It can be understood that the structure shown in FIG. 3 is merely illustrative, and the user terminal 100 may further include more or less components than those shown in FIG. 3, or have a different configuration from that shown in FIG. The components shown in Figure 3 can be implemented in hardware, software, or a combination thereof.

Fourth embodiment

Referring to FIG. 5, a webpage image resource loading apparatus 101 according to a fifth embodiment of the present invention includes a page parsing unit 401, a detecting unit 402, a picture resource loading unit 403, a judging unit 404, and a web page displaying unit 405.

The page parsing unit 401 is configured to perform page parsing on the acquired webpage data in the graphless browsing mode to generate a DOM tree node to generate a DOM tree.

For example, after the user opens the web browser, the user clicks the no-image mode to enter the button. At this time, the web browser enters the no-image browsing mode in response to the user triggering the no-image mode entry button, and obtains the webpage data according to the webpage address input by the user. And perform page parsing to generate a DOM tree node to generate a DOM tree.

The detecting unit 402 is configured to traverse and detect whether the DOM tree node in the DOM tree includes an out-of-picture resource 406 that needs to be loaded. That is, the detecting unit 402 is configured to detect whether the DOM tree node includes the out-of-picture resource 406 according to the parsing progress.

It should be noted that the pictures in the web page mainly have the following two ways of referring:

The first type: 1. The external connection mode refers to the image resource independent of the webpage resource address by using the image tag or the background image attribute. When the image resource needs to be browsed, the web browser needs to initiate network loading on the image resource to implement the image resource. The image resource is displayed on the webpage page; the second type is the inline mode, and the image resource is encoded as the ascii string in the base64 manner, and is directly included in the webpage data. The web browser does not need to initiate a network loading of the inline mode image resource (in fact, the image content exists directly in the webpage). Since the web browser itself is the implementation body of the DOM tree parsing, it can trigger the check of the newly generated DOM tree node in the corresponding stage, and the detection of the DOM tree node can identify whether the current DOM tree node contains the outer Joint picture.

The picture resource loading unit 403 is configured to determine a loading rule of the out-of-picture resource 406 according to whether the DOM tree node includes an out-of-picture resource 406 that needs to be loaded. That is, if the DOM tree node includes the out-of-picture resource 406, the picture resource loading unit 403 is configured to determine whether the out-of-picture resource 406 conforms to the loading rule, and if it matches, the display displays the out-of-picture resource 406 (after loading the DOM tree) The web page display unit 405 performs display).

The loading rule includes: the function entry tag that references the out-of-line picture resource 406 is a visual tag and has a click attribute. Specifically, the picture resource loading unit 403 is configured to: according to the preset picture resource loading rule (that is, the loading mode of the picture), if the current DOM tree node includes the out-of-picture resource 406 that needs to be loaded (ie, when the loading rule is met) The out-of-picture resource 406 is loaded, and if the current DOM tree node does not include the out-of-picture resource 406 that needs to be loaded (ie, when the loading rule is not met), the out-of-picture resource 406 is not loaded.

The loading rule of the out-of-line picture resource 406 mainly includes, but is not limited to, the following two modes. The first type: if the DOM tree node includes the out-of-picture resource 406, and the function entry tag of the referenced out-of-picture resource 406 is a visual tag. When there is a click attribute, the out-of-picture resource 406 is loaded.

Wherein, when the value of the url attribute of the background image is a legal web address instead of the inline mode, it indicates that the picture resource is the out-of-line picture resource 406, and when the function entry label of the out-of-line picture resource 406 is used as the visual label, the outreach The picture resource 406 has the function of displaying on the webpage page, wherein the visual label can be a personality tag or a div personality tag, and the way of determining whether there is a click attribute can be, for example, a personality tag has an href attribute or is registered. Click events, for example, a click on a div personality tag triggers the execution of Javascript code.

At present, most of the out-of-line pictures with functional features have certain conventions and requirements in size. To more accurately determine that the picture resource is an out-of-picture resource 406 that needs to be loaded, the size of the out-of-picture resource 406 may be used as a condition for loading, when the size of the out-of-picture resource 406 meets a predetermined range, for example, when When the width, height, aspect ratio, and aspect ratio of the out-of-line picture resource 406 respectively meet the predetermined range, the out-of-picture resource 406 is loaded. For example, the outreach picture resource 406 has a width of no more than 64px, a height of no more than 64px, a width/height of no more than 1.5, and a height/width of no more than 1.5.

Second: If the out-of-picture resource 406 is referenced by an image tag, and the image tag has a usemap attribute, the out-of-picture resource 406 is loaded.

When the image tag has a usemap attribute, it indicates that the out-of-picture resource 406 has functional characteristics.

The usemap attribute provides a "client" image mapping mechanism that effectively eliminates server-side processing of mouse coordinates and the resulting network latency issues. Through the special <map> and <area> tags, the HTML creator can provide a mapping describing the coordinates of the sensitive area of the hyperlink in the usemap image, which also contains the corresponding hyperlink URL. The value of the usemap attribute is a URL that points to a special <map> area. The browser on the user's computer converts the coordinates of the mouse as it clicks on the image into a specific behavior, including loading and displaying another document. For example, the source code for an image tag with the usmap attribute can be:

<html>

<body>

<p>Click on the planet on the image and zoom in on them. </p>

<img

Src="/i/eg_planets.jpg"

Border="0"usemap="#planetmap"

Alt="Planets"/>

<area

Shape="circle"

Coords="180,139,14"

Href="/example/html/venus.html"

Target="_blank"

Alt="Venus"/>

<area

Shape="circle"

Coords="129,161,10"

Href="/example/html/mercur.html"

Target="_blank"

Alt="Mercury"/>

<area

Shape="rect"

Coords="0,0,110,260"

Href="/example/html/sun.html"

Target="_blank"

Alt="Sun"/>

</map>

The source code above maps an image planets.gif to 3 regions, and when the user clicks on one of the regions, it will be linked to a different document.

The state of the out-of-line picture with the above conditions is displayed on the web page as shown in FIG. 4. When the no-picture mode function is turned off, the image indicated by the label 406 in the top right corner of FIG. 4 is the function entry using the background image as a visual effect. The "Tian" font is the "Personal Center" entrance, and the "Tian" font is the "Navigation" entrance. Both the "Personal Center" entry and the "Navigation" entry refer to the out-of-line picture resource 406. The tags are all a personal tags.

The determining unit 404 is configured to determine whether the acquired webpage data is parsed.

The detecting unit 402 is further configured to: if the obtained webpage data is not parsed, continue to detect whether the next DOM tree node includes the out-of-picture resource 406 that needs to be loaded, until the obtained webpage data is parsed.

The webpage display unit 405 is configured to render the generated DOM tree to display the webpage content when the page parsing is completed.

Referring to FIG. 6 , a sixth embodiment of the present application further provides a method for loading a webpage image resource. The basic principle of the method for loading a webpage image resource provided by the embodiment of the present application, and the technical effects thereof are as described above. The embodiments are the same, and for the sake of brief description, what is not mentioned in the embodiment, reference may be made to the corresponding content in the above-mentioned embodiment. The webpage image resource loading method includes:

Step S501: Perform page analysis on the obtained webpage data in the no-image browsing mode to generate a DOM tree node to generate a DOM tree.

It can be understood that step S501 can be performed by the page parsing unit 401.

Step S502: Traversing and detecting whether the DOM tree node in the DOM tree includes an out-of-picture resource 406 that needs to be loaded. That is, it is detected whether the DOM tree node includes an out-of-picture resource according to the analysis progress.

It can be understood that step S502 can be performed by the detecting unit 402.

Step S503: Determine a loading rule of the out-of-picture resource 406 according to whether the DOM tree node includes an out-of-picture resource 406 that needs to be loaded. That is, if the DOM tree node includes the out-of-picture resource 406, it is determined whether the out-of-line picture resource 406 conforms to the loading rule, and if it is met, the displayed out-of-picture resource 406 is loaded.

It can be understood that step S503 can be performed by using the picture resource loading unit 403. The loading rule includes: the function entry tag that references the out-of-line picture resource 406 is a visual tag and has a click attribute. If the DOM tree node includes the out-of-picture resource 406 that needs to be loaded (ie, when the loading rule is met), the out-of-picture resource 406 is loaded according to the preset image resource loading rule (ie, the loading mode of the image).

The loading of the outbound picture resource 406 mainly includes but is not limited to the following two methods:

First: If the DOM tree node includes an out-of-picture resource 406, and the function entry tag that references the out-of-line picture resource 406 is a visual tag and has a click attribute, the out-of-picture resource 406 is loaded. For example, if the DOM node includes the out-of-picture resource 406, and the function entry tag of the referenced out-of-picture resource 406 is a visual tag and has a click attribute, and the size of the out-of-picture resource 406 meets a predetermined range, for example, When the width, height, aspect ratio, and aspect ratio of the associated picture resource 406 respectively meet the predetermined range, the out-of-picture resource 406 is loaded.

Secondly, the step of determining the loading rule of the out-of-picture resource 406 according to whether the DOM tree node includes the out-of-picture resource 406 to be loaded includes: if the out-of-picture resource 406 is referenced by the image tag, and the image tag has a usemap When the attribute is used, the out-of-picture resource 406 is loaded.

It should be noted that if the DOM tree node does not include the out-of-picture resource 406 that needs to be loaded (ie, when the loading rule is not met), the out-of-line picture resource 406 is not loaded, and the next DOM tree node is continuously detected.

Step S504: It is determined whether the acquired webpage data is parsed. If yes, step 505 is performed, and if no, step S502 is performed.

It can be understood that the use determining unit 404 can perform step S504.

Step S505: When the page parsing is completed, the generated DOM tree is rendered to display the webpage content.

It can be understood that the step S505 can be performed by using the judgment webpage display unit 405.

The present application also provides a computer readable storage medium having one or more computer program programs executed by one or more processors, one or more processors executing any one of the above embodiments User terminal and webpage image resource loading method.

In summary, the user terminal and the webpage image resource loading apparatus and method and the storage medium provided by the embodiment of the present invention perform page analysis on the obtained webpage data to generate a DOM tree in the graphless browsing mode; traverse and detect the DOM. Whether the DOM tree node in the tree includes an out-of-line picture resource that needs to be loaded; determining the loading rule of the out-of-picture resource according to whether the DOM tree node includes an out-of-picture resource to be loaded, so that the background image is not blocked. Part of the function portal of the visual effect (clickable link) and the image resource using the map/area mechanism on the webpage, so that the user can use the image resource to use the related function normally, thereby improving the user experience.

The embodiment of the present application further provides a user terminal and a webpage image resource loading apparatus and method, and a storage medium. In the graphless browsing mode, the page parsing of the obtained webpage data is performed to generate a DOM tree node; and detecting whether the DOM tree node includes There is an out-of-line picture resource; if the DOM tree node includes an out-of-picture resource, it is judged whether the out-of-line picture resource conforms to the loading rule, and if it matches, the display of the out-of-picture resource is loaded, so that the webpage using the background image to reflect the visual effect is not blocked. Part of the function entry (clickable link) and the image resource on the webpage using the map/area mechanism, so that the user can use the image resource to use the relevant function, thereby improving the user experience.

In the several embodiments provided by the present application, it should be understood that the disclosed apparatus and method may also be implemented in other manners. The apparatus embodiments described above are merely illustrative, for example, the flowcharts and block diagrams in the figures illustrate the architecture, functionality, and functionality of possible implementations of apparatus, methods, and computer program products according to various embodiments of the present application. operating. In this regard, each block of the flowchart or block diagram can represent a module, a program segment, or a portion of code that includes one or more of the Executable instructions. It should also be noted that, in some alternative implementations, the functions noted in the blocks may also occur in a different order than those illustrated in the drawings. For example, two consecutive blocks may be executed substantially in parallel, and they may sometimes be executed in the reverse order, depending upon the functionality involved. It is also noted that each block of the block diagrams and/or flowcharts, and combinations of blocks in the block diagrams and/or flowcharts, can be implemented in a dedicated hardware-based system that performs the specified function or function. Or it can be implemented by a combination of dedicated hardware and computer instructions.

In addition, each functional module in each embodiment of the present application may be integrated to form a separate part, or each module may exist separately, or two or more modules may be integrated to form a separate part.

The functions, if implemented in the form of software functional modules and sold or used as separate products, may be stored in a computer readable storage medium. Based on such understanding, the technical solution of the present application, which is essential or contributes to the prior art, or a part of the technical solution, may be embodied in the form of a software product, which is stored in a storage medium, including The instructions are used to cause a computer device (which may be a personal computer, user terminal, or network device, etc.) to perform all or part of the steps of the methods described in various embodiments of the present application. The foregoing storage medium includes: a U disk, a mobile hard disk, a read-only memory (ROM), a random access memory (RAM), a magnetic disk, or an optical disk, and the like. .

It should be noted that, in this context, relational terms such as first and second are used merely to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply such entities or operations. There is any such actual relationship or order between them. Furthermore, the term "comprises" or "comprises" or "comprises" or any other variations thereof is intended to encompass a non-exclusive inclusion, such that a process, method, article, or device that comprises a plurality of elements includes not only those elements but also Other elements, or elements that are inherent to such a process, method, item, or device. An element that is defined by the phrase "comprising a ..." does not exclude the presence of additional equivalent elements in the process, method, item, or device that comprises the element.

The above description is only the preferred embodiment of the present application, and is not intended to limit the present application, and various changes and modifications may be made to the present application. Any modifications, equivalent substitutions, improvements, etc. made within the spirit and principles of this application are intended to be included within the scope of the present application. It should be noted that similar reference numerals and letters indicate similar items in the following figures, and therefore, once an item is defined in a drawing, it is not necessary to further define and explain it in the subsequent drawings.

Industrial applicability

The user terminal and the webpage image resource loading apparatus and method and the storage medium provided by the embodiment of the present invention perform page analysis on the obtained webpage data to generate a DOM tree node in the graphless browsing mode; and detect whether the DOM tree node includes An out-of-picture resource; if the DOM tree node includes an out-of-picture resource, determining whether the out-of-picture resource conforms to the loading rule, and if it matches, loading and displaying the out-of-picture resource, thereby not shielding the webpage that uses the background image to reflect the visual effect Some function portals (clickable links) and image resources using the map/area mechanism on the webpage enable users to use the image resources to use the related functions, thereby improving the usage rate of the webpage related functions, thereby improving the user experience. .

Claims

A webpage image resource loading device, wherein the webpage image resource loading device comprises:

a page parsing unit, configured to perform page parsing on the acquired webpage data to generate a DOM tree in the no-image browsing mode;

a detecting unit, configured to traverse and detect whether the DOM tree node in the DOM tree includes an out-of-picture resource that needs to be loaded;

And a picture resource loading unit, configured to determine a loading rule of the out-of-picture resource according to whether the DOM tree node includes an out-of-picture resource to be loaded.
The webpage image resource loading apparatus according to claim 1, wherein the image resource loading unit is configured to load the image according to a preset image resource loading rule if the current DOM tree node includes an out-of-picture resource to be loaded. The out-of-picture resource is not loaded when the current DOM tree node does not include an out-of-picture resource that needs to be loaded.
The webpage picture resource loading apparatus according to claim 1, wherein the picture resource loading unit is configured to: if the DOM tree node includes an out-of-picture resource that needs to be loaded, and reference a function entry label of the out-of-picture resource as a visualization The out-of-picture resource is loaded when the tag has a click attribute.
The webpage picture resource loading apparatus according to claim 1, wherein the picture resource loading unit is configured to: if the DOM node includes an out-of-picture resource that needs to be loaded, and the function entry label that references the out-of-picture resource is The out-of-picture resource is loaded when the label is visualized and has a click attribute, and the width, height, aspect ratio, and aspect ratio of the out-of-picture resource respectively meet a predetermined range.
The webpage image resource loading apparatus according to claim 1, wherein the out-of-picture resource is loaded if the out-of-picture resource is referenced by an image tag and the image tag has a usemap attribute.
The webpage image resource loading apparatus according to claim 1, wherein the webpage image resource loading apparatus further comprises:

A webpage display unit is configured to render the generated DOM tree to display webpage content when the page is parsed.
A webpage image resource loading method, wherein the webpage image resource loading method comprises:

In the no-view browsing mode, page analysis is performed on the obtained webpage data to generate a DOM tree;

Traversing and detecting whether the DOM tree node in the DOM tree includes an out-of-picture resource that needs to be loaded;

The loading rule of the out-of-picture resource is determined according to whether the DOM tree node includes an out-of-picture resource to be loaded.
The method for loading a webpage image resource according to claim 7, wherein the step of determining a loading rule of the out-of-picture resource according to whether the DOM tree node includes an out-of-picture resource to be loaded comprises:

If the current DOM tree node includes an out-of-picture resource to be loaded, the out-of-picture resource is loaded according to a preset image resource loading rule, and if the current DOM tree node does not include an out-of-picture resource to be loaded. The out-of-picture resource is not loaded.
The method for loading a webpage image resource according to claim 7, wherein the step of determining a loading rule of the out-of-picture resource according to whether the DOM tree node includes an out-of-picture resource to be loaded comprises:

If the DOM tree node includes an out-of-picture resource that needs to be loaded, and the function entry tag that references the out-of-picture resource is a visual tag and has a click attribute, the out-of-picture resource is loaded.
The method for loading a webpage image resource according to claim 7, wherein the step of determining a loading rule of the out-of-picture resource according to whether the DOM tree node includes an out-of-picture resource to be loaded comprises:

If the DOM node includes an out-of-picture resource that needs to be loaded, and the function entry tag that references the out-of-picture resource is a visual tag and has a click attribute, and the width, height, and aspect ratio of the out-of-picture resource And loading the out-of-picture resource when the aspect ratio meets the predetermined range respectively.
The method for loading a webpage image resource according to claim 7, wherein the step of determining a loading rule of the out-of-picture resource according to whether the DOM tree node includes an out-of-picture resource to be loaded comprises: When the out-of-picture resource is referenced by the image tag, and the image tag has a usemap attribute, the out-of-picture resource is loaded.
The webpage image resource loading method according to claim 7, wherein after the step of determining a loading rule of the out-of-picture resource according to whether the DOM tree node includes an out-of-picture resource to be loaded, The webpage image resource loading method further includes:

When the page is parsed, the generated DOM tree is rendered to display the content of the web page.
A user terminal, wherein the user terminal comprises:

Memory

Processor; and

a webpage image resource loading device, the device is installed in the memory and includes one or more software function modules executed by the processor, and the webpage image resource loading device includes:

a page parsing unit, configured to perform page parsing on the acquired webpage data to generate a DOM tree in the no-image browsing mode;

a detecting unit, configured to traverse and detect whether the DOM tree node in the DOM tree includes an out-of-picture resource that needs to be loaded;

And a picture resource loading unit, configured to determine a loading rule of the out-of-picture resource according to whether the DOM tree node includes an out-of-picture resource to be loaded.
A computer readable storage medium carrying one or more computer program programs, the one or more processors executing any one of claims 7 to 12 when the computer program program is executed by one or more processors The method described in the item.
A webpage image resource loading method includes:

In the no-image browsing mode, page analysis is performed on the obtained webpage data to generate a DOM tree node;

Detecting whether the DOM tree node includes an out-of-picture resource;

If the DOM tree node includes an out-of-picture resource, determine whether the out-of-picture resource meets the loading rule, and if yes, load and display the out-of-picture resource.
The webpage image resource loading method according to claim 15, wherein the loading rule comprises: a function entry tag that references the out-of-picture resource is a visual tag and has a click attribute.
The webpage image resource loading method according to claim 16, wherein the loading rule comprises: a function entry label that references the out-of-picture resource is a visual label and has a click attribute, and the size of the out-of-picture resource is in accordance with a predetermined range.
The webpage image resource loading method according to claim 17, wherein the loading rule comprises: a function entry label that references the out-of-picture resource is a visual label and has a click attribute, and the width and height of the out-of-picture resource The aspect ratio and the aspect ratio respectively meet the predetermined range.
The webpage image resource loading method according to claim 15, wherein the loading rule comprises: the out-of-picture resource is referenced by an image tag, and the image tag has a usemap attribute.
The webpage image resource loading method according to claim 15, further comprising the step of: if the loading rule is not met, the out-of-picture resource is not loaded.
A webpage image resource loading device includes:

a page parsing unit, configured to perform page parsing on the acquired webpage data to generate a DOM tree node in the no-image browsing mode;

a detecting unit, configured to detect whether the DOM tree node includes an out-of-picture resource;

a picture resource loading unit, if the DOM tree node includes an out-of-picture resource, the picture resource loading unit is configured to determine whether the out-of-picture resource meets a loading rule, and if yes, load and display the out-of-picture resource.
The webpage picture resource loading apparatus according to claim 21, wherein the loading rule comprises: a function entry label that references the out-of-line picture resource is a visual label and has a click attribute.
The webpage image resource loading apparatus according to claim 22, wherein the loading rule comprises: a function entry label that references the out-of-line picture resource is a visual label and has a click attribute, and the size of the out-of-picture resource is in accordance with a predetermined range.
The webpage image resource loading apparatus according to claim 23, wherein the loading rule comprises: a function entry label that references the out-of-picture resource is a visual label and has a click attribute, and a width and a height of the out-of-picture resource The aspect ratio and the aspect ratio respectively meet the predetermined range.
The webpage picture resource loading apparatus according to claim 21, wherein the loading rule comprises: the out-of-picture resource is referenced by an image tag, and the image tag has a usemap attribute.
The webpage image resource loading apparatus according to claim 21, wherein the picture resource loading unit is configured to: if the loading rule is not met, not to load the out-of-picture resource.
A user terminal comprising:

One or more processors;

Memory

One or more applications, wherein the one or more applications are stored in the memory and configured to be executed by the one or more processors, the one or more programs configured to:

In the no-image browsing mode, page analysis is performed on the obtained webpage data to generate a DOM tree node;

Detecting whether the DOM tree node includes an out-of-picture resource;

If the DOM tree node includes an out-of-picture resource, determine whether the out-of-picture resource meets the loading rule, and if yes, load and display the out-of-picture resource.
The user terminal of claim 27, wherein the loading rule comprises: a function entry tag that references the out-of-picture resource is a visual tag and has a click attribute.
The user terminal according to claim 28, wherein the loading rule comprises: a function entry tag that references the out-of-picture resource is a visual tag and has a click attribute, and the size of the out-of-picture resource conforms to a predetermined range.
The user terminal according to claim 29, wherein the loading rule comprises: a function entry tag that references the out-of-line picture resource is a visual tag and has a click attribute, and a width, a height, a width and a height of the out-of-picture resource The ratio and the aspect ratio respectively meet the predetermined range.
The user terminal of claim 27, wherein the loading rule comprises the out-of-picture resource being referenced by an image tag and the image tag having a usemap attribute.
The user terminal of claim 27, wherein the one or more programs are configured to not load the out-of-picture resource if the loading rule is not met.
A computer readable storage medium carrying one or more computer program programs, executed by one or more processors, the one or more processors executing any one of claims 15-20 The method described in the item.