-
使用 CDN
CDN的全称是Content Delivery Network,即内容分发网络。
依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。
网站80-90%响应时间消耗在资源下载上,减少资源下载时间是性能优化的黄金法则。相比分布式架构的复杂和巨大投入,静态内容分发网络(CDN)可以以较低的投入,获得加载速度有效提升。
-
使用 Cache-Control
cache-control:max-age响应头,设置相同URL的请求间隔,间隔内不发起请求,直接使用本地数据,即200缓存
-
使用 Etag
Etag响应头与if-no-match请求头配合,对比数据MD5是否改变,无修改则返回304 not modified,无响应实体,使用本地数据,即304缓存
-
使用 Gzip
GZIP最早由Jean-loup Gailly和Mark Adler创建,用于UNⅨ系统的文件压缩。现今已经成为Internet 上使用非常普遍的一种数据压缩格式,或者说一种文件格式。
前端工程师可以想办法明显地缩短通过网络传输HTTP请求和响应的时间。毫无疑问,终端用户的带宽速度,网络服务商,对等交换点的距离等等,都是开发团队所无法控制的。但还有别的能够影响响应时间的因素,压缩可以通过减少HTTP响应的大小来缩短响应时间。
Gzip压缩通常可以减少70%的响应大小,对某些文件更可能高达90%,比Deflate更高效。主流 Web 服务器都有相应模块,而且绝大多数浏览器支持gzip解码。所以,应该对HTML、CSS、JS、XML、JSON等文本类型的内容启用压缩。
注意!!! 图片和 PDF 文件不要使用 gzip。它们本身已经压缩过,再使用 gzip 压缩不仅浪费 CPU 资源,而且还可能增加文件体积。
-
合并文件(CSS、JS、图片)
合并文件,能减少HTTP请求数
-
调整 CSS 和 JS 的位置
把CSS放在<head>标签中可以让页面渐进渲染,尽早呈现视觉反馈. 如果把样式表放在页面底部,一些浏览器为减少重绘,会在 CSS 加载完成以后才渲染页面.
JS脚本放在页面底部 浏览器下载脚本时,会阻塞其他资源并行下载,即使是来自不同域名的资源。因此,最好将脚本放在底部,以提高页面加载速度。
一些特殊场景无法将脚本放到页面底部的,可以考虑<script>的以下属性: defer 属性; HTML5 新增的async属性。
-
压缩图片的工具
优化图片 尝试把GIF格式转换成PNG格式,看看是否节省空间。在所有的PNG图片上运行pngcrush(或者其它PNG优化工具)。
使用体积小、可缓存的favicon.ico
-
增加域名以并行下载资源
划分内容到不同域名
浏览器一般会限制每个域的并行线程(一般为6个,甚至更少),使用不同的域名可以最大化下载线程,但注意保持在2-4个域名内,以避免DNS查询损耗。
例如,动态内容放在csspod.com上,静态资源放在static.csspod.com上。这样还可以禁用静态资源域下的Cookie,减少数据传输,详见Cookie 优化。
Web 性能优化的常用手段
最新推荐文章于 2022-09-06 11:20:25 发布