Nghiên cứu áp dụng các kỹ thuật phát triển web tiên tiến làm tăng tốc độ tối ưu hiệu năng của ứng dụng web

This is determined by the number of visitors and the number of pages they visit Lưu lượng truy cập của website 4 CDN Content Dellivery Network Mạng lưới phân tán nội dung Place to store

ĐẠI HỌC QUỐC GIA HÀ NỘI

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ

PHẠM VĂN THẢO

NGHIÊN CỨU ÁP DỤNG CÁC KỸ THUẬT PHÁT TRIỂN WEB

TIÊN TIẾN LÀM TĂNG TỐC ĐỘ TỐI ƯU HIỆU NĂNG CỦA ỨNG DỤNG WEB

LUẬN VĂN THẠC SĨ CÔNG NGHỆ THÔNG TIN

Hà Nội - 2015

ĐẠI HỌC QUỐC GIA HÀ NỘI

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ

PHẠM VĂN THẢO

NGHIÊN CỨU ÁP DỤNG CÁC KỸ THUẬT PHÁT TRIỂN WEB

TIÊN TIẾN LÀM TĂNG TỐC ĐỘ TỐI ƯU HIỆU NĂNG CỦA ỨNG DỤNG WEB

Ngành: Công nghệ thông tin Chuyên ngành: Kỹ thuật phần mềm

Mã số: 60.48.01.03

LUẬN VĂN THẠC SĨ

NGƯỜI HƯỚNG DẪN KHOA HỌC: TS TÔ VĂN KHÁNH

Hà Nội – 2015

LỜI CAM ĐOAN

Tôi xin cam đoan rằng, luận văn thạc sĩ công nghệ thông tin “Nghiên cứu,

áp dụng các kỹ thuật phát triển web tiên tiến làm tăng tốc độ, tối ưu hiệu năng của ứng dụng web” là sản phẩm nghiên cứu của riêng cá nhân tôi dưới sự giúp

đỡ rất lớn của Giảng viên hướng dẫn là TS Tô Văn Khánh, không sao chép lại của người khác Những điều đã được trình bày trong toàn bộ nội dung của luận văn này hoặc là của chính cá nhân tôi, hoặc là được tổng hợp từ nhiều nguồn tài liệu Tất cả các tài liệu tham khảo đều có nguồn gốc rõ ràng và được trích dẫn hợp pháp

Tôi xin hoàn toàn chịu trách nhiệm và chịu mọi hình thức kỷ luật theo quy định cho lời cam đoan của mình

Hà nội, ngày 03 tháng 11 năm 2015 Người cam đoan

Phạm Văn Thảo

LỜI CẢM ƠN

Trước tiên tôi xin bày tỏ lòng biết ơn chân thành và sâu sắc đến thầy giáo,

TS Tô Văn Khánh - người đã dành nhiều tâm huyết, tận tình chỉ bảo và giúp đỡ tôi trong suốt quá trình bắt đầu thực hiện đề tài cho đến khi tôi hoàn thành đề tài

Tôi xin gửi lời cảm ơn chân thành tới các thầy cô giáo khoa Công nghệ thông tin, trường Đại học Công nghệ, Đại học Quốc Gia Hà Nội - nơi tôi đã theo học trong thời gian qua Các thầy cô đã cung cấp cho tôi những kiến thức quý báu, tạo điều kiện tốt nhất cho tôi trong suốt quá trình học tập và nghiên cứu tại trường

Cuối cùng tôi xin chân thành cảm ơn những người thân trong gia đình, đặc biệt là bố mẹ tôi là nguồn động viên và ủng hộ tôi Xin cảm ơn bạn bè cùng khóa, đồng nghiệp trong cơ quan đã giúp đỡ tôi trong quá trình học tập và

nghiên cứu thực hiện luận văn

MỤC LỤC

LỜI CAM ĐOAN 1

LỜI CẢM ƠN 2

BẢNG CÁC KÝ HIỆU VÀ CHỮ VIẾT TẮT 6

Chương 1 GIỚI THIỆU 1

Chương 2 NGHIÊN CỨU CÁC KỸ THUẬT GIÚP TĂNG TỐC ĐỘ THỰC THI CHO HAI TẦNG CLIENT-SIDE VÀ SERVER-SIDE 7

2.1 Khái niệm căn bản Client-side và Server-side 7

2.2 Các kỹ thuật tối ưu hiệu năng client-side 8

2.2.1 Kỹ thuật Ajax 9

2.2.2 Kỹ thuật Lazy Load và tải bất đồng bộ tài nguyên tĩnh 12

2.2.3 Kỹ thuật điều chỉnh thích ứng hình ảnh 14

2.2.4 Kỹ thuật nén HTML, JavaScript, CSS 15

2.2.5 Kỹ thuật thu nhỏ tài nguyên 17

2.2.6 Kỹ thuật nạp trước phân giải tên miền vào bộ nhớ đệm trình duyệt 19

2.2.7 Kỹ thuật tối ưu bộ nhớ đệm cho các trình duyệt 20

2.2.8 Kỹ thuật giảm yêu cầu 23

2.2.9 Kỹ thuật giảm gửi cookies và tăng yêu cầu song song cho các trình duyệt khi tải các tài nguyên tĩnh 25

2.2.10 Kỹ thật xác minh html, css 26

2.2.11 Kỹ thật tối ưu ảnh 27

2.2.12 Các chuẩn viết mã tối ưu 28

2.3 Các kỹ thuật tối ưu hiệu năng server-side 29

2.3.1 Bỏ lưu giữ trạng thái của trang 29

2.3.2 Tối ưu xử lý ngoại lệ 30

2.3.3 Sử dụng điều khiển máy chủ phù hợp 30

2.3.4 Sử dụng mẫu lazy-load 31

2.3.5 Sử dụng mẫu singleton 32

2.3.6 Sử dụng chỉ mục cho cơ sở dữ liệu 33

2.3.7 Sử dụng kiểu dữ liệu hợp lý và loại bỏ những đoạn code thừa 33

2.3.8 Kỹ thuật bộ nhớ đêm cho server-side 34

2.3.9 Kỹ thuật Asynchronous Programing with Async and wait 38

2.3.10 Tích hợp các hệ thống tìm kiếm như solr 39

Chương 3 PHƯƠNG PHÁP KIỂM THỬ PHÂN TÍCH ĐÁNH GIÁ KẾT QUẢ HIỆU NĂNG 43

3.1 Sử dụng công cụ kiểm thử 43

3.2 Cơ sở kiểm thử hiệu năng 43

3.2.1 Tổng quan 43

3.2.2 Các hoạt động cốt lõi của kiểm thử hiệu năng 44

3.2.3 Tại sao cần kiểm thử hiệu năng 45

3.2.4 Bối cảnh dự án 46

3.2.5 Mối quan hệ giữa thử nghiệm hiệu năng và hiệu chỉnh 47

3.2.6 Hiệu xuất, Tải, và kiểm thử khả năng chịu tải Performance, Load, and Stress Testing 47

3.2.6 Đường cơ sở 48

3.2.7 Điểm chuẩn 48

3.3 Các rủi ro được giải quyết thông qua kiểm thử hiệu năng 48

3.3.1 Tổng quan 49

3.3.2 Tóm tắt giải quyết rủi ro thông qua kiểm thử hiệu năng 49

3.3 Thiết lập cấu hình mô hình kiểm thử hiệu năng 50

3.4 Các bước thiết lập và chạy kiểm thử hiệu năng 52

3.5 Các phương pháp điều tra giúp hiệu chỉnh các vấn đề hiệu năng dựa trên các báo cáo kiểm thử 60

3.5.1 Phân tích chiếm dụng bộ nhớ 60

3.5.2 Phân tích hiệu năng vi xử lý và các nút thắt cổ chai 61

3.5.3 Phân tích, hiệu chỉnh hiệu năng tầng client-side 62

