技能篇—web性能优化

Posted 2021-04-30 阿文的小台灯

        今天看了一本书，是讲有关web性能优化问题，虽然目前还没有太多涉及这方面的工作，但是未雨绸缪总是好的。其实关于Web性能优化，有非常多的方面可以去做。

●压缩源码和图片

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

●选择合适的图片格式

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

●合并静态资源

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

●开启服务器端的Gzip压缩

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

●使用CDN

●延长静态资源缓存时间

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

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

    这样就不会阻塞页面渲染，让页面出现长时间的空白。每一个条目都可以进一步深层挖掘下去。

        Web性能优化分为服务器端和浏览器端两个方面。此外，由于中文的歧义性，Web性能优化这个词既可以解读成页面加载速度（Page Speed）的优化，也可以解读成页面渲染性能（Page Performance）的优化。或者是二者的集合。

        关于网络性能和HTTP协议，作为大公司的前端工程师是非常看重的，因为每一个页面都会有亿万用户访问量，任何一点对服务器带宽压力都会积少成多，最终造成很大的成本。关于这方面的技术详解，待我好好学习总结~~

        

参看书籍：《Web全栈工程师的自我修养》

未完待续~