Điểm mới trong Chrome 66

Pete LePage

Và còn nhiều tính năng khác!

Tôi là Pete LePage. Hãy cùng tìm hiểu những tính năng mới dành cho nhà phát triển trong Chrome 66!

Bạn muốn xem danh sách đầy đủ các thay đổi? Hãy xem danh sách thay đổi về kho lưu trữ nguồn Chromium.

Mô hình đối tượng được nhập CSS

Nếu từng cập nhật thuộc tính CSS thông qua JavaScript, thì bạn đã sử dụng mô hình đối tượng CSS. Nhưng hàm này trả về mọi thứ dưới dạng một chuỗi.

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

Để tạo ảnh động cho thuộc tính opacity, tôi phải truyền chuỗi thành một số, sau đó tăng giá trị và áp dụng các thay đổi. Không hoàn toàn lý tưởng.

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

Với Mô hình đối tượng được nhập CSS mới, các giá trị CSS được hiển thị dưới dạng đối tượng JavaScript được nhập, loại bỏ nhiều thao tác đối tượng và cung cấp cách thức hợp lý hơn để xử lý CSS.

Thay vì sử dụng element.style, bạn truy cập vào các kiểu thông qua thuộc tính .attributeStyleMap hoặc .styleMap. Các hàm này trả về một đối tượng giống như bản đồ giúp bạn dễ dàng đọc hoặc cập nhật.

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

So với Mô hình đối tượng CSS cũ, các điểm chuẩn ban đầu cho thấy số lượng thao tác mỗi giây cải thiện khoảng 30% – một con số đặc biệt quan trọng đối với ảnh động JavaScript.

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

Lớp này cũng giúp loại bỏ các lỗi do quên truyền giá trị từ một chuỗi sang một số, đồng thời tự động xử lý việc làm tròn và kẹp các giá trị. Ngoài ra, còn có một số phương thức mới khá gọn gàng để xử lý các phép chuyển đổi đơn vị, số học và tính bằng nhau.

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

Eric có một bài đăng tuyệt vời với một số bản minh hoạ và ví dụ trong bài viết giải thích của anh.

API Bảng nhớ tạm không đồng bộ

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

Bạn có thể sử dụng document.execCommand để sao chép và dán đồng bộ các đoạn văn bản nhỏ, nhưng đối với mọi nội dung khác, có khả năng tính chất đồng bộ của thao tác này sẽ chặn trang, gây ra trải nghiệm kém cho người dùng. Ngoài ra, mô hình quyền giữa các trình duyệt không nhất quán.

Async Clipboard API mới là một API thay thế hoạt động không đồng bộ và tích hợp với API quyền để mang lại trải nghiệm tốt hơn cho người dùng.

Bạn có thể sao chép văn bản vào bảng nhớ tạm bằng cách gọi writeText().

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

Vì API này không đồng bộ, nên hàm writeText() sẽ trả về một Lời hứa sẽ được phân giải hoặc từ chối tuỳ thuộc vào việc văn bản mà chúng ta đã truyền có được sao chép thành công hay không.

Tương tự, bạn có thể đọc văn bản từ bảng nhớ tạm bằng cách gọi getText() và chờ Lời hứa được trả về để phân giải với văn bản.

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

Hãy xem bài đăng và bản minh hoạ của Jason trong phần giải thích. Anh cũng có các ví dụ sử dụng hàm async.

Bối cảnh Canvas mới BitmapRenderer

Phần tử canvas cho phép bạn thao tác với đồ hoạ ở cấp pixel, bạn có thể vẽ biểu đồ, thao tác với ảnh hoặc thậm chí xử lý video theo thời gian thực. Tuy nhiên, trừ phi bạn bắt đầu với một canvas trống, bạn cần có cách để kết xuất hình ảnh trên canvas.

Trước đây, điều đó có nghĩa là tạo một thẻ image, sau đó hiển thị nội dung của thẻ đó trên canvas. Rất tiếc, điều đó có nghĩa là trình duyệt cần lưu trữ nhiều bản sao của hình ảnh trong bộ nhớ.

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

Kể từ Chrome 66, có một ngữ cảnh kết xuất không đồng bộ mới giúp đơn giản hoá việc hiển thị các đối tượng ImageBitmap. Giờ đây, các thành phần hiển thị này kết xuất hiệu quả hơn và ít bị giật hơn bằng cách hoạt động không đồng bộ và tránh tình trạng trùng lặp bộ nhớ.

Cách sử dụng:

  1. Gọi createImageBitmap và chuyển cho lớp này một blob hình ảnh để tạo hình ảnh.
  2. Lấy ngữ cảnh bitmaprenderer từ canvas.
  3. Sau đó, hãy chuyển hình ảnh vào.
const image = await createImageBitmap(imageBlob);
const context = el.getContext('bitmaprenderer');
context.transferFromImageBitmap(image);

Xong, tôi đã kết xuất hình ảnh!

AudioWorklet

Worklet đã có! PaintWorklet được phân phối trong Chrome 65 và giờ đây, chúng tôi sẽ bật AudioWorklet theo mặc định trong Chrome 66. Bạn có thể dùng loại Worklet mới này để xử lý âm thanh trong luồng âm thanh chuyên dụng, thay thế ScriptProcessorNode cũ chạy trên luồng chính. Mỗi AudioWorklet chạy trong phạm vi toàn cục riêng, giảm độ trễ và tăng độ ổn định của thông lượng.

Có một số ví dụ thú vị về AudioWorklet trên Google Chrome Labs.

Và nhiều tính năng khác!

Tất nhiên, đây chỉ là một vài thay đổi trong Chrome 66 dành cho nhà phát triển, còn có rất nhiều thay đổi khác.

  • TextArea và Select hiện hỗ trợ thuộc tính autocomplete.
  • Việc đặt autocapitalize trên phần tử form sẽ áp dụng cho mọi trường biểu mẫu con, giúp cải thiện khả năng tương thích với việc triển khai autocapitalize của Safari.
  • trimStart() và trimEnd() hiện có sẵn dưới dạng cách cắt bớt khoảng trắng khỏi chuỗi dựa trên tiêu chuẩn.

Hãy nhớ xem bài viết Tính năng mới trong Chrome DevTools để tìm hiểu các tính năng mới trong DevTools của Chrome 66. Ngoài ra, nếu bạn quan tâm đến Ứng dụng web tiến bộ, hãy xem loạt video mới về PWA Roadshow. Sau đó, hãy nhấp vào nút đăng ký trên kênh YouTube của chúng tôi. Bạn sẽ nhận được thông báo qua email mỗi khi chúng tôi ra mắt video mới.

Tôi là Pete LePage. Ngay khi Chrome 67 được phát hành, tôi sẽ quay lại đây để giới thiệu cho bạn những tính năng mới trong Chrome!