강의

멘토링

커뮤니티

BEST
Programming

/

Front-end

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.

(5.0) 51 đánh giá

1,525 học viên

  • hackurity01
React
Chrome DevTools

Đánh giá từ những học viên đầu tiên

Bạn sẽ nhận được điều này sau khi học.

  • 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ạn có thể xem thêm đánh giá về khóa học trên trang khóa học. (nhấp chuột)

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ế 🎲

Phần 1 Bài giảng trước

  • Tối ưu hóa trang blog của bạn
  • Tối ưu hóa trang web thống kê Olympic

Phần 2 Bài giảng hiện tại 

  • Tối ưu hóa trang chủ chung
  • Tối ưu hóa Thư viện ảnh

Phần 3 Bài giảng theo lịch trình

  • chuẩn bị!

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ệtcá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

Xin chào
Đây là

3,875

Học viên

226

Đánh giá

108

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
Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Tất cả

51 đánh giá

5.0

51 đánh giá

  • junsushin45461566님의 프로필 이미지
    junsushin45461566

    Đánh giá 2

    Đánh giá trung bình 5.0

    5

    14% đã tham gia

    It was really helpful listening to Part 1, but this time the project class volume has increased, so it's even better. I'm learning a lot~

    • hackurity01
      Giảng viên

      Hello Junsu Shin. Thank you for your interest in the lecture! I will try to provide newer and more useful exercises in the next lecture! :)

  • wwwbbb10977님의 프로필 이미지
    wwwbbb10977

    Đánh giá 9

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    This time, I took the course along with Part 1. When it comes to optimization, I often searched Google and got frustrated because I didn't understand it, but the rich examples and kind explanations helped me a lot. Thank you for releasing a good course, and I will definitely listen to the next series if it comes out^^

    • jhkim7984님의 프로필 이미지
      jhkim7984

      Đánh giá 1

      Đánh giá trung bình 5.0

      5

      76% đã tham gia

      Thank you for the great lecture. However, I think it would be better if you could make the source screen bigger when you teach the next series. Thank you.

      • hackurity01
        Giảng viên

        Hello, jhkim. I apologize for not being able to enlarge the source code screen. 😭 I will come back with a more readable screen in the next lecture! Thank you for your interest in the lecture!

    • shine78841433님의 프로필 이미지
      shine78841433

      Đánh giá 3

      Đánh giá trung bình 5.0

      5

      95% đã tham gia

      It's a good lecture. However, I think it would be better if you paid a little more attention to variable names. ex) state.category.category These are a bit confusing.

      • dojin83512273님의 프로필 이미지
        dojin83512273

        Đánh giá 1

        Đánh giá trung bình 5.0

        5

        100% đã tham gia

        I really enjoyed it!

        1.612.758 ₫

        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!