Cache DOM ở Angular.JS

Question

Tôi đang sử dụng bộ định tuyến (đang sử dụng bộ định tuyến, hiện đang sử dụng ui-route nhưng các giải pháp cho cả hai đều tốt) trong Angular.JS để chuyển đổi giữa các cặp điều khiển/mẫu. Khi chuyển đổi qua lại giữa một vài trang này, phải mất đến một giây để thiết lập DOM mỗi lần có vẻ khủng khiếp. Có anyway có góc giữ quanh cây DOM thay vì tái tạo nó mỗi lần. Tôi đoán tôi muốn chỉ ẩn/gieo các bit cho mỗi trang thay vì xóa/tạo lại chúng mỗi lần.

Bất kỳ đề xuất nào đều được chào đón!

Answer 1

Bạn phải viết chỉ thị ng-view của riêng mình để tạo chức năng như vậy.

Ý tưởng cơ bản đằng sau nó là:

Trước những thay đổi tuyến đường, thay vì phá hủy các yếu tố xem hiện tại, và phạm vi, bạn chỉ cần đặt nó trong một DIV bộ nhớ cache ẩn danh, và xoá đăng ký thính phạm vi. Cung cấp cho phần tử thuộc tính dữ liệu với số $$route.templateUrl để có thể lấy lại thuộc tính đó. Sau đó, bạn tìm nạp chế độ xem tiếp theo từ máy chủ.

Trước khi thay đổi tuyến, bạn kiểm tra sự tồn tại của mục trong bộ nhớ cache và nếu nó nằm trong bộ nhớ cache của bạn, hãy lấy phần tử từ bộ nhớ cache, đăng ký lại người nghe và đặt chế độ xem bộ nhớ cache hiện tại.

Phần khó khăn là không làm lộn xộn $scope s. Vì vậy, bạn có thể cần một hàm tạo và hàm hủy trong số $scope cho sự kiện này và có thể cho cả người theo dõi $. Tôi không chắc. Tuy nhiên, thành thật mà nói, nếu bạn sử dụng bộ nhớ cache mẫu và vẫn mất 1 giây hoặc lâu hơn để hiển thị, thì bạn có thể có một số biểu thức không hiệu quả $watch hoặc một số lớn ng-repeat. Bạn nên xem xét một số refact.

Answer 2

Nếu bạn di chuyển đến Angular 1.1.5, bạn có thể sử dụng thuộc tính ng-animate trên thẻ ng-view của bạn.

Tôi không chắc chắn 100%, nhưng tôi nghĩ rằng nó thực hiện một số bộ nhớ đệm DOM để làm cho quá trình chuyển đổi hoạt động tốt hơn. Bạn có thể thử thêm thuộc tính ng-animate vào thẻ của mình. Điều đó có thể chăm sóc nó cho bạn.

Answer 3

Tôi đã tự nghiên cứu về điều này. Tôi đang làm việc trên phần cứng khá cũ trong một trình duyệt không được hỗ trợ. Kết xuất ban đầu là một vấn đề. Công việc đầu tiên của tôi là lưu vào bộ nhớ cache các mẫu được biên dịch trước, như bạn đang cố gắng. Tôi thấy rằng điều này chỉ cung cấp một cải thiện tốc độ tối thiểu.

Nút cổ chai thực sự đến từ chỉ thị ng-lặp lại của tôi, số lượng các bản sao lưu kết quả và số lượng nút/trình theo dõi DOM tôi đã xây dựng trong mỗi lần lặp lại.

Một số nguồn đã đề xuất tạo một chỉ thị tùy chỉnh giúp lắp ráp thủ công và nối nó theo một lần. Kết quả là rất ít reflow và không có người theo dõi. Nhược điểm là rất lớn. Không có nhiều niềm vui góc cạnh và rất nhiều công việc không cần thiết. Quan trọng hơn, không ai trong số này cung cấp một cải tiến tốc độ đủ lớn để biện minh cho công việc.

Cuối cùng tôi nhận thấy rằng cải thiện tốc độ tốt nhất đến từ việc tăng tốc phần cứng cho mỗi lần lặp lại ng-lặp lại. Như đã đề xuất ở trên, chỉ thị ng-animate trong các phiên bản mới hơn góc làm cho điều này tương đối tầm thường.

Bạn sẽ thấy hiển thị trang ngay lập tức, với các trục trặc chỉnh lại nhỏ. ng-cloak không giúp gì ở đây. Do yêu cầu hoạt ảnh, trang không được phép bị che khuất trong khi lặp lại hiển thị.Tuy nhiên, chúng có thể được kết hợp tốt với một chút thông minh thú vị. Tôi đang thực sự ẩn ng-lặp lại cho đến khi $ vị trí thay đổi, hiển thị một chỉ số tiến độ trong khi chờ đợi, và sau đó toggling ng-show của tôi. Điều này hoạt động thực sự độc đáo.

Có nói tất cả điều đó, biên dịch trước các mẫu của bạn nên được thực hiện như sau.

1) Khi ứng dụng của bạn bắt đầu, hãy tạo bộ nhớ cache mới cho chính bạn. Xem http://docs-angularjs-org-dev.appspot.com/api/ng. $ CacheFactory

2) Điền bộ nhớ cache này với được biên dịch mẫu. Tiêm $ biên dịch và gọi nó trên mỗi mẫu. Biên dịch trả về một hàm mà sau này bạn sẽ gọi dựa vào phạm vi của bạn. Khóa chức năng này trong bộ nhớ cache của bạn khi bạn thấy phù hợp.

3) Tạo chỉ thị tùy chỉnh chấp nhận khóa bộ nhớ cache làm thuộc tính. Bên trong chỉ thị này, truy vấn bộ đệm biên dịch của bạn cho hàm biên dịch chính xác. Gọi hàm này với phạm vi hiện tại của bạn và thêm DOM kết quả vào phần tử được chuyển vào chỉ thị.

4) Sorta win :).