"Load On Demand" app (GO)

On-demand loading is an important step in front-end performance optimization, how is load-on-demand defined? As the name implies, the corresponding function is loaded when the user triggers the action. The triggered action is to see the specific business scenario, including but not limited to the following situations: mouse click, input text, pull scroll bar, mouse movement, window size changes and so on. The loaded file can be JS, picture, CSS, HTML, and so on. The "on-demand" understanding will be described in more detail later.

Parsing HTML on Demand

Parse the HTML on demand, that is, the page does not parse the HTML at first, parsing the HTML as needed. Parsing the HTML takes a while, especially if the HTML contains an IMG tag, referencing a background image, if you parse it from the beginning, the number of requests is bound to increase. Common dialog boxes, pull menus, multi-label content display, and so on, these start is not need to parse, can be resolved on demand. To implement on-demand parsing, first use the HTML tag to ignore the parsing of HTML. Then, based on the triggered action, the HTML inside the script is retrieved and populated into the corresponding node .

The sample code is as follows:

Let's take a look at the demo, when running the demo and grabbing the packet: when the page is loaded, there is no request to see the picture, and when the point "dot I show html" button is clicked, a picture request is found through the grab.

Once a demo and test found that if the direct parsing of HTML (not including the request CSS images and IMG tags), the time spent than with <script type= "text x-template" = "" >html about 1-2 times slower, If also includes request has CSS picture, the IMG tag, the request connection number will be more, visible on-demand parsing HTML, to the performance enhancement or has the certain effect.

Load pictures on Demand

Loading the picture on demand is to let the picture start not to load by default, and then load when it is close to the viewable area range. Also called lazy loading. As we all know, the picture is loaded all at once, the number of requests will be increased, it is bound to affect performance.

Let's take a look at the lazy load implementation principle. the trigger action is: when the scroll bar is pulled to a certain position, the picture that will enter the visible range needs to be loaded . The process of implementation is divided into the following steps:

• When generating tag, use DATA-SRC to save the image address;
• The recorded picture data-src are saved in the array;
• Event binding on the scrollbar, assuming that the function of the binding is Lazyload () {};
• In the function lazyload, according to the following ideas: Calculate the y-coordinate of the picture, and calculate the height of the visible area, when Y is less than equals (height+ scrolltop), the value of the src of the image is replaced by DATA-SRC, so as to achieve the image loading on demand;

Let's look at a sample code:

Running the sample code above and grabbing the packet will find that the picture was not requested at first, but when you pull the scroll bar to the bottom of the page, you will see the picture send request. At present, many frameworks have supported the lazy loading of pictures, usually in the development, we can be lazy to load the picture, which is an effective way to improve performance, especially the page pictures more time, more should use this method.

Loading on demand In addition to the above scenarios, there are more scenarios. Such as:

At the beginning of the page, the contents of the "All" tab are loaded, but when you click on the "Specify Item discount Coupon" tab, the corresponding image is loaded. The following ideas are implemented:

• When generating tag, use DATA-SRC to save the image address;
• When clicking on the tag event, get all the pictures, the value of SRC of the image is replaced by DATA-SRC;

The sample code is as follows:

Run the above code and grab the package and discover that there was a request for a picture at the beginning, but when you click on the "Specify Product discount Coupon" tab, you see a request to send a picture. Note that in order to ensure the experience, the first screen image does not recommend lazy loading, but should be displayed directly; To avoid the beginning of the user can not see the picture, under IE see a dashed box, so the experience is not good.

Execute JS on Demand

On-demand execution js and lazy loading pictures compare similar. When the Web page is opened, if all JS is loaded and executed, and then the interface is presented to the user, the overall performance will be slower, the experience is not friendly. is when an action is triggered, then the corresponding JS, in order to render the interface. On-Demand execution JS, can be applied in the following scenarios: The execution of some time-consuming JS code, or after the execution of JS, you need to load more pictures, loading iframe, loading ads and so on . This method should be more used in some webapp applications, or more complex pages.

