Ưu đãi trong tuần: Nhập mã UD50 giảm 50k cho đơn từ 300k!
Trang chủ
Menu

Critical Rendering Path (CRP) For Web Development In 2026

Đường dẫn Hiển thị Tới hạn (CRP) Cho Phát triển Web Năm 2026

Đường dẫn Hiển thị Tới hạn (CRP) Cho Phát triển Web Năm 2026

Khóa học nâng cao về Đường dẫn Hiển thị Tới hạn (CRP) dành cho mọi người! Tìm hiểu về DOM, CSSOM, tài nguyên chặn hiển thị, v.v.

4.7
(356 đánh giá)
3,025 học viên
Giảng viên
Clyde Matthew
Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao
50.000đ 349.000đ -86%
✓ Xem giỏ hàng và thanh toán
Bao gồm phụ đề tiếng Việt, tiếng Anh
8.5 giờ video
144 bài giảng
8 bài quiz
Truy cập vĩnh viễn
Học trên mọi thiết bị
Cập nhật: 30/05/2026

Bạn sẽ học được gì

Trở thành chuyên gia về Đường dẫn Hiển thị Tới hạn (CRP)
Học các khái niệm nâng cao như phân tích dự đoán, async, preload, defer, v.v.
Hiểu rõ quy trình DOM, CSSOM, Cây Hiển thị, Bố cục & Vẽ
Tìm hiểu cách CRP ảnh hưởng đến tốc độ và hiệu quả của trang web
Tăng tốc website và ứng dụng của bạn & cải thiện tỷ lệ chuyển đổi NGAY HÔM NAY
Học cách viết mã JavaScript ở đâu để tối ưu hiệu suất
Ví dụ thực tế về cách AJAX hoạt động (chúng ta sử dụng cả đối tượng XMLHttpRequest và Fetch API mới hơn)
Hiểu về tài nguyên chặn hiển thị và cách tránh chúng
Nắm vững các khái niệm như DOM, CSSOM, Cây Hiển thị
Nắm vững Audit Lighthouse và cách sử dụng nó
Tối ưu hóa bất kỳ website nào về tốc độ bằng cách viết mã tốt hơn
Tìm hiểu về vai trò của HTTP và AJAX trong bối cảnh CRP
Hiểu rõ Network Panel, Performance Panel và các chức năng của Audit Lighthouse trong DevTools
Hiểu những nguyên lý cơ bản của HTTP, TCP, Gói Dữ liệu và nhiều hơn thế nữa!
Hiểu Tài nguyên Chặn Hiển thị là gì và cách chúng ta giải quyết vấn đề này
Kỹ năng sẽ giúp bạn ứng tuyển các vị trí như Web Developer, Front End Developer, Javascript Developer và Full Stack Developer
Từ người mới bắt đầu đến chuyên gia (nâng cao +)
Cập nhật liên tục để bạn luôn nắm bắt xu hướng mới
Bạn sẽ trở thành một chuyên gia
Viết JavaScript và hiểu Polyfill làm gì
Tự viết Polyfill của riêng bạn
Cách sử dụng trình soạn thảo văn bản hoàn toàn miễn phí
Mang lại kiến thức chuyên sâu để nâng cao khả năng và sự tự tin của bạn
Tất cả các kỹ thuật được sử dụng bởi lập trình viên chuyên nghiệp
Giới thiệu về HTTP/2 và HTTP/3 và cách chúng cải thiện giao thức HTTP/1.1 hiện tại
Hỗ trợ từ tôi
Bài giảng bổ sung + ví dụ thực hành

Yêu cầu

Mong muốn mạnh mẽ trở thành một nhà phát triển web full stack
Kiến thức cơ bản về HTML, CSS và JavaScript sẽ hữu ích, nhưng không hoàn toàn bắt buộc
Mong muốn HIỂU toàn bộ quy trình hoạt động của trang web đằng sau hậu trường
Mong muốn BIẾT cách sử dụng DevTools – Performance và Network Panels
Cần có máy tính vì bạn cần lập trình cùng tôi để học hiệu quả

