Độc ứng dụng trang web liên quan đến

Question

Tình hình

Tôi prototyping một ứng dụng web nhiều trang, một số trong số họ có tải trọng Javascript nghiêm trọng. Tôi đã có ý tưởng (không phải rất độc đáo) về việc tải bố cục trang một lần và chỉ thay đổi nội dung bằng các yêu cầu ajax. Điều này có thể được thực hiện, và nó hoạt động tốt đẹp, nhưng tôi có một số mối quan tâm.

Trang web kiểm tra mọi yêu cầu nhận được và nếu đó là yêu cầu AJAX, nó chỉ trả lại nội dung (dưới dạng xem một phần MVC 4, nhưng đó không phải là điểm chính xác, điều này có thể được thực hiện ở bất kỳ đâu.) nó tải toàn bộ trang, với bố cục và mọi thứ. Ý tưởng là có thứ gì đó giống như cờ trạng thái cho mỗi gói javascript tôi đang tải xuống. Bố trí sẽ có tệp js khởi tạo, chứa logic hiển thị cơ bản của trang, cách lấy nội dung, v.v.

Tất cả các trang nội dung sẽ kiểm tra, nếu tập lệnh có liên quan của chúng được tải, nếu không, sau đó khởi tạo tải xuống và trong sự kiện thành công, hãy đặt cờ chính xác. Một số lỗi xử lý thêm là cần thiết, đối với trường hợp, khi cuộc gọi ajax không thành công vì một số lý do.

Các Câu hỏi (s)

Bây giờ mối quan tâm của tôi là, có khá nhiều JS trên một số "trang con". Vì tôi phải có khả năng làm việc trên các trình duyệt trên thiết bị di động (nên những thứ nặng nề nhất chỉ dành cho máy tính để bàn, nhưng chúng ta hãy quên rằng trong một phút), nó sẽ ảnh hưởng như thế nào đến hiệu suất, nếu tôi có một vài tập lệnh MB được tải bộ nhớ và "không bao giờ" dỡ chúng (vì trang không được tải lại). Ngoài ra, các kịch bản sẽ được lưu trữ, nếu tôi nhận được chúng thông qua hàm jQuery.getScript (...)? Hoặc tôi có nên tải các kịch bản theo cách khác không?

Cùng một câu hỏi cho nội dung. Nếu tôi xóa các phần tử DOM khỏi phần thân, hãy thay thế chúng bằng các phần tử khác, sau đó tải lại trang con ban đầu, nó sẽ làm gì với việc sử dụng bộ nhớ và hiệu năng trong một thời gian dài sử dụng?

Tôi thực sự muốn có một người có kinh nghiệm trong lĩnh vực này cho tôi một số hiểu biết về mối quan tâm của tôi, trước khi tôi làm cho bản thân mình hoàn toàn ngu ngốc với một mẫu thử nghiệm khái niệm vô dụng.

Cảm ơn trước!

EDIT: tiêu đề Thay đổi để thích hợp biểu hiện

EDIT 2: Ly câu hỏi là gì, và bối cảnh

Answer 1

Chúng tôi đã phát triển một ứng dụng tương tự một thời gian trước đây và chúng tôi quyết định cho ứng dụng đó để làm cho mỗi trang AJAX nặng một trang riêng biệt. Có khoảng. 6-8 trang và mỗi trang có trách nhiệm rất khác nhau, vì vậy bạn có thể nghĩ về điều này khi có từ 6 đến 8 ứng dụng trang độc lập.

Có hai phương pháp mà tôi có thể nghĩ ra, đối với trường hợp của bạn:

1. Nếu trang của bạn đang thực sự JavaScript nặng và mỗi người trong số họ đòi hỏi bộ rất khác nhau của kịch bản, hiệu suất mà bạn sẽ đạt được bằng cách không việc tải lại bố cục trang có thể bị mất bởi số lượng nội dung bạn sẽ tải mọi lúc.
   Đặc biệt đối với JavaScript được viết kém, nơi rác bắt đầu ăn bộ nhớ của bạn, không phải lúc nào cũng tải lại toàn bộ trang và sau đó lấy rác ra.