The implementation idea and the on-demand load comparison are similar:

• Event binding on the scrollbar, assuming that the function of the binding is Lazyexecutejs () {};
• In the function Lazyexecutejs, according to the following ideas: Select an element as a reference, when the scroll bar near the position of the element, start to execute the corresponding JS, so as to achieve the interface rendering;

The sample code is as follows (take the YUI3 framework as an example):

First download the recently encapsulated asynchronous ScrollBar loading component: Y.asyncscrollloader, then run the following code (you need to put the page and y.asyncscrollloader.js in the same directory):

Run the above code and capture the packet discovery: When you open the page, you do not see a corresponding picture request, but when the scroll bar is pulled to a certain position, the Loadad function is executed.

Load JS on Demand

JavaScript is nothing more than a script tag introduced to the page, but when the project is getting bigger, the single page to introduce n JS obviously not, merging into a single file reduces the number of requests, but the requested file volume is very large. This is a reasonable way to load on demand. On-demand loading and on-demand execution JS comparison is similar, just to execute the JS into a fixed "implementation of loading JS" code. The following are the ideas for loading on demand:

• Event binding on the scrollbar, assuming that the function of the binding is Lazyloadjs () {};
• In the function Lazyloadjs, according to the following ideas: Select an element as a reference, when the scrollbar is near the position of the element, start to execute the load corresponding JS;
• After JS loading, the corresponding function is started to render the interface;
• In the actual project, you can set a target distance, for example, there are 200 pixels to enter the visual area, on-demand to load JS and on-demand JS comparison is similar, here is no longer a separate sample code, you can do on-demand JS in the example, Change the Loadad function to dynamic loading JS;

Split screen Display

When a Web page is long, there are several screens, and loading a large number of images, ads and other resource files, split screen display, can improve the page performance and user experience. In fact, split-screen display can also be viewed from an on-demand point of view, the default is to load the first screen content, when the scroll bar pull is about to reach the next screen, and then start rendering the next screen content. In other words, the picture, background image, HTML loading together on demand, initially do not parse the HTML, then the background map, IMG image will not be loaded.

The idea of split screen display is as follows:

• According to the specific business situation, collect the maximum resolution height of the mainstream; assuming this is 960px;
• According to the height of the split screen, and then the next screen in the HTML to represent;
• In order to keep the height of the page constant, you need to let textarea occupy a certain amount of page space, that is, to let the page appear corresponding scroll bar, so you need to specify the style Visility:hidden, and specify its height and width.
• Using the above-mentioned on-demand execution JS, the inside of the HTML code extracted, re-populated to the parent node of the textarea, you can achieve the resolution of the corresponding HTML, so as to achieve split-screen display.

The sample code is as follows (you need to place the page and the y.asyncscrollloader.js in the same directory):

Run the above code and grab the packet found: in the default first screen, and not to parse the code inside the textarea, but when the scroll bar to a certain position, textarea inside the HTML is parsed, thus realizing the Web page split screen display.

When you use load on demand for performance optimization, you need to select the action that is triggered reasonably. The biggest advantage of "load on demand" is that it reduces unnecessary resource requests, saves traffic, and truly "takes on demand." However, "load on demand" itself can also affect the user experience if used improperly, because "load on demand" is a time when a user triggers an action, and if the user's network speed is slow, loading the script or executing the script may take longer and the user has to pay the price. Therefore, if you want to use "load on demand" you need to select the correct trigger action, if it is triggered by a scrollbar, consider a target distance, assuming that the target distance of 200 pixels is about to enter the viewable area, it will start loading, rather than wait until the visual area to load. The various "load on demand" types described above can be encapsulated into the appropriate components and then applied in the project.

Transferred from: http://www.w3cfuns.com/article-1116-1.html

"Load On Demand" app (GO)