Microsoft thêm tab Lớp tổng hợp trong công cụ Chế độ xem 3D

Microsoft gây bất ngờ cho các nhà phát triển web với một tính năng mới được đưa vào Công cụ xem 3D, là một phần của Công cụ phát triển (Dev Tools). Được công bố vào thứ Ba, tính năng được gọi là tab Lớp tổng hợp sẽ kết hợp với các công cụ khác của công cụ Chế độ xem 3D được sử dụng để giải quyết các vấn đề phát triển web thông thường, như thanh cuộn không cần thiết, vấn đề xếp chồng chỉ mục z và độ phức tạp của DOM.

Tính năng Lớp tổng hợp có nghĩa là phân chia trang web thành số lớp phù hợp. Microsoft cạnh Giám đốc sản phẩm cao cấp Patrick Brosset cho biết nó sẽ hữu ích khi các thành phần được hoạt hình hoặc thay đổi độc lập với phần còn lại. Có thể nhớ lại rằng Microsoft Edge DevTools trước đây đã có một công cụ Lớp riêng cung cấp cùng một chức năng. Tuy nhiên, công ty đã quyết định loại bỏ bảng điều khiển cho nó, dẫn đến việc nó được hợp nhất với công cụ 3D View.

Trong một bài đăng trên blog thông báo về sự xuất hiện của tính năng mới, Brosset cũng nêu chi tiết về tầm quan trọng của các lớp và cách chúng diễn ra cơ bản trên web bằng cách thảo luận về hoạt động của các công cụ kết xuất trình duyệt ở cấp độ cao. Theo ông, một công cụ trình duyệt tuân theo một loạt các bước để chuyển từ HTML và CSS sang pixel trên màn hình. Các quy trình này bao gồm phân tích cú pháp mã HTML và tạo cây DOM, phân tích cú pháp mã CSS và thu thập thông tin về kiểu và bố cục, tạo cấu trúc cây mới và tô trang lên màn hình.

“Trong bước cuối cùng này, bộ máy có thể quyết định vẽ trang một lần hoặc chia nó thành nhiều lớp, vẽ chúng riêng lẻ và sau đó tạo ra hình ảnh cuối cùng từ chúng,” Brosset lưu ý. “Có các thuộc tính CSS và các phần tử HTML cụ thể khiến engine quyết định tạo một lớp riêng biệt. Ví dụ: sử dụng thuộc tính biến đổi 3D hoặc thuộc tính thay đổi ý chí làm cho công cụ tạo các lớp. Bằng cách này, khi nội dung trong các lớp này thay đổi, công cụ chỉ phải sơn lại các lớp riêng lẻ này chứ không phải toàn bộ khung nhìn ”.

Nhấp vào tab Lớp tổng hợp sẽ hiển thị cho người dùng các lớp đã tạo, trong đó danh sách của họ được hiển thị trong thanh bên ở phía bên trái. Công cụ cũng sẽ đánh dấu những thứ trong cảnh 3D và việc nhấp vào các lớp sẽ cung cấp cho người dùng thông tin có giá trị về chúng, chẳng hạn như kích thước.

“Là một nhà phát triển web, có thể rất hữu ích khi biết liệu một phần của trang mà bạn định tạo hoạt ảnh có thực sự nằm trong lớp của chính nó hay không,” ông nói thêm. “Nếu đúng như vậy, thì bạn có thể chắc chắn rằng trong khi hoạt ảnh đang phát, phần còn lại của trang cũng không cần phải sơn lại. Nhưng điều quan trọng không kém là phải kiểm tra xem bạn có đang vô tình tạo quá nhiều lớp hay không, vì mỗi lớp cần bộ nhớ. "