กลยุทธ์การ Rollback ของ React useOptimistic: การยกเลิก Optimistic Update

ในโลกของการพัฒนา front-end การมอบประสบการณ์ที่ตอบสนองและเป็นมิตรกับผู้ใช้เป็นสิ่งสำคัญยิ่ง Optimistic updates มีบทบาทสำคัญในการบรรลุเป้าหมายนี้โดยช่วยให้ผู้ใช้รับรู้ถึงการตอบสนองได้ทันที แม้ว่าข้อมูลจะยังไม่ถูกบันทึกบนเซิร์ฟเวอร์ก็ตาม อย่างไรก็ตาม เมื่อการดำเนินการฝั่งเซิร์ฟเวอร์ล้มเหลว การนำกลยุทธ์ rollback ที่แข็งแกร่งมาใช้เป็นสิ่งจำเป็นเพื่อรักษาความสมบูรณ์ของข้อมูลและประสบการณ์ที่ดีของผู้ใช้ นี่คือจุดที่ React useOptimistic hook และเทคนิคการยกเลิกที่มีประสิทธิภาพเข้ามามีบทบาท

ทำความเข้าใจ Optimistic Updates

Optimistic updates คือการอัปเดตส่วนติดต่อผู้ใช้ (UI) ทันทีหลังจากที่ผู้ใช้ดำเนินการบางอย่าง โดยตั้งสมมติฐานว่าการดำเนินการนั้นจะสำเร็จ ซึ่งจะให้ผลตอบรับทันทีและทำให้แอปพลิเคชันรู้สึกเร็วและตอบสนองได้ดียิ่งขึ้น ตัวอย่างเช่น เมื่อผู้ใช้คลิกปุ่ม 'ถูกใจ' บนโพสต์ในโซเชียลมีเดีย UI จะแสดงผลการ 'ถูกใจ' ทันที แม้ว่าเซิร์ฟเวอร์จะยังไม่ยืนยันการอัปเดตก็ตาม สิ่งนี้ช่วยปรับปรุงการรับรู้ถึงประสิทธิภาพของผู้ใช้ได้อย่างมาก

ความท้าทายของ Optimistic Updates

แม้ว่า optimistic updates จะช่วยยกระดับประสบการณ์ของผู้ใช้ แต่ก็นำมาซึ่งความท้าทายที่อาจเกิดขึ้น: จะเกิดอะไรขึ้นเมื่อการดำเนินการฝั่งเซิร์ฟเวอร์ล้มเหลว? ในกรณีเช่นนี้ UI จำเป็นต้องย้อนกลับไปยังสถานะเดิม เพื่อให้มั่นใจถึงความสอดคล้องของข้อมูล การจัดการกับความล้มเหลวอย่างนุ่มนวลเป็นสิ่งสำคัญเพื่อหลีกเลี่ยงการสร้างความสับสนหรือความหงุดหงิดให้กับผู้ใช้ สถานการณ์ที่พบบ่อย ได้แก่:

• ข้อผิดพลาดของเครือข่าย: ปัญหาการเชื่อมต่ออินเทอร์เน็ตสามารถขัดขวางการอัปเดตข้อมูลให้สำเร็จได้
• ข้อผิดพลาดในการตรวจสอบความถูกต้องฝั่งเซิร์ฟเวอร์: เซิร์ฟเวอร์อาจปฏิเสธการอัปเดตเนื่องจากกฎการตรวจสอบความถูกต้องหรือตรรกะทางธุรกิจอื่น ๆ
• ปัญหาการยืนยันตัวตน: ผู้ใช้อาจไม่ได้รับอนุญาตให้ดำเนินการดังกล่าว

แนะนำ React useOptimistic Hook

useOptimistic hook เป็นเครื่องมือที่ทรงพลังสำหรับจัดการ optimistic updates ในแอปพลิเคชัน React ช่วยให้กระบวนการเปลี่ยนแปลงแบบ optimistic ง่ายขึ้นและมีกลไกในการย้อนกลับการเปลี่ยนแปลงเหล่านั้นหากการดำเนินการเบื้องหลังล้มเหลว โดยทั่วไป hook นี้จะรับอาร์กิวเมนต์หลักสองตัว:

1. ค่าสถานะเริ่มต้น: สิ่งนี้แสดงถึงจุดเริ่มต้นของข้อมูลที่กำลังจะถูกอัปเดต
2. ฟังก์ชัน reducer: ฟังก์ชันนี้ใช้เพื่อนำการเปลี่ยนแปลงแบบ optimistic ไปใช้กับสถานะ โดยจะรับสถานะปัจจุบันและ action และส่งคืนสถานะใหม่

