杰拉斯的博客

在制作网页的时候，常常会遇到一种情况，我们需要把一些未知尺寸的图片放在一个固定宽高的容器中，这时候我们需要考虑这样的问题：

1. 只给图片设置宽度或高度的其中一项可以实现图片等比缩放，但图片可能超出容器大小。
2. 给图片设置固定的宽高可能导致图片变形。

有些人可能会简单地用JavaScript解决：

<img src="image-url.png" onload="if(this.width > 100){this.width = 100;}if(this.height > 100){this.height = 100;}" />

(阅读全文…)

我们在前面的几节中分别讲了提高网站性能中内容、服务器、JavaScript和CSS等方面的内容。除此之外，图片和Coockie也是我们网站中几乎不可缺少组成部分，此外随着移动设备的流行，对于移动应用的优化也十分重要。这主要包括：

Coockie:

1. 减小Cookie体积
2. 对于页面内容使用无coockie域名

图片：

1. 优化图像
2. 优化CSS Spirite
3. 不要在HTML中缩放图像
4. favicon.ico要小而且可缓存

移动应用：

1. 保持单个内容小于25K
2. 打包组件成复合文本

(阅读全文…)

在第一部分和第二部分中我们分别介绍了改善网站性能中页面内容和服务器的几条守则，除此之外，JavaScript和CSS也是我们页面中经常用到的内容，对它们的优化也提高网站性能的重要方面：

CSS：

1. 把样式表置于顶部
2. 避免使用CSS表达式（Expression）
3. 使用外部JavaScript和CSS
4. 削减JavaScript和CSS
5. 用<link>代替@import
6. 避免使用滤镜

JavaScript

1. 把脚本置于页面底部
2. 使用外部JavaScript和CSS
3. 削减JavaScript和CSS
4. 剔除重复脚本
5. 减少DOM访问
6. 开发智能事件处理程序

(阅读全文…)

在本系列的第一节中，讲了提高网站性能中网站“内容”有关的10条原则。除了在网站在内容上的改进外，在网站服务器端上也有需要注意和改进的地方：

服务器部分

1. 使用内容分发网络
2. 为文件头指定Expires或Cache-Control
3. Gzip压缩文件内容
4. 配置ETag
5. 尽早刷新输出缓冲
6. 使用GET来完成AJAX请求

(阅读全文…)

Yahoo!的Exceptional Performance团队为改善Web性能带来最佳实践。他们为此进行了一系列的实验、开发了各种工具、写了大量的文章和博客并在各种会议上参与探讨。最佳实践的核心就是旨在提高网站性能。

Excetional Performance团队总结出了一系列可以提高网站速度的方法。可以分为7大类34条。包括内容、服务器、cookie、CSS、JavaScript、图片、移动应用等七部分。

其中内容部分一共十条建议：

一、内容部分

1. 尽量减少HTTP请求
2. 减少DNS查找
3. 避免跳转
4. 缓存Ajxa
5. 推迟加载
6. 提前加载
7. 减少DOM元素数量
8. 用域名划分页面内容
9. 使frame数量最少
10. 避免404错误

(阅读全文…)