关于性能（SEO）

性能优化有很多方面：细节决定成败,系统慢是由一个又一个的小细节造成的,所以开发初期做好充足的准备,开发中认真负责,不偷工减料,维护期更注重代码质量,这样才会让我妈的系统稳定高效.

1.0 使用CDN（加快网页响应速度，提高用户体验）

2.0 减少HTTP请求数

3.0减少DNS查询

4.0避免重定向

5.0 图片懒加载和预加载(改善用户体验的策略,并不能提高性能,但是可以明显改善用户体验和减轻服务器压力)

6.0 减少DOM元素数量（这个针对HTML代码的质量）

7.0减少对DOM的操作 （针对js代码的质量）

8.0使用外部的js、css文件

9.0压缩javascript、css、字体、图片等

10.0 图像合并实现css Sprite(需要用的图片整合到一张图片文件中,利用background-image,background-repeat,background-position,组合使用)

11.0 使用inonfont

12.0字体裁剪

13.0多域名分发划分内容到不同域名(简称域名多请求,相同浏览器,相同域名下的图片最多2-4个线程并行下载,而相同域名的其他图片,则要等到其他图片下载后才会开始下载)

14.0尽量减少iframe使用

15.0避免图片src为空,a标签的href为空 (即使链接为空,在旧的浏览器也会以固定的步骤发送请求信息,还是耗时的,正确的<a href="javascript:void(0)"></a>)

16.0css放头部(css是HTML渲染的必备元素),js放页尾(避免脚本阻塞加载)

17.0 避免节点深层嵌套(构建DOM数,这与浏览器构建DOM文档机制有关,嵌套越深,DOM数层次也会越深,耗时更长)

18.0页面缓存(设置页面头的expries,过期时间设置久一点就达到"永久缓存",代码变更就是加文件版本号)

19.0压缩合并文件(数量少体积大 比 数量多 体积小 的文件加载速度快,因此可以考虑将多个js.css合并在一起,再压缩,达到数量少 体积小)

20.0 html+css+js各司其职(H5也能完成js的效果,比如hover,动画等,css能完成的js效果尽量就css完成,也可以获得更好的性能)

21.0使用图像的BASE64编码(不需要向服务器发送请求,由浏览器解析成图片,base64的字符串长度随图片的大小及复杂度成正比,根据实际情况使用)

22.0显示的设置图片的宽高(如果HTML里的图片没有尺寸,或代码描述的尺寸与实际的图片尺寸不符合\时,浏览器则要在图片下载完成后再'回溯'该图片并重新显示,这会消耗额外时间)

23.0显示指定文档字符集(如果浏览器不能获知页面的编码字符集,一般会在执行脚本和渲染页面前,把字节流缓存,然后再搜索可进行解析的字符集,或者默认的字符集来解析页面代码,会消耗不必要的时间)

24.0渐进式增强设计(首先满足所有浏览器的基本样式,再针对不同的高级浏览器编写更好的样式)

25.0 Flush机制(适合返回数据特别多,请求时间长,常规数据还是用正常的实时全部返回最佳,这种方式从用户体验上是最佳)

26.0HTTP协议的合理利用(只要熟悉了HTPP协议,你将充分利用浏览器缓存带来的性能提升,需要掌握(浏览器缓存的过期时间,缓存删除,什么页面可以缓存等)

27.0 动静分离(.............看懂了再写上来)

28.0HTTP持久链接(keep-alive)

29.0GZIP压缩技术(HTTP支持GZIP的压缩格式,当服务器返回的HTML信息报头包含Content-Encoding:gzip,告诉浏览器,响应返回的数据已经压缩成GZIP格式,浏览器获得数据要进行解压操作,一定程度上减轻了服务器的传输数据的压力)(请求宽带:压缩文件,开启GZIP)

30.fis3转webp(最近出来的 ,据说对性能提升有起动了一定程度)

31.0 避免使用高级选择器,通配选择器,尽量少用消耗大的css,如border-radius,box-shadow等高消耗样式,避免使用css表达式,避免全局查询

32.0 少用全局变量,避免使用with,(with会创建自己的作用域,会增加作用域的长度),尽量避免在HTML标签中写style属性

33.0 添加exprires头,服务端配置Etag,减少DNS查找

移动端性能优化:

1.0 尽量使用css3动画

2.0适当使用touch事件代替click事件

3.0避免使用css3渐变阴影效果

4.0可以用transform:translateZ(0)来开启硬件加速

5.0不滥用float.float在渲染时计算量比较大,尽量减少使用

6.0不滥用web字体,web字体需要下载解析,重绘当前页面,尽量减少使用

7.0合理使用requestAnimationFrame动画代替setTimeout

8.0css中的属性(CSS3的transtions、CSS3 3D transforms、opacity、cnavas、WebGL、video)会触发GPU渲染，应合理使用

前辈详细的看这里：http://www.cnblogs.com/xianyulaodi/p/5755079.html