web项目性能优化：浏览器端、服务器端

参考

https://bbs.csdn.net/topics/391849317
https://dbanotes.net/web/best_practices_for_speeding_up_your_web_site_content.html
https://dbanotes.net/web/best_practices_for_speeding_up_your_web_site_server.html

web项目性能优化

浏览器端

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

• 用更小的并且可缓存的 favicon.ico

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

• 减少HTTP请求（合并静态资源）
  包括CSS、JavaScript和小图片，减少HTTP请求。有很大一部分用户访问会因为这一条而取得最大受益

• 减少 DNS 查找

• 使得 Ajax 可缓存

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

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

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

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

• 延迟载入组件
  异步

• 预载入组件
  异步

• 减少 DOM 元素数量

• 切分组件到多个域
  主要的目的是提高页面组件并行下载能力。但不要跨太多域名。

• 最小化 iframe 的数量
  iframe 是 SEO 的大忌。针对前端优化来说 iframe 有其好处，也有其弊端。

• 杜绝 http 404 错误
  提升用户体验

服务器端

• 使用 CDN
• 添加 Expires 或 Cache-Control 信息头