Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
NEW
Programming

/

Web Development

Từ DOM đến pixel, chinh phục hoàn toàn quá trình rendering của trình duyệt và CRP - [DOM 완전 정복 Part 3]

Khóa học này bao gồm toàn bộ quá trình Critical Rendering Path (CRP) từ đầu đến cuối - cách trình duyệt nhận HTML để tạo DOM, kết hợp với CSSOM và vẽ pixel lên màn hình. Vượt ra ngoài việc thao tác DOM đơn giản, bạn sẽ học được CSS và JS ảnh hưởng như thế nào đến hiệu suất, tối ưu hóa hình ảnh·font, Lazy Loading, Intersection Observer, danh sách ảo, và thực hành với DevTools để có thể cải thiện hiệu suất web thực tế một cách đáng kể thông qua các chiến lược thực chiến.

11 học viên đang tham gia khóa học này

  • nhcodingstudio
실습 중심
웹개발
프론트엔드
dom
이론 실습 모두
HTML/CSS
JavaScript
React
DOM
frontend

Dịch cái này sang tiếng Việt

  • Bạn có thể hiểu toàn bộ quá trình mà trình duyệt vẽ màn hình từ DOM đến pixel.

  • Bạn có thể hiểu được tác động của việc tải CSS và JS đến hiệu suất và áp dụng các chiến lược tối ưu hóa.

  • Bạn có thể cải thiện các chỉ số hiệu suất cốt lõi bằng cách phân tích CRP(Critical Rendering Path).

  • Bạn có thể theo dõi và giải quyết các tắc nghẽn kết xuất thực tế bằng DevTools.

  • Có thể render nhanh chóng hàng nghìn dữ liệu bằng Virtual List.

  • Bạn có thể tối ưu hóa hình ảnh, font và iframe bằng Lazy Loading.

  • Có thể triển khai phát hiện hiển thị, cuộn vô hạn, v.v. bằng Intersection Observer.

  • Có thể tự tin giải thích các khái niệm thường gặp trong phỏng vấn như CRP, DOMContentLoaded.

  • Bạn có thể học được các nguyên lý tối ưu hóa hiệu suất có thể áp dụng cho cả framework SPA.

  • Bạn có thể phát triển năng lực giải quyết căn bản các vấn đề về hiệu suất web.

  • Bạn có thể trực tiếp xử lý các vấn đề UI chậm thường xảy ra trong thực tế từ nguyên nhân đến giải pháp.

  • Bạn có thể hiểu rõ nguyên lý bằng cách trực tiếp triển khai quá trình rendering của trình duyệt bằng code.

  • will-change, tăng tốc GPU và các kỹ thuật tối ưu hóa CSS hiện đại khác có thể được thực hành.

  • Có thể lựa chọn chiến lược tải script (async, defer, preload) theo từng tình huống cụ thể.

  • Bạn có thể biến những kiến thức học được thông qua nhiệm vụ tối ưu hóa hiệu suất thành của riêng mình.

Từ DOM đến pixel, chinh phục hoàn toàn quá trình rendering của trình duyệt và CRP

🚀 Từ DOM đến pixel, hãy quan sát bằng mắt mọi khoảnh khắc của quá trình render trình duyệt và tối ưu hóa!
🖼
Màn hình đột nhiên rung lắc (Layout Shift)
🎨
Chỉ thay đổi một nút mà toàn bộ trang phải vẽ lại (Paint),
Những khoảnh khắc animation không mượt mà và giật lag…

Tại sao hiện tượng này lại xảy ra?
Và trình duyệt trải qua quá trình nào để chuyển đổi HTML và CSS thành các pixel trên màn hình?

Khóa học này sẽ khám phá hoàn toàn bí mật đó, pipeline render của trình duyệt (CRP, Critical Rendering Path) từ cơ bản đến tối ưu hóa thực tế.

DOM, CSSOM, Render Tree, Layout, Paint, Composite - trong quá trình trực tiếp triển khai tất cả các giai đoạn rendering này bằng code, theo dõi thời gian thực bằng DevTools và xác nhận bằng mắt, bạn sẽ học một cách có hệ thống về nguyên lý trình duyệt tạo ra màn hình. Khóa học được thiết kế không chỉ dừng lại ở lý thuyết "rendering diễn ra như thế này", mà còn giúp bạn phát triển năng lực thực tế trong việc phân tích và tối ưu hóa các trang web chậm.

