页面性能
题目:提升页面性能的方法有哪些?
1、资源压缩合并,减少HTTP请求
2、非核心代码异步加载—>异步加载的方式—>异步加载的区别
3、利用浏览器缓存—>缓存的分类—>缓存的原理
4、使用CDN
5、预解析DNS
异步加载
1、异步加载的方式
1)动态脚本加载
2) defer
3) async
2、异步加载的区别
- defer是在HTML 解析完之后才会执行,如果是多个,按照加载的顺序依次执行
- 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状态码,浏览器读取本地缓存。