进阶之道-性能

网络相关

DNS 预解析

DNS 解析也是需要时间的,可以通过预解析的方式来获得域名所对应的 IP。

1
<link rel="dns-prefetch" href="//xxx.xx" />

缓存

缓存对于前端性能优化来说是个很重要的点,良好的缓存策略可以降低资源的重复加载提高网页的整体加载速度。
通常浏览器缓存策略分为两种:强缓存和协商缓存。

强缓存

可以通过两种响应头实现:expires 和 cache-control。强缓存表示缓存期间不需要请求,state code 为 200

1
Expires: Wed, 22 Oct 2018 08:41:00 GMT

expires 是 http1.0 的产物,表示资源会在 Wed, 22 Oct 2018 08:41:00 GMT 后过期,需要再次请求。并且 expires 受限于本地时间,如果修改了本地时间,可能会造成缓存失效。

1
Cache-control: max-age=30

Cache-Control 出现于 HTTP / 1.1,优先级高于 Expires 。该属性表示资源会在 30 秒后过期,需要再次请求。

协商缓存

如果缓存过期了,我们就可以使用协商缓存来解决问题。协商缓存需要请求,如果缓存有效会返回 304。协商缓存需要客户端和服务端共同实现,和强缓存一样,也有两种实现方式。

本文标题:进阶之道-性能

文章作者:Jonathon

发布时间:2019年10月25日 - 16:10

最后更新:2019年11月17日 - 10:11

原始链接:https://www.jonathon.cn/fe-performance.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

苟富贵,勿相忘!