Web性能优化

下面是常见的网页优化方法

· 减少http请求

· 压缩并优化js/css/image

· 简化，尽量静态页面

· 减少CND访问次数

1、减少http请求
80%的相应时间花在下载网页内容(images,css,js,flash)等，减少请求次数是缩短响应时间的关键，可以通过简化页面设计来减少请求次数，可使用一些技巧

捆绑文件：将多个脚本文件、样式表文件捆绑成一个文件，以此来减少文件下载速度
css雪碧图： 将多个图片拼成一幅图片，然后使用css来控制在什么地方显示着整张图片的局部
inline images： 通过编码的字符串将图片内嵌到网页文本中，例如将图片转为base64格式的数据编码

2、减少DNS查询次数
DNS查询也消耗响应时间，如果我们网页内容来自各个不同的domain（例如嵌入了开放广告或者引入了外部图片或者脚本），首次解析这些domain也需要消耗一定时间，DNS查询结果缓存在本地系统和浏览器中一段时间，所以DNS查询一般是对首次访问速度有影响
缓存ajax
ajax可以帮助我们异步下载网页内容，但是有些网页内容即使是异步的，用户还是在等待它的返回结果，例如ajax的返回是用户联系人的下拉列表，所以我们还是要注意应用一些规则提高ajax的响应速度

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

4、减少DOM元素数量
网页中元素过多对网页的加载和脚本的执行都是沉重负担，500个元素和5000个元素在加载速度上会有很大差别

5、减少iframe数量
iframe使用有优点也有缺点
优点

6、可以用来加载速度较慢的内容，例如广告
安全箱保护，浏览器会对iframe中内容进行安全控制
脚本可以并行下载
缺点
即使iframe为空也消耗加载时间
会阻止页面加载
没有语义

7、避免404
404代表服务器没有找到资源，客户端发送一个请求但是服务器却返回一个无用的结果，时间浪费掉了
更糟糕的是我们网页加载中需要加载一个外部脚本，结果却返回一个404，不仅阻塞了其他脚本的下载，下载回来的内容客户端还会将其当成是js去解析

8、使用CDN
减少网页下载的内容，提高下载速度可以通过内容分发网络-CDN来提升，CDN通过部署在不同地区的服务器来提升客户的下载速度，可以通过免费的CDN供应商来分发网页资源

9、添加Expires或Cache-Control报文头分为两个方面

· 对于静态内容添加Expires， 将静态内容社会永不过期。
· 对于动态内容应用合适的Cache-Control，让浏览器根据条件来发送请求

10、避免空的图片SRC
空的图片src仍然会使浏览器发送请求服务器，这样完全是浪费时间，而且浪费服务器的资源，这种空请求造成的伤害不容忽略

11、减小cookie大小
cookie被用来做认证或个性化设置，其信息被包含在http报文当中，对于cookie我们要注意以下几点，来提高请求响应速度

· 将cookie大小减到最小
· 注意cookie设置的domain级别，没有必要情况下不要影响到sub-domian
· 注意设置合适的过期时间，比较长的过期时间可以提高响应速度

12、将css置顶
css放在网页head中会让网页显得加载速度更快，因为这样做可以使浏览器逐步加载已经下载的网页内容，这对内容多的网页很重要，用户不用一直等在一个白屏上，而是可以先看到已经下载的内容，如果将样式表放在底部，浏览器会拒绝渲染已经下载的网页，因为大多数浏览器起在实现时都会努力避免重绘
用代替@import
避免使用@import，因为这个相当于将css放在网页内容底部
将js置于底部
脚本在下载时，即使是来自不同的hostname浏览器也不会下载其他资源，因为浏览器要在脚本下载之后依次解析和执行，可以考虑下面方式来脚本提速

13、将脚本置地，优先css渲染，呈现给用户
主流浏览器支持defer关键字，可以指定脚本在文档加载后执行
HTML5中新加了async关键字，可以让脚本异步执行

14、精简js和css
精简就是将js和css中空格和注释全部去掉
统计表明，精简后的文件平均减少了21%
用来帮助做精简的红菊很多
js compressors:

· Packer
· JSMin
· Clouse compile
· YUICompressor
· AjaxMin
· css compressors:
· CSSTidy
· Minify
· CSSCompressor

15、图片延迟加载
延迟加载时提高网页首屏显示速度的有效办法，当图片元素进入窗口可视区域的时候，它就会改变图像的src属性，从服务端加载所需的图片，这也是一个异步的郭层
推荐的简单易用的图片延迟加载插件-

Echo.js
github:https://github.com/toddmotto/echo
官网地址：https://toddmotto.com/echo-js-simple-javascript-image-lazy-loading/

Layzyr.js
github:https://github.com/callmecavs/layzr.js
官网网址：http://callmecavs.com/layzr.js/

16、优化css Sprite

什么是css sprite
css sprite很多人叫css精灵，一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去。当访问页面时，载入的图片就不会一张一张的慢慢显示出来了

css sprite 的优点
1.减少http请求次数，极大的提高页面加载速度。
2.增加图片信息重复读，提高压缩比，减少图片大小。

缺点：
1.在图片合并时，需要留给足够的空间。在高分辨率的屏幕下的自适应页面，如果图片宽度不够，会造成背景断裂。
2.css sprite需要精确定位出图片的位置，比较繁琐，不够灵活。
3.维护麻烦，修改一个图片可能需要重新布局整个图片，样式。