「这是我参与11月更文挑战的第20天，活动详情查看：2021最后一次更文挑战」
1. css优化
- 将CSS代码放在HTML页面的顶部
- 避免使用CSS表达式
- 使用来代替@import
- 避免使用Filters
2. 图片优化
- 优化图片大小
- 通过CSS Sprites优化图片
- 不要在HTML中使用缩放图片
- favicon.ico要小而且可缓存
3. 合理设置HTTP缓存(!!! 重要)
缓存的力量是强大的，恰当的缓存设置可以大大的减少HTTP请求。首先了解下浏览器中关于缓存的说明。
缓存分为强缓存和协商缓存。
强缓存是指不问服务器这个文件有没有更新，只要在缓存时间范围内，就使用缓存的文件。
这时network上显示200 form cache，有2个属性控制强缓存，Expires和Cache-Control: max-age，Expires是http 1.0定义的，使用的是相对时间，如果2边与服务器时间不统一就会出现问题，为了解决这个问题于是就出现了http 1.1定义的Cache-Control: max-age，这个属性使用的是相对时间，一般来说都是2个都加，然后取相对时间属性。
协商缓存是先向服务器询问下是否文件有更新，根据服务器的提示来决定是否使用缓存，由于比强缓存多了去服务器询问这一步所以势必没有强缓存快。
协商缓存也有2对属性，分别是ETag和If-None-Match，Last-Modified和If-Modified-Since，每次请求的时候，浏览器会保存获取的ETag和Last-Modified，下次在调的时候会传If-None-Match和If-Modified-Since过去，值就是上次获取ETag和Last-Modified的值，然后根据返回的值是否有变化来决定是否取缓存的数据，Last-Modified是用时间来判断，ETag用标识符，之所以出现2个是因为Last-Modified只能精确到秒，如果1秒内有多次数据调用，它就无能为力了，所以出现了进阶的ETag，使用协商缓存的时候status显示的是304。
怎样合理设置缓存呢？原则很简单，能缓存越多越好，能缓存越久越好。例如，很少变化的图片资源可以直接通过HTTP Header中的Expires设置一个很长的过期头；变化不频繁而又可能会变的资源可以使用Last-Modifed来做请求验证。尽可能的让资源能够在缓存中待得更久。
4. 资源合并与压缩
如果可以的话，尽可能的将外部的脚本、样式进行合并，多个合为一个。另外，CSS、Javascript、Image都可以用相应的工具进行压缩，压缩后往往能省下不少空间。
5. 图片懒加载
这条策略实际上并不一定能减少HTTP请求数，但是却能在某些条件下或者页面刚加载时减少HTTP请求数。对于图片而言，在页面刚加载的时候可以只加载第一屏，当用户继续往后滚屏的时候才加载后续的图片。这样，如果用户只对第一屏的内容感兴趣时，那剩余的图片请求就都节省了。
