网站优化----建设高性能网页

性能黄金法则

只有10%-20%的最终用户响应时间花在了下载HTML文档上。其余的80%-90%时间花在了下载页面中的所有组件上。（网页加载的时候，你可以查看你的网页加载渲染时间都花费在哪里了）

规则一：减少HTTP请求

技术：图片地图、CSS Sprites、内联图片、脚本和样式表合并。

1、图片地图

服务器端图片地图：将所有点击提交到同一个目标URL，向其传递用户点击的x、y坐标。Web应用程序将该x，y坐标映射为适当的操作。

客户端图片地图：将用户的点击映射到一个操作，而无需向后端应用程序发送请求。映射通过HTML的MAP标签实现。

2、CSS  Sprites

要使用CSS Sprites需要将多个图片合并到一个单独的图片中。（css的background）

图片地图中的图片必须是连续的，css sprites无此限制，并且更灵活，降低下载量。

在页面中为背景、按钮、导航栏、链接等提供大量图片，css sprites是优秀的解决方案。

3、内联图片

通过使用data：URL模式可以在web页面中包含图片但无需任何额外的HTTP请求。

4、合并脚本和样式表

将多个文件合并为一个文件（css、js），可以减少HTTP请求的数量并且缩短用户响应时间。

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

内容发布网络（CDN）：是一组分布在多个不同地理位置的web服务器，用于更加有效地向用户发布内容。
CDN优势：缩短响应时间、备份、扩展存储能力和进行缓存。

CDN缺点：响应时间受到其他网站影响，无法直接控制组件服务器带来的麻烦。

CDN用于发布静态内容。

规则三：添加Expires头

Expires头： Expires存储是一个用来控制缓存失效的日期。当浏览器看到响应中有一个Expires头时，它会和相应的组件一起保存到其缓存中，只要组件没有过期，浏览器就会使用缓存版本而不会进行任何的HTTP请求。Expires设置的日期格式必须为GMT（格林尼治标准时间）。

确保更新，修改图片文件名、加版本号

网页缓存（http1.0，http1.1）

一小时缓存，不允许使用过期数据

<meta http-equiv="Cache-Control"content="max-age=3600,must-revalidata">

禁止缓存
<meta http-equiv="Pragma" content="no-cache">

<metahttp-equiv="Cache-Control" content="no-cache">

规则四：压缩组件

压缩：gzip是目前最流行和最有效的压缩方法，压缩HTML文档、脚本和样式表。

压缩成本：额外的cpu压缩和解压.

基于文件类型、MIME类型、用户代理等定义压缩文件.

原理：HTTP1.1，web客户端通过HTTP请求的ACCEPT-ENCODING头来标识对压缩的支持.

规则五：将样式表放在顶部

此规则影响浏览器对组件顺序的反应。

避免白屏。

使用link标签引入css，@import可能导致白屏，加载无序性。

样式表还在加载，构建呈现树是一种浪费。在样式表准备好之前显示内容会遇到FOUC问题（无样式内容闪烁）

规则六：将脚本放在底部

页面可以逐步呈现，也可以提高下载并行度。

并行下载

脚本阻塞下载

规则七：避免CSS表达式

Css表达式是动态设置css属性的一种强大（危险）的方式。

避免css表达式残生：创建一次性表达式，使用事件处理器取代css表达式

规则八：使用外部js和css

纯粹而言，内联更快，但是使用外链js和css当浏览器缓存js和css后，更减少HTTP请求

技术：加载后下载、动态内联

优点：既可以获得内联优势，又可以缓存外链文件。

规则九：减少DNS查找

浏览器查找ip地址需要消耗时间。

技术：使用keep-alive和较少的域名来减少DNS查找

规则十：精简js和css

代码中移除不必要的字符以减少其大小，进而改善加载时间的实践。

压缩和精简

规则十一：避免重定向

重定向：将用户从一个URL重新路由到另一个URL（常用301和302）。

重定向会使得页面变慢。

技术：

缺少结尾的斜线：URL结尾必须出现斜线而没出现，最为浪费、发生也最频繁。
连接网站、跟踪内部流量、跟踪出站流量、美化URL

规则十二：移除重复脚本

重复脚本损伤性能

确保脚本只被包含一次。

规则十三：配置ETag

实体标签（Etag）：web服务器和浏览器用于确认缓存组件的有效性的一种机制。

规则十四：使ajax可缓存

优化Ajax请求

确保ajax请求遵守性能指导，尤其应具有长久的Expires头