Đặc biệt sử dụng các công cụ chẩn đoán trực quan như Performance tab, Paint Flashing, FPS monitoring để phát hiện các điểm nghẽn, và học các chỉ số hiệu suất mà Google coi trọng như CLS(Layout Shift), Recalculate Style, Composite Layers. Cuối khóa học, bạn sẽ thực hành trực tiếp triển khai Virtual List để tối ưu hóa hàng nghìn DOM, từ đó có khả năng xử lý hiệu quả UI quy mô lớn ngay cả khi không sử dụng framework.

Sau khi hoàn thành khóa học này, bạn sẽ có được cảm giác có thể nhìn thấy bằng mắt và cải thiện bằng tay về cách trình duyệt diễn giải DOM, thời điểm nào hiệu suất bị suy giảm, và làm thế nào để cải thiện điều này. Trước khi chuyển sang các framework như React, Vue, nếu hiểu được CRP hoạt động ở tầng nền tảng thì việc tối ưu hóa hiệu suất và debug sẽ trở nên dễ dàng hơn rất nhiều.

[[SPAN_1]]🎯[[/SPAN_2]] Lập trình viên frontend cảm thấy mơ hồ về tối ưu hóa hiệu suất web

Nếu bạn tò mò về lý do tại sao trang web vẫn chậm dù đã rút gọn code, bạn có thể tìm ra câu trả lời bằng cách theo dõi từng bước hoạt động bên trong trình duyệt.

🧱 Publisher/Designer đã triển khai UI nhưng không thể giải thích 'tại sao lại chậm'

Nếu bạn tò mò về lý do tại sao trang web vẫn chậm dù đã rút gọn code, bạn có thể tìm ra câu trả lời bằng cách theo dõi từng bước hoạt động bên trong trình duyệt.

🧩 Người có kinh nghiệm dự án xử lý DOM quy mô lớn và danh sách

Thông qua việc triển khai Virtual List, bạn sẽ học cách thiết kế và tối ưu hóa cấu trúc xử lý mượt mà hàng nghìn phần tử.

💻 Kỹ sư cần cải thiện Core Web Vitals trong thực tế

Bạn có thể học các chiến lược tối ưu hóa được kết nối trực tiếp với các chỉ số hiệu suất của Google như CLS, LCP.

🔍 Người học muốn củng cố nền tảng trình duyệt trước khi chuyển sang React/Vue

Bạn có thể hiểu trước nguyên lý của CRP - nền tảng giải thích tại sao Virtual DOM hay các kỹ thuật tối ưu hóa lại cần thiết.

Nhà phát triển muốn tìm hiểu lý do tại sao animation bị giật và FPS giảm

Bạn sẽ học cách thiết kế animation thân thiện với GPU bằng cách phân tích đến từng khung hình thông qua tab Performance.

📱 Nhà phát triển đang lo lắng về sự suy giảm hiệu suất trong môi trường di động

Phù hợp với những ai muốn giải quyết các vấn đề về layout shift, giật lag khi cuộn và độ trễ nhập liệu xảy ra trên thiết bị cấu hình thấp bằng DevTools và các kỹ thuật tối ưu hóa.

🌐 Nhà hoạch định/phát triển xem xét cả hiệu suất hiển thị tìm kiếm và SEO

Core Web Vitals hiểu được tác động của điểm số lên thứ hạng tìm kiếm và có thể đồng thời tăng cường trải nghiệm người dùng cũng như hiệu suất tìm kiếm thông qua tối ưu hóa CLS/LCP/FID.

