Điểm mới trong Chrome 63

Pete LePage

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

Bạn muốn xem toàn bộ danh sách các thay đổi? Hãy xem danh sách thay đổi kho lưu trữ nguồn Chromium.

Nhập mô-đun linh động

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

Rất may, điều đó sẽ thay đổi trong Chrome 63, với cú pháp nhập động mới. Công cụ 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 tập lệnh này để tải từng phần một tập lệnh khi cần thiết, giúp 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à hiển thị nhanh. Sau đó, khi người dùng đăng nhập, tải phần còn lại và bạn đã sẵn sàng.

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

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

Giờ đây, nhờ async generator functions và giao thức lặp lại không đồng bộ, việc tiêu thụ hoặc triển khai các nguồn dữ liệu truyền trực tuyến trở nên đơn giản hơ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 các trình lặp không đồng bộ trong vòng lặp for-of, đồng thời để tạo các trình lặp không đồng bộ tuỳ chỉnh của riêng bạn thông qua các nhà máy lặp lại 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 một trang, nhưng một số mẫu nhất định cũng có thể rất khó xử lý. Ví dụ: các trình duyệt kéo để làm mới, trong đó việc vuốt xuống ở đầu trang sẽ thực hiện việc tải lại cứng.

Trước đó, với chế độ 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à lý do khiến ứng dụng web tiến bộ của Twitter hoạt động, khi bạn kéo xuống thay vì tải lại toàn bộ trang, ứng dụng chỉ đơn giản là thêm mọi bài đăng 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 mục bổ sung mặc định của trình duyệt.

Bạn có thể sử dụng dữ liệu 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 giao diện người dùng về quyền

Tôi thích thông báo đẩy trên web nhưng tôi thực sự cảm thấy khó chịu vì số lượng trang web yêu cầu cấp quyền khi tải trang mà không có bối cảnh nào – và tôi không đơn độc.

90% trong số tất cả yêu cầu cấp quyền sẽ 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 3 lần. Giờ đây, trong phiên bản m63, Chrome dành cho Android sẽ đưa ra các hộp thoại phương thức yêu cầu cấp quyền.

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

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

Đây chỉ là một vài trong số những thay đổi trong Chrome 63 dành cho nhà phát triển. Tất nhiê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.
  • Device Memory JavaScript API (API Bộ nhớ thiết bị JavaScript) mới giúp bạn nắm được các giới hạn 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 hơn, mang đến cho người dùng trải nghiệm tốt hơn và ít gặp sự cố hơn.
  • API Intl.PluralRules cho phép bạn xây dựng các ứng dụng hiểu được cách 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ể trợ giúp về số thứ tự.

Hãy nhớ đăng ký kênh YouTube của chúng tôi và bạn sẽ nhận được thông báo qua email bất cứ khi nào chúng tôi ra mắt video mới.

Tôi là Pete LePage và ngay sau khi Chrome 64 được phát hành, tôi sẽ sẵn sàng cho bạn biết -- những điểm mới trong Chrome!