高性能网站建设指南

性能黄金法则：

只有10%~20%的最终用户响应时间花在了下载HTML文档上。其余的80%~90%时间花在了下载页面中的所有组件下。

HTTP概述：

1.压缩：浏览器：Accept-Encoding（gzip、deflate）  服务器：Content-Encoding

2.缓存：浏览器：If-Modified-Since    服务器：Last-Modified

如果组件自生成日期以来，没有改变过，服务器返回304—Not Modified

服务器：Expires

条件GET请求和304响应有助于让页面加载更快，但仍需要在客服端和服务器之间进行一次往返确认，以执行有效性检查。

Expires头通过明确指出浏览器是否可以使用组件的缓存副本来消除这个需求。

规则1、减少HTTP请求（CSS Sprites， 合并脚本和样式表）

规则2、使用内容发布网络（CDN）：其是一组分布在多个不同地理位置的Web服务器，用于更加有效地向用户发布内容。

CDN用于发布静态内容，如图片、脚本、样式等，提供动态HTML页面会引入特殊的存储需求—数据库连接等，这些复杂性超越了CDN的能力范围。

规则3、添加Expires（HTTP1.0）头：页面的初访者会进行很多HTTP请求，但通过使用一个长久的Expires头，使这些组件可以被缓存，这会在后续的页面浏览中避免不必要的HTTP请求。

Expires缺点：Expires头使用一个特定的时间，并要求服务器与客户端的时钟同步，且，过期日期需要经常检查，一旦Expires失效，还需要在服务器配置中提供一个新的日期。

HTTP1.1引入Cache-Control使用max-age来指定组件被缓存多久（是以秒为单位），从而消除Expires限制。如：Cache-Control: max-age = 31536000

规则4、压缩组件：通过减少HTTP响应的大小来减少响应时间。如果HTTP请求产生的响应包很小，传输时间就会减少，因为只需要将很小的包从服务器传递给客服端。

HTTP1.1 客服端  服务端

Accept-Encoding:gzip, deflate Content-Encoding:gzip

注：图片和PDF不应该压缩，因为它们本来就已经被压缩了。试图对它们进行压缩，只会浪费CPU资源，还可能会增加文件大小。

Apache1.3使用mod-gzip模块压缩文件为gzip

Apache2.x使用mod-deflate模块压缩文件为deflate

解决代理缓存问题：

Vary: Accept-Encoding 默认情况下，mod-gzip会向所有响应添加Vary: Accept-Encoding头，以驱使代理执行正确操作。

Cache-Control:private 禁止代理缓存，防止边缘情形，服务器发送加了gzip的文件给不支持gzip的浏览器。

规则5、将样式表放在顶部：样式表在页面中的位置并不影响下载时间，但会影响页面呈现。遵循HTML规范，将其放在顶部，两种情况（白屏和无样式内容闪烁FOUC）都无需承担风险。

规则6、将脚本放在底部，这样页面既可以逐步呈现，也可以提高下载的并行度。

规则7、避免CSS表达式

规则8、使用外部JavaScript和CSS

内联更快一些，只限于首次请求，因为外部要承担更多的http请求。但外部文件可以缓存。如果网站中的每个页面都使用了相同JavaScript和CSS，使用外部文件可以提高这些组件的重用率。

规则9、减少DNS查找

DNS（Domain Name System），将主机名映射到IP地址上。减少唯一主机名的数量就可以减少DNS查找的数量。但减少唯一主机名的数量会潜在地减少页面中并行下载的数量。

另：可以通过Keep-Alive，它可以通过重用现有连接，从而避免TCP/IP开销来减少时间，且确保服务器支持Keep-Alive，还能减少DNS查找。

规则10、精简JavaScript

规则11、避免重定向

重定向用于将用户从一个URL重新路由到另一个URL，重定向有多种—301,302是最常见的两种。重定向会使页面变慢，因为它延迟了整个HTML文档的传输。

规则12、移除重复脚本

规则13、配置Etag

当缓存组件过期时，会发送http请求，服务器会检测过期组件是否和原始服务器上的组件匹配，有两种方式：

1、比较最新修改日期HTTP1.0—服务器（Last-Modified），浏览器（If-Modified-Since）