Đối tượng phù hợp

Tất cả nhà phát triển muốn nâng cao kỹ năng lập trình
CÓ: Khóa học này dành cho người mới bắt đầu. Hướng đến những người mới với thế giới phát triển web. Không cần kinh nghiệm JavaScript trước đó
KHÔNG: Khóa học này KHÔNG chỉ dành cho người mới bắt đầu. Đây là một khóa học toàn diện từ cơ bản đến nâng cao, phù hợp cho người có kiến thức trung cấp, biết những điều cơ bản và có ý tưởng về cách trình duyệt lấy dữ liệu từ máy chủ và hiển thị lên trang. Học viên có kinh nghiệm đôi khi có thể bỏ qua một phần...
CÓ: Khóa học này dành cho ai muốn trở thành lập trình viên chuyên nghiệp, thành thạo và tự tin trong toàn bộ quy trình hiển thị
Những ai muốn học kỹ thuật lập trình hiện đại để tăng tốc trải nghiệm tải trang mà không cần thư viện và framework của bên thứ ba
Những ai quan tâm đến việc xây dựng framework của riêng họ, hoặc có khả năng học tốt hơn từ mã nguồn của các framework và thư viện nổi tiếng khác
Những ai muốn bắt đầu sử dụng các framework (ví dụ: như Angular, React hoặc Node) phụ thuộc nhiều vào JavaScript và hiểu quy trình luồng của phát triển web back-end
Những ai đã có một số kiến thức về phát triển web, nhưng ít hiểu biết về cách nó hoạt động đằng sau hậu trường và cách thực hiện các phương pháp hay nhất trên website của họ

Nội dung khóa học

