浏览器

聊聊你不知道的网页无闪烁刷新效果

先看几个网站的效果:

1.CSDN首页

 

2.QQ.com

 

3.GraphQL中文网

4.phalcon中文网

 

现象研究:

仔细查看上面的4个视频,

上面演示的是用chrome浏览器打开以上网站的首页完成后,点击刷新按钮,页面呈现的刷新效果。

第1个是csdn的首页,刷新后可以看到的是整个页面都在闪。

第2个是QQ.com首页,刷新后,可以看到只有一少部分局部区域在闪。

第3个是GraphQL中文网,刷新后,可以看到也是一局部区域在闪(是一个动画效果)

第4个是phalcon中文网,刷新后,整个页完全不闪。

 

普及知识:

在现代浏览器比如:chrome,firefox等浏览器中,当一个页面完全加载完成后,会缓存到内存中,这时再去点刷新按钮或按Ctrl+R去刷新页面,页面通常来说是不会闪的。

如果发生了闪的现象,一般原因是,有些元素是动态js生成的,或在页面加载后期由css或js 改变了其位置或大小造成的。

但是当你按Ctrl+F5去强制刷新页面或清空浏览器缓存后再刷新页面,这时就会发生页面闪的现象。因为这是重新去服务器获取页面,而不是从浏览器缓存读取!

 

注:用IE浏览器刷新的话,一般总是会发生闪的现象的(未测试所有IE版本)

 

 

原创文章,转载请注明来自Lenix的博客,地址https://blog.p2hp.com/archives/6276

 

        

浏览器原生的图片懒加载

在这篇文章中,我们将看看为网络loading带来原生<img><iframe>懒惰加载的新属性。对于好奇的人来说,这里有一个实际的预览:

<img src="celebration.jpg" loading="lazy" alt="..." />
<iframe src="video-player.html" loading="lazy"></iframe>

我们希望能够为loadingChic 75提供支持,并正在深入研究我们即将发布的功能。在那之前,让我们深入了解它的loading工作原理。…

浏览器缓存看这一篇就够了

浏览器缓存作为性能优化的重要一环,对于前端而言,重要性不言而喻。以前总是一知半解的,所以这次好好整理总结了一下。

1、缓存机制

首先我们来总体感知一下它的匹配流程,如下:

  1. 浏览器发送请求前,根据请求头的expires和cache-control判断是否命中(包括是否过期)强缓存策略,如果命中,直接从缓存获取资源,并不会发送请求。如果没有命中,则进入下一步。
  2. 没有命中强缓存规则,浏览器会发送请求,根据请求头的last-modified和etag判断是否命中协商缓存,如果命中,直接从缓存获取资源。如果没有命中,则进入下一步。
  3. 如果前两步都没有命中,则直接从服务端获取资源。

2、强缓存

强缓存:不会向服务器发送请求,直接从缓存中读取资源。

2.1 强缓存原理

强制缓存就是向浏览器缓存查找该请求结果,并根据该结果的缓存规则来决定是否使用该缓存结果的过程,强制缓存的情况主要有三种(暂不分析协商缓存过程),如下:

  • 第一次请求,不存在缓存结果和缓存标识,直接向服务器发送请求

  • 存在缓存标识和缓存结果,但是已经失效,强制缓存是啊比,则使用协商缓存(暂不分析)

  • 存在该缓存结果和缓存标识,且该结果尚未失效,强制缓存生效,直接返回该结果

那么强制缓存的缓存规则是什么?
当浏览器向服务器发起请求时,服务器会将缓存规则放入HTTP响应报文的HTTP头中和请求结果一起返回给浏览器,控制强制缓存的字段分别是ExpiresCache-Control,其中Cache-Control优先级比Expires高。

2.1.1、 Expires

缓存过期时间,用来指定资源到期的时间,是服务器端的具体的时间点。也就是说,Expires=max-age + 请求时间,需要和Last-modified结合使用。Expires是Web服务器响应消息头字段,在响应http请求时告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取数据,而无需再次请求。

Expires 是 HTTP/1 的产物,受限于本地时间,如果修改了本地时间,可能会造成缓存失效。

2.1.2、

可能是最被误用的 HTTP 响应头之一 Cache-Control: must-revalidate

在 HTTP 客户端(浏览器或者缓存服务器)上,如果某个 URL 对应的缓存过期了,客户端会再次向该 URL 发送一个条件请求(带有If-Modified-Since/If-None-Match请求头),如果服务端(缓存服务器或者源站)返回的状态码是 304(没有响应体),则客户端会根据该304响应所包含的一些响应头(DateLast-ModifiedCache-Control等)重新计算出这条缓存的过期时间,比如:

HTTP/2 304
Cache-Control: max-age=86400

这样的 304响应,就能让这条缓存重新续命一天;如果返回的状态码是 200,则整条缓存会被新返回的响应体替换掉。无论是哪种情况,这条缓存都重新变的有效了,HTTP 规范里把这一“让过期的缓存重新变的有效”过程,叫做 revalidate,英语翻译过来应该是“使重新生效”。…

九种浏览器端缓存方法知多少

浏览器缓存(Browser Caching)是浏览器端保存数据用于快速读取或避免重复资源请求的优化机制,有效的缓存使用可以避免重复的网络请求和浏览器快速地读取本地数据,整体 上加速网页展示给用户。

浏览器端缓存的机制种类较多,总体归纳为九种,这里详细分析下这九种缓存机制的原理和使用场景。打开浏览器的调试模式 ->resources左侧就有浏览器的8种缓存机制。…

浏览器缓存知识小结及应用

浏览器缓存,也就是客户端缓存,既是网页性能优化里面静态资源相关优化的一大利器,也是无数web开发人员在工作过程不可避免的一大问题,所以在产品开发的时候我们总是想办法避免缓存产生,而在产品发布之时又在想策略管理缓存提升网页的访问速度。了解浏览器的缓存命中原理,是开发web应用的基础,本文着眼于此,学习浏览器缓存的相关知识,总结缓存避免和缓存管理的方法,结合具体的场景说明缓存的相关问题。希望能对有需要的人有所帮助。…