CN105025367A - A page loading method based on digital set-top box - Google Patents

Abstract

The invention provides a page loading method based on a digital set-top box, comprising: downloading a JavaScript framework locally; dividing the downloaded JavaScript framework into a plurality of function modules; and loading a required function module according to a demand loading or lazy loading mode when the interface of a module is required. The method can fully utilize network bandwidth resources, reduce the size of the JavaScript framework loaded into a page, and thereby increase a page loading speed.

Description

A page loading method based on digital set-top box

technical field

The invention relates to the technical field of page loading, in particular to a page loading method based on a digital set-top box.

Background technique

With the development of science and technology, embedded devices such as smartphones and tablet computers are becoming more and more important. Digital set-top boxes based on intelligent operating systems are developing faster and faster, especially with the upgrading and development of related software and hardware of digital set-top boxes. Embedded browsers based on intelligent operating systems can present more and more rich content. In order to make the content of the page richer, more and more people try to use JavaScript frameworks to write pages or develop applications. Using JavaScript frameworks to write pages has become very popular on the PC side, and the technology is mature. However, due to the limitation of various hardware and software factors of the digital set-top box, these pages written using the JavaScript framework do not perform well on the digital set-top box, especially the problem of slow page loading.

Contents of the invention

The purpose of the present invention is, in order to solve the technical problem that the page loading speed of existing digital set-top box is relatively slow, the present invention provides a kind of page loading method based on digital set-top box, utilize this method to make the page that uses JavaScript framework to write can be smooth runs on the digital set-top box, and optimizes the loading speed of the JavaScript framework to increase the loading speed of the entire page on the digital set-top box.

To achieve the above object, the present invention provides a digital set-top box-based page loading method, which aims at pages or web applications written by the digital set-top box. The page or web application is written using a JavaScript framework, and the page loading method includes the following aspects:

Step 1) deposit the local JavaScript framework downloaded in the digital set-top box;

Step 2) divide the function interface contained in the JavaScript framework in step 1) into several functional modules according to the functions, wherein each functional module corresponds to a .js file;

Step 3) calling the corresponding function interface according to the functions to be written on the page of the digital set-top box, and then loading the function module corresponding to the function interface in the page.

As a further improvement of the above technical solution, the functional modules in step 3) are loaded in an asynchronous loading manner.

As a further improvement of the above technical solution, the asynchronous loading method adopts lazy loading or on-demand loading.

As a further improvement of the above technical solution, the function interface in step 2) is divided into functions according to functions: core method module, detection method module, event processing module, Ajax request module, dynamic effect module or touch module.

The difference between the JavaScript frame used in the page for the digital set-top box and the website page accessed by a general PC is that the JavaScript frame is not loaded from a remote server through a URL address, but the JavaScript frame is first downloaded to the local, stored In a certain directory of the digital set-top box (such as user/data), and then directly load the required JavaScript framework from the local directory (such as user/data) when writing the page.

For the JavaScript framework downloaded to the local, if it is only loaded directly when writing the page, it will appear that the entire JavaScript framework needs to be loaded just to use a certain function of the JavaScript framework, which will cause a waste of resources; especially when writing a page This waste of resources is even more pronounced when multiple JavaScript frameworks are used. Because the Javascript framework is a whole, that is, a collection of .js files, which includes several function interfaces, in order to avoid the waste of resources caused by the existing loading method, the page loading method of the present invention converts the JavaScript file downloaded to the local All the function interfaces contained in the framework are classified according to their specific functions and divided into multiple functional modules, each module corresponds to a .js file, when developing an application to use a certain function, only need to load the .js of the corresponding functional module of this function file instead of the .js file that needs to load the entire javascript framework.

By splitting a JavaScript framework into several functional modules according to functions, and then only loading the corresponding functional modules when writing the page, this can indeed improve the loading speed of the JavaScript framework, but if multiple functional modules are called at the same time, there will be The problem of loading multiple JavaScript files at the same time, this concurrent synchronous loading is likely to cause blocking problems, therefore, a further improvement is made on the above page loading method, that is, only the .js files of the required functional modules are loaded On the basis of this, continue to optimize the loading method of the JavaScript framework of the page, and use asynchronous loading to load the required functional modules, such as lazy loading or on-demand loading.

A kind of page loading method based on digital set-top box of the present invention has the advantages of:

By downloading the JavaScript framework to the local, and then dividing the downloaded JavaScript framework into several functional modules, when the interface of a certain module is needed, the required functional modules are loaded by means of on-demand loading or delayed loading, It can make full use of network bandwidth resources and reduce the size of the JavaScript framework file loaded on the page, thereby improving the page loading speed.

Description of drawings

FIG. 1 is a flowchart of a page loading method based on a digital set-top box in an embodiment of the present invention.

Detailed ways

A page loading method based on a digital set-top box according to the present invention will be described in detail below with reference to the drawings and embodiments.

