Việc tối ưu hóa JQuery khá quan trọng một khi website của bạn có một lượng truy cập cao. Khi thực hiện tối ưu hóa lại JQuery một cách tốt nhất thì nó sẽ giúp bớt đi rất nhiều truy vấn tới CSDL và làm cho website của bạn có tốc độ cao hơn, thân thiện hơn với các công cụ tìm kiếm (Search Engine).
1 Streamline your (x)HTML
Một ví dụ gọi lại khi trang đã được nạp:
$(function(){
var contactForm = ’<form action=”formhandler.php” method=”post”>’
+’<label for=”name”>Name</label><input type=”text” name=”name” />’
+’<label for=”phone”>Phone Number</label><input type=”text” name=”phone”/>’
+’</form>’;
$(“body”).append(contactForm);
});
var contactForm = ’<form action=”formhandler.php” method=”post”>’
+’<label for=”name”>Name</label><input type=”text” name=”name” />’
+’<label for=”phone”>Phone Number</label><input type=”text” name=”phone”/>’
+’</form>’;
$(“body”).append(contactForm);
});
2 Tối ưu hóa cấu trúc, loại bỏ mã không cần thiết
Ví dụ thay vì dùng
<span class=”heading”>Your heading</span>
Có thể dùng các thẻ <H1> đến <H6> thay thế đoạn trên.
<span class=”heading”>Your heading</span>
Có thể dùng các thẻ <H1> đến <H6> thay thế đoạn trên.
3 Tránh các liên kết không cần thiết
Sử dụng thường xuyên JQuery và thẻ <a href=”"> chứa lệnh gọi javascript
Sử dụng thường xuyên JQuery và thẻ <a href=”"> chứa lệnh gọi javascript
Ví dụ thay vì dùng
<a href=”#” onclick=”myfunction(); return false”>My button</a>
<a href=”javascript:myfunction();”>My Button</a>
<a href=”#” onclick=”myfunction(); return false”>My button</a>
<a href=”javascript:myfunction();”>My Button</a>
Có thể dùng HTML
<span id=”myButton”>My Button</span>
Hoặc dùng Javascript
$(“#myButton”).click(function(){ myfunction(); });
<span id=”myButton”>My Button</span>
Hoặc dùng Javascript
$(“#myButton”).click(function(){ myfunction(); });
4 Hạn chế gọi trang bằng Javascript và AJAX
Ví dụ nếu muốn dùng một tab trên trang nên sử dụng JQuery để phân chia cho các lớp css và eventHandlers tải. Cách này này sẽ tải trang mà không cần javascript.
Robot của Search Engine vẫn chưa thể lấy dữ liệu tốt và sẽ đánh giá chất lượng nội dung nếu sử dụng Javascript để gọi dữ liệu ra.
Ví dụ nếu muốn dùng một tab trên trang nên sử dụng JQuery để phân chia cho các lớp css và eventHandlers tải. Cách này này sẽ tải trang mà không cần javascript.
Robot của Search Engine vẫn chưa thể lấy dữ liệu tốt và sẽ đánh giá chất lượng nội dung nếu sử dụng Javascript để gọi dữ liệu ra.
5 Các đoạn javascript nên tách ra khỏi trang
Để giảm khối lượng Crawl cho robot của SE trên 1 trang thì nên xuất javascript ra và gọi về trang.
<script src=”myScript.js” type=”text/JavaScript” ></script>
Để giảm khối lượng Crawl cho robot của SE trên 1 trang thì nên xuất javascript ra và gọi về trang.
<script src=”myScript.js” type=”text/JavaScript” ></script>
6 Tận dụng tính năng ‘context’ của jQuery.
JQuery có thể chỉ tìm các phần tử con của một ‘context’ nào đó mà không cần phải tìm trong toàn bộ tài liệu.
Nếu cần tìm nhiều phần tử con mà có chung một cha thì nên tìm phần tử cha trước làm ‘context’, sau đó dựa vào ‘context’ này tìm các phần tử con.
JQuery có thể chỉ tìm các phần tử con của một ‘context’ nào đó mà không cần phải tìm trong toàn bộ tài liệu.
Nếu cần tìm nhiều phần tử con mà có chung một cha thì nên tìm phần tử cha trước làm ‘context’, sau đó dựa vào ‘context’ này tìm các phần tử con.
Ví dụ cách viết:
$(‘.PreviewImg’)…
$(‘.droppable’)…
$(‘.dragItem[rsId=123]‘)…
$(‘.PreviewImg’)…
$(‘.droppable’)…
$(‘.dragItem[rsId=123]‘)…
Có thể thay bằng:
var releaseTable = $(‘#release’);
releaseTable.find(‘.PreviewImg’)…
releaseTable.find(‘.droppable’)…
releaseTable.find(‘[rsId=123]‘)…
var releaseTable = $(‘#release’);
releaseTable.find(‘.PreviewImg’)…
releaseTable.find(‘.droppable’)…
releaseTable.find(‘[rsId=123]‘)…
* Những chú ý trên được tham khảo từ nhiều nguồn và giúp ích cho
việc tối ưu tốc độ tải trang, giúp cho website tốt hơn lúc robot của SE
vào lấy dữ liệu
(Nguồn: www.lamseo.com )
0 nhận xét:
Đăng nhận xét