2009-07-07 44 views
20

Tôi có câu hỏi dài hơn một chút cho bạn - nhưng câu trả lời hy vọng sẽ rất đơn giản :)Tại sao iframe lại chậm?

Giả sử tôi có trang rất đơn giản với liên kết và iframe (chỉ cho ví dụ đơn giản).

<body> 
    <a href="test.html" target="mframe">open link></a> 
    <iframe name="mframe" [params] /> 
</body> 

Vì vậy, khi bạn nhấp vào liên kết, nó sẽ tải test.html trong khung.

Bây giờ tôi sẽ thay đổi iframe bằng lệnh gọi div và ajax.

<body> 
    <a href="doAjaxCall('test.html')">open link</a> 
    <div id="main-content"></div> 
</body> 

Các doAjaxCall sẽ chỉ cần sử dụng GET ajax requset để có được toàn bộ phản ứng, phân tích nó (sử dụng JavaScript) và nội dung lấy trong cơ thể < > thẻ và đặt nó vào chính-content.innerHTML.

test.html chứa nhiều html, cũng kiểu css (nhưng giống như trên trang gốc - vì vậy tôi không cần chúng khi tôi đang sử dụng giải pháp ajax).

Câu hỏi:

Tại sao là giải pháp ajax này SO nhanh hơn? Tôi vẫn đang tải xuống cùng một lượng dữ liệu (tải xuống toàn bộ test.html).

Tại sao giải pháp iframe quá chậm? Có phải vì trình duyệt phải phân tích cú pháp tất cả các kiểu có thể một lần nữa không? Hoặc có bất kỳ chi phí nào khác của iframe không?

+0

Bạn có thấy hành vi tương tự trong nhiều trình duyệt không? – ChristianLinnell

+0

Thực ra ví dụ của tôi rất đơn giản. :) Trong thực tế, tôi đã thử giải pháp này trên một trang web lớn hơn, nơi chúng tôi đang sử dụng iframes ngay bây giờ. Tôi đã gỡ bỏ chúng và thay thế chúng bằng giải pháp ajax đó. Như tôi đã viết, tôi chỉ thay thế các liên kết bằng các cuộc gọi ajax, nhưng lưu lượng truy cập vẫn như cũ. Và có, nó chắc chắn nhanh hơn trong mọi trình duyệt (IE/FF/CH/SAF). Lý do duy nhất tôi có thể thấy bây giờ là trình duyệt không cần phải tải kiểu một lần nữa và một lần nữa chỉ cần thay thế innerHTML của 'nội dung chính' div. Cảm ơn! Pavol. – palig

+0

Nếu biểu định kiểu của bạn nằm trong tệp css chuyên dụng được gọi qua thẻ liên kết, thì trình duyệt sẽ tận dụng bộ nhớ đệm và chỉ tải nó một lần. btw Tôi tò mò xem iframe của bạn chậm hơn bao nhiêu - chúng ta đang nói mili giây, đúng không? – Christophe

Trả lời

22

Bạn đang đi đúng hướng. iframe sẽ chậm hơn vì có thêm chi phí cho trình duyệt (hiển thị nó, duy trì thể hiện và tham chiếu của nó).

Cuộc gọi ajax sẽ nhanh hơn một chút vì bạn lấy dữ liệu vào và sau đó bạn tiêm hoặc thực hiện bất kỳ điều gì bạn muốn với nó. Khung nội tuyến sẽ cần xây dựng một "trang" hoàn toàn mới trong bộ nhớ của trình duyệt, sau đó đặt nó vào trang.

+1

Wow, cảm ơn câu trả lời siêu âm nhanh :) Yêu SO! Tôi sẽ chờ đợi nếu có bất kỳ câu trả lời/ý kiến ​​khác. – palig

+4

6 năm sau, đây có phải là đánh giá chính xác không? – donohoe

+1

@donohoe vâng, vẫn còn tình trạng tương tự thậm chí 7 năm sau đó – kuzzmi

14

Steve Souders có một bài đăng Using Iframes Sparingly trên blog Hiệu suất cao của trang web có thể cung cấp một số thông tin chi tiết hơn.

+0

Tôi đã đánh dấu ở trên một là 'câu trả lời' nhưng điều này cũng rất hữu ích! Cảm ơn. – palig

0

Mặc dù các trình duyệt đã được cải thiện kể từ năm 2009, nhưng trình duyệt cần nhấn máy chủ bổ sung (giả sử iframe dành cho nội dung bên thứ ba) hoặc nhấn lại máy chủ cục bộ (giả sử iframe dành cho nội dung cục bộ), điều này sẽ vẫn ảnh hưởng đến hiệu suất trang. Nói chung, các yêu cầu HTTP bổ sung sẽ luôn có tác động đến hiệu suất của trang. Nếu có thể xây dựng iframe sau khi trang được tải và hiển thị nội dung iframe, điều này sẽ cải thiện tải trang ban đầu. Tuy nhiên, tôi nghĩ điều này sẽ ảnh hưởng đến hiệu suất của trang trong khi iframe tải nội dung bổ sung.

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