10 เทคนิคที่ทำให้ List View ของคุณโหลดเร็ว!!

List View เป็นการแสดงข้อมูลแบบหลาย records (ใครเขียน coding จะคล้ายๆ Grid view ใน C#) ในที่นี้จะขอรวมเทคนิคในการทำให้การเปิด List View ของคุณนั้นเร็วขึ้นมาอย่างแน่นอน

1. เรียกใช้ rule ในการ List แบบ Asynchronous

เปลี่ยนการเรียก execution block จาก then เป็น asynchronous ช่วยให้เรียก rule ได้อย่างรวดเร็วไม่ต้องรอจนทำงานเสร็จก่อนเรียก rule ถัดไป

execution block

ตอนแก้เสร็จก็ทดสอบก่อนนะ บางครั้งเราต้องรอข้อมูลก่อนหน้าให้โหลดเสร็จ แบบนี้ก็ต้องใช้ then ไปเนอะ

2. เปิด option ให้แสดงผลแบบ Paging

เปิด paging ใน list view แล้วจำกัดจำนวน item ที่จะเห็นในหน้าจอ จะช่วยลดปริมาณข้อมูลที่ต้องดึงมาแสดงผลที่หน้าจอได้

setting

ไม่ได้มีเลขเป๊ะ ๆ ว่าควรแสดงกี่รายการ แต่ส่วนใหญ่ที่ทำมักจะใช้ในช่วง 10 – 50 รายการต่อหน้าจอครับ

3. ลดการใช้งาน Association

ปกติจะใช้ร่วมกับ List Display ในกรณีที่เราเก็บ ID เป็น reference ไว้ แล้วต้องการไปดึงค่า Value ออกมาแสดงโดยอ้างอิงจาก ID

ถ้าเราอยากให้ performance ในการโหลด List View เร็วขึ้น สามารถทำได้โดยการทำการ join ในข้อมูลตั้งแต่ data source เองเช่น การเขียน Stored procedure หรือเขียน view ใน SQL ก็จะช่วยลดการทำงานในส่วนของ List Display และ association นี้ลงได้ (แต่ถ้าไม่ได้ช้ามาก ใช้ association ก็สะดวกดีครับ)

4. ลดจำนวน Column ที่แสดงใน List View

จำนวน column ที่แสดงน้อยลงจะทำให้ตอน bind เข้า List view สามารถแสดงผลได้รเ็วขึ้นไปอีก อ่อ..ต้องลบออกนะครับ ไม่ใช่แค่ซ่อนด้วย Visible = false

removeColumn

5. ลดจำนวน Properties ที่ส่งกลับมาจาก SmartObjects

โดยปกติถ้าเราสร้าง SmartObjects จากตารางบนฐานข้อมูล ใน SmartObjects จะมีจำนวน Properties เท่ากับจำนวนคอลัมน์ในตารางเลย ซึ่งเราสามารถไปลบ properties นี้ออก หรือเลือกให้ส่งกลับมาเฉพาะ properties ที่เราจะใช้ก็พอ

bind.png

หรือถ้ามีคนอื่นใช้ method นี้อยู่ด้วย ไปสร้าง method แยกไว้สำหรับหน้านี้โดยเฉพาะก็ยังได้ครับ

6. แสดงไฟล์ใน List View ด้วยลิงค์สำหรับดาวน์โหลด แทนที่จะแสดง file content

กรณีถ้าเราต้องโหลดไฟล์ขนาดใหญ่หรือไฟล์เล็ก ๆ จำนวนมากใน 1 หน้าจอก็ตาม การแสดงผลด้วย data type เป็น File จะโหลดไฟล์จริงขึ้นมาด้วย ถ้ายิ่งไฟล์มีขนาดใหญ่ ก็จะใช้ระยะเวลานานในการโหลดข้อมูล

fileListView.png

เราสามารถเปลี่ยนวิธีการเก็บไฟล์ไปอยู่บน shared network path หรือ Content Management System (CMS) เช่น SharePoint แทนได้ และแสดงผลเป็นลิ้งค์แทน เมื่อผู้ใช้งานต้องการเปิดไฟล์ ค่อยกดลิ้งค์ที่เราแสดงเพื่อไปโหลดไฟล์นั้นตรงจากที่ที่เราเก็บไฟล์ไว้ได้

7. ใช้ Input Properties ในการดึงข้อมูลแทนที่จะใช้ Filter

Filter นั้นมีความสามารถในการช่วยกรองข้อมูลที่จะแสดงใน List View ได้ด้วยเงื่อนไขต่าง ๆ แต่คุณรู้หรือไม่ว่าการใช้ Filter นั้นทำให้การแสดงผลใน List View ช้าลง เพราะข้อมูลจะถูกดึงมาทั้งหมดก่อนจึงจะมากรองออกด้วย Filter เพื่อแสดงผลในหน้าจอ

filter.png

การใช้ Input properties นั้นหลังบ้านมันคือการใส่ Where casue ว่า Input properties = ‘Value’ นั่นเอง ทำให้สำหรับหลายกรณี เจอว่า Input Properties นั้นไม่เพียงพอ เพราะต้องการค้นหาด้วยเงื่อนไขอื่นเช่น Contains, Greater than บ้าง

วิธีปรับคือพยายามควรป้อนข้อมูลใน Input properties ได้มากที่สุดก่อนเพื่อลดปริมาณข้อมูลที่ต้องโหลดขึ้นมา แล้วจึงเลือกใช้ Filter ต่ออีกทีเพื่อใส่เงื่อนไขแบบซับซ้อนลงไป หรือถ้าพบยังไม่เพียงพอ ผมก็จะใช้ View หรือ stored procedure มาช่วยรองรับเงื่อนไขแบบซับซ้อนครับ

8. ตรวจสอบว่าไม่โหลดข้อมูลซ้ำ 2 รอบ

ในการสร้าง List View ต่อกับ SmartObjects จะมี option ที่หน้า general ตรงด้านล่างว่าจะให้ Call this method when the form loads เลยหรือไม่

ถ้าไปติ๊กเลือก option นี้ระบบจะไปสร้าง rule Get List ไว้ใน View Initilize และถ้าลากไปใช้ใน Form Method Get List นี้ก็จะถูกเรียกใน Form Initilizing ด้วย (นอกจากนี้ด้วยค่า default ไม่ได้ใส่ input properties เลยทำให้มันจะดึงข้อมูลขึ้นมาทั้งหมด!!)

ListViewsGet.png

เคสที่เคยเจอคือมีไปเลือก option นี้ใน View ทำให้มีการโหลดข้อมูลแบบทั้งหมดขึ้นมา และเพิ่ม rule ใน Form initilzing ต่อ โดยโหลดข้อมูลแบบใส่ input properties ทำให้ตอนทดสอบแสดงผลที่หน้าจอถูกนะ แต่กว่าจะเปิดขึ้นมาทีช้ามาก วิธีแก้คือไปเอา rule นี้ออกซะ หรือเพิ่มเงื่อนไขให้เช็คก่อนใน View Initilize

9. ปิดการใช้ SmartForm ListView Row Count

จากที่เคยเขียน Blog ว่าด้วยเรื่องการแสดง Paging ใน Listview และ แก้ปัญหา SmartObjects สร้างข้อมูลซ้ำ หลังบ้านมีการทำงานโดยไปเรียก List method ขึ้นมา 2 ครั้งเพืื่อหาจำนวน page และเพื่อแสดงรายการ ทำให้เวลาในการโหลดข้อมูลนานขึ้น การไปตั้งค่า SmartObject.RuntimeListViewRowCount = false ก็จะช่วยให้ List method ต่าง ๆ ทำงานได้เร็วขึ้น

10. Tuning data source

ข้อนึงที่มักจะมองข้ามกัน คือการตรวจสอบที่ data soruce ตั้งต้นด้วยครับ ว่าเรียกใช้งานตรงๆ (ด้วยค่า input เดียวกับที่เราเรียกใน List view) ใช้ระยะเวลาเท่าไหร่ ถ้าระยะเวลาในการโหลดนานย่อมส่งผลต่อการเรียกผ่าน List View ไปด้วย

ส่วนวิธีแก้ให้ทำการปรับแต่งตั้งแต่ที่ data source ด้วยครับ เช่นการใส่ index ใน view หรือ table, การแก้ logic ที่ web service หรือ stored procedure ให้ทำงานเร็วตั้งต้นทาง

สำหรับเทคนิคที่ได้แนะนำไปมีทั้งทำง่าย ๆ ปรับตามได้เลย จนไปถึงยากมีต้องใช้ effort ในการทำที่มากน้อยต่างกันไป ขอให้ลองเลือกใช้ให้เหมาะสมนะครับ ว่าจะเลือกปรับตามข้อไหนและความเร็วที่ได้จากการ tuning นั้นคุ้มค่ากับที่เราลงแรงทำไปหรือเปล่า

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s