hook จะส่งคืนอาร์เรย์ที่ประกอบด้วยสถานะปัจจุบันและฟังก์ชันสำหรับ dispatch actions ไปยัง reducer

การนำ Optimistic Updates มาใช้พร้อมกับ Rollback

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

            import React, { useReducer, useRef } from 'react';

// Define the initial state for comments (assuming this is loaded from some data source)
const initialComments = [
  { id: 1, author: 'Alice', text: 'Great post!' },
  { id: 2, author: 'Bob', text: 'Interesting insights.' },
];

// Define the reducer to manage comment state
const commentReducer = (state, action) => {
  switch (action.type) {
    case 'ADD_COMMENT_OPTIMISTIC':
      return [...state, action.payload]; // Add the optimistic comment immediately
    case 'ADD_COMMENT_ROLLBACK':
      return state.filter(comment => comment.id !== action.payload.id); // Remove the optimistic comment
    default:
      return state;
  }
};

function CommentSection() {
  const [comments, dispatch] = useReducer(commentReducer, initialComments);
  const commentInputRef = useRef(null);

  const handleAddComment = async () => {
    const newCommentText = commentInputRef.current.value;
    const optimisticComment = {
      id: Date.now(), // Generate a temporary ID
      author: 'You', // Assuming the user is logged in
      text: newCommentText,
    };

    // 1. Optimistically update the UI
    dispatch({ type: 'ADD_COMMENT_OPTIMISTIC', payload: optimisticComment });

    // 2. Simulate an API call (e.g., using fetch)
    try {
      await new Promise(resolve => setTimeout(resolve, 2000)); // Simulate network delay
      // In a real application, you'd send the comment to the server here
      // and receive a response indicating success or failure
      // If successful, you'd likely receive a new ID from the server
      // and update the optimistic comment in the UI
      console.log('Comment saved successfully on the server.');
    } catch (error) {
      // 3. Rollback the optimistic update if the API call fails
      console.error('Failed to save comment:', error);
      dispatch({ type: 'ADD_COMMENT_ROLLBACK', payload: optimisticComment });
    }

    commentInputRef.current.value = '';
  };

  return (
    

      
Comments
      

        {comments.map(comment => (
          

            {comment.author}: {comment.text}
          
        ))}
      
      

        
        Add Comment
      
    
  );
}

export default CommentSection;

            

              
                Copy
              
            
          

ในตัวอย่างนี้:

1. commentReducer จัดการการจัดการสถานะสำหรับความคิดเห็น
2. handleAddComment คือ event handler สำหรับปุ่ม 'Add Comment'
3. มีการสร้างความคิดเห็นแบบ optimistic พร้อมกับ ID ชั่วคราว
4. UI จะได้รับการอัปเดตทันทีด้วยความคิดเห็นใหม่โดยใช้ `dispatch({ type: 'ADD_COMMENT_OPTIMISTIC', payload: optimisticComment })`
5. มีการจำลองการเรียก API ด้วย setTimeout เพื่อเลียนแบบความล่าช้าของเครือข่าย
6. หากการเรียก API สำเร็จ ไม่จำเป็นต้องมีการ rollback (แม้ว่าอาจต้องมีการประมวลผลเพิ่มเติมเพื่ออัปเดตความคิดเห็นแบบ optimistic ด้วยข้อมูลที่ได้รับจากเซิร์ฟเวอร์)
7. หากการเรียก API ล้มเหลว ความคิดเห็นแบบ optimistic จะถูก rollback โดยใช้ dispatch({ type: 'ADD_COMMENT_ROLLBACK', payload: optimisticComment })

กลยุทธ์การ Rollback ขั้นสูง

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

1. การแสดงข้อผิดพลาด

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

            // Inside handleAddComment
  try {
    // ... (API call)
  } catch (error) {
    console.error('Failed to save comment:', error);
    dispatch({ type: 'ADD_COMMENT_ROLLBACK', payload: optimisticComment });
    // Display an error message to the user
    setErrorMessage('Failed to save comment. Please try again.'); // Assuming you have a state variable for error messages
    setTimeout(() => setErrorMessage(''), 3000); // Clear the error after 3 seconds
  }

            

              
                Copy
              
            
          

2. กลไกการลองใหม่ (Retry)

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

            // In handleAddComment
let retries = 0;
const maxRetries = 3;
const retryDelay = (attempt) => 1000 * Math.pow(2, attempt); // Exponential backoff

