【笔记】高性能网站建设指南

规则一：减少HTTP请求

1. 使用图片地图
2. CSS Sprites
3. 内联图片
4. 合并脚本和样式文件

问题：为什么使用外部的脚本和样式表能更有力?

 

 

规则二：使用内容发布网络

• CDN（Content Delivery Networks）是一组发布在不同地理位置的Web服务器，用于更有效的向用户发送内容，用户离服务器越近则响应速度越快。

问题：无论如何也不要使用HTTP重定向来将用户指向到本地服务器，这使Web页面变慢。

 

 

规则三：Expires头

1. Expires头：请求有效期，在此有效期之前都使用缓存
   Expires: Thu,15 Apr 2010 20:00:00 GMT
   
   
2. HTTP1.1引入带有max-age的Cache-Control头
   
   
3. mod-expires
   

 

 

规则四：压缩组件

1. 通过gzip编码压缩响应包
• 从HTTP1.1开始Web客户端可通过Accept-Encoding头来标识对压缩的支持
• Web服务器基于Accept-Encoding来检测是否响应进行压缩
  
  
2. 删除换行、回车、注释、Tab、空格
   
   

 

规则五：将样式表放在顶部（使用link标签将样式表放在head中）

1. 样式表位于底部时禁止了页面逐步呈现，在页面组件加载完成前，浏览器呈"白屏"，极大影响用户体验。（只发生在Internet Explorer）导致白屏情况有以下4种：
• 在新窗口打开时
• 重新加载时
• 作为首页
• 使用了@import规则导入样式表时
  
  
2. 样式表位于底部还会造成无样式内容闪烁（FOUC）
• 页面首先加载文字、图片，然后加载样式表，导致样式重新渲染。
  
  

 

 

规则六：将脚本放在底部

根据HTTP1.1的规范建议浏览器从每个主机名并行下载两个组件。

将脚本放置在顶部，影响页面内容的呈现，阻塞其他组件的下载（因为脚本可能使用了document.write修改内容，因此浏览器会等待脚本下载，确保页面恰当布局）。

 

规则七：避免使用CSS表达式

 

规则八：使用外部JavaScript和CSS

1. 内联的JavaScript和CSS在每次访问都要重新下载，因为只需向服务器请求html文档，不需要请求js、css文件减少了请求数量，所以首次载入速度比外部更快，但无法缓存。
2. 外部的JavaScript和CSS可被缓存，当多个页面使用相同的js和css且用户访问间隔短时，外部Javascript和CSS更具优势。

 

 

规则九：减少DNS查找

将组件放在至少2个主机名下，不超过4个主机名，在减少DNS查找和并行下载取得平衡。

 

 

规则十：精简JavaScript和CSS

JavaScript：

• 在线压缩js、css
• 如果你使用编辑器是：Sublime Text，推荐使用插件YUI Compressor

CSS：

• 简写CSS　　#606代替#660066；#888代替#888888；0代替0px；合并相同的类，移除不使用的类；

 

 

规则十一：避免重定向

避免因URL地址结尾缺少/而导致的重定向

• 配置Apache-Alias指令
• 如果时Apache2.0处理器，则配置DirectorySlash指令

 

 

规则十二：移除重复脚本

• 确保脚本只包含一次

 

 

规则十三：配置ETag或移除

 

 

规则十四：缓存Ajax（异步向服务器请求信息）

• 被动请求：预先加载用户可能需要的数据
• 主动请求：当用户进行操作再加载所需的数据

对主动请求的Ajax进行优化