Javascript hiệu quả để sửa đổi DOM

Giả sử, tôi có một tệp HTML mà tôi muốn xử lý bằng Javascript. Ví dụ:Javascript hiệu quả để sửa đổi DOM

Thêm một số thành phần DOM, như span hoặc div trình bao bọc.
Thay đổi kiểu dáng tài liệu một chút, như kích thước phông chữ cơ sở, chiều cao dòng, v.v.
Sử dụng dấu nối để thêm  thực thể.

Cách hiệu quả nhất để thực hiện việc này là gì, tức là tôi muốn làm điều đó với số lượng tối thiểu các bản chỉnh lại.

Trường hợp lý tưởng sẽ có mã JS chạy trước cả bố cục đầu tiên. Điều này có thể không? Tôi biết, thường là một ý tưởng tồi khi thực thi các tập lệnh đắt tiền trước khi trang được hiển thị cho điều này sẽ làm cho trang trông trống một thời gian và đó thực sự là một trải nghiệm tồi. Tuy nhiên, tôi sẽ cần điều này để làm việc ngoại tuyến và điều này sẽ không là một vấn đề cho dự án của tôi.

Hoặc, có cách nào để thực hiện tất cả các sửa đổi dom trong một nhóm, tức là một bản chỉnh sửa được kích hoạt sau khi tất cả các thay đổi đã kết thúc?

Nguồn

2012-07-07 Albus Dumbledore

Có một số cách. Mục tiêu chính với tất cả chúng là bạn kết thúc gây ra một đĩa đơn - hoặc ít nhất là ít nhất có thể - các bản vẽ/tô màu.

Off-DOM yếu tố

Bạn có thể làm việc với các yếu tố mà không phụ thêm vào DOM, và sau đó chỉ cần thêm tất cả mọi thứ lại với nhau một lần tất cả mọi thứ đã được thiết lập.

Vấn đề duy nhất với điều này là nếu mã của bạn cần tham chiếu kích thước bù đắp, vì các phần tử chưa có trong DOM không có bất kỳ.

var container = document.createElement('section'); //not in the DOM yet 
//do some extensive work here to prepare the doc 
document.body.appendChild(container); //now we go to the DOM, causing a single re-paint

Doc đoạn

Một chính thức hơn, và có thể được cải thiện, sự thay đổi về chủ đề này sẽ document fragments, mang lại một lợi ích hiệu suất (rõ ràng). Chúng thực sự là một DOM thứ hai, riêng biệt không có màn hình hiển thị.

Chuỗi

Có lẽ nhanh nhất của tất cả các sẽ được xây dựng tài liệu của bạn như là một chuỗi. Ý nghĩa rõ ràng là bạn không thể sử dụng các phương thức DOM trên nó, nhưng nếu bạn đang hạnh phúc xử lý chuỗi và REGEX'ing (không lý tưởng trên HTML, tất nhiên), có thể đáng xem xét.

Cuối cùng, nếu tốc độ là bản chất và bạn có rất nhiều tính toán hoặc xử lý chuỗi để làm, bạn có thể muốn khai thác công nhân web. Chúng không thể nói trực tiếp với DOM, nhưng bạn có thể thuê ngoài nhiệm vụ cho chúng và, quan trọng là chúng hoạt động không đồng bộ trên một chuỗi riêng biệt.

Nguồn

2012-07-07 10:46:09 Utkanos

Tôi tin rằng tùy thuộc vào trình duyệt để quyết định sau đó chỉnh lại nội dung. Và họ cố gắng không làm điều đó cho đến khi việc thực thi kịch bản kết thúc. Điều quan trọng cần lưu ý ở đây là khi bạn, ví dụ, gắn thêm div vào phần thân tài liệu, nó sẽ làm cho việc tính toán lại DOM. Và cho rằng bạn có thể sử dụng documentFragment để chắp thêm các phần tử và sau đó phân mảnh chính nó cho cơ thể. Mặc dù trong trường hợp của bạn, điều đó xảy ra là bạn cần phải nối thêm 1 phần tử vào các thùng chứa khác nhau, nó sẽ không giúp được gì nhiều.

Đọc thêm trên tài liệuPhân tích: http://ejohn.org/blog/dom-documentfragments/

Nguồn

2012-07-07 10:42:09

-1

Tôi nghĩ rằng u không thể làm việc trên các yếu tố kiểu hoặc DOM trước khi tải trang. Lần đầu tiên được tải, sau đó bạn bắt đầu chỉnh trang. Tôi sẽ tải trang ẩn tinh chỉnh nó và hiển thị. cách để che giấu:

mọi thứ tải bên ngoài màn hình X/Y tọa độ, sau đó u đặt nó vào 0,0
DIV mà dữ liệu trang nội dung có phong cách: Màn hình: Không có hoặc visibility: hidden http://www.w3schools.com/css/css_display_visibility.asp check vào đây để chi tiết.
Nó có thể là trang tải u bên trong khung nội tuyến 1 pixel, u làm chủ sở hữu trang mẹ có quyền kiểm soát trang con. Sau khi hoàn thành tinh chỉnh ur, thay đổi kích thước iframe, ẩn khung của nó.
Sử dụng chỉ mục Z và đặt fullsize không trong suốt màu trắng hoặc đen DIV ẩn tất cả mọi thứ dưới. Xóa nó khi u sẵn sàng

Chọn loại nào phù hợp hơn với phong cách của bạn.

Nguồn

2012-07-07 10:46:17

Thậm chí nếu điều này là một câu trả lời thực sự cũ tôi vẫn khuyên bạn nên KHÔNG liên kết đến w3schools.com vì điều này: http://www.w3fools.com/ :) –

Xóa documentElement khỏi document, sửa đổi và thêm lại vào document.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <title>...</title>   
    </head> 
    <body> 
     <script type='text/javascript'> 
var docElem = document.documentElement, 
    parentNode = docElem.parentNode, 
    nextSibling = docElem.nextSibling; 
parentNode.removeChild(docElem); // reflow 
// ... 
docElem.lastChild.appendChild(docElem.ownerDocument.createElement('hr')); 
// ... 
parentNode.insertBefore(docElem, nextSibling); // reflow 
     </script> 
    </body> 
</html>

Điều này kích hoạt hai lần lặp lại và không thêm hai lần sơn lại.

jsFiddle

Nguồn

2012-07-07 11:32:58 Saxoier

Javascript hiệu quả để sửa đổi DOM

Trả lời

Các vấn đề liên quan