Điểm mới trong Chrome 83

Pete LePage

Chrome 83 hiện đang bắt đầu được triển khai phiên bản ổn định.

Dưới đây là những gì bạn cần phải biết:

Tôi là Pete LePage, làm việc và quay video tại nhà. Hãy cùng tìm hiểu những điểm mới dành cho nhà phát triển trong Chrome 83!

Loại đáng tin cậy

Tập lệnh trên nhiều trang web dựa trên DOM là một trong những lỗ hổng bảo mật phổ biến nhất trên web. Bạn có thể vô tình đưa một tệp đó vào trang của mình. Các loại đáng tin cậy có thể giúp ngăn chặn những loại lỗ hổng này, vì các loại này yêu cầu bạn xử lý dữ liệu trước khi truyền dữ liệu đó vào một hàm có thể nguy hiểm.

Lấy ví dụ về innerHTML, khi bật các loại đáng tin cậy, nếu tôi cố gắng truyền một chuỗi, thì thao tác này sẽ không thành công với TypeError vì trình duyệt không biết liệu có thể tin tưởng chuỗi đó hay không.

// Trusted types turned on
const elem = document.getElementById('myDiv');
elem.innerHTML = `Hello, world!`;
// Will throw a TypeError

Thay vào đó, tôi cần sử dụng một hàm an toàn, chẳng hạn như textContent, truyền một loại đáng tin cậy hoặc tạo phần tử và sử dụng appendChild().

// Use a safe function
elem.textContent = ''; // OK

// Pass in a trusted type
import DOMPurify from 'dompurify';
const str = `Hello, world!`;
elem.innerHTML = DOMPurify.sanitize(str, {RETURN_TRUSTED_TYPE: true});

// Create an element
const img = document.createElement('img');
img.src = 'xyz.jpg';
elem.appendChild(img);

Trước khi bật các loại đáng tin cậy, bạn nên xác định và khắc phục mọi lỗi vi phạm bằng tiêu đề CSP report-only.

Content-Security-Policy-Report-Only: require-trusted-types-for 'script'; report-uri //example.com

Sau khi đã thiết lập xong mọi thứ, bạn có thể bật tính năng này đúng cách. Bạn có thể xem thông tin chi tiết đầy đủ trong bài viết Ngăn chặn lỗ hổng tập lệnh trên nhiều trang web dựa trên DOM bằng Loại đáng tin cậy trên web.dev.

Thông tin cập nhật về các thành phần điều khiển biểu mẫu

Chúng tôi sử dụng các thành phần điều khiển biểu mẫu HTML mỗi ngày và chúng đóng vai trò then chốt đối với nhiều khả năng tương tác của web. Các ứng dụng này dễ sử dụng, có tính năng hỗ trợ tiếp cận tích hợp sẵn và quen thuộc với người dùng. Kiểu của các thành phần điều khiển biểu mẫu có thể không nhất quán giữa các trình duyệt và hệ điều hành. Và chúng ta thường phải gửi một số quy tắc CSS chỉ để có giao diện nhất quán trên các thiết bị.

Trước đây, kiểu mặc định của các thành phần điều khiển biểu mẫu.
Sau đó, cập nhật kiểu của các thành phần điều khiển biểu mẫu.

Tôi thực sự ấn tượng với những gì Microsoft đang làm để hiện đại hoá giao diện của các thành phần điều khiển biểu mẫu. Ngoài kiểu hình ảnh đẹp hơn, các bản cập nhật này còn mang đến khả năng hỗ trợ cảm ứng tốt hơn và khả năng hỗ trợ tiếp cận tốt hơn, bao gồm cả khả năng hỗ trợ bàn phím tốt hơn!

Các thành phần điều khiển biểu mẫu mới đã ra mắt trong Microsoft Edge và hiện đã có trong Chrome 83. Để biết thêm thông tin, hãy xem bài viết Nội dung cập nhật về các thành phần điều khiển và tiêu điểm của biểu mẫu trên blog Chromium.

Bản dùng thử theo nguyên gốc

Đo lường bộ nhớ bằng measureMemory()

Kể từ khi bắt đầu thử nghiệm theo nguyên gốc trong Chrome 83, performance.measureMemory() là một API mới giúp bạn có thể đo lường mức sử dụng bộ nhớ của trang và phát hiện rò rỉ bộ nhớ.

Rò rỉ bộ nhớ rất dễ giới thiệu:

  • Quên huỷ đăng ký trình nghe sự kiện
  • Ghi lại đối tượng từ iframe
  • Không đóng worker
  • Tích luỹ đối tượng trong mảng
  • và cứ tiếp tục như vậy.

Rò rỉ bộ nhớ sẽ khiến các trang hiển thị chậm và cồng kềnh cho người dùng.

if (performance.measureMemory) {
  try {
    const result = await performance.measureMemory();
    console.log(result);
  } catch (err) {
    console.error(err);
  }
}

