Optimize Website Design (34): Package components directly to the page

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, see Best practices for speeding up your web site (http://developer.yahoo.com/performance/rules.html), they also released 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

This article discusses the 32nd principle: Pack components into a multipart document (package components directly to the page ).

This is a special technology that is widely used in a well-known Internet application: email and email attachments. We can include one or more attachments in an email. These attachments (although they are independent documents) can be directly embedded into the email as part of the email body. The advantage of this is that when receiving an email, you only need a connection (one request), instead of a request to get the email, then you can use multiple requests to obtain the attachment.

[Note] You can also insert images directly into the email. These images are also encoded as part of the body, and do not need to be obtained using a single request.

This concept also has some significance when used in Web pages, as we discussed earlier: optimizing Website Design (1): reducing the number of requests.

This technology is also available in website development to support such requirements. For example, we can use data: URL to convert some small data (images, style sheets, scripts) embedded directly into the web page. For more information, see http://en.wikipedia.org/wiki/data:_url.

Common usage:

• It can be used in IMG objects in HTML, such as Data:Image/X-icon; base64,Aaabaaeaebaaaaaaaabobqaaf..."/>
• It can be used in the background-image attribute of CSS, for example

Div. Image {
Width: 100px;
Height: 100px;
Background-image: URL (Data:Image/X-icon; base64,Aaabaaeaebaaaaaaaabobqaaf...);
}

• It can be used in html css links, for example

<LINK rel = "stylesheet" type = "text/CSS"
Href ="Data:Text/CSS; base64,Lyogkioqkiogvgvtcgxhdgugkioq..."/>

• It can be used in HTML JavaScript links, for example

<SCRIPT type = "text/JavaScript"
Href ="Data:Text/JavaScript; base64,Dmfyihnjt2jqmsa9ig5ldybzy3jv..."> </SCRIPT>

A small difficulty here is how to generate pictures, style sheets, and scripts into base64 strings. Fortunately, there are some good tools, such:

1. Http://www.greywyvern.com/code/php/binary2base64

 

The advantage of directly packaging a component to a page is that it reduces the number of requests, but the problem is that it increases the page size, at the same time, there may be some browser compatibility problems (this problem is not serious now ).

Therefore, when these components are relatively small (and there is little chance of reuse), you can consider packaging them into the web page. Instead, you should use a single file to save them and then reference them on the webpage. This approach is like, all mailboxes have restrictions on the attachment size. If you want to transmit a large attachment, you can only put the attachment first on the network, then provide the download link in the email. (Qq mail has done quite well in this regard ).