Content
- 尽可能的减少HTTP请求
减少组件(图片,脚本,样式表、Flash等)的数量,并由此减少http请求的数量。
- CSS Sprites:
将多个图片合并到一个单独的图片中,再结合css的background-position属性一起使用,通过合并图片减少http请求。
适用场景:若需要在页面中为背景,按钮,导航栏,链接等提供大量图片,可使用CSS Sprites。
- 合并脚本和样式表:
若不同页面需要不同的脚本,可能脚本合并的组合数会比较多。
- 使用 CDN(内容分发网络)
- DNS缓存:
在用户请求了一个主机名后,DNS信息会留在操作系统的DNS缓存中,之后对于该主机名的请求将无需进行过多的DNS查找。
- 通过使用keep-Alive和较少的域名来减少DNS查找:
keep-Alive通过重用现有连接避免了重复的DNS查找,减少唯一主机名的数量可以减少DNS查找。
- 建议:
可以将组件分别放在至少2个,但不要超过4个主机名下,这是在减少DNS查找和允许高度并行下载之间作出的很好的权衡。
- 避免重定向
重定向会延迟整个HTML文档的传输,在HTML文档到达之前,页面中不会呈现出任何东西,也没有任何组件会被下载。
- 使 AJAX 可缓存
- 压缩组件(使用gzip编码压缩http响应包)
压缩HTML文档、样式表和脚本。
压缩成本:服务器端会花费额外的CPU周期来完成压缩,客户端要对压缩文件进行解压缩。
- 预加载组件
- 减少 DOM 元素的数量
- 将组件分散在多个域
- 最小化 iframe 框架的数量
- 避免 404 状态码的出现
- 减少 DNS 查找
运用浏览器缓存。
Server
- 使用 CDN
- 添加 Expires 或 Cache-Control 头
- 使用 gzip 压缩组件
- 配置实体标签 Etags
- 尽早释放服务器缓存
- 使用 get 发送 Ajax 请求
- 避免出现空的 img src
- 使用 AJAX 缓存
- 分批加载
- 局部更新
Cookie
- 减少 cookie 的尺寸
cookie存放在本地,但是每次发送服务器请求的时候都会被发送到服务器端。
- 针对 Web 组件使用域名无关性的 Cookie
CSS
- 把 CSS样式表用 link导入放在顶部
避免页面出现空白或者闪烁。
- 避免使用 CSS 表达式
- 优先选择用 link 导入CSS样式而不是 @import
- 避免使用过滤器
JavaScript
- 把 JavaScript 放在底部
- 使用外部的JavaScript和CSS
- 提高组件的重用率。
- 减小了页面体积。
- 提高了组件的可维护性。
写在页面内的情况:
- 只应用于一个页面的时候。
- 不经常被访问到的页面。
- 脚本和样式很少的情况下。
- 精简 JavaScript 和 CSS
- 去除不必要的空格符、格式符、注释符。
- 简写方法名、参数名压缩 JS脚本。
- 移除重复的脚本
- 最小化 DOM 访问
- 开发智能事件处理程序
Images
- 使用比较小的图片
- 使用 CSS Sprites(合图)
- 不要在 HTML 中使用 图片的缩放方法
会调用浏览器本身的一些渲染引擎。
- 让图标资源小一些并使其可缓存