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 kỹ thuật phát triển web tiên tiến làm tăng tốc độ, tối ƣu hiệu ứng dụng web” sản phẩm nghiên cứu riêng cá nhân dƣới giúp đỡ lớn Giảng viên hƣớng dẫn TS Tô Văn Khánh, không chép lại ngƣời khác Những điều đƣợc trình bày toàn nội dung luận văn cá nhân tôi, đƣợc tổng hợp từ nhiều nguồn tài liệu Tất tài liệu tham khảo có nguồn gốc rõ ràng đƣợc trích dẫn hợp pháp Tôi xin hoàn toàn chịu trách nhiệm chịu hình thức kỷ luật theo quy định cho lời cam đoan 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 xin bày tỏ lòng biết ơn chân thành 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 bảo giúp đỡ suốt trình bắt đầu thực đề tài hoàn thành đề tài Tôi xin gửi lời cảm ơn chân thành tới 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 theo học thời gian qua Các thầy cô cung cấp cho kiến thức quý báu, tạo điều kiện tốt cho suốt trình học tập nghiên cứu trƣờng Cuối xin chân thành cảm ơn ngƣời thân gia đình, đặc biệt bố mẹ nguồn động viên ủng hộ Xin cảm ơn bạn bè khóa, đồng nghiệp quan giúp đỡ trình học tập nghiên cứu thực luận văn MỤC LỤC LỜI CAM ĐOAN LỜI CẢM ƠN BẢNG CÁC KÝ HIỆU VÀ CHỮ VIẾT TẮT Chƣơng GIỚI THIỆU Error! Bookmark not defined Chƣơng 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 Client-side Server-side Error! Bookmark not defined 2.2 Các kỹ thuật tối ƣu hiệu 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 tải bất đồng 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 nhớ đệm trình duyệt Error! Bookmark not defined 2.2.7 Kỹ thuật tối ƣu nhớ đệm cho 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 tăng yêu cầu song song cho trình duyệt tải 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 server-side Error! Bookmark not defined 2.3.1 Bỏ lƣu giữ trạng thái 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 mục cho sở liệu Error! Bookmark not defined 2.3.7 Sử dụng kiểu liệu hợp lý loại bỏ đoạn code thừa Error! Bookmark not defined 2.3.8 Kỹ thuật 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 hệ thống tìm kiếm nhƣ solr Error! Bookmark not defined Chƣơng 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 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 kiểm thử hiệu Error! Bookmark not defined 3.2.3 Tại cần kiểm thử hiệu Error! Bookmark not defined 3.2.4 Bối cảnh dự án Error! Bookmark not defined 3.2.5 Mối quan hệ thử nghiệm hiệu hiệu chỉnh Error! Bookmark not defined 3.2.6 Hiệu xuất, Tải, kiểm thử khả chịu tải Performance, Load, and Stress Testing Error! Bookmark not defined 3.2.6 Đƣờng 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 thông qua kiểm thử hiệu Error! Bookmark not defined 3.3.1 Tổng quan Error! Bookmark not defined 3.3.2 Tóm tắt giải rủi ro thông qua kiểm thử hiệu Error! Bookmark not defined 3.3 Thiết lập cấu hình mô hình kiểm thử hiệu Error! Bookmark not defined 3.4 Các bƣớc thiết lập chạy kiểm thử hiệu Error! Bookmark not defined 3.5 Các phƣơng pháp điều tra giúp hiệu chỉnh vấn đề hiệu dựa báo cáo kiểm thử Error! Bookmark not defined 3.5.1 Phân tích chiếm dụng nhớ Error! Bookmark not defined 3.5.2 Phân tích hiệu vi xử lý nút thắt cổ chai Error! Bookmark not defined 3.5.3 Phân tích, hiệu chỉnh hiệu tầng client-side Error! Bookmark not defined Chƣơng 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 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 client-side Error! Bookmark not defined 4.2.2 Sử dụng kỹ thuật tối ƣu hiệu 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 thực tế đạt đƣợc ứng dụng Error! Bookmark not defined 4.3.1 Mẫu đƣa vào kiểm thử hiệu cho hai phiên Error! Bookmark not defined 4.3.2 Kết 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 đạt đƣợc Error! Bookmark not defined Định hƣớng nghiên cứu tƣơng lai Error! Bookmark not defined TÀI LIỆU THAM KHẢO BẢNG CÁC KÝ HIỆU VÀ CHỮ VIẾT TẮT STT 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 Traffic CDN Content Dellivery Network Mạng lƣới phân tán nội dung Cache Place to store something temporarily in a computing Bộ nhớ đệm Lƣu lƣợng truy cập website 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 Server 10 Clients Wating a long time or meet timeout to download a resource Phân giải tên miền Bất trình duyệt gửi yêu cầu lấy lại tài tài nguyên sử dụng gia thức truyền tài siêu văn Chặn tải Một máy tính chủ A server is a computer program chạy ứng dụng đợ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ụ trả lời yêu cầu dó Một máy trạm máy A client machine is a user's tính ngƣời dùng computer that is connected to a đƣợc kết nối với network and accesses another mạng 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 Số hiệu Hình 1.1 Hình 1.2 Hình 1.3 Hình 1.4A Hình 1.4B Hình 2.1 Hình 2.2 Hình 2.3 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 trang amazon Đánh giá hiệu trang vnexpress Đánh giá hiệu trang đại học công nghệ Đánh giá tổng hợp hiệu trang web lớn Đánh giá tổng hợp hiệu trang web lớn Thời gian xử lý tầng website nguồn stevesouders Ứng dụng gmail sử dụng kỹ thuật Ajax cập nhật nội dung Trang tin điện tử sử dụng kỹ thuậ Ajax tải bất đồng để 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 bất đồng ứng dụng Tải script đồng Tải script bất đồng Sử dụng kỹ thuật adaptive chọn ảnh kích cỡ với vùng hiển thị So sánh sử dụng nén gzip 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) hệ chuyển trạng thái quan sát đƣợc – OTS Minh họa trƣớc sau spite Minh họa trƣớc sau spite Minh họa cookie gắn vào 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 kiểm thử hiệu (Trích dẫn từ Microsoft) Mô hình hoạt động kiểm thử hiệu (Nguồn từ Microsoft) Tạo web performance and load test project Tạo web performance and load test project Ghi links cần test cho 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 links cần test cho website Thay đổi tên Thiết lập mẫu (pattern) Tạo Load Test 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 Quan sát theo dõi trình chạy3.11 Quan sát theo dõi trình chạy Phân tích kết báo cáo Phân tích kết báo cáo Thay đổi kịch kiểm thửAk), not (Aj = Ak) Kết giám sát ứng dụng chiếm dụng nhớ Sử dụng công cụ điều tra xem mã dẫn đến leak memory Sử dụng công cụ điều tra xem mã dẫn đến peak cpu Sử dụng công cụ điều tra xem mã dẫn đến peak cpu Báo cáo hiệu client-side Báo cáo hiệu client-side Giao diện chƣơng trình demo Kiến trúc ứng dụng Kết báo cáo kiểm thử hiệu phiên tối ƣu hiệu Kết báo cáo kiểm thử hiệu phiên không tối ƣu hiệu Trang sử dụng kỹ thuật tối ƣu hiệu Trang không sử dụng kỹ thuật tối ƣu hiệu DANH MỤC BẢNG STT Số hiệu Bảng Bảng 2A Bảng 2B Bảng Tên bảng Bảng Các rủi ro hiệu cần giải Bảng 2A Xác định yêu cầu phần cứng cho controller agents Bảng 2B Xác định yêu cầu phần cứng cho controller agents Bảng So sánh hiệu demo hai phiên tối ƣu chƣa tối ƣu hiệu TÀI LIỆU THAM KHẢO [1] Best Practices For Increasing Website Performance, http://webdesign.tutsplus.com/articles/best-practices-for-increasingwebsite-performance webdesign-9109 [2] The Performance Golden Rule, http://www.stevesouders.com/blog/2012/02/10/the-performance-goldenrule/ [3] Ajax, https://en.wikipedia.org/wiki/Ajax_(programming) [4] Loading Scripts Without Blocking, http://www.stevesouders.com/blog/2009/04/27/loading-scripts-withoutblocking/ [5] Avoid Javascript Blocking Content Download On Your Website During Page Load, http://www.webdigi.co.uk/blog/2009/avoid-javascript-blocking-contentdownload-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 slow, http://www.slideshare.net/jarlund/hign-performance-web-sites-withads-dont-let-third-parties-make-you-slow [8] Lazy load Image, https://developers.google.com/speed/pagespeed/module/filter-lazyloadimages?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-dnsprefetch [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-imagesprite [16] Serving Static Content from a Cookieless Domain, http://www.ravelrumba.com/blog/static-cookieless-domain/ [17] W3C Validation Services, https://validator.w3.org/ [18] Optimize image, https://developers.google.com/speed/pagespeed/module/filter-imageoptimize [19] Profiling CSS for fun and profit, http://perfectionkills.com/profiling-css-for-fun-and-profit-optimizationnotes/ [20] CSS performance revisited: selectors, bloat and expensive styles, http://benfrain.com/css-performance-revisited-selectors-bloat-expensivestyles/?utm_source=CSS-Weekly&utm_campaign=Issue100&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-Practicesfor-High-Performance-Applic [23] List vs IEnumerable vs IQueryable vs ICollection vs IDictionary, http://www.codeproject.com/Articles/832189/List-vs-IEnumerable-vsIQueryable-vs-ICollection-v [24] Asynchronous Programming with Async and Await, https://msdn.microsoft.com/enus/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/crossplatform/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 [29] Web page test, http://www.webpagetest.org/ [30] Best Practices for Monitoring IIS Web Server, http://myitforum.com/myitforumwp/2014/01/21/best-practices-formonitoring-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-benchmarkingmongodb-and-nosql-systems [34] 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 [...]... 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... ứ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. .. 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. .. 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, http://webdesign.tutsplus.com/articles/best-practices-for-increasingwebsite-performance webdesign-9109 [2] The Performance Golden Rule, http://www.stevesouders.com/blog/2012/02/10/the-performance-goldenrule/... 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 [29] Web page test, http://www.webpagetest.org/ [30] Best Practices for Monitoring IIS Web Server, http://myitforum.com/myitforumwp/2014/01/21/best-practices-formonitoring-iis -web- server/ [31] Profiler web application, https://www.jetbrains.com/profiler/ [32] windbg... Blocking Content Download On Your Website During Page Load, http://www.webdigi.co.uk/blog/2009/avoid-javascript-blocking-contentdownload-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 slow, http://www.slideshare.net/jarlund/hign-performance -web- sites-withads-dont-let-third-parties-make-you-slow... [12] Pre-Resolve DNS, https://developers.google.com/speed/pagespeed/module/filter-insert-dnsprefetch [13] Yahoo, Best Practices for Speeding Up Your Web Site, 1 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-imagesprite [16] Serving Static Content from a Cookieless... 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 3