Chương 4 XÂY DỰNG ỨNG DỤNG THỬ NGHIỆM ĐÁNH GIÁ HIỆU NĂNG 65

4.1 Giới thiệu ứng dụng 65

4.2 Công nghệ sử dụng và các kỹ thuật tối ưu đã áp dụng 65

4.2.1 Nền tảng công nghệ 65

4.2 Các kỹ thuật tối ưu đã áp dụng cho chương trình demo 66

4.2.1 Sử dụng 12 kỹ thuật tối ưu hiệu năng client-side 66

4.2.2 Sử dụng 6 kỹ thuật tối ưu hiệu năng server-side 67

4.2 Kiến trúc ứng dụng 67

4.2.1 Ứng dụng được xây dựng theo mô hình kiến trúc đa tầng 67

4.2.1 Các mẫu thiết kế design pattern áp dụng vào ứng dụng 68

4.3 Phân tích so sánh kết quả thực tế đã đạt được của ứng dụng 68

4.3.1 Mẫu đưa vào kiểm thử hiệu năng cho hai phiên bản 68

4.3.2 Kết quả so sánh 69

4.4 Cài đặt triển khai 72

KẾT LUẬN 73

Các kết quả đạt được 73

Định hướng nghiên cứu trong tương lai 73

TÀI LIỆU THAM KHẢO 74

This is determined by the number

of visitors and the number of pages they visit

Lưu lượng truy cập của website

4 CDN Content Dellivery Network Mạng lưới phân tán nội dung

Place to store something temporarily in a computing environment

using HTTP - that's "Hypertext Transfer Protocol"

Bất cứ khi nào trình duyệt gửi yêu cầu lấy lại tài các tài nguyên

sử dụng gia thức truyền tài siêu văn bản

8 download Bloking Wating a long time or meet timeout to download a resource Chặn tải

A server is a computer program

or a machine that waits for requests from other machines or software (clients) and responds to them

Một máy tính chủ chạy ứng dụng và đợi yêu cầu người dùng

từ máy khách hoăc phần mềm từ máy khác Phục vụ và trả lời các yêu cầu dó

10 Clients

A client machine is a user's computer that is connected to a network and accesses another computer, called a server

Một máy trạm là máy tính của người dùng được kết nối với một mạng và truy cập gửi yêu cầu tới máy tính khác

DANH MỤC HÌNH VẼ

1 Hình 1.1 Đánh giá hiệu năng trang amazon

2 Hình 1.2 Đánh giá hiệu năng trang vnexpress

3 Hình 1.3 Đánh giá hiệu năng trang đại học công nghệ

4 Hình 1.4A Đánh giá tổng hợp hiệu năng các trang web lớn

5 Hình 1.4B Đánh giá tổng hợp hiệu năng các trang web lớn

6 Hình 2.1 Thời gian xử lý tại các tầng của website nguồn stevesouders

7 Hình 2.2 Ứng dụng gmail sử dụng kỹ thuật Ajax cập nhật nội dung mới

8 Hình 2.3 Trang tin điện tử sử dụng kỹ thuậ Ajax tải bất đồng bộ để lấy thông tin giá vàng từ ngân hàng TPBank

9 Hình 2.4 Màn hình minh họa kỹ thuật tải lazy và bất đồng bộ trong ứng dụng

10 Hình 2.5A Tải script đồng bộ

11 Hình 2.5B Tải script bất đồng bộ

12 Hình 2.6 Sử dụng kỹ thuật adaptive chọn ảnh đúng kích cỡ với vùng hiển thị

13 Hình 2.7A So sánh sử dụng nén gzip và không sử dụng nén (Nguồn ConIT)

14 Hình 2.7B Cấu hình gzip ở IIS server

15 Hình 2.8 Công cụ minify

16 Hình 2.9

Thời gian DNS Lookup (Nguồn Googles mod pages peed optimizes) trong hệ chuyển trạng thái quan sát được – OTS

17 Hình 2.10A Minh họa trước và sau khi spite

18 Hình 2.10B Minh họa trước và sau khi spite

19 Hình 2.11 Minh họa cookie gắn vào mỗi yêu cầu ảnh

20 Hình 2.12 Minh họa trang youtobe sử dụng subdomain

21 Hình 2.13 Minh họa trang youtobe sử dụng subdomain

22 Hình 2.14 Proxy cache

23 Hình 2.15 Mã Async and wait

24 Hình 3.1 Các hoạt động cốt lõi thực hiện kiểm thử hiệu năng (Trích dẫn từ Microsoft)

25 Hình 3.2 Mô hình hoạt động kiểm thử hiệu năng (Nguồn từ Microsoft)

26 Hình 3.3A Tạo một web performance and load test project

27 Hình 3.3B Tạo một web performance and load test project

28 Hình 3.4A Ghi các links cần test cho một website

29 Hình 3.4B Dừng ghi các links cần test cho một website

30 Hình 3.5 Thay đổi tên

31 Hình 3.6 Thiết lập các mẫu (pattern)

32 Hình 3.7 Tạo một Load Test trong web performance test

33 Hình 3.8 Thiết lập mẫu cho load test

34 Hình 3.9A Chọn text-mix

35 Hình 3.9B Chọn text-mix

36 Hình 3.9C Chọn text-mix

37 Hình 3.10 Chạy kiểm thử hiệu năng

38 Hình 3.11 Quan sát theo dõi quá trình chạy3.11 Quan sát theo dõi quá trình chạy

39 Hình 3.12A Phân tích kết quả báo cáo

40 Hình 3.12B Phân tích kết quả báo cáo

41 Hình 3.13 Thay đổi kịch bản kiểm thửAk), not (Aj = Ak)

42 Hình 3.14 Kết quả giám sát ứng dụng chiếm dụng bộ nhớ

43 Hình 3.15 Sử dụng công cụ điều tra xem mã nào dẫn đến leak memory

44 Hình 3.16A Sử dụng công cụ điều tra xem mã nào dẫn đến peak cpu

45 Hình 3.16B Sử dụng công cụ điều tra xem mã nào dẫn đến peak cpu

46 Hình 3.17A Báo cáo hiệu năng client-side

47 Hình 3.17B Báo cáo hiệu năng client-side

48 Hình 4.1 Giao diện chính của chương trình demo

49 Hình 4.2 Kiến trúc ứng dụng

50 Hình 4.3 Kết quả báo cáo kiểm thử hiệu năng phiên bản tối ưu hiệu năng

51 Hình 4.4 Kết quả báo cáo kiểm thử hiệu năng phiên bản không tối ưu hiệu năng

52 Hình 4.5 Trang sử dụng kỹ thuật tối ưu hiệu năng

53 Hình 4.6 Trang không sử dụng kỹ thuật tối ưu hiệu năng

DANH MỤC BẢNG

1 Bảng 1 Bảng 1 Các rủi ro hiệu năng cần giải quyết

2 Bảng 2A Bảng 2A Xác định yêu cầu phần cứng cho bộ controller và agents

3 Bảng 2B Bảng 2B Xác định yêu cầu phần cứng cho bộ controller và agents

4 Bảng 3 Bảng 3 So sánh hiệu năng demo hai phiên bản tối ƣu và chƣa tối ƣu hiệu năng

Chương 1 GIỚI THIỆU

Trong vài năm gần đây hiệu năng của các ứng dụng web trở nên vô cùng quan trọng cho các tổ chức, doanh nghiệp Vậy tại sao trang web chạy nhanh và có khả năng chịu tải lớn lại quan trọng đến thế Tôi xin đặt vấn đề như sau

Một là: Theo cách đánh giá công cụ tìm kiếm google nếu website 50ms

