Best Practices for Speeding Up Your Web Site(2)

4、

Gzip Components

tag: server

压缩组件

标签：服务器

        前端工程师所做出的决定，可以显著的将穿越网络传送HTTP请求和响应所花费的时间缩短。事实上用户终端的带宽，互联网服务提供商等等已超出开发团队的控制范围。可是仍有其余的变量因子来影响响应时间。经过压缩方式减小HTTP响应的大小，能够缩短响应时间。

    从HTTP/1.1开始，web客户端就经过在HTTP请求的Accept-Encoding头显示的支持了压缩。

         Accept-Encoding: gzip, deflate

        若是web服务器遇到包含该字段（ Accept-Encoding: gzip, deflate）的请求，它可能会使用客户端列出的方法之一来对响应进行压缩。web服务器经过在响应头中的 Content-Encoding 字段来告诉客户端已经对响应内容进行了压缩操做。

        Content-Encoding: gzip

        Gzip是当前最流行的和最有效的压缩方法。它是由GNU项目开发并被RFC1952标准化的。惟一其它你可能用到的压缩方式是deflate，可是它可能相对于Gzip，效率要低，知名度要低。

        Gzip压缩一般会减小响应的大小的大约70%。今天近乎90%的经过浏览器传输的网络流量都宣称支持gzip。若是你是使用Apache，配置gzip的模块取决于你的Apache版本，Apache1.3使用mod_gzip,Apache 2.x使用mod_deflate。

        浏览器和代理中有一些被熟知的问题，可能在浏览器指望的东西和它实际收到的压缩内容之间引发一些错误。幸运的是，这些较为边缘的例子随着旧式浏览器的弃用而渐渐的被解决掉。Apache的模块经过自动添合适的不一样的响应头信息来起做用。

        服务器会根据文件类型来选择压缩的内容，可是可能在它所决定要压缩的内容上会受到限制。大多数的浏览器站点压缩他们的HTML文档。压缩你的脚本和样式表文件一样是值得，可是多数的站点会忽视这些。事实上，压缩任何的文本形式的响应都是值得的，包括XML和JSON。图像和PDF文件不该该再被压缩了，由于它们都已是压缩形式的了。试图来压缩它们（图像和PDF）不但会浪费CPU，并且可能潜在的增长了文件的大小。

    

        尽量多的压缩文件，是一种减轻网页重量和加速用户体验的较为简单的方式。

5、

Put Stylesheets at the Top

tag: css

将样式文件放在顶部

标签：css

        当研究雅虎的性能时，咱们发现将样式文件放在文档HEAD标签中会使网页的下载速度加快。这是由于将样式表挡在HEAD标签中会是网页逐渐的渲染。

        关注性能的前端工程师想要一个网页来逐渐的加载；即，咱们想要浏览器来尽量快的展示它所已经包含的一切内容。这对于包含许多内容的页面或者对于处在一个低速网络环境中的用户来讲显得尤其重要。向用户展示诸如进度条的可视化反馈的重要性，已经被很好的研究和文档化了。在咱们的场景中，HTML页面就是进度的显示器。当浏览器逐渐的加载页面时，头部，导航条，顶部的logo，等等，全部的内容都会做为正在等待该页面的用户的可视化反馈。这提升了

内在的用户体验。

        将样式文件放在近乎文档的底部位置的问题是，这阻止了多数浏览器的逐步渲染过程，包括IE。这些浏览器会阻止渲染过程来避免当其中的样式改变时而不得不进行的页面元素的重塑。用户会被卡住，看到一个空白页面。

        

        HTML的 详细说明文档中很清楚的说明了样式应该被包含在页面HEAD标签中。不像A标签，LINK标签只能出如今文档的HEAD标签区域中。尽管他可能出现屡次。不管是哪一种备选方案，空白的屏幕，或者是无修饰内容的法拉盛，都不值得去冒险尝试！最佳的解决方案是听从HTML详细说明书，把样式放在HEAD标签中。

6、

Put Scripts at the Bottom

tag: javascript

将脚本放在底部