9 phần • 144 bài giảng
1 CRP - Giới thiệu Phần
2 Đề cương Khóa học CRP
3 Nội dung khóa học này bao gồm
4 Cách trình duyệt từng thực hiện yêu cầu dữ liệu
5 AJAX - giới thiệu
6 Tại sao chúng ta thảo luận về AJAX trong khóa học CRP này?
7 AJAX có còn phù hợp ngày nay không?
8 Quay lại một chút
9 XMLHttpRequest - giới thiệu
10 Console là gì?
11 Xây dựng đối tượng XMLHttpRequest
12 Xử lý dữ liệu phản hồi
13 Lưu trữ và tệp
14 Một ví dụ khác - hiển thị thời gian từ máy chủ
15 Xây dựng hàm thời gian tùy chỉnh của chúng ta
16 Thứ tự có quan trọng không?
17 Một ví dụ khác - tải hình ảnh và tên người
18 Định nghĩa hàm requestListener của chúng ta
19 XMLHttpRequest - tóm tắt ví dụ hình ảnh và tên của chúng ta
20 Fetch - giới thiệu
21 Fetch - thiết lập
22 Fetch - phương thức .json() là gì
23 Fetch - với POST
24 Thay thế XMLHttpRequest bằng Fetch cho ví dụ hình ảnh và tên của chúng ta
25 Kết luận
26 Muốn tìm hiểu thêm về AJAX?
1 Chức năng chính của Trình duyệt
2 Trình duyệt và W3C
3 W3C là gì?
4 Yêu cầu của trình duyệt - giới thiệu
5 Gói dữ liệu là gì?
6 Giải thích Gói tin bằng ngôn ngữ đơn giản
7 Gói tin - Giải thích 5 Lớp
8 Làm sáng tỏ mô hình 5 lớp
9 Gói tin - Ví dụ
10 Giao thức HTTP - Giới thiệu
11 HTTP - Yêu cầu và Phản hồi
12 Quay lại một chút - những điều này rất thực tế
13 Muốn biết thêm về gói tin, TCP và các lựa chọn thay thế HTTP?
1 Lưu ý nhanh
2 Trước khi bạn tiếp tục ...
3 Polyfill là gì?
4 Kiểm tra xem phương thức forEach() có tồn tại trong Trình duyệt của chúng ta không
5 forEach() là gì
6 Ví dụ thực tế về forEach()
7 Polyfill forEach() tùy chỉnh - giới thiệu
8 Polyfill forEach() tùy chỉnh - bước đầu tiên
9 Chờ đã ...
10 Polyfill forEach() tùy chỉnh - hàm callback
11 THIS là gì
12 Polyfill forEach() tùy chỉnh - hoàn thiện
13 Kết thúc
1 Giới thiệu
2 JS Engine, Rendering Engine và chất kết dính giữ mọi thứ lại với nhau (Trình duyệt)
3 Trình duyệt hoạt động như thế nào (các bước nó thực hiện để lấy dữ liệu và hiển thị)
4 Đường dẫn Hiển thị Tới hạn - Giới thiệu
5 Tổng quan về Đường dẫn Hiển thị Tới hạn
6 Xây dựng DOM - Phần 1
7 Xây dựng DOM - Phần 2
8 Tóm tắt nhanh
9 Performance Tab - DevTools
10 Call Tree - một cách khác để phân tích hoạt động website của bạn
11 Bottom-Up & Event Log - một cách khác để phân tích hoạt động website của bạn
12 CSSOM - Giới thiệu
13 Tại sao chúng ta cần có Cây CSS?
14 Cách xem quy trình CSSOM cho website của bạn - Recalculate Style
15 Cây Hiển thị - Giới thiệu
16 Cây Hiển thị - Thử thách
17 Cây Hiển thị - Giải pháp
18 Tóm tắt nhanh - Cây Hiển thị
19 So sánh DOM, CSSOM và Cây Hiển thị
20 Cây Hiển thị - Bố cục
21 Xem quy trình Bố cục trong DevTools
22 Cây Hiển thị - Vẽ
23 Quay lại một chút
1 Giới thiệu về Tài nguyên Chặn Hiển thị
2 Tài nguyên Chặn Hiển thị - Giới thiệu
3 Làm thế nào để CSS không chặn hiển thị (gợi ý: Media Queries)
4 Media Types - Ví dụ
5 Cách tham chiếu đến các tệp CSS của bạn
6 JavaScript có chặn hiển thị không?
7 JavaScript và DOM
8 Thứ tự mã của bạn quan trọng - phần 1
9 Thứ tự mã của bạn quan trọng - phần 2 (giải pháp)
10 JavaScript và CSSOM
11 Ví dụ về JavaScript phải đợi CSS
12 Quay lại: DOM vs CSSOM vs JavaScript
13 Mối quan hệ trực quan giữa DOM, CSSOM và JavaScript
14 JavaScript chặn hiển thị
15 Cách tiếp cận 1: Đặt JavaScript ở cuối trang của bạn
16 Thời gian Hỏi & Đáp
17 Cách tiếp cận 2: Sử dụng Async
18 So sánh Cách tiếp cận 1 (Cuối trang) vs Cách tiếp cận 2 (Async)
19 Cách tiếp cận 3: Defer
20 So sánh Cách tiếp cận 2 (Async) vs Cách tiếp cận 3 (Defer)
21 Cách tiếp cận 4: Trình nghe sự kiện tùy chỉnh - phần 1
22 Cách tiếp cận 4: Trình nghe sự kiện tùy chỉnh - phần 2 (+ hãy phân tích toàn bộ quá trình hiển thị)
23 Async vs Defer vs Tùy chỉnh
24 Cách tiếp cận 5: Preload
25 Lưu ý nhanh
26 Preload - Thông tin Thêm
27 Preload & hình ảnh và cách chúng ảnh hưởng đến CRP
28 Tóm tắt nơi chúng ta có thể đặt JS để cải thiện CRP
29 Tổng quan - Một Trang
30 Giới thiệu về phân tích dự đoán
31 Phân tích dự đoán là gì
32 Phân tích Dự đoán - Ôn tập nhanh
1 Giới thiệu phần
2 Tại sao Network Panel quan trọng
3 Giới thiệu về Network Panel
4 Tất cả các cột trong Network Panel có ý nghĩa gì
5 Response và Request Headers
6 Tab Timing và waterfall stack
7 3 yêu cầu mạng phổ biến nhất bạn sẽ thấy
8 Các giai đoạn thời gian - giới thiệu
9 Vòng đời của một yêu cầu
10 Các giai đoạn thời gian - giải thích chi tiết
11 CDN - giới thiệu
12 Phân tích Yêu cầu Tệp trong Network Panel
13 Placeimg đã ngừng hoạt động
14 Network Panel - Tổng quan Cấp cao
15 Phân tích CRP của tệp chúng ta - không CSS và không JS
16 Cột size là gì?
17 Cách xác định số lượng tài nguyên tới hạn và lượt truy cập máy chủ
18 Hãy thêm JavaScript và CSS
19 Hiển thị tệp mới của chúng ta với JavaScript và CSS
20 Tác động mà JavaScript và CSS có đối với CRP của chúng ta
21 JavaScript nội tuyến
22 Thêm ASYNC vào tệp của chúng ta và tác động của nó đối với CRP
23 Các bước thực hiện để tối ưu hóa Đường dẫn Hiển thị Tới hạn
24 Audit Lighthouse đến giải cứu
25 Audit Lighthouse - Giới thiệu
26 Audit Lighthouse - Ví dụ
27 Tại sao tốc độ di động thường chậm hơn tốc độ máy tính để bàn?
1 Giới thiệu phần
2 HTTP/1.1 - Ôn tập
3 HTTP/2 - nó đến từ đâu?
4 HTTP/2 - Bạn có biết?
5 HTTP/2 - nó là gì?
6 Nhận xét nhanh về HTTP/2
7 HTTP/2 Hỏi và Đáp
8 Vài lời về HTTP/3
1 Làm tốt lắm
2 Bài giảng Bổ sung - tiếp theo là gì?

