网页优化：缩小后是否应将CSS和JS插入HTML资源？

Question

Squishing all the JS and all the CSS into single minified files and linking to them from the HTML page is a reasonable way to go and this appears to be the place that a lot of websites take their optimization to.

However I seldom see a website which has just one resource load.

My question is about whether having three resources like this is exactly the same as taking the contents of them and putting it into the tags to produce one single resource to load. For JS this is straightforward with the <script> tags (take out src and put the minified JS into the tag), and for CSS this is simply replacing <link rel="stylesheet" ... /> with <style type="text/css" /> ...minified CSS... </style> .

Is this a common practice to squeeze the page into the smallest package possible (One single TCP transaction, hopefully)?

If nothing else it drastically simplifies the job of the webserver software.

Answer 1

I would keep them separate for these two reasons:

1. the browser can use multiple sockets to download the content

2. scripts/stylesheets can be cached an reused in other html pages and will therefore only be downloaded once

Answer 2

I'm sure this wouldn't hurt for speed optimisation for devices such as mobiles however on broadband connections it wouldn't make to much difference (obviously speed is a good optimisation and I'm not saying is not) but from what I have read isn't it better to server all content/images from multiple servers where possible as well as code optimisation? Mumford content will save on total page size. But I assumed it didn't matter if the code was on page or through a src file aslong as you don't have multiple CSS pages and multiple js documents and optimise them Ie minify the content and get rid of duplicate tags Ie

.header{ Color:#000000; } .test{ Color:#000000; } Into .header, .test{ Color:#000000; }

And minify the CSS, not sure if this is what you are looking for but I'm sure if you optimise too much you will spend much more time then is worth on the optimisation as the speed you maybe increasing maybe only 0.001 second.

Answer 3

It is the same to have linked resources and to embed them in the html page. However not convenient to use on multiple pages. Then you have to repeat yourself.

If you put all scripts and css together keep this in mind:

In most cases, the bulk of the JavaScript code handles user-initiated events, such as mouse-clicking and dragging. All of these user-triggered events occur after the page is loaded and the onload event is triggered. In order to defer loading of these JavaScripts insert a JavaScript event listener in the head of the containing document that forces the external file to be loaded after the onload event. ( Google developers tips )

This is the code-example to make it more clear, the delaying scripts will be loading after the essential page elements have been formed:

 // Add a script element as a child of the body
 function downloadJSAtOnload() {
 var element = document.createElement("script");
 element.src = "deferredfunctions.js";
 document.body.appendChild(element);
 }

 // Check for browser support of event handling capability
 if (window.addEventListener)
 window.addEventListener("load", downloadJSAtOnload, false);
 else if (window.attachEvent)
 window.attachEvent("onload", downloadJSAtOnload);
 else window.onload = downloadJSAtOnload;