slower (Chậm hơn 50ms) = 20% drop in traffic (Giảm đi mất 20% lưu lượng truy cập) Tức là trang web chỉ chậm hơn 50 mili giây là công cụ tìm kiếm google xếp thứ hạng giảm đi 20% lưu lượng truy cập Điều này đồng nghĩa với việc nếu một trang web nhanh lên 50 mili giây thì website đó sẽ đạt được lợi ích như gia tăng độ phổ biến, góp phần xây dựng uy tín, đánh giá được sự quan tâm của người sử dụng, giúp gia tăng các lượng người dùng mới Đặc biệt là một tiêu chí xếp hạng website trong bản xếp hạng kết quả tìm kếm sẽ được lên vị trí cao hơn giúp người dùng biết đến website đó dễ dàng hơn

Hai là: Một bí quyết thành công quan trọng của CEO AMAZON là ông

luôn khó chịu với những thứ khách hàng ghét như sự chậm trễ, sản phẩm gặp lỗi hay hết hàng Với Amazon website phải được đảm bảo vận hành nhanh chóng nhất có thể vì Amazon tin thời gian tải trang chỉ trễ 0,1s đồng nghĩa họ mất 1% hoạt động của khách hàng

100ms slower (Chậm hơn 100ms) = 1% drop in seles (Giảm mất 1% doanh thu bán hàng) Theo tính toán năm 2014 doanh thu Amazon 75 tỷ đô vậy công ty sẽ mất $2,054,794 mỗi ngày nếu site chậm 0,1s giây Nếu ai đó là nhân viên của Amazon và có thể tối ưu website này nhanh lên 0,1s nếu làm được như vậy thì sẽ giúp Amazon kiếm được $2,054,794 mỗi ngày

Ba là: su hướng tất yếu của sự dịch chuyển nền tảng hỗ trợ truy cập

website từ thiết bị cầm tay như mobile và máy tính bảng ngày càng lớn Vấn đề đặt ra là các thiết bị này bị giới hạn về năng lực xử lý và bang thông truy cập Vì thế những website nhanh người dùng sẽ đánh giá rất cao trong cảm nhận sự tương tác với giao diện, họ sẽ ở lại và truy cập website đó nhiều hơn và số lượng người dùng cũng từ đó mà gia tăng nhiều hơn Trái ngược lại nếu website không được tối ưu hiệu năng Chúng sẽ trở lên chậm chạp khiến quá trình hiển thị của

trang sẽ nặng nề không đồng nhất, thậm chí phá vỡ cấu trúc của trang dẫn đến sự phản cảm trải nghiệm người dùng

Theo ngồn thông tin khảo sát bởi tổ chức strangeloopnetworks.com chứng minh rằng 57% số lượng người tiêu dùng trực tuyến sẽ cảm thấy bực bội khi phải đợi một web site tải hết trên 3 giây 80% số họ sẽ không bao giờ quay lại và hầu hết nửa số họ sẽ nói với người khác về trải nghiệm không tốt với các website đó [1]

Bốn là: Theo nghiên cứu trong vài năm gần đây có nhiều hệ thống lớn

thường xuyên bị quá tải phục vụ và ngừng hoạt động khi lượng truy cập tăng đột biến Chẳng hạn như các hệ thống bán vé tầu vào dịp tết nguyên đán, hệ thống xem điểm thi đại học, hệ thống tài chính chứng khoán, ngân hàng luôn luôn bị quá tải khi số lượng người dùng đồng thời tăng lên hàng trăm ngàn lượt truy cập trên giây Vậy khi đó nghĩ đến việc mở rộng gánh tải cho phần cứng mở rộng đường truyền, từng đó chưa đủ và quá tốn kém chi phí Nếu nghĩ đến việc tối ưu hiệu năng cho ứng dụng lúc đó sẽ là quá muộn và tốn rất nhiều chi phí thậm chí phải kiến trúc lại từ đầu Hơn nữa làm ảnh hưởng nghiêm trọng đến hình ảnh website đây cũng là nguyên nhân chính dẫn đến sự thành bại của dự án Chính vì thế khi phát triển một hệ thống phần mềm lớn công đoạn kiểm thử hiệu năng ứng dụng trước khi phát hành sản phẩm là rất cần thiết để đảm bảo khả năng, mức độ chịu tải, độ tin cậy và khả năng mở rộng của hệ thống theo một khối lượng tải nhất định Tránh rủi ro thảm họa về hiệu năng và qua đó đánh giá lại kết quả tối ưu hiệu năng sau mỗi giai đoạn phát triển Dựa trên kết quả kiểm thử hiệu năng các nhà phát triển sẽ sử dụng các công cụ phân tích để tìm ra được nút thắt cổ trai, tìm ra được các chức năng tốn thời gian xử lý, chiếm dụng nhiều bộ nhớ qua đó giúp tối ưu kịp thời trước khi phát hành sản phẩm

Để nâng cao hiệu năng thực thi của ứng dụng web là một lĩnh vực rất rộng lớn và phức tạp Hầu hết các vấn đề hiệu năng gây ra vì chức năng thử nghiệm không tốt, không có các phương pháp và chiến lược tối ưu cho ứng dụng, các vấn đề hạ tầng, ít nhất đây là ba vấn đề đầu tiên được quan tâm khi phát triển dự

án Chính vì thế tình trạng khá phổ biến ở việt nam là hầu hết các website khi phát hành đều gặp phải các sự cố hiệu năng

Qua nghiên cứu về 20 trang thương mại điện tử, báo chí từ năm 2001 đến

2014, Amazon đã đạt điểm cao hơn 70% so với mức độ khả năng tải phản hồi trung bình của 19 trang còn lại Amazon tải file nhanh hơn vài giây so với các

đối thủ Ở một bài toán kiểm tra amazon.com tải cả trang mất 2,802s, Trang bắt đầu hiển thị mất 1,191s trong khi đó các trang còn lại phải mất 7s để bắt đầu hiển thị giao diện Họ nhanh hơn một phần là do hạ tầng phần cứng của họ vượt trội nhưng phần lớn là do họ chú trọng tối ưu hiệu năng cho website tốt hơn Dưới đây là báo cáo kết quả qua nghiên cứu và so sánh một số trang web tiêu biểu

 Trang amazon với kết quả vượt trội thời gian bắt đầu hiển thị nội dung ở 1.191 sec Ducument complete ở 2.802 sec

Hình 1.1 Đánh giá hiệu năng trang amazon

 Trang vnexpress tại Việt Nam một trong những trang báo điện tử được đánh giá nhanh nhất việt nam Nhưng qua bài test thời gian bắt đầu hiển thị nội dung ở 5.2.0 sec Ducument complete ở 17.006 sec

Hình 1.2 Đánh giá hiệu năng trang vnexpress

 Trang đại học công nghệ http://www2.uet.vnu.edu.vn/coltech/ Hiển thị trang ở 3,5s thời gian xử lý ở server-side 1,242 các chỉ số tối ƣu đều điểm F rất

tệ, Không sử dụng CND

Hình 1.3 Đánh giá hiệu năng trang đại học công nghệ

Hình 1.4A Đánh giá tổng hợp hiệu năng các trang web lớn

Hình 1.4B Đánh giá tổng hợp hiệu năng các trang web lớn

Qua bảng đánh giá tổng hợp ta thấy 1,5s giây đầu tiên amazon đã hiển thị nửa trang vnxpress bắt đầu hiển thị ở giây thứ 5,5s, trang thời báo doanh nhân chưa hiển thị

Tóm lại vấn đề tối ưu hiệu năng và kiểm thử hiệu năng cho ứng dụng web nói riêng và ứng dụng phần mềm nói chung là vô cùng quan trọng và không thể thiếu Nó không chỉ góp phần làm tốt hơn cho trải nghiệm người dùng, nó còn giúp giữ và gia tăng số người sử dụng theo thời gian Đồng nghĩa với việc giúp thúc đẩy tăng trưởng to lớn trong kinh doanh Vì vậy cần có một chiến lược tối