The page loading method based on the digital set-top box of the present invention is applied to pages or web applications written by the digital set-top box. The page loading method includes the following steps:

Step 1) deposit the local JavaScript framework downloaded in the digital set-top box;

Step 2) divide the function interface contained in the JavaScript framework in step 1) into several functional modules according to the functions, wherein each functional module corresponds to a .js file;

Step 3) calling the corresponding function interface according to the functions to be written on the page of the digital set-top box, and then loading the function module corresponding to the function interface in the page.

Based on the above page loading method, as shown in FIG. 1 , in this embodiment, the zepto.js file is used as an example for further description. The specific operation steps are as follows:

Step 101) Download the JavaScript framework required for writing the page or web application to the local, and store it in a certain location of the digital set-top box.

Specifically, download the zepto.js file to the local, and the latest version of zepto is version 1.0; and store the downloaded zepto.js file in the usr/data directory of the digital set-top box.

Step 102) Divide the JavaScript framework downloaded locally into several functional modules according to functions.

Specifically, the zepto.js file downloaded to the local in step 101) is classified according to the function of each function interface, and can be divided into: core method module, detection method module, event processing module, Ajax request module, dynamic effect module or Touch module, each of the above modules corresponds to a .js file. In this embodiment, the above-mentioned core method module is a collection of the most used function interfaces when writing pages, such as the function interfaces for reading and operating DOM elements can be classified as this module; the detection method module The function is mainly to detect the type of device, the operating system used by the device, the version of the browser, the type of the device platform, and the category of the function interface split into this module; the function of the event processing module is to process events, which can add events , delete time, monitor events and trigger event function function interfaces are divided into this module; the main function of the Ajax request module is to process Ajax requests, and can divide the function interfaces with the functions of querying Ajax requests, executing Ajax requests and returning Ajax requests Go to this module; the main function of the dynamic effect module is to process the content related to the animation in the page, and the function interface with the function of setting the animation display time, rotation angle, and action function after the animation is completed can be divided into this module; the touch module Mainly for devices with a touch screen, the function interface with the function of defining the meaning of the click or slide action can be divided into this module.

Step 103) When writing a page or web application, only the required functional modules are loaded according to requirements.

Specifically, when writing a page or web application, if a touch-related function interface needs to be invoked, the .js file of the touch function module corresponding to the function interface needs to be loaded.

Step 104) If multiple function interfaces need to be called at the same time, and these function interfaces are in different function modules, then multiple function modules need to be loaded. At this time, a delayed loading or on-demand loading method can be used.

Specifically, if there are multiple functional modules that need to be loaded, in order to prevent possible blocking problems that may occur when loading multiple .js files synchronously, the following methods can be used to load multiple functional modules:

1. Directly use the <script src="xx.js"/> method to load multiple functional modules, but do not put the js files of all functional modules before the <body> tag in the page code, but put some core functions The functional modules are loaded before the <body> tag, and some modules that do not have to be loaded at the beginning, such as functional modules with dynamic effects, are placed after the <body> tag, after the priority loaded functional modules are loaded load again

2. The required functional modules can be loaded in the way of delayed loading. By setting the delay loading time of each module to avoid the blocking problem that may occur when loading multiple js files synchronously.

Part of the code for loading the function module is as follows:

Part of the code for delayed loading is as follows:

3. You can also load the required functional modules in the way of on-demand loading. On-demand loading is to call the corresponding functional modules in the JavaScript framework according to a certain function in the page, and set the trigger event of this function when writing the page; at this time , when the event is triggered, the function module required by the function is loaded through the callback function, and the corresponding function is executed after the function module is loaded.

Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention rather than limit them. Although the present invention has been described in detail with reference to the embodiments, those skilled in the art should understand that modifications or equivalent replacements to the technical solutions of the present invention do not depart from the spirit and scope of the technical solutions of the present invention, and all of them should be included in the scope of the present invention. within the scope of the claims.

Claims (4)

1. A page loading method based on a digital set-top box, characterized in that, the page loading method comprises: Step 1) deposit the local JavaScript framework downloaded in the digital set-top box; Step 2) divide the function interface contained in the JavaScript framework in step 1) into several functional modules according to the functions, wherein each functional module corresponds to a .js file; Step 3) calling the corresponding function interface according to the functions to be written on the page of the digital set-top box, and then loading the function module corresponding to the function interface in the page. 2. The page loading method based on a digital set-top box according to claim 1, characterized in that, the functional modules in the step 3) are loaded in an asynchronous loading manner. 3. The page loading method based on a digital set-top box according to claim 2, wherein the asynchronous loading method adopts delayed loading or on-demand loading. 4. the page loading method based on digital set-top box according to claim 1, is characterized in that, the function interface in described step 2) is divided into according to function: core method module, detection method module, event processing module, Ajax request module, dynamic effect module or touch module.