2、比较实体标签HTTP1.1，且优先级高于1—服务器（Etag），浏览器（If-None-Match），另当网站被宿主在多个服务器上时，Etag可能会阻碍缓存。

规则14、使Ajax可缓存

浏览器通常在运行JavaScript上花费的时间很少，绝大部分时间消耗在DOM上。

创建快速响应的Web应用

如果JavaScript代码执行时间超过0.1秒，页面将会给人不够平滑快捷的感觉；超过1秒，则会感到应用程序缓慢；超过10秒，则die。

可以利用WebWorker和定时器解决。

无阻塞加载脚本

浏览器在下载和执行脚本时，出现阻塞的原因在于，脚本可能会改变页面或JavaScript的名字空间，它们会对后续内容造成影响，如document.write改变页面。

下面列出来的技术既拥有外部脚本的好处，又能避免阻塞导致的减速影响：

1、XHR Eval

2、XHR注入

3、Script in Iframe

4、Script DOM Element

5、Script Defer

6、Document.write Script Tag，注： 虽然多个脚本可以并行瞎子，但浏览器仍然阻塞其他类型的资源。

当外部脚本按常规方式加载时，它会阻塞行内代码的执行，竞争状态不会发生。一旦我们开始异步加载脚本，就需要一种技术把行内代码和依赖行内代码的外部脚本整合起来。如下：

1、硬编码回调—将依赖函数改为在外部脚本中调用它。

2、Window.onload—缺点：异步脚本必须阻塞onload;导致延迟执行

3、定时器—轮询

4、Script onload—最佳

5、Degrading Script Tags，如下：

<script src=’M.js’ type=’text/javascript’> var a = 1; function init(){M(a)}; </script>

布置行内脚本

虽然行内脚本不会产生额外的http请求，但会阻塞页面上资源的并行下载，还会阻塞逐步渲染。解决方案，如下：

1、行内脚本移至底部

2、使用异步回调启动JavaScript的执行

3、使用Script的defer属性

注：关于样式表，浏览器按照样式表在页面中列出的顺序应用它们，而与下载顺序无关。

当把行内脚本放置在样式表之后时，该行为明显地延迟资源的下载。这个顺序导致只有样式表下载完成并且行内脚本执行完毕，后续资源才能开始下载。

可伸缩的Comet

Comet，描述技术、协议和浏览器提供可行且可扩展的低延迟数据传输实现的集合，目标包括随时从服务端向客户端推送数据，提升传统Ajax的速度和可扩展性。

在客户端常用的技术包括轮询、长轮询、永久帧、XHR流以及WebSocket。

图像优化

该章内容包括：

1、Web上不同图像格式的特征（GIF、JPEG和PNG）

2、自动化无损压缩

3、AlphaImage Loader滤镜

4、优化Sprites

5、其他图像技术

RGB颜色模型可以展示256*256*256中颜色，支持这么多颜色的图像格式叫做真彩色图像格式，如JPEG和真彩色类型的PNG.

为了节省图像信息存储空间，有一项技术是将图像中各种不同颜色提取出来建一个表，这个表通常叫调色板，最常用的调色板图像格式为GIF和PNG8。

GIF：是一种调色板图像格式。

透明度只支持（0/1）状态，即透明或不透明；支持动画；

无损：也就是你打开任意一个GIF文件，做一些修改，保存关闭时，不会损失任何质量。

JPEG：有损，不支持透明和动画。JPEG是Web上用来存储照片的最佳格式。

PNG：完全支持透明，且无损。

PNG又分为调色板PNG和真彩色PNG。

PNG8：调色板PNG

PNG24：真彩色PNG，但不支持alpha

PNG32：真彩色PNG，支持alpha

划分主域

浏览器执行“每个服务端最大连接数”的限制，是根据URL上的主机名，而不是解析出来的 IP地址。

少用iframe

Iframe:

1、开销最高的DOM元素；

2、iframe阻塞onload事件，可以动态设置iframe的src属性和在onload事件后设置src属性来避免。

简化CSS选择符

CSS选择符是从右到左进行匹配的。

选择符有：ID、类、类型、相邻+、子选择>、后代、通配符、属性、伪类和伪元素

如果喜欢本文，请点击右下角的推荐，谢谢~

未经允许不得转载：爱前端网 » 高性能网站建设指南