Optimize Website Design (17): latency or loading content as needed

Preface

The optimization of website design is a big topic. There are some general principles and some suggestions for different development platforms. This research has never been stopped, and I have shared this topic on different occasions.

As a general principle, Yahoo's team of engineers once provided 35 best practices. For this list, seeBest practices for speeding up your web siteHttp://developer.yahoo.com/performance/rules.html, at the same time, they also integrated a corresponding test tool yslow http://developer.yahoo.com/yslow/

I strongly recommend that all website developers learn these best practices and apply them based on their actual projects. In the next period of time, I will combine the ASP. NET development platform and use a seriesArticleTo help you better understand and use these principles.

Preparations

Prepare the following development environment and tools to follow me for subsequent learning.

1. Google Chrome or Firefox, and install the yslow extension component. Please note that this component is provided by Yahoo, but there is no version for IE currently.
   1. Https://chrome.google.com/webstore/detail/yslow/ninejjcohidippngpapiilnmkgllmakh
   2. Https://addons.mozilla.org/en-US/firefox/addon/yslow/
   3. You should have some knowledge about the developer tools of these browsers. You can call up this tool by pressing F12.
2. VISAUL studio 2010 SP1 or later, Visual Studio 2012 is recommended
   1. Http://www.microsoft.com/visualstudio/eng/downloads
3. You need to have a good understanding of the basic development process and core technologies of ASP. NET. This series of articles is difficult to popularize basic knowledge.

Topics to be discussed in this article

In this article, I will discuss 16th principles: postload components (LatencyOrOn DemandLoad content)

In addition to the content of the page, many additional resources may need to be loaded during page loading. For example, we often say:

1. Script
2. Style Sheet
3. Image

In my previous articles, I have made some optimization suggestions for scripts and style sheets. For more information, see

1. Optimize Website Design (2): Use CDN

2. Optimize Website Design (5): Place style definitions on top

3. Optimize Website Design (6): Place script definitions or references at the bottom of the document

4. Optimize Website Design (8): Reference script files and style sheets as external files

5. Optimize Website Design (10): Minimize JavaScript and CSS

6. Optimize Website Design (12): delete duplicate scripts

The core of this principle is:Latency or load on demand. First, we will explain the most frequently used scripts as an example.

Load scripts as needed

We can imagine that a real website project contains a variety of script files, including many basic frameworks (such as jquery and knockoutjs ), these script files may be referenced more or less on the page. The problem is that, if there are multiple pages or complicated pages, we may not be able to accurately know whether a page actually needs a script. (Isn't that true ?), A poor solution is to reference all the framework scripts that may be used on the master page at one time. Are you doing this?

If you do, you may be able to solve the problem temporarily. But there is actually a problem. On some pages, only one script library may be used, but for your convenience, all the script libraries will be loaded in the future.

With the further development of the project, the dependencies between scripts will be further complicated. Maintaining these scripts is indeed a big problem.

When Yahoo's team wrote this principle, they mentioned a component they developed to implement on-demand loading scripts. This component is called get and is included in the Yui toolkit. Http://yuilibrary.com/yui/docs/get/, which means that the script and style sheet can be loaded dynamically as needed.

I have not studied much about Yui. In fact, over the past few years, JavaScript technologies have advanced and more innovative designs have emerged. For example, I want to talk about requirejs today.

Let me give you a simple example.

Here is a simple website called default. aspx on the homepage. According to our design, this page needs to load jquery and other libraries, and then execute some of its own logic. Therefore, we will reference the following script:

 
<! -- In the traditional practice, we need to add all script references to the page, and sometimes some unnecessary Scripts may be loaded --> <SCRIPT src ="Scripts/jquery-2.0.0.min.js"> </SCRIPT> <SCRIPT src ="Scripts/knockout-2.2.1.js"> </SCRIPT> <SCRIPT src ="Scripts/Default. js"> </SCRIPT>
 

Is there any problem with this? Of course not. As we mentioned earlier, this method of loading all scripts in advance may cause a waste of resources, and so many scripts are referenced on the page, which can easily cause confusion. To better illustrate this point, I will show you a real scenario:

1. We hope that only the jquery library will be downloaded when the page is loaded.
2. Only when the user clicks the button on the page can we download the knockout library.

Look! This is the so-called on-demand loading. Let's take a look at how we can use requirejs to achieve this requirement?

First, you can obtain the requirejs library through nuget Package Manager.

Then, on the page, you just need to define the Script Reference as below. (In the future, you only need to have such a reference on the page)

 
<SCRIPT src ="Scripts/require. js"Data-Main ="Scripts/Default"> </SCRIPT>
 

Here data-Main refers to the main script. Require. js will first download a script. You can write it as follows:

 
<SCRIPT src ="Scripts/require. js"Data-Main ="Scripts/Default. js"> </SCRIPT>
 

However, as you can see,. js can be omitted.

Next, in default. JS, how should I write a script? The following is a simple example.

  // 
      // 
      /// 
      // perform some basic configuration for requirejs  requirejs. config ({paths: {jquery:  "jquery-2.0.0.min"   // specify a path alias , Knockout:  "Knockout-2.2.1"  }});  // declare the following  Code  that requires the jquery library  require ([< SPAN class = "str"> 'jquery '],  function  () {$ ( function  () {alert ( "Hello, jquery! ") ;};}); 

 

We can see that the first part is the basic configuration of requirejs. We have defined two aliases. In the second part, we declare that the following code requires the jquery library.

After running the page, we can monitor the script download behavior in the browser as follows:

As we imagined, we loaded require. js first, then default. JS, and then jquery. js.

A little interesting, isn't it? Although jquery is loaded in the final result, this loading method is essentially different from defining references directly on the page, which is loaded on demand. If you do not agree with this, I believe you will agree with the example below.

We need. in the JS file, we subscribe to the click event for the button on the page. We hope that the user will download another script (Knockout) only when the button is clicked ), let's see how to implement this requirement?

 /// <Reference Path = "require. js"/>  // <Reference Path = "jquery-2.0.0.js"/>  // <Reference Path = "knockout-2.2.1.js"/>  // Configure requirejs Requirejs. config ({paths: {jquery: Jquery-2.0.0.min"   // Specify a path alias , Knockout: & Quot; Knockout-2.2.1 & quot" }}); // Declare that the following code requires the jquery Library Require ([ 'Jquery' ],Function ($) {$ ( Function (){ // Knockoutjs is dynamically loaded only when a user clicks a button. $ ( "# Test" ). Click ( Function () {Require ([ 'Lockout' ], Function (KO) {alert (KO. Version );});});});});

 
