ใหม่ใน Chrome 62

พีต เลอเพจ

นอกจากนี้ยังมีอีกมากมาย

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

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

ตัวบ่งชี้คุณภาพเครือข่าย

Network Information API มีให้ใช้งานใน Chrome มาระยะหนึ่งแล้ว แต่เป็นเพียงความเร็วของเครือข่ายในทางทฤษฎีเนื่องจากการเชื่อมต่อของผู้ใช้ สมมติว่าคุณเชื่อมต่อ Wi-Fi อยู่ แต่เชื่อมต่อกับ ฮอตสปอตเครือข่ายมือถือที่มีความเร็วเพียง 2G API จะรายงาน Wi-Fi!

console.log(navigator.connection.type);
> wifi

ใน Chrome 62 มีการขยาย API เพื่อให้เมตริกประสิทธิภาพของเครือข่ายจริงจากไคลเอ็นต์ เมื่อใช้สัญญาณคุณภาพของเครือข่ายเหล่านี้ คุณจะปรับแต่งเนื้อหา ให้เหมาะกับเครือข่ายได้ ตัวอย่างเช่น ในการเชื่อมต่อที่ช้ามาก คุณสามารถปรับปรุงประสิทธิภาพการโหลดหน้าเว็บโดยแสดงเวอร์ชันที่ลดลง

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

console.log(navigator.connection.effectiveType);
> 4G

สัญญาณเหล่านี้จะพร้อมใช้งานเป็นส่วนหัวของคำขอ HTTP และเปิดใช้ผ่านคำแนะนำของไคลเอ็นต์ด้วย โปรดดูตัวอย่างและดูspecสำหรับการเจาะลึกยิ่งขึ้น

แบบอักษรตัวแปร OpenType

แต่เดิมแบบอักษร 1 ชุดจะมีเพียงชุดแบบอักษรเดียว เช่น น้ำหนัก 1 ชุดหรือชุดแบบอักษร 1 ชุด หากต้องการแบบปกติ ตัวหนา และตัวเอียง คุณจะต้องรวมแบบอักษร 3 แบบแยกกัน ซึ่งจะทำให้หน้าเว็บมีน้ำหนักมากขึ้น

แบบอักษรตัวแปร OpenType เทียบเท่ากับแบบอักษรเดี่ยวหลายรายการที่สามารถจัดแพ็กเกจแบบกะทัดรัดภายในไฟล์แบบอักษรเดียว การปรับเปลี่ยน font-variation-settings คุณสมบัติ CSS, การยืด, รูปแบบ, น้ำหนัก และอื่นๆ ทำให้ปรับเปลี่ยนได้โดยง่าย ซึ่งทำให้รูปแบบการปรับแต่งไม่มีที่สิ้นสุด ตอนนี้แบบอักษรทั้ง 3 แบบสามารถรวมเข้าด้วยกันเป็นไฟล์เดียวที่มีขนาดกะทัดรัด

.heading {
  font-family: "Avenir Next Variable";
  font-size: 48px;
  font-variation-settings: 'wght' 700, 'wdth' 75;
}
.content {
  font-family: "Avenir Next Variable";
  font-size: 24px;
  font-variation-settings: 'wght' 400;
}

แบบอักษรตัวแปร OpenType มีเครื่องมือใหม่ที่มีประสิทธิภาพในการสร้างแบบอักษรที่ปรับเปลี่ยนตามอุปกรณ์ และลดน้ำหนักหน้าเว็บของเรา ดูรายละเอียดเพิ่มเติมได้ที่ ขอแนะนำแบบอักษรตัวแปร OpenType ของ John Hudson

การจับภาพสื่อจากองค์ประกอบ DOM

ตอนนี้คุณสามารถ จับภาพเนื้อหาสด ลงใน MediaStream ได้โดยตรงจาก HTMLMediaElements เช่น เสียงและวิดีโอด้วย Media Capture จาก DOM Elements API

หลังจากเรียกใช้ captureStream() ในองค์ประกอบสื่อ HTML แล้ว เนื้อหาที่สตรีมจะจัดการ ประมวลผล ส่งจากระยะไกล หรือบันทึกได้ ลองจินตนาการว่า คุณใช้เสียงจากเว็บเพื่อสร้างอีควอไลเซอร์หรือโวโค้ดของคุณเอง หรือสตรีมเนื้อหาไปยังเว็บไซต์ระยะไกลโดยใช้ WebRTC ทุกอย่างเป็นไปได้

ป้ายกำกับไม่ปลอดภัยสำหรับหน้า HTTP บางหน้า

ตามที่เราได้ประกาศไว้ก่อนหน้านี้ ตั้งแต่ใน Chrome 62 เป็นต้นไป เมื่อผู้ใช้ป้อนข้อมูลในหน้า HTTP Chrome จะทำเครื่องหมายหน้าเว็บว่า "ไม่ปลอดภัย" พร้อมป้ายกำกับในแถบที่อยู่ ป้ายกำกับนี้จะแสดงในโหมดไม่ระบุตัวตนของหน้า HTTP ทั้งหมดด้วย

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

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

จากนั้นติดตามช่อง YouTube ของเรา และคุณจะได้รับการแจ้งเตือนทางอีเมลทุกครั้งที่เราเปิดตัววิดีโอใหม่

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