ฟีเจอร์ใหม่ใน Chrome 66

Pete LePage

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

และ Pete LePage จะเป็นผู้ดูแลคุณในวันนี้ มาเจาะลึกกันว่ามีอะไรใหม่สำหรับนักพัฒนาซอฟต์แวร์ใน Chrome 66

หากต้องการดูรายการการเปลี่ยนแปลงทั้งหมด ดูรายการการเปลี่ยนแปลงที่เก็บข้อมูลซอร์สโค้ด Chromium

แบบจำลองออบเจ็กต์ที่มีการจัดประเภทของ CSS

หากคุณเคยอัปเดตพร็อพเพอร์ตี้ CSS ผ่าน JavaScript แสดงว่าคุณใช้รูปแบบออบเจ็กต์ CSS แต่แสดงผลทุกอย่างเป็นสตริง

el.style.opacity = 0.3;
console.log(typeof el.style.opacity);
> 'string' // A string!?

หากต้องการทำให้พร็อพเพอร์ตี้ opacity เคลื่อนไหว ฉันจะต้องแคสต์สตริงเป็นตัวเลข จากนั้นเพิ่มค่าและนำการเปลี่ยนแปลงไปใช้ ก็ไม่ได้เหมาะเจาะมากนัก

function step(timestamp) {
  const currentOpacity = parseFloat(el.style.opacity);
  const newOpacity = currentOpacity + 0.01;
  element.style.opacity = newOpacity;
  if (newOpacity <= 1) {
    window.requestAnimationFrame(step);
  }
}

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

คุณเข้าถึงสไตล์ผ่านพร็อพเพอร์ตี้ .attributeStyleMap หรือ .styleMap แทนการใช้ element.style ซึ่งจะแสดงผลออบเจ็กต์ที่คล้ายแผนที่ที่อ่านหรืออัปเดตได้ง่าย

el.attributeStyleMap.set('opacity', 0.3);
const oType = typeof el.attributeStyleMap.get('opacity').value;
console.log(oType);
> 'number' // Yay!

เมื่อเทียบกับ Object Model ของ CSS แบบเก่า การเปรียบเทียบเบื้องต้นแสดงให้เห็นถึงการปรับปรุงการดำเนินการต่อวินาทีประมาณ 30% ซึ่งเป็นสิ่งสำคัญอย่างยิ่งสำหรับภาพเคลื่อนไหว JavaScript

el.attributeStyleMap.set('opacity', 0.3);
el.attributeStyleMap.has('opacity'); // true
el.attributeStyleMap.delete('opacity');
el.attributeStyleMap.clear(); // remove all styles

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

el.style.opacity = 3;
const opacity = el.computedStyleMap().get('opacity').value;
console.log(opacity);
> 1

Eric มีโพสต์ที่ยอดเยี่ยมพร้อมตัวอย่างและสาธิตหลายรายการในคำอธิบาย

Async Clipboard API

const successful = document.execCommand('copy');

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

Async Clipboard API ใหม่เป็น API ทดแทนที่ทำงานแบบไม่พร้อมกันและผสานรวมกับ Permission API เพื่อมอบประสบการณ์การใช้งานที่ดีขึ้นให้แก่ผู้ใช้

คัดลอกข้อความไปยังคลิปบอร์ดได้โดยเรียกใช้ writeText()

navigator.clipboard.writeText('Copy me!')
  .then(() => {
    console.log('Text is on the clipboard.');
  });

เนื่องจาก API นี้เป็นแบบไม่พร้อมกัน ฟังก์ชัน writeText() จึงแสดงผล Promise ที่จะถูกแก้ไขหรือปฏิเสธ ทั้งนี้ขึ้นอยู่กับว่าระบบคัดลอกข้อความที่เราส่งไปได้สําเร็จหรือไม่

ในทำนองเดียวกัน คุณสามารถอ่านข้อความจากคลิปบอร์ดได้โดยเรียกใช้ getText() และรอให้ Promise ที่แสดงผลแสดงผลข้อความ

navigator.clipboard.getText()
  .then((text) => {
    console.log('Clipboard: ', text);
  });

ดูโพสต์และเดโมของ Jason ในคำอธิบาย นอกจากนี้ เขายังมีตัวอย่างที่ใช้ฟังก์ชัน async ด้วย

บริบท Canvas ใหม่ BitmapRenderer

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

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

const context = el.getContext('2d');
const img = new Image();
img.onload = function () {
  context.drawImage(img, 0, 0);
}
img.src = 'llama.png';

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

วิธีใช้

  1. เรียกใช้ createImageBitmap และส่ง Blob รูปภาพเพื่อสร้างรูปภาพ
  2. ดึงบริบท bitmaprenderer จาก canvas
  3. จากนั้นโอนรูปภาพเข้ามา
const image = await createImageBitmap(imageBlob);
const context = el.getContext('bitmaprenderer');
context.transferFromImageBitmap(image);

เสร็จแล้ว เราแสดงผลรูปภาพแล้ว

AudioWorklet

เวิร์กเลตพร้อมใช้งานแล้ว PaintWorklet พร้อมใช้งานใน Chrome 65 และตอนนี้เรากำลังเปิดใช้ AudioWorklet โดยค่าเริ่มต้นใน Chrome 66 เวิร์กเลตประเภทใหม่นี้สามารถใช้ประมวลผลเสียงในเธรดเสียงเฉพาะแทน ScriptProcessorNode เดิมซึ่งทำงานในเธรดหลัก AudioWorklet แต่ละรายการจะทำงานในสโกปส่วนกลางของตัวเอง ซึ่งจะช่วยลดเวลาในการตอบสนองและเพิ่มความเสถียรของอัตราการรับส่งข้อมูล

ดูตัวอย่างที่น่าสนใจของ AudioWorklet ได้ที่ Google Chrome Labs

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

การเปลี่ยนแปลงเหล่านี้เป็นเพียงส่วนหนึ่งของการเปลี่ยนแปลงใน Chrome 66 สําหรับนักพัฒนาซอฟต์แวร์เท่านั้น ยังมีการเปลี่ยนแปลงอีกมากมาย

  • ตอนนี้ TextArea และ Select รองรับแอตทริบิวต์ autocomplete แล้ว
  • การตั้งค่า autocapitalize ในองค์ประกอบ form จะมีผลกับช่องแบบฟอร์มย่อยทั้งหมด ซึ่งจะช่วยเพิ่มความเข้ากันได้กับการใช้งาน autocapitalize ของ Safari
  • ตอนนี้ trimStart() และ trimEnd() พร้อมใช้งานแล้วสำหรับการตัดช่องว่างออกจากสตริงตามมาตรฐาน

อย่าลืมดูสิ่งใหม่ๆ ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เพื่อดูข้อมูลเกี่ยวกับฟีเจอร์ใหม่ๆ ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome 66 และหากสนใจ Progressive Web App โปรดดูชุดวิดีโอ Roadshow ของ PWA ใหม่ จากนั้นคลิกปุ่มติดตามในช่อง YouTube แล้วคุณจะได้รับอีเมลแจ้งเตือนทุกครั้งที่เราเปิดตัววิดีโอใหม่

ผมชื่อ Pete LePage และทันทีที่ Chrome 67 เปิดตัว เราจะมาบอกคุณถึงสิ่งใหม่ๆ ใน Chrome