perf(banner): TabView 프리로딩 완화·다운샘플링·요청취소 적용
배너/캐러셀에서 인접 페이지 프리로딩과 원본 해상도 디코딩으로 발생하던 메모리 스파이크와 중복 로드를 완화했습니다. - 각 페이지에서 이미지 URL을 onAppear에 바인딩, onDisappear에 nil 해제 → 인접 페이지 프리로딩 시 중복 로드·디코딩 방지, 요청 취소 실효 - 모든 KFImage에 cancelOnDisappear(true) 일관 적용 - 큰 배너 이미지에 downsampling(size:) 적용(디코딩 메모리 절감) - 자동 슬라이드 주기 3초 → 4초로 완화(동시 로드 빈도 감소) - TabView 페이지를 서브뷰로 분리하여 뷰 로직 단순화 및 재사용성 향상 결과: 동시 디코딩 감소, 피크 메모리 사용량 하락, 자동 슬라이드 안정성 개선
This commit is contained in:
@@ -19,67 +19,12 @@ struct ContentMainBannerView: View {
|
||||
TabView(selection: $viewModel.currentIndex) {
|
||||
ForEach(0..<viewModel.bannerList.count, id: \.self) { index in
|
||||
let item = viewModel.bannerList[index]
|
||||
if let url = item.thumbnailImageUrl.addingPercentEncoding(withAllowedCharacters: .urlQueryAllowed) {
|
||||
KFImage(URL(string: url))
|
||||
.cancelOnDisappear(true)
|
||||
.downsampling(
|
||||
size: CGSize(
|
||||
width: screenSize().width - 26.7,
|
||||
height: (screenSize().width - 26.7) * 0.53
|
||||
)
|
||||
)
|
||||
.resizable()
|
||||
.scaledToFill()
|
||||
.frame(
|
||||
width: screenSize().width - 26.7,
|
||||
height: (screenSize().width - 26.7) * 0.53
|
||||
)
|
||||
.onTapGesture {
|
||||
switch item.type {
|
||||
case .EVENT:
|
||||
AppState.shared.setAppStep(step: .eventDetail(event: item.eventItem!))
|
||||
case .CREATOR:
|
||||
AppState.shared.setAppStep(step: .creatorDetail(userId: item.creatorId!))
|
||||
case .SERIES:
|
||||
AppState.shared.setAppStep(step: .seriesDetail(seriesId: item.seriesId!))
|
||||
case .LINK:
|
||||
if let link = item.link, link.trimmingCharacters(in: .whitespaces).count > 0, let url = URL(string: link), UIApplication.shared.canOpenURL(url) {
|
||||
UIApplication.shared.open(url)
|
||||
}
|
||||
}
|
||||
}
|
||||
.cornerRadius(4.7)
|
||||
} else {
|
||||
KFImage(URL(string: item.thumbnailImageUrl))
|
||||
.cancelOnDisappear(true)
|
||||
.downsampling(
|
||||
size: CGSize(
|
||||
width: screenSize().width - 26.7,
|
||||
height: (screenSize().width - 26.7) * 0.53
|
||||
)
|
||||
)
|
||||
.resizable()
|
||||
.scaledToFill()
|
||||
.frame(
|
||||
width: screenSize().width - 26.7,
|
||||
height: (screenSize().width - 26.7) * 0.53
|
||||
)
|
||||
.onTapGesture {
|
||||
switch item.type {
|
||||
case .EVENT:
|
||||
AppState.shared.setAppStep(step: .eventDetail(event: item.eventItem!))
|
||||
case .CREATOR:
|
||||
AppState.shared.setAppStep(step: .creatorDetail(userId: item.creatorId!))
|
||||
case .SERIES:
|
||||
AppState.shared.setAppStep(step: .seriesDetail(seriesId: item.seriesId!))
|
||||
case .LINK:
|
||||
if let link = item.link, link.trimmingCharacters(in: .whitespaces).count > 0, let url = URL(string: link), UIApplication.shared.canOpenURL(url) {
|
||||
UIApplication.shared.open(url)
|
||||
}
|
||||
}
|
||||
}
|
||||
.cornerRadius(4.7)
|
||||
}
|
||||
ContentMainBannerPage(
|
||||
item: item,
|
||||
width: screenSize().width - 26.7,
|
||||
height: (screenSize().width - 26.7) * 0.53
|
||||
)
|
||||
.tag(index)
|
||||
}
|
||||
}
|
||||
.tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
|
||||
@@ -103,7 +48,7 @@ struct ContentMainBannerView: View {
|
||||
}
|
||||
.frame(maxWidth: .infinity)
|
||||
.onAppear {
|
||||
viewModel.timer = Timer.publish(every: 3, on: .main, in: .common).autoconnect()
|
||||
viewModel.timer = Timer.publish(every: 4, on: .main, in: .common).autoconnect()
|
||||
}
|
||||
.onDisappear {
|
||||
viewModel.timer.upstream.connect().cancel()
|
||||
@@ -133,6 +78,58 @@ struct ContentMainBannerView: View {
|
||||
}
|
||||
}
|
||||
|
||||
private struct ContentMainBannerPage: View {
|
||||
let item: GetAudioContentBannerResponse
|
||||
let width: CGFloat
|
||||
let height: CGFloat
|
||||
@State private var boundURL: URL?
|
||||
|
||||
var body: some View {
|
||||
Group {
|
||||
if let boundURL {
|
||||
KFImage(boundURL)
|
||||
.cancelOnDisappear(true)
|
||||
.downsampling(size: CGSize(width: width, height: height))
|
||||
.resizable()
|
||||
.scaledToFill()
|
||||
.frame(width: width, height: height)
|
||||
.cornerRadius(4.7)
|
||||
} else {
|
||||
Color.clear
|
||||
.frame(width: width, height: height)
|
||||
.cornerRadius(4.7)
|
||||
}
|
||||
}
|
||||
.contentShape(Rectangle())
|
||||
.onTapGesture {
|
||||
switch item.type {
|
||||
case .EVENT:
|
||||
AppState.shared.setAppStep(step: .eventDetail(event: item.eventItem!))
|
||||
case .CREATOR:
|
||||
AppState.shared.setAppStep(step: .creatorDetail(userId: item.creatorId!))
|
||||
case .SERIES:
|
||||
AppState.shared.setAppStep(step: .seriesDetail(seriesId: item.seriesId!))
|
||||
case .LINK:
|
||||
if let link = item.link,
|
||||
link.trimmingCharacters(in: .whitespaces).count > 0,
|
||||
let url = URL(string: link),
|
||||
UIApplication.shared.canOpenURL(url) {
|
||||
UIApplication.shared.open(url)
|
||||
}
|
||||
}
|
||||
}
|
||||
.onAppear {
|
||||
let urlString = item.thumbnailImageUrl.addingPercentEncoding(
|
||||
withAllowedCharacters: .urlQueryAllowed
|
||||
) ?? item.thumbnailImageUrl
|
||||
boundURL = URL(string: urlString)
|
||||
}
|
||||
.onDisappear {
|
||||
boundURL = nil
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
struct ContentMainBannerView_Previews: PreviewProvider {
|
||||
static var previews: some View {
|
||||
ContentMainBannerView()
|
||||
|
||||
Reference in New Issue
Block a user