2013-04-29 44 views
9

Tôi đã thấy một vài trang tải các tệp javascript của họ vào một trang thông qua Image.src = '' mới;Tải xuống Thư viện Javascript dưới dạng hình ảnh?

<script type="text/javascript"> 
     new Image().src = "XXXX\/js\/jquery-1.7.2.min.js"; 
    </script> 

Tôi đã tự hỏi những lợi ích hoặc mục đích của việc này.

+1

được sử dụng để tải trước hình ảnh hoặc theo dõi nhấp chuột. –

+1

@DavorMlinaric Nhưng rõ ràng chúng không tải hình ảnh ở đây. Họ đang tải jQuery. Theo dõi lần nhấp? Có lẽ. –

+1

Bạn có thể đưa ra một liên kết đến một ví dụ thực tế không?Tôi đoán mục đích là để tải trước thư viện, do đó, một tìm nạp trong tương lai sẽ tải từ bộ nhớ cache (không có ý tưởng tại sao bạn đã bao giờ cần phải làm điều đó, mặc dù). – apsillers

Trả lời

7

Đó là cách nhanh chóng và dơ bẩn để bắt đầu yêu cầu HTTP (như các nhận xét về câu hỏi được đề xuất).

Có thể có một lợi thế nhỏ thu được bằng cách bắt đầu tải xuống ở đầu trang và sau đó bao gồm <script src='the-same-file.js'></script> ở cuối trang để tệp có thể được tải từ bộ nhớ cache của trình duyệt.

Điều này có thể cho phép độ trễ của tải xuống được song song với tác vụ phân tích cú pháp. Ví dụ: bản tải xuống được khởi tạo trong head có thể chạy trong khi body vẫn đang được phân tích cú pháp.

Tại sao không chỉ tham chiếu tệp trong phần đầu bằng thuộc tính src?

Nếu không có [các Hoãn hoặc async] thuộc tính là hiện tại, sau đó kịch bản được nạp và thực hiện ngay lập tức, trước khi user agent tiếp tục phân tích các trang .

Source (suggested reading)

Nói cách khác, phương pháp này cố gắng để cho phép trình duyệt để tải về các tập tin mà không phải gánh chịu những hành vi ngăn chặn cho đến khi sau này trong quá trình này.

Tuy nhiên

  • Nếu đây là thực sự cần thiết, tôi sẽ xem xét các defer thuộc tính mà là để dành cho các mục đích như vậy chứ không phải là new Image() hack.
  • "Tối ưu hóa" này có thể phản tác dụng phụ thuộc vào cache headers. Bạn có thể thực hiện hai yêu cầu HTTP hoặc thậm chí tải xuống tệp hai lần.

"Trong the Wild"

Một cuộc điều tra nhanh chóng của một số trang web lớn (tìm kiếm của Google, Gmail, Twitter, Facebook, Netflix) cho thấy kỹ thuật này không được sử dụng để lấy các file JavaScript và được sử dụng rất ít nói chung.

Ví dụ: Facebook dường như không sử dụng nó để lưu vào bộ nhớ đệm/hiệu suất nhưng cho mục đích theo dõi khi trang web (có khả năng độc hại) được tải vào bộ khung. Bằng cách tạo một cá thể Image và đặt nguồn, chúng bắt đầu yêu cầu HTTP đến trang theo dõi nỗ lực clickjacking.

Đây là trường hợp riêng biệt; trong hoàn cảnh bình thường, tập lệnh này sẽ không bao giờ được chạy.

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