Gzip组件
通过网络传输HTTP请求和响应所花费的时间可以通过前端工程师做出的决策大大减少。确实，最终用户的带宽速度，互联网服务提供商，对等交换点的接近度等都超出了开发团队的控制范围。但是还有其他一些影响响应时间的因素。压缩通过减少HTTP响应的大小来缩短响应时间。
从HTTP / 1.1开始，Web客户端通过HTTP请求中的Accept-Encoding标头指示对压缩的支持。
Accept-Encoding：gzip，deflate
如果Web服务器在请求中看到这个头部，它可以使用客户端列出的方法之一压缩响应。Web服务器通过Content-Encoding头在响应中通知Web客户端。
内容编码：gzip
Gzip是目前最流行和最有效的压缩方法。它是由GNU项目开发的，由RFC 1952标准化。你可能看到的唯一的其他压缩格式是压缩，但效果不好，不太受欢迎。
Gzipping通常将响应大小减少大约70％。目前大约90％的互联网流量都是通过支持gzip的浏览器传播的。如果使用Apache，配置gzip的模块取决于您的版本：Apache 1.3使用mod_gzip，而Apache 2.x使用mod_deflate。
浏览器和代理存在已知的问题，这些问题可能导致浏览器期望的不匹配以及与压缩内容有关的接收不匹配。幸运的是，随着使用旧浏览器的情况下降，这些边缘情况正在减少。Apache模块通过自动添加适当的Vary响应头来提供帮助。
服务器根据文件类型选择要压缩的内容，但是通常压缩的内容太有限。大多数网站gzip他们的HTML文件。gzip脚本和样式表也是值得的，但很多网站都错过了这个机会。事实上，压缩包括XML和JSON的任何文本响应都是值得的。图像和PDF文件不应该被压缩，因为它们已经被压缩了。试图gzip他们不仅浪费CPU，但可能会增加文件大小。
尽可能多地缩放文件类型是减少页面重量和加速用户体验的简单方法。
把样式表放在最上面
虽然研究在雅虎的表现！我们发现，移动样式表文件HEAD使页面看起来要加载速度更快。这是因为将样式表放在HEAD中允许页面逐步呈现。
关注性能的前端工程师希望页面逐步加载; 也就是说，我们希望浏览器尽快显示它所拥有的任何内容。这对于有很多内容的网页和Internet连接速度较慢的用户尤其重要。进度指标等给用户视觉反馈的重要性已经得到很好的研究和记录。在我们的例子中，HTML页面是进度指示器！当浏览器逐渐加载页面时，页眉，导航栏，顶部的标志等都作为等待页面的用户的视觉反馈。这改善了整体用户体验。
将样式表放到文档底部附近的问题是，它禁止在许多浏览器（包括Internet Explorer）中进行渐进式呈现。这些浏览器会阻止渲染，以避免在样式更改时重新绘制页面的元素。用户被困在查看空白页面。
的HTML规范明确指出，样式表是被包括在网页的HEAD：“与A，[LINK]可以仅出现在一个文档的HEAD部分，尽管它可能出现任意次数”。这两种替代方案，空白屏幕或无风格内容的闪光都是值得冒险的。最佳解决方案是遵循HTML规范，并将样式表加载到文档HEAD中。
把脚本放在底部
脚本造成的问题是阻止并行下载。的HTTP / 1.1规范建议的浏览器下载不超过两种组分在每主机名平行。如果您从多个主机名提供图像，则可以同时进行两个以上的下载。然而，当脚本正在下载时，浏览器将不会启动任何其他下载，即使在不同的主机名上。
在某些情况下，将脚本移动到底部并不容易。例如，如果脚本使用document.write插入页面内容的一部分，则不能在页面中移动较小的内容。也可能有范围问题。在许多情况下，有办法解决这些情况。
经常出现的另一个建议是使用延迟脚本。该DEFER属性指示该脚本不包含document.write，并且是浏览器可以继续呈现的线索。不幸的是，Firefox不支持该DEFER属性。在Internet Explorer中，该脚本可能会被延期，但不会像预期的那样多。如果一个脚本可以被延期，它也可以被移动到页面的底部。这将使您的网页加载速度更快。
避免使用CSS表达式
CSS表达式是动态设置CSS属性的一种强大而又危险的方法。从版本5开始，它们在Internet Explorer中受到支持，但是从IE8开始已弃用。例如，可以使用CSS表达式将背景颜色设置为每隔一小时交替一次：
background-color：expression（（new Date（））。getHours（）％2？“＃B8D4FF”：“＃F08A00”）;
如此处所示，该expression方法接受一个JavaScript表达式。CSS属性设置为评估JavaScript表达式的结果。该expression方法被其他浏览器忽略，因此在Internet Explorer中设置需要跨浏览器创建一致体验的属性非常有用。
表达的问题在于，他们比大多数人的期望更频繁地被评估。它们不仅在页面呈现和调整大小时进行评估，而且在页面滚动时甚至当用户将鼠标移到页面上时也进行评估。向CSS表达式添加一个计数器可以让我们跟踪CSS表达式被评估的时间和频率。在页面上移动鼠标可以轻松生成超过10,000个评估。
减少CSS表达式计算次数的一种方法是使用一次性表达式，在第一次计算表达式时，它将style属性设置为一个显式值，该值将替换CSS表达式。如果style属性必须在页面的整个生命周期中动态设置，那么使用事件处理程序而不是CSS表达式是另一种方法。如果您必须使用CSS表达式，请记住它们可能会被评估数千次，并可能影响您的页面的性能。
使JavaScript和CSS由外部调用
许多这些性能规则涉及如何管理外部组件。然而，在出现这些问题之前，您应该提出一个更基本的问题：JavaScript和CSS应该包含在外部文件中还是包含在页面本身中？
在现实世界中使用外部文件通常会产生更快的页面，因为浏览器会缓存JavaScript和CSS文件。每次请求HTML文档时，都会下载HTML文档中内联的JavaScript和CSS。这减少了所需的HTTP请求数量，但增加了HTML文档的大小。另一方面，如果JavaScript和CSS处于由浏览器缓存的外部文件中，则在不增加HTTP请求数量的情况下减小HTML文档的大小。
关键因素是外部JavaScript和CSS组件相对于所请求的HTML文档数量的缓存频率。这个因素尽管难以量化，但可以使用各种指标来衡量。如果您的网站上的用户每个会话有多个页面浏览量，并且许多网页重复使用相同的脚本和样式表，则缓存的外部文件可能会带来更大的潜在收益。
许多网站都处于这些指标的中间。对于这些网站，最好的解决方案通常是将JavaScript和CSS部署为外部文件。首选内联的唯一例外是主页，例如Yahoo！的首页和My Yahoo! 。每个会话只有很少（可能只有一个）页面视图的主页可能会发现内联JavaScript和CSS会导致更快的最终用户响应时间。
对于通常是许多页面视图中第一个的首页，有一些技术可以减少内联提供的HTTP请求，以及通过使用外部文件实现的缓存优势。其中一种方法是在首页内嵌JavaScript和CSS，但在页面加载完成后动态下载外部文件。后续页面将引用应该已经在浏览器的缓存中的外部文件。