ưu hiệu năng và kiểm thử hiệu năng ngay từ khi bắt đầu xây dựng dự án

Chương 2 NGHIÊN CỨU CÁC KỸ THUẬT GIÚP TĂNG TỐC ĐỘ THỰC THI CHO HAI TẦNG CLIENT-SIDE

VÀ SERVER-SIDE

Trong chương này, sẽ phân tích và hướng dẫn cách áp dụng các kỹ thuật tiên tiến giúp tăng tốc độ thực thi của ứng dụng web Có hai tầng của ứng dụng cần

áp dụng các kỹ thuật này, bao gồm client-side và server-side

2.1 Khái niệm căn bản Client-side và Server-side

Đây là những khái niệm nền tảng để xây dựng nên một hệ thống ứng dụng Web

Client-side: Là các chương trình ứng dụng dùng để thiết lập kết nối với mục đích gửi đi các yêu cầu cung cấp dịch vụ Đó là các trình duyệt Web, các trình biên tập (editor) hoặc các công cụ người sử dụng cuối khác Các client thông dụng nhất thường chạy trên máy của người sử dụng cuối

Server-side: Là chương trình ứng dụng dùng để chấp nhận kết nối với mục đích phục vụ các yêu cầu cung cấp dịch vụ bằng cách gửi các đáp ứng trở lại phía yêu cầu Đối với các hệ thống cung cấp dịch vụ lớn, các chương trình này thường chạy trên các hệ thống phần cứng riêng và thường được phân biệt là phần cứng server và phần mềm server

Một máy chủ Web (Web server) thì quản lý và cung cấp việc truy cập tới một tập hợp các tài nguyên trên nó Tài nguyên trên nó thì có thể đơn giản chỉ là các file văn bản, hình ảnh hoặc có thể là các dữ liệu phức tạp hơn chẳng hạn như các cơ sở dữ liệu

Trên nền tảng Web thì hầu hết các yêu cầu chủ yếu là các công việc download Các máy client thì download thông tin từ server Trong trường hợp này chính nó gửi thông tin yêu cầu chứa tên của tài nguyên cộng thêm với một vài thông tin từ phía client thì trong đó thông tin download về thì thường là các

dữ liệu văn bản hoặc hình ảnh với kích thước trung bình khoảng 10000B Đây chính là một trong những đặc điểm cơ bản của hệ thống Web Tốc độ nhận dữ liệu bao giờ cũng cao hơn tốc độ truyền dữ liệu đi bởi vậy hầu hết người sử dụng Web thì thường xuyên nhận thông tin

Web client thường dùng được gọi là trình duyệt (browser) Những ứng dụng này chẳng hạn như là Chrome, Firefox, Safari và Microsoft Internet Explore Mục đích của những trình duyệt này là hiển thị nội dung của một trang Web Có một số lượng lớn các server được sử dụng rộng rãi trên Web Apache HTTP server là một trong những server Web thông dụng và miễn phí Netcape, Microsoft và các công ty khác cũng có một số các sản phẩm Nhưng hầu hết tất

cả các sản phẩm thì đều tập trung vào hiệu năng của các server Một site nổi tiếng trên Internet thì có thể nhận 10 triệu yêu cầu một ngày Trong trường hợp này thì cả phần cứng lẫn phần mềm đều phải được thiết kế một cách cẩn thận để

có thể đáp ứng được nhiều yêu cầu một lúc như vậy Có rất nhiều site chạy trên nhiều server song song với nhau để có thể đáp ứng được tỉ lệ cao các yêu cầu như vậy và còn phục vụ cho việc dự phòng

2.2 Các kỹ thuật tối ưu hiệu năng client-side

Theo nghiên cứu của 50 nghìn website hàng đầu, 13% thời gian xử lý phản hồi

từ database logic và server side, 87% thời gian xử lý phản hồi ở client side gồm tải ảnh, css, js, html, video stream và các tài nguyên khác [2]

Hình 2.1 Thời gian xử lý tại các tầng của website nguồn stevesouders [2]

Từ biểu đồ trên ta thấy việc tối ưu hiệu năng cho client-side rất quan trọng bởi chúng chiếm phần lớn tổng thời gian thực thi của một trang web Với xu hướng điện toán đám mây, tư tưởng đột phá của các chuyên gia hiệu năng hàng đầu trên thế giới đang tập trung nghiên cứu để hướng đến các công nghệ chuyển dịch tính toán xử lý về phía mạng lưới client side để tận dụng tài nguyên dư thừa rất lớn của máy trạm mà không bao giờ sử dụng hết, giúp giảm tải cho phía

server side Dưới đây là các kỹ thuật về tư tưởng tối ưu hiệu năng phân tích rõ lợi ích và hạn chế cho từng kỹ thuật

2.2.1 Kỹ thuật Ajax

AJAX tiếng anh là “Asynchronous JavaScript and XML” nghĩa là “JavaScript

và XML không đồng bộ” là một nhóm các công nghệ phát triển web [3]

 Lợi ích là các trang được cập nhật nhưng không nạp lại toàn bộ Mọi thao tác của người sử dụng sẽ gửi mẫu của một lời gọi JavaScript tới bộ xử lý Ajax thay vì tạo một yêu cầu http (http request) Ví dụ việc kiểm tra sự hợp lệ của dữ liệu, sửa đổi dữ liệu trong bộ nhớ và thậm chí là một thao tác duyệt trang bộ xử

lý Ajax tự nó đảm nhận trách nhiệm này Nếu bộ xử lý cần gì từ máy phục vụ để đáp ứng như khi nó gửi dữ liệu để xử lý, tải bổ sung các mã giao diện hay nhận

dữ liệu mới nó sẽ thực hiện các yêu cầu tới máy phục vụ một cách không đồng

bộ mà không làm gián đoạn sự tương tác của người sử dụng với ứng dụng web

Các ứng dụng truyền thống về bản chất là gửi dữ liệu từ các form, được nhập bởi người sử dụng tới một máy phục vụ web Máy phục vụ web sẽ trả lời bằng việc gửi về một trang web mới Do máy phục vụ phải tạo ra một trang web mới mỗi lần như vậy nên các ứng dụng chạy chậm và lung túng hơn

Mặt khác các ứng dụng Ajax có thể gửi các yêu cầu tới các máy phục vụ web để nhận về từ máy chủ những dữ liệu cần thiết, thông qua việc dùng SOAP hoặc một vài dịch vụ web dựa trên nền tảng XML, JSON

Kết quả là trang web được hiển thị nhanh hơn vì lượng dữ liệu trao đổi giữa máy chủ và trình duyệt web giảm đi rất nhiều Thời gian xử lý của máy chủ web cũng vì thế mà được giảm theo vì phần lớn thời gian xử lý được thực hiện trên máy khách của người dùng

Trong nhiều trường hợp, các trang web chứa rất nhiều nội dung thông thường trong trang Nếu sử dụng các phương pháp truyền thống, những nội dụng

đó sẽ phải nạp lại toàn bộ với từng yêu cầu Tuy nhiên nếu sử dụng Ajax một ứng dụng web có thể chỉ yêu cầu cho các nội dung cần thiết phải cập nhật, do đó giảm lượng lớn băng thông và thời gian nạp trang

Việc dùng các yêu cầu không đồng bộ (asynchronous request) cho phép giao diện người dùng của ứng dụng hiển thị trên trình duyệt giúp người dùng trải nghiệm sự tương tác cao, với nhiều phần riêng lẻ

Sử dụng Ajax có thể làm giảm các kết nối đến server, do các mã kịch bản (script) và các style sheet, html chỉ phải yêu cầu một lần Điển hình là dịch vụ gmail, khi vào gmail mỗi lần có email mới hoặc một hành động gửi email thì chỉ một phần nội dung được tải thay vì phải tải lại toàn bộ trang

