Thay thế CSS bằng JavaScript

Question

Tôi khá mới đối với lập trình phía máy khách đến từ môi trường PHP/MySQL. Tôi hiểu vai trò cả CSS và JavaScript có thể chơi trong môi trường trình duyệt, tuy nhiên, nó xuất hiện CSS là không thể phục hồi trì trệ mà không có JavaScript. Tôi không có nghĩa là muốn tạo ra một cuộc tranh luận nhưng đây là tình hình trông như thế nào đối với tôi, "người mới". Vậy tại sao không chỉ sử dụng JavaScript để đặt thuộc tính/thuộc tính phần tử? Và nếu vậy, đây có phải là một thực tế phổ biến? (Tôi chắc chắn CSS nhanh hơn nhiều ...)

Answer 1

Một số điểm chung:

CPU Chi phí

Chạy Javascript để áp dụng phong cách đến các yếu tố cá nhân sẽ cực kỳ chậm. Javascript là đồng bộ, do đó, nó sẽ phải cập nhật một kiểu tại một thời điểm. Ngoài ra, như đã đề cập ở nơi khác, việc đi qua DOM là tốn kém tính toán. Hơn thế nữa, nếu bạn áp dụng các kiểu vì bạn buộc trình duyệt phải kết xuất lại trang web mỗi khi bạn áp dụng thay đổi.

Chi phí Brain

Nó cũng tinh thần tốn kém để cố gắng viết và duy trì phong cách trong Javascript. Đó là một ngôn ngữ chức năng không bao giờ có ý định chứa các quy tắc của bố trí. CSS dễ đọc hơn rất nhiều.

Chúng Cascade!

CSS là viết tắt của Cascading Style Sheets. Một trong những phong cách lợi ích tuyệt vời có thể kế thừa các thuộc tính từ eachother. Hãy xem xét những điều sau:

a.nav { font-weight: bold; } 

Bây giờ tất cả các liên kết của bạn với một lớp "điều hướng" đều được in đậm. Nhưng nếu bạn muốn chỉnh sửa thêm một liên kết mà bạn vẫn sẽ có thể:

li a.nav { color: red; } 

Bây giờ tất cả các liên kết a.nav của bạn chứa trong một mục danh sách sẽ có màu đỏ và đậm. Nó có thể làm điều này là javascript, nhưng bạn phải ép buộc nó và bảo trì sẽ là khủng khiếp.

Nếu bạn sử dụng Javascript cho phong cách, đồng nghiệp của bạn sẽ đánh bại bạn đến chết!

Tôi nghĩ rằng điều này một loại nói cho chính nó

Answer 2

Css dành cho bố cục và kiểu trang.

Javascript là dành cho hành vi.

Thậm chí nếu có thể thay thế hoàn toàn css bằng javascript, nó không được coi là thực hành tiêu chuẩn và sẽ bị các nhà phát triển web cau mày nghiêm trọng.

Phát triển web tốt luôn giả định rằng khách hàng có thể đã tắt javascript và sẽ cung cấp cài đặt mặc định duyên dáng. Thay thế css bằng javascript có thể làm điều này là không thể.

Answer 3

Cách xa một thực tế phổ biến, trên thực tế, có thể nó sẽ được xem là thực hành không tốt!

CSS được sử dụng để đặt kiểu của trang và được hiển thị khi trang tải. Javascript xuất hiện sau khi tải trang và có thể thao tác các kiểu và trang hiện có.

Nếu bạn đặt nó vào tất cả JS, nó sẽ cực kỳ kém hiệu quả! Thao tác DOM tốn kém nếu bạn làm điều đó rất nhiều trong JS, và làm tất cả các kiểu trong javascript thay vì CSS sẽ là rất nhiều thao tác. Tải trên máy khách sẽ là vô lý và có lẽ sẽ có độ trễ đáng chú ý trong máy khách vì nó đã cố gắng thực hiện tất cả những thay đổi đó. Cộng với những gì sẽ xảy ra nếu một khách hàng đã tắt javascript? Có giao diện toàn bộ trang web của bạn.

Hãy suy nghĩ về CSS khi xác định giao diện trang và sẽ được hiển thị như thế nào, sau đó nghĩ JS là thay đổi trang đó sau khi hiển thị xong. Bạn không nên đẩy bất cứ điều gì vào một javascript mà bạn có thể làm với một phong cách CSS đơn giản lên phía trước.

Answer 4

Thời gian duy nhất bạn nên sử dụng JavaScript để đặt thuộc tính kiểu là khi bạn cần thay đổi kiểu khi chạy. Bạn nên thường xuyên sử dụng CSS để tạo kiểu tóc nếu có thể vì:

• CSS có xu hướng được thực hiện rất nhiều cách nhất quán hơn trên các trình duyệt hơn JS
• Một người sử dụng có thể có JS tàn tật
• Các "code" để làm phong trong CSS rất dễ đọc và dễ đọc/ghi hơn mã JS tương đương

Answer 5

Các vấn đề thực sự với việc thay đổi CSS cho javascript sẽ bảo trì và hiệu suất. CSS làm cho việc tạo kiểu dáng một yếu tố đơn giản và thay đổi nó rất đơn giản mà không ảnh hưởng đến phần còn lại của trang của bạn. Javascript sẽ trở nên cồng kềnh ở mức tốt nhất cho ngay cả một trang đơn giản và hoàn toàn không thể quản lý được cho một trang phức tạp hơn.

Về mặt hiệu suất, bất kỳ lúc nào javascript đang thực thi, trang của bạn sẽ "đóng băng". Xem xét một trang với 1000 yếu tố cần được đặt ra, thời gian thực hiện của bạn có thể dễ dàng phát triển đến một phút hoặc hơn, tùy thuộc vào độ phức tạp của bố cục. CSS sẽ xử lý điều này một cách tự nhiên và không có bất kỳ "đóng băng" nào của trình duyệt của bạn.Điều này sẽ khiến trang của bạn không sử dụng được trong khoảng thời gian đầu tiên mà một người truy cập và (theo thống kê) bạn chỉ có 10 giây để thu hút sự chú ý của người xem trước khi họ trở nên không quan tâm đến trang của bạn và rời đi, nghĩa là bạn lái xe tất cả khách truy cập mới của bạn.