📌 Đặc điểm của khóa học này

  1. Học tập 100% trực quan
    Xác minh trực tiếp bằng mắt pipeline rendering của trình duyệt thông qua code và DevTools.

  2. Học tập cân bằng giữa lý thuyết và thực hành
    Giải thích rõ ràng các khái niệm cốt lõi, ngay lập tức xác minh bằng mã thực hành và phân tích DevTools để học tập một cách cân bằng.

  3. Huấn luyện nhiệm vụ thực tế
    Giải quyết các nhiệm vụ dự án tái hiện chính xác các vấn đề thực tế trong công việc như tối ưu hóa CLS, chẩn đoán render dashboard, tối ưu hóa trang giỏ hàng/thanh toán.

  4. Làm chủ hoàn toàn các chỉ số hiệu suất cốt lõi của web
    Thông qua thực hành đo lường và cải thiện trực tiếp các Core Web Vitals như CLS, LCP, FCP, bạn có thể tăng cường cả khả năng hiển thị trên tìm kiếm và trải nghiệm người dùng.

  5. Tăng cường khả năng phân tích hiệu suất rendering
    Bạn sẽ thành thạo sử dụng các công cụ hiệu suất DevTools như Paint Flashing, FPS monitoring, Layers visualization.

  6. Nắm vững chiến lược tối ưu hóa hiệu suất
    Đào tạo có hệ thống từ việc giảm thiểu Layout/Paint không cần thiết, tận dụng GPU composite, tách Critical CSS, đến async/defer loading.

  7. Kiến thức cần thiết trước khi học framework
    Khóa học đi sâu vào cơ chế nội bộ của CRP mà bạn nhất định phải biết để hiểu được tối ưu hóa hiệu suất của các thư viện như React/Vue.

  8. Kinh nghiệm cải thiện UX thực tế
    Trải nghiệm trực tiếp việc cải thiện các chỉ số UX thực tế như layout ổn định, rendering đầu tiên nhanh (cải thiện LCP), duy trì animation 60fps.

  9. Cảm giác dự án liên kết trực tiếp với thực tế công việc
    Vượt qua việc luyện tập code đơn thuần, phát triển cảm giác thực tế có thể chẩn đoán và giải quyết các tắc nghẽn hiệu suất xảy ra trong môi trường vận hành dịch vụ.

🎯 Bạn sẽ học những nội dung như thế này

🧱 Triển khai trực tiếp pipeline rendering

HTML·CSS mô phỏng quá trình chuyển từ DOM/CSSOM → Render Tree → Layout → Paint → Composite bằng code.

🔍 Phân tích DOM & CSSOM bằng DevTools

Trong tab Elements / Computed, bạn có thể kiểm tra bằng mắt cấu trúc DOM và style cuối cùng, tính toán Box Model.

📈 Theo dõi CRP bằng tab Performance

Recalculate Style → Layout → Paint → Composite xác nhận luồng thực thi và quá trình Layerize·Commit trong timeline.

📐 Tối ưu hóa Layout Shift & CLS

Thử nghiệm sự rung lắc màn hình không mong muốn và học cách đo lường·cải thiện điểm CLS.

🎨 Trực quan hóa Paint Flashing & Layers

Xác định các phần tử được vẽ lại lặp lại và phân tích tách lớp GPU thành 3D.

Phân tích hiệu suất FPS & khung hình

FPS và thời gian khung hình được đo lường để tìm ra các điểm nghẽn cổ chai của animation và tối ưu hóa.

🛠 Tối ưu hóa hiệu suất thực tế

Thực hành các kỹ thuật cải thiện CLS, Lazy Loading, Virtual List, Infinite Scroll thông qua các ví dụ như đặt chỗ·thanh toán·dashboard.

🚀 Cải thiện các yếu tố chặn render

Trích xuất Critical CSS, sử dụng JS async/defer, preload·preconnect·prefetch để cải thiện LCP/FCP.

📂 Sử dụng vòng đời trình duyệt

Hiểu thời điểm của các sự kiện DOMContentLoaded, load, beforeunload và tối ưu hóa bảo vệ UX·ghi log phiên.

🧩 Tổng hợp chiến lược tối ưu hóa CRP toàn diện

DOM đến pixel - tổng hợp toàn bộ quy trình rendering, các chỉ số hiệu suất và các mẫu tối ưu hóa.

🧩 Chúng tôi xử lý những nhiệm vụ thực tế như thế này

Trong khóa học [DOM 완전 정복 Part 3] này, chúng ta sẽ không chỉ học qua các ví dụ code đơn giản mà sẽ học thông qua việc giải quyết các nhiệm vụ thực tế được lấy từ những tình huống thực sự gặp phải trong quá trình phát triển dịch vụ.


