减少 HTTP 请求
减少页面的请求次数（首次加载同时请求数不能超过 4 个），移动设备浏览器同时响应请求为 4 个请求（Android 支持 4 个，IOS5+ 支持 6 个）
各个浏览器在同一时间，能向同一域名请求的最大并发连接数：
请求次数具体参考：浏览器同域名请求的最大并发数限制
- 合并 CSS 和 JS
- 使用 CSS 精灵图
合并 css 和 js
将多个 css 文件合并成一个 css 文件，js 也是同理
不过也发现了一种将 js 和 css 文件 " 合并 " 的方式
test.jscss 文件
<!-- /*
function showMsg(m){
alert(m);
}
<!-- */
<!-- .d{color:red;}
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" language="javascript" src="test.jscss"></script>
<link rel="stylesheet" rev="stylesheet" type="text/css" href="test.jscss" />
</head>
<body>
<div class='d'>颜色变成红色</div>
<input type="button" value="不会弹出" οnclick="showMsg('js');" />
</body>
</html>详情请查阅：# 把JS和CSS合并到1个文件
css 图像精灵
图像精灵（sprite）是单个图像中包含的图像集合
- 包含许多图像的网页可能需要很长时间才能加载，同时会生成多个服务器请求，而使用图像精灵将减少服务器请求的数量并节约带宽
技术实现：通过 background-position 属性来定位显示大图片中小图片的位置来实现只显示小图片的效果
- background: url(navsprites.gif) 0 0; - 定义背景图片及其位置（left 0px, top 0px）
示例：
这是完整图片
<!DOCTYPE html>
<html>
<head>
<style>
#home {
width: 46px;
height: 44px;
background: url(/i/css/navsprites.gif) 0 0;
}
#next {
width: 43px;
height: 44px;
background: url(/i/css/navsprites.gif) -91px 0;
}
</style>
</head>
<body>
<img id="home" src="/i/css/trans.gif" width="1" height="1">
<img id="next" src="/i/css/trans.gif" width="1" height="1">
</body>
</html>目标显示效果
具体参考：CSS 图像精灵
缓存资源
使用缓存可减少客户端向服务器的请求次数，节省加载时间，所有的静态资源都可以再服务器端设置缓存，并推荐使用长缓存
- 缓存一切可缓存的资源
- 使用长缓存
- 使用外联的样式和脚本
缓存过程
#缓存
浏览器与服务器通信的方式为应答模式，即是：浏览器发起 HTTP 请求 – 服务器响应该请求。那么浏览器第一次向服务器发起该请求后拿到请求结果，会根据响应报文中 HTTP 头的缓存标识，决定是否缓存结果，是则将请求结果和缓存标识存入浏览器缓存中
长缓存方式
- HTTP 缓存
- 离线缓存 (Application Cache，已废弃)
- Service Worker（Web 缓存）
此外还有， 浏览器缓存
浏览器缓存
压缩代码
减少资源大小可加快网页显示速度，对代码进行压缩，并在服务器端设置 GZip
- 压缩代码 (多余的缩进、空格和换行符)
- 启用 Gzip
压缩技术
浏览器的调试工具查看：
服务端开启 Gzip 方式
无阻塞
头部内联的样式和脚本会阻塞页面的渲染，样式放在头部并使用 link 方式引入，脚本放在尾部并使用异步方式加载
首屏加载
首屏快速显示可大大提升用户对页面速度的感知，应尽量针对首屏的快速显示做优化
按需加载
将不影响首屏的资源和当前屏幕不用的资源放到用户需要时才加载，可大大提升显示速度和降低总体流量 (按需加载会导致大量重绘，影响渲染性能)
- 懒加载
- 滚屏加载
- Media Query 加载（相比之下，可能重新制作一套移动页面更合适）
预加载
大型资源页面可使用 Loading，资源加载完成后再显示页面，但加载时间过长，会造成用户流失
- 可感知 Loading：进入页面时 Loading
- 不可感知 Loading：提前加载下一页
压缩图像
使用图像时选择最合适的格式和大小，然后使用工具压缩，同时在代码中用 srcset 来按需显示 (
过度压缩图像大小影响图像显示效果)
- 使用 TinyJpg 和 TinyPng 压缩图像
- 使用 CSS3、SVG、IconFont 代替图像
- 使用 img 的 srcset 按需加载图像
- 选择合适的图像：webp 优于 jpg，png8 优于 gif
- 选择合适的大小：首次加载不大于 1014kb、不宽于 640px
- PS 切图时 D 端图像保存质量为 80，M 端图像保存质量为 60
减少 Cookie
Cookie 会影响加载速度，静态资源域名不使用 Cookie
避免重定向
重定向会影响加载速度，在服务器正确设置避免重定向
异步加载第三方资源
第三方资源不可控会影响页面的加载和显示，要异步加载第三方资源
参考
贡献者
jiechen