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

Pete LePage

Chrome 77 hiện đã ra mắt!

Tôi là Pete LePage, hãy cùng tìm hiểu sâu hơn về những tính năng 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

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

API Nội dung lớn nhất hiển thị, có sẵn kể từ Chrome 77, báo cáo thời gian hiển thị phần tử nội dung lớn nhất hiển thị trong khung nhìn và giúp bạn có thể đo lường thời điểm nội dung chính của trang được tải.

Để đ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ì trang thường tải theo giai đoạn, nên có thể phần tử lớn nhất trên trang sẽ thay đổi. Vì vậy, 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 chức năng mới của biểu mẫu

Nhiều nhà phát triển tạo 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 vào trình duyệt. Thông thường, vấn đề này liên quan đến việc sử dụng JavaScript và các phần tử <input> ẩn, nhưng đó 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 chế độ đ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 quá trình gửi biểu mẫu. Để sử dụng lớp này, hãy thêm trình nghe sự kiện formdata vào biểu mẫu 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, trong đó 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ế độ điều khiển gốc. Khi bạn thêm thuộc tính formAssociated tĩnh, trình duyệt sẽ yêu cầu trình duyệt xem phần tử tuỳ chỉnh này như tất cả các 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 như name, value và validity để đảm bảo tính nhất quán với các chế độ kiểm soát gốc.

class MyCounter extends HTMLElement {
  static formAssociated = true;

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

Hãy tham khảo Các chế độ kiểm soát biểu mẫu phù hợp hơn trên web.dev để biết toàn bộ thông tin chi tiết!

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

Tôi không biết làm thế nào mình đã bỏ lỡ chế độ tải từng phần gốc trong video gần đây nhất! Đây là một tính năng khá tuyệt vời, nên tôi sẽ giới thiệu ngay bây giờ. 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> ngoài màn hình hoặc <iframe> cho đến khi cần đến các tài nguyên này, 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 phải viết mã tải từng phần tuỳ chỉnh hoặc sử dụng một thư viện JavaScript riêng.

Để cho trình duyệt biết rằng bạn muốn tải từng phần của hình ảnh hoặc iframe, hãy sử dụng thuộc tính loading="lazy". Hình ảnh và iframe "trong màn hình đầu tiên" sẽ tải bình thường. Còn các tệp ở 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.

Hội nghị Nhà phát triển Chrome năm 2019

Hội nghị Nhà phát triển Chrome sẽ diễn ra vào ngày 11 và 12 tháng 11.

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

Sự kiện này 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 gửi lời mời tại trang web Hội nghị Nhà phát triển Chrome 2019.

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

Đây chỉ là một vài thay đổi trong Chrome 77 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.

API Bộ chọn liên hệ (đượ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 giới hạn của các mục liên hệ đã chọn với một trang web.

Ngoài ra, 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ỉ bao gồm một số điểm nổi bật chính. Hãy truy cập vào các đường liên kết bên dưới để biết thêm những thay đổi khác trong Chrome 77.

Đăng ký

Nếu bạn muốn nắm bắt thông tin mới nhất về video, hãy đăng ký kênh YouTube dành cho Nhà phát triển Chrome 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 và ngay sau khi Chrome 78 đượ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!