Mission #1 – Nhiệm vụ chỉnh sửa kiểu dáng tiêu đề
Mục tiêu thực hành: Phát triển khả năng theo dõi và sửa chữa các vấn đề UI không khớp với thiết kế của designer.
Tóm tắt nội dung: Sử dụng panel Elements/Styles của DevTools để phân tích các thuộc tính CSS sai của tiêu đề và chỉnh sửa kiểu dáng để có kết quả giống với thiết kế.

🎨 Mission #2 – Nhiệm vụ thiết kế lại bảng giá khuyến mãi
Mục tiêu thực hành: Phân tích vấn đề bố cục rối rắm và cải thiện UI.
Tóm tắt nội dung: Sử dụng DevTools để theo dõi các xung đột style không cần thiết, sau đó thông qua refactoring code để sắp xếp gọn gàng phần bảng giá và cải thiện cấu trúc phân cấp thị giác.

📏 Mission #3 – Nhiệm vụ tối ưu hóa CLS
Mục tiêu thực hành: Đo lường vấn đề layout shift bằng số liệu và triển khai UI ổn định.
Tóm tắt nội dung: Theo dõi sự kiện Layout Shift trong tab Performance và tính toán điểm CLS, sau đó áp dụng việc chỉ định kích thước hình ảnh, chiến lược tải font, v.v. để hoàn thiện trang web không bị rung lắc.

📊 Mission #4 – Nhiệm vụ chẩn đoán tắc nghẽn render dashboard
Mục tiêu thực hành: Kiểm tra hiệu suất dashboard có nhiều thẻ KPI·bảng·biểu đồ mini.
Tóm tắt nội dung: Sử dụng Paint Flashing và tab Layers để tìm ra các khu vực render lại thường xuyên, đảm bảo tính ổn định khung hình thông qua tối ưu hóa dựa trên GPU composite (transform/opacity).

🧾 Mission #5 – Nhiệm vụ tối ưu hóa UX đặt chỗ/biên lai
Mục tiêu thực hành: Tối ưu hóa kịch bản đặt chỗ và biên lai thanh toán thực tế.
Tóm tắt nội dung: So sánh trước và sau tối ưu hóa bằng tab Performance, giảm thiểu Recalculate Style và Paint không cần thiết để cải thiện luồng đặt chỗ/thanh toán hoạt động mượt mà.

🛒 Mission #6 – Nhiệm vụ cải thiện hiệu suất trang giỏ hàng & thanh toán
Mục tiêu thực hành: Duy trì hiệu suất ổn định trong quy trình cốt lõi của thương mại điện tử.
Tóm tắt nội dung: Tối thiểu hóa chi phí Layout khi thêm/xóa sản phẩm trong giỏ hàng và tối ưu hóa việc tải tài nguyên trong giai đoạn thanh toán để duy trì trải nghiệm người dùng liền mạch.

Mission #7 – Nhiệm vụ quản lý vòng đời trình duyệt
Mục tiêu thực hành: Kiểm soát đúng cách việc khởi tạo trình duyệt và ghi log phiên làm việc.
Tóm tắt nội dung: Phân tích thời điểm của các sự kiện như DOMContentLoaded, load, beforeunload và thiết kế cấu trúc đảm bảo bảo vệ dữ liệu UX cũng như tính ổn định của log.

🎯 Mission #8 – Nhiệm vụ tối ưu hóa Critical CSS
Mục tiêu thực hành: Giải quyết vấn đề CSS chặn quá trình render ban đầu.
Tóm tắt nội dung: Chỉ giữ lại vùng Above-the-Fold cốt lõi dưới dạng Critical CSS, phần còn lại sẽ được tách riêng theo phương thức lazy loading để cải thiện đáng kể tốc độ tải trang.

Mission #9 – Tối ưu hóa JS async/defer
Mục tiêu thực hành: Tối ưu hóa các script chặn quá trình rendering.
Tóm tắt nội dung: Điều chỉnh thời điểm thực thi của thẻ script bằng thuộc tính async, defer để cải thiện tốc độ rendering trang web mà không bị chặn.

