ใหม่ใน Chrome 103

Pete LePage

สิ่งที่จำเป็นต้องทราบมีดังนี้

  • มีรหัสสถานะ HTTP 103 ใหม่ที่ช่วยให้เบราว์เซอร์เลือกเนื้อหาที่จะโหลดล่วงหน้าก่อนที่หน้าเว็บจะเริ่มมาถึง
  • Local Font Access API ช่วยให้เว็บแอปพลิเคชันแจกแจงและใช้แบบอักษรที่ติดตั้งในคอมพิวเตอร์ของผู้ใช้ได้
  • AbortSignal.timeout() คือวิธีติดตั้งใช้งานระยะหมดเวลาใน API แบบอะซิงโครนัสที่ง่ายขึ้น
  • นอกจากนี้ยังมีอื่นๆ อีกมากมาย

ฉันชื่อ Pete LePage มาเจาะลึกและ ดูว่ามีอะไรใหม่สำหรับนักพัฒนาซอฟต์แวร์ใน Chrome 103

รหัสสถานะ HTTP 103 103 - คำแนะนำเบื้องต้น

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

<link as="font" crossorigin="anonymous"
      href="..." rel="preload">
<link as="font" crossorigin="anonymous"
      href="..." rel="preload">
<link href="cdn.example.com"
      rel="preconnect">

แต่เบราว์เซอร์ไม่สามารถดำเนินการกับคำแนะนำเหล่านั้นได้จนกว่าเซิร์ฟเวอร์จะส่งบางส่วนของหน้าเป็นอย่างน้อย

ลองนึกภาพว่าเบราว์เซอร์ขอหน้าเว็บ แต่เซิร์ฟเวอร์ต้องใช้เวลา 2-3 มิลลิวินาทีในการสร้างหน้าเว็บ จนกว่าเบราว์เซอร์จะเริ่มได้รับหน้าเว็บ เพียงแค่นั้นและรอ แต่ถ้าเซิร์ฟเวอร์รู้ว่าหน้าเว็บต้องการชุดทรัพยากรย่อยบางอย่างเสมอ เช่น ไฟล์ CSS, JavaScript และรูปภาพอีก 2-3 รูป เซิร์ฟเวอร์สามารถตอบสนองด้วยรหัสสถานะคำแนะนำเบื้องต้นใหม่ของ HTTP 103 และขอให้เบราว์เซอร์โหลดทรัพยากรย่อยเหล่านั้นล่วงหน้า

จากนั้นเมื่อเซิร์ฟเวอร์สร้างหน้าแล้ว เซิร์ฟเวอร์จะส่งไปพร้อมกับการตอบกลับ HTTP 200 ปกติได้ เมื่อมีหน้าเข้ามา เบราว์เซอร์เริ่มโหลดทรัพยากรที่จำเป็นแล้ว

เนื่องจากเป็นรหัสสถานะ HTTP ใหม่ ระบบจึงต้องอัปเดตเซิร์ฟเวอร์ของคุณเพื่อใช้งานรหัสดังกล่าว

เริ่มต้นใช้งานด้วยคำแนะนำเบื้องต้นสำหรับ HTTP 103:

API การเข้าถึงแบบอักษรในเครื่อง

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

Local Font Access API ใหม่ช่วยให้เว็บแอปพลิเคชันแจกแจงแบบอักษรในเครื่องของผู้ใช้ได้ ทั้งยังให้สิทธิ์เข้าถึงข้อมูลตารางแบบอักษรได้อีกด้วย

หากต้องการดูรายการแบบอักษรที่ติดตั้งในอุปกรณ์ คุณต้องขอสิทธิ์ก่อน

// Ask for permission to use the API
try {
  const status = await navigator.permissions.request({
    name: 'local-fonts',
  });
  if (status.state !== 'granted') {
    throw new Error('No Permission.');
  }
} catch (err) {
  if (err.name !== 'TypeError') {
    throw err;
  }
}

จากนั้นโทรหา window.queryLocalFonts() โดยจะแสดงผลอาร์เรย์ของแบบอักษรทั้งหมด ที่ติดตั้งไว้ในอุปกรณ์ของผู้ใช้

const opts = {};
const pickedFonts = await self.queryLocalFonts();
for (const fontData of pickedFonts) {
  console.log(fontData.postscriptName);
  console.log(fontData.fullName);
  console.log(fontData.family);
  console.log(fontData.style);
}

หากคุณสนใจเฉพาะชุดย่อยของแบบอักษร คุณก็กรองแบบอักษรได้โดยเพิ่มพารามิเตอร์ postscriptNames

const opts = {
  postscriptNames: [
    'Verdana',
    'Verdana-Bold',
    'Verdana-Italic',
  ],
};
const pickedFonts = await self.queryLocalFonts(opts);

ดูรายละเอียดทั้งหมดในบทความใช้การพิมพ์ขั้นสูงกับแบบอักษรในเครื่องของ Tom ได้ที่ web.dev

ระยะหมดเวลาที่ง่ายขึ้นด้วย AbortSignal.timeout()

ใน JavaScript จะมีการใช้ AbortController และ AbortSignal เพื่อยกเลิกการเรียกแบบอะซิงโครนัส

ตัวอย่างเช่น เมื่อส่งคำขอ fetch() คุณสามารถสร้าง AbortSignal แล้วส่งไปยัง fetch() หากต้องการยกเลิก fetch() ก่อนที่จะส่งคืน ให้เรียกใช้ abort() บนอินสแตนซ์ของ AbortSignal ก่อนหน้านี้ หากคุณต้องการให้ล้มเลิกหลังจากผ่านไประยะหนึ่ง คุณต้องรวมไว้ใน setTimeout()

const controller = new AbortController();
const signal = controller.signal;
const resp = fetch(url, { signal });

setTimeout(() => {
  // abort the fetch after 6 seconds
  controller.abort();
}, 6000);

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

const signal = AbortSignal.timeout(6000);
const resp = fetch(url, { signal });

AbortSignal.timeout() รองรับใน Chrome 103 รวมถึงใน Firefox และ Safari อยู่แล้ว

และอีกมากมาย

แน่นอน ยังมีคำถามอีกมากมาย

  • ตอนนี้การแชร์เว็บแชร์รูปแบบไฟล์ภาพ avif ได้แล้ว
  • ตอนนี้ Chromium จับคู่ Firefox โดยให้ popstate เริ่มทำงานทันทีหลังจากที่เปลี่ยน URL ตอนนี้ลำดับของเหตุการณ์คือ popstate จากนั้นตามด้วย hashchange ในทั้ง 2 แพลตฟอร์ม
  • และ Element.isVisible() จะบอกคุณว่าองค์ประกอบหนึ่งๆ มองเห็นได้หรือไม่

อ่านเพิ่มเติม

ทั้งหมดนี้พูดถึงไฮไลต์สำคัญเพียงบางส่วน ไปที่ลิงก์ด้านล่างเพื่อดูวิธี การเปลี่ยนแปลงเพิ่มเติมใน Chrome 103

สมัครใช้บริการ

โปรดติดตามช่อง YouTube สำหรับนักพัฒนาซอฟต์แวร์ Chrome และคุณจะได้รับการแจ้งเตือนทางอีเมลทุกครั้งที่เราเปิดตัววิดีโอใหม่

ฉันชื่อ Pete LePage และทันทีที่เปิดตัว Chrome 104 ฉันจะมาบอกว่า มีอะไรใหม่ใน Chrome!