web性能优化

1. 减少HTTP请求的次数

合并图片（使用精灵图）、css、js，改进首次访问用户的等待时间

2. 使用cdn

就近缓存==>智能路由==>负载均衡==>WSA全站动态加速

3. 避免空的src和href

当link标签的href属性为空，script标签的src标签为空的时候，浏览器渲染的时候会把当前页面的url值视为他们的属性值，从而把页面的内容加载进来作为他们的值。----》这个好像是在测试中

4. 为文件头指定Expires

使内容具有缓存性。避免接下来的页面访问中不必要的http请求

5. 使用gzip压缩内容

压缩任何一个文本类型的响应，包括XML和JSON，都是值得的。gzip的思想是：把文件先在服务端进行压缩，然后再进行传输。这对于体积较大的纯文字型的文件有不错的效果。

6. 把css放到顶部

7. 把js放到底部

防止js加载对之后的资源造成阻塞

8. 避免使用css表达式

css中的Expressions其实也是一种if判断。在这里有必要先说明一下CSS Expressions是一个什么东西。其实它就像其他语言中的if(){}else{}语句，所以在这种情况下css中，也能进行简单的逻辑判断了

9. 将css和js放到外部文件中

目的是缓存，但有时候是为了 减少请求，也会直接写到页面里，需根据PV和IP的比例权衡

10. 减少DNS查找

减少网站从外部网站调用资源

11. js和css最小化，很多工具都可以用来压缩他们

12. 避免重定向

除了避免3XX类型的重定向，还有一个小问题，最好不要写aa.com/bb这样的网址，因为会被重定向到aa.con/bb/，虽然Apache可以使用mod_rewrite,但是不要这样写是最好的

13. 删除重复的JS和CSS

重复调用脚本，除了增加额外的http请求外，多次运算也会浪费时间。在IE和Firefox中不管脚本是否可缓存，他们都存在重复运算js的问题。可以使用jview查看

14. 配置Etags

它用来判断浏览器缓存里的元素是否和原来服务器的一致。比last-modified date 更具有弹性，eg:某个文件在1s内修改10次，Etag可以综合Inode(文件的索引节点(inode)数),MTime（修改时间)和Size来精确的进行判断，避开UNIX记录MTime只能精确到s的问题。服务器集群使用，可取后两个参数。使用Etags减少Web应用带宽和负载

15. 可缓存的AJAX

‘异步’并不意味着'即时':Ajax并不能保证用户不在等待异步JavaScript和XML响应上花费时间

16. 使用GET来完成 AJAX请求

当使用XMLHttpReques时，浏览器中的POST方法是一个'两步走'的过程:首先发送文件头，然后才发送数据。因此使用get在数据量较少时更加具有意义。设置缓存可以优化性能

17. 减少DOM的元素

是否存在一个更加贴切的标签可以使用？使用<progress>标签比使用div去完成，更加合理（在ie9以上的浏览器使用时）

18. 尽量避免404

有些站点把404错误响应页面改为"你是不是要找***** " ,这虽然该进了用户的体验但是同样也会浪费服务器的资源(如数据库等).最糟糕的情况是指向外部js的链接出现问题并返回404代码。首先。这种加载会破坏并行加载；其次浏览器会把试图在返回的404响应内容中找到可能有用的部分当作js代码来执行。

19. 减少Cookie的大小

控制在4k以内

20. 使用无cookies的域

比如图片、css等，Yahoo！的静态资源都在主域名以外，客户端请求静态文件的时候，减少了cookie的反复传输对主域名的影响。

21. 不要使用滤镜

png24的在ie6半透明那种东西，别乱使，淡定的切片成png8+jpg

22. 不要再HTML中缩放图片

W3C一直不提倡图拍呢缩放，一方面是对服务器资源的浪费，另一方面也是对性能的浪费

23. 使图标尽可能的小，并使用缓存

指的是：缩小favicon.ico并缓存

24. 减少iframe的数量

本文参照了部分其他网页的内容：

1. 

https://baike.baidu.com/item/YSLOW/10384699?fr=aladdin

2. 

https://blog.csdn.net/u013022210/article/details/52085175