Tối ưu hóa tốc độ trang web bằng pjax

By Hữu Phương, 825 View
#TOP
Giới thiệu sơ lượt
Pjax là một plugin jQuery cung cấp trải nghiệm duyệt web cực kỳ nhanh (tải lại trang không cần làm mới) thông qua công nghệ ajax và pushState, đồng thời duy trì trang hiện tại, tiêu đề trang web và nút quay lại (chuyển tiếp) của trình duyệt cũng có thể được sử dụng bình thường.
Hướng dẫn cài đặt:
- Đầu tiên tải file đính kèm ở cuối bài viết về, sau đó up 2 tệp js lên website của bạn.
- Sau đó, thêm 2 javascript này vào <head> hoặc trước thẻ </body>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.pjax.js" type="text/javascript"></script>
Hoặc
- Thêm code này vào
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery.pjax/2.0.1/jquery.pjax.min.js"></script>
- Thêm đoạn javascript này vào trước thẻ </body>.
$(document).pjax('a[target!=_blank]', '#pjax-content', {
    fragment: '#pjax-content',
    timeout: 8000
});
Giải thích:
#pjax-content là id chứa nội dung khu vực pjax (tùy bạn đặt vị trí).
timeout: Ajax sẽ tự kích hoạt làm mới nếu nó hết thời gian.

HTML ví dụ

<!DOCTYPE html>
<html>
<head>
    <!-- styles, scripts, etc -->
</head>
<body>
    <h1>Trang PJAX cơ bản</h1>
    <div class="container" id="pjax-content">
        // Khu vực nội dung pjax.
    </div>

    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/jquery.pjax.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).pjax('a[target!=_blank]', '#pjax-content', {
            fragment: '#pjax-content',
            timeout: 8000
        });
    </script>
</body>
</html>

* P/S: Về phần hiệu ứng mình sẽ nói sau!
Đức, Dai, ʟɪɴʜ ᴆᴀ̃ ᴄᴀ̆ɴɢ và 1 người khác đã thích bài viết này

11 comments:

  1. @Phương Cute thấy phần kia // Khu vực nội dung pjax. tưởng nó load giống miload chứ 42 mà trang kia thấy mọi thứ nó vẫn như bao trang khác mà ta. mà hình như tốc độ tải nó vượt trội hơn á thì phải

  2. @Phương Cute bạn cứ hiểu nom na là khi click vào link nào thì nó cũng ko bị reload lại trang là đc 13

  3. @Phương Cute bác nên giao lưu học hỏi những nước khác, có nhiều cái hay lắm...

  4. @Hữu Phương à vụ này được nè, click bất cứ link nào nó cũng tự reload trang thì tui sẽ đưa google ads vào đây 42

  5. @Hữu Phương có giao lưu với mấy ông Nga ngố mà, nhưng template bên đó khó chịu lắm