Giới thiệu khóa học

*** THE BEST CRP COURSE ON UDEMY ***

  • Boost Performance: A 1-second delay in page load time can lead to 30% fewer page views, lower customer satisfaction, and decreased conversions.

  • Master Rendering: Learn how browsers transform HTML, CSS, and JavaScript into engaging websites.

  • Hands-On Learning: Engage with practical examples and performance analysis techniques.

  • Comprehensive Coverage: From DOM and CSSOM construction to render trees and pixel painting, grasp the entire rendering process.

  • Increase Profits: A few extra seconds can significantly impact viewer attention, interest, conversions, and ultimately your bottom line.

Beyond improving Google rankings, even a few extra seconds can significantly boost viewer attention, engagement, conversions, and ultimately, profitability.

Understanding the Critical Rendering Path (CRP) will empower you to become an exceptional programmer.

Through practical examples and performance analysis techniques, this course equips you with the skills to create high-performance, interactive web applications that deliver content swiftly and seamlessly. Join us to unlock the secrets of web rendering and elevate your web development capabilities!


Let me share my CRP knowledge secrets with you

Understanding the Critical Rendering Path will enable you to become an awesome programmer. Take control through understanding. Delivering a fast web experience requires a lot of work by the browser. Most of this work is hidden from web developers: we write the markup, and a nice looking page comes out on the screen. But how exactly does the browser go from consuming our HTML, CSS, and JavaScript to rendered pixels on the screen? By understanding this, you will be able to write better code in order to boost your website traffic, know how to precision fix and tweak behaviour and performance, improve your market penetration and your margins. You’ll also gain an advantages over other developers who seem to just push the buttons without fully appreciating what is happening.


WHAT YOU WILL LEARN IN THIS COURSE

