分页确实是一种解决方案,但是却不是最好的体验方式。无限滚动就是解决这种场景更好的技术手段
最近在业务中实际使用 content-visibility 进了一些渲染性能的优化。
长页面在前端开发中是非常常见的。例如下图中的电商首页,楼层数据来自运营人员在后台的配置,楼层数量是不固定的,同时每个楼层可能会依赖更多翻页数据。在这种情况下,如果一次性将页面全部渲染,可想而知,我们的页面直出效率(fmp, fid)会受到影响。
var li_1 = ("< li id=‘liApple’>苹果< /li>"); //创建一个li元素。
我们在平常的开发中不可避免的会有很多列表渲染逻辑,在 pc 端可以使用分页进行渲染数限制,在移动端可以使用下拉加载更多。但是对于大量的列表渲染,特别像有实时数据需要更新的场景(股票价格),会导致页面有很多计算和重绘,内存占用也会变多,这就需要我们对长列表处理进行优化。
这是掘金网页版的头部,当滚动条向下滑动时,主header会隐藏,次级header会吸在页面顶部。
ListView是最常用的可滚动组件之一,它可以沿一个方向线性排布所有子组件,并且它也支持基于Sliver的延迟构建模型。Flutter中的ListView与Android中的ListView具有同等功能。
为了理解插件背后的原理机制,我们实现一个自己简易版的虚拟列表,希望在实际业务项目中能带来一些思考和帮助。
大家好,我是前端西瓜哥。这次我们来看看虚拟列表是什么玩意,并用 React 来实现两种虚拟列表组件。
什么是内滚动布局呢? 个人认为,内滚动布局就是主滚动条是在页面内部,而不是浏览器窗体上的布局。 故内滚动布局是相对传统的window窗体滚动而言的。
答:核心思想是利用视觉上的感觉,在用户无感的情况下切换回去,也就是快速回滚。为了达成这个目的,就是在最后一个轮播图的后面加上第一个轮播图,当从最后一个切换到第一个时,先切换到备用的第一个,然后快速回滚到真正的第一个轮播图。第一个同理,可能有点绕,可以看图理解:
前两天在浏览 苹果 16寸 营销页面[1] 的时候,发现了几个比较有意思的交互,心里想着自己虽然是一个穷逼,但是知识是无界限的呀,于是便研究了一波。
前几天有给大家分享一个svelte.js自定义网页版弹窗组件svelte-layer。今天再来分享一个最新基于svelte.js开发的网页虚拟美化滚动条组件svelte-scrollbar。
当组件内容超过当前显示视口(ViewPort)时,如果没有特殊处理,Flutter 就会提示 Overflow 错误,为此,Flutter 提供了多种可滚动组件,用于显示列表和长布局;
这个动画还是挺有意思的,但是小编第一个反应这要是哪一天某位ui姐姐或产品姐姐给小编提了这样子的需求,那小编岂不是当场要自闭?我本着自己的好奇心,实现了一个简易版的老虎机:
8个前端常用HTML+CSS技巧教程 CSS是一个很独特的语言。看起来非常简单,但是某种特殊效果看似简单,实现起来就颇有难度。这篇文章主要是给在学习前端的童鞋分享一些新的CSS技巧,一些在前端教程和培训课堂中不会讲到的知识。第二就是让还在前端开发这条道路上的童鞋们,重新燃起对前端排版和特效的热爱和热情!1. 固定底部内容 这种是一个非常常见的布局方式,但是对于新手来说是比较常见的难题。 这种布局方式在后台管理系统中比较常见,当我们内容不足浏览器窗口高度时,底部内容需要固定在底部。当内容超出了浏览器窗口高度,
当组件内容超过当前显示视口(ViewPort)时,如果没有特殊处理,Flutter则会提示Overflow错误。
谷歌的数据表明,一个有 10 条数据 0.4 秒可以加载完的页面,在变成 30 条数据加载时间为 0.9 秒后,流量和广告收入减少了 20%。当谷歌地图的首页文件大小从 100kb 减少到 70~80kb 时,流量在第一周涨了 10%,接下来的三周涨了 25%。
总结一下最近项目用到的一个功能点,具体要求如下: body中会呈现一个可滚动的长页面,在点击某个按钮的时候,会出现一个弹出框,由于弹出框的内容较长,会出现滚动条,但是要保证位于弹框下部的body在弹框滚动的时候不触发滚动事件
CSS 的 position 值中,有一个非常有用的值 -- position: sticky,通常会被用于各种吸顶,吸底,吸边的效果中。
笔者在工作中遇到了一个web环境需要展示100w级目录节点treeview的需求,本文重点介绍笔者设计的一种treeView分页的方法。 1、无限滚动长列表 前端的业务开发中会遇到数量很大的列表展示情况,一般的处理方法是使用某种方法分屏分页的加载数据。 通常的做法是检测是否滚动到底,然后进行网络请求操作。 const maxScrollTop = Math.max(document.body.scrollHeight, document.documentElement.scrollHeigh
如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar。
2,条纹表格:通过 .table-striped 类可以给 之内的每一行增加斑马条纹样式。03React项目中如何实现一个简单的锚点目录定位锚点目录定位功能在长页面和文档类网站中非常常见,它可以让用户快速定位到页面中的某个章节02白话防抖在讨论防抖和节流之前咱们先看一个需求,需求是这样的,监听页面的scroll事件,当页面拖动到最底端时,加载更多。实现代码如下:02BootStrap基础知识2019年实习时的 BootStrap(4.x)基础知识 备份 BootStrap5六角学院文档: HexSchool 顺便推荐一个程序员段子网站 techug.com01Meteor 分页包 alethes:pages 详解在做大部分真实应用的 web 项目过程中,都会有一样不可或缺的需求,那就是分页。Meteor 项目也不例外,同样会有这样的需求,本文给大家介绍的就是一个非常好用的分页包 alethes:pages。它可以实现简单的根据页数分页,也可以实现强大的滚动分页。内部还支持利用多个 collection 数据进行分页。下面我们就来详细的了解它。 注意:以下内容多是对官方包的一种简述和翻译,如果需要更详细的内容可以参考官方地址。02Float 的那些事display:inline-block某种意义上的作用就是包裹(wrap),而浮动也有类似的效果。举个常见例子,或许您有实现宽度自适应按钮的经验,实现宽度自适应的关键就是要让按钮的大小自适应于文字的个数,这就需要按钮要自动包裹在文字的外面。我们用什么方法实现呢?一就是display:inline-block;二就是float。03详细设计一个文章页目录插件在说这个插件之前,可以先去 https://bubuzou.com/ 这个网站体验下这个插件的效果,好有个大概的印象。02【JS】322- 手把手教你实现前端惰性加载在实际的项目开发中,我遇到了一个这样的需求:一个页面模块有很多列表数据展示,每条数据都带有图片,而首次展示的图片只需要不到10张,那么我们还要一次性把所有图片都加载出来吗?显然这是不对的,不仅影响页面渲染速度,还浪费带宽(因为需要对列表进行拖动排序,需加载出全部列表,不能做分页)。我们可以在浏览器滚动到一定的位置的时候进行下载,这也就是们通常所说的惰性加载,技术上现实其中要用的技术就是图片懒加载--到可视区域再加载。03手把手教你实现前端惰性加载本文由 chunpengliu 首发于腾讯内部KM论坛,由 IMWeb 社区授权转载。点击阅读原文查看 IMWeb 社区更多精彩文章。 从需求出发: 在实际的项目开发中,我遇到了一个这样的需求:一个页面模块有很多列表数据展示,每条数据都带有图片,而首次展示的图片只需要不到10张,那么我们还要一次性把所有图片都加载出来吗?显然这是不对的,不仅影响页面渲染速度,还浪费带宽(因为需要对列表进行拖动排序,需加载出全部列表,不能做分页)。我们可以在浏览器滚动到一定的位置的时候进行下载,这也就是们通常所说的惰性加载01如何渲染几万条数据并不卡住界面现在项目中列表页都会做成分页的形式,但是仍然存在一些场景:后端返回所有数据(可能成千上万条),前端渲染。下面提供几种解决思路。01图解浏览器的各种距离事件对象可以拿到 pageY、clientY、offsetY,分别代表到点击的位置到文档顶部,到可视区域顶部,到触发事件的元素顶部的距离。01Pbcms Ajax 无刷新加载内容前段时间,群里有位同学问起 Ajax 加载的问题,这个不属于模板制作系列教程的内容,因此单独再出一个使用技巧系列的教程。02clientWidth,offsetWidth,scrollWidth你分的清吗最近在开发时遇到这样一个需求,一个表单列表报错后,滚动表单到能展示报错元素,做的时候发现clientWidth,offsetWidth,scrollWidth这几个概念自己有时候还是会弄混,所以想写篇文章记录一下。01Flutter跨平台移动端开发丨SingleChildScrollView、ListView......SingleChildScrollView 类似 Android 中的 scrollview ,且同样的只可包含有一个子元素05十万条数据,后端不分页咋办!(如何优化长列表渲染)我们通常把一组数量级很大的数据叫做长列表,比如渲染一组上千条的数据,我们以数组的形式拿到这些信息,然后遍历渲染在页面上;06如何实现一个能精确同步滚动的Markdown编辑器随着Markdown越来越流行,Markdown编辑器也越来越多,除去所见即所得的实时预览编辑器外,通常其他Markdown编辑器都会采用源代码和预览双栏显示的方式,就像这样:01解密HTML少为人知的一面普通的图片懒加载方式,就是使用JS代码计算滚动的高度,滚动到图片附近才开始加载图片04虚拟滚动之原理及其封装前端的业务开发中会遇到一些不分页且数据条数超过1000加载的列表(长列表),不分页的需求在一般前端程序员看来是不可思议的。正常的思考逻辑是,当数据量20w+时,后端报文可去到30+M,查询时间可能去到几十秒。但是前端如果尝试渲染这些数据,花费的时间必定是以分钟计算。通常是3分钟以上。相比之下,由前端优化这个问题更为迫切,责任更为突出(锅更大)。02vue 的上拉加载,下拉刷新(基于better-scrol)我先吐槽下,这个vue 的上拉刷新前几次都是有现成的框架,来做的,这个better-scroll的我是真的一开始没有看懂,可能是自己太笨了吧,不过 写这个的真的是大神,很厉害,个人项目做的这么厉害,666附上地址02元素中必知重要属性和方法上一篇文章我们学习了 Angular 中自定义 Video 操作,如果读者留意的话,会发现在这篇文章中就开始操作元素的属性 scrollLeft,这是很常用的一样属性。那么还有什么属性和方法比较重要呢?其又代表什么意思呢?下面我们进入主题。02SCrollTOP scrollHeightjQuery 里和滚动条有关的概念很多,但是有三个属性和滚动条的拖动有关,就是:scrollTop、scrollLeft、scrollHeight。其中 scrollHeight 属性,互联网上几乎搜素不到关于它的应用技巧,而我正好需要用到它。02JQuery Div scrollTop ScrollHeightjQuery 里和滚动条有关的概念很多,但是有三个属性和滚动条的拖动有关,就是:scrollTop、scrollLeft、scrollHeight。其中 scrollHeight 属性,互联网上几乎搜素不到关于它的应用技巧,而我正好需要用到它。01虚拟列表与 Scroll Restoration虚拟列表是为了提高页面性能而出现的。我们知道,一个页面上的 DOM 树越复杂,节点越多性能越低,每次重排(reflow)的成本越高。于是,虚拟列表出现了。虚拟列表的原理是只渲染可视部分以及部分预渲染的节点,待滚动之后替换可视部分节点。余下的空间则用 padding-top padding-bottom 撑开。02HTML CSS 中的简单响应式文本滑块02如何处理 React 中的 onScroll 事件?在 React 应用中,我们经常需要处理滚动事件(onScroll),以实现一些与滚动相关的功能,如无限滚动加载、滚动到顶部按钮等。本文将详细介绍如何处理 React 中的 onScroll 事件,并提供示例代码帮助你理解和应用这个功能。01基于 Vue 的两层吸顶踩坑总结近日,在做活动页的过程中遇到两层吸顶的需求,并且要兼容 IE9 及以上的浏览器。乍一看不就是个吸顶嘛,应该不难吧,事实证明还是踩了很多坑才出来。兼容性问题多到吐血,我太难了。废话不多说,先看一下两层吸顶的最终实现效果,如下图所示。01vue2.0和better-scroll实现左右联动效果在做移动端商城或者其他页面的时候,经常会遇到左右联动的效果,今天小编vue2.0和better-scroll这个插件一起实现左右联动效果。03扫码添加站长 进交流群领取专属 10元无门槛券手把手带您无忧上云相关资讯CSS浮动和清除React Hooks踩坑分享React 高阶组件介绍轻松实现响应式——CSS变量CSS浮动到底是做什么呢?热门标签更多标签云服务器即时通信 IMICP备案对象存储实时音视频活动推荐运营活动广告关闭领券
锚点目录定位功能在长页面和文档类网站中非常常见,它可以让用户快速定位到页面中的某个章节
在讨论防抖和节流之前咱们先看一个需求,需求是这样的,监听页面的scroll事件,当页面拖动到最底端时,加载更多。实现代码如下:
2019年实习时的 BootStrap(4.x)基础知识 备份 BootStrap5六角学院文档: HexSchool 顺便推荐一个程序员段子网站 techug.com
在做大部分真实应用的 web 项目过程中,都会有一样不可或缺的需求,那就是分页。Meteor 项目也不例外,同样会有这样的需求,本文给大家介绍的就是一个非常好用的分页包 alethes:pages。它可以实现简单的根据页数分页,也可以实现强大的滚动分页。内部还支持利用多个 collection 数据进行分页。下面我们就来详细的了解它。 注意:以下内容多是对官方包的一种简述和翻译,如果需要更详细的内容可以参考官方地址。
display:inline-block某种意义上的作用就是包裹(wrap),而浮动也有类似的效果。举个常见例子,或许您有实现宽度自适应按钮的经验,实现宽度自适应的关键就是要让按钮的大小自适应于文字的个数,这就需要按钮要自动包裹在文字的外面。我们用什么方法实现呢?一就是display:inline-block;二就是float。
在说这个插件之前,可以先去 https://bubuzou.com/ 这个网站体验下这个插件的效果,好有个大概的印象。
在实际的项目开发中,我遇到了一个这样的需求:一个页面模块有很多列表数据展示,每条数据都带有图片,而首次展示的图片只需要不到10张,那么我们还要一次性把所有图片都加载出来吗?显然这是不对的,不仅影响页面渲染速度,还浪费带宽(因为需要对列表进行拖动排序,需加载出全部列表,不能做分页)。我们可以在浏览器滚动到一定的位置的时候进行下载,这也就是们通常所说的惰性加载,技术上现实其中要用的技术就是图片懒加载--到可视区域再加载。
本文由 chunpengliu 首发于腾讯内部KM论坛,由 IMWeb 社区授权转载。点击阅读原文查看 IMWeb 社区更多精彩文章。 从需求出发: 在实际的项目开发中,我遇到了一个这样的需求:一个页面模块有很多列表数据展示,每条数据都带有图片,而首次展示的图片只需要不到10张,那么我们还要一次性把所有图片都加载出来吗?显然这是不对的,不仅影响页面渲染速度,还浪费带宽(因为需要对列表进行拖动排序,需加载出全部列表,不能做分页)。我们可以在浏览器滚动到一定的位置的时候进行下载,这也就是们通常所说的惰性加载
现在项目中列表页都会做成分页的形式,但是仍然存在一些场景:后端返回所有数据(可能成千上万条),前端渲染。下面提供几种解决思路。
事件对象可以拿到 pageY、clientY、offsetY,分别代表到点击的位置到文档顶部,到可视区域顶部,到触发事件的元素顶部的距离。
前段时间,群里有位同学问起 Ajax 加载的问题,这个不属于模板制作系列教程的内容,因此单独再出一个使用技巧系列的教程。
最近在开发时遇到这样一个需求,一个表单列表报错后,滚动表单到能展示报错元素,做的时候发现clientWidth,offsetWidth,scrollWidth这几个概念自己有时候还是会弄混,所以想写篇文章记录一下。
SingleChildScrollView 类似 Android 中的 scrollview ,且同样的只可包含有一个子元素
我们通常把一组数量级很大的数据叫做长列表,比如渲染一组上千条的数据,我们以数组的形式拿到这些信息,然后遍历渲染在页面上;
随着Markdown越来越流行,Markdown编辑器也越来越多,除去所见即所得的实时预览编辑器外,通常其他Markdown编辑器都会采用源代码和预览双栏显示的方式,就像这样:
普通的图片懒加载方式,就是使用JS代码计算滚动的高度,滚动到图片附近才开始加载图片
前端的业务开发中会遇到一些不分页且数据条数超过1000加载的列表(长列表),不分页的需求在一般前端程序员看来是不可思议的。正常的思考逻辑是,当数据量20w+时,后端报文可去到30+M,查询时间可能去到几十秒。但是前端如果尝试渲染这些数据,花费的时间必定是以分钟计算。通常是3分钟以上。相比之下,由前端优化这个问题更为迫切,责任更为突出(锅更大)。
我先吐槽下,这个vue 的上拉刷新前几次都是有现成的框架,来做的,这个better-scroll的我是真的一开始没有看懂,可能是自己太笨了吧,不过 写这个的真的是大神,很厉害,个人项目做的这么厉害,666附上地址
上一篇文章我们学习了 Angular 中自定义 Video 操作,如果读者留意的话,会发现在这篇文章中就开始操作元素的属性 scrollLeft,这是很常用的一样属性。那么还有什么属性和方法比较重要呢?其又代表什么意思呢?下面我们进入主题。
jQuery 里和滚动条有关的概念很多,但是有三个属性和滚动条的拖动有关,就是:scrollTop、scrollLeft、scrollHeight。其中 scrollHeight 属性,互联网上几乎搜素不到关于它的应用技巧,而我正好需要用到它。
虚拟列表是为了提高页面性能而出现的。我们知道,一个页面上的 DOM 树越复杂,节点越多性能越低,每次重排(reflow)的成本越高。于是,虚拟列表出现了。虚拟列表的原理是只渲染可视部分以及部分预渲染的节点,待滚动之后替换可视部分节点。余下的空间则用 padding-top padding-bottom 撑开。
在 React 应用中,我们经常需要处理滚动事件(onScroll),以实现一些与滚动相关的功能,如无限滚动加载、滚动到顶部按钮等。本文将详细介绍如何处理 React 中的 onScroll 事件,并提供示例代码帮助你理解和应用这个功能。
近日,在做活动页的过程中遇到两层吸顶的需求,并且要兼容 IE9 及以上的浏览器。乍一看不就是个吸顶嘛,应该不难吧,事实证明还是踩了很多坑才出来。兼容性问题多到吐血,我太难了。废话不多说,先看一下两层吸顶的最终实现效果,如下图所示。
在做移动端商城或者其他页面的时候,经常会遇到左右联动的效果,今天小编vue2.0和better-scroll这个插件一起实现左右联动效果。
领取专属 10元无门槛券
手把手带您无忧上云