Điều này xảy ra do sự kiện DOMLoaded được kích hoạt đủ mili giây trước khi trang thực sự hiển thị.
Tóm lại, điều này có nghĩa là bạn phải tối ưu hóa tốc độ trang web của mình. Điều này không có nghĩa là làm cho nó tải xuống nhanh hơn, nhưng nó có nghĩa là tải xuống theo đúng thứ tự, theo cách không chặn.
Bước một: đánh dấu của bạn
1) Dường như có rất nhiều bạn có thể làm để tối ưu hóa đánh dấu của bạn. Thứ nhất, thứ tự các bảng định kiểu và JavaScripts có thể được tối ưu hóa. Để đảm bảo các tệp CSS được tải xuống không đồng bộ, bạn luôn phải bao gồm CSS bên ngoài trước các tệp JavaScript bên ngoài. style.css được tải xuống sau khi một số/tất cả các cuộc gọi JavaScript của bạn.
Có 1 khối tập lệnh được tìm thấy trong phần đầu giữa tệp CSS bên ngoài và tài nguyên khác. Để cho phép tải xuống song song, hãy di chuyển tập lệnh nội tuyến trước tệp CSS bên ngoài hoặc sau tài nguyên tiếp theo.
2) Tệp JavaScript chính của bạn là nội tuyến trong đánh dấu của bạn. Việc này không chỉ chặn tải xuống trang cho đến khi tập lệnh hoàn tất tải xuống, nhưng có nó trước nội dung của bạn có thể gây ra (hoặc thêm vào) đèn flash trắng.
Tải tập lệnh của bạn không đồng bộ trong đầu là phương pháp ưa thích của tôi. Sau đó, bạn sẽ phải kích hoạt tập lệnh của mình khi DOM tải xong hoặc bạn có thể đạt được kết quả tương tự bằng cách đặt tập lệnh ở cuối thẻ body.
Bước hai: Khai thác khả năng của trình duyệt
1) Nhìn vào tiêu đề http, có 28 mặt hàng đang được phục vụ như các cuộc gọi HTTP riêng biệt, mà không được lưu trữ trên trình duyệt (bao gồm các trang html, hình ảnh jpg , tệp định kiểu và tệp JavaScript).
Các mục này rõ ràng là không thể lưu vào bộ nhớ cache và điều này có thể dễ dàng được sửa bằng cách chỉnh sửa cấu hình máy chủ web của bạn.
2) Bật nén gzip. Hầu hết các trình duyệt web (có, ngay cả IE) đều hỗ trợ giải nén gzip và hầu hết các máy chủ web (nếu không phải tất cả) đều hỗ trợ nén bằng gzip. Bạn thậm chí có thể đi quá mức và nhìn vào SPDY, một giao thức HTTP thay thế nhẹ hơn (được hỗ trợ trong Chrome và Firefox).
Bước ba: Cung cấp nội dung
Có khoảng 30 mục riêng lẻ được phân phát từ miền của bạn. Trước tiên, hãy xem xét cách bạn có thể giảm số lượng yêu cầu này. 30 yêu cầu HTTP cho mỗi lần xem trang là rất nhiều. Bạn có thể chống lại điều này bằng các phương pháp sau:
1) Tải xuống song song trên nhiều tên máy chủ. Trình duyệt hiện giới hạn số lượng kết nối đồng thời vào một tên miền. Cung cấp hình ảnh của bạn từ một tên miền riêng biệt (ví dụ: img.bigtim.ca) có thể cho phép chúng được phân phối song song với nội dung khác.
2) Kết hợp nhiều mục thành một. Nhiều mục được tải xuống hoàn toàn là nội dung phong cách, chẳng hạn như biểu trưng, phần tử menu, v.v. Có thể được kết hợp thành một hình ảnh duy nhất (chỉ tải xuống một lần) và chia nhỏ bằng cách sử dụng CSS. Điều này được gọi là CSS spriting. Stack Overflow thực hiện điều này: look here.
3) Nếu bạn không thể giảm số lượng mục cần tải xuống, bạn có thể giảm tải trên máy chủ (và ngược lại, trình duyệt của khách hàng) bằng cách phân phát nội dung tĩnh từ miền không có cookie. Stack Overflow thực hiện điều này với tất cả nội dung tĩnh của họ như hình ảnh, bảng định kiểu và tập lệnh.
Bước bốn: Tối ưu hóa mã của riêng bạn
Chỉ có rất nhiều công nghệ trình duyệt và HTTP có thể làm để giúp tốc độ trang web của bạn. Bước cuối cùng này là của bạn.
1) Có lý do nào bạn chọn lưu trữ bản thân jquery không? Trang tải xuống của Jquery hiển thị nhiều CDN mà bạn có thể trỏ đến để tải xuống kịch bản được lưu trữ nhanh chóng, được lưu trong bộ nhớ cache.
2) Hiện tại có hơn 20 quy tắc CSS không được sử dụng trong bảng định kiểu của bạn (chiếm 36% tổng số tệp CSS của bạn). Có một suy nghĩ lại về những gì thực sự cần thiết.
3) Đoạn chính của JavaScript (ở đầu thẻ body) dường như là một hack để cố gắng tăng tốc mọi thứ, nhưng có lẽ không giúp gì cả.
Cookie đang được đặt để chỉ định xem trang có bị mờ hay không. Bạn không chỉ sử dụng JavaScript để thực hiện quá trình chuyển đổi mà CSS có thể thực hiện một cách hạnh phúc, nhưng hơn một nửa tập lệnh được sử dụng để xác định chức năng đọc và ghi cookie.
Thấy những thứ như thế này: $("body").css ("background-image", "url('images/background.png')"); và $("#website").show(); thường khiến tôi ranting về "tách mối quan tâm", nhưng câu trả lời này đủ dài để hy vọng bạn có thể thấy phong cách và chức năng trong cùng một mã.
Phụ lục: Nhìn vào mã, không cần jquery gì cả để thực hiện những gì bạn đang làm. Nhưng sau đó một lần nữa, không cần phải thực hiện những gì bạn đang làm, vì vậy bạn có thể có thể làm tốt hơn mà không cần bất kỳ JavaScript nào cả.
Wow cảm ơn điều này thật tuyệt vời! –