Similarly, we can use browser monitoring tools to understand the script download process:
 

 
When the page is loaded, only three scripts are downloaded.
 

 
However, if you click the button, the fourth script will be downloaded.
 

At the same time, from the following dialog box, it can be concluded that the corresponding script is indeed executed. Because the version of the knockout script we are currently using is indeed 2.2.1.
 

 
This is indeed a good mechanism. If you are interested, you can continue to study it in depth. Now jquery provides a modular version to better meet the needs of dynamic loading and On-Demand Loading. See http://projects.jga.me/jquery-builder/
 

 

On-Demand Loading of style sheet files

I believe that the design of loading script files on demand is enough for your interest. Naturally, you may have the following question: can you load a style sheet on demand?

It sounds good and should not be difficult, but there is no ready-made implementation at present. Of course, get in Yui can be used.

Requirejs official has an explanation, interested can refer to the http://requirejs.org/docs/faq-advanced.html#css

They also provide a suggested script to load the style sheet as needed.

 
FunctionLoadcss (URL ){VaRLink = Document. createelement ("Link"); Link. type ="Text/CSS"; Link. rel ="Stylesheet"; Link. href = URL; document. getelementsbytagname ("Head") [0]. appendchild (Link );}
 

You can access and call this script anywhere. For example, I do the following:

 /// <Reference Path = "require. js"/>  // <Reference Path = "jquery-2.0.0.js"/>  // <Reference Path = "knockout-2.2.1.js"/> // Configure requirejs Requirejs. config ({paths: {jquery: Jquery-2.0.0.min"   // Specify a path alias , Knockout: & Quot; Knockout-2.2.1 & quot" }}); // Declare that the following code requires the jquery Library Require ([ 'Jquery' ], Function ($) {$ ( Function (){ // Knockoutjs is dynamically loaded only when a user clicks a button. $ ( "# Test" ). Click ( Function (){ Loadcss ('Default.css'); Require ([ 'Lockout' ], Function (KO) {alert (KO. Version );});});});}); Function Loadcss (URL ){ VaR Link = Document. createelement ( "Link" ); Link. type = "Text/CSS" ; Link. rel = "Stylesheet" ; Link. href = URL; document. getelementsbytagname ( "Head" ) [0]. appendchild (Link );}

 

Attach images as needed

In the last part of this article, we will talk about image loading on demand. If your page contains a large number of images, mastering this principle will greatly help increase the loading speed of the webpage.

You can imagine a search engine result page, such as https://www.google.com/search? Newwindow = 1 & Site = & TBM = isch & source = HP & biw = 1468 & BiH = 773 & Q = Microsoft & OQ = Microsoft & gs_l = img.3... 1779.4076.0.4399.9.7.0.0.0.0.0.0 .. 0. 0... 0. 0... 1ac. 1j4. 12. IMG. aajyf7y8xw8

I search for Microsoft in images.google.com. Without a doubt, this will return thousands of images.

Are these images all loaded at one time? Obviously, it is impossible. You may say that it would be better to do paging? Paging is usually a good technique, but in the search engine page, paging is not a good choice (as users are not necessarily willing to click the page navigation button ), currently, the mainstream image search engine does not use pagination, but uses slide of the user's scroll bar to obtain images as needed.

This is a very important design, but it is not a very simple task to think about it. Fortunately, Yahoo's team provides a good component (imageloader) that can be used directly: http://yuilibrary.com/yui/docs/imageloader/

There are several online demonstration pages for the usage of this component:

• Basic Features of The imageloader Utility
• Loading images below the fold
• Using imageloader with CSS class names

If you are used to jquery, refer to the following description of jquery.

Http://www.appelsiini.net/projects/lazyload