Không sử dụng jquery để giảm thời gian tải trang

[thien-do]

Update: Please see https://github.com/Cuuhomientrung/cuuhomientrung/issues/181#issuecomment-719828748

---

Hiện tại mình thấy jquery đang đóng góp 1 phần không nhỏ vào việc tải trang, dù cả ở những trang không có tương tác động (như trang chủ):

Mình có review những nơi sử dụng trong codebase thì mình thấy những use case này có thể thay thế bằng những giải pháp native, sẽ giúp người dùng có thể tiếp cận thông tin nhanh hơn.

Cụ thể hơn, mình thấy có 2 trang sử dụng jquery nhiều là: https://github.com/Cuuhomientrung/cuuhomientrung/blob/177aa715d7652961478791b4c633507c29234fbb/project/app/static/webpack_sources/js/preloader.js#L1 https://github.com/Cuuhomientrung/cuuhomientrung/blob/58d34a5e9a793da9d4ce538f43ef0e5d749a6d1e/project/app/static/webpack_sources/js/ho_dan.js#L2

Những use case phổ biến hiện tại là:

• selector ($(something)) có thể thay bằng https://caniuse.com/?search=queryselector
• class manipulation ---> https://caniuse.com/?search=classlist
• get set attribute và value (.val) ---> native
• show, hide ---> có thể sử dụng classlist

Như link ở trên thì mình thấy gần như tất cả mọi trình duyệt đều hỗ trợ, và đặc biệt là tất cả trình duyệt di động đều hỗ trợ những phương án thay thế này (mình nghĩ truy cập bằng điện thoại là 1 use case khá quan trọng với project này)

Tóm lại, mình nghĩ chúng ta có thể thay thế jquery bằng những phương án không cần dependency bên ngoài để cải thiện thời gian tải trang, giúp người dùng có thể tiếp cận thông tin quan trọng nhanh hơn :D

[dothanhlam97]

Nice. Hay quá anh. Để em check task này cho ạ.

[thien-do]

ôi cám ơn em :+1:

[dothanhlam97]

Thank you for filing this task in very detail huhu Em đã struggle với vụ load trang chậm này mấy hôm rồi. Em không rành FE lắm.

[thien-do]

@dothanhlam97 cái này là 1 trong 4 cái anh đang thấy nó take time ở FE https://github.com/Cuuhomientrung/cuuhomientrung/issues/179

Xong hết mấy cái này thì chắc giảm load time được 1/2 tới 2/3, còn sau đó nữa thì phải trông đợi BE solve cái TTFB :D

[thien-do]

oh wait @dothanhlam97 I was not clear enough :( didn't realize we are using bootstrap, and some components of bootstrap require jquery: (hm to be honest this is exactly why I don't like bootstrap)

Anyway the updated situation is that:

1. If we are using one of the components from the above list, then we cannot drop jquery. If no, then we can, but it's still a risk that in the future we may want to use them
2. That being said, we are still having 2 version of jquery bundled in our code. One from the script tag in the layout.html, and another in package.json (bundled with webpack). We still need to eliminate one of them (not sure if bootstrap can work with the module one).

[thien-do]

So basically our goal is not to remove jquery completely but:

1. Eliminate the duplicated dependency (one jquery loaded via script tag, one bundled via webpack)
2. Use the slim version instead of the full one

[dothanhlam97]

Mình dùng bootstrap everywhere

[thien-do]

Yub nên giờ chỉ gỡ cái duplicate thôi là tốt rồi :D

[thien-do]

Lâm nếu vẫn muốn làm tiếp thì xem ở đây nhé https://getbootstrap.com/docs/4.5/getting-started/webpack/#installing-bootstrap , nếu bận thì assign lại cho anh.

Anh nghĩ idea là mình sử dụng bootstrap kiểu npm module, khi đó thì jquery cũng là npm module và cả code của mình lẫn bootstrap đều có thể sử dụng jquery --> có thể drop cái jquery ở script tag.

[xuanbao2008]

mình Xuân Bảo đây, mình sẽ handle issue này nhé

[xuanbao2008]

@dvkndn @dothanhlam97 như ý kiến bạn nói bên trên, ko nên xóa bỏ hoàn toàn jquery, cứ thay thế dc cái gì native trong khả năng có thể, xóa code js thừa, thay ajax của jquery bằng JsonResponse Nhưng mình đang suy nghĩ về việc sử dụng hẳn vue hoặc reactjs để làm phần UI cho nó, mình nghĩ tốc độ sẽ cải thiện đáng kể.

[thien-do]

@dvkndn @dothanhlam97 như ý kiến bạn nói bên trên, ko nên xóa bỏ hoàn toàn jquery, cứ thay thế dc cái gì native trong khả năng có thể, xóa code js thừa, thay ajax của jquery bằng JsonResponse

Không phải :D ý mình là bởi vì CHMT đang dùng Bootstrap mà Boootstrap lại dùng Jquery nên hạn chế việc sử dụng Jquery trong CHMT cũng k mang lại hiệu quả cao so với công sức bỏ ra.

Mình nghĩ cái mang lại hiệu quả cao hơn là giải quyết việc Jquery đang load 2 lần (1 lần bằng thẻ script, 1 lần do webpack bundle vào)

Nhưng mình đang suy nghĩ về việc sử dụng hẳn vue hoặc reactjs để làm phần UI cho nó, mình nghĩ tốc độ sẽ cải thiện đáng kể.

Hm sao bạn lại nghĩ tốc độ cải thiện đáng kể nhỉ?

Với cả mình nghĩ chi phí chuyển qua vue hoặc reactjs sẽ khá cao, vì đây là client-side render, trong khi bên mình thì có thể nên là server-side render :thinking:

[kc97ble]

Việc dùng React hay Vue, mình có nghĩ từ đầu. Nếu dùng client-side rendering, browser sẽ phải trải qua các bước sau đây:

Client-side rendering

1. Fetch HTML
2. Parse HTML
3. Fetch JS
4. Parse JS
5. Evaluate JS
6. Update DOM tree

Do vậy, first meaningful paint sẽ chậm hơn server-side render. Khi dùng server-side render (như hiện tại), browser chỉ cần:

Server-side rendering

1. Fetch HTML
2. Parse HTML
3. Update DOM tree

Ba bước này được tiến hành gối lên nhau, tức là fetch đến đâu thì parse và update đến đó.

Để công bằng, client-side rendering cho phép lazy-loading, tức là cho phép tách cái bundle.js thành nhiều file nhỏ hơn. Do đó, ta có thể ưu tiên hiển thị các phần quan trọng trước, sau đó, tải các phần không quan trọng sau.

Cách làm chuẩn nhất là dùng hybrid rendering: dùng SSR để tối ưu first meaningful paint, dùng CSR để xử lý các phần còn lại. Tuy nhiên, cách này cần nhiều kỹ thuật và thời gian để làm.

Vấn đề này nên được bàn luận ở một issue khác. Còn ở issue này, chưa nên bàn luận vội. CSR hay SSR hay hybrid rendering là vấn đề về mặt chiến lược, nên được bàn luận cụ thể với ý kiến từ nhiều người.