Problem with getHeadHtml(), getFootHtml() and caching
Regarding Problem 1

The Twig function {{ getHeadHtml() }} does only work with JS/CSS that are included before this tag. I had the same problem... you can find the answer/explanation of Brandon Kelly here: getHeadHtml() not outputting CSS included with {% includeCss %}

Regarding Problem 2

The {% cache %} does only cache the output HTML, no variables (see Is it possible to cache variables using the {% cache %} tag?). As a workaround you could cache the {{ getFootHtml() }} as well: in the first request it process the complete Twig code and stores the getFootHtml content correct. With this solution, you need to delete the cache manually (or with the onAfterSave event) after (re)saving, and adding/deleting an entry that could affect the cache.
Note: This does not work with {{ getHeadHtml() }} (see Problem 1).