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 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 2.1 Khái niệm Client-side Server-side 2.2 Các kỹ thuật tối ƣu hiệu client-side 2.2.1 Kỹ thuật Ajax 2.2.2 Kỹ thuật Lazy Load tải bất đồng 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 nhớ đệm trình duyệt 19 2.2.7 Kỹ thuật tối ƣu nhớ đệm cho 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 tăng yêu cầu song song cho trình duyệt tải 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 server-side 29 2.3.1 Bỏ lƣu giữ trạng thái 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 mục cho sở liệu 33 2.3.7 Sử dụng kiểu liệu hợp lý loại bỏ đoạn code thừa 33 2.3.8 Kỹ thuật 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 hệ thống tìm kiếm nhƣ solr 39 Chƣơng 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 43 3.2.1 Tổng quan 43 3.2.2 Các hoạt động cốt lõi kiểm thử hiệu 44 3.2.3 Tại cần kiểm thử hiệu 45 3.2.4 Bối cảnh dự án 46 3.2.5 Mối quan hệ thử nghiệm hiệu hiệu chỉnh 47 3.2.6 Hiệu xuất, Tải, kiểm thử khả chịu tải Performance, Load, and Stress Testing 47 3.2.6 Đƣờng sở 48 3.2.7 Điểm chuẩn 48 3.3 Các rủi ro đƣợc giải thông qua kiểm thử hiệu 48 3.3.1 Tổng quan 49 3.3.2 Tóm tắt giải rủi ro thông qua kiểm thử hiệu 49 3.3 Thiết lập cấu hình mô hình kiểm thử hiệu 50 3.4 Các bƣớc thiết lập chạy kiểm thử hiệu 52 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ử 60 3.5.1 Phân tích chiếm dụng nhớ 60 3.5.2 Phân tích hiệu vi xử lý nút thắt cổ chai 61 3.5.3 Phân tích, hiệu chỉnh hiệu tầng client-side 62 Chƣơng 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 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 client-side 66 4.2.2 Sử dụng kỹ thuật tối ƣu hiệu 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 thực tế đạt đƣợc ứng dụng 68 4.3.1 Mẫu đƣa vào kiểm thử hiệu cho hai phiên 68 4.3.2 Kết so sánh 69 4.4 Cài đặt triển khai 72 KẾT LUẬN 73 Các kết đạt đƣợc 73 Định hƣớng nghiên cứu 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 Ký hiệu MS S Traffic CDN Cache DNS 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 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 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 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 Hình 3.16A Sử dụng công cụ điều tra xem mã dẫn đến peak CPU Hình 3.16B Sử dụng công cụ điều tra xem mã dẫn đến peak CPU 3.5.3 Phân tích, hiệu chỉnh hiệu tầng client-side Sử dụng công cụ nhƣ firebug, chrome inspecter, webpagetest để phân tích hiệu tầng client-side có tất báo cáo đầy đủ đánh giá hiệu chiến lƣợc sử dụng cache, chiến lƣợc tối ƣu ảnh, chiến lƣợc giảm yêu cầu, nhiều thông số tốc độ trang đƣợc khuến cáo Từ sở áp dụng kết nghiên cứu giới thiệu chƣơng để tối ƣu hiệu cho tầng client-side [29] 62 Hình 3.17A Báo cáo hiệu client-side 63 Hình 3.17B Báo cáo hiệu client side 64 Chƣơng XÂY DỰNG ỨNG DỤNG THỬ NGHIỆM ĐÁNH GIÁ HIỆU NĂNG Chƣơng giới thiệu ứng dụng thử nghiệm áp dụng kỹ thuật tối ƣu hiệu chƣơng hai Thực kiểm thử hiệu client-side server-side với hai phiên tối ƣu hiệu chƣa tối ƣu hiệu Qua so sánh đánh giá kết hiệu đạt đƣợc dựa báo cáo kiểm thử 4.1 Giới thiệu ứng dụng Chƣơng trình demo đƣợc xây dựng nhƣ website tin tức đƣợc chạy hai phiên bản, phiên tối ƣu hiệu phiên không tối ƣu hiệu để so sánh kết đạt đƣợc tốc độ tải trang sau áp dụng công nghệ tối ƣu hiệu Chƣơng trình có hai trang trang chuên mục trang chi tiết 4.2 Công nghệ sử dụng kỹ thuật tối ƣu áp dụng 4.2.1 Nền tảng công nghệ Chƣơng trình demo đƣợc phát triển tảng Microsoft dotnet freamwork 4.5 Viết ngôn ngữ C# asp.net Chạy window IIS webserver, sở liệu Microsoft SQL Server 65 Hình 4.1 Giao diện chƣơng trình demo 4.2 Các kỹ thuật tối ƣu áp dụng cho chƣơng trình demo Tính ƣu việt hạn chế kỹ thuật nhƣ sơ lƣợc cách cài đặt đƣợc phân tích chi tiết chƣơng hai 4.2.1 Sử dụng 12 kỹ thuật tối ƣu hiệu client-side 1) 2) 3) 4) 5) 6) 7) 8) 9) Kỹ thuật Ajax Kỹ thuật tải Lazy Kỹ thuật hiệu chỉnh ảnh thích ứng (Adaptive imge) Kỹ thuật nén (HTML, JavaScript, CSS) Kỹ thuật giảm tài nguyên (Minify Resources) Kỹ thuật nhớ phân giải tên miền (DNS Prefetching) Kỹ thuật tối ƣu đệm nhớ đệm (Caching) cho trình duyệt Kỹ thuật giảm yêu cầu http Kỹ thuật giảm gửi cookies tăng yêu cầu song song cho trình duyệt duyệt tải tài nguyên tĩnh 10) Kỹ thật xác minh html, css 11) Kỹ thật tối ƣu ảnh 12) Các chuẩn viết mã tối ƣu 66 4.2.2 Sử dụng kỹ thuật tối ƣu hiệu server-side 1) 2) 3) 4) 5) 6) Bỏ trạng thái trang Sử dụng mẫu lazy-load Sử dụng mẫu singleton Kỹ thuật nhớ đệm server-side Kỹ thuật lập trình bất đồng với Async and wait Tích hợp hệ thống tìm kiếm nhanh solr 4.2 Kiến trúc ứng dụng 4.2.1 Ứng dụng đƣợc xây dựng theo mô hình kiến trúc đa tầng  Web layer: PI.Web Tầng chứa nghiệp vụ logic phía clients làm nhiệm vụ giao tiếp với ngƣời dùng cuối để thu thập liệu hiển thị kết liệu thông qua thành phần giao diện ngƣời sử dụng  Services layer: PI.Services Tầng chứa API cài đặt chi tiết logic nghiệp vụ ứng dụng đƣợc cung cấp giao diện từ tầng Core Tầng cung cấp API cho tầng Web thực giao dịch với tầng Data solr  Core layer: PI.Core Tầng chứa interface base class, đƣợc cài đặt tầng Services tầng Data, Tầng chứa object modol trả cho tầng Web  Data layer: PI.Data Tầng thực nghiệp vụ liên quan đến lƣu trữ truy xuất liệu ứng dụng, đọc, lƣu, cập nhật sở liệu  Configuration Layer: PI.Configuration Tầng chứa hàm cấu hình cho toàn hệ thống  Common Layer: Tầng chứa hàm tiện ích sử dụng xuyên suốt toàn solution 67 Hình 4.2 Kiến trúc ứng dụng 4.2.1 Các mẫu thiết kế design pattern áp dụng vào ứng dụng     Mẫu singleton pattern Mẫu dependency injection pattern Mẫu repository pattern Mẫu Unit of work pattern 4.3 Phân tích so sánh kết thực tế đạt đƣợc ứng dụng 4.3.1 Mẫu đƣa vào kiểm thử hiệu cho hai phiên 1) Mẫu kiểm thử  Chạy 300 urls  Làm ấm site phút với 10 ngƣời dùng ảo VUS  Thời gian kiểm thử hiệu 50 phút để tăng số lƣợng ngƣời dùng ảo lên 3600, mƣời giây tăng 50 ngƣời dùng ảo đến phút 12 đạt max 3600 VUS 68  Giữ thêm 30 phút load số lƣợng ngƣời dùng ảo đạt đƣợc 3500 VUS 2) Hạ tầng kiểm thử  Cấu hình Web server: 32GB Ram, CPU 3.5Ghz  Cấu hình Database server: 32GB Ram, CPU 3.5Ghz  Test Agents Test controller 4.3.2 Kết so sánh 1) Server side  Phiên tối ƣu hiệu Hình 4.3 Kết báo cáo kiểm thử hiệu phiên tối ƣu hiệu Bảng kết phiên tối ƣu Availability: 100.00 % Elapsed time: 50 mins Avg Page Time (sec): 0.085 secs Transaction rate: 449 trans/sec Avg Request queue: Failed transactions: Longest transaction: 11.7 secs Max CCPU: 60.6% Avg CPU: 32.1% Max Memory: 13.972% 69 Dựa báo cáo phân tính Hình 4.3 phiên tối ƣu hiệu ta nhận thấy vi xử lý ổn định không vƣợt ngƣỡng 60%, nhớ ram ổn định, khả đáp ứng 100%, thời gian phản hồi trung bình 0.085 secs, tỉ lệ giao dịch trung bình 449 trans/sec, số lƣợng giao dịch thất bại 1, giao dịch lâu 11.7 giây, lƣợng request queue thấp trung bình request queue:  Phiên không tối ƣu hiệu Hình 4.4 Kết báo cáo kiểm thử hiệu phiên không tối ƣu hiệu Bảng kết phiên chƣa tối ƣu Availability: Elapsed time: 14 mins Avg Page Time (sec): 6.43 secs Transaction rate: 158 trans/sec Avg Request queue: 429 Failed transactions: 222 Longest transaction: 114 Max CCPU: 100% Avg CPU: 38.7% Max Memory: 14.514% Dựa báo cáo phân tính Hình 4.4 phiên không tối ƣu hiệu với tổng thời gian kiểm thử 14 phút nhận thấy vi xử lý không ổn định thƣờng 70 xuyên chạm ngƣỡng 100%, nhớ ram ổn định, khả gánh tải kém, thời gian phản hồi trung bình 6,43 secs lâu, tỉ lệ giao dịch trung bình 158 trans/sec, số lƣợng giao dịch thất bại cao 222 lƣợng giao dịch thất bại, số lƣợng request queue lớn trung bình 439 queues, giao dịch lâu 114 secs 2) So sánh tối ƣu client side Sử dụng tool profile client side cho ta kết nhƣ sau Hình 4.5 Trang sử dụng kỹ thuật tối ƣu hiệu Hình 4.6 Trang không sử dụng kỹ thuật tối ƣu hiệu Từ hình 4.5 4.6 ta đƣợc kết so sánh tốc độ tải trang tối ƣu tài nguyên hai phiên Thông số Phiên tối ƣu hiệu 71 Phiên không tối ƣu hiệu Tổng dung lƣợng 352 KB 1,1 MB trang Tổng số request 27 requests 41 requests Thời gian load 1,62s(onload 1,75s) 4,15s(onload 4,22s) trang Bảng So sánh hiệu demo hai phiên tối ƣu chƣa tối ƣu hiệu Từ bảng kết ta thấy khác biệt rõ ràng tốc độc tải trang hai phiên 4.4 Cài đặt triển khai  Restore Database tên PIFOR_Database sử dụng hệ quản trị Microsoft sql sever 2008  Host Website với domain: toiuuhieunang.local IIS trỏ vào thƣ mục PI.Web, Phân giải DNS cho domain  Thay đổi chuỗi kết nối file conntionstring.config tới máy chủ chứa sở liệu 72 KẾT LUẬN  Các kết đạt đƣợc  Nghiên cứu tổng thể kỹ thuật tối ƣu hiệu cho ứng dụng web  Áp dụng kỹ thuật xây dựng ứng dụng thử nghiệm để chứng minh tính hiệu quả, hạn chế  Nghiên cứu phƣơng pháp kiểm thử hiệu năng, phân tích hiệu ứng dụng giúp tìm nút thắt cổ chai cần tối ƣn giảm thiểu rủi ro phát hành sản phẩm  Một số hạn chế khó khăn:  Trong trình xây dựng ứng dụng cần có hệ thống server để triển khai thử nghiệm  Lĩnh vực tối ƣu hiệu rộng Đòi hỏi nhiều công nghệ áp dụng sử dụng nhều công cụ để phân tích đánh giá hiệu ứng dụng web  Định hƣớng nghiên cứu tƣơng lai  Nghiên cứu thêm tối ƣu hiệu tầng database Hệ thống NoSQSL [33]  Nghiên cứu thêm công nghệ single page application  Nghiên cứu thêm NodeJs xử lý ứng dụng có lƣu lƣợng truy cập đồng thời cực lớn đạt tới hàng chục ngàn kết nối đồng thời nhƣng cần phần cứng khiêm tốn [34] 73 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 74 [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, 75 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 76 [...]... 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. .. 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. .. 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. .. 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. .. á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. .. bằng cách gọi một module của bên thứ ba 15  Lợi ích của kỹ thuật này có thể làm giảm lƣợng thời gian cần để tải về các tài nguyên cần thiết làm cho ứng dụng web chạy nhanh hơn Giả sử rằng một ứng dụng web các nội dung HTML, JavaScript, CSS nếu không đƣợc nén là 3MB và sau khi nén còn 300KB Nếu nhƣ có 1000 yêu cầu từ máy trạm đồng nghĩa với việc server phải gửi ~ 3GB dữ liệu nếu website sử dụng kỹ thuật. .. ả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. .. 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... cú pháp và hiển thị nội dung rất nhanh [11]  Điểm hạn chế duy nhất của kỹ thuật này là làm đoạn mã khó đọc cho các lập trình viên tuy nhiên cách khắc phục khá đơn giản là lƣu ra hai phiên bản phát triển và phiên bản phát hành Phiên bản phát triển sẽ giữ nguyên mã ban đầu, phiên bản phát hành là phiên bản đã đƣợc Minify 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 Kỹ thuật. .. 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 ... 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ố:... 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... SERVER-SIDE Trong chƣơng này, phân tích hƣớng dẫn cách áp dụng kỹ thuật tiên tiến giúp tăng tốc độ thực thi ứng dụng web Có hai tầng ứng dụng cần áp dụng kỹ thuật này, bao gồm client-side server-side