Swift Academy · บทเรียน

แคชการจัดวางและประสิทธิภาพ

ใช้แคชการจัดวางเพื่อเพิ่มประสิทธิภาพ

แคชการจัดวางและประสิทธิภาพ เป็นบทเรียน Swift Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Swift Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Swift Academy มีบทเรียนทั้งหมด 4 บทเรียน

เหตุใดจึงต้องใช้แคชของเลย์เอาต์

SwiftUI อาจเรียก sizeThatFits และ placeSubviews หลายครั้งระหว่างการจัดวางเพียงรอบเดียว

หากการคำนวณของคุณใช้ทรัพยากรมาก แคชจะช่วยให้คำนวณเพียงครั้งเดียวแล้วนำกลับมาใช้ ลดการทำงานซ้ำ

ชนิดที่เกี่ยวข้องของแคช

โพรโทคอล Layout มีชนิด Cache ที่เกี่ยวข้อง โดยมีค่าเริ่มต้นเป็น Void คุณสามารถกำหนดโครงสร้างของตนเองเพื่อจัดเก็บผลลัพธ์ที่คำนวณไว้ล่วงหน้า

struct FlowLayout: Layout {
    struct CacheData {
        var sizes: [CGSize] = []
    }
    typealias Cache = CacheData
}

makeCache

ใช้งาน makeCache(subviews:) เพื่อสร้างแคชเริ่มต้น SwiftUI จะเรียกใช้เมธอดนี้หนึ่งครั้งก่อนเมธอดของเลย์เอาต์ ทำให้คุณมีจุดสำหรับวัดขนาดล่วงหน้า

func makeCache(subviews: Subviews) -> CacheData {
    let sizes = subviews.map { $0.sizeThatFits(.unspecified) }
    return CacheData(sizes: sizes)
}

การอ่านแคช

ขณะนี้เมธอดของเลย์เอาต์จะได้รับ cache เป็นพารามิเตอร์แบบ inout ให้อ่านค่าที่คำนวณไว้ล่วงหน้าแทนการวัดขนาดมุมมองย่อยทุกครั้ง

func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout CacheData) -> CGSize {
    let height = cache.sizes.map(\.height).max() ?? 0
    let width = cache.sizes.reduce(0) { $0 + $1.width }
    return CGSize(width: width, height: height)
}

updateCache

เมื่อชุดของมุมมองย่อยเปลี่ยนแปลง SwiftUI จะเรียก updateCache(_:subviews:) การใช้งานเริ่มต้นจะสร้างแคชใหม่ผ่าน makeCache แต่คุณสามารถเขียนทับเพื่ออัปเดตทีละส่วนได้

func updateCache(_ cache: inout CacheData, subviews: Subviews) {
    cache.sizes = subviews.map { $0.sizeThatFits(.unspecified) }
}

updateCache ทำงานเมื่อใด

updateCache จะทำงานเมื่อจำนวนหรืออัตลักษณ์ของมุมมองย่อยเปลี่ยนแปลง ไม่ใช่ทุกครั้งที่เรขาคณิตเปลี่ยนแปลง ให้แคชเฉพาะข้อมูลที่ขึ้นอยู่กับมุมมองย่อย ไม่ใช่ข้อมูลที่ขึ้นอยู่กับขนาดที่เสนอ

แคชเฉพาะข้อมูลที่ไม่ขึ้นกับข้อเสนอ

ข้อผิดพลาดที่พบบ่อยคือการแคชผลลัพธ์ที่ขึ้นอยู่กับขนาดที่เสนอ ข้อเสนออาจเปลี่ยนระหว่างการเรียกแต่ละครั้ง ดังนั้นต้องคำนวณผลลัพธ์ที่ขึ้นอยู่กับขนาดใหม่ ไม่ใช่แคชโดยไม่ตรวจสอบ

// OK to cache: intrinsic child sizes
// NOT OK to cache: row breaks (depend on proposed width)

การแคชขนาดตามธรรมชาติ

แนวทางที่ปลอดภัยคือแคชผลลัพธ์ราคาแพงจาก sizeThatFits(.unspecified) แล้วคำนวณเลขคณิตสำหรับการขึ้นแถวใหม่ซึ่งมีต้นทุนต่ำในการเรียกแต่ละครั้ง โดยใช้ข้อเสนอปัจจุบัน

struct CacheData { var intrinsic: [CGSize] = [] }
// wrapping uses cache.intrinsic + current maxWidth

หลีกเลี่ยงการเพิ่มประสิทธิภาพก่อนเวลา

สำหรับมุมมองย่อยแบบง่ายจำนวนไม่กี่รายการ การวัดขนาดมีต้นทุนต่ำและแคชจะเพิ่มความซับซ้อน ควรวัดประสิทธิภาพก่อน และใช้แคชเมื่อการวัดขนาดมีต้นทุนสูงจริง ๆ เท่านั้น เช่น ข้อความ รูปภาพ หรือเลย์เอาต์ซ้อนกัน

แคชและความหมายของค่า

SwiftUI เป็นเจ้าของแคชและส่งแคชมาเป็น inout ให้เก็บแคชเป็นชนิดค่าธรรมดาที่ไม่มีการอ้างอิงไปยังมุมมอง เพื่อให้ SwiftUI จัดการอายุการใช้งานได้อย่างปลอดภัย

struct CacheData {
    var sizes: [CGSize] // value types only
}

การวัดผลลัพธ์ที่ได้

ใช้เครื่องมือวัดประสิทธิภาพของ SwiftUI หรือตัวนับแบบง่ายเพื่อยืนยันว่าแคชช่วยลดจำนวนครั้งในการวัดขนาดได้จริง การเพิ่มประสิทธิภาพโดยไม่วัดผลเป็นเพียงการคาดเดา

ตรวจสอบสั้น ๆ: แคชของเลย์เอาต์

ทดสอบความเข้าใจเกี่ยวกับการแคชเลย์เอาต์

ทบทวน: แคชของเลย์เอาต์และประสิทธิภาพ

ชนิด Cache ที่เกี่ยวข้องของโพรโทคอล Layout ซึ่งสร้างโดย makeCache และปรับปรุงโดย updateCache จะจัดเก็บงานที่มีต้นทุนสูงและไม่ขึ้นกับข้อเสนอ เช่น ขนาดตามธรรมชาติของมุมมองย่อย

คำนวณเลขคณิตที่มีต้นทุนต่ำและขึ้นกับข้อเสนอในการเรียกแต่ละครั้ง เก็บแคชเป็นชนิดค่าที่ไม่มีการอ้างอิง หลีกเลี่ยงการแคชก่อนเวลา และตรวจสอบประโยชน์ด้วยการวัดประสิทธิภาพก่อนเพิ่มความซับซ้อน

คำถามที่พบบ่อย

บทเรียน “แคชการจัดวางและประสิทธิภาพ” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “แคชการจัดวางและประสิทธิภาพ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Swift Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Swift Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “แคชการจัดวางและประสิทธิภาพ”

ใช้แคชการจัดวางเพื่อเพิ่มประสิทธิภาพ คุณปฏิบัติ Swift Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Swift Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Swift Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “แคชการจัดวางและประสิทธิภาพ” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Swift Academy นี้ได้ไหม

ได้ บทเรียน Swift Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Swift Academy