Hình 2.2 Ứng dụng gmail sử dụng kỹ thuật Ajax cập nhật nội dung mới

Những web site lớn thường tích hợp với rất nhiều các hệ thống thứ ba Vậy vấn đề đặt ra là khi ứng dụng web của mình đang cố tải một nội dung từ một bên thứ ba chẳng hạn như thông tin về chưng khoán, thời tiết, tỷ giá ngân hàng, quảng cáo, lịch chiếu phim, game, facebook, twiter…để hiển thị lên trang tin chính Nếu như một trong số hãng thứ ba được nêu ở trên bị dừng hoạt động

vì một nguyên nhân nào đó hoặc đơn giản là bên thứ ba phản hồi nội dung quá chậm, khi đó sẽ dẫn đến website sẽ bị blocking để chờ cho tới khi lấy được toàn

bộ nội dung Và môt điều ảnh hưởng nghiêm trọng là website sẽ phản hồi chậm chạm và gây cảm giác khó chịu cho người sử dụng Thậm chí là hàng đợi chờ xử

lý sẽ tăng vọt khiến hiệu năng CPU quá tải dẫn đến hệ thống tê liệt hoàn toàn Chính vì thế kỹ thuật tải bất đồng bộ sẽ được sử dụng hiệu quả trong những tình huống này Sử dụng kỹ thuật này để tải bất đồng bộ một vùng nội dung mà không phải quan tâm nội dung đó đang bị treo hay không Website vẫn tiếp tục tải mà không bị ảnh hưởng bởi các nội dung bị blocking

Hình 2.3 Trang tin điện tử sử dụng kỹ thuậ Ajax tải bất đồng bộ để lấy thông tin giá vàng từ ngân hàng TPBank

Dưới đây là đoạn mã nguồn trong ứng dụng demo tải thêm nội dung sử dụng Ajax tải bất đồng bộ

var servicePath = "/WebServices/ClipServices.ashx";

