2010-03-30 14 views
10

Tôi đang xây dựng trang web của mình qua số http://royronalds.com và tôi đang cố gắng tìm ra thứ tự các phần tử trong <head> có ý nghĩa nhất. Chỉ cần lấy từ những gì tôi đang có, tôi có:Cách đặt thẻ <script> so với <style> trong đánh dấu HTML để có kết quả tốt nhất

  • <head>
  • <style> bên ngoài stylesheet
  • <meta>
  • <title>
  • <link> để favicon
  • <script> cho jQuery
  • <script> chính javascript cho trang web
  • <script> google analytics, tập lệnh không đồng bộ.
  • </head>

Có lý do để đặt hàng những cách khác nhau để thời gian tải và các vấn đề khác xảy ra trơn tru hơn, và nếu như vậy, điều gì sẽ trật tự lý tưởng là gì?

Trả lời

6

Trình duyệt hiện đại chờ với bất kỳ loại hiển thị nào cho đến khi toàn bộ phần <head> được truy xuất (bao gồm các tệp được liên kết trong đó). Do đó, thứ tự không quan trọng đối với hiệu suất . Đối với Javascript, thứ tự của các tập tin là thứ tự thực hiện. Đối với biểu định kiểu, thứ tự xác định mức độ ưu tiên (quy tắc được xác định cuối cùng có ưu tiên nếu tất cả các thứ khác đều bằng nhau).

Nếu bạn muốn tối ưu hóa hiệu suất của khách hàng, bạn nên chuyển Javascript của mình thành the very end of the <body> element, thay vì đặt chúng ở <head>. Có nhiều cân nhắc hơn, Yahoo's list of optimisations cũng đáng để bạn đọc hết thời gian. Google has some good advice.

+1

Thứ tự thực thi cho tập lệnh không đồng bộ không nhất thiết là thứ tự xuất hiện trên trang. Cũng không nhất thiết phải đặt các tập lệnh không đồng bộ ở dưới cùng. Trên nhiều trang, việc đặt các tập lệnh không đồng bộ ở gần đầu có thể làm giảm tổng thời gian tải trang mà không chặn nội dung do tăng tính song song. – Brian

6

Một điều có thể có ảnh hưởng lớn là di chuyển các thẻ <script> xuống dưới cùng của trang nếu chúng không cần thiết cho nội dung.

Ví dụ: tôi sẽ chuyển thẻ google analytics <script> thành thẻ cuối cùng trước thẻ </body> trên mỗi trang. Thẻ tập lệnh là "chặn nội dung", do đó trình duyệt sẽ không tiếp tục hiển thị trang cho đến khi tập lệnh được tải xuống và thực thi. Các tệp javascript và JQuery chính của bạn có thể không thể di chuyển dễ dàng tùy thuộc vào cách bạn đang sử dụng chúng, nhưng phân tích chắc chắn có thể ở dưới cùng.

Kiểm tra YSlow best practices để biết thêm các kỹ thuật tối ưu hóa.

+1

Thẻ tập lệnh không đồng bộ như đoạn mã theo dõi không đồng bộ của Google Analytics không chặn nội dung như tập lệnh thông thường. Vui lòng xem: http://www.stevesouders.com/blog/2010/03/03/p3pc-google-analytics/ – Brian

+0

Thú vị. Đó là một thay đổi tương đối gần đây đối với mã GA. Tôi đã không nhận thức được nó, nhờ liên kết. Hầu hết các trang web có lẽ vẫn đang sử dụng tập lệnh không đồng bộ cũ từ âm thanh của nó. – zombat

+0

Hầu hết các trang web đều làm và nhận xét của bạn chắc chắn áp dụng cho đoạn mã GA không đồng bộ. Tôi chỉ muốn chỉ ra rằng câu hỏi này đã được hỏi về async GA. – Brian

0

Cũng xem xét thực tế là trình duyệt sẽ tạm dừng thực thi javascript khi xảy ra lỗi.

Bởi vì điều này, nó là rất quan trọng là việc javascript của bạn trên tất cả các trình duyệt khác bạn có nguy cơ mã Analytics của bạn không thực hiện và thu giữ số liệu thống kê ...

Tôi thường đặt Google Analytics của tôi ở trên mã riêng của tôi để nó chạy đầu tiên, và nếu trong trường hợp hiếm hoi mã của tôi bị hỏng hoặc gây ra lỗi JS, tôi vẫn có thể nhận được thông tin theo dõi.

đơn hàng của tôi sẽ là:

<head> 
<meta> content encoding 
<title> 
<link> favicon 
<style> external/third-party stylesheet 
<style> site stylesheet 
</head> 
<body> 
... 
<script> google analytics 
<script> jQuery 
<script> jQuery plugins 
<script> site javascript 
</body> 
+1

Trình duyệt chỉ dừng thực thi tập lệnh cho thẻ tập lệnh nơi xảy ra lỗi. Họ sẽ tiếp tục thực thi mã trong các tập lệnh khác. Việc có tập lệnh bị hỏng phía trên tập lệnh GA sẽ không ngừng theo dõi các cảnh báo được gửi. – Brian

1

bằng cách này, cố gắng Antispam địa chỉ email của bạn ...

ví dụ:

<SCRIPT TYPE="text/javascript"> 
document.write('<A HREF=' + '"mai' + 'lto:' + '[email protected]' + 'example' + '.fr' + '?' + 'sub' + 'ject=music'+'example'+'text">' + 'example' +'@' + 'example' +'.' + 'fr' + '</A><BR>') 
</SCRIPT> 

Nó làm việc cho tôi ...

+0

Vâng, tôi sẽ cố gắng suy nghĩ về điều gì đó (tốt hơn là một thứ dễ tiếp cận hơn) cho điều đó. – Kzqai

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