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 ..................................... Error! Bookmark not defined.
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 .. Error! Bookmark
not defined.
2.1. Khái niệm căn bản Client-side và Server-side ......... Error! Bookmark not
defined.
2.2. Các kỹ thuật tối ƣu hiệu năng client-side.. Error! Bookmark not defined.
2.2.1. Kỹ thuật Ajax ......................................... Error! Bookmark not defined.
2.2.2. Kỹ thuật Lazy Load và tải bất đồng bộ tài nguyên tĩnh.................. Error!
Bookmark not defined.
2.2.3. Kỹ thuật điều chỉnh thích ứng hình ảnh . Error! Bookmark not defined.
2.2.4. Kỹ thuật nén HTML, JavaScript, CSS ... Error! Bookmark not defined.
2.2.5. Kỹ thuật thu nhỏ tài nguyên ................... Error! Bookmark not defined.
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
.......................................................................... Error! Bookmark not defined.
2.2.7. Kỹ thuật tối ƣu bộ nhớ đệm cho các trình duyệt... Error! Bookmark not
defined.
2.2.8. Kỹ thuật giảm yêu cầu ........................... Error! Bookmark not defined.
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 ...................... Error! Bookmark not defined.

2.2.10. Kỹ thật xác minh html, css ................... Error! Bookmark not defined.
2.2.11. Kỹ thật tối ƣu ảnh................................. Error! Bookmark not defined.
2.2.12. Các chuẩn viết mã tối ƣu...................... Error! Bookmark not defined.
2.3. Các kỹ thuật tối ƣu hiệu năng server-side. Error! Bookmark not defined.
2.3.1. Bỏ lƣu giữ trạng thái của trang .............. Error! Bookmark not defined.
2.3.2. Tối ƣu xử lý ngoại lệ .............................. Error! Bookmark not defined.
2.3.3. Sử dụng điều khiển máy chủ phù hợp.... Error! Bookmark not defined.


2.3.4. Sử dụng mẫu lazy-load .......................... Error! Bookmark not defined.
2.3.5. Sử dụng mẫu singleton ........................... Error! Bookmark not defined.
2.3.6. Sử dụng chỉ mục cho cơ sở dữ liệu ........ Error! Bookmark not defined.
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 ...... Error!
Bookmark not defined.
2.3.8. Kỹ thuật bộ nhớ đêm cho server-side .... Error! Bookmark not defined.
2.3.9. Kỹ thuật Asynchronous Programing with Async and wait ............ Error!
Bookmark not defined.
2.3.10. Tích hợp các hệ thống tìm kiếm nhƣ solr ........... Error! Bookmark not
defined.
Chƣơng 3. PHƢƠNG PHÁP KIỂM THỬ PHÂN TÍCH ĐÁNH GIÁ KẾT QUẢ
HIỆU NĂNG ....................................................... Error! Bookmark not defined.
3.1. Sử dụng công cụ kiểm thử ........................ Error! Bookmark not defined.
3.2. Cơ sở kiểm thử hiệu năng ......................... Error! Bookmark not defined.
3.2.1. Tổng quan............................................... Error! Bookmark not defined.
3.2.2. Các hoạt động cốt lõi của kiểm thử hiệu năng ...... Error! Bookmark not
defined.
3.2.3. Tại sao cần kiểm thử hiệu năng ............. Error! Bookmark not defined.
3.2.4. Bối cảnh dự án ....................................... Error! Bookmark not defined.
3.2.5. Mối quan hệ giữa thử nghiệm hiệu năng và hiệu chỉnh.................. Error!
Bookmark not defined.

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 ................................................... Error! Bookmark not defined.
3.2.6. Đƣờng cơ sở ........................................... Error! Bookmark not defined.
3.2.7. Điểm chuẩn ............................................ Error! Bookmark not defined.
3.3. Các rủi ro đƣợc giải quyết thông qua kiểm thử hiệu năng................. Error!
Bookmark not defined.
3.3.1. Tổng quan............................................... Error! Bookmark not defined.
3.3.2. Tóm tắt giải quyết rủi ro thông qua kiểm thử hiệu năng ................ Error!
Bookmark not defined.
3.3. Thiết lập cấu hình mô hình kiểm thử hiệu năng ...... Error! Bookmark not
defined.


