也谈Web 性能优化

Web 性能优化分为服务器端和浏览器端两个方面。具体可以从一下几方面来入手进行优化。

1、压缩源码和图片

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

2、选择合适的图片格式

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

3、合并静态资源

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

4、开启服务器端的 Gzip 压缩

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

参考资料：https://jingyan.baidu.com/article/a3aad71a8d13c3b1fb0096e9.html

      https://www.cnblogs.com/zhangziqiu/archive/2009/05/17/gzip.html

      IIS7配置GZIP压缩：https://msdn.microsoft.com/zh-cn/ff695514.aspx

5、使用 CDN

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

6、延长静态资源缓存时间

这样，频繁访问网站的访客就能够更快地访问。不过，这里要通过修改文件名的方式，确保在资源更新的时候，用户会拉取到最新的内容。

参考资料：https://www.cnblogs.com/minigrasshopper/p/7694053.html

7、把 CSS 放在页面头部，把 JavaScript 放在页面底部

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

每一个方面具体做法还可以细挖下去，在操作细节的实施上也会有多种方案可以选择，不同的解决方案得到的结果可能会有不同程度的差别。