Điểm mới trong Chrome 63

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 63!

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.

Nhập mô-đun động

Việc nhập mô-đun JavaScript rất tiện lợi, nhưng mô-đun này là tĩnh, bạn không thể nhập mô-đun dựa trên điều kiện thời gian chạy.

Rất may, điều đó đã thay đổi trong Chrome 63, với ngữ pháp nhập động mới. Thư viện này cho phép bạn tải mã động vào các mô-đun và tập lệnh trong thời gian chạy. Bạn chỉ có thể dùng công cụ này để tải từng phần một tập lệnh khi cần, nhằm cải thiện hiệu suất của ứng dụng.

button.addEventListener('click', event => {
  import('./dialogBox.js')
  .then(dialogBox => {
    dialogBox.open();
  })
  .catch(error => {
    /* Error handling */
  });
});

Thay vì tải toàn bộ ứng dụng khi người dùng truy cập vào trang của bạn lần đầu tiên, bạn có thể lấy các tài nguyên cần thiết để đăng nhập. Tải ban đầu của bạn nhỏ và nhanh. Sau đó, khi người dùng đăng nhập, hãy tải phần còn lại và bạn có thể bắt đầu sử dụng.

Trình tạo và trình lặp không đồng bộ

Việc viết mã thực hiện bất kỳ loại lặp nào với các hàm async có thể sẽ không đẹp mắt. Trên thực tế, đó là phần cốt lõi của câu hỏi lập trình mà tôi yêu thích nhất trong các cuộc phỏng vấn.

Giờ đây, với hàm tạo không đồng bộ và giao thức lặp lại không đồng bộ, việc sử dụng hoặc triển khai các nguồn dữ liệu truyền trực tuyến trở nên đơn giản và câu hỏi lập trình của tôi trở nên dễ dàng hơn nhiều.

async function* getChunkSizes(url) {
  const response = await fetch(url);
  const b = response.body;
  for await (const chunk of magic(b)) {
    yield chunk.length;
  }
}

Bạn có thể sử dụng trình duyệt tuần tự không đồng bộ trong vòng lặp for-of và cũng để tạo trình duyệt tuần tự không đồng bộ tuỳ chỉnh của riêng mình thông qua nhà máy trình duyệt tuần tự không đồng bộ.

Hành vi cuộn quá mức

Cuộn là một trong những cách cơ bản nhất để tương tác với trang, nhưng bạn có thể gặp khó khăn khi xử lý một số mẫu nhất định. Ví dụ: tính năng kéo để làm mới của trình duyệt, trong đó thao tác vuốt xuống ở đầu trang sẽ thực hiện một lượt tải lại hoàn toàn.

Trước khi làm mới toàn bộ trang.

Sau đó, chỉ làm mới nội dung.

Trong một số trường hợp, bạn có thể muốn ghi đè hành vi đó và cung cấp trải nghiệm của riêng mình. Đó là những gì ứng dụng web tiến bộ của Twitter làm, khi bạn kéo xuống, thay vì tải lại toàn bộ trang, ứng dụng này chỉ thêm mọi tweet mới vào chế độ xem hiện tại.

Chrome 63 hiện hỗ trợ thuộc tính CSS overscroll-behavior, giúp bạn dễ dàng ghi đè hành vi cuộn tràn mặc định của trình duyệt.

Bạn có thể dùng công cụ này để:

Điều tuyệt vời nhất là overscroll-behavior không ảnh hưởng tiêu cực đến hiệu suất trang!

Thay đổi về giao diện người dùng của quyền

Tôi thích thông báo đẩy trên web nhưng tôi thực sự thất vọng với số lượng trang web yêu cầu sự cho phép khi tải trang mà không có bất kỳ ngữ cảnh nào – và tôi không đơn độc.

90% yêu cầu cấp quyền bị bỏ qua hoặc tạm thời bị chặn.

Trong Chrome 59, chúng tôi bắt đầu giải quyết vấn đề này bằng cách tạm thời chặn một quyền nếu người dùng đóng yêu cầu ba lần. Giờ đây, trong phiên bản m63, Chrome dành cho Android sẽ tạo các hộp thoại phương thức yêu cầu cấp quyền.

Hãy nhớ rằng điều này không chỉ áp dụng cho thông báo đẩy mà còn áp dụng cho tất cả yêu cầu cấp quyền. Nếu bạn yêu cầu cấp quyền vào thời điểm thích hợp và theo ngữ cảnh, chúng tôi nhận thấy rằng người dùng có nhiều khả năng cấp quyền hơn gấp 2,5 lần!

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

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

  • finally hiện có trên các thực thể Promise và được gọi sau khi Promise được thực hiện hoặc bị từ chối.
  • API JavaScript của bộ nhớ thiết bị mới giúp bạn nắm được các hạn chế về hiệu suất bằng cách đưa ra gợi ý về tổng dung lượng RAM trên thiết bị của người dùng. Bạn có thể điều chỉnh trải nghiệm trong thời gian chạy, giảm độ phức tạp trên các thiết bị cấp thấp, mang lại cho người dùng trải nghiệm tốt hơn và ít bực bội hơn.
  • API Intl.PluralRules cho phép bạn tạo các ứng dụng hiểu được cách sử dụng số nhiều của một ngôn ngữ nhất định bằng cách cho biết dạng số nhiều nào áp dụng cho một số và ngôn ngữ nhất định. Và có thể giúp xử lý các số thứ tự.

Hãy nhớ đăng ký kênh YouTube của chúng tôi để nhận 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 64 đượ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!