Tải xuống javascript mà không bị chặn

Question

Ngữ cảnh: Câu hỏi của tôi liên quan đến việc cải thiện hiệu suất tải trang web và đặc biệt hiệu ứng mà javascript có khi tải trang (tài nguyên/phần tử bên dưới tập lệnh bị chặn tải xuống/hiển thị).

Sự cố này thường tránh được/giảm nhẹ bằng cách đặt tập lệnh ở dưới cùng (ví dụ: ngay trước thẻ).

Mã tôi đang xem là dành cho phân tích trang web. Đặt nó ở phía dưới làm giảm độ chính xác của nó; và bởi vì tập lệnh này không ảnh hưởng đến nội dung của trang, tức là nó không viết lại bất kỳ phần nào của trang - tôi muốn di chuyển nó trong đầu. Chỉ cần làm thế nào để làm điều đó mà không làm hỏng hiệu suất tải trang là mấu chốt.

Từ nghiên cứu của tôi, tôi đã tìm thấy sáu kỹ thuật (w/sự ủng hộ của tất cả hoặc hầu hết các trình duyệt chính) để tải về các kịch bản để họ không chặn nội dung xuống trang từ tải/rendering:

(i) XHR + eval();

(ii) XHR + inject;

(iii) tải xuống tập lệnh được bao bọc HTML như trong iFrame;

(iv) đặt thẻ script cờ async thành TRUE (chỉ HTML 5);

(v) đặt thuộc tính trì hoãn thuộc tính của thẻ tập lệnh; và

(vi) 'Phần tử DOM tập lệnh'.

Đó là điều cuối cùng tôi không hiểu. JavaScript để triển khai mẫu (vi) là:

(function() { 
    var q1 = document.createElement('script'); 
    q1.src = 'http://www.my_site.com/q1.js' 
    document.documentElement.firstChild.appendChild(q1) 
})(); 

Có vẻ đơn giản: và chức năng ẩn danh được tạo sau đó được thực hiện trong cùng một khối. Bên trong chức năng ẩn danh này:

• một yếu tố kịch bản được tạo ra

• src yếu tố của nó được thiết lập để nó vị trí, sau đó

• yếu tố kịch bản được thêm vào DOM

Nhưng trong khi mỗi dòng là rõ ràng, nó vẫn không rõ ràng với tôi cách exac mô hình này cho phép tải tập lệnh mà không chặn các phần tử/tài nguyên của trang xuống từ hiển thị/tải?

Answer 1

Một lưu ý đầu tiên:

(iv) thiết lập 'async' cờ thẻ script để 'TRUE' (HTML 5 chỉ);

async là "thuộc tính boolean", theo nghĩa HTML. Điều đó có nghĩa rằng một trong những điều sau đây là đúng:

<script async src="..."></script> 
<script async="" src="..."></script> 
<script async="async" src="..."></script> 

Và đó cả những điều sau đây làm cho kịch bản được tải không đồng bộ, nhưng không phù hợp (vì sự nhầm lẫn có thể):

<script async="true" src="..."></script> 
<script async="false" src="..."></script> 

---

Bây giờ, về câu hỏi của bạn. Vấn đề là nó là trình phân tích cú pháp HTML HTML đang bị chặn bởi tập lệnh (vì mọi người làm những việc ngu ngốc như document.write("<!--"), ngay cả từ các tệp JS bên ngoài và mong đợi nó "hoạt động"). Tuy nhiên, trong trường hợp của bạn (vi), trình phân tích cú pháp HTML không bao giờ thấy yếu tố tập lệnh, bởi vì nó được thêm trực tiếp vào DOM. Một cách hợp lý, nếu một phần tử script (hoặc đúng hơn là một thẻ bắt đầu <script>) không được trình phân tích cú pháp HTML nhìn thấy, nó cũng không thể ngừng phân tích cú pháp.

Answer 2

Tôi sẽ cố gắng nói mọi thứ bằng một URL, nó sẽ tiết kiệm cho chúng tôi cả thời gian.

Vui lòng xem bản trình bày này từ tác giả của một cuốn sách giải quyết các chủ đề như những chủ đề bạn đang đề cập đến.Tôi tìm thấy bài thuyết trình (có một youtube cũng - tôi nghĩ trong kênh google) rất rất thú vị. Nó giải thích phần lớn những gì bạn muốn biết.

http://www.slideshare.net/souders/sxsw-even-faster-web-sites

http://www.youtube.com/watch?v=aJGC0JSlpPE (video dài nhiều chi tiết về params hiệu suất/chủ đề)

Answer 3

ví dụ cuối cùng của bạn sửa đổi cây DOM và chỉ có thể được sử dụng sau khi cây DOM là đầy đủ (đang tải). Vì vậy, trình duyệt đã có thể hiển thị đầy đủ trang, trong khi bạn đang tải tập lệnh js.

Dưới đây là một ví dụ như thế nào firefox làm cho 2 phiên bản khác nhau:

img http://img177.imageshack.us/img177/9302/40229406.jpg

• test.html tải với phương pháp của bạn trên trong vòng onload ở dưới cùng của trang.
• test2.html tải bằng thẻ tập lệnh đơn giản trong đầu.

Lưu ý dòng màu đỏ, đây là khi phần tử onload được kích hoạt.