性能优化对于用户体验无疑是非常重要的，下面介绍一些性能优化的方法。

1.减少HTTP请求　

　　http请求越多，那么消耗的时间越多，如果在加上网络很糟糕，那么问题就更多了。且如果网页中的图片、css文件、js文件很多甚至有音乐文件时，这势必会造成负担。

　　如何减少HTTP请求？

• 对于图片，可以使用css sprites（图片精灵）、图片lazyload(图片懒加载)。
• 对于css和js，可以把css文件以及js文件分别进行合并，以减少http请求次数。

2.使用CDN

　　CDN即 content distribute network,内容分发网络。其原理是---尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。下面的这个例子可以很好的说明问题：古代打仗大家一定都知道，由于古代的交通很不发达，所以当外族进攻的时候往往不能及时的反击，等朝廷征完兵再把兵派往边境的时候那些侵略者却是早已不见了踪影，这个让古代的帝王很是郁闷。后来帝王们学聪明了，都将大量的兵员提前派往边境驻扎，让他们平时屯田，战时当兵，这样的策略起到了很显著的作用。

3.css文件置于顶部、js文件置于底部、css和js文件放到外部引用

　　css文件置于head中，这样的好处是可以使得css和DOM同时出现，避免出现白屏等情况。

　　js文件置于</body>前，这样做的好处在于此时页面已加载完，不会因为js造成阻塞（若js在head中，那么只有加载完js才会加载内容，这时用户体验是极差的）。

　　将css和js放到外部是因为这样我们更易于管理文件，修改文件等等。

4.使用JSON格式来进行数据交换　

　　JSON是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。同时，JSON是 JavaScript原生格式，这意味着在 JavaScript 中处理 JSON数据不需要任何特殊的 API 或工具包。与XML序列化相比，JSON序列化后产生的数据一般要比XML序列化后数据体积小。

5.减少DOM操作

　　在《高性能JavaScript》中有这样一句话：

把DOM和JavaScript各自想象成一个岛屿，它们之间用收费桥梁连接。

　　因此我们应当尽量减少DOM操作、如果多次访问同一个DOM应该使用局部变量缓存该DOM、尽可能使用querySelector，而不是使用获取HTML集合的API。另外DOM操作会导致一系列的重绘（repaint）、重新排版（reflow）操作。为了确保执行结果的准确性，所有的修改操作是按顺序同步执行的。大部分浏览器都不会在JavaScript的执行过程中更新DOM。相应的，这些浏览器将对对 DOM的操作放进一个队列，并在JavaScript脚本执行完毕以后按顺序一次执行完毕。也就是说，在JavaScript执行的过程，直到发生重新排版，用户一直被阻塞。一般的浏览器中（不含IE），repaint的速度远快于reflow，所以避免reflow更重要。

6.压缩css文件、js文件、图片

　　css文件和js文件中的注释、额外的空格会占用更多的资源，所以压缩css和js是十分必要的。另外，对于图片我们可以降低图片的分辨率、改变图片的格式以达到压缩图片的效果。

7.减少DNS查询

　　我们知道一次DNS的解析过程会消耗20-120毫秒的 时间,在dns查询结束之前，浏览器不会下载该域名下的任何东西。所以减少dns查询的时间可以加快页面的加载速度。因此我们建议一个页面所包含的域 名数尽量控制在2-4个。这就需要对页面整体有一个很好的规划。

未完待续....

web前端性能优化