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Ạ

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

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

nội dung

environment

Whenever web browser fetches a file (a page, a picture, etc) from a web server, it does so

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

download

Wating a long time or meet

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ó

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Ẽ

stevesouders

dung mới

để lấy thông tin giá vàng từ ngân hàng TPBank

trong ứng dụng

vùng hiển thị

(Nguồn ConIT)

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

(Trích dẫn từ Microsoft)

Microsoft)

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

quá trình chạy

memory

hiệu năng

tối ƣu hiệu năng

DANH MỤC BẢNG

agents

agents

TÀI LIỆU THAM KHẢO

[1] Best Practices For Increasing Website Performance,

http://webdesign.tutsplus.com/articles/best-practices-for-increasing-website-performance webdesign-9109

[2] The Performance Golden Rule,

http://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/

[3] Ajax,

https://en.wikipedia.org/wiki/Ajax_(programming)

[4] Loading Scripts Without Blocking,

http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/

[5] Avoid Javascript Blocking Content Download On Your Website During Page Load,

http://www.webdigi.co.uk/blog/2009/avoid-javascript-blocking-content-download-on-your-website-during-page-load/

[6] Async Ads with HTML Imports,

http://www.stevesouders.com/blog/category/ads/

[7] High Performance Web Sites, With Ads: Don't let third parties make you

http://www.slideshare.net/jarlund/hign-performance-web-sites-with-ads-dont-let-third-parties-make-you-slow

[8] Lazy load Image,

https://developers.google.com/speed/pagespeed/module/filter-lazyload-images?hl=en

[9] Adaptive Image,

http://adaptive-images.com/

[10] Google Page Speeed,

https://developers.google.com/speed/docs/insights/rules

[11] Mynify JavaScript,

https://developers.google.com/speed/pagespeed/module/filter-js-minify [12] Pre-Resolve DNS,

https://developers.google.com/speed/pagespeed/module/filter-insert-dns-prefetch

[13] Yahoo, Best Practices for Speeding Up Your Web Site,

https://developer.yahoo.com/performance/rules.html

[14] Web caching, https://vi.wikipedia.org/wiki/Web_caching

[15] Sprite Images,

https://developers.google.com/speed/pagespeed/module/filter-image-sprite

[16] Serving Static Content from a Cookieless Domain,

http://www.ravelrumba.com/blog/static-cookieless-domain/

[18] Optimize image,

https://developers.google.com/speed/pagespeed/module/filter-image-optimize

[19] Profiling CSS for fun and profit,

http://perfectionkills.com/profiling-css-for-fun-and-profit-optimization-notes/

[20] CSS performance revisited: selectors, bloat and expensive styles,

http://benfrain.com/css-performance-revisited-selectors-bloat-expensive-

styles/?utm_source=CSS-Weekly&utm_campaign=Issue-100&utm_medium=email

[21] Best Practices on Server-Side Performance Optimization,

https://community.dynatrace.com/community/display/PUB/Best+Practice s+on+Server-Side+Performance+Optimization

[22] ASP.NET Best Practices for High Performance Applications,

http://www.codeproject.com/Articles/13100/ASP-NET-Best-Practices-for-High-Performance-Applic

[23] List vs IEnumerable vs IQueryable vs ICollection vs IDictionary,

http://www.codeproject.com/Articles/832189/List-vs-IEnumerable-vs-IQueryable-vs-ICollection-v

[24] Asynchronous Programming with Async and Await,

https://msdn.microsoft.com/en-us/library/hh191443.aspx#BKMK_Threads

[25] Async and Await,

http://blog.stephencleary.com/2012/02/async-and-await.html

[26] Memory and Performance Best Practices,

http://developer.xamarin.com/guides/cross-platform/deployment,_testing,_and_metrics/memory_perf_best_practices/

[27] Apache Solr Ducumentation,

https://cwiki.apache.org/confluence/display/solr/So

[28] Microsoft Performance Test Guidance For Web Application,

https://msdn.microsoft.com/en-us/library/bb924375.aspx

[30] Best Practices for Monitoring IIS Web Server,

http://myitforum.com/myitforumwp/2014/01/21/best-practices-for-monitoring-iis-web-server/

[31] Profiler web application, https://www.jetbrains.com/profiler/

[32] windbg tutorial, http://debuggingblog.com/wp/tag/windbg-tutorial/

https://www.yourkit.com/docs/

[33] High Performance Benchmarking: MongoDB and NoSQL Systems,

https://www.mongodb.com/blog/post/high-performance-benchmarking-mongodb-and-nosql-systems

[34] 5 Performance Tips for Node.js Applications,

https://www.google.com/#q=node%20js%20performance

[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