页面性能

页面性能

题目:提升页面性能的方法有哪些?

1、资源压缩合并,减少HTTP请求
2、非核心代码异步加载—>异步加载的方式—>异步加载的区别
3、利用浏览器缓存—>缓存的分类—>缓存的原理
4、使用CDN
5、预解析DNS

异步加载

1、异步加载的方式
1)动态脚本加载
2) defer
3) async
2、异步加载的区别

1. defer是在HTML 解析完之后才会执行，如果是多个，按照加载的顺序依次执行
2. async是在加载完之后立即执行，如果是多个，执行顺序和加载顺序无关

浏览器缓存

缓存的优点：
减少不必要的数据传输，节省带宽
减少服务器的负担，提升网站性能
加快了客户端加载网页的速度
用户体验友好
缺点：
如果有资源更改但是客户端不及时更新会造成用户获取信息滞后

1、缓存的分类
1)强缓存(强是强制的意思)
当浏览器去请求某个文件的时候，服务端就在respone header里面对该文件做了缓存配置。缓存的时间、缓存类型都由服务端控制，具体表现为：respone header 的cache-control，常见的设置是max-age public private no-cache no-store等

Expires Expires:Thu, 4 Jun 2020 23:39:02 GMT
Cache-Control Cache-Control:max-age=3600,public,immutable

max-age表示缓存的时间是3600秒（10年），public表示可以被浏览器和代理服务器缓存。immutable表示该资源永远不变，这么设置是为了让用户在刷新页面的时候不要去请求服务器。在加个immutable时，点击浏览器左上角的刷新按钮去刷新页面，浏览器会直接去请求服务器而造成额外的请求消耗。

2)协商缓存
Last-Modified If-Modified-Since Last-Modified: Wed, 26 Jan 2017 00:35:11 GMT
Etag If-None-Match

etag：一个文件hash，每个文件唯一
last-modified：记录文件的修改时间，精确到秒
每次请求返回来响应头 中的 etag和 last-modified会在再次请求时放在请求头中，服务端会进行对比判断资源更新与否，如果更新就返回新的资源，并返回一个新的etag、last-modified。如果资源没更改，返回304状态码，浏览器读取本地缓存。