高性能网站开发

前一段时间公司的负责人分享了一些高性能网站开发的经验

作为一名网站开发者，我们需要站在用户角度来考虑每一个项目，因为前端是与用户最直接的接触，后端是用户等待响应时间的直接体现，而服务器端则会直接影响整个项目的性能，这也就是我们进行高性能网站开发的必要性所在。我们需要时刻检验自己开发的项目是否符合高性能网站的标准，灵活地根据不同的业务使用相应的高性能技术或方法。

前端高性能

前端高性能的必要性

网页前端的性能优化，这一部分是最直接与用户接触的

无论你服务器多么高端、后端逻辑多么简洁多么高效，前端的用户体验很差，那么你这个项目就不会是一个很成功的项目，所以前端的性能优化是很有必要的

图片压缩

前端的高性能部分，主要是指减少请求数、减少传输的数据以及提高用户体验，在这个部分，图片的优化显得至关重要。许多网站的美化，都是靠绚丽的图片达到的，图片恰恰是占用带宽的元凶。每个img 标签，浏览器都会试图发起一个下载请求。

减少图片的大小，可以明显的提高性能，而对于已有图片，要想减少图片的大小，只能改变图片的格式，这里推荐的是PNG 的格式，它可以在基本保持清晰度的情况下，减少图片的大小。推荐一个在线转换工具它的地址是：http://www.tuhaokuai.com/image?b-png

图片大小控制：

        1）静态页面验收时，检查每张图片不能超过200K，每个页面不能超过2.5M；

       2）CMS后台上传图片，检查每张图片不能超过200K，尽量不要使用原图，使用压缩过的图片；

图片合并实现 CSS Sprites

CSS Sprites 是一个吸引人的技术，它其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS 的“background-image”，“background-repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置；

利用 CSS Sprites 能很好地减少网页的HTTP 请求，从而大大的提高了页面的性能；

能减少图片的字节，由于图像合并后基本信息不用重复，那么多张图片合并成 1 张图片的字节往往总是小于这些图片的字节总和；

更换风格方便、维护方便。

懒加载与预加载

预加载和懒加载，是一种改善用户体验的策略，它实际上并不能提高程序性能，但是却可以明显改善用户体验或减轻服务器压力。

预加载原理是在用户查看一张图片时，就将下一张图片先下载到本地，而当用户真正访问下一张图片时，由于本地缓存的原因，无需从服务器端下载，从而达到提高用户体验的目的。

懒加载则是在用户需要的时候再加载。当一个网页中可能同时有上百张图片，而大部分情况下，用户只看其中的一部分，如果同时显示上百张，则浪费了大量带宽资源，因此可以当用户往下拉动滚动条时，才去请求下载被查看的图像。（JQuery 的懒加载组件）

css放在页面的上面,js放在页面的下面

浏览器会在下载完全部的css之后才会对整个页面进行渲染，因此最好是将css放在页面最上面，让浏览器尽快下载css.

JS则相反，浏览器在加载js后立即执行，有可能会阻塞整个页面，造成页面显示缓慢，因此js最好放在页面最下面。但是也有特殊情况，如果页面解析时就需要用到js或者有特殊要求必须把js放置在head里面，这时放在最下面就不合适了.

尽量减少HTTP请求次数

剔除重复脚本：在同一个页面中重复引用JavaScript文件会影响页面的性能，重复脚本会引起不必要的HTTP请求和无用的JavaScript运算，这降低了网站性能

js或css或img文件合并和压缩，来减少Http请求

ajax异步请求，防止多次请求，程序判断第一次请求完成后再允许第二次请求

可缓存的ajax

Ajax经常被提及的一个好处就是由于其从后台服务器传输信息的异步性而为用户带来的反馈的即时性。

但是，使用Ajax并不能保证用户不会在等待异步的JavaScript和XML响应上花费时间。

在很多应用中，用户是否需要等待响应取决于Ajax如何来使用。

例如，在一个基于Web的Email客户端中，用户必须等待Ajax返回符合他们条件的邮件查询结果。

记住一点，“异步”并不异味着“即时”，这很重要

不要在html中缩放图片

不要为了在HTML中设置长宽而使用比实际需要大的图片。

如果你需要： 

<img width="100"height="100" src="mycat.jpg" alt="My Cat"/> 

那么你的图片（mycat.jpg）就应该是100x100像素而不是把一个500x500像素的图片缩小使用。

前端总结

前后端的制作和开发者，需要制定一些前端制作的基本规范，考虑哪些高性能的技术适合哪种情况使用，制作前要先思考一下，开发者在拿到静态页面时需要检查这些点，前端制作者是否都有使用；

后端开发者需要提供一份CMS后台上传图片的尺寸给到需求方，避免需求方上传图片尺寸不符合规定的尺寸；

js和css公用文件整理，减少http请求，提高我们项目的访问速度。

后端高性能开发

代码复杂性,优化响应速度

代码越复杂，性能越不好，越容易出错，我们在编辑代码时尽量精简化、逻辑简单化；根据需求使用最简单的方法实现功能效果；尽量减少对数据库的操作；减少循环请求或多次请求的逻辑。

代码重复调用,冗余

css/js/img/php重复调用，导致多次请求，影响加载速度和性能

检查和优化代码，减少重复调用请求，从而提高加载速度和优化性能

减少代码冗余