Hãy xem bài viết Theo dõi tổng mức sử dụng bộ nhớ của trang web bằng measureMemory() trên web.dev để biết tất cả thông tin chi tiết về API mới.

Nội dung cập nhật cho API Hệ thống tệp gốc

API Hệ thống tệp gốc đã bắt đầu một thử nghiệm mới về nguồn gốc trong Chrome 83 với tính năng hỗ trợ các luồng có thể ghi và khả năng lưu tay cầm tệp.

async function writeURLToFile(fileHandle, url) {
  // Create a FileSystemWritableFileStream to write to.
  const writable = await fileHandle.createWritable();
  // Make an HTTP request for the contents.
  const response = await fetch(url);
  // Stream the response into the file.
  await response.body.pipeTo(writable);
  // pipeTo() closes the destination pipe automatically.
}

Luồng có thể ghi giúp bạn dễ dàng ghi vào tệp hơn. Vì đây là một luồng nên bạn có thể dễ dàng chuyển các phản hồi từ luồng này sang luồng khác.

Việc lưu tay cầm tệp vào IndexedDB cho phép bạn lưu trữ trạng thái hoặc ghi nhớ những tệp mà người dùng đang xử lý. Ví dụ: giữ lại danh sách các tệp đã chỉnh sửa gần đây, mở tệp gần đây nhất mà người dùng đang xử lý, v.v.

Bạn sẽ cần một mã thông báo thử nghiệm gốc mới để sử dụng các tính năng này. Vì vậy, hãy xem bài viết mới của tôi API Hệ thống tệp gốc: Đơn giản hoá quyền truy cập vào tệp cục bộ trên web.dev với tất cả thông tin chi tiết và cách lấy mã thông báo thử nghiệm gốc mới.

Các thử nghiệm theo nguyên gốc khác

Hãy xem danh sách đầy đủ các tính năng trong bản dùng thử theo nguyên gốc.

Các chính sách mới trên nhiều nguồn gốc

Một số API web làm tăng nguy cơ bị tấn công kênh bên như Spectre. Để giảm thiểu rủi ro đó, trình duyệt cung cấp một môi trường tách biệt dựa trên lựa chọn sử dụng có tên là tách biệt nhiều nguồn gốc. Trạng thái tách biệt nhiều nguồn gốc cũng ngăn việc sửa đổi document.domain. Khả năng thay đổi document.domain cho phép giao tiếp giữa các tài liệu trên cùng một trang web và được coi là một lỗ hổng trong chính sách về cùng một nguồn gốc.

Hãy xem bài đăng của Eiji Cách tạo trang web "được tách biệt nhiều nguồn gốc" bằng cách sử dụng COOP và COEP để biết đầy đủ thông tin chi tiết.

Các chỉ số quan trọng về trang web

Việc đo lường chất lượng trải nghiệm người dùng có nhiều khía cạnh. Mặc dù từng trang web và ngữ cảnh có một số khía cạnh trong trải nghiệm người dùng riêng, nhưng có một nhóm tín hiệu chung – "Các chỉ số quan trọng về trang web" – đóng vai trò thiết yếu đối với mọi trải nghiệm trên web. Những nhu cầu cốt lõi về trải nghiệm người dùng như vậy bao gồm trải nghiệm tải, khả năng tương tác và độ ổn định về hình ảnh của nội dung trang, tổng cộng là nền tảng của Chỉ số quan trọng chính của trang web năm 2020.

Tất cả những chỉ số này đều ghi lại những kết quả quan trọng tập trung vào người dùng, có thể đo lường tại các trường và có các công cụ cũng như chỉ số chẩn đoán tương đương trong phòng thí nghiệm. Ví dụ: mặc dù Nội dung lớn nhất hiển thị là chỉ số tải nội dung hàng đầu, nhưng nó cũng phụ thuộc nhiều vào Nội dung hiển thị đầu tiên (FCP) và Thời gian để byte đầu tiên (TTFB). Các chỉ số này vẫn rất quan trọng để theo dõi và cải thiện.

Để tìm hiểu thêm, hãy xem bài viết Giới thiệu Các chỉ số quan trọng về trang web: các chỉ số cần thiết cho một trang web hoạt động tốt trên Blog Chromium để biết toàn bộ thông tin chi tiết.

Và các dữ liệu khác

Bạn muốn biết những tính năng sắp ra mắt? Hãy khám phá Công cụ theo dõi API Futu để biết!

Tài liệu đọc thêm

Nội dung này chỉ đề cập đến một số điểm nổi bật chính. Hãy xem các đường liên kết bên dưới để biết thêm các thay đổi trong Chrome 83.

Đăng ký

Nếu muốn cập nhật video của chúng tôi, hãy đăng ký kênh YouTube dành cho nhà phát triển Chrome. 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à tôi cần cắt tóc. Tuy nhiên, ngay khi Chrome 84 được phát hành, tôi sẽ quay lại đây để cho bạn biết những tính năng mới trong Chrome!