Điểm mới trong Chrome 64

Pete LePage

  • Tính năng hỗ trợ ResizeObservers sẽ thông báo cho bạn khi hình chữ nhật nội dung của một phần tử thay đổi kích thước.
  • Giờ đây, các mô-đun có thể truy cập vào siêu dữ liệu cụ thể của máy chủ lưu trữ bằng import.meta.
  • Trình chặn cửa sổ bật lên hoạt động mạnh mẽ.
  • window.alert() không còn thay đổi tiêu điểm nữa.

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

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.

ResizeObserver

Việc theo dõi thời điểm kích thước của một phần tử thay đổi có thể hơi khó khăn. Rất có thể, bạn sẽ đính kèm trình nghe vào sự kiện resize của tài liệu, sau đó gọi getBoundingClientRect hoặc getComputedStyle. Tuy nhiên, cả hai đều có thể gây ra tình trạng bố cục bị rối loạn.

Còn nếu cửa sổ trình duyệt không thay đổi kích thước, nhưng một phần tử mới được thêm vào tài liệu thì sao? Hoặc bạn đã thêm display: none vào một phần tử? Cả hai đều có thể thay đổi kích thước của các phần tử khác trong trang.

ResizeObserver thông báo cho bạn bất cứ khi nào kích thước của một phần tử thay đổi và cung cấp chiều cao và chiều rộng mới của phần tử đó, giảm nguy cơ bố cục bị rối loạn.

Giống như các đối tượng tiếp nhận dữ liệu khác, việc sử dụng đối tượng này khá đơn giản, hãy tạo một đối tượng ResizeObserver và truyền lệnh gọi lại đến hàm khởi tạo. Lệnh gọi lại sẽ được cung cấp một mảng ResizeOberverEntries – một mục nhập cho mỗi phần tử được quan sát – chứa các phương diện mới cho phần tử đó.

const ro = new ResizeObserver( entries => {
  for (const entry of entries) {
    const cr = entry.contentRect;
    console.log('Element:', entry.target);
    console.log(`Element size: ${cr.width}px × ${cr.height}px`);
    console.log(`Element padding: ${cr.top}px ; ${cr.left}px`);
  }
});

// Observe one or multiple elements
ro.observe(someElement);

Hãy xem bài viết ResizeObserver: Giống như document.onresize cho các phần tử để biết thêm thông tin chi tiết và ví dụ thực tế.

Tôi ghét những kẻ ngớ ngẩn. Bạn đã biết, đó là khi một trang mở một cửa sổ bật lên đến một số đích đến VÀ điều hướng trang. Thông thường, một trong số đó là quảng cáo hoặc nội dung mà bạn không muốn.

Kể từ Chrome 64, những loại thao tác điều hướng này sẽ bị chặn và Chrome sẽ hiển thị một số giao diện người dùng gốc cho người dùng, cho phép họ làm theo lệnh chuyển hướng nếu họ muốn.

import.meta

Khi viết mô-đun JavaScript, bạn thường muốn truy cập vào siêu dữ liệu dành riêng cho máy chủ lưu trữ về mô-đun hiện tại. Chrome 64 hiện hỗ trợ thuộc tính import.meta trong các mô-đun và hiển thị URL cho mô-đun dưới dạng import.meta.url.

Điều này thực sự hữu ích khi bạn muốn phân giải các tài nguyên liên quan đến tệp mô-đun chứ không phải tài liệu HTML hiện tại.

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

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

  • Chrome hiện hỗ trợ phương thức thu thập có tên và các ký tự thoát thuộc tính Unicode trong biểu thức chính quy.
  • Giá trị preload mặc định cho các phần tử <audio> và <video> hiện là metadata. Điều này giúp Chrome phù hợp với các trình duyệt khác và giúp giảm băng thông cũng như mức sử dụng tài nguyên bằng cách chỉ tải siêu dữ liệu chứ không phải nội dung nghe nhìn.
  • Giờ đây, bạn có thể sử dụng Request.prototype.cache để xem chế độ bộ nhớ đệm của Request và xác định xem một yêu cầu có phải là yêu cầu tải lại hay không.
  • Giờ đây, khi sử dụng API Quản lý tiêu điểm, bạn có thể lấy tiêu điểm một phần tử mà không cần cuộn đến phần tử đó bằng thuộc tính preventScroll.

window.alert()

Và một câu trả lời nữa! Mặc dù đây không thực sự là một "tính năng dành cho nhà phát triển", nhưng tôi rất vui khi thấy điều này. window.alert() không còn đưa thẻ nền lên nền trước nữa! Thay vào đó, cảnh báo sẽ xuất hiện khi người dùng quay lại thẻ đó.

Không còn chuyển đổi thẻ ngẫu nhiên nữa vì có gì đó đã kích hoạt window.alert trên tôi. Tôi đang xem Lịch Google cũ của bạn.

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 65 đượ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!