Bìa Nhật ký phát triển trang web (3) Thêm hỗ trợ cho Carousel cho ImQi1 và tối ưu tốc độ. Gần đây, sau khi tôi thêm một lần năm tính năng mới vào bài viết, tôi đã nghĩ rằng ý tưởng của mình đã chạm đến giới hạn. Nhưng thật bất ngờ, lúc 2 giờ sáng hôm nay, khi tỉnh dậy và không thể ngủ lại, tôi mở trình duyệt để xem qua trang web của mình thì một ý tưởng thú vị khác lại nảy ra.

Sở thích thường chỉ ra những gì tôi yêu thích, có thể khá hàn lâm và không thu hút được nhiều người xem, ví dụ như âm nhạc hoặc phim truyền hình; còn mục Hình ảnh thì trưng bày những khoảnh khắc làm tôi kinh ngạc, có thể là cảnh tượng lớn lao [như việc gửi hành lý tại cửa trường vào mùa tốt nghiệp], hoặc cảnh đẹp thiên nhiên, thậm chí là một món đồ nhỏ bé [như mô hình Iron Man ghép từ lego].

Làm thế nào để khiến chúng trở nên hấp dẫn hơn? Hôm qua, trong phút chốc, tôi chợt nghĩ đến việc kết hợp chúng với Carousel.

Khi nhìn thấy bài viết trên blog của “Phong Ký Tinh Thần” về “[Sông Thép Lưu Xúc - Bảo Tàng Công Nghiệp Trung Quốc]” với cách bố trí hình ảnh mạnh mẽ, tôi bắt đầu tự hỏi liệu mình có thể thêm chức năng Carousel vào trang web của mình hay không. Tôi đã đề ra vài phương án: Carousel hiển thị trong danh sách bài viết, Carousel bên trong bài viết chính, hoặc cải thiện bố cục hình ảnh bài viết (ví dụ như bố cục hai cột mỗi hàng, ba cột mỗi hàng, hoặc bố cục không đều như giao diện [Giới Thiệu]). Cuối cùng, sau khi cân nhắc độ khó thực hiện, tính thực tiễn, cũng như sự đơn giản và thẩm mỹ, tôi quyết định bắt đầu từ phần bìa, làm phong phú thêm chức năng của nó.

Với sự hỗ trợ mạnh mẽ từ thư viện SwiperJS, tôi đã kết hợp nó với RemixIcon để tạo ra hiệu ứng Carousel đơn giản trên bìa. Bạn có thể xem hiệu ứng tại Minecraft Architecture 1, có thể cần phải làm mới bộ đệm trình duyệt ép buộc.

Tôi không thể không nhắc đến rằng, khi thực hiện tính năng này, tôi phải sửa đổi đồng thời hai plugin FancyBox (slide ảnh) và LazyLoad (nạp ảnh chậm), rồi thêm cả SwiperJS nữa – quả là mệt mỏi không ít.

Một số bạn bè nói rằng khu vực bình luận cần chỉnh sửa, vì vậy tôi cũng đã sửa lại kiểu dáng xbet88 của khu vực bình luận một chút. Ban đầu thầy Du nói rằng bình luận không có lồng nhau trông rất rối rắm. Nhưng nếu mỗi lần trả lời bình luận tăng thêm một tầng lồng nhau, theo quy tắc đệ quy, sẽ dần dần bị đẩy vào trong. Nếu trang quá hẹp và tầng bình luận quá sâu, sẽ gây ra vấn đề về chiều rộng hiển thị. Vì vậy, ban đầu tôi không sử dụng cách lồng nhau để làm nổi bật mối quan hệ giữa các bình luận và phản hồi, mà thay vào đó dùng phương pháp “chuỗi” giống như Saammaa, sau đó lại chuyển sang kiểu dáng hiện tại.

!Kiểu dáng “chuỗi” của Saammaa Kiểu dáng “chuỗi” của Saammaa

!Kiểu dáng hiện tại Kiểu dáng hiện tại

“Chuỗi” nghĩa là nối thành chuỗi, bởi vì nhìn vào trông rất giống một sợi dây chuỗi.

Mẹ tôi cũng nói rằng kiểu dáng hiện tại là gọn gàng nhất.

Khi số lượng plugin tăng lên, trang web bắt đầu phải tải một loạt JS ngay từ đầu. Hiện tại, tôi đang sử dụng các plugin và tải JS/CSS như sau: Howler, Aplayer, Meting dùng để phát nhạc; DPlayer dùng để phát video; Prism dùng để phân tích khối mã, v.v. Hơn nữa, JS còn bị đánh乱 (obfuscated), tổng cộng có hơn mười file JS và CSS, điều này làm nghiêm trọng kéo chậm tốc độ hoạt động của trang web. Do đó, tôi đã xử lý chúng thành chế độ tải đồng thời.

Tại đây, tôi có thể giới thiệu ngắn gọn cách tải JS và CSS đồng thời, lấy ví dụ về JS, định nghĩa một hàm loadJavaScript.

1
2
3
4
5
6

function loadJavaScript(href, callback) {
    let scriptElement = document.createElement("script");
    scriptElement.src = href; [123win.club](/kd/703.html) 
    scriptElement.onload = callback;
    document.head.appendChild(scriptElement);
}

JavaScript Khi có phần tử tương ứng tồn tại, tải JavaScript và thiết lập một dấu hiệu đã tải. Khi gọi hàm này, tham số đầu tiên là đường dẫn tới JavaScript, tham số thứ hai là hàm cần thực thi sau khi JavaScript được tải xong.

1
2
3
4
5
6
7
8

if (document.querySelector(".example-element") && typeof scriptLoaded === "undefined") {
    loadJavaScript("path/to/script.js", function() {
        init();
        window.scriptLoaded = true;
    });
} else {
    init();
}

JavaScript Lưu ý rằng, phương pháp này tải JavaScript và hàm callback đều là đồng thời. Nếu đoạn mã phụ thuộc vào JavaScript được tải động đòi hỏi thứ tự thực thi cụ thể, thì không thể sử dụng phương pháp này. Vì mã thực thi đồng thời không đảm bảo thứ tự thực thi, chỉ thực thi tuần tự mới có thể.

!JavaScript tải đồng thời JavaScript tải đồng thời Từ hình ảnh trên, ta có thể thấy rằng ngay từ đầu khi tải trang, chỉ có 3 CSS và 6 JS được tải (tôi vẫn thấy là quá nhiều, nhưng không thể giảm thêm), các JS khác sẽ được nhập khi trang có phần tử tương ứng, giảm thời gian chờ đợi tải ban đầu của trang, kết hợp với Pjax không làm mới trang, nâng cao đáng kể trải nghiệm duyệt web.

Cập nhật gần đây Bài viết này đã được cập nhật lần cuối 9 tháng trước. Chủ đề Phát triển