Web性能 - jQuery获取HTML，CSS，JS和IMG

Question

我的应用程序包含大约10个HTML，4个CSS，8个JS和15个IMG（PNG / JPG）文件。我想让这个网站非常敏感和快速（即一个很棒的用户体验）。

因此，在任何初始页面加载时，我希望浏览器以异步方式从站点缓存每个资产而不显示“浏览器忙”。根据Steve Souders（谷歌）的说法，我需要使用XHR Eval或XHR Injection来避免'浏览器忙'。见Even Faster Web Sites的幻灯片23。

我知道我可以使用XHR Eval或XHR Injection for Javascript。我可以将它用于HTML，CSS等吗？

我正在尝试使用这样的代码（使用jQuery），但是无法完成它的工作：

$.ajax({ url:"/blog", cache:true, dataType:"text" });
$.ajax({ url:"/about", cache:true, dataType:"text" });
$.ajax({ url:"/blog/main.css", cache:true, dataType:"text" });
$.ajax({ url:"/about/logo.png", cache:true, dataType:"text" });
$.ajax({ url:"/blog/social.js", cache:true, dataType:"text" });

我离开了，或者这是一个通向快速用户体验的完全缓存网站的正确轨道？

Answer 1

在考虑微优化之前，先从宏优化开始：

• 确保您的服务器上启用了Gzip压缩。
• 将CSS和JS文件合并并缩小为单个文件。
• 将所有小图像合并为一个大图像以制作精灵。这将减少请求数量。
• 为图像选择最佳格式，并删除不必要的元数据信息以节省空间。