success: function (data) {

var content = $(".clip-lip-container");

Không thể hiển thị nội dung trên các trang tìm kiếm vì các trang tìm kiếm hiện nay vẫn chưa hỗ trợ tìm vì rất khó tìm và gần như không thể tìm được Không thể sử dụng nút back vì back cũng là chính nó

Nhưng với những điểm hạn chế nói trên thì Ajax vẫn đang được các lập trình viên sử dụng rộng rãi và đang nghiên cứu để cải thiện nó để khắc phục các nhược điểm Ví dụ như vừa update thông tin trên web, vừa thay đổi trên thanh address để có thể sử dụng một số chức năng liên quan tới địa chỉ tuyệt đối này Dùng các API để push lên các cỗ máy tìm kiếm giúp giúp khắc phục về lỗi tìm kiếm nội dung Sử dụng URL query để đánh dấu phân trang

2.2.2 Kỹ thuật Lazy Load và tải bất đồng bộ tài nguyên tĩnh

Tải Lazy là một khái niệm mà ứng dụng trì hoãn việc tải các đối tượng cho đến thời điểm mà người dùng cần nó Nói một cách đơn giản là tải theo yêu cầu của người dùng chứ không tải đối tượng không cần thiết

 Lợi ích của việc này là giảm thiểu số lượng yêu cầu, giảm thiểu số lượng tài nguyên thừa cần tải cho tới khi người dùng cần đến chúng thực sự

Hơn nữa kỹ thuật này còn để áp dụng cho việc tải các mã javascript từ bên ngoài để tránh dừng tải (bloking download) Về bản chất khi tải mã javascript trình duyệt sẽ dừng tất cả các hoạt động tải tài nguyên khác và chờ cho tới khi

mã này được tải hoàn thành thì các tiến trình khác mới bắt đầu được tải Chính

vì thế khi phát triển sản phẩm có liên quan đến các hệ thống thứ ba cần cân nhắc

sử dụng kỹ thuật tải bất đồng bộ và tải lazy

Một ứng dụng phổ biến sử dụng kỹ thuật lazy load rất hiệu quả là facebook như chúng ta biết khi người dùng cuộn trang đến đâu thì dòng thời gian và ảnh mới tiếp tục tải về cho người dùng

Dưới đây là mã tải ảnh lazy từ thư viện jquery.scrollstop.js cài đặt trong ứng dụng demo Mục đích của mã này là chỉ load ảnh trang tiếp theo khi sảy ra

sự kiện cuộn trang của người dùng

<img class="lazy" data-original="img/example.jpg" width="80" height="120" alt=

"">

$("img.lazy").lazyload({

event: "scrollstop"

});

Hình 2.4 Màn hình minh họa kỹ thuật tải lazy và bất đồng bộ trong ứng dụng

 Tải bất đồng bộ như đề cập bên trên trình duyệt tải mã javascript không phải song song mà là tuần tự Điều này có nghĩa là khi tải trang trình duyệt sẽ chỉ tải từng file javascript một và khi đó toàn bộ các thành phần khác của trang như thẻ html, css và rất nhiều tài nguyên khác sẽ phải đợi cho đến khi các tệp tin javascript lần lượt được tải xong Vấn đề ở đây là nếu website tải một đoạn mã javascript từ một nguồn nào đó mà nguồn này không sẵn sàng điều này sẽ dẫn đến trang web bị blocking Chính vì thế website cần có kỹ thuật tải bất đồng bộ

để giải quyết tốt nhất cho trường hợp này

Hình 2.5A Tải script đồng bộ

Hình 2.5B Tải script bất đồng bộ

Như hình 2.5.A minh họa tải script đồng bộ File ảnh 20x9px.gif phải đợi file script sortable-async.js tải song mới đến lượt tải Hình 25.B minh họa tải bất đồng bộ Nhìn vào mốc thời gian có thể thấy hai files sortable-async.js và arrow-right-20x9px.gif được tải song song mà không phải chờ đợi nhau Việc này giúp quá trình hiển thị trang sẽ nhanh hơn rất nhiều hơn nữa ứng dụng tương tác với người dùng sẽ mượt mà hơn Các thành phần trong trang không bị blocking, tận dụng tốt nhất khả năng tải tài nguyên song song của trình duyệt

arrow-right-Dưới đây là mã cài đặt tải bất đồng bộ javascript từ nguồn ngoài cài đặt trong ứng dụng demo

Ở đoạn mã trên dòng mã thứ 5 thiết lập trạng thái tải bất đồng bộ có nghĩa

là script này sẽ được tải từ nguồn youtube.com một cách bất đồng bộ mà không

bị blocking các tiến trình tải các tài nguyên khác Dòng mã thứ 13 kích hoạt sự kiện tải script từ youtube khi cả trang web đã hiển thị xong Có thể sử dụng kỹ thuật này để trì hoãn việc tải script trong các sự kiện khác nhau khi hiển thị trang [4, 5, 6, 7]

 Nhược điểm của tải lazy và tải bất đồng bộ là gây hại đến SEO của website bởi vì tải lazy sẽ không binding dữ liệu như các thuộc tính src, title khi tải trang lần đầu tuy nhiên có thể khắc phục nhược điểm này bằng các thủ thuật SEO khác cho website

2.2.3 Kỹ thuật điều chỉnh thích ứng hình ảnh

Kỹ thuật điều chỉnh thích ứng hình ảnh (adaptive image) này mục đích nhận diện kích cỡ màn hình của người dùng và tự động tạo cache và chọn đúng nguồn ảnh phù hợp với kích cỡ màn hình và khung hiển thị

 Lợi ích kỹ thuật này đặc biệt hiệu quả cho thiết kế đáp ứng (Responsive Designs) Trang web ngày càng được xem trên thiết bị nhỏ hơn, chậm hơn về năng lực xử lý, các thiết bị bang thông thấp Chính vì thế kỹ thuật này sẽ nhận diện kích thước màn hình, vùng hiển thị để tải những file ảnh phù hợp với kich

cỡ vì thế lợi ích ở đây là file ảnh sẽ nhỏ hơn về kích thước tránh bang thông ùn tắc và không bị co dãn làm hỏng điểm ảnh [8, 9]

Hình 2.6 Sử dụng kỹ thuật adaptive chọn ảnh đúng kích cỡ với vùng hiển thị

 Nhược điểm của kỹ thuật này là phải lưu rất nhiều hình ảnh với kích thước khác nhau dẫn đến tốn không gian lưu trữ phía server side

2.2.4 Kỹ thuật nén HTML, JavaScript, CSS

Gzip được dựa trên các thuật toán Deflate, mà là một sự kết hợp mã hóa của LZ77 và Huffman [3] Nhiều máy chủ web có thể nén các tập tin ở định dạng gzip trước khi gửi chúng để tải về, hoặc bằng cách gọi một module của bên thứ

ba

 Lợi ích của kỹ thuật này có thể làm giảm lượng thời gian cần để tải về các tài nguyên cần thiết làm cho ứng dụng web chạy nhanh hơn

Giả sử rằng một ứng dụng web các nội dung HTML, JavaScript, CSS nếu không được nén là 3MB và sau khi nén còn 300KB Nếu như có 1000 yêu cầu từ máy trạm đồng nghĩa với việc server phải gửi ~ 3GB dữ liệu nếu website sử dụng kỹ thuật nén thì server chỉ phải gửi 300MB Đó là một con số gây ảnh hưởng rất lớn đến chi phí cho thời gian tải trang và bang thông của đường truyền Hơn nữa khi sử dụng kỹ thuật nén hầu hết các máy khách được cài đặt phần mềm chống virus hoặc được thiết lập proxy sẽ bỏ qua các tập tin này khi tải về Điều này làm tăng đáng kể về thời gian hiển thị nội dung của trang trên trình duyệt [10]

Hình 2.7A so sánh sử dụng nén gzip và không sử dụng nén (Nguồn ConIT)

Hình 2.7B Cấu hình gzip ở IIS server

 Điểm hạn chế của kỹ thuật này là chi phí tính toán để thực hiện các thuật toán giải nén trên máy trạm Tuy nhiên ngày nay các chuyên gia hiệu năng về trình duyệt đang ngày càng cải tiến các thuật toán nén dữ liệu nhiều hơn trên server side và giải nén dữ liệu nhanh hơn trên các phiên bản mới của trình duyệt

2.2.5 Kỹ thuật thu nhỏ tài nguyên

Mục đích để giảm bớt dung lƣợng các tài nguyên loại bỏ các bytes không cần thiết, chẳng hạn nhƣ khoảng trắng, xuống dòng, thụt đầu dòng, mã chú thích, các biến trùng lặp…

 Lợi ích của kỹ thuật này là khi thu nhỏ HTML, CSS, JavaScript sẽ làm giảm đáng kể tốc độ tải tài nguyên, giúp trình duyệt phân tích cú pháp và hiển thị nội dung nhanh hơn

Ví dụ về thu nhỏ HTML

var input = '<! some comment ><p>blah</p>';

var output = minify(input, { removeComments: true });

output; '<p>blah</p>'

Thu nhỏ JavaScript Giúp biên dịch từ mã JavaScript tới mã JavaScript tốt hơn nhƣ giúp trình duyệt phân tích và thực thi mã nhanh hơn, phân tích phát hiện các mã tồi, loại bỏ và viết lại những dòng mã gây lỗi, kiểm tra cú pháp…

Hình 2.8 Công cụ minify

Ví dụ trên cho thấy đã giảm đƣợc dung lƣợng mã từ 92 bytes còn 55 bytes bằng cách removing chú thích, khoảng trắng và thay thế những biểu tƣợng cơ bản

Thu nhỏ CSS: Loại bỏ chú thích, khoảng trắng, mã thừa, tối ƣu mã css

2.2.6 Kỹ thuật nạp trước phân giải tên miền vào bộ nhớ đệm trình duyệt

Kỹ thuật nạp trước phân giải tên miền vào bộ nhớ đệm (DNS prefetching) giúp giảm độ trễ của yêu cầu http, Giúp giảm bang thông đặc biệt là trên các mạng di động Bởi vì sự phân giải tên miền được nhớ đệm trước vào các trình duyệt dẫn đến các yêu cầu không mất thời gian phân giải tên miền sang địa chỉ IP Trình duyệt sẽ nhớ đệm lại quá trình phân giải tên miền trên dẫn đến giảm 5% thời gian phân giải [10, 12]

Đoạn mã áp dụng kỹ thuật DNS prefetching:

<link rel="dns-prefetch" href="http://www.spreadfirefox.com/">

IP: 63.245.217.181

Hình 2.9 Thời gian DNS Lookup (Nguồn Googles mod pages peed optimizes)

2.2.7 Kỹ thuật tối ưu bộ nhớ đệm cho các trình duyệt

Hầu hết các trình duyệt sẽ nhớ đệm (cache) các tài nguyên không thường xuyên thay đổi như CSS file, image files, JavaScript file… Những tài nguyên này sẽ mất nhiều thời gian để tải qua mạng và tốn rất nhiều bang thông Dẫn đến làm tăng thời gian cần để tải một trang web Vì thế HTTP caching cho phép những tài nguyên này được lưu lại, hoặc cache, bởi trình duyệt hoặc proxy Một khi nguồn tài nguyên được cache khi đó trình duyệt hoặc proxy có thể tham chiếu tới một bản sao local cached thay vì phải tải lại từ máy chủ từ những lần yêu cầu tiếp theo

 Lợi ích của caching giúp giảm bớt thời gian bằng cách loại bỏ rất nhiều yêu cầu http (http requests), và giảm đáng kể tổng kích thước phản hồi Bên cạnh đó cũng làm giảm thời gian cho những người truy cập tiếp theo Website sử dụng hiệu quả caching sẽ làm giảm đáng kể bang thông [10, 13, and 14]

Dưới đây là thông tin về Header http request

HTTP/1.1 200 OK

Date: Fri, 08 Nov 2013 04:41:40 GMT

Server: Apache/2.2.15 (CentOS)

Last-Modified: Sun, 11 Aug 2013 02:41:48 GMT

Etag: "1c253d-6c2-4e3a2f30b418d"

Accept-Ranges: bytes

Content-Length: 1730

Cache-Control: max-age=1209600

Expires: Fri, 22 Nov 2013 04:41:40 GMT

Keep-Alive: timeout=15, max=100

Connection: Keep-Alive

Content-Type: text/javascript

Vấn đề đầu tiên cần xử lý là: Làm sao biết một tài nguyên mà web client

đã caching trước đó đã bị thay đổi hay cập nhật hay chưa để server có thể gửi về tài nguyên mới để cập nhật Bằng cách tận dụng những thông tin ở trên để phục

vụ mục đích web caching

1) Last-Modified

Trước tiên chú ý tới dòng đầu tiên: “Last-modified” So sánh thời gian sửa đổi cuối cùng để xác định xem file này đã cập nhật nội dung nào mới chưa, nếu có thì tải về:

B1: Client gửi Last-modified qua http header tới Server

B2: Server: Tìm file đó, kiểm tra Last-modified có khớp với Last-modified của client không, nếu khớp, tới B4

B3: Nếu không khớp (tức là đã có cập nhật mới), gửi HTTP response chứa file yêu cầu về cho client Tới B5

B4: Gửi HTTP response chứa Status Code: 304 Not Modified

Bước 5: Kết thúc

2) Etag (Entity Tags)

Khuyết điểm khi dùng Last-Modified:

 Múi giờ và thời gian của Server phải trùng với của client

 Vẫn yêu cầu xử lý trên server

Do đó, có một cách khác là dùng Etag, nó là một chuỗi duy nhất được sinh ra bằng hash hoặc footprint, tức là mỗi lần có thay đổi là Etag cũng sẽ bị đổi theo B1: Client gửi Etag thông qua http header tới Server

