Tốc độ tải trang luôn là một vấn đề được các webmaster ưu ái hàng đầu, ngoài hình ảnh thì javascript là yếu tố ảnh hưởng rất lớn tới tốc độ tải trang. Ta thường có cách giải quyết với vấn đề trên bằng việc thêm các thuộc tính async hoặc defer vào <script, tuy nhiên với một số sau khi thêm thì code không hoạt động...
Tôi lấy ví dụ đơn giản một số js không quá cần thiết phải tải đồng thời với việc tải trang đó là facebook sdk dùng cho việc bình luận hoặc fanpage của facebook. Đa phần nó đều nằm ở phần sidebar, footer hoặc cuối bài viết vì thế ta hoàn toàn có thể lợi dụng .scroll() hoặc getBoundingClientRect() để tải js khi cuộn chuột tới một thành phần nào đó hoặc chiều cao được chỉ định. Hoặc có thể sử dụng onload() để tải file sau khi đã load xong trang
1. Ví dụ với .scroll()
Trường hợp này tôi muốn load js của google analytics với trang bài viết, thông thường thì khi đọc bài viết người đọc sẽ phải cuộn trang xuống. Khi cuộn tới một vị trí nhất định thì js sẽ được load sẽ giảm thiểu được kha khá tốc độ so với khi js được load ngay từ đầu
Tích hợp jquery nếu blog của bạn chưa có
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js' type='text/javascript'/>
Code có dạng
function function_name() { // Your code } $(window).scroll(function() { if ($(window).scrollTop() > XXX) { function_name(); } });
Hiểu đơn giản function_name() sẽ được load khi cuộn trang tới độ cao XXX mà bạn đặt.
Trong trường hợp bạn muốn load js từ nguồn thứ 3 code có dạng
function function_name() { var t = document.createElement("script"); t.src = "https://yourcode.js"; document.body.appendChild(t); } $(window).scroll(function() { if ($(window).scrollTop() > XXX) { function_name(); } });
2. Sử dụng getBoundingClientRect()
Ví dụ tôi muốn load sdk của facebook, khi đó bạn sẽ cần chỉ định 1 div nào đó với id nào đó (ở đây tôi lấy 1 div có id là fb-plugin), khi cuộn chuột chạm tới div đó js mới được load. Code có dạng
function loadSDK() { var t = document.createElement("script"); t.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.12&appId=285887815280112&autoLogAppEvents=1", document.body.appendChild(t) } window.onscroll = function() { document.getElementById("fb-plugin").getBoundingClientRect().top < window.innerHeight && (loadSDK(), window.onscroll = null) };
3. Sử dụng button ?
Cái này khá hay nhỉ, bấm vào mới bắt đầu tải js ! Thử nó với facebook comment xem sao
Code demo với button
<button id='showcmt' onClick='showComments();'>Comments</button> <fb:comments colorscheme='light' expr:href='data:post.canonicalUrl' numposts='5' width='100%'/>
Tạo function load SDK Facebook khi có sự kiện click vào button
function showComments() { (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = 'https://connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v2.12&appId=285887815280112&autoLogAppEvents=1'; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); }
Hoàn toàn giải quyết được vấn đề quá cồng kềnh khi tích hợp bộ plugin của facebook vào website.
4. Sử dụng sự kiện onload
function your_function() { // Your code } window.onload = your_function;
Theo đó khi tải xong trang (js, css, image,...) thì code trong hàm your_function mới được thực thi
Với thủ thuật nhỏ nhưng vô cùng hay này hi vọng sẽ giúp ích cho bạn trong quá trình phát triển website ! Chúc thành công
1. Không vi phạm luật pháp nước CHXHCN Việt Nam
2. Không vi phạm thuần phong mỹ tục Việt Nam
3. Không bàn luận vấn đề liên quan đến tôn giáo, chính trị
4. Không đả kích, chửi bới hay đưa ra những lời nói không phù hợp với mục tiêu của website
5. Không bình luận với mục đích quảng cáo, trao đổi, mua bán
6. Khuyến khích sử dụng Tiếng Việt có dấu, hạn chế sử dụng tiếng lóng, viết tắt
7. Khi cần sự trợ giúp, vui lòng miêu tả chi tiết lỗi và để lại link đính kèm, tránh nói chung chung gây mất thời gian cho đôi bên