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

#TOP

22.08.2022 - 20:55

Bài đăng: 33

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>

CODE

<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

CODE

<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>.

CODE

$(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ụ

CODE

<!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>