Polymer 1.0 dom-nếu vs ẩn

Question

Từ https://www.polymer-project.org/1.0/docs/api/dom-if

Khi nếu trở thành falsey, nội dung đóng dấu ẩn nhưng không khỏi dom. Khi nếu sau đó trở thành sự thật một lần nữa, nội dung chỉ đơn giản là được hiển thị lại. Cách tiếp cận này được sử dụng do đặc điểm hiệu suất thuận lợi của nó: chi phí tạo nội dung mẫu chỉ được trả một lần và lười biếng.

Tôi nghĩ đây là hành vi của hidden thuộc tính, do đó hidden là rẻ hơn so với dom-if kể từ khi mẫu sẽ không nhận được restamped với hidden. Vì 'no restamp' là hành vi mặc định dom-if, sự khác biệt giữa dom-if và hidden là gì và làm cách nào để hiệu suất tốt hơn cho hidden? Thực hành tốt nhất của Polymer ghi chú rằng hidden là rẻ hơn.

Answer 1

Sự hiểu biết của tôi về nó là dom-if không đóng dấu cho đến biểu thức trở nên trung thực, nhưng sau khi thực hiện nó hoạt động giống như [hidden]. Theo cách đó, dom-if là một bi quan [hidden] để ngăn chặn việc dán tem càng lâu càng tốt.

Cách tiếp cận tải chậm này thuận lợi trong một số trường hợp nhất định khi dán mẫu sẽ rất tốn nhiều tài nguyên. Ví dụ: nếu mẫu rất lớn với nhiều thành phần tùy chỉnh phải được khởi tạo. Nếu bạn vừa sử dụng thuộc tính hidden ở đó, bạn sẽ chỉ trả chi phí hiệu suất của việc tạo tất cả DOM đó để nó không hiển thị cho đến sau này. Đối với các trường hợp đơn giản, chẳng hạn như ẩn hoặc hiển thị một số văn bản, một hoặc hai, v.v ... thuộc tính hidden có thể nhanh hơn vì chi phí tạo các yếu tố đó và ẩn chúng có thể ít hơn việc tạo một thể hiện <template> để giữ mã của bạn, Polymer thiết lập trình lắng nghe để theo dõi biểu thức cho tính trung thực, sau đó, khi nó trở thành sự thật, tất cả chi phí để dán khuôn mẫu, phân tích cú pháp cho biểu thức ràng buộc, v.v. Điều này đặc biệt đúng đối với các trình duyệt nơi hỗ trợ <template> được làm đầy.

Suy nghĩ kỹ về tình huống của bạn (và lý tưởng là thử nghiệm nó) là tuyến đường tốt nhất để thực hiện. Thông thường, sự khác biệt có thể không đáng kể nhưng phải đặc biệt quan tâm nếu phần này của mã của bạn xảy ra ở một số dom-repeat với nhiều mục hoặc bất kỳ điều gì xảy ra thường xuyên. Sự khác biệt có thể tăng lên.

Answer 2

Ẩn ảnh hưởng đến thuộc tính CSS display và do đó dom-if là một tùy chọn tốt hơn.

Nếu bạn có

:host {display: block;} 

thiết hidden trên các yếu tố thành phần máy chủ sẽ không che giấu nó. Bạn cũng sẽ cần phải thêm một phong cách toàn cầu như

[hidden] { display: none !important;} 

để làm cho nó làm việc đáng tin cậy (và để làm cho nó làm việc trong IE9 mà không hỗ trợ hidden AFAIR).