async function attemptSave() {
  try {
    await saveCommentToServer(optimisticComment);
  } catch (error) {
    if (retries < maxRetries) {
      console.log(`Retry attempt ${retries + 1} after ${retryDelay(retries)}ms`);
      await new Promise(resolve => setTimeout(resolve, retryDelay(retries)));
      retries++;
      await attemptSave(); // Recursive call to retry
    } else {
      console.error('Failed to save comment after multiple retries:', error);
      dispatch({ type: 'ADD_COMMENT_ROLLBACK', payload: optimisticComment });
      setErrorMessage('Failed to save comment after multiple attempts.');
    }
  }
}

await attemptSave();

            

              
                Copy
              
            
          

3. การกระทบยอดข้อมูล (Data Reconciliation)

หากการดำเนินการของเซิร์ฟเวอร์สำเร็จหลังจากล่าช้าไปบ้าง และข้อมูลฝั่งไคลเอนต์ได้แสดงผลการอัปเดตแบบ optimistic ไปแล้ว คุณสามารถกระทบยอดความแตกต่างระหว่างข้อมูล optimistic และข้อมูลจริงจากเซิร์ฟเวอร์ได้ ตัวอย่างเช่น เซิร์ฟเวอร์อาจให้ ID ที่แตกต่างกันหรืออัปเดตบางฟิลด์ ซึ่งสามารถทำได้โดยการรอการตอบกลับที่สำเร็จจากเซิร์ฟเวอร์ เปรียบเทียบการตอบกลับกับสถานะ optimistic แล้วจึงอัปเดต UI ตามนั้น การกำหนดเวลาเป็นสิ่งสำคัญสำหรับประสบการณ์ผู้ใช้ที่ราบรื่น

            
// Assuming the server responds with the saved comment data
const response = await saveCommentToServer(optimisticComment);
const serverComment = response.data;

// If the IDs differ (unlikely but possible), update the UI
if (serverComment.id !== optimisticComment.id) {
  dispatch({ type: 'UPDATE_COMMENT_ID', payload: { oldId: optimisticComment.id, newComment: serverComment }});
}

            

              
                Copy
              
            
          

4. การอัปเดตแบบ Optimistic เป็นชุด (Batches)

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

5. ตัวบ่งชี้การโหลดและผลตอบรับจากผู้ใช้

ในระหว่างการอัปเดตแบบ optimistic และการ rollback ที่อาจเกิดขึ้น ควรให้ผลตอบรับทางภาพที่เหมาะสมแก่ผู้ใช้ ซึ่งจะช่วยให้พวกเขาเข้าใจว่าเกิดอะไรขึ้นและลดความสับสน วงล้อหมุน (loading spinners) แถบความคืบหน้า และการเปลี่ยนแปลง UI เล็กน้อยล้วนมีส่วนช่วยสร้างประสบการณ์ผู้ใช้ที่ดีขึ้น

แนวทางปฏิบัติที่ดีที่สุดและข้อควรพิจารณา

• การจัดการข้อผิดพลาด: นำการจัดการข้อผิดพลาดที่ครอบคลุมมาใช้เพื่อดักจับสถานการณ์ความล้มเหลวต่าง ๆ บันทึกข้อผิดพลาดเพื่อการดีบักและให้ข้อความแสดงข้อผิดพลาดที่เป็นมิตรต่อผู้ใช้ การทำให้เป็นสากล (i18n) และการปรับให้เข้ากับท้องถิ่น (l10n) เป็นสิ่งสำคัญสำหรับการเข้าถึงผู้ใช้ทั่วโลก
• ประสบการณ์ผู้ใช้ (UX): ให้ความสำคัญกับประสบการณ์ของผู้ใช้ การอัปเดตแบบ optimistic ควรให้ความรู้สึกราบรื่นและตอบสนองได้ดี ลดผลกระทบจากการ rollback โดยการให้ผลตอบรับที่ชัดเจนและลดการสูญเสียข้อมูลให้เหลือน้อยที่สุด
• การทำงานพร้อมกัน (Concurrency): จัดการการอัปเดตที่เกิดขึ้นพร้อมกันอย่างระมัดระวัง พิจารณาใช้คิวหรือเทคนิค debounce เพื่อป้องกันการอัปเดตที่ขัดแย้งกัน โดยเฉพาะอย่างยิ่งเมื่อต้องรับมือกับการใช้งานของผู้ใช้จำนวนมากจากสถานที่ทางภูมิศาสตร์ที่แตกต่างกัน
• การตรวจสอบความถูกต้องของข้อมูล: ดำเนินการตรวจสอบความถูกต้องฝั่งไคลเอนต์เพื่อตรวจจับข้อผิดพลาดตั้งแต่เนิ่น ๆ และลดการเรียก API ที่ไม่จำเป็น การตรวจสอบความถูกต้องฝั่งเซิร์ฟเวอร์ยังคงเป็นสิ่งจำเป็นสำหรับความสมบูรณ์ของข้อมูล
• ประสิทธิภาพ: เพิ่มประสิทธิภาพการอัปเดตแบบ optimistic ของคุณเพื่อให้แน่ใจว่ายังคงตอบสนองได้ดี โดยเฉพาะเมื่อต้องโต้ตอบกับชุดข้อมูลขนาดใหญ่
• การทดสอบ: ทดสอบการใช้งาน optimistic update ของคุณอย่างละเอียดเพื่อให้แน่ใจว่าการ rollback ทำงานได้อย่างถูกต้องและส่วนติดต่อผู้ใช้ทำงานตามที่คาดไว้ภายใต้สถานการณ์ต่าง ๆ เขียน unit tests, integration tests และ end-to-end (e2e) tests
• โครงสร้างการตอบกลับของเซิร์ฟเวอร์: ออกแบบ API ของเซิร์ฟเวอร์ของคุณเพื่อให้การตอบกลับที่เป็นประโยชน์ รวมถึงรหัสข้อผิดพลาด ข้อความแสดงข้อผิดพลาดโดยละเอียด และข้อมูลที่จำเป็นสำหรับการกระทบยอด

