November 25, 2020

Expert Talk | Tối ưu Front-end để web của bạn load dưới 5 giây



🔴 Expert: Trần Trọng Thanh – hiện tại là Principal Software Engineer | Chotot.vn

▪️ Trong bài toán “Làm sao để user không phải chờ quá 5 giây để load trang?”, tất nhiên các kỹ sư cần phải tối ưu rất nhiều thứ bao gồm kiến trúc hệ thống, phân tải, database… nhưng vì sao chúng tôi chỉ đề cập đến front-end?

▪️ Bởi vì khi front-end không được tối ưu, bất chấp back-end của bạn có mạnh mẽ cỡ nào, hoặc hệ thống của bạn chỉ có một, hay vài user truy cập họ vẫn phải chờ quá 5 giây để load trang

▶︎ Với thời lượng gần 2 giờ đồng hồ cho phép bạn tiếp cận lượng kiến thức đủ sâu để tối ưu front-end, là khâu cần tối ưu đầu tiên trong quá trình xây dựng một website, vốn phải đủ nhanh với 1 user trước khi nghĩ đến phục vụ hàng triệu user

🛎 Cùng điểm qua mục lục của video (Diễn giả trình bày bằng tiếng Việt)

Intro Front End Optimization [00:00:01]
How to make your web apps load fast [00:01:38]
Common Advices [00:03:50]
Why? [00:04:55]
What happen from entering URL on address bar to full rendered page 00:05:05
HTTP Request Anatomy [00:05:31]
DNS Lookup [00:06:32]
Initial Connection [00:07:25]
Time to First Byte(TTFB) [00:10:13]
Advices for Initial Connecttion & TTFB [00:10:14]
Content Download [00:18:15]
Advices for Content Download [00:18:26]
Critical Rendering Path [00:22:31]
Advices for Critical Rendering Path [00:26:28]
How about Single Page App? [00:33:42]
Typical SPA’s downloaded HTML [00:44:44]
Common performance problems with Single Page App [00:45:30]
User-centric performance metrics [00:46:44]
SPA page speed optimization targets [00:49:53]
SPA Optimization Rules of Thumb [00:50:09]
What is common among Angular, React, Vue? [00:50:49]
Webpack [00:52:32]
Minify JS on production [00:53:49]
Shared Bundle [00:54:41]
Code Spliting [00:57:34]
Tree Shaking [01:01:05]
Webpack Bunble Analyzer [01:01:37]
Common tree shaking-ready techniques [01:03:57]
Preload and Prefetch [01:08:03]
Can we make critical rendering path works for SPA? [01:09:09]
What is Universal JS Applications [01:09:54]
Client only Redux architecture [01:11:17]
Universal Redux architecture [01:13:05]
How to audit your page? [01:16:47]
[demo] [01:16:50]
Benchmark on production [01:23:47]
What we discussed was only part of Front End Optimization [01:23:49]
The RAIL model [01:24:12]
Q&A [01:25:08]

Cùng rất nhiều thông tin bổ ích và trao đổi bên cạnh slide trình bày, hãy theo dõi toàn bộ nội dung của diễn giả Trần Trọng Thanh – CTO Naustudio, người có rất nhiều năm kinh nghiệm xử lý perfomance web.

Nguồn: trumbatdongsan.vn

Xem thêm bài viết khác: trumbatdongsan.vn/tong-hop

Related Posts

Hướng dẫn ghost win bằng phần mềm OneKey Ghost | CDL

June 3, 2020

June 3, 2020 6

Hướng dẫn ghost win bằng phần mềm OneKey Ghost. Ghost máy bằng OneKey Ghost. Tạo file ghost với OneKey Ghost....

TOP 50 mẫu Slide PowerPoint đẹp phục vụ cho thuyết trình

June 29, 2020

June 29, 2020 13

TOP 50 mẫu Slide PowerPoint đẹp phục vụ cho thuyết trình: Bạn là sinh viên, thường xuyên trình bày bài...