标签：Javascript

        脚本引发的问题是他们阻塞了并发下载。 HTTP/1.1详细说明中建议浏览器在一个主机名中不要并发的下载超过两个组件。若是多个主机名下提供图片，可能出现超过多于两个的并发下载。可是当脚本被下载时，浏览器不会开启其它的下载，甚至是在不一样的主机名下。

        有些状况下将脚本移动到底部会不太容易。例如，加入你使用document.write来插入部分页面内容，这时便不能将其移到页面较低的部分。这可能会引发做用域问题。在多数状况下有许多办法来绕过这些问题。

        常常被说起的一个可选的建议是使用延迟脚本。DEFER 属性标明了脚本中不包含document.write，而且指示浏览器能够继续渲染。不幸的是，Firefox不支持DEFER 属性。在IE中，脚本能够被延迟，可是不全是按预期的那样。若是一个脚本能够被延迟，它就能被移动到页面的底端。这会使你的页面加载更快。

7、

Avoid CSS Expressions

tag: css

避免CSS表达式

标签：css

        CSS表达式多是一个强大的（危险的）方式来动态的设置CSS的属性。它们在IE5中开始被支持，但IE8不同意其使用。举例，经过CSS表达式，能够每小时都轮流设置背景色：

 

        background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

         就像所展现的那样，expression方法接受一个Javascript表达式。CSS的属性值被设置为Javascript的表达式计算结果。expression方法在多数在其它浏览器中会被忽略，因此这对于在IE中设置建立跨浏览器的一致性体验的属性来讲会有用。

    

        表达式的问题是它们的计算频率会超乎多数人的预期的样子。不只仅是当页面从新渲染和重设大小时它们会被计算，并且是当页面滚动甚至是用户在页面上移动鼠标时它们都会被计算。在CSS表达式上预设一个计数器容许咱们追踪什么时候CSS表达式计算的时间和频率。在页面上移动鼠标可能很轻易产生超过10000次的计算。

         一个减小CSS表达式计算次数的方法是使用one-time expressions，当表达式第一次执行时，where the first time the expression is evaluated it sets the style property to an explicit value, which replaces the CSS expression，若是样式属性在页面的整个生命周期中都要动态的设置，使用事件处理来代替css表达式是一个可选的方法。若是你必需要使用CSS表达式，记住它们可能被计算成千上百次而且会影响你页面的性能。

8、

Make JavaScript and CSS External

tag: javascript, css

使Javascript和Css外部化

标签：Javascript，css

        许多这些性能法则都是解决外部组件的管理方法问题。然而，在这些考虑出现前你应该问本身一个更加基础性的问题：Javascript和CSS是应该被包含在外部的文件中，仍是应该嵌在页面自己中。

        现实世界中使用外部文件总的来讲都会产生更快的页面响应，由于Javascript和css文件在浏览器中是可缓存的。内联在HTML文档中的Javascript和CSS在HTML文档的每次请求中都被会下载。这减小了必要的HTTP请求的次数，可是却增大了HTML文档的大小。相反的，若是Javascript和CSS被包含在浏览器缓存的外部文件中，HTML文档的大小会被减少，HTTP的请求次数也没有增长。

        以后，关键的因素是外部Javascript和CSS组件被缓存的频率，相对于请求的HTML文档的数量。这个因素，尽管很难定量，仍然能够经过多种度量方式来测量。若是你的站点用户在一次会话中有多个页面视图，而且你的许多页面都重用了相同的脚本和样式，这对于缓存的外部文件来讲有很大的潜在益处。

         Many web sites fall in the middle of these metrics. 对于这些站点来讲，最好的解决方式是将Javascript和CSS做为外部文件进行部署。惟一例外的是，对于主页来讲，内联方式是可选的最佳方式，例如 Yahoo!'s front page和My Yahoo!。在一次会话中有较少页面视图的主页可能会发现内联方式的Javascript和css会产生更快的终端用户响应时间。

        对因而许多页面视图的第一前端页面来讲，有许多折中技术来利用内联方式减小HTTP请求，同时兼得使用外部文件的缓存益处。其中的一个技术是在前端页面中内联Javascript和css，可是在页面文件加载完毕后动态的下载外部文件。以后的页面将引用浏览器中缓存的已存在的外部文件。