ตัวอย่างในโลกแห่งความเป็นจริงและความเกี่ยวข้องในระดับโลก

Optimistic updates พร้อมการ rollback มีคุณค่าในแอปพลิเคชันต่าง ๆ โดยเฉพาะอย่างยิ่งแอปพลิเคชันที่มีการโต้ตอบกับผู้ใช้และต้องพึ่งพาเครือข่าย นี่คือตัวอย่างบางส่วน:

• โซเชียลมีเดีย: การกดถูกใจโพสต์ การแสดงความคิดเห็น และการแชร์เนื้อหาสามารถทำได้แบบ optimistic เพื่อให้ผลตอบรับทันทีในขณะที่เซิร์ฟเวอร์กำลังประมวลผลการอัปเดต นี่เป็นสิ่งสำคัญสำหรับเครือข่ายโซเชียลที่ใช้กันทั่วโลก เช่น ในบราซิล ญี่ปุ่น และสหรัฐอเมริกา
• อีคอมเมิร์ซ: การเพิ่มสินค้าลงในตะกร้า การอัปเดตจำนวน และการสั่งซื้อสามารถปรับให้เหมาะสมเพื่อปรับปรุงประสบการณ์การช็อปปิ้งของผู้ใช้ นี่เป็นสิ่งสำคัญอย่างยิ่งสำหรับผู้ค้าปลีกทั่วยุโรป อเมริกาเหนือ และเอเชีย
• การจัดการโครงการ: การอัปเดตสถานะงาน การมอบหมายผู้ใช้ และการเพิ่มงานใหม่ในแอปพลิเคชันการจัดการโครงการสามารถใช้ประโยชน์จาก optimistic updates เพื่อปรับปรุงการตอบสนองของอินเทอร์เฟซ ฟังก์ชันนี้มีความสำคัญต่อทีมในภูมิภาคต่าง ๆ เช่น อินเดีย จีน และสหราชอาณาจักร
• เครื่องมือสำหรับการทำงานร่วมกัน: การแก้ไขเอกสาร การอัปเดตสเปรดชีต และการเปลี่ยนแปลงในพื้นที่ทำงานที่ใช้ร่วมกันจะได้รับประโยชน์จาก optimistic updates แอปพลิเคชันอย่าง Google Docs และ Microsoft Office 365 ใช้วิธีนี้อย่างกว้างขวาง ซึ่งเกี่ยวข้องกับบริษัทและทีมงานทั่วโลก

กลยุทธ์ useOptimistic ขั้นสูงร่วมกับไลบรารีการจัดการสถานะ

ในขณะที่หลักการหลักของ optimistic updates และ rollback ยังคงเหมือนเดิม การรวมเข้ากับไลบรารีการจัดการสถานะ เช่น Redux, Zustand หรือ Recoil สามารถให้แนวทางที่มีโครงสร้างและปรับขนาดได้มากขึ้นสำหรับการจัดการสถานะของแอปพลิเคชัน

Redux

