Công thức tối ưu FrontEnd - Áp dụng thực tế website chứng khoán

Công thức tối ưu FrontEnd - Áp dụng thực tế website chứng khoán | Trần Quốc Huy - Wecommit

Рет қаралды 26,488

Learning Database with Tran Quoc Huy

Күн бұрын

Пікірлер: 88

@TeamWRCM97 7 күн бұрын

vừa xem kênh của b Thiên xong qua đây xem video này luôn , cám ơn anh đã chia sẻ , kiến thức rất bổ ích

@thoangnguyennho8269 29 күн бұрын

Trong thực tế các bạn làm việc như nào? Dev thì chắc chắn phải comment rồi. Các bạn check out sang 1 banch khác rồi minisuze html, css, giảm size ảnh à? Hay có 1 runer (Ci) làm việc đó. Dev chỉ code và commit là Ci tự chạy các job kia sẽ hiệu quả hơn.

@anan8928 29 күн бұрын

Đúng là các fw hiện tại đã tích hợp sẵn các tool để minify, remove comment,... giảm bundle size. Tuy nhiên nếu gặp những file s khi đã nén vẫn quá bự thì mình có thể làm thủ công thêm để tách nhỏ ra nữa

@thoangnguyennho8269 29 күн бұрын

@anan8928 mình đang muốn nói là đội clickops config luồng Ci/cd khi dev front-end commit thay vì pull code về build rồi deploy lên server dev, thì sẽ viết script chạy các job tối ưu 'cái này cần dev và ops nói chuyện với nhau để có kịch bản của các job chayh trong runner' rồi mới buil và deploy lên server dev

@hexagon0904 27 күн бұрын

Setting môi trường khi build thì mới minify thôi b, build dev thì không min

@nvtentertainment4098 12 күн бұрын

giờ thấy đa số framework nó tự làm mấy việc này hết rồi .

@anan8928 Ай бұрын

Mình có chút ý kiến, mong được giao lưu vs các host 1. Khi dùng kỹ thuật zip. transfer data rất nhanh qua internet, tuy nhiên chúng ta phải mất perform cho việc giải nén gói tính. Vs các thiết bị đời tống thì có thể gặp vấn đề 2. Dùng tiny k phải là nén, mà nó đang giảm độ phân giải, giảm số lượng pixels của ảnh. 1 khi đã giảm thì sẽ có vấn đề khi tăng lại. 3. indexDB có giới hạn dung lượng 4. Worker tạo có giới hạn chứ k phải tạo bừa bãi được 5. Khi submit form call api BE expect đó là 1 task async đẩy vào mircotasks queue, nó sẽ k chạy trực tiếp trên stack, những tính toán sẽ thực hiện maf k làm freeze màng hình do event loop quản lí . z nên bạn k cần setimeout làm j

@pdthien Ай бұрын

Chào người anh em, rất cảm ơn người anh em đã quan tâm và đặt câu hỏi, mình xin phép trả lời bạn như sau: 1. với các trình duyệt hiện tại thì việc giải nén diễn ra rất nhanh, không còn là vấn đề, việc này diễn ra nhanh gấp nhiều lần so với việc không gzip. Còn các thiết bị từ đời tống thì mình chưa có cơ hội được trải nghiệm nên chưa dám đưa ra câu trả lời cho câu hỏi đối với các thiết bị cũ. 2. tiny giảm size dựa trên 1 kỹ thuật nén ảnh, cái này trên trang chủ của tiny cũng có đề cập, bạn có thể lên trang chủ xem nha. Việc giảm size ảnh mục đích để trang web lấy ảnh nhanh hơn mà độ sắc nét không quá khác biệt, nên mình cũng chưa rõ việc bạn muốn tăng size lại để phục vụ mục đích gì. 3. Mình đồng ý IndexDB có giới hạn dung lượng, việc giới hạn này sẽ tùy thuộc vào các trình duyệt quy định, ví dụ theo như mình tìm hiểu thì chrome sẽ quy định dựa trên % disk, safari khoảng 1-2GB, ... 4. Worker giúp anh em tách luồng để hạn chế main thread bị dí. Và cái gì nhiều quá thì cũng không tốt rồi. Thực tế như mình có chia sẻ mình chưa có cơ hội được trải nhiệm web Worker nên mình sẽ không đưa ra đánh giá chuyên sâu gì thêm. 5. Mình đồng ý là việc call API sẽ do Web API xử lý và chạy bất đồng bộ. Ví dụ mình đưa ra có vẻ đang gây hiểu lầm cho anh em, mình đang muốn đề cập đến việc các hàm call đồng bộ nhau, nếu có thể thì nên dùng setTimeout để defer các hàm không quan trọng, để chuyển chúng vào MacroTask queue. Câu hỏi của bạn rất hay đẩy. Cảm ơn bạn rất nhiều nha 😁

