Web性能优化的途径

---恢复内容开始---

    Web性能优化主要可以从两个方面考虑:即页面加载速度(Page Speed)的优化和页面渲染性能(Page Performance)的优化,这二者之间是存在差别的。从另一方面来说,可视为服务器端和浏览器端的优化。

  • 压缩源码和图片

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

  • 选择合适的图片格式

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

  • 合并静态资源

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

  • 开启服务器端的Gzip压缩 

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

  • 使用CDN

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

  • 延长静态资源缓存时间

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

  • 把CSS放在页面头部,把JavaScript放在页面底部

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

——摘自《Web全栈工程师的自我修养》       

原文地址:https://www.cnblogs.com/bees/p/5384697.html