<p Giảm, nhưng ngay cả như vậy, PV hàng ngày của nó vẫn còn khá cao.
Trang chủ của Taobao luôn là trang web thử nghiệm cho các nền tảng và công nghệ nội bộ và liên tục thay đổi. Các khung và hệ thống mới nhất sẽ được thử nghiệm trên trang chủ Taobao. Chỉ cần tưởng tượng, nếu một biện pháp nâng cấp hoặc tối ưu hóa cần quảng bá được đưa ra trên trang chủ Taobao, và dữ liệu tốt và sự ổn định được lấy. Những lý do nào mà các doanh nghiệp khác không cố gắng và thay đổi? Đồng thời, nhóm kiến trúc kỹ thuật ở Taobao trong năm trước sẽ tự nhiên chủ động thúc đẩy một số nội dung thử nghiệm cho các thương nhân.
Trên thực tế, hầu hết các trang được xây dựng với nền tảng nội bộ hoặc các mô-đun phía trước và hoạt động từng cái một. Mặt trận tập trung vào việc xây dựng nền tảng và đảm bảo tính phổ quát và tốc độ tái sử dụng của mô-đun. Tất nhiên có một số thứ kỹ thuật.
Đối với các trang được xây dựng bằng cách xây dựng một nền tảng, mặt trước chỉ cần xem xét sự phát triển của các mô-đun nguyên tử tạo nên trang và kết xuất tổng thể chịu trách nhiệm hoàn toàn cho tập lệnh thống nhất do nền tảng xây dựng cung cấp. Trên trang chủ Taobao, xem xét số lượng lớn các mô-đun trang và một số lượng nhỏ giao tiếp giữa các bộ phận và nhóm chéo, chế độ trình bày hơi khác nhau.
2
Những thay đổi tổng thể trong trang chủ Taobao
Như đã đề cập trong nền, trang chủ Taobao dựa vào nền tảng xây dựng nội bộ và những thay đổi của nó được tự nhiên theo sau là những thay đổi trong hệ thống xây dựng.
1. Trang chủ Taobao theo PHP
ngắn sau khi chiếm lấy trang chủ Taobao, nó đã gặp phải một bản sửa đổi hàng năm, vẫn đang chạy trong môi trường PHP tại thời điểm đó. Ở đây cần lưu ý rằng tất cả các mã trên trang chủ của Taobao, được kiểm soát hoàn toàn bởi mặt trước và sẽ không giao dịch trực tiếp với cơ sở dữ liệu. Nguồn dữ liệu được chia thành hai phần.
Nguồn dữ liệu
Đầu tiên là dữ liệu được điền bởi hoạt động. Ở dạng khai thác mặt trước, các hố được dành riêng cho các hoạt động để có được dữ liệu điền, chẳng hạn như (mã giả):
Mã trên sẽ tạo ra một mẫu PHP và hình thức PIT tương ứng với trường Thông tin. Quá trình này được gọi là “đào hố”.
Hoạt động sẽ tạo dữ liệu tương ứng của mẫu PHP này bằng cách điền vào các hố này và cuối cùng đưa nó thành một đoạn HTML hoàn chỉnh (kết xuất thời gian thực).
Trong hệ thống xây dựng cũ, một mô hình con được xây dựng như thế này. Mô tả của tôiMô tả rất đơn giản, nhưng là một nền tảng, nó cần xem xét nhiều thứ, chẳng hạn như kiểm soát trình tự dữ liệu, phát hành thời gian, cơ chế rollback, cơ chế lọc, cơ chế lọc, đồng bộ hóa dữ liệu, cập nhật dữ liệu, kiểm soát phiên bản, kiểm soát quyền và tham chiếu từ các hệ thống khác.
2. Dữ liệu được cung cấp bởi nền tảng phụ trợ hoặc cá nhân hóa. Các công ty khác nhau có nhu cầu khác nhau. Một số doanh nghiệp có phụ trợ riêng và họ cần sử dụng dữ liệu do doanh nghiệp của họ tạo ra; Một số dịch vụ muốn người dùng xem nội dung khác nhau, hàng ngàn người, mong muốn được truy cập các thuật toán; Một số công ty trực tiếp giao dịch với người bán và dự kiến sẽ sử dụng dữ liệu đầu tư; Một số thương nhân dự kiến sẽ sử dụng dữ liệu được lọc ra từ nhóm dữ liệu … tóm lại, trang chủ Taobao cần giao tiếp với các hệ thống khác nhau, với nhiều giao diện. Việc tích hợp các nguồn dữ liệu động sẽ được đề cập sau.
và tên miền tương ứng với các hệ thống này là khác nhau, vì vậy định dạng JSONP tự nhiên trở thành lựa chọn đầu tiên. Tuy nhiên, đối với một số hệ thống đặc biệt, chẳng hạn như quảng cáo, kết xuất của nó không phải là yêu cầu JSONP đơn giản và thậm chí có thể can thiệp vào toàn bộ quy trình kết xuất AD, chẳng hạn như tải JS của họ và bàn giao quyền kiểm soát kết xuất.
Cấu trúc trang
Nguồn dữ liệu và cấu trúc của các mô hình con như đã đề cập ở trên, vậy toàn bộ trang được sáng tác như thế nào? Có hai loại xây dựng mô -đun. Một là xây dựng trực quan. Hoạt động hoặc mặt trước có thể kéo và thả mô-đun được phát triển (hoặc các mô-đun được chọn trong thư viện mô-đun) vào một container để tạo thành một trang.
Tất nhiên, hình trên chỉ là một mô hình. Là một hệ thống, có nhiều vấn đề cần được xem xét, chẳng hạn như bố cục trang, thích ứng đa đầu, ẩn mô-đun tạm thời, điều chỉnh vị trí, lựa chọn da, sao chép mô-đun, v.v. Kết xuất nhịp điệu và nhập dữ liệu. Sự khác biệt giữa xây dựng mã nguồn và xây dựng mô -đun là trước đây dễ dàng kiểm soát cấu trúc của mô -đun và thứ tự kết xuất của mô -đun.
Nguồn dữ liệu động
Hình sau đây xuất hiện:
Nền tảng có khả năng truy cập các nguồn dữ liệu, điều đó có nghĩa là PIT chúng tôi không chỉ cho phép hoạt động điền vào dữ liệu, mà cũng trực tiếp nhập dữ liệu từ các nguồn dữ liệu khác nhau. Tất nhiên, yêu cầu chuyển đổi ánh xạ với các trường dữ liệu. Giao diện được cung cấp bởi phần phụ trợ như sau:
Mẫu giao diện được thỏa thuận bởi frontend là:
Hệ thống phải cung cấp một chiến lược liên kết cho ánh xạ này:
Đây là những tính năng được cung cấp bởi nền tảng. Giải pháp này về cơ bản giải quyết vấn đề thay đổi hệ thống/giao diện back-end và giảm chi phí liên lạc của mặt trước và back-end.
2. Việc chuyển đổi từ PHP sang nút
Taobao HomePage HomePage Home Mgre mức độ yêu cầu hàng ngày không phải là thứ có thể bị chống lại bởi hàng chục hoặc hai mươi máy chủ. Nó phải được hỗ trợ bởi một cụm dịch vụ.
Mỗi nút CDN có khả năng kết xuất PHP. Khi trang được xuất bản, chúng tôi đồng bộ hóa tất cả các mô -đun và dữ liệu của trang cho tất cả các nút CDN. Đây có lẽ là mô hình cơ bản. Nó trông khá tốt, nhưng sau một thời gian hoạt động và bảo trì, nhiều vấn đề về bảo mật và hiệu suất đã dần xuất hiện.
Các vấn đề về hiệu suất. Mỗi trang PHP chứa nhiều mô hình con và các mô hình con cũng có thể đề cập đến các mô hình con khác. PHP bao gồm các hoạt động được tiêu thụ và mỗi tài liệu tham khảo là IO đĩa. Hàng ngàn trang PHP tương tự như trang chủ của Taobao, chạy trên một nút kết xuất và hiệu quả có thể được tưởng tượng.
[/h //@bonyan cho biết thêm: Php bao gồm hoạt động được tiêu thụ, nhưng sau khi quá trình tải và thực hiện được làm nóng, mã byte đi trực tiếp vào bộ đệm và không có IO đĩa thường xuyên. Có hai vấn đề chính với hiệu suất CDN kém: 1. Phiên bản PHP quá cũ và hiệu suất 5,4 và 7 khác nhau nhiều hơn nhiều lần; 2. Trong các kịch bản đồng thời cao, chế độ CGI nhanh không có lợi thế so với nút.
Đẩy vấn đề cơ chế đẩy. Đồng bộ hóa tệp (hành động đồng bộ trong hình) là một cơ chế rất kinh tởm. Trước hết, không có cách nào để kiểm soát thời gian. Nếu một tệp được đồng bộ hóa với tất cả các nút, phải mất vài giây và nếu nó chậm, hơn một hoặc hai phút. Và quá trình đồng bộ hóa có thể thất bại, và chi phí kiểm tra sức khỏe là khá cao. Khi xuất bản gọn gàng, có nhiều tệp cần được đồng bộ hóa, điều này có thể dễ dàng dẫn đến tích lũy hàng đợi và làm nặng thêm trải nghiệm đồng bộ hóa kém.
Yêu cầu thời gian thực. Trước khi tập tin được đẩy, nó có thể đi qua một số hệ thống mặt trước. Quá trình phát hành càng dài, thời gian hiệu ứng trực tuyến càng chậm. Nó sẽ có hiệu lực trong khoảng năm phút khi nó chậm. Sự chậm trễ như vậy là hoàn toàn không thể chấp nhận được đối với nhu cầu thời gian thực (như gai).
Tất nhiên có nhiều vấn đề khác, chẳng hạn như chi phí vận hành và bảo trì cao hơn, rủi ro bảo mật lớn hơn, không đủ dự trữ tài năng PHP tiên tiến, v.v. Vì vậy, số phận của các thùng chứa PHP sẽ bị giết.
Hình ảnh sau đây thay đổi trò chơi. Cụm dịch vụ là Cache CDN, chỉ có khả năng xử lý tệp tĩnh và không có khả năng kết xuất của PHP/Node. Do đó, nó có hiệu quả xử lý cao, hiệu suất tốt và khả năng chống nén mạnh. Khi nó không thể chịu đựng được, bạn cũng có thể chi tiền để mua dịch vụ và mở rộng cụm bộ đệm.
Khi người dùng truy cập, nginx đã lưu trữ CDN và nếu nó truy cập bộ đệm, nó sẽ quay lại trực tiếp; Nếu không, nó sẽ trở lại máy chủ nguồn. Máy chủ trang web nguồn là một dịch vụ nút có khả năng kết xuất mô-đun và có thể thực hiện nhiều việc:
● Kiểm soát tiêu đề phản hồi bộ đệm và điều khiển thời gian bộ đệm của trang trên máy khách và bộ đệm thông qua MAX-AGE và S-MAAGE. Thời gian bộ nhớ cache này có thể được điều chỉnh bất cứ lúc nào khi cần thiết, chẳng hạn như làm cho nó dài hơn khi cải thiện đáng kể
● Kiểm soát môi trường mạng bên trong và bên ngoài, cũng như trạng thái kiểm tra AB
Trong chế độ này, thêmMột lớp phục hồi thảm họa. Máy chủ của trạm nguồn đẩy dữ liệu đến máy chủ sao lưu trong cùng một phòng máy tính mỗi lần. Khi trạm nguồn bị treo lên, nó cũng có thể tự động khôi phục thảm họa và dữ liệu sao lưu.
Những thay đổi trong chế độ không chỉ tạo ra các đột phá trong hoạt động và bảo trì mà còn làm giảm rủi ro bảo mật của CDN khi chúng bị tấn công. Đồng thời, các cơ chế phát hiện khác nhau cần thiết để đồng bộ hóa cũng được loại bỏ và tiết kiệm chi phí là hơn một triệu nhân dân tệ mỗi năm. Những lợi thế vẫn còn khá rõ ràng.
3. Các nút, các chế độ khác nhau
Trong mô -đun PHP trên, chúng ta chỉ nói về các phần HTML và dữ liệu. Người đọc quan tâm nên phát hiện ra rằng các tài nguyên tĩnh như CSS và JS không được đề cập. Trang được hiển thị như thế nào?
Trong trang PHP cũ, chúng tôi đã trực tiếp giới thiệu CSS và JS và Taobao đã áp dụng bản phát hành lặp lại của phiên bản Git. Các tài nguyên tĩnh này được đặt trực tiếp trong kho Git. Đó là:
Mỗi khi bạn xuất bản tệp GIT, sửa đổi số phiên bản PHP, sau đó xuất bản mã PHP. Tất nhiên, các tối ưu hóa liên quan đã được thực hiện, chẳng hạn như tự động cập nhật số phiên bản khi phát hành Git.
và phương thức kết xuất trang của nền tảng mới khác với phương pháp của PHP.
Các mẫu CSS/JS và các mẫu của một mô -đun được đặt với nhau và các tài nguyên tĩnh của các mô -đun khác trên trang độc lập với nhau. Mục đích là để hy vọng rằng một mô -đun duy nhất có thể chạy đầy đủ, điều này có lợi hơn cho việc tái sử dụng các mô -đun.
Khai thác mô-đun cũng không phụ thuộc vào mẫu và định dạng dữ liệu được xác định dưới dạng Jsonschema.
Nền tảng xây dựng được phân tích cú pháp vào vị trí hố trong Hình 1 thông qua mẫu JSON này. Sau đó sử dụng lắp ráp giữa Index.xtpl và dữ liệu khai thác để lập trình kết xuất mô -đun.
Các mô -đun là độc lập và được phân lập với nhau, do đó có một mức độ dự phòng nhất định, nhưng lợi ích của việc tách mô -đun là nhiều hơn so với dự phòng này. Trong thực tế, chúng tôi quản lý các mô -đun riêng lẻ thông qua kho. Kết xuất của trang tương đối đơn giản. Hộp chứa nút của trang web nguồn sẽ hợp nhất tất cả index.xtpl thành một trang.xtpl. Để giảm yêu cầu trang, CSS và JS cũng sẽ hợp nhất thành một tệp, như được hiển thị trong hình trên http: // cdn/? ? mod1.css, mod2.css, mod3.css.
Trang sẽ biết khi nào bất kỳ mô -đun nào được cập nhật. Lần tới khi bạn vào hệ thống, bạn sẽ nhắc xem bạn có cần nâng cấp mô -đun và trang hay không.
3
Taobao Tối ưu hóa hiệu suất trang chủ
Có nhiều mô -đun trên trang chủ. Nếu bạn nhổ nó ra trong một hơi thở, số lượng DOM chắc chắn sẽ vượt quá 4K. Kết quả là, thời gian màn hình đầu tiên đặc biệt dài. Theo thông số kỹ thuật phát triển TMS, mỗi mô -đun TMS chứa một index.js và index.css, và cuối cùng là hai comboj và CSS được hiển thị. Khi trang chủ được tải, tất cả các index.js sẽ không được thực thi trong một hơi thở, nếu không, trang sẽ bị lắp vào đầu.
Trang kết xuất trang logic
Logic tải của khung trang chủ được hiển thị gần như trong hình bên dưới.
● Chuyển tất cả các mô-đun TMS (bao gồm một hook cho j_module)
● Một số mô-đun TMS không có nội dung JS, nhưng chúng tải một phần đầu tiên. là mảnh thứ hai. Trước tiên, hãy thêm mô-đun màn hình đầu tiên vào giám sát tải lười biếng
● Khi tải mô-đun màn hình đầu tiên hoặc người dùng xử lý tương tác trang (cuộn, chuyển động chuột, v.v.) Theo logic trên, một số mô -đun của mô -đun kết xuất có thể không được hiển thị ngay cả khi chúng được thực thi vì mức độ ưu tiên không cao. Đã thêm giám sát sự kiện bên trong mô -đun, chẳng hạn như chờ sự kiện MouseOver/OnLoad được kích hoạt trước khi hiển thị các nội dung này.
Tôi đã viết một bài viết về tối ưu hóa hiệu suất trước đây và không cần phải đạo văn. Đăng nó trực tiếp tại địa chỉ:
● Hãy xem việc cá nhân hóa trang chủ Taobao (/pic/p>
Bài viết trên đề cập đến việc tối ưu hóa chi tiết nội bộ của trang, nhưng không đề cập đến tiêu chuẩn hóa và tiêu chuẩn hóa trong quá trình phát triển và tối ưu hóa từng liên kết trong kênh truy cập trực tuyến. Đoạn này có thể hơi lạc đề, vì vậy tôi đã giành chiến thắng nhiều.
4
Đảm bảo ổn định trang chủ của Taobao
Theo lưu lượng lớn, bất kỳ vấn đề nhỏ nào cũng sẽ được khuếch đại thành một vấn đề lớn, do đó, bất kỳ vấn đề nào gặp phải trong quá trình phát triển cần phải được thực hiện nghiêm túc. Tuy nhiên, nhiều vấn đề không thường xuyên không thể được tìm thấy trong môi trường thử nghiệm của chúng tôi, chẳng hạn như các vấn đề khu vực (chẳng hạn như nút CDN ở Thượng Hải đã chết), các vấn đề thuộc tính người dùng (chẳng hạn như giếng trời với chữ S trên trang người dùng cuối cùng của biệt danh) Giám sát và cảnh báo sớm.
1. Cơ chế khắc phục thảm họa
Có hai cấp độ cân nhắc để khắc phục thảm họa:
● Yêu cầu giao diện AsyncLỗi, bao gồm lỗi định dạng dữ liệu giao diện, thời gian chờ yêu cầu giao diện, v.v. Sự ổn định và điện trở nén của mỗi hệ thống là khác nhau. Có nhiều giải pháp cho loại đảm bảo này. Sau đây là phổ biến nhất:
Mỗi yêu cầu dữ liệu được lưu trữ cục bộ và mỗi giao diện cung cấp một đáy cứng. Một tùy chọn khác là “thử lại”. Nếu yêu cầu thất bại một lần, yêu cầu là lần thứ hai. Để thảo luận về vấn đề này, vui lòng tham khảo bài viết trước: “Kế hoạch khả năng phục hồi thảm họa giao thông lớn” (/pic/p>
Để kết xuất đồng bộ, chỉ cần các mẫu trang và dữ liệu đồng bộ. Nếu bất kỳ ai trong số họ có lỗi, trang web nguồn sẽ báo cáo lỗi. Tại thời điểm này, nội dung được trả về bởi nguồn là một trang lỗi với mã trạng thái là 5xx. Lỗi này không nhất thiết phải do nhà phát triển gây ra. Nó có thể là bất thường liên kết hệ thống hoặc mạch bị tắt. Để giải quyết vấn đề này, tôi đã tạo một trang gương của trang chủ Taobao:
Khi bất kỳ ngoại lệ nào xảy ra trên trang web nguồn, Nginx sẽ phản ánh trang chủ của cùng một phòng máy tính như CacheCDN. Nội dung gương là mã nguồn sao lưu HTML của trang chủ Taobao.
2. Cơ chế giám sát và cảnh báo sớm
Trước tiên, bạn có thể xem bài viết tôi đã viết trước đây: “Thu thập và giám sát các nhật ký ngoại lệ mã mặt trước” (/pic/p>
Có hai cấp độ giám sát:
● Giám sát cấp độ mô-đun, bố cục yêu cầu giao diện, phát hiện cửa sổ trời mô-đun, v.v. Càng nhiều điểm giám sát và càng có ích, việc định vị vấn đề càng hiệu quả. Ví dụ: trên một mô -đun phức tạp hơn một chút, tôi sẽ chôn các giám sát này:
● Định dạng yêu cầu giao diện là sai, yêu cầu không thành công, yêu cầu hết thời gian, ít nhất ba điểm bị chôn
● Yêu cầu dữ liệu cứng không thành công
Điểm
Một số giám sát cũng tự động xử lý các lỗi rõ ràng, chẳng hạn như hình ảnh HTTP xuất hiện dưới trang HTTPS, sẽ ngay lập tức tự động xử lý các vấn đề này.
3. Phát hiện tự động trước trực tuyến
Đây là một phần của toàn bộ môi trường kỹ thuật của Taobao, thử nghiệm tự động mặt trước. Những vấn đề này thường được xử lý trước khi lên mạng:
● Kiểm tra HTMLLiệu nó có tuân thủ các thông số kỹ thuật
● Phát hiện nâng cấp HTTPS
● Kiểm tra tính hợp pháp của các liên kết
● Kiểm tra tính hợp pháp của tài nguyên tĩnh
bởi trang. *
● Bản ghi bộ nhớ JS của trang
Tất nhiên, bạn cũng có thể tự thêm các trường hợp thử nghiệm, chẳng hạn như phát hiện định dạng dữ liệu giao diện, các vấn đề về cửa sổ trời mô -đun, v.v … Phát hiện tự động cũng có thể thiết lập hồi quy thông thường, tương đối được đảm bảo.
5
Taobao Trang chủ Agile Biện pháp
1. Có nhiều mô -đun để kiểm tra sức khỏe. Để theo dõi các thay đổi của mọi điểm trên trang, tôi đã thực hiện các số liệu thống kê chi tiết trong mọi liên kết yêu cầu và kết xuất, như trong hình dưới đây:
Khi yêu cầu giao diện không thành công hoặc giao diện trải qua báo cáo phục hồi thảm họa hoặc mô -đun sẽ kết xuất hơn 5 giây. Tất nhiên, tại thời điểm này, số liệu thống kê báo động cũng đã được gửi đến máy chủ.
2. Giao diện Hub
Hub giao diện
Hub giao diện là một công cụ quản lý yêu cầu dữ liệu, như được hiển thị trong hình bên dưới: kết xuất của nhiều mô -đun trên trang yêu cầu nhiều hơn một nguồn dữ liệu. Khi dữ liệu kết xuất của trang Phản hồi Hoạt động là bất thường, dữ liệu có thể được tìm thấy trực tiếp thông qua trung tâm, giúp tăng tốc độ hiệu quả định vị lỗi. Đồng thời, Hub cũng có thể được sử dụng để chuyển đổi môi trường, chuyển đổi các yêu cầu của giao diện sang giao diện trong môi trường hàng ngày hoặc bắt đầu. Nó là một công cụ để gỡ lỗi.
3. Kênh nhanh
Tôi đặt một kênh phím tắt trước và sau khi tập lệnh trang được thực thi. Khi tôi gặp phải các vấn đề trực tuyến khẩn cấp, chẳng hạn như tràn phong cách hỗn loạn, lỗi giao diện gây ra cửa sổ trời, v.v., tôi có thể trực tiếp sửa đổi CSS và JS của trang thông qua kênh phím tắt và lên mạng trong vòng hai phút.
Tuy nhiên, kênh này chỉ phù hợp để sửa chữa các vấn đề khẩn cấp. Rốt cuộc, thật rủi ro khi chèn mã JS theo ý muốn.
6
Tóm tắt
Có nhiều khía cạnh chưa được mở rộng trong bài viết này, nhưng tôi hy vọng nó có thể cung cấp cho bạn sự hiểu biết cơ bản về trang chủ Taobao.
