网页内容优化（减少HTTP请求、减少DNS查询、避免页面多次跳转、缓存AJAX、延迟和提前加载、根据域名划分内容减少iframe数量、避免404）

目录

减少HTTP请求

合并文件

雪碧/精灵图

内嵌图片

减少DNS查询

dns-prefetch

preconnection

避免页面多次跳转（重定向）

缓存AJAX

延迟加载（懒加载）

提前加载（首屏加载）

无条件提前加载

有条件加载

有预期的的加载

根据域名划分内容 

减少iframe数量

避免404

---

减少HTTP请求

合并文件

很多现成的库可以帮你将多个脚本文件合并成一个文件，将多个样式表文件捆合并一个文件，以此来减少文件的下载次数。

雪碧/精灵图

合并图片，并通过坐标决定显示哪张图片。

内嵌图片

通过编码的字符串将图片内嵌到网页文本中。

.sample-inline-png {
    padding-left: 20px;
    background: white url('data:image/png;base64,iVBORw0KGgoAA
AANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0l
EQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6
P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC') no-repeat scroll left top;
}

减少DNS查询

DNS查询也消耗响应时间，如果我们的网页内容来自各个不同的domain (比如嵌入了开放广告，引用了外部图片或脚本)，那么客户端首次解析这些domain也需要消耗一定的时间。DNS查询结果缓存在本地系统和浏览器中一段时间，所以DNS查询一般是对首次访问响应速度有所影响。

dns-prefetch

域名预解析

<link rel = "dns-prefetch" href="//img.alicdn.com" />

preconnection

常用于加载外部字体

一个网络字体正常加载一般都包括：

• 页面加载样式，解析样式用到的网络字体
• 网络字体开始下载，首先开始DNS的查找
• 然后TCP握手
• 如果是HTTPS，还有TLS协商，最后下载字体

当然如果是跨域资源，注意加上crossorigin属性。

<link href='https://fonts.demo.com' rel='preconnect' crossorigin>
<link href='https://demo.com/css?family=黑体' rel='stylesheet'>

避免页面多次跳转（重定向）

当客户端收到服务器的跳转回复时，客户端再次根据服务器回复中的location指定的地址再次发送请求，例如以下跳转回复。

HTTP/1.1 301 Moved Permanently            Location: http://example.com/newuri

当客户端遇到这种回复的时候，用户只能等待客户端再次发送请求，有的网站甚至会一直跳n次，跳到他想带你去的地方…当然在这个时候用户看不到任何页面内容，只有浏览器的进度条一直在刷新

缓存AJAX

Ajax可以帮助我们异步的下载网页内容，但是有些网页内容即使是异步的，用户还是在等待它的返回结果，例如ajax的返回是用户联系人的下拉列表。所以我们还是要注意尽量应用以下规则提高ajax的响应速度。

• 添加Expires 或 Cache-Control报文头使回复可以被客户端缓存
• 压缩回复内容
• 减少dns查询
• 精简javascript
• 避免跳转
• 配置Etags

延迟加载（懒加载）

实现懒加载（滚屏加载）。知道我们的网页最初加载需要的最小内容集（按需加载）是什么。剩下的内容就可以推到延迟加载的集合中。Javascript是典型的可以延迟加载内容。

提前加载（首屏加载）

实现首屏加载。

无条件提前加载

当前网页加载完成后，马上去下载一些其他的内容。例如google会在页面加载成功之后马上去下载一个所有结果中会用到的image sprite。

有条件加载

根据用户的输入推断需要加载的内容，雅虎的示例是search.yahoo.com，

有预期的的加载

这种情况一般发生在网页重新设计时，由于用户经常访问旧网页，本地对旧的网页内容缓存充分从而显得旧网页速度很快，而新的网页内容却没有缓存，设计者可以在旧网页的内容中预先加载一些新网页中可能用到的内容，这样新的网页就会生下来一些需要下载的资源。

根据域名划分内容 

浏览器一般对同一个域的下载连接数有所限制，按照域名划分下载内容可以浏览器增大并行下载连接，但是注意控制域名使用在2-4个之间，不然dns查询也是个问题。

一般网站规划会将静态资源放在类似于static.example.com，动态内容放在www.example.com上。这样做还有一个好处是可以在静态的域名上避免使用cookie。后面我们会在cookie的规则中提到。  

减少iframe数量

使用iframe要注意理解iframe的优缺点

优点

• 可以用来加载速度较慢的内容，例如广告。
• 安全沙箱保护。浏览器会对iframe中的内容进行安全控制。
• 脚本可以并行下载

缺点

• 即使iframe内容为空也消耗加载时间
• 会阻止页面加载
• 没有语义

避免404

404我们都不陌生，代表服务器没有找到资源，我们要特别要注意404的情况不要在我们提供的网页资源上，客户端发送一个请求但是服务器却返回一个无用的结果，时间浪费掉了。

更糟糕的是我们网页中需要加载一个外部脚本，结果返回一个404，不仅阻塞了其他脚本下载，下载回来的内容(404)客户端还会将其当成Javascript去解析。