3.4. Các bƣớc thiết lập và chạy kiểm thử hiệu năng ....... Error! Bookmark not
defined.
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ử ........................................ Error! Bookmark not defined.
3.5.1 Phân tích chiếm dụng bộ nhớ .................. Error! Bookmark not defined.
3.5.2 Phân tích hiệu năng vi xử lý và các nút thắt cổ chai .... Error! Bookmark
not defined.
3.5.3 Phân tích, hiệu chỉnh hiệu năng tầng client-side ... Error! Bookmark not
defined.
Chƣơng 4. XÂY DỰNG ỨNG DỤNG THỬ NGHIỆM ĐÁNH GIÁ HIỆU
NĂNG ................................................................. Error! Bookmark not defined.
4.1. Giới thiệu ứng dụng .................................. Error! Bookmark not defined.
4.2. Công nghệ sử dụng và các kỹ thuật tối ƣu đã áp dụng .. Error! Bookmark
not defined.
4.2.1. Nền tảng công nghệ................................ Error! Bookmark not defined.
4.2. Các kỹ thuật tối ƣu đã áp dụng cho chƣơng trình demo Error! Bookmark
not defined.

4.2.1. Sử dụng 12 kỹ thuật tối ƣu hiệu năng client-side . Error! Bookmark not
defined.
4.2.2. Sử dụng 6 kỹ thuật tối ƣu hiệu năng server-side .. Error! Bookmark not
defined.
4.2. Kiến trúc ứng dụng.................................... Error! Bookmark not defined.
4.2.1. Ứng dụng đƣợc xây dựng theo mô hình kiến trúc đa tầng ............. Error!
Bookmark not defined.
4.2.1. Các mẫu thiết kế design pattern áp dụng vào ứng dụng ................. Error!
Bookmark not defined.
4.3. Phân tích so sánh kết quả thực tế đã đạt đƣợc của ứng dụng ............ Error!
Bookmark not defined.
4.3.1. Mẫu đƣa vào kiểm thử hiệu năng cho hai phiên bản .. Error! Bookmark
not defined.
4.3.2. Kết quả so sánh ...................................... Error! Bookmark not defined.
4.4. Cài đặt triển khai ....................................... Error! Bookmark not defined.


KẾT LUẬN ......................................................... Error! Bookmark not defined.
Các kết quả đạt đƣợc.................................. Error! Bookmark not defined.
Định hƣớng nghiên cứu trong tƣơng lai .... Error! Bookmark not defined.
TÀI LIỆU THAM KHẢO ..................................................................................... 1

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

Ký hiệu
MS
S

Diễn giải
Milliseconds
Seconds
This is determined by the number
of visitors and the number of
pages they visit

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

3

Traffic

4

CDN

Content Dellivery Network

Mạng lƣới phân tán
nội dung

5

Cache

Place to store something

temporarily in a computing

Bộ nhớ đệm

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


6

7

8

DNS

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

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


TÀI LIỆU THAM KHẢO
[1].

Best Practices For Increasing Website Performance,

/>[2]. The Performance Golden Rule,
/>[3]. Ajax,
/>[4]. Loading Scripts Without Blocking,
/>[5]. Avoid Javascript Blocking Content Download On Your Website During
Page Load,
/>[6]. Async Ads with HTML Imports,
/>[7]. High Performance Web Sites, With Ads: Don't let third parties make you
slow,
/>[8]. Lazy load Image,
/>[9]. Adaptive Image,
/>[10]. Google Page Speeed,
/>[11]. Mynify JavaScript,
/>[12]. Pre-Resolve DNS,
/>[13]. Yahoo, Best Practices for Speeding Up Your Web Site,
1


/>[14]. Web caching, />[15]. Sprite Images,
/>[16]. Serving Static Content from a Cookieless Domain,
/>[17]. W3C Validation Services, />[18]. Optimize image,
/>[19]. Profiling CSS for fun and profit,
/>[20]. CSS performance revisited: selectors, bloat and expensive styles,
/>[21]. Best Practices on Server-Side Performance Optimization,
/>s+on+Server-Side+Performance+Optimization
[22]. ASP.NET Best Practices for High Performance Applications,
/>[23]. List vs IEnumerable vs IQueryable vs ICollection vs IDictionary,
/>[24]. Asynchronous Programming with Async and Await,
/>[25]. Async and Await,
/>[26]. Memory and Performance Best Practices,
/>2

[27]. Apache Solr Ducumentation,
/>[28]. Microsoft Performance Test Guidance For Web Application,
/>[29]. Web page test, />[30]. Best Practices for Monitoring IIS Web Server,
/>[31]. Profiler web application, />[32]. windbg tutorial, /> />[33]. High Performance Benchmarking: MongoDB and NoSQL Systems,
/>[34]. 5 Performance Tips for Node.js Applications,
/>[35]. Author Steve Souders: High Performance Web Sites: Essential
Knowledge for Front-End Engineers
[36]. Author Ilya Grigorik: High Performance Browser Networking: What
every web developer should know about networking and web performance

3