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


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

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

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

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


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


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

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


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

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

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.

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ụ để

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

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.
class="lazy" data-original="img/example.jpg" width="80" height="120" alt=
"">
$("img.lazy").lazyload({
event: "scrollstop"
});

12



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.