前端页面优化

前端性能测试和调优

讲到性能测试，除了后台的之外，还有一部分是前台的性能测试，前端的性能测试这里主要需要尊从以下规定。

前端性能调优指南

雅虎23条

1. Minimize HTTP Requests 尽可能少的http请求
   http请求是要耗时的，想办法减少请求数自然可以提高网页速度。常用的方法，合并css，js以及 Image maps和css sprites等。

2. Use a Content Delivery Network 使用CDN
   将一些静态资源放到CDN上，我不记得在哪个小网站上看到说浏览器下载资源一次性在同一域名下能够并发下载6个，所以使用不同的CDN服务，能够提升并发的下载速度。

3. Avoid empty src or href 避免空的src和href
   当link标签的href属性为空、script标签的src属性为空的时候，浏览器仍让会去请求这个空的地址，从而造成浪费

4. Add an Expires or a Cache-Control Header添加Expire/Cache-Control 头
   现在越来越多的图片，脚本，css，flash被嵌入到页面中，当我们访问他们的时候势必会做许多次的http请求。其实我们可以通过设置Expires header 来缓存这些文件。Expire其实就是通过header报文来指定特定类型的文件在览器中的缓存时间。大多数的图片，flash在发布后都是不需要经常修改的，做了缓存以后这样浏览器以后就不需要再从服务器下载这些文件而是而直接从缓存中读取，这样再次访问页面的速度会大大加快。

5. Gzip Components启用Gzip压缩
   Gzip的思想就是把文件先在服务器端进行压缩，然后再传输。这样可以显著减少文件传输的大小。

6. Put StyleSheets at the Top 把css放在顶部
   css，全称Cascading Style Sheets (层叠样式表单)，说简单点，css主要是用来设置网页的样式、框架。浏览器的渲染是从上往下进行的，把CSS放在顶部，浏览器会首先进行渲染css，这样给用户看到的就是一个有框架的页面，而不是以前那种当网络大姨妈的时候，挤在一坨了。

7. Put Scripts at the Bottom 把JS放在底部
   JS放在底部，这是因为js下载时候会独占资源，也就是说当下载js时候，浏览器是无法下载其他的资源的。所以把js放在底部，不会影响到其他的资源的下载。

8. Avoid CSS Expressions 避免使用css表达式

9. Make JavaScript and CSS External 将CSS和JS放到外部文件中
   将css和js放在外部文件中的就是为了能够缓存下来

10. Reduce DNS Lookups 减少DNS解析
    查找DNS是需要花费时间的，经验的总结是至少需要20毫秒左右的时间。在此期间，浏览器是无法下载其他任何内容资源的。所以浏览器会想办法对DNS的查找结果进行缓存。而除了浏览器的缓存之外，操作系统（例如Windows)也会对DNS查询的结果做缓存。只不过，由于浏览器使用太过频繁，目前的主流浏览器都使用自己独有的缓存，而不使用操作系统的缓存。
    yahoo的建议一个页面所包含的域名数尽量控制在2-4个。

11. Minify JavaScript and CSS 压缩js和CSS
    压缩js和css的左右，减少页面字节数。容量小页面加载速度自然也就快。而且压缩除了减少体积以外还可以起到一定的保护左右。唯一的后果就是会造成代码的可读性降低。

12. Avoid Redirects 减少重定向
    这个就不用多说了，每重定向一次就会增加一个请求

13. Remove Duplicate Scripts 移除重复的js代码
    重复调用脚本，除了增加额外的HTTP请求外，多次运算也会浪费时间。

不仅是要做到不重复，更是要做到可重用。

14. Configure ETags 配置Etags
    Etags相当于一个网页的指纹一样，它用来判断浏览器缓存里的元素是否和原来服务器上的一致。我们可以通过抓包来查看是否配置有etag，后面会简单的说一下etags

15. Make AJAX Cacheable 可缓存ajax
    即使AJAX是动态产生的而且只对一个用户起作用，他们依然可以被缓存。

It’s important to remember that “asynchronous” does not imply “instantaneous”.（记住“异步”不是“瞬间”这一点很重要）

16. Use GET for AJAX Requests 使用get方式完成ajax请求
    （ajax请求实际上就是把body的东西动态的进行替换，造成前端页面没有刷新的假象）
    这个就比较好理解了，使用get请求完成ajax请求只需要一步就可以把参数传过去，但是使用post请求分两步
17. Reduce the Number of DOM Elements 减少DOM元素
    页面上的dom节点尽可能的少
18. No 404s 避免404
    站点本身里（非搜索结果）出现404页面，无意义的404页面会影响用户体验并且会消耗服务器资源。
19. Reduce Cookie Size 减少cookie的大小
    减小cookie的大小，每一次请求都会把cookie发送到后台
20. Use Cookie-Free Domains for Components使用无cookie的域
21. Avoid Filters不要使用滤镜
    滤镜是什么，我特么也不知道，据说是一个会在ie上比较慢的东西
22. Do Not Scale Images in HTML 不要在HTML中缩放图片
    不要在html中缩放图片，尽可能的就是页面需要多大的图片就给多大的图片
23. Make favicon.ico Small and Cacheable
    是图标尽可能的小，并且可以被缓存起来。