网站性能优化

第1章 网站前端性能优化

前端近几年变化很大，各种工具，库，框架并发。虽然如此，但是网站前端性能优化的思路基本没变。
为什么前端性能如此重要？数据显示:
1）只有 10%~20%的最终用户响应时间花在了下载HTML文档上。其余的80%~90%时间花在了下载页面中的所有组件中;
2）另外一点是，优化后台需要花费比较大的成本，优化前端只需要适当地遵循一些法则会有较大的提升，相对低成本高收益。

本文是根据浏览器请求和响应的整个过程为线索，分别对每一个过程进行优化处理。

浏览器请求和响应的过程

第一步、浏览器预处理

查询Cache：读取Cache 或者发送304请求

第二步、查询DNS

优化规则–减少DNS查找
简单来说，DNS 查找就是输入域名对服务器IP地址的查找过程。DNS缓存又分为浏览器DNS缓存、操作系统DNS缓存。当你输入www.google.com的时候，浏览器会先去自身的DNS缓存里面查找有没有google服务器的IP地址；如果找不到则继续到操作系统的DNS缓存查找；如果浏览器在这两个容器都没有找到google的IP地址记录，则会向广域域名体系查找。

• 方法1：使用DNS缓存
  浏览器DNS缓存 计算机DNS缓存 服务器DNS缓存（TTL）

• 方法2：使用Keep-Alive特性
  当客户端的DNS缓存为空时，DNS查找的数量与Web页面中唯一主机名的数量相等。减少唯一主机名的数量就可以减少DNS查找的数量。

• 方法3：较少的域名来减少DNS查找（2-4个主机）

• 方法4：使用第三方DNS域名解析加速服务
  国内的一款免费DNS加速服务DNSPOD；

第三步、建立连接

优化规则– 使用内容分发网络（CDN）
CDN是一组分布在多个不同地理位置的Web服务器，由于距离用户 物理距离比较短，所以能够更加有利于用户获取到静态资源；这种服务通常需要购买，也有一些免费、通用的CDN可使用，国内的可以使用BootCDN。
PS:个人建议，启用CDN最好放在最后一步，等将站点本身的优化都做完了之后，再启用CDN可以明显的看到优化效果。（开启CDN后，由于有CDN缓存的原因，观测站点的本身的优化就不是很方便了）；

• 方法1：美国十大Internet网站和CDN服务提供商:

• 方法2：页面静态化,取决于发布系统

• 方法3：Ctrip使用的China-Cache和网宿

优化规则–用域名划分页面内容
按页面内容划分域名，在合适的资源服务器上存放文件

第四步、发送请求

优化规则–减少HTTP请求
一般来说，使用外链的脚本和样式表更加有利。分别把外链脚本和样式表进行合并会减少HTTP请求，以节省客户端和服务器之间的通讯次数来加快页面打开速度。但是出于开发的便利，开发的时候一般会采取模块化的方式；这时候可以在部署前采用一些前端构建工具把这些模块文件合并起来再发布。

HTTP请求30-40,合并文件,图片地图,内联图像
js文件（不超过7个）
css文件不超过4个，各频道首页和全站首页不超过3个。
目前无法解决的是allyes广告的请求数。
大量的广告和产品图片可能会造成，图片请求数很大，可能造成总请求数指标吃紧，这个只能从设计上搞定，需要权衡
目前老页面可能css和js文件请求数可能会超标

合并样式和脚本

优化规则–优化CSS Spirite
图片地图 Ctrip首页例子

优化规则–避免404错误
避免内部无效的链接

优化规则–不要使用frameset，少使用iframe
搜索引擎不友好，即使内容为空，加载也需要时间、会阻止页面加载
禁止使用iframe引入外部资源，不包括allyes广告，不包括about:blank的空页面。

第五步、等待响应

优化规则–避免重定向
以下是一个重定向的过程：
浏览器发送请求——>服务器返回302——>浏览器发送第二次请求—–>服务器返回200—>浏览器开始呈现
就是说，在重定向完毕并且HTML下载完毕之前，是没有任何东西显示给用户的

涉及服务器负载、数据查询、服务器端缓存等

第六步、接收数据

优化规则–压缩组件
HTML文档、脚本和样式表、XML和JSON的文本响应
压缩通常能将响应的数据量减少将近70%

优化规则–减小Javascript和CSS文件大小
从代码中移除不必要的字符以减少其大小，减少加载时间。

减少JavaScript 文件大小的有几种手段：

1. 通常被广泛使用的是精简。精简就是去除JavaScript代码中的空格、注释等多余的字符，这种方式基本上没有什么缺点。
2. 另外一种方式是混淆。混淆是在精简的基础上，把函数、变量名都用较短小的字符来替换，从而达到减少文件大小的效果。但是混淆会产生不少麻烦，很有可能会引入错误，虽然有利于防止逆向工程，当同时也增加了自己在线上环境调试的难度。
   现在普遍的做法是发布前利用 Gulp、Grunt等自动化构建工具对资源进行压缩。

优化规则–尽量缩减页面大小
页面必须小于150K(不含图片）

• 静态文件是否gzip
• 图片是否压缩优化过

第七步、读取Cache

优化规则–添加Expires头或Cache-Control
Expires头是用来告诉浏览器该响应的有效期，