separating JSS from CSS at plone.htmlhead

I'm using Plone 3.1.7 in a project that needs performance tweaks. One of the tweaks requests that CSS should be at the top of page and the JS should be at the bottom. However both are located at

<div tal:replace="structure provider:plone.htmlhead" />

In main_template. How do I split these ones?

Thanks in advance

My workmates have found the solution:

plone.htmlhead is a viewlet registered by the product plone.app.layout that loads other three viewlets:

• plone.resourceregistries.styles
• plone.resourceregistries.scripts
• plone.resourceregistries.kineticstylesheets

I put the following at the HEAD tag:

<div tal:replace="structure provider:plone.resourceregistries.styles" />

And the following at the bottom:

<div tal:replace="structure provider:plone.resourceregistries.scripts" />
<div tal:replace="structure provider:plone.resourceregistries.kineticstylesheets" />

Done! the CSSs will be located at the page's top and the JSs at page's bottom