2. Nếu JavaScript được sử dụng bởi các trang khá giống nhau (hoặc; chỉ có những khác biệt nhỏ), tôi khuyên bạn nên nhóm từng tập lệnh của tất cả các trang thành một và tải tập lệnh được nhóm.
   Trong trường hợp này, bạn có thể gặp phải tình huống khi trang đầy đủ không bao giờ được tải lại, vì vậy hãy cố gắng viết js không làm rò rỉ bộ nhớ của bạn.

Nếu phía máy chủ của bạn có thể xử lý tiêu đề HTTP kiểm soát bộ nhớ cache đúng thì có, cho dù bạn tải tài nguyên cụ thể, bộ nhớ đệm sẽ hoạt động. Tuy nhiên, tôi khuyên bạn nên nhóm các tập lệnh của mình thành một tập lệnh và không bận tâm tải từng tập lệnh một.
Bằng cách đó, bạn sẽ lưu được một loạt các yêu cầu HTTP và vì trình duyệt sẽ lưu trữ bộ đệm kèm theo, bạn cũng sẽ tiết kiệm băng thông sau đó.

Về gắn/loại bỏ yếu tố từ DOM:
jQuery tự động bị loại bỏ tất cả các xử lý sự kiện và data() khi bạn sử dụng remove() hoặc empty(). Nó chỉ giữ lại chúng nếu bạn sử dụng detach().

Thông tin thêm về JavaScript và bộ nhớ tiêu thụ

Dưới đây là một số bài viết về các chủ đề đó là đáng đọc.

• http://nesj.net/blog/2012/04/javascript-memory-leaks/
• http://www.javascriptkit.com/javatutors/closuresleak/index.shtml
• http://www.ibm.com/developerworks/library/wa-jsmemory/index.html
• http://www.infoworld.com/d/application-development/brendan-eich-tells-how-prevent-javascript-memory-leaks-210974

Answer 2

Âm thanh như bạn đang cố gắng để xây dựng một SPA là gì!

Có một vài khuôn khổ/thư viện trên mạng được thiết kế để hỗ trợ việc xây dựng và thiết kế các ứng dụng như vậy, một do-no-phương tiện chưa đầy đủ danh sách trong số đó là:

• backbonejs - xem thêm backbone tutorials
• angularjs
• knockoutjs

Thông thường các ứng dụng sử dụng các khuôn khổ cũng sẽ sử dụng một số giống như requirejs để giúp mô đun hóa và chỉ tải các tài nguyên khi cần.

Có rất nhiều tùy chọn, nhưng tôi khuyên bạn nên thực hiện một số hướng dẫn và xem có hướng dẫn nào phù hợp với nhu cầu của bạn hay không - chúc bạn may mắn! :)

Ngoài ra còn có một số video hướng dẫn có liên quan về số nhiều, liên quan đến việc sử dụng chúng với .NET MVC 4 và API Web. Bạn cần một thành viên, nhưng tôi nghĩ rằng bạn có thể đăng ký dùng thử miễn phí -

Single Page Apps with HTML5, Web API, Knockout and jQuery

Building a Site with Bootstrap, AngularJS, ASP.NET, EF and Azure

Cập nhật:

Để giải quyết vấn đề hiệu suất của bạn - Có một số thông tin thú vị về hiệu suất bộ nhớ lược tả - Taming The Unicorn: Easing JavaScript Memory Profiling In Chrome DevTools đáng đọc nếu chỉ cho hình ảnh đầu tiên.

Bên cạnh đó, Writing Fast, Memory-Efficient JavaScript, có một số điểm tốt như về việc sử dụng bộ nhớ:

Để cung cấp cho các nhà sưu tập rác một cơ hội để thu thập càng nhiều đối tượng càng tốt càng sớm càng tốt, đừng giữ cho đối tượng bạn không còn cần nữa.

Cuối cùng, mặc dù xương sống cụ thể, Backbone.js And JavaScript Garbage Collection đưa ra một bản tóm tắt tốt của

ý tưởng cơ bản [mà] nên hữu ích cho những người muốn làm một công việc tốt hơn trong việc quản lý sử dụng bộ nhớ trong JavaScript.

nào trong tài liệu tham khảo lần lượt câu trả lời này: What does backbone.js do with models that are not used anymore