@pdthien Ай бұрын

Chào người anh em, rất cảm ơn người anh em đã quan tâm và đặt câu hỏi, mình xin phép trả lời bạn như sau: (Do youtube có vẻ chặn gửi nội dung dài nên mình phải tách thành nhiều reply.)

@pdthien Ай бұрын

1. với các trình duyệt hiện tại thì việc giải nén diễn ra rất nhanh, không còn là vấn đề, việc này diễn ra nhanh gấp nhiều lần so với việc không gzip. Còn các thiết bị từ đời tống thì mình chưa có cơ hội được trải nghiệm nên chưa dám đưa ra câu trả lời cho câu hỏi đối với các thiết bị cũ.

@pdthien Ай бұрын

2. tiny giảm size dựa trên 1 kỹ thuật nén ảnh, cái này trên trang chủ của tiny cũng có đề cập, bạn có thể lên trang chủ xem nha. Việc giảm size ảnh mục đích để trang web lấy ảnh nhanh hơn mà độ sắc nét không quá khác biệt, nên mình cũng chưa rõ việc bạn muốn tăng size lại để phục vụ mục đích gì.

@nvtentertainment4098 21 күн бұрын

Hiếm lắm mới có 1 kênh làm tối ưu frontend như này

@truongbachinhdavidcody8477 20 күн бұрын

Video mình đánh giá khá hay ^-^. Mình có bổ sung thêm việc sử dụng Import Cost extension của VS code để có thể nhìn thấy được size của package mà mình imported.

@tuyennguyenhoang164 Ай бұрын

video rất hay về kiến thức tối ưu mong anh em sẽ ra thêm nhiều video bổ ích nữa

@vietanhnguyen2898 19 күн бұрын

Hay quá anh ạ. Em cảm ơn anh rất nhiều

@tamle8664 Ай бұрын

Video của anh hay quá, mong sau này a có thể ra thêm video Công thức tối ưu BackEnd nữa !

@tranquochuywecommit Ай бұрын

tuần tới có video hay lắm, anh em nhớ đón xem nhé.

@lucas_williams Ай бұрын

@@tranquochuywecommit anh làm thêm video cho mobile với ạ

@nvtentertainment4098 21 күн бұрын

Video hay quá anh ơi, em đang học Frontend rất cần

@HungNguyen-tl9kg 29 күн бұрын

Cảm ơn các anh đã đầu tư video có nội dung mang tính chuyên sâu như thế này. Tuy nhiên càng về cuối mình thấy chưa đủ xoáy sâu & thực hành cụ thể. Anh em biết chỗ nào có thể thảo luận các vấn đề tối ưu bên frontend giới thiệu mình với nha.

@tandungnguyen2673 Ай бұрын

kiến thức quá hay mong bạn sẽ tiếp tục nhiều hơn

@thanhbinh6328 Ай бұрын

hay anh Thiện ơi, hi vọng Wecommit có thêm nhiều video hay thế này nữa

@pimpimpim1435 26 күн бұрын

nội dung rất hữu ích anh ạ, cám ơn anh đã chia sẻ

@nguyenduythanh5865 18 күн бұрын

Video rất hay. Nhưng về ảnh vd như jpg hay png chẳng hạn thì bản chất nó đang là dạng tối ưu kích thước nhất rồi. Việc giảm dung lượng đơn giản là crop cái ảnh đó thôi Thường người ta sẽ dùng cdn lưu nhiều size ảnh khác nhau để vd như ở các màn hình nhỏ thì trình duyệt sẽ load ảnh nhỏ

@grincydev 28 күн бұрын

anh ấy có video tối ưu rồi mà, rất hay luôn ấy

@nguyendangchien7435 29 күн бұрын

Phần tối ưu wait thấy không hợp lý lắm nhỉ, bạn sử dụng setTimeOut để đưa nó vào micro tasks queue, nguyên nhân do thằng setTimeOut là function của WebAPI, trường hợp này logic bên trong bị defer để cho các logic khác chạy trước. Tuy nhiên nó còn làm chậm hơn là không dùng vì phải đặt thời gian timeout, hơn nữa nếu bên trong logic setTimeOut mà thay đổi global variables hoặc refer đến component hoặc 1 logic không đồng bộ khác thì rất khó kiểm soát. Ai thấy đúng like cho mình phát🎉

@ngochieu1212 29 күн бұрын

mình có thể bỏ trống timeout hoặc set timeout=0 mà bác

@nguyendangchien7435 29 күн бұрын

