WO2016019874A1 - 页面资源加载方法和装置 - Google Patents

页面资源加载方法和装置 Download PDF

Info

Publication number
WO2016019874A1
WO2016019874A1 PCT/CN2015/086148 CN2015086148W WO2016019874A1 WO 2016019874 A1 WO2016019874 A1 WO 2016019874A1 CN 2015086148 W CN2015086148 W CN 2015086148W WO 2016019874 A1 WO2016019874 A1 WO 2016019874A1
Authority
WO
WIPO (PCT)
Prior art keywords
range
loading
page resource
plug
page
Prior art date
Application number
PCT/CN2015/086148
Other languages
English (en)
French (fr)
Inventor
梁捷
王永光
钱毅
刘广
Original Assignee
优视科技有限公司
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Priority claimed from CN201410381929.3A external-priority patent/CN105335419B/zh
Priority claimed from CN201510153234.4A external-priority patent/CN106156095B/zh
Application filed by 优视科技有限公司 filed Critical 优视科技有限公司
Publication of WO2016019874A1 publication Critical patent/WO2016019874A1/zh

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor

Definitions

  • the present invention relates to the field of the Internet, and in particular, to a page resource loading method and apparatus.
  • the browser receives the Hypertext Markup Language (HTML) data of the page from the network, then starts parsing, and generates a file object model (DOM) tree, and then formats and renders the web page according to the DOM tree.
  • HTML Hypertext Markup Language
  • DOM file object model
  • an image tag (img tag)
  • a network request is initiated to load the image resource, so that the user can display the image when the user scrolls the webpage to the location of the image.
  • the page can be, for example, various web pages, or other types of pages.
  • Plugins can be divided into visual plugins and invisible plugins (or can be called “feature plugins").
  • the visual plug-in has visual characteristics, such as a width value of width>0 and a height value of height>0, so that it occupies a certain space on the screen and can be seen by the user.
  • Visual plugins only make sense when they are actually seen by the user. This type of plugin is the most common, such as various webpage advertisements, video aggregation stations, and the like.
  • Plugins that don't have visual features are invisible plugins that are often used to implement certain functions. For example, flash background music is common in, for example, some online music play pages, in which some invisible plug-ins are embedded to perform the play function.
  • the term “visual” means that the plugin itself has properties that can be seen, while the term “visible” means that the plugin is within the current screen display range and can be seen by the user.
  • the plugin for the entire page will be loaded regardless of whether the plugin in the page is visible to the user.
  • the browser receives the page HTML data from the Internet, then starts parsing and generates a DOM tree for typesetting.
  • the browser has already Downloaded all the visual plugins included in the page. Some of these visual plugins are invisible. If the user does not flip the page down, then these visual plug-ins will not be seen by the user, and will not perform their desired effects and effects.
  • the current page resource loading is whether the visible page resource or the invisible page resource is directly loaded after the parsing is completed, which may result in a large amount of system resources or network resources.
  • One technical problem to be solved by the present invention is to provide a method and device for loading a page resource, so that the webpage can be browsed smoothly and the traffic of the network can be saved.
  • a page resource loading method including:
  • the loading range of the page resource includes a current screen display range, or a predetermined distance range included in the predetermined range, or including the predetermined range a current screen display range and a predetermined distance range outside the current screen display range but within a predetermined distance;
  • the page resource in the page resource loading method includes: a picture of a webpage and/or a plug-in of a webpage.
  • the loading method may further include: determining a to-be-loaded image within a loading range of the page resource.
  • the method further comprises:
  • the DOM node corresponding to the picture tag is recorded in the record table
  • the step of determining a picture to be loaded within a range of loading of a page resource comprises:
  • the picture is determined to be a picture to be loaded within the loading range of the page resource.
  • the step of determining a picture to be loaded within a range of loading of a page resource comprises:
  • the step of determining the to-be-loaded picture in the page resource loading range may further include: deleting, in the record table, a record of the DOM node corresponding to the to-be-loaded picture in the page resource loading range.
  • the predetermined distance may be a distance that will cause the screen display range to move based on a single screen display range movement instruction.
  • the loading method further comprises a visual plug-in for determining a loading range of the page resource.
  • the method for loading a page resource further includes:
  • the loading method further includes: determining whether the plug-in is a visual plug-in according to the size data of the plug-in.
  • the loading method further includes: determining whether size data of the visual plug-in other than the page resource loading range is less than or equal to a predetermined threshold; and loading dimension data outside the page resource loading range is less than or equal to a predetermined threshold.
  • Visual plugin determining whether size data of the visual plug-in other than the page resource loading range is less than or equal to a predetermined threshold; and loading dimension data outside the page resource loading range is less than or equal to a predetermined threshold.
  • the loading method further includes:
  • the loading method further includes: in response to the current screen display range changing, further loading the visual plug-in that has not been loaded in the corresponding changed page resource loading range according to the saved plug-in information.
  • a page resource loading apparatus including: a parsing unit, configured to parse the obtained page file;
  • a range determining unit configured to determine, according to the parsing result, a loading range of the page resource, where the loading range of the page resource includes a current screen display range, or a predetermined distance included in the predetermined distance within the current screen display range a range, or a range of predetermined distances including the current screen display range and outside of the current screen display range, but within a predetermined distance;
  • a loading unit configured to load a page resource within a loading range of the page resource.
  • the page resource comprises: a picture of a webpage and/or a plug-in of a webpage,
  • the range determining unit is configured to determine a loading range of a page image and/or a plug-in of the webpage based on the parsing result.
  • the loading unit wherein, when the page resource is a picture of a webpage, the device further includes: a picture determining unit, configured to determine a picture to be loaded within a loading range of the page resource; wherein the loading unit includes The image loading unit is configured to load the image to be loaded within the loading range of the page resource.
  • the method further includes: when the image tag is found in the process of parsing the page file by the parsing unit, recording the DOM node corresponding to the picture tag in the record table;
  • the typesetting unit is configured to perform picture layout according to the CSS attribute of the picture tag.
  • the picture determining unit may include: a query unit, configured to query a typesetting result of the DOM node recorded in the record table;
  • a determining unit configured to determine, according to the typesetting result, whether a location of a picture corresponding to the picture tag corresponding to the DOM node is within the page resource loading range
  • the first determining unit is configured to: when the determining unit determines that the location is within the page resource loading range, determine that the image is a to-be-loaded image in the page resource loading range.
  • the picture determining unit may include: a typesetting query unit, configured to query a typesetting result of the DOM node recorded in the page resource loading range in the record table;
  • a node determining unit configured to determine, according to the typesetting result, whether the DOM node in the page resource loading range has a picture label
  • a second determining unit configured to: when the node determining unit determines that the DOM node in the range of the page resource loading has a picture label, determine that the picture corresponding to the picture label is to be loaded in the loading range of the page resource image.
  • the picture determining unit may further include: a deleting unit, configured to delete, in the record table, a record of the DOM node corresponding to the picture to be loaded within the page resource loading range.
  • a deleting unit configured to delete, in the record table, a record of the DOM node corresponding to the picture to be loaded within the page resource loading range.
  • the predetermined distance may be a distance that will cause the screen display range to move based on a single screen display range movement instruction.
  • the device when the page resource is a plug-in of a webpage, the device further includes:
  • a plugin determining unit a visual plugin for determining a loading range of page resources
  • the loading unit includes a first plug-in loading unit for loading a visual plug-in within the loading range of the page resource.
  • the plug-in determining unit comprises:
  • a first determining unit configured to determine whether the plug-in included in the page file is a visual plug-in
  • the second determining unit is configured to determine whether the location of the visual plugin is within the page resource loading range.
  • the method further includes: a third determining unit, configured to determine whether size data of the visual plug-in other than the page resource loading range is less than or equal to a predetermined threshold;
  • the loading unit further includes a second plug-in loading unit, configured to load a visual plug-in whose size data outside the page resource loading range is less than or equal to the predetermined threshold.
  • the method further includes: a placeholder unit, configured to replace the visual plug-in that is not loaded outside the page resource loading range by using the placeholder plug-in;
  • a plug-in information saving unit for saving plug-in information of a visual plug-in replaced by a placeholder plug-in.
  • the loading unit further includes:
  • a third plug-in loading unit configured to respond to the current screen display range, according to the plug-in information saved by the plug-in information saving unit, further loading the corresponding changed page resource loading range has not been added Loaded visual plugin.
  • a computer readable medium having program code executable by a processor, the program code causing a processor to perform the following steps:
  • the loading range of the page resource includes a current screen display range, or a predetermined distance range included in the predetermined range, or including the predetermined range a current screen display range and a predetermined distance range outside the current screen display range but within a predetermined distance;
  • FIG. 1 is a schematic flow chart of one embodiment of a page resource loading method in accordance with the present invention.
  • FIG. 2 is a schematic flow chart of another embodiment of a page resource loading method in accordance with the present invention.
  • FIG. 3 is a flow diagram of parsing and formatting a web page source file when loading a web page image in accordance with the method of the present invention.
  • FIG. 4 is a flow diagram of one way to determine a picture to be loaded within a range of page resource loading.
  • FIG. 5 is a schematic block diagram of a page resource loading apparatus according to an embodiment of the present invention.
  • FIG. 6 is a schematic block diagram of a page resource loading apparatus according to another embodiment of the present invention.
  • FIG. 7 is a schematic block diagram of a page resource loading apparatus according to another embodiment of the present invention.
  • Fig. 8 is a schematic block diagram of a picture determining unit.
  • FIG. 8 is a schematic flow chart of still another embodiment of a page resource loading method according to the present invention.
  • FIG. 9 is a schematic flow chart of a page resource loading method loading plugin according to a modified embodiment of the present invention.
  • Figure 10 is a schematic flow diagram of the steps of further loading a plug-in in response to changes in the current screen display range in accordance with the present invention.
  • Figure 11 is a schematic block diagram of a loading plug-in of a page resource loading device in accordance with the present invention.
  • Figure 12 is a schematic block diagram of a plug-in loading unit in accordance with a modified embodiment of the present invention.
  • FIG. 1 is a schematic flow chart of one embodiment of a page resource loading method in accordance with the present invention.
  • the page resource loading method in this embodiment includes:
  • step S100 the acquired page file is parsed.
  • a page file generally refers to a web page source file.
  • a page file usually includes an HTML (HyperText Markup Language) file.
  • the user enters an address in the browser address bar or initiates a request to access the web page by clicking on a hyperlink on another page.
  • a mobile communication terminal such as a mobile phone to access a web page
  • many web pages tend to have more content than the screen can display at one time.
  • a page file such as an HTML file
  • at least some of the page resources in the webpage are not immediately loaded, so as to avoid downloading unnecessary webpage content, saving system resources or network resources, such as traffic and bandwidth.
  • the entire text content of the webpage may be downloaded, or the text content of the predetermined part of the webpage may be downloaded according to the requirements or settings.
  • the source file of the web page is parsed, that is, the HTML file is parsed.
  • the DOM tree corresponding to the web page can be generated.
  • step S101 based on the parsing result, determining a loading range of the page resource, where the loading range of the page resource includes a current screen display range, or a predetermined distance range included in the predetermined distance within the current screen display range, Or including the current screen display range and a predetermined distance range outside the current screen display range but within a predetermined distance.
  • step S102 the page resource within the loading range of the page resource is loaded.
  • the embodiment does not directly load the page resource, but first determines the loading range of the page resource, and then loads the page resource in the loading range. This will greatly save the resources and network traffic of the terminal system.
  • FIG. 2 is a schematic flow chart of another embodiment of a page resource loading method in accordance with the present invention.
  • the page resource loading method of the present invention includes:
  • the user enters an address in the browser address bar or initiates a request to access the web page by clicking on a hyperlink on another page.
  • a mobile communication terminal such as a mobile phone to access a web page
  • many web pages tend to have more content than the screen can display at one time.
  • At least some of the images in the webpage are not loaded immediately, and include multiple situations.
  • no image is downloaded; in another case, only the first screen of the webpage is downloaded, that is, the first screen is to be displayed. Picture; or, only download pictures whose number of bytes is less than a predetermined value.
  • the method further includes step S200.
  • step S200 a picture to be loaded within a page resource loading range is determined.
  • step S200 in response to the first typesetting of the webpage, or in response to the screen display range moving instruction, the image to be loaded within the page resource loading range is determined to be determined. Usually, after the first page layout is completed or the instruction of the screen display range is changed, the image to be loaded within the page resource loading range is determined.
  • step S300 the picture to be loaded within the page resource loading range is loaded. That is to say, the loading of the page resource in the loading range of the page resource refers to loading the image to be loaded within the loading range of the page resource.
  • the web browser After downloading the webpage source file, the web browser, and in particular the web browser of the smartphone, re-formats the webpage content to fit the screen of the smartphone.
  • the content of the first screen will be displayed on the screen. If there is a picture to be loaded in the content of the first screen, it can be considered that the picture needs to be loaded for the user to browse.
  • These images are generally viewed by users and can make use of the meaning of the images. At this point, without waiting for the user's instructions, the image is loaded for display on the screen.
  • the pictures can be loaded in advance so that the user can directly issue the screen display range movement instruction. Show these pictures. At this point, the picture does not need to be displayed on the screen, but the user is more likely to continue to browse these pictures. Loading these pictures in advance can reduce the waiting time of the user and improve the user's online experience.
  • the screen display range refers to the range of web page content displayed on the screen at one time.
  • the screen display range movement instruction is an instruction for moving the range of the webpage content displayed on the screen up, down, left, and right, such as a page turning instruction, a pull-down instruction, a sliding screen instruction, and the like.
  • the current screen display range is the range of web content currently displayed on the screen.
  • a page resource loading range is defined.
  • the picture to be loaded (or the unloaded picture) in the range can be considered as a picture to be loaded.
  • the page resource loading range may be the current screen display range, or may be a predetermined distance range within a predetermined distance outside the current screen display range, or may include both the current screen display range and a predetermined distance outside the current screen display range. The predetermined distance range within.
  • the page resource loading range in step S200 includes a range of webpage content currently displayed on the screen, or the page resource loading range includes a predetermined distance range within a predetermined distance outside the display range, or the page The resource loading range includes, in addition to the range of webpage content currently displayed on the screen, a predetermined distance range within a predetermined distance outside the display range.
  • This predetermined distance can be calculated based on the top, middle, end or other position of the picture. Regardless of the basis of the calculation, the meaning can be the same, but the values set for the same range will be different.
  • this predetermined distance may be relative to the edge of the current screen display range (eg, upper edge (when moving up), lower edge (when moving downward), left edge (when moving to the left), right edge (moving to the right) Time) calculation.
  • This predetermined distance can be set in advance according to needs, such as browsing habits, user sensitivity to traffic, and the like.
  • a setting tool can be provided to the user to set the predetermined distance.
  • the predetermined distance may correspond to a range of webpage content that the screen can display at one time, or corresponds to one screen (one screen display range) of content. That is, the picture in the web content of the next screen is loaded in advance.
  • the predetermined distance may also be set to correspond to two screens or three screens or more, that is, images in the web content of the next two screens, the next three screens or even more are downloaded in advance.
  • the predetermined distance may also correspond to a web content range that will be newly added on the screen based on the one-screen display range movement instruction. For example, when the screen display range movement instruction is issued by pressing a pull-down button under the progress bar, clicking a progress bar, or by a sliding screen operation, the content of the web page originally displayed on the screen moves upward, and the predetermined distance corresponds to the portion newly added to the screen display.
  • the scope of the web content That is, the image that is moved into the screen display by the screen display range movement instruction will be added in advance.
  • the predetermined distance may also be set to correspond to a new webpage content range that will be newly added on the screen based on the multiple screen display range moving instruction, that is, the browser is loaded in advance by multiple screen display range moving instructions to be newly added to the screen display.
  • the webpage content When using a smartphone or the like to access a webpage, it is often necessary to typeset the webpage content so that the displayed webpage conforms to a screen of a smartphone or the like, and the current screen display range and the predetermined distance range can be determined based on the layout result.
  • the location of the image can be known during the parsing of the source file of the web page.
  • FIG. 3 is a flow diagram of parsing and formatting a web page source file when loading a web page image in accordance with the method of the present invention.
  • the parsing and typesetting operations may be performed before step S200 of determining the picture to be loaded within the page resource loading range in FIG. 2. More specifically, these operations may be performed after the web page source file is loaded or during the loading of the web page source file.
  • the operation of parsing and typesetting the webpage source file in the present invention includes the following steps:
  • step S110 the acquired webpage source file is parsed to generate a DOM tree. This step can be performed in the same manner as in the prior art.
  • step S120 it is determined whether there is a picture tag in the DOM tree.
  • step S120 If it is determined in step S120 that there is no picture tag, the normal load display flow is continued in step S150.
  • step S130 a DOM node corresponding to the picture tag is recorded in the record table, that is, when a picture tag is found in the parsing process, the record is recorded in the record table.
  • the DOM node corresponding to the image tag is typeset according to the cascading style sheet (CSS) attribute of the picture label.
  • step S130 is preceded and step S140 is followed.
  • step S140 is followed.
  • steps S140 can also be performed simultaneously.
  • the text content (or at least part of the text content) in the webpage has been downloaded, the DOM node included in the webpage with the image is recorded, and the photo layout is performed according to the CSS attribute of the image tag. After that, you can render the text content of the web page that has been downloaded and the image within the current screen display range that has been downloaded (if some pictures have already been downloaded).
  • step 200 it is also ready to load the loaded image.
  • the basis for determining the image to be loaded within the page resource loading range in step 200 is provided.
  • step S210 the layout result of the DOM node recorded in the record table is queried.
  • step S220 according to the layout result, determining a map corresponding to the picture label corresponding to the DOM node Whether the location of the slice (also referred to as "the picture corresponding to the DOM node") is within the page resource loading range.
  • step S220 If it is determined in step S220 that the location is not within the page resource loading range, then the next DOM node in the record table is selected in step S230, and then returns to step S210 to re-query the layout result.
  • step S240 If it is determined in step S220 that the location is within the page resource loading range, it is determined in step S240 that the picture corresponding to the DOM node is a picture to be loaded within the page resource loading range.
  • the record of the DOM node may be deleted in the record table in step S250 to avoid repeated loading.
  • step S250 is performed after step S240. However, those skilled in the art should understand that there may be no sequential relationship between step S250 and step S240. Step S250 may be performed after, before or at the same time as step S240.
  • step S260 it is checked whether there are any DOM nodes in the record table that have not been determined in step S220.
  • step S230 the next DOM node in the record table is selected, and then the process returns to step S220 to re-determine.
  • the above judgment and corresponding processing are performed on each DOM node in the record table.
  • the flow of FIG. 4 may be performed after the first typesetting of step S140 shown in FIG. 3 is completed, that is, when the web page is just started to be accessed, so that the picture is selectively loaded based on the web content range initially displayed on the screen.
  • FIG. 4 may also be performed in response to a user's screen display range move instruction (eg, a page flip or pull down command) to be updated at any time to load a picture that may be needed.
  • a user's screen display range move instruction eg, a page flip or pull down command
  • all nodes on the DOM tree are traversed to determine whether there is a picture tag, whether it is within the page resource loading range, that is, it is not required to be as in step S130.
  • the page resource loading range it is also possible to determine whether there is a picture tag in the DOM node within the page resource loading range, instead of making a determination based on the DOM node in the record table as in steps S210 and S220.
  • the row of the DOM node recorded in the query resource table within the loading range of the page resource The result of the version, and determining whether the DOM node in the range of the page resource loading has a picture label according to the typesetting result, and if there is a picture label in the DOM node in the loading range of the page resource, determining that the picture corresponding to the picture label is the The image to be loaded within the range of page resource loading.
  • the record of the DOM node after querying the record table, the record of the DOM node can be deleted in the record table to avoid duplicate queries.
  • FIG. 5 is a schematic block diagram of a page resource loading apparatus according to another embodiment of the present invention.
  • the page resource loading apparatus of this embodiment includes:
  • the parsing unit 500 is configured to parse the obtained page file.
  • a page file generally refers to a web page source file.
  • a page file usually includes an HTML file.
  • the user enters an address in the browser address bar or initiates a request to access the web page by clicking on a hyperlink on another page.
  • a mobile communication terminal such as a mobile phone to access a web page
  • many web pages tend to have more content than the screen can display at one time.
  • the entire text content of the webpage may be downloaded, or the text content of the predetermined part of the webpage may be downloaded according to the requirements or settings.
  • the parsing unit 500 parses the webpage source file, that is, parses the HTML file. After the parsing is completed, the corresponding DOM tree can be generated.
  • the range determining unit 501 is configured to determine, according to the parsing result, a loading range of the page resource, where the loading range of the page resource includes a current screen display range, or a reservation included in the predetermined range but within a predetermined distance.
  • the loading unit 502 is configured to load a page resource within a loading range of the page resource.
  • the page resource includes: a picture of the webpage and/or a plug-in of the webpage.
  • the range determining unit is configured to determine a loading range of the plug-in of the page image and/or the webpage based on the parsing result.
  • the parsing unit of the embodiment does not directly load the page resource, but first determines the loading range of the page resource, and then loads the page resource in the loading range. This will greatly save the resources and network traffic of the terminal system.
  • FIG. 6 is a schematic block diagram of a page resource loading apparatus according to another embodiment of the present invention.
  • the image determining may be included.
  • Unit 440 In addition, a recording unit 420 and a typesetting unit 430 may also be included.
  • the parsing unit 500 includes a first parsing unit 410, where the first parsing unit 410 is configured to parse the source file to generate a DOM tree.
  • the picture determining unit 440 is configured to determine a picture to be loaded within a loading range of the page resource, where the picture determining unit 440 generally refers to the record table and the typesetting result in response to the first page layout of the web page or in response to the screen display range moving instruction. , to determine the image to be loaded within the range of page resource loading.
  • the recording unit 420 is configured to record a DOM node corresponding to the picture label in the record table when a picture label is found in the parsing process.
  • the typesetting unit 430 is configured to perform a picture layout according to a CSS attribute of the picture tag.
  • the operations of the first parsing unit 420, the recording unit 420, and the typesetting unit 430 may respectively correspond to the steps S110, S130, and S140 described above with reference to FIG. 3, and details are not described herein again.
  • the loading unit 502 includes a picture loading unit 450 for loading a picture to be loaded within a loading range of the page resource.
  • FIG. 7 is a schematic block diagram of the picture determining unit 440.
  • the picture determining unit 440 may include a query unit 442, a determining unit 444, a first determining unit 446, and a deleting unit 448.
  • the query unit 442 is configured to query the typesetting result of each DOM node recorded in the record table.
  • the determining unit 444 is configured to determine, according to the layout result, whether the location of the picture corresponding to the picture tag corresponding to the DOM node is within the page resource loading range;
  • the first determining unit 446 is configured to: when the determining unit determines that the location is within the page resource loading range, determine that the image is a to-be-loaded image within a page resource loading range.
  • the deleting unit 448 is configured to delete, in the record table, a record of a DOM node corresponding to the to-be-loaded picture in the page resource loading range.
  • the operations of the query unit 442, the determining unit 444, the determining unit 446, and the deleting unit 448 may correspond to steps S210, S220, S240, and S250 described above with reference to FIG. 4, respectively, and are not described herein again.
  • the image determining unit 440 of another form of the present application may include a typesetting query unit, a node determining unit, and a second determining unit, and may further include a deleting unit.
  • the typesetting query unit is configured to query a typesetting result of a DOM node recorded in the loading range of the page resource in the record table;
  • the node determining unit is configured to determine, according to the typesetting result, whether the DOM node in the page resource loading range has a picture label
  • the second determining unit is configured to determine, if the picture label is in the DOM node in the range of the page resource loading, the picture corresponding to the picture label is the picture to be loaded in the range of loading of the page resource.
  • the deleting unit deletes, in the record table, a record of the DOM node corresponding to the to-be-loaded picture in the range of loading of the page resource.
  • the page resource loading device of the present invention in the case that the entire image is not loaded at the time of initial loading of the webpage to save traffic, an adaptively automatically loading part of the image during the browsing process is prepared for the user to browse, and the smooth implementation is achieved. Browse a web page with images and save a good balance of traffic.
  • FIG. 8 is a schematic flow chart of still another embodiment of a page resource loading method according to the present invention.
  • the page resource loading method of the present invention includes:
  • step S801 the page file is loaded and the page file is parsed and typeset.
  • step S802 based on the result of the layout, a visual type plug-in within the plug-in loading range of the page file is determined.
  • the plugin load scope is a range in the page file, and the visual plugin that falls in it needs to be loaded.
  • the plugin load range can include the current screen display range. That is, the visual plug-ins in the current screen display range are all loaded.
  • the plug-in loading range may include a predetermined distance range within a predetermined distance outside the current screen display range, or the plug-in loading range includes a current screen display range and a predetermined distance range within a predetermined distance outside the current screen display range .
  • outside may include before and after, and in the case where the page display content is wide, it may also include left and right.
  • the predetermined distance may correspond to the distance of one screen display range, that is, the height of one screen (in the case of before or after) or the width (in the case of left or right).
  • the predetermined distance may correspond to a distance that the screen display range movement instruction will move the screen display range by one or several times, wherein the screen display range movement instruction may be, for example, a page up instruction (Page Up), Page Down or click on the progress bar command.
  • the screen display range movement instruction may be, for example, a page up instruction (Page Up), Page Down or click on the progress bar command.
  • the predetermined distance may also be other specified distances.
  • step S803 the visual plug-in within the plug-in loading range determined in step S802 is loaded. That is to say, the loading of the page resource within the loading range of the page resource refers to loading a visual plug-in within a loading range of the page resource.
  • FIG. 9 is a schematic flow chart of a page resource loading method loading plugin according to a modified embodiment of the present invention.
  • step S802 may include two determining steps S8021 and S8022.
  • step S801 after the page file is loaded and the page file is parsed and typeset, the determination of step S8021 and step S8022 is performed on each plug-in in the page. In this way, the plug-ins of different types and different positions are effectively distinguished.
  • FIG. 9 shows a case where the determination of step S8021 is performed first, and then the determination of step S8022 is performed.
  • Step S8021 is used to determine whether the attribute of the plug-in is "visible”, and step S8022 is used for the plug-in Whether the position is "visible” is judged, that is, in FIG. 9, it is first determined whether the plug-in is a visual plug-in, and then it is judged whether the visual plug-in is within the plug-in loading range.
  • the position "visible" determination of step S8022 may be performed first, and then the attribute "visual” determination of step S8021 may be performed. That is, first determine whether the plugin is in the plugin load range, and then determine whether the plugin in the plugin load scope is a visual plugin.
  • step S8021 it is determined whether the plug-in included in the page file is a visual plug-in. That is, the properties of the plugin itself are judged to determine whether it is "visible".
  • the plug-in is a visual plug-in based on the size data of the plug-in.
  • the size data may include a width value and a height value.
  • a visual plugin For example, you can think of a plugin that meets the following criteria: a visual plugin:
  • step S8031 is entered, and processing is performed according to a conventional scheme, such as directly loading the invisible plug-in.
  • plugins for playing background music
  • the loading of such plugins can be independent of their location.
  • step S8021 If it is determined in step S8021 that the plug-in is a visual plug-in, then step S8022 is entered for further determination.
  • step S8022 it is determined whether the location of the visual type plug-in is within the plug-in loading range. That is, the position of the plug-in is judged to determine whether it is “visible”, and it is generally considered to be “visible” within the plug-in loading range.
  • step S803 is entered to load the visual type plug-in as described above with reference to FIG.
  • step S8022 If it is determined in step S8022 that the position of the visual type plug-in is not within the plug-in loading range, it may be further determined in step S8023 whether the size data of the visual type plug-in is less than or equal to a predetermined threshold.
  • step S8032 may be entered to load the visual type plug-in.
  • step S8023 If it is determined in step S8023 that the size data is greater than the predetermined threshold, proceeding to step S804, in which the visual plug-in is replaced with a placeholder plug-in, that is, using the placeholder plug-in instead of the plug-in loading range, and not yet loaded. Visual plugin).
  • the placeholder plugin can be thought of as a very simple plugin built into the browser, which satisfies all the features of the plugin, such as having the same height and width values as the replaced visual plugin. Coordinates, styles, etc. are also replaced.
  • the visual plugin is consistent, except that all entity data is built in.
  • the placeholder plugin itself can be a plugin element that implements the blink::Plugin interface.
  • the placeholder plug-in is invisible to the user and exists to meet the needs of page layout and the like.
  • the plug-in information of the visual plug-in replaced by the place-holder plug-in can also be saved, so that the visible type can be loaded according to the saved plug-in information when needed (for example, when the current screen display range changes).
  • the plugin information may be a URL of the visual plugin or the like that enables loading of the visual plugin.
  • Step S8023 and step S8031 are shown in FIG. 9, so that for a smaller visual type plug-in, even if it is not in the plug-in loading range, it can be directly loaded, and only a place-holder plug-in is used instead of the larger visual type plug-in. Implement lazy loading to improve the user experience without adding too much resource consumption.
  • step S8023 and step S8031 can be omitted.
  • the operation when the web page is first loaded for example, is described above with reference to FIGS. 8 and 9.
  • the current screen display range changes.
  • the visual plug-in that has not been loaded before the corresponding changed plug-in loading range may be further loaded according to the plug-in information saved in step S805.
  • Figure 10 is a schematic flow diagram of the steps of further loading a plug-in in response to changes in the current screen display range in accordance with the present invention.
  • step S610 it is determined whether the current screen display range has changed. For example, a corresponding determination may be made in response to a screen display range movement instruction, wherein the screen display range movement instruction may be, for example, a page up instruction (Page Up, Page Down, or click progress) Instructions.
  • a screen display range movement instruction may be, for example, a page up instruction (Page Up, Page Down, or click progress) Instructions.
  • the plugin load range is defined based on the current screen display range. Therefore, when the current screen display range changes, the plug-in load range changes accordingly.
  • step S610 If it is determined in step S610 that no change has occurred, the process may return to step S610 to continue monitoring.
  • step S610 If it is determined in step S610 that a change has occurred, it may be further determined in step S620 whether there is a visual plug-in that has not been loaded within the corresponding changed plug-in loading range.
  • step S620 If it is determined in step S620 that there is no visual plug-in that has not been loaded within the corresponding changed plug-in loading range, then return to step S610 to continue monitoring.
  • step S620 If it is determined in step S620 that there is a visual plug-in that has not been loaded in the plug-in loading range, the process may proceed to step S630 to further load the corresponding plug-in loading according to the plug-in information saved in step S805 shown in FIG. Visual plugins that are not loaded in scope, so you can replace the original placeholder plugin with the newly loaded visual plugin.
  • the visual plug-in can be further loaded according to the progress of the user browsing, so that the browsing experience is smoother.
  • FIGS. 8 through 10 The method of loading a plug-in in a page (plug-in loading method) according to the present invention is described in detail above with reference to FIGS. 8 through 10.
  • a device (plug-in loading device) for loading a plug-in in a page according to the present invention will be described in detail below with reference to FIGS. 11 and 12.
  • the respective units in FIGS. 11 and 12 correspond to the respective steps in FIGS. 8 to 10, respectively. In order to avoid repetition, a detailed description of some related details will be omitted herein.
  • FIG. 11 is a schematic block diagram of a page resource loading device loading a plug-in according to the present invention.
  • the page resource loading apparatus of the present invention includes a parsing unit 500 (for parsing the acquired page file), a range determining unit 501 (for determining a loading range of the page resource based on the parsing result), and a loading unit 502
  • the page resource loading device includes: a plug-in determining unit 200, the plug-in determining unit, when loading a plug-in of the webpage, and loading the plug-in of the webpage 200 visual plugin for determining the loading range of page resources;
  • the loading unit 502 includes a first plug-in loading unit 300 for loading a visual plug-in within a range of page resource loading.
  • the plug-in determining unit 200 may include two judging units.
  • the first determining unit 210 is configured to determine whether the plug-in included in the page file is a visual plug-in. For plug-ins (functional plug-ins) that are not visual plug-ins, they can be loaded directly in accordance with conventional programs by means of corresponding plug-in loading units (not shown) without additional waiting or delay.
  • the second determining unit 220 is configured to determine whether the location of the visual plug-in is within the plug-in loading range.
  • the plug-in determining unit 200 can determine the visual plug-in within the loading range of the plug-in.
  • the first plug-in loading unit 300 can load these visual plug-ins within the plug-in loading range.
  • the page resource loading device may further include a third determining unit 230.
  • the third determining unit 230 is configured to determine whether the size data of the visual type plug-in outside the plug-in loading range is less than or equal to a predetermined threshold.
  • the processing can be performed by the different units on the visual plug-ins outside the plug-in loading range.
  • the visual plug-in that is smaller than or equal to the predetermined threshold value outside the plug-in loading range may be directly loaded by the second plug-in loading unit 310, that is, the second plug-in loading unit 310 is configured to load the size data outside the page resource loading range is smaller than Or a visual plug-in equal to a predetermined threshold.
  • a visual plug-in whose size data outside the plug-in loading range is larger than a predetermined threshold, it may not be loaded yet, but instead is replaced by the placeholder unit 600 using a placeholder plug-in. That is, the placeholder unit 600 is used to replace the plug-in that has not been loaded outside the loading range using the placeholder plug-in.
  • the plug-in information holding unit 700 can be used to save the plug-in information of the visual plug-in replaced by the place-of-sale plug-in.
  • the plugin information may be, for example, a URL of a visual plugin or the like that enables loading of the visual plugin.
  • the page resource loading device may further include a third plug-in loading unit 800.
  • the third plug-in loading unit 800 is configured to further load the visual plug-in that has not been loaded in the corresponding plug-in loading range according to the plug-in information saved by the plug-in information saving unit 700 in response to the change of the current screen display range. This allows you to replace the original placeholder with a newly loaded visual plugin.
  • the present application also discloses a computer readable medium having program code executable by a processor, the program code causing the processor to perform the following steps:
  • the loading range of the page resource includes a current screen display range, or a predetermined distance range included in the predetermined range, or including the predetermined range a current screen display range and a predetermined distance range outside the current screen display range but within a predetermined distance;

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Data Mining & Analysis (AREA)
  • Databases & Information Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

