フロントエンド開発者向け、実践的なWebパフォーマンス最適化(feat. React) - Part. 1
hackurity01
React で作成された Web サービスのパフォーマンスを測定し、より高速で効率的に最適化する方法を学びます。
중급이상
React, Chrome DevTools
BEST
Tối ưu hóa hiệu suất web thực tế dành cho nhà phát triển front-end (hợp tác với React) - Phần. 2
React tạo ra dịch vụ web và học cách đo lường hiệu suất cũng như tối ưu hóa nhanh hơn và hiệu quả hơn.
Đánh giá từ những học viên đầu tiên
Dịch cái này sang tiếng Việt
Cách phân tích hiệu suất của dịch vụ web
Nhiều kỹ thuật tối ưu hóa hiệu suất web khác nhau
Nguyên lý hoạt động của trình duyệt
Cách sử dụng Chrome devtools
Cách sử dụng React devtools
Tối ưu hóa hiệu suất giao diện người dùng
Để phát triển thành một nhà phát triển FE có năng lực
Luyện tập! Tối ưu hóa hiệu suất giao diện web.
Chạy ở phần cuối
Hãy xem những đánh giá lớp học sống động!
Bài giảng này thì sao?
Inflearn tốt nhất!
Chuỗi bài viết tối ưu hóa hiệu suất web thực tế 🎲
Khóa học này dạy bạn các kỹ thuật phân tích và tối ưu hóa cho các dịch vụ web thông qua nhiều ví dụ khác nhau.
Không giống như các bài giảng tối ưu hóa vô trách nhiệm thông thường chỉ dạy lý thuyết,
Bạn có thể học cách phân tích và tối ưu hóa trực tiếp thông qua các ví dụ thực tế .
Đây là bài giảng đầu tiên về tối ưu hóa hiệu suất trục X của Hàn Quốc !
10% Frontend hàng đầu
Dành cho các nhà phát triển.
Đã khá lâu kể từ khi lĩnh vực được gọi là front-end xuất hiện,
Rất ít nhà phát triển front-end biết nhiều về tối ưu hóa hiệu suất web.
Trong thực tế này,
Học các kỹ thuật tối ưu hóa hiệu suất web để trở thành chuyên gia hàng đầu về front-end .
Bạn có thể lựa chọn xem mình có muốn trở thành một nhân viên bình thường chỉ biết xuất bản bài viết hay không.
Bài giảng trước
Hãy xem thử nhé.
Nội dung học tập
- Phân tích sử dụng bảng Hiệu suất
- Phân tích sử dụng bảng điều khiển Lighthouse
- Phân tích sử dụng bảng điều khiển Mạng
- Phân tích sử dụng bảng điều khiển Coverage
- Cách sử dụng React Developer Tools
- Cách sử dụng Redux DevTools
- Tải hình ảnh chậm
- Tối ưu hóa kích thước hình ảnh
- Tối ưu hóa kích thước video
- Tối ưu hóa phông chữ
- Tối ưu hóa bộ nhớ đệm
- Cách xóa CSS không cần thiết
- Làm thế nào để tránh thay đổi bố cục
- Sửa lỗi hiển thị UseSelector
- Tối ưu hóa kết xuất với Redux Reselect
- Tối ưu hóa bằng cách sử dụng ghi nhớ
- Cải thiện logic chức năng nút thắt
Xem trước lớp học
Vui lòng kiểm tra mục tiêu học tập!
- Khóa học này phù hợp với những người có kinh nghiệm phát triển web front-end. Đặc biệt, nếu bạn có kinh nghiệm sử dụng React, bạn có thể học dễ dàng hơn.
Đã tạo khóa học này
Giới thiệu người chia sẻ kiến thức.
Vi khuẩn lỏng
- (Hiện tại) Nhà phát triển giao diện Hatch Labs
- (Cựu) Nhà phát triển Front-end của Line Financial
- Samsung SSAFY, Lập trình viên, v.v. Bài giảng phát triển front-end
- Dự án tối ưu hóa hiệu suất web và sản xuất bài giảng
- Đóng góp cho Microsoft Software Issue 393 (Chủ đề JS) và Issue 392 (Chủ đề Blockchain)
Tôi đã tạo ra khóa học này sau khi suy nghĩ về câu hỏi cơ bản "làm thế nào" để học cách tối ưu hóa hiệu suất . Nhìn lại kinh nghiệm trước đây của tôi trong việc phân tích và tối ưu hóa hiệu suất của nhiều dịch vụ web khác nhau, tôi nghĩ rằng thay vì chỉ dạy bạn nhiều lý thuyết, bạn sẽ có thể tìm hiểu thêm về tối ưu hóa hiệu suất web nếu bạn tự mình phân tích và thực hành các dịch vụ ví dụ.
Trên thực tế, tối ưu hóa hiệu suất có thể thay đổi tùy theo tình huống và có nhiều phương pháp khác nhau, nhưng những phương pháp cốt lõi được tập hợp lại, và nó không chỉ là một kỹ thuật tối ưu hóa mà còn là các nguyên tắc hoạt động của trình duyệt và các phương pháp phân tích hiệu suất , đó là xương sống và phần phát triển front-end của web. Tôi cũng sẽ cho bạn biết một số điều bạn có thể làm, vì vậy hãy học tập chăm chỉ. Chúng tôi luôn hoan nghênh mọi câu hỏi.
Câu hỏi dự kiến Hỏi & Đáp.
H. Bài giảng khó đến mức nào?
Cần có kiến thức cơ bản về web. Tuy nhiên, vì phần tối ưu hóa hiệu suất được giải thích chi tiết từ những điều cơ bản nên ngay cả những người mới tìm hiểu về tối ưu hóa hiệu suất cũng có thể hiểu được.
H. Bạn sử dụng chương trình (hoặc công cụ) nào trong khóa học này?
Tôi chủ yếu sử dụng công cụ dành cho nhà phát triển của Chrome (devtools). Ngoài ra, bạn có thể sử dụng thêm các thư viện khác khi cần và vì chúng có hướng dẫn và giải thích đơn giản nên bạn sẽ không gặp khó khăn khi học chúng.
H. Khóa học này có ưu điểm gì đặc biệt không?
Học cách tối ưu hóa hiệu suất web rất khó. Bởi vì không có dữ liệu chính xác và hầu hết chúng đều là những lý thuyết rời rạc. Tuy nhiên, trong bài giảng này, chúng tôi đã chuẩn bị một số dịch vụ web nơi bạn có thể tự mình tìm hiểu và thực hành các kỹ thuật tối ưu hóa từng phần như vậy. Do đó, bạn có thể tìm hiểu chi tiết cách phân tích dịch vụ, cách phân tích dựa trên cơ sở nào và áp dụng các kỹ thuật tối ưu hóa nào.
Khuyến nghị cho
những người này
Khóa học này dành cho ai?
웹 hiệu suất tối ưu hóa quan tâm đến các nhà phát triển
더 빠르고 가벼운 웹 dịch vụ là mong muốn của các nhà phát triển
Các nhà phát triển muốn sử dụng tốt hơn các công cụ phát triển của Chrome
Nhà phát triển web front-end muốn cạnh tranh
Cần biết trước khi bắt đầu?
HTML5, Javascript, CSS
Phản ứng.js
3,692
Học viên
205
Đánh giá
106
Trả lời
4.9
Xếp hạng
3
Các khóa học
(전) 해치랩스 프론트엔드 개발자
(전) 라인 파이낸셜 프런트엔드 개발자
삼성 SSAFY, 프로그래머스 등 프런트엔드 개발 강의
웹 성능 최적화 프로젝트 및 강의 제작
마이크로소프트웨어 393호(JS 주제), 392호(블록체인 주제) 기고
Chương trình giảng dạy
Tất cả
21 bài giảng ∙ (7giờ 53phút)
Tài liệu khóa học:
Tài liệu bài giảng
12. 3-9) Tóm tắt
10:54
21. 4-9) Tóm tắt
11:46
Ngày đăng:
Cập nhật lần cuối:
Đánh giá
Tất cả
47 đánh giá
5.0
47 đánh giá
junsushin45461566Đánh giá 2
∙
Đánh giá trung bình 5.0
5
14% đã tham gia1編聞きながら本当にお得でしたが、今回はプロジェクトの授業分量が増えてより良いですね。たくさん学んでいきます〜
- hackurity01Giảng viên
こんにちはJunsu Shinさん。講義に関心をお寄せいただきありがとうございます！次の講義でも、より新しくて有用な練習になるよう努力します！ :)
- wwwbbb10977
Đánh giá 8
∙
Đánh giá trung bình 5.0
- jhkim7984
Đánh giá 1
∙
Đánh giá trung bình 5.0
5
76% đã tham gia良い講義ありがとうございます。ただ、次のシリーズに来るときにソース画面をもう少し育てていただければと思います。ありがとうございます。
- hackurity01Giảng viên
こんにちは、jhkimさん。未来のソースコード画面を育てていないことを申し訳ありません。 😭次のレッスンは、より読みやすく、良い画面で探してみましょう！講義に関心をお寄せいただきありがとうございます！
- shine78841433
Đánh giá 3
∙
Đánh giá trung bình 5.0
- baekco
Đánh giá 3
∙
Đánh giá trung bình 5.0
Ưu đãi có thời hạn, kết thúc sau 4 ngày ngày
6.892 ₫
24%
1.611.840 ₫
Khóa học khác của hackurity01
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!
![[JavaScript GUI開発 #1] Electron + Reactで作るタイマーアプリ (+ Zustand)강의 썸네일](https://cdn.inflearn.com/public/files/courses/336817/cover/01jwx9ttbwnetdsbt5qrxgxb3x?f=avif&w=420)
