玩转CSS基础——渐进式渲染

简介: 渐进式渲染,英文全称 *progressive rendering*,也被称之为惰性渲染,主要是为了提高用户体验,以尽快的速度来呈现页面的技术。

渐进式渲染

渐进式渲染,英文全称 progressive rendering,也被称之为惰性渲染,主要是为了提高用户体验,以尽快的速度来呈现页面的技术。

在以前互联网带宽较小的时期,这种技术更为普遍。如今,移动终端的盛行,而移动网络往往不稳定,渐进式渲染在现代前端开发中仍然有用武之地。

有一点需要弄明白的是,这不是指的某一项技术,而是各种技术的一种集合。

例如:

  • 骨架屏

在加载网络数据时,为了提升用户体验,通常会使用一个转圈圈的 loading 动画,或者使用 Skeleton Screen 占位。相比与 loading 动画,Skeleton Screen 的效果要更生动

image-20210913161720022

  • 图片懒加载

所谓图片懒加载,顾名思义,就是先加载部分图片,剩余的图片等到需要的时候再加载。这在电商网站中尤其常见。

比如一个电商网站,首屏通常会有很多的数据,清晰度较高的 banner 或轮播。页面非首屏部分会员很多商品夹杂着大量的图片。这是时候选择懒加载以保证首屏的流畅十分重要。

  • 图片占位符

在网页加载的时候,某些图片还在请求中或者还未请求,这个时候就先找一个临时代替的图像,放在最终图像的位置上,但是这只是临时替代的图形,当图片数据准备好以后,会重新渲染真正的图形数据。

  • 拆分网页资源

大部分用户不会用到一个网站的所有页面,但我们通常的做法却是把所有的功能都打包进一个很大的文件里面。一个 bundle.js 文件的大小可能会有几 M,一个打包后的 style.css 会包含网站的一切样式,从 CSS 结构定义到网站在各个版本的样式:移动端、平板、桌面、打印版等等。

但用户并不是一开始就需要所有的资源,所有我们可以对资源进行拆分,首先加载那些关键的资源,其他的资源等到需要的时候再去加载它。

相关文章
|
10天前
|
前端开发 文件存储 Python
【已解决】Flask当中render_template函数使用过程当中css文件无法正常渲染
【已解决】Flask当中render_template函数使用过程当中css文件无法正常渲染
13 1
|
1月前
|
Web App开发 前端开发 JavaScript
只需一行CSS代码,让长列表网页的渲染性能提升几倍以上!
只需一行CSS代码,让长列表网页的渲染性能提升几倍以上!
|
1月前
|
前端开发 JavaScript UED
CSS顶部与JS后写:网页渲染的奥秘
CSS顶部与JS后写:网页渲染的奥秘
|
11月前
|
前端开发 JavaScript Serverless
前端工程化的前端性能的性能优化方案的渲染层面优化之CSS/JS优化
渲染是一种非常重要的前端性能优化方案,因为它可以在不同的环境中提高网页的响应速度和可接受性。
73 2
|
9月前
|
Web App开发 前端开发 iOS开发
CSS3 字体抗锯齿渲染
CSS3 字体抗锯齿渲染
46 0
|
10月前
|
JavaScript 前端开发
html和css中的图片加载与渲染规则是什么样的?
html和css中的图片加载与渲染规则是什么样的?
109 0
|
JavaScript 前端开发 API
轻松明白 CSS 和 JS 对页面渲染的阻塞
前言 前面有分析过页面的渲染逻辑(老生常谈之从输入URL到页面呈现的过程(全)),从上至下解析 HTML,构建 DOM 树和 Style Rules,其中构建 DOM 和解析 Style 是并行的,之后 DOM 树和 Style Rules 结合成 Render Tree。
|
前端开发 JavaScript Go
浏览器原理 22 # 渲染流水线:CSS如何影响首次加载时的白屏时间?
浏览器原理 22 # 渲染流水线:CSS如何影响首次加载时的白屏时间?
108 0
浏览器原理 22 # 渲染流水线:CSS如何影响首次加载时的白屏时间?
|
JavaScript 前端开发 数据可视化
浏览器原理 05 # 渲染流程:HTML、CSS和JavaScript,是如何变成页面的?2
浏览器原理 05 # 渲染流程:HTML、CSS和JavaScript,是如何变成页面的?
208 0
浏览器原理 05 # 渲染流程:HTML、CSS和JavaScript,是如何变成页面的?2
|
Web App开发 JavaScript 前端开发
浏览器原理 05 # 渲染流程:HTML、CSS和JavaScript,是如何变成页面的?
浏览器原理 05 # 渲染流程:HTML、CSS和JavaScript,是如何变成页面的?
158 0
浏览器原理 05 # 渲染流程:HTML、CSS和JavaScript,是如何变成页面的?