Điểm mới trong Chrome 66

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

Tôi là Pete LePage. Hãy cùng tìm hiểu sâu hơn và xem có gì 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 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 một thuộc tính CSS thông qua JavaScript, tức là 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 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 của mình. Chưa lý tưởng lắm.

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 đã nhập, loại bỏ nhiều thao tác đối với loại và mang lại cách làm việc hợp lý hơn với CSS.

Thay vì dùng element.style, bạn có thể truy cập vào các kiểu thông qua thuộc tính .attributeStyleMap hoặc .styleMap. Phương thức này trả về một đối tượng giống 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 mức cải thiện khoảng 30% về hoạt động mỗi giây – một điều đặ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

API 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ó 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à bằng.

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

Eric có một bài đăng rất hay, trong đó có nhiều minh hoạ và ví dụ trong phần 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ể sao chép và dán đồng bộ bằng cách sử dụng document.execCommand đối với các bit văn bản nhỏ, nhưng đối với trường hợp khác, rất có thể tính chất đồng bộ của tính năng này sẽ chặn trang và gây ra trải nghiệm không tốt cho người dùng. Và mô hình quyền giữa các trình duyệt không nhất quán.

API bảng nhớ tạm Async mới là một giải pháp 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() trả về một Lời hứa sẽ được giải quyết hoặc bị từ chối tuỳ thuộc vào việc văn bản 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à đợi Promise được trả về giải quyết bằng 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 ấy cũng có các ví dụ sử dụng hàm async.

Ngữ cảnh Canvas mới BitmapRenderer

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

Trước đây, bạn cần tạo một thẻ image, sau đó hiển thị nội dung của thẻ đó vào 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, một ngữ cảnh hiển thị 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 API này hiển thị 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à giao cho nó 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

Đã có Worklet! PaintWorklet được phát hành trong Chrome 65 và hiện chúng tôi đang 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ế cho ScriptProcessorNode cũ chạy trên luồng chính. Mỗi AudioWorklet chạy trong phạm vi toàn cầu riêng, giúp giảm độ trễ và tăng độ ổn định công suất.

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

Và nhiều kiến thức khác!

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

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

Hãy nhớ xem phần Mới trong Công cụ của Chrome cho nhà phát triển để tìm hiểu các tính năng mới dành cho Công cụ cho nhà phát triển trong Chrome 66. Ngoài ra, nếu bạn quan tâm đến Ứng dụng web tiến bộ, hãy xem chuỗi video về PWA Roadshow mới. Sau đó, hãy nhấp vào nút đăng ký trên kênh YouTube của chúng tôi và 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 và ngay sau khi Chrome 67 được phát hành, tôi sẽ có mặt ngay để cho bạn biết -- Chrome có tính năng gì mới!