高性能网站前端调优技巧

认识到前端性能的重要性。根据分析美国最大的十大网站，可以发现前端对整个网站性能的影响超过80%，因此就有了性能黄金法则，性能问题10%-20%在后端，80%-90%在前端。

调优方法一：减少HTTP请求。通过图片地图来加载多个图标，CSS Sprites来合并图片，使用内联图片，合并JS脚本和CSS样式表来实现减少HTTP请求次数。在理想情况下，一个页面应该使用不多于一个的脚本和样式表。

调优方法二：使用内容发布网络(CDN)。将静态文件(css,js,图片等)存放在第三方的服务器里，可以减少用户和资源的距离，从而减小响应时间。

调优方法三：添加Expires头。浏览器和代理会使用缓存来减少HTTP请求的数量，并减少HTTP响应的大小，使得页面加载更快。使用Expires头告诉客户端它可以使用一个组件的当前副本，直到指定的时间为止。还可以通过添加Cache-Control:max-age=32323234来实现。

调优方法四：压缩组件。通过减小HTTP响应的大小能显著减少响应时间。Web客户端可以通过HTTP请求中的Accept-Encoding头来表示对压缩的支持。

调优方法五：将样式表放在头部。页面是逐步加载的如果CSS放在页底，会出现白屏问题和FUNC（Flash of Unstyled Content）问题。最好的做法是使用link标签将样式表放在文档的head中。

调优方法六：将脚本放在底部。JS脚本是会阻塞页面加载的，将脚本放在底部既不会影响页面内容的逐步呈现，又可以提高下载的并行度。HTTP1.1规范中建议浏览器从每个主机名并行地下载两个组件。并行下载可以提高加载速率，但是过多的并行下载也会降低性能。

调优方法七：避免使用CSS表达式。CSS expression是可以接受js来设置样式的，但是会产生很大的性能问题，尽量不要使用。

调优方法八：使用外部的JavaScript和CSS。如果页面被访问的次数少，使用内联脚本和样式表，对性能影响不大。但是如果页面是首页或是会被频繁的使用到，那么内联脚本和样式表会是一个很大的负担。从全部页面来看，外联的JS和CSS文件会更好。

调优方法九：减少DNS查询。Internet是通过IP来查找服务器，但是IP对于用户来说是难以理解的一串数字，因此我们需要域名，但是解析域名时我们又需要DNS。在用户访问我们的域名时，DNS需要解析成IP，然后再去访问IP对应的服务器，这个过程是漫长的，特别是页面上资源比较多，并且对应多个不同主机下的时候。最好的做法是减少唯一主机名的数量，从而减少DNS。

调优方法十：精简JavaScript。道理是显而易见的，减少HTTP响应大小就可以减少响应时间。精简的方法是从代码中移除注释和空白，进行一些直观的优化，比如使用缩写(用#606代替#660066)和移除不必要的字符(用0代替0px)

调优方法十一：避免重定向。重定向是指将用户从一个URL重新路由到另一个URL，一般有301和302两种。如果一个请求是重定向，那么在重定向完毕并且HTML文档下载完毕之前，没有任何东西呈现给用户，这是一个很糟糕的体验。解决方法是减少重定向。

调优方法十二：删除重复脚本。导致一个脚本被重复引用的问题根源是团队较大或是脚本数量较多。出现这个问题，对网站的影响是很大的，包括性能和页面的正确性。因此需要确保脚本只被包含一次。

调优方法十三：使Ajax可缓存。Ajax的目的是为了突破web本质的开始-停止交互方式。因为Ajax是异步的，因此会造成在请求时，需要用户等待。如果是Ajax主动请求，这种等待是必需的。如果是被动请求的就可以省去等待时间。最好的做法是在大数据量请求时用被动请求，同时结合其它的方法，使得Ajax请求数据可缓存。