The First 17 Minutes of Starcraft Remastered

June 17, 2020

June 17, 2020 46

The first 17 minutes of Starcraft Remastered, an HD update to the classic strategy game. StarCraft 2: Nova Covert Ops...

ĐƠN GIẢN NHƯNG MÀ KHÔNG AI BIẾT ??? TĂNG FPS GIẢM LAG LOL ( PHẦN 2 ) MỚI NHẤT 2020 | HAIA3K46

June 10, 2020

June 10, 2020 22

❤ CẢM ƠN CÁC BẠN ĐÃ XEM VIDEO CỦA TÔI ❤ ► NẾU CÁC BẠN THẤY HAY HÃY CHO MÌNH...

Hướng dẫn Tải và Cài đặt phần mềm Microsoft Office 2013 Full Crack

June 13, 2020

June 13, 2020 43

Tải các phiên bản của phần mềm Microsoft Office — Phần mềm Office 2003: — Phần mềm Office 2007: —...

Tải và cài đặt Office 2019 Professional Plus thành công 1000%

July 8, 2020

July 8, 2020 44

Hướng dẫn tải và cài đặt Microsoft Office 2019 Professional Plus mới nhất 2020. Kèm link tải GOOGLE DRIVE tốc...

Phần mềm đọc đuôi .rar – Nén và giải nén – Download Winrar Free

June 19, 2020

June 19, 2020 48

Phần mềm đọc đuôi .rar – Nén và giải nén – Download Winrar Free. Link Download Winrar: – – –...

Opex vs Capex – what’s the difference?

July 2, 2020

July 2, 2020 5

Ever wondered what the difference between Operating Expense and Capital Expense and how it affects the company books? The video...

Các Hàm Ngày Tháng Trong Excel

June 8, 2020

June 8, 2020 5

Các hàm ngày tháng trong excel 1. Hàm TODAY – Cú pháp: TODAY() – Chức năng: Trả về ngày tháng năm hiện...

Cách xóa internet download manager, gỡ bỏ idm

June 12, 2020

June 12, 2020 23

Cách xóa internet download manager khởi máy tính giúp chúng ta có thể tải được video, file, ảnh khi đã...

Những Bài Thơ Chia Tay Người Yêu Đẫm Nước Mắt…Thơ Tình Buồn

July 6, 2020

July 6, 2020 12

Thơ tình buồn khi chia tay luôn mang một nổi buồn xót xa.Đó là cảm giác phải chia tay người...

Hàm Excel cơ bản và nâng cao – Cách sử dụng hàm FIND, SEARCH, MID trong Excel

July 5, 2020

July 5, 2020 5

Hướng dẫn cách sử dụng hàm FIND, SEARCH, MID trong Excel và cách kết hợp hàm FIND MID để truy...

Review laptop MSI GP62 Leopard Pro

June 18, 2020

June 18, 2020 7

Facebook: Youtube: Stream : Đóng góp ý kiến và câu hỏi về playdotaPP@gmail.com ——————————— Xem VietDota series: Xem VietDota –...

CÁCH TẠO TÀI KHOẢN WECHAT 2020 | KHÔNG CẦN QUÉT MÃ QR

June 19, 2020

June 19, 2020

CÁCH TẠO TÀI KHOẢN WECHAT 2020 | KHÔNG CẦN QUÉT MÃ QR – Các bạn xem từng bước để có...

Lk Thuyền Bỏ Bến Xưa – Tình Tuổi Ô Mai – Nỗi Lòng Kẻ Thứ 3 – Diệp Hoài Ngọc – Nhạc Trữ Tình Remix

June 16, 2020

June 16, 2020

Lk Thuyền Bỏ Bến Xưa – Tình Tuổi Ô Mai – Nỗi Lòng Kẻ Thứ 3 – Diệp Hoài Ngọc...

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *