-
使用 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 发布
215
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
