Thực tiễn tốt nhất - viết trước HTML trong tài liệu với màn hình: không, hoặc tạo bằng JS?

Question

Tôi đang phát triển một ứng dụng HTML5 có quy mô lớn và tôi thực sự thắc mắc về vấn đề này. Tôi sẽ có rất nhiều hộp thoại và tab sẽ mở bằng tương tác của người dùng. Tôi tự hỏi thực hành tốt nhất là gì - viết tất cả các hộp thoại và các tab trong tài liệu HTML với màn hình: không cho tất cả chúng hoặc tạo các phần HTML này khi đang chạy với JS hoặc jQuery mỗi khi người dùng thực hiện tương tác có liên quan.

Điều gì là tốt hơn về hiệu suất, dễ phát triển, dễ đọc, v.v ...?

Mọi trợ giúp sẽ được đánh giá cao.

Answer 1

Tôi sẽ cố gắng giải quyết câu hỏi này tốt nhất có thể.

1 - Như tôi đã nói trong nhận xét, Tránh tạo kiểu nội tuyến. Đầu tiên và quan trọng nhất là vì kiểu dáng nội tuyến làm hỏng DRY. Phải lặp lại điều tương tự cho điều này là rất xấu để bảo trì và phát triển vì thay vì thay đổi mã khi bạn phải thay đổi nó ở ~ 100 địa điểm.

2 - Tránh kiểu dáng nội tuyến cũng tốt cho khả năng truy cập, một số trình đọc màn hình và trình thu thập thông tin của công cụ tìm kiếm lập chỉ mục công việc và đọc công việc dựa trên bộ chọn css và do đó sử dụng tạo kiểu nội tuyến sẽ buộc họ bỏ qua hoặc hiểu sai.

3 - Khi làm việc với tư cách nhà phát triển, thật dễ dàng để tạo kiểu nội tuyến "chỉ vì niềm vui" nhưng những gì bạn đang thực sự làm là trộn lẫn các mối quan tâm. HTML là nội dung và CSS là thiết kế. Trộn hai thứ này thường dẫn đến đau đầu và làm công việc của tôi với tư cách là một nhà phát triển đến sau khi bạn đau đớn vì tôi không biết phong cách và cách thức.

Bây giờ, vào hiệu suất.

Khi bạn sử dụng kiểu nội tuyến, điều bạn đang nói với trình duyệt về cơ bản là "này, vì mỗi lần xem trang đều áp dụng các kiểu này cho tất cả các yếu tố này". Bây giờ, điều này chỉ trở nên thực sự rõ ràng tại sao điều này là xấu. Bạn không có khả năng lưu trữ và lưu trữ css của bạn và về cơ bản buộc trình duyệt phải định lại phong cách của bạn mọi lúc. Sử dụng một tệp CSS bên ngoài sẽ thực sự giúp bạn tăng tốc trang web của mình kể từ khi trình duyệt lưu trữ nó.

Đó là phần css.

javascript bạn đã hỏi.

Như tôi đã nói, hãy ẩn mọi thứ bằng css và hiển thị bằng javascript. Bây giờ tại sao bạn muốn làm điều này thay vì kéo tất cả mọi thứ vào? Vâng, bạn có thể làm cả hai. Nếu bạn chỉ là một kinh nghiệm webbrowser thì bạn có thể làm một trong hai, nó không quan trọng. Bản thân tôi thích có nội dung trong DOM vì nó liên quan đến nội dung và nếu bạn là một ứng dụng lớn có hàng chục cuộc gọi ajax sẽ chỉ làm cho việc bảo trì trở nên khó khăn hơn. Tôi tin rằng nếu bạn phải ajax công cụ trong chắc chắn rằng nó đếm và hợp lý và không chỉ cho các kicks (tôi nghĩ rằng điều này áp dụng nếu chỉ có bạn jQuery và đồng bằng javascript theo ý của bạn).

Nếu bạn đang làm việc với backbone.js, ví dụ, dựa trên lượt xem và giới thiệu một số dạng "MVC" vào giao diện người dùng cho phép bạn có chế độ xem với các bản xem trước có thể lấy nội dung từ máy chủ.

Hy vọng rằng sẽ giúp một chút khi đưa ra quyết định! :)

Answer 2

Tôi sẽ nói điều đó tùy thuộc vào số lượng tab mà ứng dụng của bạn có và mức độ lớn của các ứng dụng này.

• Nội dung lớn trong các tab có nghĩa là ứng dụng sẽ mất nhiều thời gian để tải khi khởi động và tiêu thụ nhiều ram. Nếu đây là trường hợp, tôi giả sử để tải chúng khi cần thiết.
• Nội dung nhỏ bên trong các tab sẽ tải nhanh, vì vậy hãy tải mọi thứ cùng một lúc để tăng hiệu suất khi các tab được nhấp.

Đừng quên chạy một số kiểm tra trên máy tính cũ có kết nối internet chậm để xem ứng dụng của bạn hoạt động như thế nào. Không phải ai cũng có phần cứng mới nhất và nhanh nhất.