一种页面资源加载方法和装置。在加载网页时，可以阻止对网页中至少部分网页资源的加载以节省流量。在浏览过程中，解析获取的页面文件（S100）后，基于解析结果，确定页面资源的加载范围，页面资源的加载范围包括当前屏幕显示范围、或者包含在所述当前屏幕显示范围之外，但在预定距离内的预定距离范围、或者包含所述当前屏幕显示范围以及在所述当前屏幕显示范围之外，但在预定距离内的预定距离范围（S101）；并加载所述页面资源的加载范围内的页面资源（S102）。在初始加载网页时没有加载页面资源以节省流量的情况下，在浏览过程中适应性地加载部分页面资源，以备用户浏览，实现了在流畅地浏览含有页面资源的网页与节省网络资源之间的良好平衡。

Description

页面资源加载方法和装置
本申请要求于2014年8月5日提交中国专利局、申请号为201410381929.3、发明名称为“网页图片加载方法和装置”的中国专利申请的优先权，并要求于2015年4月1日提交中国专利局、申请号为201510153234.4、发明名称为“加载页面中的插件的方法和装置”的中国专利申请的优先权，其全部内容通过引用结合在本申请中。
技术领域
本发明涉及互联网领域，特别涉及页面资源加载方法和装置。
背景技术
目前，很多网页上都添加了各种图片，以便更加直观地向用户传递各种信息。而众所周知，图片文件往往较大。下载较多的图片会占用较多的流量，因此在按流量计费的情形下，往往可能会耗费更多的费用。特别是在使用智能手机等移动终端，通过移动通信网络访问网页时，客户对流量更加敏感。
通常，在网页浏览器加载并显示网页时，一般的流程如下：
首先，在浏览器地址栏中输入地址后开始加载网页。
浏览器从网络接收到页面的超文本标记语言(HTML)数据，然后开始解析，并生成文件对象模型(DOM)树，然后根据DOM树对网页进行排版，渲染显示。
在解析的过程中，每当发现有图片标签(img标签)，就发起网络请求来加载图片资源，以便后续在用户滚动网页到该图片所在位置时能显示该图片。
在上述一般流程中，无论图片位于网页的什么位置，都会被加载。但是如果图片位于一个很长页面的靠后的位置，用户并没有进行向下滚动的操作，也就是说，用户不需要浏览靠后位置的图片时，位于靠后的位置的图片照样被加载。
这样就存在一个问题：当用户没有向下滚动页面以浏览下面的网页内容的时候，仍会加载不需要被显示的图片，导致流量的浪费。
另外，目前还有一种加载并显示网页的方式，在该方式中，当使用移动通信网络访问网页时，一律不加载图片，直到用户通过点击等方式选择查看图片时，才开始下载该图片。
这样，可以节省加载不必要的图片所耗费的流量，但是当用户想要查看图片时，需要额外的操作和额外的等待时间，用户体验较差。
如上所述，目前存在的加载并显示网页的方式，在流畅地浏览含有图片的网页与节省下载不必要的图片将耗费的流量之间存在矛盾。
同样的情况，人们通过浏览器或其它应用程序/应用来上网时，往往需要加载并显示来自互联网络的页面。页面例如可以是各种网页，或者其它类型的页面。
除了文字内容，越来越多的页面中包含了各种类型的插件，例如flash插件等。
插件可以分为可视型插件和不可视型插件(或者可以称为“功能型插件”)。
可视型插件具有可视特性，例如其宽度值width>0，高度值height>0，从而在屏幕上占据一定的空间，能够被用户看到。可视型插件只有在被用户实际见到时，才具有意义。这种类型的插件是最常见的，例如各种网页广告、视频汇聚站等。
不具有可视特性的插件是不可视型插件，往往用来实现某种功能。例如flash后台背景音乐，常见于例如一些在线音乐播放页面，其中嵌入了一些不可见型插件，以执行播放功能。
另外，很多网页由于内容较多，屏幕上一次只能显示其中一部分。相应地，也只有位于屏幕上所显示的部分中的插件处于可见状态。
在本发明的上下文中，术语“可视”是指插件本身具有能够被看到的属性，而术语“可见”则是指插件处于当前屏幕显示范围内，能够被用户看到。
一般而言，在浏览器正常打开链接以显示页面时，无论页面中插件是否处于用户可见状态，整个页面的插件都会被加载。
例如，以使用浏览器浏览网页为例，通常的网页浏览过程如下所述：
首先，在浏览器地址栏中输入地址，然后开始加载。
浏览器从互联网络接收到页面HTML数据，然后开始解析，并生成DOM树，进行排版。
在排版之后调度JavaScript代码以访问插件对象，或者在排版之前执行JavaScript代码以访问插件对象，均会触发对页面内的插件的加载。
如上所述，当页面内容较多，屏幕上只显示了一部分页面内容时，浏览器已经 下载了页面中包含的所有可视型插件。其中一些可视型插件处于不可见的状态。如果用户不往下翻网页，那么这些可视型插件就不会被用户看到，也就不能起到其期望的效果和作用。
这样就存在一个问题：对于不可见的可视型插件的加载，不必要地耗费了大量资源，例如内存、CPU和带宽流量。
综合上述情况可以看出，目前页面资源的加载都是不管是可见的页面资源还是不可见的页面资源，都会在解析完成之后直接进行加载，这样会导致耗费大量系统资源或者网络资源。
发明内容
本发明所要解决的一个技术问题是提供一种页面资源加载方法和装置，使得既能够流畅地浏览网页，又能够节省网络的流量。
根据本发明的一个方面，提供了一种页面资源加载方法，包括：
解析获取的页面文件；
基于解析结果，确定页面资源的加载范围，所述页面资源的加载范围包括当前屏幕显示范围、或者包含在所述当前屏幕显示范围之外，但在预定距离内的预定距离范围、或者包含所述当前屏幕显示范围以及在所述当前屏幕显示范围之外，但在预定距离内的预定距离范围；以及
加载所述页面资源的加载范围内的页面资源。
优选地，该页面资源加载方法中所述页面资源包括：网页的图片和/或网页的插件。
优选地，该页面资源为网页图片时，所述加载方法还可以包括：确定页面资源的加载范围内的待加载图片。
优选地，还包括：
当在解析过程中发现有图片标签时，在记录表中记录与所述图片标签对应的DOM节点；以及
根据所述图片标签的CSS属性进行图片排版。
优选地，所述确定页面资源加载范围内的待加载图片的步骤包括：
查询所述记录表中记录的DOM节点的排版结果；
根据所述排版结果，判断与所述DOM节点对应的图片标签所对应的图片的位置是否在所述页面资源加载范围内；
如果在所述页面资源加载范围内，则确定所述图片为所述页面资源加载范围内的待加载图片。
优选地，所述确定页面资源加载范围内的待加载图片的步骤包括：
查询所述记录表中记录在所述页面资源加载范围内的DOM节点的排版结果；
根据所述排版结果，判断所述页面资源加载范围内的DOM节点是否具有图片标签；
如果在所述页面资源加载范围内的DOM节点中，具有图片标签，则确定所述图片标签对应的图片为所述页面资源加载范围内的待加载图片。
优选地，确定页面资源加载范围内的待加载图片的步骤还可以包括：在记录表中删除对页面资源加载范围内的待加载图片所对应的DOM节点的记录。
优选地，预定距离可以是基于一次屏幕显示范围移动指令将使屏幕显示范围移动的距离。
优选的，当所述页面资源为网页插件时，所述加载方法还包括确定页面资源的加载范围的可视型插件。
优选的，所述页面资源加载方法，还包括：
判断所述页面文件中包含的插件是否是可视型插件；以及
判断所述可视型插件的位置是否在所述页面资源的加载范围内。
优选的，所述加载方法，还包括：根据所述插件的尺寸数据来判断所述插件是否可视型插件。
优选的，所述加载方法，还包括：判断所述页面资源加载范围以外的可视型插件的尺寸数据是否小于或等于预定阈值；以及加载所述页面资源加载范围以外尺寸数据小于或等于预定阈值的可视型插件。
优选的，所述加载方法，还包括：
使用占位插件替代所述页面资源加载范围以外尚未加载的可视型插件；
保存被占位插件替代的可视型插件的插件信息。
优选的，所述加载方法，还包括：响应于当前屏幕显示范围发生变化，根据所保存的插件信息，进一步加载相应变化后的页面资源加载范围内尚未加载的可视型插件。
根据本发明的另一个方面，提供了一种页面资源加载装置，包括：解析单元，用于解析获取的页面文件；
范围确定单元，用于基于解析结果，确定页面资源的加载范围，所述页面资源的加载范围包括当前屏幕显示范围、或者包含在所述当前屏幕显示范围之外，但在预定距离内的预定距离范围、或者包含所述当前屏幕显示范围以及在所述当前屏幕显示范围之外，但在预定距离内的预定距离范围；以及
加载单元，用于加载所述页面资源的加载范围内的页面资源。
优选地，其中，所述页面资源包括：网页的图片和/或网页的插件，
其中，所述范围确定单元，用于基于解析结果，确定页面图片和/或网页的插件的加载范围。
优选地，所述加载单元，其中，当所述页面资源为网页的图片时，所述装置还包括，图片确定单元，用于确定页面资源的加载范围内的待加载图片；其中，加载单元包括图片加载单元，用于加载页面资源的加载范围内的待加载图片。
优选地，还包括：用于当在解析单元在解析页面文件过程中发现有图片标签时，在记录表中记录与所述图片标签对应的DOM节点；
排版单元，用于根据所述图片标签的CSS属性进行图片排版。
优选地，图片确定单元可以包括：查询单元，用于查询所述记录表中记录的DOM节点的排版结果；
判断单元，用于根据所述排版结果，判断与所述DOM节点对应的图片标签所对应的图片的位置是否在所述页面资源加载范围内；
第一确定单元，用于在所述判断单元判定所述位置在所述页面资源加载范围内的情况下，确定所述图片为所述页面资源加载范围内的待加载图片。
优选的，图片确定单元可以包括：排版查询单元，用于查询所述记录表中记录在所述页面资源加载范围内的DOM节点的排版结果；
节点判断单元，用于根据所述排版结果，判断所述页面资源加载范围内的DOM节点是否具有图片标签；
第二确定单元，用于在所述节点判断单元判定所述页面资源加载范围内的DOM节点中，具有图片标签，则确定所述图片标签对应的图片为所述页面资源加载范围内的待加载图片。
优选地，图片确定单元还可以包括：删除单元，用于在记录表中删除对页面资源加载范围内的待加载图片所对应的DOM节点的记录。
优选地，预定距离可以是基于一次屏幕显示范围移动指令将使屏幕显示范围移动的距离。
优选的，当所述页面资源为网页的插件时，所述装置还包括：
插件确定单元，用于确定页面资源的加载范围的可视型插件；以及
所述加载单元包括第一插件加载单元，用于加载所述页面资源加载范围内的可视型插件。
优选的，插件确定单元包括：
第一判断单元，用于判断所述页面文件中包含的插件是否可视型插件；以及
第二判断单元，用于判断所述可视型插件的位置是否在所述页面资源加载范围内。
优选的，还包括：第三判断单元，用于判断所述页面资源加载范围以外的可视型插件的尺寸数据是否小于或等于预定阈值；以及
所述加载单元还包括第二插件加载单元，用于加载所述页面资源加载范围以外尺寸数据小于或等于所述预定阈值的可视型插件。
优选的，还包括：占位单元，用于使用占位插件替代所述页面资源加载范围以外尚未加载的可视型插件；以及
插件信息保存单元，用于保存被占位插件替代的可视型插件的插件信息。
优选的，所述加载单元还包括：
第三插件加载单元，用于响应于当前屏幕显示范围发生变化，根据所述插件信息保存单元所保存的插件信息，进一步加载相应变化后的页面资源加载范围内尚未加 载的可视型插件。
根据本发明的另一个方面，提供了一种具有处理器可执行的程序代码的计算机可读介质，所述程序代码使处理器执行下述步骤：
解析获取的页面文件；
基于解析结果，确定页面资源的加载范围，所述页面资源的加载范围包括当前屏幕显示范围、或者包含在所述当前屏幕显示范围之外，但在预定距离内的预定距离范围、或者包含所述当前屏幕显示范围以及在所述当前屏幕显示范围之外，但在预定距离内的预定距离范围；以及
加载所述页面资源的加载范围内的页面资源。
通过使用本发明的页面资源加载方法和装置，在初始加载网页时没有加载全部页面资源以节省流量的情况下，在浏览过程中适应性地自动加载了部分页面资源，以备用户浏览，实现了在流畅地浏览含有页面资源的网页与节省系统资源或网络资源之间的良好平衡。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，对于本领域普通技术人员而言，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
图1是根据本发明的页面资源加载方法的一个实施例的示意性流程图。
图2是根据本发明的页面资源加载方法的另一个实施例的示意性流程图。
图3是在根据本发明的方法加载网页图片时对网页源文件进行解析和排版的流程图。
图4是用来确定页面资源加载范围内的待加载图片的一种方式的流程图。
图5是根据本发明一个实施例的页面资源加载装置的示意性方框图。
图6是根据本发明另一个实施例的页面资源加载装置的示意性方框图。
图7是根据本发明另一个实施例的页面资源加载装置的示意性方框图。
图8是图片确定单元的示意性方框图。
图8是根据本发明的页面资源加载方法的再一个实施例的示意性流程图。
图9是根据本发明改进实施例的页面资源加载方法加载插件的示意性流程图。
图10是根据本发明响应于当前屏幕显示范围的变化而进一步加载插件的步骤的示意性流程图。
图11是根据本发明的页面资源加载装置的加载插件时的示意性框图。
图12是根据本发明改进实施例的插件加载单元的示意性框图。
在所有附图中相同的标号指示相似或相应的特征或功能。
具体实施方式
下面描述本公开的各个方面。应该明白的是，本文的教导可以以多种多样形式具体体现，并且在本文中公开的任何具体结构、功能或两者仅仅是代表性的。基于本文的教导，本领域技术人员应该明白的是，本文所公开的一个方面可以独立于任何其它方面实现，并且这些方面中的两个或多个方面可以按照各种方式组合。例如，可以使用本文所阐述的任何数目的方面，实现装置或实践方法。另外，可以使用其它结构、功能、或除了本文所阐述的一个或多个方面之外或不是本文所阐述的一个或多个方面的结构和功能，实现这种装置或实践这种方法。此外，本文所描述的任何方面可以包括权利要求的至少一个元素。
下面参考附图1-12来详细描述根据本发明的页面资源加载方法和装置。
为避免掩蔽本发明的主要技术构思，这里没有描述一些细节，也没有描述一些一般的页面资源加载方法和装置中常用的常规步骤和装置。
图1是根据本发明的页面资源加载方法的一个实施例的示意性流程图。
如图1所示，本实施例的页面资源加载方法，包括：
在步骤S100，解析获取的页面文件。
页面文件一般是指网页源文件，例如，页面文件通常包括HTML(HyperText Markup Language，超级文本标记语言)文件。
用户在浏览器地址栏中输入地址，或者通过在别的页面点击超链接，开始请求访问网页。特别是在使用手机等移动通信终端访问网页时，很多网页的内容往往多于屏幕一次能够显示的内容。
在加载页面文件(例如HTML文件)时，网页中至少部分页面资源并没有立即加载，以便避免下载不必要的网页内容，节省系统资源或网络资源，若流量和带宽等。
另外，若网页中文字的字节数较少，可以下载该网页全部的文字内容，或者，也可以根据需求或设置下载网页中预定部分的文字内容。
获取完页面文件后，对网页源文件进行解析，也就是对HTML文件进行解析。一般解析完成之后，就能生成网页对应的DOM树。
在步骤S101，基于解析结果，确定页面资源的加载范围，所述页面资源的加载范围包括当前屏幕显示范围、或者包含在所述当前屏幕显示范围之外，但在预定距离内的预定距离范围、或者包含所述当前屏幕显示范围以及在所述当前屏幕显示范围之外，但在预定距离内的预定距离范围。
在步骤S102，加载所述页面资源的加载范围内的页面资源。
本实施例获取到网页源文件后，并不是对页面资源直接进行加载，而是先确定页面资源的加载范围，然后再加载所述加载范围内的页面资源。这样会大大节省终端系统的资源和网络流量。
图2是根据本发明的页面资源加载方法的另一个实施例的示意性流程图。
如图2所示，当所述页面资源为图片时，本发明的页面资源加载方法包括：
用户在浏览器地址栏中输入地址，或者通过在别的页面点击超链接，开始请求访问网页。特别是在使用手机等移动通信终端访问网页时，很多网页的内容往往多于屏幕一次能够显示的内容。
在加载网页源文件(例如HTML)文件时，网页中至少部分图片并没有立即加载，以便避免下载不必要的图片，节省流量。
其中，网页中至少部分图片并没有立即加载，包含多种情况，其中一种情况下，没有下载任何图片；另一种情况下，只下载网页中首屏的图片，即第一屏要显示的图片；或者，只下载字节数小于预定数值的图片。
这种情况下，所述方法还包括步骤S200。在步骤S200，确定页面资源加载范围内的待加载图片。本步骤S200是响应于网页首次排版完成，或者响应于屏幕显示范围移动指令，开始确定页面资源加载范围内的待加载图片。通常在网页首次排版完成或者接收到屏幕显示范围变化的指令后，开始确定页面资源加载范围内的待加载图片。
然后，在步骤S300，加载页面资源加载范围内的待加载图片。也就是说，所述加载所述页面资源的加载范围内的页面资源，指的是加载页面资源加载范围内的待加载图片。
下面对上述步骤进行说明。
当下载了网页源文件之后，网页浏览器，特别是智能手机的网页浏览器会对网页内容重新排版，以适应智能手机的屏幕。
一方面，当网页首次排版完成时，屏幕上将显示第一屏的内容。如果在第一屏的内容中有待加载的图片，则可以认为需要加载该图片以供用户浏览。这些图片一般都会被用户浏览，能够发挥图片的意义。此时不需要等待用户的指令，就开始加载图片，以便在屏幕上显示。
或者，如果在第一屏之后预定距离的范围内有待加载的图片，则可以认为用户接下来很有可能要浏览这些图片，所以可以提前加载这些图片以便在用户发出屏幕显示范围移动指令时可以直接显示这些图片。此时，图片尚不需要在屏幕上显示，但是用户接下来继续浏览这些图片的可能性较大，提前加载这些图片可以减少用户的等待时间，改善用户的上网体验。
另一方面，当用户通过按压进度条的下拉按钮、点击进度条、点击翻页指令或者通过滑屏操作等方式发出屏幕显示范围移动指令时，屏幕上将显示新的内容，如果这些新显示的内容中有尚未加载的图片，则需要加载该图片。另外，如果新显示的内容之后预定距离的预定距离范围内有待加载的图片，也可以提前加载这些图片，以便在用户下一次发出屏幕显示范围移动指令时可以直接显示这些图片。
在本发明的上下文中，屏幕显示范围是指屏幕一次显示的网页内容的范围。屏幕显示范围移动指令则是使得屏幕上显示的网页内容的范围上下左右移动的指令，例如翻页指令、下拉指令、滑屏指令等。当前屏幕显示范围则是当前在屏幕上显示的网页内容的范围。
在本发明中，定义了页面资源加载范围。在该范围中的待加载图片(或者说，未加载图片)可以被认为是需要加载的图片。在本发明中，页面资源加载范围可以是当前屏幕显示范围，也可以是当前屏幕显示范围以外预定距离内的预定距离范围，也可以既包括当前屏幕显示范围，又包括当前屏幕显示范围以外预定距离内的预定距离范围。也就是说，步骤S200中的页面资源加载范围包括当前在屏幕上显示的网页内容的范围，或者，所述页面资源加载范围包括该显示范围以外预定距离内的预定距离范围，或者，所述页面资源加载范围除了包括当前在屏幕上显示的网页内容的范围，还包括该显示范围以外预定距离内的预定距离范围。
这个预定距离可以基于图片的顶端、中间、末端或其它位置计算。不论以何为基准计算，意义都可以是一样的，只是对于同样的范围所设定的数值会有所不同而已。
另一方面，这个预定距离可以相对于当前屏幕显示范围的边缘(例如上边缘(向上移动时)、下边缘(向下移动时)、左边缘(向左移动时)、右边缘(向右移动时))计算。
这个预定距离可以根据需要，例如浏览习惯、用户对流量的敏感程度等，提前设置。另外，还可以为用户提供设置工具，以便于设置该预定距离。
作为示例，预定距离可以对应于屏幕一次能够显示的网页内容范围，或者说，对应于一屏(一个屏幕显示范围)内容。即，提前加载下一屏的网页内容中的图片。
当然，预定距离也可以设置为对应于两屏或三屏或更多，即提前下载下两屏、下三屏甚至更多的网页内容中的图片。
作为另一个示例，预定距离还可以对应于基于一次屏幕显示范围移动指令将在屏幕上新增加的网页内容范围。例如，通过按压进度条下的下拉按钮、点击进度条或者通过滑屏操作等方式发出屏幕显示范围移动指令时，屏幕上原来显示的网页内容向上移动，预定距离对应新增进入屏幕显示的那部分网页内容范围。即，将提前加载通过一次屏幕显示范围移动指令将新增进入屏幕显示的网页内容中的图片。
同样地，预定距离也可以设置为对应于基于多次屏幕显示范围移动指令将在屏幕上新增加的网页内容范围，即，浏览器提前加载通过多次屏幕显示范围移动指令将新增进入屏幕显示的网页内容中的图片。
在使用智能手机等访问网页时往往需要对网页内容进行排版，以使显示的网页符合智能手机等的屏幕，当前屏幕显示范围和预定距离范围可以基于排版结果来确定。而图片的位置则可以在对网页源文件解析过程中得知。
图3是在根据本发明的方法加载网页图片时对网页源文件进行解析和排版的流程图。
如图3所示，解析和排版的操作可以在图2中确定页面资源加载范围内的待加载图片的步骤S200之前执行。更具体地，这些操作可以是在加载网页源文件之后或在加载网页源文件的过程中执行的。其中，本发明中对网页源文件进行解析和排版的操作包括以下步骤：
在步骤S110，解析所获取网页源文件以生成DOM树。这一步骤可以按与现有技术中相同的方式来执行。
在步骤S120，判断DOM树中是否有图片标签。
如果在步骤S120中判定没有图片标签，则在步骤S150继续进行常规的加载显示流程。
如果在步骤S120中判定有图片标签，则在步骤S130中，在记录表中记录与该图片标签对应的DOM节点，即当在解析过程中发现有图片标签时，在记录表中记录与所述图片标签对应的DOM节点。并且在步骤S140中，在对网页排版的过程中，根据该图片标签的层叠样式表(CSS)属性对该图片进行排版。
在上面的描述和图3中，步骤S130在前，步骤S140在后。然而，本领域技术人员应该明白，这两个步骤的顺序完全可以颠倒过来，即步骤S130在前，而步骤S140在后。或者，这两个步骤也可以同时执行。
在图3所示的操作结束之后，已下载了网页中的文字内容(或者至少部分文字内容)，记录了有图片的网页中包含的DOM节点，并且根据图片标签的CSS属性进行了图片排版。之后，可以渲染显示已经下载的网页的文字内容和已经下载的当前屏幕显示范围内的图片(如果已经下载了部分图片的话)了。
另一方面，也做好了对待加载图片的加载准备工作。换句话说，为步骤200中确定页面资源加载范围内的待加载图片提供了依据。
下面参考图4来详细描述本发明用来确定页面资源加载范围内的待加载图片的一种方式的示例性流程。
首先，在步骤S210，查询记录表中记录的DOM节点的排版结果。
在步骤S220，根据排版结果，判断与该DOM节点对应的图片标签所对应的图 片(也可以称为“该DOM节点对应的图片”)的位置是否在页面资源加载范围内。
如果在步骤S220中判定位置不在页面资源加载范围内，则在步骤S230中选择记录表中下一个DOM节点，然后返回步骤S210重新查询排版结果。
如果在步骤S220中判定位置在页面资源加载范围内，则在步骤S240确定该DOM节点对应的图片是页面资源加载范围内的待加载图片。
另外，可以在步骤S250，在记录表中删除对该DOM节点的记录，以避免重复加载。
图4中示出在步骤S240之后执行步骤S250。然而，本领域技术人员应该明白，步骤S250与步骤S240之间可以没有先后关系。步骤S250可以在步骤S240之后、之前或同时执行。
然后，在步骤S260中，查看记录表中是否还有尚未经步骤S220判断过的DOM节点。
如果有，则进入步骤S230，选择记录表中下一个DOM节点，然后返回步骤S220重新进行判断。由此，对记录表中每一个DOM节点进行上述判断和相应处理。
如果没有，即已经对记录表中所有DOM节点进行判断，则本次图片加载过程结束。
图4的流程可以在图3所示步骤S140的首次排版完成后，即刚开始访问网页时执行，以便基于在屏幕上初始显示的网页内容范围选择性地加载图片。
另外，图4的流程也可以响应于用户的屏幕显示范围移动指令(例如翻页或下拉指令)而执行，以便随时更新以加载可能需要的图片。
图4的流程图给出了一种确定页面资源加载范围内的待加载图片的方式。然而本领域技术人员应当明白，完全有可能有其它方式来实现这一目的。
例如，可以在解析排版完成之后，或者在用户发出屏幕显示范围移动指令之后，遍历DOM树上的所有节点以判断是否有图片标签，是否在页面资源加载范围之内，即不需要如步骤S130所述在记录表中记录有图片标签的DOM节点。
另外，也可以基于页面资源加载范围，对页面资源加载范围内的DOM节点判断是否有图片标签，而不是如步骤S210和S220那样基于记录表中的DOM节点进行判断。这种情况下，查询记录表中记录在所述页面资源加载范围内的DOM节点的排 版结果，并根据排版结果，判断页面资源加载范围内的DOM节点是否具有图片标签，若在页面资源加载范围内的DOM节点中，具有图片标签，则确定所述图片标签对应的图片为所述页面资源加载范围内的待加载图片。
另外，这种情况下，在查询记录表后，可在记录表中删除对该DOM节点的记录，以避免重复的查询。
通过使用本发明的页面资源加载方法，在初始加载网页时没有加载全部图片以节省流量的情况下，在浏览过程中适应性地自动加载了部分图片，以备用户浏览，实现了在流畅地浏览含有图片的网页与节省流量之间的良好平衡。
下面简要描述本发明公开的页面资源加载装置。
图5是根据本发明另一个实施例的页面资源加载装置的示意性方框图。
如图5所示，本实施例的页面资源加载装置包括：
解析单元500，用于解析获取的页面文件。页面文件一般是指网页源文件，例如，页面文件通常包括：HTML文件。
用户在浏览器地址栏中输入地址，或者通过在别的页面点击超链接，开始请求访问网页。特别是在使用手机等移动通信终端访问网页时，很多网页的内容往往多于屏幕一次能够显示的内容。
在解析页面文件(例如HTML)文件时，网页中至少部分页面资源并没有立即加载，以便避免下载不必要的网页内容，节省流量。
另外，若网页中文字的字节数较少，可以下载该网页全部的文字内容，或者，也可以根据需求或设置下载网页中预定部分的文字内容。
获取完页面文件后，解析单元500对网页源文件进行解析，也就是对HTML文件进行解析。解析完成之后，就能生成对应的DOM树。
范围确定单元501，用于基于解析结果，确定页面资源的加载范围，所述页面资源的加载范围包括当前屏幕显示范围、或者包含在所述当前屏幕显示范围之外，但在预定距离内的预定距离范围、或者包含所述当前屏幕显示范围以及在所述当前屏幕显示范围之外，但在预定距离内的预定距离范围。
加载单元502，用于加载所述页面资源的加载范围内的页面资源。
其中，所述页面资源包括：网页的图片和/或网页的插件，这种情况下，所述范围确定单元，用于基于解析结果，确定页面图片和/或网页的插件的加载范围。
本实施例的解析单元在获取到网页源文件后，并不是对页面资源直接进行加载，而是先确定页面资源的加载范围，然后再加载所述加载范围内的页面资源。这样会大大节省终端系统的资源和网络流量。
图6是根据本发明另一个实施例的页面资源加载装置的示意性方框图。
如图6所述，根据本发明另一个实施例的页面资源加载装置加载图片资源时，除了包括图5所示的解析单元500、范围确定单元501和加载单元502之外，还可以包括图片确定单元440。另外，还可以包括记录单元420和排版单元430。
其中，所述解析单元500中包括第一解析单元410，所述第一解析单元410用于对源文件进行解析以生成DOM树。
所述图片确定单元440用于确定页面资源的加载范围内的待加载图片，其中，所述图片确定单元440通常响应于网页首次排版完成或响应于屏幕显示范围移动指令，参考记录表和排版结果，确定页面资源加载范围内的待加载图片。
所述记录单元420，用于当在解析过程中发现有图片标签时，在记录表中记录与图片标签对应的DOM节点。
所述排版单元430，用于根据图片标签的CSS属性进行图片排版。
其中，第一解析单元420、记录单元420和排版单元430的操作可分别对应于上文中参考图3描述的步骤S110、S130和S140，在此不再赘述。
所述加载单元502包括图片加载单元450，用于加载页面资源的加载范围内的待加载图片。
图7是图片确定单元440的示意性方框图。
如图7所示，图片确定单元440可以包括查询单元442、判断单元444、第一确定单元446和删除单元448。
所述查询单元442，用于查询记录表中记录的每个DOM节点的排版结果。
所述判断单元444，用于根据排版结果，判断与DOM节点对应的图片标签所对应的图片的位置是否在页面资源加载范围内；
所述第一确定单元446，用于在判断单元判定位置在页面资源加载范围内的情况下，确定图片为页面资源加载范围内的待加载图片。
所述删除单元448，用于在记录表中删除对页面资源加载范围内的待加载图片所对应的DOM节点的记录。
查询单元442、判断单元444、确定单元446和删除单元448的操作可以分别对应于上文中参考图4描述的步骤S210、S220、S240和S250，在此不再赘述。
相应的，本申请另一种形式的图片确定单元440可以包括排版查询单元、节点判断单元和第二确定单元，并且，还可以包括删除单元。
其中，所述排版查询单元，用于查询所述记录表中记录在所述页面资源加载范围内的DOM节点的排版结果；
所述节点判断单元，用于根据所述排版结果，判断所述页面资源加载范围内的DOM节点是否具有图片标签；
所述第二确定单元，用于如果在所述页面资源加载范围内的DOM节点中，具有图片标签，则确定所述图片标签对应的图片为所述页面资源加载范围内的待加载图片。
所述删除单元在记录表中删除对页面资源加载范围内的待加载图片所对应的DOM节点的记录。
通过使用本发明的页面资源加载装置，在初始加载网页时没有加载全部图片以节省了流量的情况下，在浏览过程中适应性地自动加载了部分图片，以备用户浏览，实现了在流畅地浏览含有图片的网页与节省流量之间的良好平衡。
图8是根据本发明的页面资源加载方法的再一个实施例的示意性流程图。
图8所示，当所述页面资源为插件时，本发明的页面资源加载方法包括：
首先在步骤S801，加载页面文件并对页面文件进行解析和排版。
然后，在步骤S802，基于排版的结果，确定页面文件中插件加载范围内的可视型插件。
插件加载范围是页面文件中的一个范围，落在其中的可视型插件需要被加载。
一般地，插件加载范围可以包括当前屏幕显示范围。即，当前屏幕显示范围内的可视型插件都是需要加载的。
在优选实施例中，插件加载范围可以包括当前屏幕显示范围之外预定距离内的预定距离范围，或者所述插件加载范围包括当前屏幕显示范围以及当前屏幕显示范围之外预定距离内的预定距离范围。
这里，“之外”可以包括之前和之后，在页面显示内容较宽的情况下，还可以包括之左和之右。
预定距离可以对应于一个屏幕显示范围的距离，即一屏的高度(之前或之后的情况下)或宽度(之左或之右的情况下)。
或者，预定距离可以对应于一次或若干次屏幕显示范围移动指令将使屏幕显示范围移动的距离，其中，所述屏幕显示范围移动指令可以为如翻页指令(上翻指令(Page Up)、下翻指令(Page Down)或者点击进度条指令。
预定距离也可以是其它指定距离。
这样，可以将一些尚未进入当前屏幕显示范围但是很可能接下来就会进入当前屏幕显示范围的可视型插件提前纳入插件加载范围以便预加载，从而能够减少用户在翻页过程中等待加载新进入当前屏幕显示范围的可视型插件的时间。
然后，在步骤S803，加载步骤S802中所确定的插件加载范围内的可视型插件。也就是说，所述加载所述页面资源的加载范围内的页面资源，指的是加载页面资源加载范围内的可视型插件。
这里，通过引入插件加载范围，加载该插件加载范围内的可视型插件，能够避免加载用户看不到的不必要的可视型插件，从而节省大量资源。
图9是根据本发明改进实施例的页面资源加载方法加载插件的示意性流程图。
如图9所示，步骤S802可以包括两个判断步骤S8021和S8022。
在步骤S801，加载页面文件并对页面文件进行解析和排版之后，对页面中的各个插件分别执行步骤S8021和步骤S8022的判断。这样，对于不同类型、不同位置的插件有效地进行区别处理。
图9中示出了先执行步骤S8021的判断，后执行步骤S8022的判断的情况。其中，步骤S8021用于对插件的属性是否“可视”进行判断，步骤S8022用于对插件所 在的位置是否“可见”进行判断，即，图9中先判断插件是否为可视型插件，然后再判断可视型插件是否在插件加载范围内。然而，应当理解，也可以先执行步骤S8022的位置“可见”判断，再执行步骤S8021的属性“可视”判断。即，先判断插件是否在插件加载范围内，然后再判断插件加载范围内的插件是否为可视型插件。
在步骤S8021，判断页面文件中包含的插件是否为可视型插件。即对插件本身的属性进行判断，确定是否“可视”。
例如，可以根据插件的尺寸数据来判断插件是否为可视型插件。
尺寸数据可以包括宽度值(width)和高度值(height)。另外，还可以根据可视型插件的形状或其它几何参数值来判断插件是否为可视型插件。
例如，可以认为，满足以下条件的插件是可视型插件：
宽度值width>0，高度值height>0。
这样，可以简便地区分可视型插件和不可视型插件(功能型插件)。
如果在步骤S8021判定插件是不可视型插件，则进入步骤S8031，按照常规方案进行处理，例如直接加载该不可视型插件。
页面中往往有一些不可视型插件(功能型插件)，例如用于播放背景音乐的插件，即使不在屏幕显示范围内，但是也需要加载，否则无法实现相应功能。换句话说，对这类插件的加载可以与其位置无关。
如果在步骤S8021判定插件是可视型插件，则进入步骤S8022做进一步的判断。
在步骤S8022，判断该可视型插件的位置是否在所述插件加载范围内。即，对插件所处的位置进行判断，确定是否“可见”，通常认为在插件加载范围内即为“可见”。
如果在步骤S8022判定该可视型插件的位置在插件加载范围内，则进入步骤S803，如上文中参考图8所描述，加载该可视型插件。
如果在步骤S8022判定该可视型插件的位置不在插件加载范围内，则可以在步骤S8023进一步判断该可视型插件的尺寸数据是否小于或等于预定阈值。
如果在步骤S8023判定该可视型插件的尺寸数据小于或等于预定阈值，则可以进入步骤S8032，加载该可视型插件。
这样，对于一些较小的可视型插件可以直接加载，而只对于一些较大的可视型 插件进行延迟加载，处理更加有针对性，可以进一步提升用户的体验。
如果在步骤S8023判定尺寸数据大于预定阈值，则可以进入步骤S804，在步骤S804，使用占位插件替代该可视型插件，即，使用占位插件替代在所述插件加载范围以外，且尚未加载的可视型插件)。
占位插件可以被认为是浏览器内置的很简单的插件，它满足插件的所有特性，例如具有和被替代的可视型插件相同的高度值和宽度值，坐标、样式等也与被替代的可视型插件一致，只是所有实体数据都是内置的。
占位插件本身可以是一个实现了blink::Plugin接口的插件元素。占位插件对用户不可见，是为了满足页面排版等需要而存在的。
通过使用占位插件，使得能够在未加载一些可视型插件的情况下顺利完成排版。
另一方面，还可以在步骤S805，保存被占位插件替代的可视型插件的插件信息，以便后续需要时(例如当前屏幕显示范围发生变化时)根据所保存的插件信息加载该可视型插件。这种情况下，插件信息可以是可视型插件的URL等使得能够加载该可视型插件的信息。
这样，使得能够在需要时根据所保存的插件信息加载这些可视型插件。
图9中示出了步骤S8023和步骤S8031，使得对于较小的可视型插件，即使其不在插件加载范围内，也可以直接加载，而只使用占位插件替代较大的可视型插件以便实现延迟加载，从而在不增加太多资源消耗的情况下，改善用户的体验。
然而，应当明白，也可以使用占位插件替代插件加载范围以外所有可视型插件，而不考虑其尺寸大小。换言之，步骤S8023和步骤S8031是可以省略的。
上面参考图8和图9描述了例如初次加载网页时的操作。随着用户浏览进程，当前屏幕显示范围会发生变化。响应于当前屏幕显示范围发生变化，可以根据步骤S805中保存的插件信息，进一步加载相应变化后的插件加载范围内之前尚未加载的可视型插件。
下面参考图10描述后期随着当前屏幕显示范围的变化而进一步加载可视型插件的一种示例性过程。
图10是根据本发明响应于当前屏幕显示范围的变化而进一步加载插件的步骤的示意性流程图。
在步骤S610，判断当前屏幕显示范围是否发生了变化。例如，可以响应于屏幕显示范围移动指令来做出相应判断，其中，所述屏幕显示范围移动指令可以为如翻页指令(上翻指令(Page Up)、下翻指令(Page Down)或者点击进度条指令。
插件加载范围是基于当前屏幕显示范围定义的。因此，在当前屏幕显示范围发生变化时，插件加载范围也会相应地发生变化。
如果在步骤S610判定还没有发生变化，则可以返回步骤S610继续监测。
如果在步骤S610判定已经发生变化，则可以在步骤S620进一步判断相应变化后的插件加载范围内是否有尚未加载的可视型插件。
如果在步骤S620判定相应变化后的插件加载范围内没有尚未加载的可视型插件，则可以返回步骤S610继续监测。
如果在步骤S620判定相应变化后的插件加载范围内有尚未加载的可视型插件，则可以进入步骤S630，根据图9所示步骤S805中所保存的插件信息，进一步加载相应变化后的插件加载范围内尚未加载的可视型插件，从而可以使用新加载的可视型插件来替换原来的占位插件。
这样，可以根据用户浏览的进程来进一步加载可视型插件，使得浏览体验更加流畅。
另外，不需要通过用户执行例如点击未加载的可视型插件等操作来启动加载，操作更加简便、顺畅。
上面参考图8至10详细描述了根据本发明的加载页面中的插件的方法(插件加载方法)。下面参考图11和图12详细描述根据本发明的加载页面中的插件的装置(插件加载装置)。图11和图12中的各个单元分别与图8至图10中的各个步骤对应。为了避免重复，这里将省略对一些相关细节的详细描述。
图11是根据本发明的页面资源加载装置加载插件时的示意性框图。
如图11所示，本发明的页面资源加载装置包括解析单元500(用于解析获取的页面文件)、范围确定单元501(用于基于解析结果，确定页面资源的加载范围)和加载单元502(用于加载所述页面资源的加载范围内的页面资源)，另外，在加载网页的插件时，所述页面资源加载装置中包括：插件确定单元200，所述插件确定单元 200用于确定页面资源的加载范围的可视型插件；
所述加载单元502包括第一插件加载单元300，所述第一插件加载单元用于加载页面资源加载范围内的可视型插件。
这里，通过加载页面资源加载范围内的可视型插件，能够避免加载用户看不到的不必要的可视型插件，从而节省大量流量。
如图12所示，插件确定单元200可以包括两个判断单元。
第一判断单元210用于判断页面文件中包含的插件是否可视型插件。对于不是可视型插件的插件(功能型插件)，可以通过相应的插件加载单元(图中未示出)来按照常规程序直接加载而不需额外的等待或延迟。
第二判断单元220用于判断所述可视型插件的位置是否在插件加载范围内。
通过第一判断单元210和第二判断单元220的判断，插件确定单元200可以确定插件加载范围内的可视型插件。
这样，第一插件加载单元300就可以加载插件加载范围内的这些可视型插件。
进一步地，该页面资源加载装置还可以进一步包括第三判断单元230。
第三判断单元230用于判断插件加载范围以外的可视型插件的尺寸数据是否小于或等于预定阈值。
根据第三判断单元230的判断结果，可以由不同的单元对插件加载范围以外的可视型插件执行处理。
对于插件加载范围以外尺寸数据小于或等于预定阈值的可视型插件，可以由第二插件加载单元310来直接加载，即第二插件加载单元310用于加载所述页面资源加载范围以外尺寸数据小于或等于预定阈值的可视型插件。
另一方面，对于插件加载范围以外尺寸数据大于预定阈值的可视型插件，可以暂不加载，而是通过占位单元600使用占位插件替代。即由占位单元600用于使用占位插件替代插件加载范围以外尚未加载的可视型插件。
相应地，可以通过插件信息保存单元700用于保存被占位插件替代的可视型插件的插件信息。该插件信息例如可以是可视型插件的URL等使得能够加载该可视型插件的信息。
为了在当前屏幕显示范围发生变化时相应地补充加载先前为加载的可视型插件，该页面资源加载装置还可以包括第三插件加载单元800。
第三插件加载单元800用于响应于当前屏幕显示范围发生变化，根据插件信息保存单元700所保存的插件信息，进一步加载相应变化后的插件加载范围内尚未加载的可视型插件。从而可以使用新加载的可视型插件来替换原来的占位插件。
上文中已经参考附图详细描述了根据本发明的加载页面中的插件的方法和装置。
综上可知，通过根据本发明的方法和装置，能够避免加载用户看不到的不必要的可视型插件，从而节省大量资源。
相应的，本申请还公开一种具有处理器可执行的程序代码的计算机可读介质，所述程序代码使处理器执行下述步骤：
解析获取的页面文件；
基于解析结果，确定页面资源的加载范围，所述页面资源的加载范围包括当前屏幕显示范围、或者包含在所述当前屏幕显示范围之外，但在预定距离内的预定距离范围、或者包含所述当前屏幕显示范围以及在所述当前屏幕显示范围之外，但在预定距离内的预定距离范围；以及
加载所述页面资源的加载范围内的页面资源。
至此，已详细描述了根据本发明页面资源加载方法和装置的具体实施例。然而本领域技术人员应该明白，本发明不限于这里描述的各种细节，在不背离权利要求限定的本发明的范围的前提下，可以进行多种改变和修改。根据这里描述的发明实施例的方法权利要求的功能、步骤和/或动作不需以任何特定顺序执行。此外，尽管本发明的元素可以以个体形式描述或要求，但是也可以设想多个，除非明确限制为单数。
虽然如上参照图描述了根据本发明的各个实施例进行了描述，但是本领域技术人员应当理解，对上述本发明所提出的各个实施例，还可以在不脱离本发明内容的基础上做出各种改进。因此，本发明的保护范围应当由所附的权利要求书的内容确定。

Claims (28)

  1. 一种页面资源加载的方法，其特征在于，包括：
    解析获取的页面文件；
    基于解析结果，确定页面资源的加载范围，所述页面资源的加载范围包括当前屏幕显示范围、或者包含在所述当前屏幕显示范围之外，但在预定距离内的预定距离范围、或者包含所述当前屏幕显示范围以及在所述当前屏幕显示范围之外，但在预定距离内的预定距离范围；以及
    加载所述页面资源的加载范围内的页面资源。
  2. 根据权利要求1所述的方法，其特征在于，所述页面资源包括：网页的图片和/或网页的插件。
  3. 根据权利要求2所述的方法，其特征在于，所述页面资源为网页的图片时，所述方法还包括：
    确定页面资源的加载范围内的待加载图片。
  4. 根据权利要求3所述的方法，其特征在于，还包括：
    当在解析过程中发现有图片标签时，在记录表中记录与所述图片标签对应的DOM节点；以及
    根据所述图片标签的CSS属性进行图片排版。
  5. 根据权利要求4所述的方法，其特征在于，所述确定页面资源加载范围内的待加载图片的步骤包括：
    查询所述记录表中记录的DOM节点的排版结果；
    根据所述排版结果，判断与所述DOM节点对应的图片标签所对应的图片的位置是否在所述页面资源加载范围内；
    如果在所述页面资源加载范围内，则确定所述图片为所述页面资源加载范围内的待加载图片。
  6. 根据权利要求4所述的方法，其特征在于，所述确定页面资源加载范围内的待加载图片的步骤包括：
    查询所述记录表中记录在所述页面资源加载范围内的DOM节点的排版结果；
    根据所述排版结果，判断所述页面资源加载范围内的DOM节点是否具有图片标签；
    如果在所述页面资源加载范围内的DOM节点中，具有图片标签，则确定所述图片标签对应的图片为所述页面资源加载范围内的待加载图片。
  7. 根据权利要求4-6任意一项所述的方法，其特征在于，还包括：
    在所述记录表中删除对所述页面资源加载范围内的待加载图片所对应的DOM节点的记录。
  8. 根据权利要求1至7任意一项所述的方法，其特征在于，所述预定距离是基于一次屏幕显示范围移动指令将使屏幕显示范围移动的距离。
  9. 根据权利要求2所述的方法，其特征在于，当所述页面资源为网页的插件时，所述方法还包括：
    确定页面资源的加载范围内的可视型插件。
  10. 根据权利要求9所述的方法，其特征在于，还包括：
    判断所述页面文件中包含的插件是否是可视型插件；以及
    判断所述可视型插件的位置是否在所述页面资源的加载范围内。
  11. 根据权利要求9所述的方法，其中，
    根据所述插件的尺寸数据来判断所述插件是否可视型插件。
  12. 根据权利要求9所述的方法，其特征在于，还包括：
    判断所述页面资源加载范围以外的可视型插件的尺寸数据是否小于或等于预定阈值；以及
    加载所述页面资源加载范围以外尺寸数据小于或等于预定阈值的可视型插件。
  13. 根据权利要求9至12中任何一项所述的方法，其特征在于，还包括：
    使用占位插件替代所述页面资源加载范围以外尚未加载的可视型插件；
    保存被占位插件替代的可视型插件的插件信息。
  14. 根据权利要求13所述的方法，其特征在于，还包括：响应于当前屏幕显示范围发生变化，根据所保存的插件信息，进一步加载相应变化后的页面资源加载范围内尚未加载的可视型插件。
  15. 一种页面资源加载的装置，其特征在于，包括：
    解析单元，用于解析获取的页面文件；
    范围确定单元，用于基于解析结果，确定页面资源的加载范围，所述页面资源的加载范围包括当前屏幕显示范围、或者包含在所述当前屏幕显示范围之外，但在预定距离内的预定距离范围、或者包含所述当前屏幕显示范围以及在所述当前屏幕显示范围之外，但在预定距离内的预定距离范围；以及
    加载单元，用于加载所述页面资源的加载范围内的页面资源。
  16. 根据权利要求15所述的装置，其特征在于，所述页面资源包括：网页 的图片和/或网页的插件，
    其中，所述范围确定单元，用于基于解析结果，确定页面图片和/或网页的插件的加载范围。
  17. 根据权利要求15所述的装置，其特征在于，当所述页面资源为网页的图片时，所述装置还包括，图片确定单元，用于确定页面资源的加载范围内的待加载图片；
    其中，加载单元包括图片加载单元，用于加载页面资源的加载范围内的待加载图片。
  18. 根据权利要求16所述的装置，其特征在于，还包括：
    记录单元，用于当在解析单元在解析页面文件过程中发现有图片标签时，在记录表中记录与所述图片标签对应的DOM节点；
    排版单元，用于根据所述图片标签的CSS属性进行图片排版。
  19. 根据权利要求17所述的装置，其特征在于，所述图片确定单元包括：
    查询单元，用于查询所述记录表中记录的DOM节点的排版结果；
    判断单元，用于根据所述排版结果，判断与所述DOM节点对应的图片标签所对应的图片的位置是否在所述页面资源加载范围内；
    第一确定单元，用于在所述判断单元判定所述位置在所述页面资源加载范围内的情况下，确定所述图片为所述页面资源加载范围内的待加载图片。
  20. 根据权利要求18所述的装置，其特征在于，所述图片确定单元包括：
    排版查询单元，用于查询所述记录表中记录在所述页面资源加载范围内的DOM节点的排版结果；
    节点判断单元，用于根据所述排版结果，判断所述页面资源加载范围内的DOM节点是否具有图片标签；
    第二确定单元，用于在所述节点判断单元判定所述页面资源加载范围内的DOM节点中，具有图片标签，则确定所述图片标签对应的图片为所述页面资源加载范围内的待加载图片。
  21. 根据权利要求18-20任意一项所述的装置，其特征在于，还包括：
    删除单元，用于在所述记录表中删除对所述页面资源加载范围内的待加载图片所对应的DOM节点的记录。
  22. 根据权利要求15所述的装置，其特征在于，所述预定距离是基于一次屏幕显示范围移动指令将使屏幕显示范围移动的距离。
  23. 根据权利要求16所述的装置，其特征在于，当所述页面资源为网页的 插件时，所述装置还包括：
    插件确定单元，用于确定页面资源的加载范围的可视型插件；以及
    所述加载单元包括第一插件加载单元，用于加载所述页面资源加载范围内的可视型插件。
  24. 根据权利要求23所述的装置，其特征在于，所述插件确定单元包括：
    第一判断单元，用于判断所述页面文件中包含的插件是否可视型插件；以及
    第二判断单元，用于判断所述可视型插件的位置是否在所述页面资源加载范围内。
  25. 根据权利要求23所述的装置，其特征在于，还包括：
    第三判断单元，用于判断所述页面资源加载范围以外的可视型插件的尺寸数据是否小于或等于预定阈值；以及
    所述加载单元还包括第二插件加载单元，用于加载所述页面资源加载范围以外尺寸数据小于或等于预定阈值的可视型插件。
  26. 根据权利要求23-25中任何一项所述的装置，其特征在于，还包括：
    占位单元，用于使用占位插件替代所述页面资源加载范围以外尚未加载的可视型插件；以及
    插件信息保存单元，用于保存被占位插件替代的可视型插件的插件信息。
  27. 根据权利要求23所述的装置，其特征在于，所述加载单元还包括：
    第三插件加载单元，用于响应于当前屏幕显示范围发生变化，根据所述插件信息保存单元所保存的插件信息，进一步加载相应变化后的页面资源加载范围内尚未加载的可视型插件。
  28. 一种具有处理器可执行的程序代码的计算机可读介质，其特征在于，所述程序代码使处理器执行下述步骤：
    解析获取的页面文件；
    基于解析结果，确定页面资源的加载范围，所述页面资源的加载范围包括当前屏幕显示范围、或者包含在所述当前屏幕显示范围之外，但在预定距离内的预定距离范围、或者包含所述当前屏幕显示范围以及在所述当前屏幕显示范围之外，但在预定距离内的预定距离范围；以及
    加载所述页面资源的加载范围内的页面资源。
PCT/CN2015/086148 2014-08-05 2015-08-05 页面资源加载方法和装置 WO2016019874A1 (zh)

Applications Claiming Priority (4)

Application Number Priority Date Filing Date Title
CN201410381929.3A CN105335419B (zh) 2014-08-05 2014-08-05 网页图片加载方法和装置
CN201410381929.3 2014-08-05
CN201510153234.4A CN106156095B (zh) 2015-04-01 2015-04-01 加载页面中的插件的方法和装置
CN201510153234.4 2015-04-01

Publications (1)

Publication Number Publication Date
WO2016019874A1 true WO2016019874A1 (zh) 2016-02-11

Family

ID=55263163

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2015/086148 WO2016019874A1 (zh) 2014-08-05 2015-08-05 页面资源加载方法和装置

Country Status (1)

Country Link
WO (1) WO2016019874A1 (zh)

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110807162A (zh) * 2018-07-20 2020-02-18 北京京东尚科信息技术有限公司 加载占位图的方法和装置
CN111079050A (zh) * 2019-12-10 2020-04-28 北京小米移动软件有限公司 页面信息获取方法、页面信息获取装置及计算机存储介质
CN113835699A (zh) * 2021-08-31 2021-12-24 五八有限公司 一种图片加载处理方法、装置、电子设备及存储介质

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20080222273A1 (en) * 2007-03-07 2008-09-11 Microsoft Corporation Adaptive rendering of web pages on mobile devices using imaging technology
CN102915375A (zh) * 2012-11-08 2013-02-06 山东大学 一种基于布局分区的网页加载方法
CN103164541A (zh) * 2013-04-15 2013-06-19 北京奇虎科技有限公司 图片呈现方法及设备
CN103853729A (zh) * 2012-11-29 2014-06-11 腾讯科技（深圳）有限公司 页面加载方法及其系统

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20080222273A1 (en) * 2007-03-07 2008-09-11 Microsoft Corporation Adaptive rendering of web pages on mobile devices using imaging technology
CN102915375A (zh) * 2012-11-08 2013-02-06 山东大学 一种基于布局分区的网页加载方法
CN103853729A (zh) * 2012-11-29 2014-06-11 腾讯科技（深圳）有限公司 页面加载方法及其系统
CN103164541A (zh) * 2013-04-15 2013-06-19 北京奇虎科技有限公司 图片呈现方法及设备

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110807162A (zh) * 2018-07-20 2020-02-18 北京京东尚科信息技术有限公司 加载占位图的方法和装置
CN111079050A (zh) * 2019-12-10 2020-04-28 北京小米移动软件有限公司 页面信息获取方法、页面信息获取装置及计算机存储介质
CN111079050B (zh) * 2019-12-10 2023-09-19 北京小米移动软件有限公司 页面信息获取方法、页面信息获取装置及计算机存储介质
CN113835699A (zh) * 2021-08-31 2021-12-24 五八有限公司 一种图片加载处理方法、装置、电子设备及存储介质

Similar Documents

Publication Publication Date Title
US11573693B2 (en) Display controlling method, terminal, information processing apparatus, and storage medium
JP6051337B2 (ja) クライアント側ページ処理
US10740945B2 (en) Animation control methods and systems
WO2017036309A1 (zh) 页面渲染方法、装置及设备
US9338621B2 (en) Mobile terminal-based webpage layout method and apparatus
WO2018076795A1 (zh) 页面刷新的方法及装置
WO2018141227A1 (en) Content-aware energy savings for web browsing utilizing selective loading priority
US20140101539A1 (en) Website presenting method and browser
TW200935298A (en) System and method of automatically sizing and adapting a widget to available space
CN103353886A (zh) 预览网页的方法及系统
CN105335419B (zh) 网页图片加载方法和装置
WO2016019874A1 (zh) 页面资源加载方法和装置
JP6077083B1 (ja) 情報表示装置、情報表示方法、情報表示プログラムおよび配信装置
JP6223310B2 (ja) 情報表示プログラム、配信装置、情報表示方法および情報表示装置
JP6679640B2 (ja) 情報表示プログラム、情報表示装置、情報表示方法および配信装置
CN113032073A (zh) 一种基于操作行为的页面展示方法和装置
JP6224682B2 (ja) 情報表示プログラム、情報表示装置、情報表示方法及び配信装置
JP6797850B2 (ja) 情報表示プログラム、情報表示方法、情報表示装置、及び配信装置
JP6203140B2 (ja) 表示プログラム、端末装置、表示方法及び配信装置
JP6291113B1 (ja) 情報表示プログラム、情報表示方法、情報表示装置、及び配信装置
JP6695833B2 (ja) 情報表示プログラム、情報表示装置、情報表示方法および配信装置
JP6664590B2 (ja) 情報表示プログラム、情報表示方法、情報表示装置、及び配信装置
JP5884814B2 (ja) 表示処理装置及びプログラム
JP7032165B2 (ja) 情報表示プログラム、情報表示方法、情報表示装置、及び配信装置
JP2019046191A (ja) 情報表示プログラム、情報表示方法、端末装置、および配信装置

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 15829997

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

122 Ep: pct application non-entry in european phase

Ref document number: 15829997

Country of ref document: EP

Kind code of ref document: A1