🚀 Mission #10 – Chiến lược Preload & Prefetch
Mục tiêu thực hành: Rút ngắn LCP và tăng tốc độ cảm nhận ban đầu.
Tóm tắt nội dung: Sử dụng preload, preconnect, prefetch để tải trước các hình ảnh, font và tài nguyên cốt lõi nhằm tối đa hóa hiệu suất.

🎬 Mission #11 – Nhiệm vụ tối ưu hóa trang đích media
Mục tiêu thực hành: Cải thiện hiệu suất ban đầu của trang có nhiều hình ảnh và video quy mô lớn.
Tóm tắt nội dung: Áp dụng tải trễ Video và Lazy Loading hình ảnh để rút ngắn LCP/FCP và cải thiện hiệu suất cảm nhận.

📱 Mission #12 – Nhiệm vụ tối ưu hóa hiệu suất feed sản phẩm mới
Mục tiêu thực hành: Duy trì hiệu suất ngay cả với feed dữ liệu quy mô lớn.
Tóm tắt nội dung: Triển khai Virtual List và Infinite Scroll, kết hợp với Lazy Loading cho media/script để cung cấp UX nhanh chóng.

Lưu ý trước khi học

Kiến thức tiên quyết và lưu ý

  • Nếu bạn đã biết cấu trúc cơ bản của HTML/CSS và cú pháp cơ bản của JavaScript thì có thể theo dõi một cách suôn sẻ.

  • Đặc biệt, tốt nhất là bạn nên biết về addEventListener, if/else, forEach, và cách truy cập đối tượng.

  • Có thể học trên cả môi trường Mac/Windows, chỉ cần có trình duyệt web là có thể thực hành mà không cần cài đặt thêm gì.

  • Chúng tôi khuyến nghị sử dụng trình duyệt Chrome mới nhất.

  • (Tùy chọn) Part 1: [DOM 완전 정복 Part 1] – 구조 탐색과 조작의 모든 것


  • (Tùy chọn) Part 2: [DOM 완전 정복 Part 2] – Từ sự kiện đến SPA, động cơ thiết yếu của web tương tác


Khuyến nghị cho
những người này

Khóa học này dành cho ai?

  • Người mới bắt đầu frontend muốn tạo ra website nhanh

  • Nhà phát triển startup muốn giảm tỷ lệ người dùng rời bỏ do trang web chậm

  • Sinh viên chuẩn bị việc làm muốn thêm "dự án tối ưu hóa hiệu suất" vào portfolio

  • Nhà thiết kế kiêm lập trình viên đang lo lắng vì tốc độ tải chậm do hình ảnh, font chữ và video

  • Các lập trình viên đã từng gặp phải tình trạng hiệu suất giảm do có quá nhiều danh sách trong các framework như React, Vue

  • Người học JavaScript từng bối rối với các thuộc tính như "async, defer"

  • Nhà phát triển web cần cải thiện điểm Core Web Vitals trong dịch vụ thực tế

  • Những người đã thử phân tích hiệu suất bằng Developer Tools nhưng cảm thấy bối rối không biết nên sửa chỗ nào

  • Lập trình viên frontend junior quan tâm đến tối ưu hóa cuộn trang và rendering trong dự án dựa trên SPA

  • Người học đầy nhiệt huyết muốn đào sâu đến cùng câu hỏi "Tại sao web của tôi lại chậm?"

Cần biết trước khi bắt đầu?

  • Hiểu biết cơ bản về các thẻ HTML/CSS cơ bản và cấu trúc DOM

  • Cú pháp cơ bản của JavaScript

  • Kinh nghiệm về querySelector và lựa chọn/thao tác các phần tử DOM

  • (Tùy chọn) [DOM 완전 정복 Part 1] – Tất cả về khám phá cấu trúc và thao tác

  • (Tùy chọn) [DOM 완전 정복 Part 2] – Từ sự kiện đến SPA, động cơ thiết yếu của web tương tác

Xin chào
Đây là

147

Học viên

6

Đánh giá

4.3

Xếp hạng

9

Các khóa học

안녕하세요, 우리동네코딩 스튜디오에 오신 것을 환영합니다!

