参考
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 信息头