B2: Server kiểm tra xem Etag có khớp không, nếu khớp chuyển tới B4

B3: Nếu không khớp (có cập nhật mới), gửi HTTP response chứa file yêu cầu về cho client Tới B5

B4: Gửi HTTP response chứa Status Code: 304 Not Modified

B1: Browser: check Experies, nếu còn trong Expiration thì chuyển tới bước 4 B2: Nếu đã hết hạn (expired) thì gửi yêu cầu tới server yêu cầu gửi file về

B3: Server gửi file đã yêu cầu từ Client Tới bước 4

Mục đích của Cache-Control là để các nhà phát triển có thể kiểm soát tốt hơn nội dung trang web và giới hạn địa chỉ cho Expires

Cache-Control header bao gồm:

 Max-age = [seconds] gán thời gian tối đa trước khi file hết hạn Giá trị này cũng tương tự như Expires và được tính bằng giây

 S-maxage = [seconds] cũng tương tự như max-age nhưng chỉ áp dụng cho những cache được chia sẻ (ví dụ như proxy)

 Public đánh dấu rằng gói response này có thể cached Thông thường người ta set thuộc tính public cho những thông tin không bảo mật và báo cho trình duyệt biết rằng có thể cache Thông thường, nếu yêu cầu xác thực HTTP thì response sẽ tự động private

 Private chỉ cho phép cache thông tin của một user nào đó vào trình duyệt của họ và những shared cache (như proxy) thì không được phép

 Proxy cache cơ chế cache không chỉ được thực hiện tại trình duyệt mà còn tại các public proxy server Điều này có nghĩa là người dùng lần đầu tiên vào trang web đã sẽ tạo cache cho các người dùng khác được hưởng lợi Khi một tài liệu được yêu cầu lần đầu tiên thông qua một proxy server, thì tất cả các user khác ghé thăm trang web thông qua proxy này đều lấy tài liệu tại cache của proxy mà không cần phải truy cập đến server gốc Điều này cũng gần giống như bạn có một hosting miễn phí đặt gần phía người dùng hơn, giúp cho người dùng truy cập nhanh hơn và giảm thiểu rất nhiều bang thông tới server chính Để cho

phép các proxy lưu trữ các tài nguyên của website vào cache, sử dụng control: public header

Cache-5) Các lưu ý để xây dựng một website cache hiệu quả

 Sử dụng những URL duy nhất Đây là nguyên tắc vàng trong caching Nếu sử dụng một nội dung giống nhau cho trang khác nhau, những người dùng khác nhau hoặc những website khác nhau thì nên sử dụng các URL giống nhau Đây là cách dễ dàng và hiệu quả nhất để trang web có thể dễ dàng caching Ví

dụ, nếu sử dụng /index.html để chỉ tới một nội dung thì phải luôn luôn sử dụng

nó

 Sử dụng một thư viện ảnh chung như vậy những phần tử khác nhau sẽ dẫn đến những thư viện ảnh đó từ những vị trí khác nhau

 Cache lại những hình ảnh và những trang không thay đổi thường xuyên

Sử dụng header Cache-Control: max-age và set cho nó một giá trị thật rộng

 Nếu một resource (đặc biệt là một file để download) bị thay đổi, hãy đổi tên của nó Với cách này, ta có thể giữ nó lâu hơn mà vẫn đảm bảo được phiên bản chính xác đang được cung cấp bằng cách mỗi lần cập nhật phiên bản mới, ta chỉ cần sửa đường dẫn tới nó một chút Và trang web dẫn tới nó phải là duy nhất

và thời gian quá hạn của trang web này phải ngắn

 Không thay đổi những file không cần thiết Khi ta update website, chỉ thay thế những file được sửa đổi, không nên update toàn bộ trang web vì những file không bị sửa đổi thì thuộc tính Last-Modified của nó sẽ thay đổi và trình duyệt sẽ phải cache lại nó

 Chỉ sử dụng cookies khi cần thiết Cookies rất khó cache và không cần thiết trong nhiều trường hợp Nếu bạn bắt buộc phải sử dụng cookie thì nên hạn chế dùng nó cho những trang web động

 Hạn chế sử dụng SSL Vì những trang mã hóa không được cache lại, do

đó ta chỉ sử dụng chúng trong những trường hợp bắt buộc và không nên sử dụng nhiều hình ảnh cho những trang SSL

 Kiểm tra trang web của bạn với http://redbot.org/ Nó sẽ giúp bạn hiểu hơn những nội dung được trình bày bên trên để optimize trang web của bạn

 Sử dụng cache nhiều sẽ làm tăng bộ nhớ phía máy trạm Ngoài ra những ứng dụng đòi hỏi cập nhật dữ liệu thời gian thực sẽ rất khó sử dụng caching

2.2.8 Kỹ thuật giảm yêu cầu

Để giảm yêu cầu http (http requests) website phải thực hiện tối ưu trên nhiều tài nguyên

 Lợi ích của kỹ thuật này sẽ làm giảm số lượng yêu cầu tải files và giúp trình duyệt caching tốt hơn Hơn nữa giúp gia tăng tốc độ tải song song sau đây

là các tài nguyên cần tối ưu [10, 13, và 15]

Giảm http request từ ảnh icon Thay vì phải mất nhiều http requests để tải lần lượt những icon riêng lẻ về nếu sử dụng kỹ thuật sprite để gép các ảnh nhỏ lẻ thành một ảnh và chỉ mất một http requests để tải Ví dụ sau nếu hình 2.10A không sprite ảnh thì phải mất 20 http requests để tải 20 icons về nếu sprite tất cả các ảnh này lại thành một thì chỉ mất 1 http request để tải

Hình 2.10A Minh họa trước và sau khi spite

Hình 2.10B Minh họa trước và sau khi spite Giảm http request từ các tài nguyên tĩnh Với những tài nguyên tĩnh để giảm http request giải pháp tốt nhất là cần kết hợp các files css và javascript để tạo thành một yêu cầu duy nhất cho từng loại file trên một trang thay vì phải tải nhiều file nhỏ Những file css và js mà mật độ sử dụng trên toàn site trên 70% thì sẽ được cân nhắc gộp lại thành một file đặt tại trang chủ Với những file sử dụng dưới 60% thì sẽ được đặt và tải tại trang mà cần sử dụng chúng

Cách khai báo kết hợp file

<bundles version="1.0">

<styleBundle path="~/Content/css">

2.2.9 Kỹ thuật giảm gửi cookies và tăng yêu cầu song song cho các trình duyệt khi tải các tài nguyên tĩnh

Tất cả các yêu cầu http (http requests) tới một domain phải bao gồm cookie ngay

cả khi server không sử dụng các cookie này Vậy các http requests gửi lên để tải các thành phần tài nguyên tĩnh như image, js, css thì lúc này các mã cookie được gửi đến server thì rất vô dụng Hình ảnh dưới đây cho thấy có thể sẽ làm tốn bang thông một cách đáng kể [16]

Hình 2.11 Minh họa cookie gắn vào mỗi yêu cầu ảnh

Ta nhận thấy một http request để tải một ảnh logo của google về phải kèm theo 513 bytes cookies thế nên gộp nhiều yêu cầu như vậy sẽ là một điều đáng phải suy nghĩ để đưa ra một giải phải về hiệu năng

Vậy giải pháp là tạo ra các tên miền tĩnh hay tên miền phụ để thực hiện các http requests cho các nội dung tĩnh này thay vì dùng tên miền chính

