找一个 angular 的性能优化例子

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 1786 天前的主题，其中的信息可能已经有所发展或是发生改变。

以前看到过一个 angular 的例子，页面上有几个图片的 dom 元素，打个比方是 5 个，通过滚动，来不断替换这 5 个 dom 元素的 src 属性，以达到伪滚动的效果，从而减少页面 dom 的渲染数量，找了半天没找到是哪个地方看到过。。。还请有缘正好知道的大哥贴个链接，谢谢了

DOM

angular

滚动

例子

14 条回复 • 2021-06-05 15:48:04 +08:00

godoway

2020-01-08 18:43:58 +08:00

virtual scroll,在 cdk 里面。
https://material.angular.io/cdk/scrolling/overview

guolaopi

2020-01-08 18:47:28 +08:00

往下滚这么做可以理解，好奇往上（回）滚的话不是也重新加载了吗

aino

2020-01-08 19:04:48 +08:00

插楼问下
ng build 需要十分钟，请问是什么原因以及如何优化

ironMan1995

2020-01-08 19:41:21 +08:00 via Android

每次修改五个 img 的 src 不也要重绘

coloz

2020-01-08 22:58:23 +08:00

@aino 可以考虑换个电脑或者 CPU，同样的项目用低压 i5 CPU 编译 5、6 分钟，现在标压 i7，1 分半吧。

timedivision

2020-01-09 09:26:48 +08:00

@godoway 多谢老哥！
@guolaopi 重绘是会重绘，但是重绘的 dom 始终就这么几个，渲染的 dom 少，性能不就好了吗
@ironMan1995 重绘是会重绘，但是重绘的 dom 始终就这么几个，渲染的 dom 少，性能不就好了吗

aino

2020-01-09 09:38:10 +08:00

@coloz #5 我就是 i7 来着

HangoX

2020-01-09 09:52:04 +08:00

重用 item，客户端都这样干

tu7jako

2020-01-09 10:10:35 +08:00

刚上手 angular，边学边做项目·····感觉难度较大。各位有项目 /资料推荐吗？？

guolaopi

2020-01-09 10:11:21 +08:00

@timedivision
我的疑惑是：dom 虽然少，但是 img 不是得重新加载了吗？
往上（回）滚动的时候以前浏览过的 img 也要重新加载吧？
这样网速慢的话体验是不是不太好？

timedivision

2020-01-09 10:22:47 +08:00

@tu7jako B 站
@HangoX 小程序上不知有没有这样的方案
@guolaopi 加载过的图片一般都有缓存

lvsshuttao

2020-01-09 22:55:11 +08:00

自己写的话，轮播图，管它多少个图片，反正我就建 3 个 img，写好 css，然后循环替换它们的 src ；
长列表那种，之前用了 cdk，后来看着数据量太少了，直接用 ngfor 了，如果有图片的话，就加上个 ng-lazyload-image ；
2014 乞丐版 pro，打包的时候（前台+用户后台+管理员后台），一般 2~3 分钟左右吧，没特意去计算，感觉很快；

timedivision

2020-01-10 09:14:24 +08:00

@lvsshuttao 轮播图跟长列表滚动还是有点差别的

charlie21

2021-06-05 15:48:04 +08:00

ydys