- การจัดการ CSS ง่ายขึ้นด้วย CSS Typed Model Object ใหม่
- ตอนนี้การเข้าถึงคลิปบอร์ดเป็นแบบไม่พร้อมกัน
- มีบริบทการแสดงผลใหม่สำหรับองค์ประกอบ 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 ใหม่ ค่า 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
ตอนนี้เอฟเฟกต์ดังกล่าวแสดงผลได้อย่างมีประสิทธิภาพมากขึ้นและมีความกระตุกน้อยลงด้วยการทำงานแบบไม่พร้อมกันและหลีกเลี่ยงการซ้ำซ้อนของหน่วยความจำ
วิธีใช้
- เรียกใช้
createImageBitmap
และส่ง Blob รูปภาพเพื่อสร้างรูปภาพ - ดึงบริบท
bitmaprenderer
จากcanvas
- จากนั้นโอนรูปภาพเข้ามา
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