没事儿研究一下YAHOO工程师对网站优化给出的策略,对重点部分在这儿做下笔记
-----------------------------------------------我是分割线--------------------------------------------------------------
网站优化就是让网站在更短的时间内加载完成,当然最简单的方式就是减少网页内容,那么有没有什么办法能在不牺牲网站内容的前提下还能提高加载速度呢?一下给出几条方案。
1、将同一个页面中的多个css、js文件整合到一个文件中以达到减少http请求的目的
2、CSS Sprites是处理若干小图表的利器,然后你可以利用background-image和background-position定位你需要的图片位置,这样的好处是减少图片加载次数
3、减少减少DNS查找
> 在浏览器中输入网址时,浏览器联系的DNS解析程序会返回该服务器的IP地址。联系DNS会消耗一定的时间。DNS通常需要20-120毫秒才能查找给定主机名的IP地址。在完成DNS查找之前,浏览器无法从此主机名下载任何内容。
>当客户端的DNS缓存为空(对于浏览器和操作系统)时,DNS查找的数量等于网页中唯一主机名的数量。这包括在页面的URL,img,js,css,Flash对象等使用的主机名。减少唯一主机名的数量减少了DNS查找的数量。
>减少唯一主机名的数量有可能减少页面中发生的并行下载量。避免DNS查找减少响应时间,但减少并行下载可能会增加响应时间。我的准则是将这些组件分成至少两个但不超过四个主机名。这导致减少DNS查找并允许高度并行下载之间的良好折中。
4、简化JavaScript和CSS
简化是从代码中删除不必要的字符已达到精简代码从而减少加载时间的作用,在简化代码时删除不必要的注视和空格,
5、使用外部JavaScript和CSS
一般情况下使用外部文件通常会产生更快的页面,因为JavaScript和CSS文件被浏览器缓存。HTML文档中内联的JavaScript和CSS在每次请求HTML文档时都被下载。这减少了所需的HTTP请求数量,但是增加了HTML文档的大小。另一方面,如果JavaScript和CSS在浏览器缓存的外部文件中,则HTML文档的大小会减少,而不增加HTTP请求的数量。
6、避免重定向
要记住的是重定向会减慢用户体验。在用户和HTML文档之间插入重定向会延迟页面中的所有内容,因为页面中没有任何内容可以呈现,并且在HTML文档到达之前,不会开始下载任何组件
最浪费的重定向之一是频繁发生的,Web开发人员通常不会意识到这一点。当一个URL中缺少一个尾部斜线(/)时,就会发生这种情况。例如,去http://astrology.yahoo.com/astrology得到一个包含重定向到http://astrology.yahoo.com/astrology/(注意添加的尾部斜线)的301响应。
7、缓存AJAX
Ajax是异步加载,但异步与瞬时区别很大
为了提高性能,重要的是优化这些Ajax响应。提高Ajax性能的最重要的方法是使响应可缓存,如添加到期或缓存控制头。
即使您的Ajax响应是动态创建的,并且可能仅适用于单个用户,它们仍可被缓存。这样做会使您的Web 2.0应用程序更快。
8、Gzip组件
Gzip是目前最流行和最有效的压缩方式
Gzip通常将响应大小减少约70%。
图像和PDF文件不应该被压缩,因为它们已被压缩。尝试gzip它们不仅浪费CPU,但可能会增加文件大小。
尽可能多地处理文件类型是减少页面权重并加速用户体验的简单方法。
9、将样式表放在顶部
将样式表移动到文档HEAD使页面似乎加载速度更快。这是因为在HEAD中放置样式表可以让页面逐渐呈现。
10、把脚本放在底部
11、避免使用CSS表达式
表达式的问题是,它们的评估比大多数人所期望的更频繁。不仅在页面呈现和调整大小时进行评估,还会在页面滚动时进行评估,即使用户将鼠标移动到页面上也是如此
12、配置ETag
ETag的问题在于,它们通常使用属性来构建,这些属性使得它们对托管站点的特定服务器是唯一的。当浏览器从一个服务器获取原始组件并且稍后尝试在不同的服务器上验证该组件时,ETags将不匹配,这种情况在使用服务器群集处理请求的网站上太常见。默认情况下,Apache和IIS都嵌入ETag中的数据,大大降低了在具有多个服务器的网站上成功执行有效性测试的可能性
13、AJAX请求使用GET
使用XMLHttpRequest
POST 时,在浏览器中实现了两步的过程:首先发送头文件,然后发送数据。所以最好使用GET,它只需要一个TCP数据包发送(除非你有很多的cookie)
14、后负载组件
先加载重要的内容展示部分,然后加载那些内容展示部分的附加部分(动效)
15、预加载组件
通过预加载组件,您可以利用浏览器空闲的时间,并请求将来需要的组件(如图像,样式和脚本)。这样当用户访问下一页时,您可以将大部分组件放在缓存中,并且您的页面将为用户加载更快
无条件预加载 - 一旦加载启动,您就可以继续提取一些额外的组件。检查google.com,了解如何请求一个精灵图像的加载。这个精灵图片在google.com主页上不需要,但在连续搜索结果页面上需要。
有条件的预加载 - 根据用户的操作,您可以根据用户的猜测猜测下一步的用户,并相应地进行预加载。在search.yahoo.com上,您可以看到在输入框中输入后,如何请求额外的组件。
预计预加载 - 在启动重新设计之前提前预加载。经常重新设计后,您会发现:“新网站很酷,但比以前更慢”。问题的一部分可能是用户正在使用完整的缓存访问旧站点,但新的站点始终是空缓存体验。您可以在启动重新设计之前预先加载某些组件来减轻此副作用。您的旧站点可以使用浏览器空闲的时间,并请求新站点使用的图像和脚本
16、减少DOM元素的数量
复杂的页面意味着更多的字节下载,也意味着JavaScript中的DOM访问速度较慢。
17、最小化iframe的数量
iframes 提供了一个简单的方式把一个网站的内容嵌入到另一个网站中。但其创建速度比其他包括JavaScript和CSS的DOM元素的创建慢了1-2个数量级。
18、没有404s
HTTP请求极其浪费时间,所以发出HTTP请求并获得无用的响应(即404 Not Found)是完全不必要的,并且会减慢用户体验,没有任何好处
19、减少Cookie大小
保持cookie的大小尽可能地减小对用户响应时间的影响是很重要的。
消除不必要的cookies
保持尽可能小的cookie大小,以尽量减少对用户响应时间的影响
请注意在适当的域级别设置Cookie,以便其他子域不受影响
适当设置到期日期 早期的过期日期或无法更早地删除cookie,从而改善用户响应时间
20、为组件使用Cookie免费域
当浏览器发出请求静态图像并将cookie发送到请求时,服务器对这些cookie没有任何用处。所以他们只是创造网络流量没有好的理由。您应该确保使用无Cookie请求请求静态组件。创建一个子域并托管所有静态组件。
21、最大限度地减少DOM访问
使用JavaScript访问DOM元素很慢,所以为了有一个更敏感的页面,你应该:
缓存对访问元素的引用
更新节点“脱机”,然后将其添加到树中
避免使用JavaScript修复布局
22、选择<link>超过@import
以前的最佳实践之一表明,CSS应该在顶部,以允许逐行渲染。
在IE的@import
行为与<link>
页面底部的使用相同,所以最好不要使用它。
23、避免过滤器
此过滤器的问题是在下载图像时阻止渲染并冻结浏览器。它还增加了内存消耗,并且每个元素都应用,而不是每个图像,所以问题被增加。
24、优化图像
您可以检查GIF,并查看它们是否正在使用与图像中颜色数量相对应的调色板大小,当您在调色板中看到使用4种颜色和256色“插槽”的图像时,还有改进的余地。
尝试将GIF转换为PNG,并查看是否有保存
在所有PNG上 运行pngcrush(或任何其他PNG优化工具)
在所有JPEG上运行jpegtran。此工具可进行诸如旋转等无损JPEG操作,也可用于从图像中优化和删除评论和其他无用信息
25、不要在HTML中缩放图像
26、使favicon.ico小而且可缓存
avicon.ico是一个停留在服务器根目录中的映像。这是一个必要的邪恶,因为即使你不在乎它,浏览器仍然会要求它,所以最好不要回应404 Not Found
。此外,由于它在同一台服务器上,所以每次请求时都会发送Cookie。该图像还会干扰下载顺序,例如在IE中,当您在onload中请求额外的组件时,会在这些额外的组件之前下载该图标。
27、保持组件低于25K
这个限制与iPhone不会缓存大于25K的组件有关
28、将组件打包成多部分文档
29、避免空图像src
30、删除重复的脚本