Tất cả các tài nguyên chính được tải về bằng tên miền phụ Khuyến cáo mỗi một site không nên có quá 4 tên miền phụ Hơn nữa khi tìm hiểu sâu về cơ chế gửi yêu cầu đến các server của các trình duyệt web cho thấy rằng Ví dụ IE7 chỉ cho 2 kết nối đồng thời đến một máy chủ, IE8 cho phép 6 Firefox 8, Chrome 6 Đồng nghĩa với việc nếu website có 24 ảnh thì cùng một lúc duyệt bằng IE 7 thì phải mất 12 lần tải Nếu ta tạo ra nhiều subdomain thì số đó sẽ được nhân lên 4 Hơn nữa tích hợp site với CND thì truy vấn song song rất có lợi

Hình 2.12 Minh họa trang youtube sử dụng subdomain

2.2.10 Kỹ thật xác minh html, css

Là một dịch vụ (Validate) để kiểm tra toàn bộ trang web và đánh giá sự phù hợp, tương thích của nó với các tiêu chuẩn mở W3C [17] để nhanh chóng xác định những thành phần của trang web không hợp chuẩn và cần thiết phải xửa lại

Có rất nhiều lý do cần phải valid HTML, XHTML, CSS và dưới đây là một trong số những lý do cần phải thực hiện điều này Nếu muốn web site của được nằm trong danh sách của cỗ máy tìm kiếm thì hãy chắc chắn rằng trang web phải hợp chuẩn HTML do W3C định nghĩa Rất nhiều công cụ tìm kiếm không thể đánh đúng danh mục hoặc chỉ mục của một site khi mà có quá nhiều

lỗi nghiêm trọng về HTML Điều này dẫn đến trang web giảm đáng kể thứ hạng trong cỗ máy tím kiếm cũng như là chỉ số đánh giá của alexa

Một site có cấu trúc HTML tốt sẽ giúp các trình duyệt hiển thị nhanh hơn

và tốt hơn, có thể hiển thị trên nhiều loại trình duyệt mà không gặp bất cứ về lỗi giao diện nào kể cả trên mobile Ngoài ra còn rất nhiều lợi ích khác như tương thích với nhiều chuẩn của các trình duyệt khác nhau, giúp viết các mã css, js dễ dàng và nhanh hơn, tránh những lỗi về giao diện dẫn đến trang xấu xí

Hình 2.13 Minh họa trang youtube sử dụng tên miền phụ

2.2.11 Kỹ thật tối ưu ảnh

Hình ảnh thường chiếm hầu hết các dung lượng trên một trang chính vì thế hình ảnh cần được tối ưu hóa để giảm dung lượng trình duyệt phải tải về giúp giảm bang thông Hơn nữa giúp trình duyệt hiển thị nhanh hơn lên màn hình Việc tìm kếm các định dạng tối ưu và chiến lược tối ưu hóa với hình ảnh đòi hỏi phân tích cẩn thận qua nhiều kích thước, loại dữ liệu được mã hóa, khả năng định dạng

hình ảnh, chất lượng, độ phân giải và nhiều hơn nữa Định dạng tốt nhất nên sử dụng là vector dung lượng nhỏ, có thể co dãn theo nhiều kích thước mà không bị

vỡ và truyền tải nhanh hơn

Để tối ưu hình ảnh các chuyên gia thường dùng các công cụ mã nguồn mở như jpegtran [18] mục đích tối ưu là xóa đi những thông tin metadata không cần thiết trên file ảnh, loại bỏ những điểm ảnh mà trình duyệt không hiển thị được

Hình 2.14 Thống kê tỷ lệ tải tài nguyên cả trang (Hình ảnh trích trính dẫn khi

chạy kiểm thử hiệu năng từ website đại học công nghệ) Nhược điểm của kỹ thuật này là làm tăng chi phí tính toán phía server side

để chạy thuật toán tối ưu ảnh Để khắc phục điều này các chuyên gia đưa quy trình tối ưu ảnh chạy ngầm trong một job phía back-end trước khi tài nguyên ảnh được truyền tải về phía người dùng

2.2.12 Các chuẩn viết mã tối ưu

Có rất nhiều các chuẩn viết mã html, css và javascrip giúp giảm dung lượng files

và gia tăng sử dụng cache giúp trình duyệt hiển thị nhanh hơn Chính vì thế trước khi sử dụng các mã này cần được xem xét thật cẩn thận theo các chuẩn [19, 20]

Cần giảm thiểu DOM access, sử dụng thông minh các bộ chọn với javascript và css, không scale images trong html phải tải những hình ảnh đúng

kích cỡ của khung, giảm số số lượng phần tử DOM khi viết html, viết tắt các thuộc tính css, tránh sử dụng các thuộc tính css thừa

Chuyển css lên đầu và chuyển file javascript xuống cuối để tránh tắc nghẽn khi tải trang vì khi trình duyệt tải file javascript sẽ làm blocking các yêu cầu khác Tuyệt đối tránh viết mã css và javascript trong html thay vì thế hãy viết ra file bên ngoài Tránh redirect trang để giảm tối đa tạo http requests, giảm thiểu dùng cookie

2.3 Các kỹ thuật tối ưu hiệu năng server-side

Trong phần này sẽ trình bày các kỹ thuật tối ưu phía server side Như đã đề cập

ở đầu chương thời gian xử lý ở phía server side là rất ít chỉ chiếm trên 10% tổng thời gian tải trang hoặc ít hơn rất nhiều Việc tối ưu tầng này chủ yếu chú trọng vào mã chương trình, kiến trúc phần mềm, caching Tiếp theo là các kỹ thuật được giới thiệu

2.3.1 Bỏ lưu giữ trạng thái của trang

Trạng thái hiển thị trang (ViewState) là một kĩ thuật giúp giữ lại trạng thái của trang mặc dù trang được tải lại (Postbacks) Thường thì khi một trang được tải lại thì mọi giá trị trên trang sẽ không được giữ lại Để giữ lại giá trị trên trang thì phải sử dụng ViewState để lưu lại giá trị đó Các giá trị lưu trong ViewState sẽ được lần lượt lưu trữ và gửi tới trình duyệt Khi xem mã trên trình duyệt của một trang sử dụng ViewState ta sẽ thấy khai báo có dạng như sau [21, 22]

<input id=" VIEWSTATE" type="hidden"

name=" VIEWSTATE"

value="/wEPDwUJNzg0MDMxMDA1D2QWAmYPZBYCZg9kFgQCAQ9kFgICBQ9kFgJmD2QWAgIBDxYCHhNQ cm2aW91c0NvbnRyb2xNb2RlCymIAU1pY3Jvc29mdC5TaGFyZVBvaW50LldlYkNvbnRyb2xzLlNQQ29u dHJbE1vZGUsIE1pY3Jvc29mdC5TaGFyZVBvaW50LCBWZXJzaW9uPTEyLjAuMC4wLCBDdWx0dXJlPW5l dXRyWwsIFB1YmxpY0tleVRva2VuPTcxZTliY2UxMTFlOTQyOWMBZAIDD2QWDgIBD2QWBgUmZ19lMzI3 YTQwMF83ZDA1XzRlMjJfODM3Y19kOWQ1ZTc2YmY1M2IPD2RkZAUmZ18yNDQ3NmI4YV8xY2FlXzRmYTV fOTkxNl8xYjIyZGYwNmMzZTQPZBYCZg8PZBYCHgVjbGFzcwUbbXMtc2J0YWJsZWFsdCBtcy1zYnRhYm xFlOTQyOWMBZAIDD2YjIyZGYjIyZGYjIyZGlYkNvbnRyb2xzLlNQQ29YkNvbnRyb2xzLlNQQ2UxMTFl

OTQyOWMBZAIDD2QWDgIBD2QWBgUmZ19lMzI3YTQwMF83ZDA1XzRlMjJfODM3Y19kOWQ1ZTc2YmY1M 2IPD ==" />

Trường ẩn sẽ chứa các giá trị viewstate cho tất cả các điều khiển trên trang Việc lưu trữ một lượng lớn dữ liệu trong viewsate có thể làm tăng kích cỡ