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

ArticleDirectory

• Benefits:
• Disadvantages:

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

At the same time, 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, I will combine ASP. NET development platform, aiming at these Principles, provides some explanations and interpretations in the form of a series of articles to help you better understand these principles and use them better.

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

      Technorati tags: performance, web design, ASP. NET

   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 the eighth principle: Make JavaScript and CSS external (reference script files and style sheets as external files)

I admit that this is a bit controversial. The point of controversy here is not whether to reference the script file and style sheet as external files (because it is advantageous that everyone agrees to do so ), it is about how to grasp a degree. In some cases, it may be better to define scripts or styles on the page.

I will sort out the advantages and disadvantages of this practice.

Benefits:

1. This improves the reusability of script files and style sheets. (You do not need to define it once on every page)
2. Reduces the page size and increases the page loading speed. (Script files and style sheets can be independently cached by browsers)
3. This improves the maintainability of scripts and styles. (This is not related to performance, but it is also very important)

Disadvantages:

1. Because there are separate files, additional requests may be added. This violates the make fewer HTTP requests principle.

• But because these files can be cached separately, the impact is not as big

 

Apparently,The advantage of adopting this principle is usually more than the disadvantage.. Especially if you understand the following principles:

1. Use a content delivery network (CDN)
2. Add expires or cache-control header
3. Gzip Components
4. Put stylesheets at top
5. Put scripts at bottom
6. Minify JavaScript and CSS
7. Remove duplicate scripts
8. Split components into SS Domains

 

However, sometimes we will not adopt this principle. The following article makes a better introduction: http://www.thefutureoftheweb.com/blog/when-to-use-inline-javascript

In the following three cases, we should consider defining scripts and styles on the page.

1. These scripts and styles are dedicated to a page (in other words, they do not need to be reused)
2. These pages are not frequently accessed (the subline of this sentence is that since they are not frequently accessed, the page size is larger, and even the access speed is slower)
3. These scripts and styles are rare (I think this is the most critical)