우리동네코딩 스튜디오는 카네기 멜론, 워싱턴, 토론토, 워터루 등 북미의 주요 대학에서 컴퓨터공학을 전공하고, Google, Microsoft, Meta 등 글로벌 IT 기업에서 실무 경험을 쌓은 개발자들이 함께 만든 교육 그룹입니다.

처음에는 미국과 캐나다의 컴퓨터공학 전공자들끼리 함께 공부하며 성장하고자 만든 스터디 모임에서 시작되었습니다. 각기 다른 대학, 다른 시간대에 있었지만 함께 문제를 해결하고 서로에게 배운 그 시간은 매우 특별했고, 자연스럽게 이런 생각이 들었습니다.

“우리가 공부하던 이 방식, 그대로 다른 사람에게도 전하면 어떨까?”

그 물음이 바로 우리동네코딩 스튜디오의 출발점이었습니다.

현재는 약 30명의 현직 개발자와 컴퓨터공학 전공 대학생들이 각자의 전문 분야를 맡아, 입문부터 실전까지 아우르는 커리큘럼을 직접 설계하고 강의합니다. 단순한 지식 전달을 넘어, 진짜 개발자의 시선으로 배우고 함께 성장할 수 있는 환경을 제공합니다.

“진짜 개발자는, 진짜 개발자에게 배워야 합니다.”

저희는 웹 개발의 전 과정을 처음부터 끝까지 체계적으로 다루되, 이론에 머무르지 않고 실습과 실전 중심의 피드백을 통해 실력을 키워드립니다.
수강생 한 사람, 한 사람의 성장을 함께 고민하고 이끌어가는 것이 우리의 철학입니다.

🎯 우리의 철학은 분명합니다.
"진정한 배움은 실천에서 오고, 성장은 함께할 때 완성된다."

개발을 처음 시작하는 입문자부터, 실무 능력을 키우고 싶은 취업 준비생, 진로를 탐색 중인 청소년까지.
우리동네코딩 스튜디오는 모두의 출발점이자, 함께 걷는 든든한 동반자가 되고자 합니다.

이제, 혼자 고민하지 마세요.
우리동네코딩 스튜디오가 여러분의 성장을 함께하겠습니다.


Welcome to Neighborhood Coding Studio!

Neighborhood Coding Studio was founded by a team of developers who studied computer science at top North American universities such as Carnegie Mellon, the University of Washington, the University of Toronto, and the University of Waterloo, and went on to gain hands-on experience at global tech companies like Google, Microsoft, and Meta.

It all began as a study group formed by computer science students across the U.S. and Canada, created to grow together by sharing knowledge, solving problems, and learning from one another.
Though we were attending different schools in different time zones, the experience was so meaningful that it led us to one simple thought:

“What if we shared this way of learning with others?”

That thought became the foundation of Neighborhood Coding Studio.

Today, we are a team of around 30 active developers and computer science students, each taking responsibility for their area of expertise—designing and delivering a curriculum that spans from foundational knowledge to real-world development.
We’re not just here to teach—we’re here to help you see through the lens of real developers and grow together.

“To become a real developer, you must learn from real developers.”

Our courses take you through the entire web development journey—from start to finish—focused on hands-on practice, real-world projects, and practical feedback.
We care deeply about each learner’s growth and are committed to supporting your path every step of the way.

🎯 Our philosophy is simple but powerful:
"True learning comes from doing, and true growth happens together."

Whether you're just getting started, preparing for your first job, or exploring your future in tech,
Neighborhood Coding Studio is here to be your launchpad—and your trusted companion on the journey.

You don’t have to do it alone.
Let Neighborhood Coding Studio walk with you toward your future in development.

Chương trình giảng dạy

Tất cả

42 bài giảng ∙ (2giờ 15phút)

Tài liệu khóa học:

Tài liệu bài giảng
Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Chưa có đủ đánh giá.
Hãy trở thành tác giả của một đánh giá giúp mọi người!

Ưu đãi có thời hạn

20 ₫

35%

835.769 ₫

Khóa học khác của nhcodingstudio

Hãy khám phá các khóa học khác của giảng viên!

Khóa học tương tự

Khám phá các khóa học khác trong cùng lĩnh vực!