@ khi đã gọi setTimeOut kể cả để 0 thì nó vẫn vào queue nhá b, thông thường các logic đồng bộ cho nó chạy phía dưới chứ mấy khi dùng setTimeOut đâu, dùng cách này về UI có thể thấy nhanh hơn nhưng thực ra chạy còn lâu hơn

@learnanywhere139 25 күн бұрын

@@nguyendangchien7435 bạn nói đúng nhé, theo mình hiểu thì nó đang ném sang webAPI để xử lý toàn bộ 10 thằng con (timer truyền vào là 0), trong quá trình xử lý thì các thao tác đồng bộ vẫn được chạy, khi nào phía callback queue không còn task nào nữa thì nó chạy callback bên trong setTimeout. Mục đích của cách làm này là ngăn cho luồng chính không bị block (nghĩa là có thể thao tác với UI) thôi

@devxin Ай бұрын

Hay quá, cảm ơn Thiện nhé🎉

@huyle-qq1cd 25 күн бұрын

video rất hay và bổ ích ạ

@DuK-2102 3 күн бұрын

cho em hỏi bác Huy dùng phần mềm gì để vẽ, highlight vào slide và ảnh vậy?

@chuongtran2208 Ай бұрын

Cảm ơn anh, bài chia sẻ rất hay ạ!

@minhdung3532 Ай бұрын

bài share rất hay shop ơi, nhma cái này quen quen, hình như mình thấy share ở đâu đó trên ytb này rồi :V

@Toilazux Ай бұрын

misa toàn web rác không . xin lỗi vì thành kiến nhưng thấy bạn nói hay cảm ơn vì những gì đã chia sẽ

@SonNguyenLyTruong Ай бұрын

Misa rác là fai đánh dấu hỏi mấy mem manager trở lên, còn nhiều a e tech giỏi nhưng do management ở trên ko biết dùng ko biết quản lí tổng thể sp. Nên mình ko đánh đồng cty rồi suy ra cá nhân dc bạn.

@kulinh1773 Ай бұрын

Mở đầu khá tẻ nhạt, về sau khá hay. Frontend phải như thế này chứ. Mong kênh a Huy làm thêm những video ntn.

@tranquochuywecommit Ай бұрын

Cảm ơn em đã ủng hộ kênh nhé.

@QuanBảoNguyễn-f5y 19 күн бұрын

cám ơn kinh nghiệm xương máu

@Thonqq 29 күн бұрын

có tối ưu frontend rồi, anh có định làm nốt tối ưu backend không

@tranquochuywecommit 29 күн бұрын

nhiều nội dung muốn làm quá, anh sẽ cân nhắc ý tưởng này nha

@SonNguyenLyTruong Ай бұрын

Bundle analyzer chỉ cho mình cái cảm giác vè bức tranh tổng thể. Ví dụ mình chỉ dùng 1 function của jquery thì nó vẫn report ra là mình dùng thư viện jquey với size của jquery, trong khi webpack đã optimize dùng treeshaking cho output.

@researchwordpress6532 28 күн бұрын

Cảm ơn các anh, Video hay quá, anh có thẻ share file mindmap trong video được không ạ.

@nguyendangchien7435 29 күн бұрын

Cám ơn 2 anh đã chia sẻ, có thể share cho mọi người mind map không ạ?

@duybachsnguyen1443 Ай бұрын

Em cảm ơn hai anh rất nhiều

@Nguyen.Tran69 Ай бұрын

Coi mở đầu làm cháu liên tưởng như live stream bán hàng hay hội thảo đa cấp ấy. Đã lưu lại tối về xem.

@anhkhoiaoduy6072 Ай бұрын

:))

@juhandvan 28 күн бұрын

Đoạn preload và Prefetch sao mình thấy nó cứ ngược ngược nhỉ. Lazyload thì đúng nguyên tắc là cần đến đâu tải đến đấy, tránh tải thừa lãng phí tài nguyên làm nặng lần load đầu tiên. Vậy sao lại còn preload và prefetch nữa. Như vậy thì lại làm tăng thời gian tải cho lần load đầu tiên à ?

@tranquochuywecommit 28 күн бұрын

Hãy tưởng tượng website của anh em giống như 1 ngôi nhà, và có 1 vị khách tới chơi (User) Có những thứ chúng ta biết rất ít khi vị khách có thể vào thăm (ví dụ như những phòng riêng tư của mình) thì chưa cần dọn ngay lúc đó làm gì cho mất công (Lazy loading) Có những thứ mà chúng ta biết chắc là sẽ cần, ví dụ: họ ngồi vào bàn thì thế nào chẳng uống nước -> Chuẩn bị mang sẵn cốc nước ra luôn (đấy là tư tưởng Preaload) Tối ưu bản chất luôn là ở tư duy và rất gần đời thường, đừng cứng nhắc anh em ah

