- การจัดการ 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 จะแสดงเป็นออบเจ็กต์ 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!
เมื่อเทียบกับรูปแบบออบเจ็กต์ CSS แบบเก่าแล้ว การเปรียบเทียบในช่วงแรกเริ่มมีการปรับปรุงการดำเนินการต่อวินาทีเพิ่มขึ้นประมาณ 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() จะแสดงคำสัญญาที่จะได้รับการแก้ไขหรือปฏิเสธ โดยขึ้นอยู่กับว่าข้อความที่เราส่งผ่านได้รับการคัดลอกสำเร็จหรือไม่
ในทำนองเดียวกัน คุณจะอ่านข้อความจากคลิปบอร์ดได้โดยโทรหา getText() และรอให้คำสัญญาที่ส่งคืนกลับมาแก้ไขปัญหาด้วยข้อความ
navigator.clipboard.getText()
.then((text) => {
console.log('Clipboard: ', text);
});
โปรดดูโพสต์และการสาธิตของจิรายุในโปรแกรมอธิบาย
เขายังมีตัวอย่างที่ใช้ฟังก์ชัน 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
และอีกมากมาย
ทั้งหมดนี้เป็นการเปลี่ยนแปลงเพียงบางส่วนใน Chrome 66 สำหรับนักพัฒนาซอฟต์แวร์ แน่นอนว่ามีอะไรอีกมากมาย
TextAreaและSelectรองรับแอตทริบิวต์autocompleteแล้ว- การตั้งค่า
autocapitalizeในองค์ประกอบformจะมีผลกับช่องแบบฟอร์มย่อยทั้งหมด ซึ่งช่วยให้เข้ากันได้กับการใช้งานautocapitalizeของ Safari - ตอนนี้
trimStart()และtrimEnd()เป็นวิธีมาตรฐานในการตัดการเว้นวรรคออกจากสตริงแล้ว
อย่าลืมดูฟีเจอร์ใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เพื่อดูว่ามีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome 66 และถ้าคุณสนใจเกี่ยวกับ Progressive Web App ลองดูซีรีส์วิดีโอ PWA Roadshow ใหม่ จากนั้นคลิกปุ่มติดตามในช่อง YouTube ของเรา และคุณจะได้รับการแจ้งเตือนทางอีเมลทุกครั้งที่เราเปิดตัววิดีโอใหม่
ฉันชื่อ Pete LePage และทันทีที่เปิดตัว Chrome 67 ผมจะมาแจ้งให้คุณทราบว่ามีอะไรใหม่ใน Chrome!