You’ll learn about the Critical Rendering Path. This refers to the set of steps browsers must take to fetch and then convert HTML, CSS and JavaScript into living, breathing websites. From there, you’ll start exploring and experimenting with tools to measure performance. You’ll learn simple, yet very powerful strategies to deliver the first pixels to the screen as early as possible.

Knowledge of the CRP is incredibly useful for understanding how a site's performance can be improved. There are various stages to the CRP, such as constructing the DOM, constructing the CSSOM, running JavaScript, creating the Render Tree, generating the Layout and finally Painting pixels to the screen. As you can see, this covers a whole bunch of interesting material.

By the end of this course, you'll be able to “speak” CRP by gaining an understanding of how to fetch data from a server and then get that data to your user as quickly as possible. We dig deeper in every lecture, learning about things like HTTP, TCP, data packets, render blocking resources, and a whole bunch more! This course has many bonus lectures which extend your knowledge base and test your skills.

Through practical examples, this course helps you understand the CRP piece by piece. And we use the latest and best features of JavaScript and browsers (like the new Fetch API) along the way so you can stay ahead of the pack.


*** A comprehensive Web Development course on Udemy ***

Successful programmers know more than rote learning a few lines of code. They also know the fundamentals of how web development works behind the scenes. If you’re wanting to become a full stack developer, you need to know how to deal with server requests and responses, loading, scripting, rendering, layout, and the painting process of the pixels to the screen.

I want you to become a successful programming Grandmaster.

I want you to be able to apply what your learn in this course to your webpage.

This course is perfect for you.


A unique view

Understanding web development is a vast topic. To get you up to speed, I’ve spent many months thinking about where to focus content and how to deliver it to you in the best possible way.

You will learn "why" things work and not just "how". Understanding the fundamentals of web development is important as it will allow you to write better code. And trust me, every website encounters bugs and slow rendering times, and without understanding the fundamentals you will be totally lost.


How is this course different?

There are lots of great courses on web development. Pity they never get into the detail about how we get our website to your users screen as quickly as possible – which covers full stack development.

In this course, I focus on true web performance. This includes server requests and responses, loading, scripting, rendering, layout, and the painting of the pixels to the screen.


Practice makes perfect

Theory is theory … but there’s nothing like getting behind your computer and typing in code. That’s why we will be coding, laughing and pulling out our hair together as we code real life websites and exercises during this course.

I love practical examples, which is why we build simple pages and analyze the CRP together by using the Network Panel, Performance Panel and Audit Lighthouse within DevTools.


Is This Course for You?

Absolutely! This course is suitable for all levels of web developers. If you identify with any of these categories, it’s perfect for you:

  • Beginner Programmers: Learn HTTP fundamentals that apply across languages.

  • Web Performance Enthusiasts: Gain a solid understanding of how to optimize site speed.

  • Aspiring Backend Developers: Understand AJAX requests.

  • Curious Learners: Discover how the Critical Rendering Path works behind the scenes.

  • Frustrated Students: If previous courses left you confused about web development concepts.


Meet Your Instructor: Clyde

Clyde is a coding enthusiast who has been immersed in the world of computers since the age of 7.

With years of experience in web development and a passion for teaching, Clyde brings a wealth of knowledge and practical insights to the course. His engaging teaching style and real-world examples will make complex concepts accessible and enjoyable.


Enrol now

Don’t miss this opportunity to elevate your web development skills and unlock the potential of real-time communication with WebSockets.

Right this second, your competitors are learning how to become better web developers.

Web development is a blazing hot topic at the moment. But you have a distinct advantage. This course offers memorable learning topics, actionable tactics and real-world examples.

Get ready to transform your projects into interactive experiences that captivate users and make you money!

Let's get crackin'

Khóa học liên quan

Khám phá thêm các khoá học cùng chủ đề

Hiển thị tất cả khoá học Frontend Optimization
Hiển thị tất cả khoá học Javascript
Hiển thị tất cả khoá học Web Development
Zalo
Tôi có thể tư vấn khoá học cho bạn 😊