前端优化小技巧总结

关于 Web 性能优化,有非常多的方面可以去做:

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

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

合并静态资源
  包括 CSS、JavaScript 和小图片,减少 HTTP 请求。

开启服务器端的 Gzip 压缩
  这对文本资源非常有效,对图片资源则没那么大的压缩比率。

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

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

把 CSS 放在页面头部,把 JavaScript 放在页面底部
  这样就不会阻塞页面渲染,让页面出现长时间的空白。

原文地址:https://www.cnblogs.com/zuimengaitianya/p/4986294.html