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

ĐẠ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


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

2

Ký hiệu
MS
S

3

Traffic

4

CDN

5

Cache

6

DNS

7

8

Diễn giải
Milliseconds
Seconds
This is determined by the number

of visitors and the number of
pages they visit
Content Dellivery Network
Place to store something
temporarily in a computing
environment
Domain Name System

Whenever web browser fetches a
file (a page, a picture, etc) from a
Http request web server, it does so
using HTTP - that's "Hypertext
Transfer Protocol"
Bloking
download

9

Server

10

Clients

Wating a long time or meet
timeout to download a resource

Tiếng Việt
Mi li giây
Giây

Lƣu lƣợng truy cập
của website
Mạng lƣới phân tán
nội dung
Bộ nhớ đệm
Phân giải tên miền
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
Chặn tải

Một máy tính chủ
A server is a computer program
chạy ứng dụng và đợi
or a machine that waits for
yêu cầu ngƣời dùng
requests from other machines or
từ máy khách hoăc
software (clients) and responds to phần mềm từ máy
them
khác. Phục vụ và trả
lời các yêu cầu dó
Một máy trạm là máy
A client machine is a user's
tính của ngƣời dùng
computer that is connected to a
đƣợc kết nối với một

network and accesses another
mạng và truy cập gửi
computer, called a server
yêu cầu tới máy tính
khác


DANH MỤC HÌNH VẼ
STT
1
2
3
4
5

Số hiệu
Hình 1.1
Hình 1.2
Hình 1.3
Hình 1.4A
Hình 1.4B

6

Hình 2.1

7

Hình 2.2

8

Hình 2.3

9

Hình 2.4

10
11

Hình 2.5A
Hình 2.5B

12

Hình 2.6

13

Hình 2.7A

14
15

Hình 2.7B
Hình 2.8

16

Hình 2.9

17
18
19
20
21
22
23

Hình 2.10A
Hình 2.10B
Hình 2.11
Hình 2.12
Hình 2.13
Hình 2.14
Hình 2.15

24

Hình 3.1

25

Hình 3.2

26
27
28

Hình 3.3A
Hình 3.3B
Hình 3.4A

Tên hình vẽ
Đánh giá hiệu năng trang amazon
Đánh giá hiệu năng trang vnexpress
Đánh giá hiệu năng trang đại học công nghệ
Đánh giá tổng hợp hiệu năng các trang web lớn
Đánh giá tổng hợp hiệu năng các trang web lớn
Thời gian xử lý tại các tầng của website nguồn
stevesouders
Ứng dụng gmail sử dụng kỹ thuật Ajax cập nhật nội
dung mới
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
Màn hình minh họa kỹ thuật tải lazy và bất đồng bộ
trong ứng dụng
Tải script đồng bộ
Tải script bất đồng bộ
Sử dụng kỹ thuật adaptive chọn ảnh đúng kích cỡ với
vùng hiển thị
So sánh sử dụng nén gzip và không sử dụng nén
(Nguồn ConIT)
Cấu hình gzip ở IIS server
Công cụ minify
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.
Minh họa trƣớc và sau khi spite

Minh họa trƣớc và sau khi spite
Minh họa cookie gắn vào mỗi yêu cầu ảnh
Minh họa trang youtobe sử dụng subdomain
Minh họa trang youtobe sử dụng subdomain
Proxy cache
Mã Async and wait
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)
Mô hình hoạt động kiểm thử hiệu năng (Nguồn từ
Microsoft)
Tạo một web performance and load test project
Tạo một web performance and load test project
Ghi các links cần test cho một website


29
30
31
32
33
34
35
36
37

Hình 3.4B
Hình 3.5
Hình 3.6
Hình 3.7
Hình 3.8

Hình 3.9A
Hình 3.9B
Hình 3.9C
Hình 3.10

38

Hình 3.11

39
40
41
42

Hình 3.12A
Hình 3.12B
Hình 3.13
Hình 3.14

43

Hình 3.15

44

Hình 3.16A

45
46
47

48
49

Hình 3.16B
Hình 3.17A
Hình 3.17B
Hình 4.1
Hình 4.2

50

Hình 4.3

51

Hình 4.4

52
53

Hình 4.5
Hình 4.6

Dừng ghi các links cần test cho một website
Thay đổi tên
Thiết lập các mẫu (pattern)
Tạo một Load Test trong web performance test
Thiết lập mẫu cho load test
Chọn text-mix
Chọn text-mix

Chọn text-mix
Chạy kiểm thử hiệu năng
Quan sát theo dõi quá trình chạy3.11 Quan sát theo dõi
quá trình chạy
Phân tích kết quả báo cáo
Phân tích kết quả báo cáo
Thay đổi kịch bản kiểm thửAk), not (Aj = Ak).
Kết quả giám sát ứng dụng chiếm dụng bộ nhớ
Sử dụng công cụ điều tra xem mã nào dẫn đến leak
memory
Sử dụng công cụ điều tra xem mã nào dẫn đến peak cpu
Sử dụng công cụ điều tra xem mã nào dẫn đến peak cpu
Báo cáo hiệu năng client-side
Báo cáo hiệu năng client-side
Giao diện chính của chƣơng trình demo
Kiến trúc ứng dụng
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
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
Trang sử dụng kỹ thuật tối ƣu hiệu năng
Trang không sử dụng kỹ thuật tối ƣu hiệu năng


DANH MỤC BẢNG
STT
1

Số hiệu
Bảng 1

2

Bảng 2A

3

Bảng 2B

4

Bảng 3

Tên bảng
Bảng 1 Các rủi ro hiệu năng cần giải quyết
Bảng 2A Xác định yêu cầu phần cứng cho bộ controller và
agents
Bảng 2B Xác định yêu cầu phần cứng cho bộ controller và
agents
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
1


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

2


đố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.
3


Hình 1.2 Đánh giá hiệu năng trang vnexpress
 Trang đại học công nghệ 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ệ
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
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.

6


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.

7


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
8


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ẻ.
9


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.

10


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";
var newPaging = 0;
var index = 8;
function LoadMoreClips(paging, total) {
if (newPaging < total) {
newPaging = newPaging + 8;
var requestUrl = servicePath + "?paging=" + newPaging + "&total=" + to

tal;
$.ajax({
type: "GET",
url: requestUrl,
success: function (data) {
var content = $(".clip-lip-container");
content.append(data);
index = index + 8;
if (index > total) {
index = total;
}
$("#paging-index").html(index + '-' + total);
}
});
}}

 Một số điểm hạn chế khi sử dụng Ajax là không thể bookmark nó vào
favourite trên trinh duyệt hay gửi link đến cho bạn bè, vì tất cả quá trình nó thực
hiện ngầm và không hiển thị trên address.
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ó.

11


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.lazy").lazyload({
event: "scrollstop"
});

12

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ộ
13


Nhƣ hình 2.5.A minh họa tải script đồng bộ. File ảnh arrow-right20x9px.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.
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.
1 (function() {
2
function async_load(){
3
var s = document.createElement('script');

4
s.type = 'text/javascript';
5
s.async = true;// Đặt trạng thái tải bất đồng bộ
6
s.src = ' />7
var x = document.getElementsByTagName('script')[0];
8
x.parentNode.insertBefore(s, x);
9
}
10 if (window.attachEvent)
11
window.attachEvent('onload', async_load);
12
else
13
window.addEventListener('load', async_load, false);
})();

Ở đ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ị.
14