@duocsinh-z6y 29 күн бұрын

blog thì hay, mình có góp ý nhỏ. ý mình không phải bắt bẻ gì, nhưng mà phát âm eng sai nhiều quá, có mấy từ là key thì ah em mình chuẩn or tương đối cũng được. mình cũng chưa hẳn ngon, nhưng mà làm clip ra cộng đồng chỉnh chu xíu vẫn hiệu quả hơn ạ.

@tranquochuywecommit 29 күн бұрын

cảm ơn góp ý chân thành của người anh em nhé, tôi sẽ cố gắng cải tiến.

@TeneciaPenalver 29 күн бұрын

indexDB mà nói không có giới hạn là thiếu kiến thức nhé.

@DavidJames535 28 күн бұрын

4gb giới hạn

@TeneciaPenalver 28 күн бұрын

@@DavidJames535 Tuỳ vào device nhé. K cố định

@huythanhbui8637 26 күн бұрын

Em có thể xin file mind map được ko ạ

@zeraiiii Ай бұрын

mình từng optimize cả thằng webpack, thực sự thì nên hiểu 1 chút là các tool của mình nó làm gì với code của mình

@andrew_nguyen05 Ай бұрын

Hay quá a

@angNguyen-cg8gk 21 күн бұрын

Phần cache nói lung tung khó hiểu quá v ạ, lúc thì CDN lúc thì mem cache :))), với lại mấy chỗ này đã được handle sãn rồi mà nhỉ, vậy thì có gọi là app dụng vào thực tế không nhỉ

@JasonLi-t9r Ай бұрын

Có share file xmind được ko anh ad đẹp trai

@tienat957 29 күн бұрын

anh cho em hỏi hiện tại em đang làm cho 1 công ty kiểu loại nhà nước kinh doanh,hiện tại em đang đảm nhận nhiệm vụ IT cho công ty cụ thể em làm lập trình web tool nội bộ bằng php thuần+js+bootstrap hoặc laravel nếu phức tạp và có làm thêm cả phần mềm bằng python bằng tkinter tất cả đều có sql(mysql của mysql workbench và mysql server) và quản lý mạng của cả công ty server setup sửa máy tính,máy in em làm cũng hơn nữa năm rồi nhưng em thấy em đảm nhận nhiều task quá nhiều lúc em làm không kịp phải mang việc về nhà làm và không có thời gian làm freelane Hiện tại em có mức lương gần 9tr,em có nên đổi sang công ty khác để tập trung cho dev luôn không anh hiện tại em vẫn đang lơ mơ không có định hướng rõ ràng,em cảm ơn ạ

@tranquochuywecommit 28 күн бұрын

Nếu tiếp tục như thế trong 3 năm tới, em nghĩ em có phát triển được không, và sẽ có rủi ro gì cho bản thân ? Em trả lời câu này cho chính mình và em sẽ có câu trả lời của em.

@thientm 26 күн бұрын

cái này là IT all in one thời xưa đây mà, dev mới ra trường bây giờ cũng bằng lương bạn rồi. tập trung lại 1 mảng rồi đi thôi :)

@nvtentertainment4098 12 күн бұрын

lấy thưởng tết rồi out đi bạn à , code web là code , sửa máy in gì đó phần cứng , server sẽ có người chuyên khác 3in1 à . nào bạn nhận lương 27tr thì làm

@tddthinh Ай бұрын

sao để cái nhạc nền nghe rợn rợn như đang nghe chuyện ma ý.

@extremejobs_666 29 күн бұрын

Xin file xmind với ạ

@QuocBaoOfficial-tf5cs Ай бұрын

Tối ưu backend nữa đi anh

@sondinhquang198 Ай бұрын

kiến thức 100 điểm. cơ mà bạn kiện nói bth đều như thế hay là cố ý nhấn nhá mà nhiều đoạn cảm giác như đang "rặn rặn" hơi mất tự nhiên!

@pdthien Ай бұрын

Mình tên Thiện nhé, cảm ơn bạn rất nhiều về lời góp ý nha. Đây là cách nói bình thường của mình và mình vẫn đang trên hành trình nỗ lực hàng ngày để nâng cấp kỹ năng giao tiếp mượt mà hơn

@thangkhong3536 Ай бұрын

@@pdthienbác cho e hỏi, bác đang dùng gì vẽ mindmap nhỉ

@simpleman-fd3rb Ай бұрын

@@thangkhong3536 xmind anh ơi

@anhkhoiaoduy6072 Ай бұрын

ngta làm về kỹ thuật mà bắt ép phải tốt soft skill, cái này châm chước được, cả ô Quốc Huy cũng v

@kulinh1773 Ай бұрын

@@thangkhong3536 dùng xmind đó bạn.