找一个 angular 的性能优化例子

2020-01-08 18:04:44 +08:00
 timedivision

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

2133 次点击
所在节点    程序员
14 条回复
godoway
2020-01-08 18:43:58 +08:00
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
每次修改五个 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

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/636235

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX