หน้านี้ได้รับการแปลโดย Cloud Translation API

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

Pete LePage

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

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

ฉันชื่อ 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 Typed Object Model ใหม่ ค่า CSS จะแสดงตามที่พิมพ์ ทำให้สามารถกำจัดการควบคุมประเภทต่างๆ ได้มากขึ้น และให้ วิธีที่เหมาะสมมากขึ้นในการทำงานร่วมกับ CSS

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

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

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

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

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

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 สิทธิ์ เพื่อมอบประสบการณ์การใช้งานที่ดียิ่งขึ้นให้แก่ผู้ใช้

คุณคัดลอกข้อความไปยังคลิปบอร์ดได้โดยโทรหา 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 รายการ ตอนนี้แสดงผลได้มากขึ้น มีประสิทธิภาพและกระตุกน้อยลงด้วยการทำงานแบบไม่พร้อมกันและหลีกเลี่ยงการใช้หน่วยความจำ ข้อมูลที่ซ้ำกัน

หากต้องการใช้งาน ให้ทำดังนี้

โทรหา createImageBitmap แล้วส่ง BLOB รูปภาพเพื่อสร้างรูปภาพ
ดึงบริบทbitmaprendererจากcanvas
จากนั้นโอนรูปภาพเข้า

const image = await createImageBitmap(imageBlob);
const context = el.getContext('bitmaprenderer');
context.transferFromImageBitmap(image);

เสร็จสิ้น ฉันแสดงรูปภาพแล้ว

AudioWorklet

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

มีตัวอย่างที่น่าสนใจของ AudioWorklet Google Chrome Labs

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

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

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

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

ผมชื่อ Pete LePage ทันทีที่เปิดตัว Chrome 67 ฉันก็จะงง มาแจ้งให้คุณทราบว่า มีอะไรใหม่ใน Chrome!