ด้วย Redux, actions จะถูก dispatched เพื่ออัปเดตสถานะ และสามารถใช้ middleware เพื่อจัดการกับการดำเนินการแบบอะซิงโครนัสและความล้มเหลวที่อาจเกิดขึ้น คุณสามารถสร้าง middleware แบบกำหนดเองที่ดักจับ actions ที่เกี่ยวข้องกับ optimistic updates, เรียกใช้เซิร์ฟเวอร์, และ dispatch actions ที่เหมาะสมเพื่อยืนยันการอัปเดตหรือทริกเกอร์การ rollback รูปแบบนี้ช่วยอำนวยความสะดวกในการแยกส่วนของความรับผิดชอบ (separation of concerns) และความสามารถในการทดสอบ

            // Redux middleware example
const optimisticMiddleware = store => next => action => {
  if (action.type === 'ADD_COMMENT_OPTIMISTIC_REQUEST') {
    const { comment, optimisticId } = action.payload;
    const oldState = store.getState(); // Save the state for rollback

    // 1. Optimistically update the state using the reducer (or within the middleware)
    store.dispatch({ type: 'ADD_COMMENT_OPTIMISTIC_SUCCESS', payload: { comment, optimisticId }});

    // 2. Make the API call
    fetch('/api/comments', { method: 'POST', body: JSON.stringify(comment) })
      .then(response => response.json())
      .then(data => {
        // 3. If successful, update the ID (if necessary) and store the data
        store.dispatch({ type: 'ADD_COMMENT_SUCCESS', payload: { ...data, optimisticId }});
      })
      .catch(error => {
        // 4. Rollback on error
        store.dispatch({ type: 'ADD_COMMENT_FAILURE', payload: { optimisticId, oldState }});
      });

      return; // Prevent the action from reaching the reducers (handled by the middleware)
  }

  return next(action);
};

            

              
                Copy
              
            
          

Zustand and Recoil

Zustand และ Recoil นำเสนอวิธีการจัดการสถานะที่เบากว่าและมักจะง่ายกว่า คุณสามารถใช้ไลบรารีเหล่านี้ได้โดยตรงเพื่อจัดการสถานะ optimistic, ติดตามการดำเนินการที่รอดำเนินการ และจัดการการ rollback บ่อยครั้งที่โค้ดจะกระชับกว่าเมื่อเทียบกับ Redux แต่คุณยังคงต้องแน่ใจว่ามีการจัดการการดำเนินการแบบอะซิงโครนัสและสถานการณ์ข้อผิดพลาดอย่างเหมาะสม

สรุป

การนำ optimistic updates มาใช้พร้อมกับกลยุทธ์การ rollback ที่แข็งแกร่งช่วยยกระดับประสบการณ์ของผู้ใช้ในแอปพลิเคชัน React ได้อย่างมาก useOptimistic hook ช่วยให้กระบวนการจัดการการเปลี่ยนแปลงสถานะแบบ optimistic ง่ายขึ้นและเป็นวิธีที่มีประสิทธิภาพในการจัดการกับความล้มเหลวที่อาจเกิดขึ้น ด้วยความเข้าใจในความท้าทาย การใช้เทคนิคการ rollback ที่หลากหลาย และการปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุด นักพัฒนาสามารถสร้างแอปพลิเคชันที่ตอบสนองและเป็นมิตรกับผู้ใช้ ซึ่งให้การโต้ตอบที่ราบรื่นแม้ต้องเผชิญกับปัญหาเครือข่ายหรือฝั่งเซิร์ฟเวอร์ อย่าลืมให้ความสำคัญกับการสื่อสารที่ชัดเจน ผลตอบรับที่สอดคล้องกันต่อผู้ใช้ และการจัดการข้อผิดพลาดที่ครอบคลุมเพื่อสร้างแอปพลิเคชันที่แข็งแกร่งและน่าใช้งานสำหรับผู้ชมทั่วโลก

คู่มือนี้เป็นจุดเริ่มต้นสำหรับความเข้าใจและการนำ optimistic updates และกลยุทธ์การ rollback มาใช้ใน React ทดลองใช้วิธีการต่าง ๆ ปรับให้เข้ากับกรณีการใช้งานเฉพาะของคุณ และให้ความสำคัญกับประสบการณ์ของผู้ใช้เสมอ ความสามารถในการจัดการทั้งความสำเร็จและความล้มเหลวอย่างนุ่มนวลเป็นตัวสร้างความแตกต่างที่สำคัญในการสร้างเว็บแอปพลิเคชันคุณภาพสูง