Tôi đã rất ngạc nhiên khi lướt qua lướt lại trang iPhone X của Thế giới di động để ngắm mấy em hàng iPhone X, trang web có nhiều hình ảnh iPhone X to chà bá nhưng tốc độ lại nhanh đến bất ngờ.
Nếu như để so sánh với các trang web khác, các bạn mở một tab khác lên rồi truy cập vào các trang như là hoanghamobile.com, cellphones.com.vn, hay phucanh.vn chẳng hạn (tính từ lúc nhấn phím enter nhé), các bạn sẽ thấy sự khác biệt rõ rệt. Trình duyệt vào thegioididong.com nhanh như không phải nghĩ, còn vào các trang khác thì còn phải nghĩ 1 lúc mới hiển thị được nhé.
Vậy công nghệ nào đã giúp cho Thế giới di động đạt được tốc độ nhanh đến như vậy? Tò con nhà bà mò đã dẫn tôi đi đến quyết định tìm hiểu lý do tại sao mà Thế giới di động lại nhanh thế.
Sau khi hỏi chị gu gờ thì cũng có ra một bài viết về vấn đề này, nhưng tôi thấy chưa được sâu sắc lắm. Vậy là tôi quyết định sắn tay vào chọc ngoách và rì sợt (research) công nghệ để viết một bài thật là sâu sắc như cơi đựng trầu.
Để bắt đầu tôi quét back-end technology của thegioididong.com bằng tools builtwith.com, khá vui và bất ngờ là Thế giới di động dùng ASP.NET bà con nhé, cùng với lib bên thứ 3 là telerik, còn server thì đích thị là IIS trên Cloud của VNPT
Phần back-end tôi không đi sâu được thêm nhưng có lẽ Thế giới di động đã xây dựng được kiến trúc hệ thống khá tốt: có tích hợp cả crm, logistic, payment, invoice nữa đó nha các bạn.
Công nghệ thì không có gì mới rồi, nhưng phải chăng các kĩ thuật tối ưu đã làm cho tốc độ tải trang của Thế giới di động vượt trội? Đúng vậy, Thế giới di động đã xử dụng rất nhiều kĩ thuật tối ưu, mà dễ nhận ra nhất đó là:
Vậy công nghệ nào đã giúp cho Thế giới di động đạt được tốc độ nhanh đến như vậy? Tò con nhà bà mò đã dẫn tôi đi đến quyết định tìm hiểu lý do tại sao mà Thế giới di động lại nhanh thế.
Sau khi hỏi chị gu gờ thì cũng có ra một bài viết về vấn đề này, nhưng tôi thấy chưa được sâu sắc lắm. Vậy là tôi quyết định sắn tay vào chọc ngoách và rì sợt (research) công nghệ để viết một bài thật là sâu sắc như cơi đựng trầu.
Để bắt đầu tôi quét back-end technology của thegioididong.com bằng tools builtwith.com, khá vui và bất ngờ là Thế giới di động dùng ASP.NET bà con nhé, cùng với lib bên thứ 3 là telerik, còn server thì đích thị là IIS trên Cloud của VNPT
Phần back-end tôi không đi sâu được thêm nhưng có lẽ Thế giới di động đã xây dựng được kiến trúc hệ thống khá tốt: có tích hợp cả crm, logistic, payment, invoice nữa đó nha các bạn.
Công nghệ thì không có gì mới rồi, nhưng phải chăng các kĩ thuật tối ưu đã làm cho tốc độ tải trang của Thế giới di động vượt trội? Đúng vậy, Thế giới di động đã xử dụng rất nhiều kĩ thuật tối ưu, mà dễ nhận ra nhất đó là:
Cấu hình caching được bật cả ở server và client cho tốc độ tải hình từ site chính khá là ok
Với hình ảnh sản phẩm Thế giới di động sử dụng CDN để lưu trữ, sử dụng kỹ thuật DNS Prefetch để tăng tốc định tuyến
css chính của site thì đặt ở head nên site không phải request lên server để gọi css, tiết kiệm được thời gian request
Duy chỉ có một tính năng chat (có kết nối firebase) có lẽ mới được thêm vào (tôi thấy ko đặt dns-prefetch làm tốc độ tải trang có phần tụt lại so với trước đây) có đường dẫn từ server cdn.thegioididong.com, tôi dùng tools ip location để tra gốc gác server cdn.thegioididong.com thì phát hiện ra đây là server đặt tại Thế giới di động chứ không phải trên Cloud VNPT. Có thể tính năng chat với người đẹp sắp được Thế giới di động trình làng chăng?
Một kĩ thuật nữa được Thế giới di động áp dụng là kỹ thuật Gzip, các response được nén lại trước khi trả về đã giảm được kha khá băng thông, bảo sao mà web nhẹ thế tải nhanh là đúng rồi
Một kĩ thuật nữa cần phải nhắc lại là kĩ thuật lazy loading, tức là bạn cuộn trang web xuống thì hình ảnh ở dưới mới được tải tiếp, quá tuyệt vời phải không các pro
Kết luận
Vậy cuối cùng túm cái váy lại là, công nghệ thì có vẻ không có gì mới (chưa bàn tới kiến trúc hệ thống nhé), Thế giới di động dùng ASP.NET đó các bạn ah, nhưng các pro ở đó đã dùng những kĩ thuật khá cao siêu
Phân bố các CDN phục vụ lưu và truyền dẫn ảnh ở nhiều khu vực
Kĩ thuật DNS Prefetch để tăng tốc độ định tuyến với các CDN
Kĩ thuật Gzip nén dung lượng gói tin
Kĩ thuật Lazy Loading tải từng phần trang web
Còn các kĩ thuật nào các bạn chọc ngoáy được thì cứ comment phát biểu nhé.
Rất vui được đàm đạo với mọi người.
css chính của site thì đặt ở head nên site không phải request lên server để gọi css, tiết kiệm được thời gian request
Duy chỉ có một tính năng chat (có kết nối firebase) có lẽ mới được thêm vào (tôi thấy ko đặt dns-prefetch làm tốc độ tải trang có phần tụt lại so với trước đây) có đường dẫn từ server cdn.thegioididong.com, tôi dùng tools ip location để tra gốc gác server cdn.thegioididong.com thì phát hiện ra đây là server đặt tại Thế giới di động chứ không phải trên Cloud VNPT. Có thể tính năng chat với người đẹp sắp được Thế giới di động trình làng chăng?
Một kĩ thuật nữa được Thế giới di động áp dụng là kỹ thuật Gzip, các response được nén lại trước khi trả về đã giảm được kha khá băng thông, bảo sao mà web nhẹ thế tải nhanh là đúng rồi
Một kĩ thuật nữa cần phải nhắc lại là kĩ thuật lazy loading, tức là bạn cuộn trang web xuống thì hình ảnh ở dưới mới được tải tiếp, quá tuyệt vời phải không các pro
Kết luận
Vậy cuối cùng túm cái váy lại là, công nghệ thì có vẻ không có gì mới (chưa bàn tới kiến trúc hệ thống nhé), Thế giới di động dùng ASP.NET đó các bạn ah, nhưng các pro ở đó đã dùng những kĩ thuật khá cao siêu
Phân bố các CDN phục vụ lưu và truyền dẫn ảnh ở nhiều khu vực
Kĩ thuật DNS Prefetch để tăng tốc độ định tuyến với các CDN
Kĩ thuật Gzip nén dung lượng gói tin
Kĩ thuật Lazy Loading tải từng phần trang web
Còn các kĩ thuật nào các bạn chọc ngoáy được thì cứ comment phát biểu nhé.
Rất vui được đàm đạo với mọi người.
No comments:
Post a Comment