강의

멘토링

커뮤니티

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) 52 đánh giá

1,531 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,892

Học viên

228

Đá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ả

52 đánh giá

5.0

52 đánh giá

  • junsushin45461566님의 프로필 이미지
    junsushin45461566

    Đánh giá 2

    Đánh giá trung bình 5.0

    5

    14% đã tham gia

    Nghe Phần 1 thực sự rất có ích, nhưng lần này thậm chí còn tốt hơn vì số lượng lớp dự án đã tăng lên. Tôi đang học được rất nhiều~

    • hackurity01
      Giảng viên

      Xin chào Junsu Shin. Cảm ơn bạn đã quan tâm đến bài giảng! Chúng tôi sẽ cố gắng cung cấp những bài thực hành mới hơn và hữu ích hơn trong bài giảng tiếp theo! :)

  • wwwbbb10977님의 프로필 이미지
    wwwbbb10977

    Đánh giá 9

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    Lần này tôi tham gia khóa học cùng với Phần 1. Khi nói đến tối ưu hóa, đã có nhiều lúc tôi tìm kiếm trên Google và cảm thấy thất vọng vì không thể hiểu được, nhưng những ví dụ phong phú và những lời giải thích tử tế đã giúp tôi rất nhiều. Cảm ơn bạn đã xuất bản một bài giảng hay, và tôi chắc chắn sẽ nghe bộ tiếp theo khi nó ra mắt ^^

    • jhkim7984님의 프로필 이미지
      jhkim7984

      Đánh giá 1

      Đánh giá trung bình 5.0

      5

      76% đã tham gia

      Cảm ơn bạn vì bài giảng tuyệt vời. Tuy nhiên, sẽ là một ý tưởng hay nếu phóng to màn hình nguồn khi phát hành loạt phim tiếp theo. Cảm ơn.

      • hackurity01
        Giảng viên

        Xin chào, jhkim. Tôi xin lỗi vì không thể phóng to màn hình mã nguồn. 😭 Chúng ta sẽ đến bài giảng tiếp theo với màn hình dễ đọc hơn! Cảm ơn bạn đã quan tâm tới bài giảng!

    • shine78841433님의 프로필 이미지
      shine78841433

      Đánh giá 3

      Đánh giá trung bình 5.0

      5

      95% đã tham gia

      Đó là một bài giảng tốt. Tuy nhiên, tôi nghĩ sẽ tốt hơn nếu bạn chú ý hơn một chút đến tên biến. ex) state.category.category Những điều như thế này gây ra một số nhầm lẫn.

      • dilkusha27님의 프로필 이미지
        dilkusha27

        Đánh giá 5

        Đánh giá trung bình 5.0

        5

        100% đã tham gia

        Đây là một khóa học tuyệt vời đã giúp tôi nắm bắt được cảm giác về tối ưu hóa. Nhưng lần sau khi trình bày code, liệu anh có thể phóng to lên một chút không ạ...? Ngay cả khi toàn màn hình thì code vẫn hiển thị nhỏ nên hơi mỏi mắt khi gõ theo code chỉ với một màn hình 😭😭 Ngoài điều đó ra thì tôi hoàn toàn hài lòng. Cảm ơn anh!!

        Ưu đãi có thời hạn, kết thúc sau 8 ngày ngày

        6.780 ₫

        29%

        1.609.851 ₫

        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!