高性能网站使用的14条技术(2)

http://www.itjxue.com  2015-08-07 22:28  来源:未知  点击次数: 

2.运用cdn技术

见: http://hi.baidu.com/axne/blog/item/258e23ade2d76f0a4b36d6d1.html

3.加一个长时间过期的头部

Expires: Thu, 15 Apr 2010 20:00:00 GMT
浏览器会用缓存来减少http请求数来加快页面加载的时间,如果页面头部加一个很长的过期时间,浏览器就会一直缓存页面里的元素。
不过这样会带来一个问题,就是如果页面里的东西变动的话就要改名字了,否则用户端不会主动刷新,在yahoo工作组用的是版本号,例如yahoo_2.0.6.js

4.Gzip压缩

Gzip是现在最流行和最有效的压缩方式,她是GNU开发的,RFC1952标准化。
(Gzip是在服务器端压缩图片,css,脚本等,传送到用户端的浏览器再解压,这样可以提高传输速度,不过对服务器的压力会增大,一般选择部分元素压缩比较合适。)

5.把样式表放到顶部

我们发现把css放到文档头部会让网页加载得更快。因为这样可以让页面逐渐加载。
把样式表放到接近底部的问题是它阻止了页面元素的逐渐显示。这样还会导致“flash of unstyled content” 即在样式表加载之前页面内容是以没有样式的形式显示出来的,待加载完样式后,页面重绘,内容一闪即改变了样式表现。

6.把脚本放到底部

把脚本放到尽可能底部的地方,一个原因是让页面逐渐渲染,另一个是实现更好的并行下载。

对于脚本,脚本以下的内容被阻止逐渐加载了,因为只有当下载完脚本以后才会下载下面的内容,第二个脚本引起的问题是阻止平行下载。 "http/1.1 specification"建议浏览器对一个域名, 同一时间下载数不超过2个(按:实际监测发现一般有超过2个),我曾经让ie并行下载100个图片。 当脚本正在下载的时候,浏览器不会开始下载任何东西。

7.避免css expressions

css expressions 是一个有力(和危险)的方式动态的改变css的属性。他们自ie5就开始被支持,举个例子,用css expression可以让背景色每个小时轮换一次。但是被非ie浏览器忽略的。

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

expressions的问题就在与它的计算频率绝对超出我们的想象,甚至当我们移动鼠标,都会引起页面的重绘!

下面是举例页面

减少css expressions计算次数的一个方法就是使用一次性的expressions。 当第一次expression计算出一个明确的值,就让样式等于这个值,不再变动。如果样式的属性一定要动态的改变,就用时间句柄吧!

8.让脚本和样式外延

Javascript和CSS应该是外部调用还是内嵌呢?
用外部调用文件的方式更快,因为他们是可以被缓存的,如果是内嵌在页面中他们就无法被缓存了!想想如果用户要在你的网站看很多很多的页面,如果都是使用同一个外部脚本和样式,那么他们一旦被缓存,就再也不需要下载了,这样会给你带来很大的潜在好处。

9.减少DNS查询

10.减小脚本体积

有两个比较流行的工具是用来减小脚本的体积的--JSMin和YUI Compressor
(按:这个压缩和Gzip压缩是不一样的,Gzip是传输压缩,这个是代码压缩)

(责任编辑:IT教学网)

更多