#tranquochuy #wecommit #wecommit100x
Công thức tối ưu FrontEnd – Áp dụng thực tế website chứng khoán | Trần Quốc Huy – Wecommit
Các nội dung chính trong Video này:
0. Mở đầu.
1. Gốc rễ tối ưu Frontend – CRP, CRP là gì ?
2. Tổng quan 3 hướng tối ưu Frontend.
2.1. Tối ưu SIZE.
2.1.1. Tối ưu SIZE – Kỹ thuật Minify.
2.1.2. Tối ưu SIZE – Kỹ thuật Tree-Shaking.
2.1.3. Tối ưu SIZE – Kỹ thuật Code-Split.
2.1.4. Tối ưu Size – Kỹ thuật nén và kết hợp đa dạng những kỹ thuật khác nhau.
2.1.5. Tổng hợp lại các kỹ thuật tối ưu SIZE.
2.1.6. Ghi chú kỹ thuật đối với Image.
Q&A: Sử dụng công cụ gì cho kỹ thuật Minify.
2.2. Sử dụng CACHE.
2.2.1. CACHE – Sử dụng CDN.
2.2.2. Cache – Sử dụng IndexDB.
2.3. Tối ưu WAIT.
2.3.1. Tối ưu WAIT – Kỹ thuật Async + Defer.
2.3.2. Tối ưu WAIT – Kỹ thuật Lazy loading.
2.3.3. Tối ưu WAIT – Tối ưu các Tasks thực hiện lâu.
2.3.4. Tối ưu WAIT – Web worker.
2.3.5. Kỹ thuật Preload và Prefetch.
3. Các công cụ sử dụng khi tối ưu.
4. Demo Website bảng giá chứng khoán VPS.
5. Demo kiểm tra Amazon.
6. Kết thúc.
Ghi chú: Bạn có thể tham gia hành trình trở thành Top 1% những lập trình viên thành công nhất cùng tôi bằng cách đăng ký tham dự chương trình Từ điển tối ưu 100x hiệu năng.
Trong chương trình này, bạn sẽ thu được các giá trị như sau:
Cực kỳ tự tin dù ở bất kỳ công ty nào.
Nổi bật, có năng lực (không phải chỉ ở mỗi chuyên môn mà nhiều khía cạnh)
Tăng kinh nghiệm vù vù từ nhiều bài toán thực tế (cách đặc biệt của tôi).
Trở thành con người quyết liệt trong hành động, làm việc có chiến lược.
Năng lực tối ưu cơ sở dữ liệu của bạn sẽ vượt trội so với hàng nghìn lập trình viên khác. Bạn sẽ thuộc Top 1% những người giỏi nhất.
Xem chi tiết chương trình của tôi ở đây:
Bạn có thể xem các dự án mà tôi đã trực tiếp thực hiện tại đây:
🎯 Một số Video khác bạn có thể xem
Bí mật TOP 1% những lập trình viên giỏi nhất | Trần Quốc Huy Wecommit :
Thiết kế hệ thống Search Engine xử lý 100 tỷ Web Page (Google, Bing…) | System Design Wecommit:
Cách Quora thiết kế cơ sở dữ liệu để đáp ứng 400 triệu người dùng:
Bí quyết tìm lái xe của Uber:
Hiểu toàn bộ kiến thức về PostgreSQL trong 1h30 phút:
Học SQL Server trong 60 phút :
Học MongoDB trọn vẹn trong 1 giờ 30 phút:
Tìm hiểu về Vector Database – loại Database giúp Generative AI bùng nổ:
⭐️N️ội dung⭐️
⌨️ (00:00:00) 0. Mở đầu.
⌨️ (00:02:19) 1. Gốc rễ tối ưu Frontend – CRP, CRP là gì ?
⌨️ (00:14:17) 2. Tổng quan 3 hướng tối ưu Frontend.
⌨️ (00:15:44) 2.1. Tối ưu SIZE.
⌨️ (00:17:10) 2.1.1. Tối ưu SIZE – Kỹ thuật Minify.
⌨️ (00:19:45) 2.1.2. Tối ưu SIZE – Kỹ thuật Tree-Shaking.
⌨️ (00:28:14) 2.1.3. Tối ưu SIZE – Kỹ thuật Code-Split.
⌨️ (00:31:31) 2.1.4. Tối ưu Size – Kỹ thuật nén và kết hợp đa dạng những kỹ thuật khác nhau.
⌨️ (00:33:53) 2.1.5. Tổng hợp lại các kỹ thuật tối ưu SIZE.
⌨️ (00:35:32) 2.1.6. Ghi chú kỹ thuật đối với Image.
⌨️ (00:40:34) Q&A: Sử dụng công cụ gì cho kỹ thuật Minify.
⌨️ (00:42:12) 2.2. Sử dụng CACHE.
⌨️ (00:42:42) 2.2.1. CACHE – Sử dụng CDN.
⌨️ (00:46:53) 2.2.2. Cache – Sử dụng IndexDB.
⌨️ (00:49:52) 2.3. Tối ưu WAIT.
⌨️ (00:50:42) 2.3.1. Tối ưu WAIT – Kỹ thuật Async + Defer.
⌨️ (00:55:07) 2.3.2. Tối ưu WAIT – Kỹ thuật Lazy loading.
⌨️ (01:00:32) 2.3.3. Tối ưu WAIT – Tối ưu các Tasks thực hiện lâu.
⌨️ (01:05:45) 2.3.4. Tối ưu WAIT – Web worker.
⌨️ (01:07:20) 2.3.5. Kỹ thuật Preload và Prefetch.
⌨️ (01:15:28) 3. Các công cụ sử dụng khi tối ưu.
⌨️ (01:19:52) 4. Demo Website bảng giá chứng khoán VPS.
⌨️ (01:27:01) 5. Demo kiểm tra Amazon.
⌨️ (01:32:03) 6. Kết thúc.
📱 Nếu bạn muốn liên hệ với tôi:
Linkedin:
Facebook:
#wecommitxtop1percent #mysql #toiuu100x #tranquochuy #wecommit #databasedesign #databaseperformance #databasetutorial #algorithm #datastructureandalgorithm #systemdesignwecommit #toiuucosodulieu #thietkecosodulieu #thietkehethong #toiuusql #cautrucdulieuvagiaithuat #postgresql #postgres #postgresqltutorial #databasetutorial #databasetutorials #laptrinhvien #cntt #frontend #frontenddevelopment #frontenddeveloper
22:00 Chỗ này tree shaking vẫn work tốt với import all nhé
Mình có chút ý kiến, mong được giao lưu vs các host
1. Khi dùng kỹ thuật zip. transfer data rất nhanh qua internet, tuy nhiên chúng ta phải mất perform cho việc giải nén gói tính. Vs các thiết bị đời tống thì có thể gặp vấn đề
2. Dùng tiny k phải là nén, mà nó đang giảm độ phân giải, giảm số lượng pixels của ảnh. 1 khi đã giảm thì sẽ có vấn đề khi tăng lại.
3. indexDB có giới hạn dung lượng
4. Worker tạo có giới hạn chứ k phải tạo bừa bãi được
5. Khi submit form call api BE expect đó là 1 task async đẩy vào mircotasks queue, nó sẽ k chạy trực tiếp trên stack, những tính toán sẽ thực hiện maf k làm freeze màng hình do event loop quản lí . z nên bạn k cần setimeout làm j
Video của anh hay quá, mong sau này a có thể ra thêm video Công thức tối ưu BackEnd nữa !
sao để cái nhạc nền nghe rợn rợn như đang nghe chuyện ma ý.
Bundle analyzer chỉ cho mình cái cảm giác vè bức tranh tổng thể. Ví dụ mình chỉ dùng 1 function của jquery thì nó vẫn report ra là mình dùng thư viện jquey với size của jquery, trong khi webpack đã optimize dùng treeshaking cho output.
misa toàn web rác không . xin lỗi vì thành kiến nhưng thấy bạn nói hay cảm ơn vì những gì đã chia sẽ
bài share rất hay shop ơi, nhma cái này quen quen, hình như mình thấy share ở đâu đó trên ytb này rồi :V
Mở đầu khá tẻ nhạt, về sau khá hay. Frontend phải như thế này chứ. Mong kênh a Huy làm thêm những video ntn.
kiến thức quá hay mong bạn sẽ tiếp tục nhiều hơn
Coi mở đầu làm cháu liên tưởng như live stream bán hàng hay hội thảo đa cấp ấy. Đã lưu lại tối về xem.
Cảm ơn anh, bài chia sẻ rất hay ạ!
mình từng optimize cả thằng webpack, thực sự thì nên hiểu 1 chút là các tool của mình nó làm gì với code của mình
hay anh Thiện ơi, hi vọng Wecommit có thêm nhiều video hay thế này nữa
Hay quá, cảm ơn Thiện nhé🎉
Tối ưu backend nữa đi anh
kiến thức 100 điểm. cơ mà bạn kiện nói bth đều như thế hay là cố ý nhấn nhá mà nhiều đoạn cảm giác như đang "rặn rặn" hơi mất tự nhiên!
Em cảm ơn hai anh rất nhiều
Hay quá a