Tính năng mới trong Chrome 77

Pete LePage

Chrome 77 hiện đang được triển khai!

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

Thời gian hiển thị nội dung lớn nhất

Hiểu và đo lường hiệu suất thực tế của trang web có thể không dễ dàng. Các chỉ số như load hoặc DOMContentLoaded không cho bạn biết người dùng đang nhìn thấy nội dung gì trên màn hình. Chỉ số Hiển thị đầu tiên và Hiển thị nội dung đầu tiên chỉ ghi lại phần đầu của trải nghiệm. Lần sơn có ý nghĩa đầu tiên tốt hơn, nhưng phức tạp và đôi khi không chính xác.

Largest Contentful Paint API (API Thời gian hiển thị nội dung lớn nhất) có trong Chrome 77 trở lên, báo cáo thời gian hiển thị của phần tử nội dung lớn nhất hiển thị trong khung nhìn và cho phép đo lường thời điểm tải nội dung chính của trang.

Để đo lường Thời gian hiển thị nội dung lớn nhất, bạn cần sử dụng Trình quan sát hiệu suất và tìm các sự kiện largest-contentful-paint.

let lcp;
const po = new PerformanceObserver((eList) => {
  const e = eList.getEntries();
  const last = e[e.length - 1];
  lcp = last.renderTime || last.loadTime;
});

const poOpts = {
  type: 'largest-contentful-paint',
  buffered: true
}
po.observe(poOpts);

Vì một trang thường tải theo từng giai đoạn, nên thành phần lớn nhất trên trang có thể thay đổi. Do đó, bạn chỉ nên báo cáo sự kiện largest-contentful-paint gần đây nhất cho dịch vụ phân tích của mình.

addEventListener('visibilitychange', function fn() {
  const visState = document.visibilityState;
  if (lcp && visState === 'hidden') {
    sendToAnalytics({'lcp': lcp});
    removeEventListener('visibilitychange', fn, true);
  }
}, true);

Phil có một bài đăng hay về Thời gian hiển thị nội dung lớn nhất trên web.dev.

Các tính năng mới của biểu mẫu

Nhiều nhà phát triển xây dựng các thành phần điều khiển biểu mẫu tuỳ chỉnh để tuỳ chỉnh giao diện của các thành phần hiện có hoặc để tạo các thành phần điều khiển mới không được tích hợp sẵn cho trình duyệt. Thông thường, việc này liên quan đến việc sử dụng JavaScript và các phần tử <input> ẩn, nhưng đây không phải là giải pháp hoàn hảo.

Hai tính năng web mới được thêm vào Chrome 77 giúp bạn dễ dàng tạo các thành phần điều khiển biểu mẫu tuỳ chỉnh và loại bỏ nhiều hạn chế hiện có.

Sự kiện formdata

Sự kiện formdata là một API cấp thấp cho phép mọi mã JavaScript tham gia vào việc gửi biểu mẫu. Để sử dụng tính năng này, hãy thêm trình nghe sự kiện formdata vào biểu mẫu mà bạn muốn tương tác.

const form = document.querySelector('form');
form.addEventListener('formdata', ({formData}) => {
  formData.append('my-input', myInputValue);
});

Khi người dùng nhấp vào nút gửi, biểu mẫu sẽ kích hoạt sự kiện formdata, bao gồm cả đối tượng FormData chứa tất cả dữ liệu đang được gửi. Sau đó, trong trình xử lý sự kiện formdata, bạn có thể cập nhật hoặc sửa đổi formdata trước khi gửi.

Phần tử tuỳ chỉnh liên kết với biểu mẫu

Các phần tử tuỳ chỉnh liên kết với biểu mẫu giúp thu hẹp khoảng cách giữa các phần tử tuỳ chỉnh và các chế độ kiểm soát gốc. Khi bạn thêm thuộc tính formAssociated tĩnh, trình duyệt sẽ biết cách xử lý phần tử tuỳ chỉnh này như mọi phần tử biểu mẫu khác. Bạn cũng nên thêm các thuộc tính phổ biến có trên các phần tử đầu vào, chẳng hạn như name, value và validity để đảm bảo tính nhất quán với các chế độ điều khiển gốc.

class MyCounter extends HTMLElement {
  static formAssociated = true;

  constructor() {
    super();
    this._internals = this.attachInternals();
    this._value = 0;
  }
  ...
}

Hãy xem bài viết Các thành phần điều khiển biểu mẫu có nhiều chức năng hơn trên web.dev để biết tất cả thông tin chi tiết!

Tải từng phần gốc

Tôi không biết mình đã bỏ lỡ tính năng tải lười gốc trong video gần đây nhất như thế nào! Điều này khá tuyệt vời, vì vậy tôi sẽ thêm tính năng này vào. Tải từng phần là một kỹ thuật cho phép bạn trì hoãn việc tải các tài nguyên không quan trọng, chẳng hạn như <img> hoặc <iframe> ngoài màn hình – cho đến khi cần thiết, giúp tăng hiệu suất của trang.

Kể từ Chrome 76, trình duyệt sẽ xử lý tính năng tải từng phần cho bạn mà không cần viết mã tải từng phần tuỳ chỉnh hay sử dụng một thư viện JavaScript riêng.

Để cho trình duyệt biết bạn muốn hình ảnh hoặc iframe được tải lười, hãy sử dụng thuộc tính loading="lazy". Hình ảnh và iframe "ở đầu trang" sẽ tải bình thường. Còn những URL bên dưới chỉ được tìm nạp khi người dùng cuộn gần chúng.

<img src="image.jpg" loading="lazy" width="400" height="250" alt="...">

Hãy xem bài viết Tải từng phần ở cấp trình duyệt cho web trên web.dev để biết thông tin chi tiết.

Chrome Dev Summit 2019

Hội nghị Chrome Dev sẽ diễn ra vào ngày 11 và 12 tháng 11.

Đây là cơ hội tuyệt vời để tìm hiểu về các công cụ và nội dung cập nhật mới nhất dành cho nền tảng web, đồng thời nghe trực tiếp từ nhóm kỹ sư của Chrome.

Hội nghị sẽ được phát trực tiếp trên kênh YouTube của chúng tôi. Nếu muốn tham dự trực tiếp, bạn có thể yêu cầu lời mời trên trang web Chrome Dev Summit 2019.

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

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

Contact Picker API (API Bộ chọn danh bạ) được cung cấp dưới dạng bản dùng thử theo nguyên gốc là một bộ chọn mới, theo yêu cầu cho phép người dùng chọn một hoặc nhiều mục trong danh bạ và chia sẻ thông tin chi tiết có giới hạn về các mục danh bạ đã chọn với một trang web.

Ngoài ra, còn có các đơn vị đo lường mới trong API intl.NumberFormat.

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

Bài viết 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 77.

Đă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à ngay sau khi Chrome 78 được phát hành, tôi sẽ có mặt ngay tại đây để cho bạn biết -- tính năng mới trong Chrome!