WHY YOU SHOULDN'T MERGE JAVASCRIPT IN MAGENTO

Most people - myself included - thought that merging all of your separate Javascript files was a healthy way to speed up the front end of your site. The logic was that by merging the files, you reduce the number of requests the browser makes when loading your site. This allows the request to complete quicker and results in your page loading faster. Let's walk through an example of this process in Magento and see what happens.

Imagine you have just enabled Javascript Merging in the Magento Admin and then a user visits your site. Magento collates all of the XML layout files and determines which Javascript files should be included for the homepage request. These files are then merged into a single file and saved using an md5 hash of their filenames. This new file, named f0eb853c09ba3e46ad21fb89b8d57626.js, is then served to the user, who downloads it and stores it in their browser cache.

Next, the user clicks a link to one of your categories. Once again, Magento collates the XML layout files and determines what Javascript files are needed for the category page. At this point, Magento realises that the exact same Javascript files used on the homepage are needed on this page. Instead of remaking the single Javascript file, Magento serves the Javascript file created when the user visited the homepage. This time though, the browser knows that it already has this file and therefore doesn't download it again. Instead, the file is loaded from the user's cache, saving time, bandwidth and computer resources!

So far everything has gone well; we have made the page load faster while decreasing the load on the server, but...

Next, the user is enticed by one of your products and clicks through to a product page. Once again, Magento determines which Javascript files are needed based on the layout XML files. At this point, Magento realises that the same Javascript files on the homepage are needed as well two new files. As a merged file containing this combination of Javascript doesn't exist, Magento merges the files and creates a new Javascript file named 139f9771ba2ba0cae754978fab4a3c35.js. Roughly 80% of this file is the Javascript that was used on the homepage and has been downloaded and cached by the user already. The final 20% accounts for the new Javascript files used solely on the product page. This file is then served to the user who is forced to download it all! Although this file is made of 80% code that has already been cached, the user's browser is completely unaware of this and will download 100% of the file and cache it again!

The intended result of merging Javascript is a decreased page load time, but in the above scenario, the user has been forced to re-download a massive chunk of Javascript! This will no doubt have increased page load time (downloading ~40kb of Javascript that doesn't need to be downloaded), which goes against the idea of Javascript merging.

Let's consider what would happen if we hadn't of merged our Javascript...

When the user first requests the homepage, the merged Javascript files would be downloaded individually. Although the combined size of these Javascript files matched the size of the merged Javascript file, this request would take longer as each file would need to be requested, downloaded and cached separately. 1-0 merging!

Second, the user requested the category page, which uses the same files that were just downloaded and cached on the homepage. As a result this takes exactly the same amount of time it would if the Javascript files had been merged. In both instances, all of the required Javascript has already been downloaded and cached, meaning the browser can skip the Javascript altogether.

Lastly, the user visits the product page, which uses the Javascript files found on the home and category pages as well as two new files. The files used on both the homepage and category page have already been cached, so the browser skips these files and downloads and caches the two new files that haven't been experienced before! In the merging scenario, we mentioned that files used on the homepage in Magento make up about 80% of the total Javascript on the product page. With merging disabled, we have managed to skip downloading the 80% and just download the 20%. In the merging example, the full 100% had to be re-downloaded!

This problem is compounded for each page your user visits that has a combination of Javascript not found on another page. Each time this happens, the user will be forced to re-download Javascript that it has already downloaded and cached under a different filename.

WHAT CAN BE DONE?

While the current Magento merging system is flawed, it would only take a minor adjustment to fix this critical issue.

In Magento, Javascript is added to the Head block through XML and stored in an array, which is then iterated over and displayed in the head section of your HTML code. Our suggestion is that instead of simply adding Javascript files to the head, an extra parameter be included that allows you to specify a group for the Javascript. Consider the following code:

<default>
 <reference name="head">
   <action method="addJs"><script>prototype/prototype.js</script><group>global</group></action>
   <action method="addJs"><script>scriptaculous/builder.js</script><group>global</group></action>
   <action method="addJs"><script>scriptaculous/effects.js</script><group>global</group></action>
   <action method="addJs"><script>varien/form.js</script><group>global</group></action>  </reference>
</default>
 
<catalog_product_view>
 <reference name="head">
   <action method="addJs"><script>varien/product.js</script><group>product</group></action>
   <action method="addJs"><script>varien/configurable.js</script><group>product</group></action>
 </reference>
</catalog_product_view>

Notice the addition of the paramter  group ? Instead of all of the Javascript being merged into a single file, the group parameter would be be used to decide which Javascript files get merged together. The above code would result in two separate merged files being created for the product page; one containing the global Javascript that is used on the homepage (and the whole of the site) and a second containing the Javascript used solely on the product page. Although this would create an extra page request, time would still be saved by not having to re-download the Javascript used on the homepage! If this technique were applied to the whole Magento site, each piece of Javascript would be downloaded once and once only!

源文：WHY YOU SHOULDN'T MERGE JAVASCRIPT IN MAGENTO