web性能优化

web性能优化又叫页面加载速度的优化或者页面渲染性能的优化。

以下列举几种性能优化方式。

- 压缩源码和图片

JavaScript文件源代码可以采用混淆压缩的方式，CSS文件源代码进行普通压缩，JPG图片可以根据具体质量来压缩为50%到70%，PNG可以使用一些开源压缩软件来压缩，比如24色变成8色、去掉一些PNG格式信息等。

- 选择合适的图片格式

如果图片颜色数较多就使用JPG格式，如果图片颜色数较少就使用PNG格式，如果能够通过服务器端判断浏览器支持WebP，那么就使用WebP格式和SVG格式。

- 合并静态资源

包括CSS、JavaScript和小图片，减少HTTP请求。

- 开启服务器端的Gzip压缩

这对文本资源非常有效，对图片资源则没那么大的压缩比率。

- 使用CDN

或者一些公开库使用第三方提供的静态资源地址（比如jQuery、normalize.css）。一方面增加并发下载量，另一方面能够和其他网站共享缓存。

- 延长静态资源缓存时间

这样，频繁访问网站的访客就能够更快地访问。不过，这里要通过修改文件名的方式，确保在资源更新的时候，用户会拉取到最新的内容。
我们的网站中往往包含大量的页面组件，比如图片、样式表文件、JS脚本文件和Flash动画。这些组件的变化频率非常低，尤其是那些构成网站基本框架的组件， 几乎不会发生变化。我们可以将这些变化率很低的组件看作静态内容，并且通过max-age或expires标识设置缓存过期的时间，以便下次更快的访问，节约带宽资源，节省服务器资源、提高用户体验等。

- 把CSS放在页面头部，把JavaScript放在页面底部

这样就不会阻塞页面渲染，让页面出现长时间的空白。