语法严谨、杜绝死循环逻辑

数据缓存（redis/memache）

根据不同的需求使用不同的缓存技术（内存使用率、数据类型、持久性、数据安全等条件筛选适合你的缓存技术）

获取数据库的数据，根据需求分析是否可以使用缓存，是否要对数据进行缓存

mysql优化

Explain你的SELECT查询：使用Explain关键字可以让你知道MySQL是如何处理你的SQL语句的。这可以帮你分析你的查询语句或是表结构的性能瓶颈。

当只要一行数据时使用LIMIT1：在这种情况下，加上LIMIT1可以增加性能。这样一样，MySQL数据库引擎会在找到一条数据后停止搜索，而不是继续往后查少下一条符合记录的数据。

为搜索字段建索引：索引并不一定就是给主键或是唯一的字段。如果在你的表中，有某个字段你总要会经常用来做搜索，那么，请为其建立索引

选择正确的存储引擎：

   1）MyISAM适合于一些需要大量查询的应用，但其对于有大量写操作并不是很好。甚至你只是需要update一个字段，整个表都会被锁起来，而别的进程，就算是读进程都无法操作直到读操作完成。另外，MyISAM对于SELECT COUNT(*) 这类的计算是超快无比的。

   2）InnoDB的趋势会是一个非常复杂的存储引擎，对于一些小的应用，它会比MyISAM还慢。他是它支持“行锁” ，于是在写操作比较多的时候，会更优秀。并且，他还支持更多的高级应用，比如：事务。

垂直分割：“垂直分割”是一种把数据库中的表按列变成几张表的方法，这样可以降低表的复杂度和字段的数目，从而达到优化的目的。但是你需要注意的是，这些被分出去的字段所形成的表，你不会经常性地去Join他们，不然的话，这样的性能会比不分割时还要差，而且，会是极数级的下降。

把IP地址存成UnsignedInt(无符号整型)：很多程序员都会创建一个VARCHAR(15) 字段来存放字符串形式的IP而不是整型的IP。在PHP中，也有这样的函数ip2long()和long2ip()。

读写分离、db集群等优化

还有其他优化可查看该地址：http://blog.csdn.net/waferleo/article/details/7179009

代码功能监控

1）监控后台设置监控规则，代码请求达到规则限制时，发短信或邮件报警

2）代码层面加监控代码，监控配置设置、逻辑在哪一步某一条件时，需要对其进行提交报警日志

后端总结

考虑用户体验问题，优化请求速度、代码精简化、逻辑简单化、语法严谨

根据需求分析是否需要加缓存技术

功能性活动，考虑访问量问题，代码逻辑要把高并发的问题考虑进去

mysql的优化

功能逻辑如果有必要加一下监控代码

服务器高性能搭建

网站架构规划

1)机房选择：选择单线、双线或多线机房

2)带宽大小：根据网站预估PV的访问量来设置带宽大小（1G）

3)服务器划分：图片服务器、页面服务器、数据库服务器、应用服务器、日志服务器等（db读写分离、集群）

4)框架选择：如PHP的YII框架，逻辑分层（MVC）

5)缓存：架构层面（apache/varnish）;程序层面（redis、memcache）

6)负载均衡：HTTP协议、TCP业务类型【Nginx轻量级负载均衡、高可用；LVS(服务器集群负载均衡)+KeepAlived(检测服务器工作是否正常)：实现负载均衡和高可用】

http持久链接

持久连接（Keep-Alive）也叫做长连接，它是一种TCP 的连接方式，连接会被浏览器和服务器所缓存，在下次连接同一服务器时，缓存的连接被重新使用。由于HTTP 的无状态性，人们也一直很清楚“一次性”的 HTTP通信。持久连接则减少了创建连接的开销，提高了性能。（在线聊天功能）

GZIP压缩

为了减少传输的数据，压缩是一个不错的选择，而 HTTP协议支持 GZIP 的压缩格式，服务器响应的报头包含Content-Encoding: gzip，它告诉浏览器，这个响应的返回数据，已经压缩成GZIP 格式，浏览器获得数据后要进行解压缩操作，在一定程度可以减少服务器传输的数据，提高系统性能；

Nginx 的 GZIP配置，Nginx具有更高的性能，利用该配置可以更好的提高性能

CND加速（7天）

CDN即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定

通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。

其目的是使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度。

web集群服务器配置（一）

机器数：6台web虚拟机（跨机柜高可用），6台CMSweb虚拟机，2台cmsdb虚拟机（从库只读，域名访问高可用），2台cmsApi接口redis虚拟机（VIP高可用）

安装软件：varnish、redis、mysql、php

web集群

机器数：12、16或20台以上web服务器虚拟机，以每4台为一个小集群，公司重点游戏大推期访问量很高的官网，每个小集群可解析一款高访问量的官网，其他稳定期访问量不高的官网可以根据小集群的负载情况分别解析到负载不高的小集群中

安装软件：varnish、redis、mysql（cms从库）、php

服务器监控

zabbix:是一个基于WEB界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案。

服务器端总结

根据不同的业务，选择最适合业务的方案

架构规范：机房选择、宽带设置、服务器划分、框架选择、缓存技术选择、负载均衡技术选择

长短链接选择

CDN动态加速或静态加速选择

服务器配置方案选择（大集群、小集群）
是否要加监控技术