Web性能优化主要分为前端和后端两部分。后端性能优化决定了Web能否使用，前端优化决定了它是否好用，也就是说涉及到前端用户体验和Web易用性，所以前端性能与用户体验密切相关。

首先，在前端优化之前，我们需要了解它的整体性能，然后对整体情况进行细分和分析，了解它每一步损失的时间和消耗的原因，然后优化细节，才能实现整体性能的飞跃，而不是优化一部分或一步就能解决问题，只有优化的量才能实现性能的飞跃。

浏览器或性能检测工具通常用于Web性能检测。那具体该怎么办呢?让我们和小编一起来看看!

一、HTTP请求

1.减少HTTP请求的数量

2.避免重定向

3.DNS预解析

4.使用CDN

二、浏览器缓存

对于一个网站来说，CSS、Javascript、logo、图标等静态资源文件更新的频率相对较低，这些文件几乎每次都需要http请求。如果这些文件缓存在浏览器中，性能可以得到很好的提高。通过在http头中设置cache-control和expires的属性，可以设置浏览器缓存，缓存时间可以是几天甚至几个月。

在某些情况下，静态资源文件的变化需要及时应用到客户端浏览器中。在这种情况下，可以通过改变文件名来实现，即更新Javascript文件不是更新Javascript文件的内容，而是生成新的JS文件并更新HTML文件中的引用。

使用浏览器缓存策略的网站在更新静态资源时，应采用逐量更新的方法。比如需要更新10个图标文件，不要一次更新10个文件，要逐步更新一个文件，有一定的间隔时间，避免用户浏览器突然大量缓存失效，集中更新缓存，导致服务器负载突然增加，网络堵塞。

三、页面静态资源

1.把CSS样式表放在顶部

若将css样式定义放在页面或页面底部，则会出现短暂的白屏或某一区域的短暂白板，这与浏览器的运行机制有关，无论页面如何加载，页面都会逐渐显示出来。因此，在制作页面时，使用Link标签将每个样式表的定义放入head中。

2.把Javascript脚本放在底部浏览器里

当加载css文件时，页面的逐渐呈现将被阻止，直到所有css文件都被加载完毕，因此将css文件的引用放入head，这样在加载css文件时就不会组织页面的呈现。但对js文件来说，在使用时，它下面所有也页面内容的呈现都会被堵塞，把脚本放在页面越低的地方，就意味着越多的内容可以逐渐呈现。

3.使用外部Javascript和CSS

四、部件压缩

五、图片优化