Quy tắc CSS làm chậm tốc độ trình duyệt (hiển thị)

Question

Tôi đang tìm kiếm những sai lầm lớn nhất mà bạn có thể thực hiện trong mã CSS của mình; Các quy tắc CSS làm chậm tốc độ trình duyệt (hiển thị).

Ví dụ:

.myDraggables { 
    box-shadow: 0px 1px 2px #000 inset; 
    -moz-box-shadow: 0px 1px 2px #000 inset; 
    -webkit-box-shadow: 0px 1px 2px #000 inset; 

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#cdcdcd, endColorstr=#fff); 
    background: -webkit-gradient(linear, left top, left bottom, from(#cdcdcd), to(#fff)); 
    background: -moz-linear-gradient(top, #cdcdcd, #fff); 

    border-radius:5px 7px 1px 3px; 
    -moz-border-radius:5px 7px 1px 3px; 
    -webkit-border-radius:5px 7px 1px 3px; 
} 

Nếu bạn có 10 yếu tố có thể kéo (nhiều thẻ bên trong) với lớp học này, kéo sẽ rất chậm (giật). Vì vậy, không ai biết danh sách các quy tắc CSS mà bạn không nên sử dụng?

Answer 1

Một cách dễ thực hiện: sử dụng hình ảnh nhỏ (cho phép nói 5x5) làm lặp lại nền cho các khu vực lớn chậm khi nói đến hiển thị. Vì vậy, nên sử dụng hình ảnh lớn hơn cho các mẫu lặp lại (ví dụ: 50x50). Kích thước của một tập tin tăng lên một chút, nhưng hiệu suất là tốt hơn.

Answer 2

Tránh đường dài tức là

body div div ul li span a {} 

biểu Tránh css tức

background-color: expression((new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00"); 

Và bất cứ điều gì mà microsoft thực hiện tức là DX, vv

Answer 3

Gán thiết lập tràn đến các yếu tố làm chậm sự di chuyển trong điện thoại di động trình duyệt