BÀI 6
KIỂM TRA TÍNH HỢP LỆ VÀ TỐI ƯU HÓA MÃ WEB DI
ĐỘNG
NHẮC LẠI BÀI TRƯỚC
Tổng quan về tạo App trong Dreamweaver
Cấu hình, tùy chỉnh các App (ứng dụng) cho thiết bị
di động
Xây dựng ứng dụng
Một số cải tiến cho web di động:
Tổng quan về kỹ thuật web di động
Webkit trong trình duyệt web di động
Một số trình duyệt web trên các thiết bị di động
Tổng quan về tạo App trong Dreamweaver
Cấu hình, tùy chỉnh các App (ứng dụng) cho thiết bị
di động
Xây dựng ứng dụng
Một số cải tiến cho web di động:
Tổng quan về kỹ thuật web di động
Webkit trong trình duyệt web di động
Một số trình duyệt web trên các thiết bị di động
Slide 6 - Kiểm tra tính hợp lệ và tối ưu hóa mã web di động 2
MỤC TIÊU BÀI HỌC
Tối ưu hóa mã web di động:
Kỹ thuật Post-Processing cho ngôn ngữ đánh dấu
mobile
Tối ưu hóa web server cho trình duyệt di động
Kiểm tra tính hợp lệ của web trên các trình duyệt di
động
Tối ưu hóa mã web di động:
Kỹ thuật Post-Processing cho ngôn ngữ đánh dấu
mobile
Slide 6 - Kiểm tra tính hợp lệ và tối ưu hóa mã web di động 6
TỐI ƯU HÓA MÃ WEB DI ĐỘNG
Giảm thiểu sử dụng tài nguyên bên ngoài:
Giảm số lượng tài nguyên bên ngoài được liên kết
đến:
• Chỉ sử dụng những stylesheet CSS thật sự cần thiết.
Tốt nhất là chỉ nên sử dụng một file stylesheet CSS.
Xóa khoảng trắng, chú thích, mã đánh dấu không cần
thiết:
• Khoảng trắng và chú thích trong tài liệu web rất có ích
đối với người đọc nhưng lại không cần thiết cho quá
trình thông dịch của trình duyệt trên cả di động và máy
tính
Giảm thiểu sử dụng tài nguyên bên ngoài:
Giảm số lượng tài nguyên bên ngoài được liên kết
đến:
• Chỉ sử dụng những stylesheet CSS thật sự cần thiết.
Tốt nhất là chỉ nên sử dụng một file stylesheet CSS.
Xóa khoảng trắng, chú thích, mã đánh dấu không cần
thiết:
• Khoảng trắng và chú thích trong tài liệu web rất có ích
đối với người đọc nhưng lại không cần thiết cho quá
trình thông dịch của trình duyệt trên cả di động và máy
tính
Slide 6 - Kiểm tra tính hợp lệ và tối ưu hóa mã web di động 7
TỐI ƯU HÓA MÃ WEB DI ĐỘNG
• Sử dụng phương pháp minification (sự thu gọn - dùng
để chỉ việc loại bỏ nội dung không cần thiết ra khỏi tài
liệu web)
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-
• Chuyển mã hình ảnh sang định dạng tốt nhất được
trình duyệt di động hỗ trợ:
– Có thể chọn phương pháp tĩnh hoặc động (on-the-fly) để
thay đổi kích thước và chuyển mã hình ảnh
Điều chỉnh và thay đổi định dạng ảnh:
2 cách điều chỉnh hình ảnh:
• Giảm kích thước file sao cho nhỏ nhất có thể:
– giảm mà không ảnh hưởng đến khả năng đọc cũng như
tính khả dụng của website
– giảm số lượng màu sắc được sử dụng cho hình ảnh
– sử dụng bộ nén hình ảnh để giảm kích thước file ảnh
• Chuyển mã hình ảnh sang định dạng tốt nhất được
trình duyệt di động hỗ trợ:
– Có thể chọn phương pháp tĩnh hoặc động (on-the-fly) để
thay đổi kích thước và chuyển mã hình ảnh
Slide 6 - Kiểm tra tính hợp lệ và tối ưu hóa mã web di động 9
TỐI ƯU HÓA MÃ WEB DI ĐỘNG
Mã hóa MIME đa phần cho tài liệu hồi đáp:
Đóng gói MIME đa phần là kỹ thuật kế thừa được sử
dụng để tăng tốc độ hiển thị web cho di động trên
thiết bị di động đời cũ.
Khi trang web được đóng gói bằng MIME đa phần, ta
sử dụng kiểu nội dung (content type) của trang là
multipart/related
Mã hóa MIME đa phần cho tài liệu hồi đáp:
Đóng gói MIME đa phần là kỹ thuật kế thừa được sử
dụng để tăng tốc độ hiển thị web cho di động trên
thiết bị di động đời cũ.
Khi trang web được đóng gói bằng MIME đa phần, ta
sử dụng kiểu nội dung (content type) của trang là
khách lưu trữ đệm nội dung web
Trình duyệt điện thoại thông minh và một số trình
duyệt di động khác có thể dùng giải thuật gzip hoặc
deflate để giải nén và hiển thị những nội dung đã
được nén
Slide 6 - Kiểm tra tính hợp lệ và tối ưu hóa mã web di động 11
TỐI ƯU HÓA MÃ WEB DI ĐỘNG
Nén thông tin hồi đáp bằng gzip hoặc deflate:
Nếu trình duyệt trên di động yêu cầu thì Apche, IIS và
những máy chủ khác có thể được cấu hình để nén tài liệu
web nhờ sử dụng giải thuật gzip hoặc deflate
Việc nén tài liệu văn bản rất hiệu quả để tối ưu hóa số
lượng byte cần truyền tải từ máy chủ đến trình duyệt
Trình duyệt trên di động (hoặc trên máy tính) sử dụng
header Accept-Encoding trong yêu cầu HTTP để yêu cầu
máy chủ web nén thông tin hồi đáp trả về
Giá trị của header Accept-Encoding gồm một danh sách
các giải thuật nén được trình duyệt hỗ trợ (bao gồm giá trị
gzip và deflate), phân cách với nhau bằng dấu phẩy
Nén thông tin hồi đáp bằng gzip hoặc deflate:
Nếu trình duyệt trên di động yêu cầu thì Apche, IIS và
những máy chủ khác có thể được cấu hình để nén tài liệu
web nhờ sử dụng giải thuật gzip hoặc deflate
Việc nén tài liệu văn bản rất hiệu quả để tối ưu hóa số
lượng byte cần truyền tải từ máy chủ đến trình duyệt
Trình duyệt trên di động (hoặc trên máy tính) sử dụng
header Accept-Encoding trong yêu cầu HTTP để yêu cầu
máy chủ web nén thông tin hồi đáp trả về
Giá trị của header Accept-Encoding gồm một danh sách
các giải thuật nén được trình duyệt hỗ trợ (bao gồm giá trị
application/javascript text/css
</Location>
Slide 6 - Kiểm tra tính hợp lệ và tối ưu hóa mã web di động 14
# Cho phép nén file trong thư mục /books/bmwd/08/compressed directory.
<Location /books/bmwd/08/compressed>
AddOutputFilterByType DEFLATE text/html text/plain text/xml
application/vnd.wap.xhtml+xml application/xhtml+xml text/javascript
application/javascript text/css
</Location>
TỐI ƯU HÓA MÃ WEB DI ĐỘNG
Cấu hình máy chủ web Microsoft IIS:
Cấu hình máy chủ IIS có sự khác biệt giữa nén nội
dung web động và nội dung web tĩnh
IIS cho phép nén các file HTML tĩnh theo mặc định
nhưng lại yêu cầu phải tự cấu hình để nén thêm các
kiểu file tĩnh khác hoặc để nén nội dung web động
Chỉ thị lưu trữ đệm trong header hồi đáp HTTP:
Chuẩn HTTP 1.1 định nghĩa một số header để chỉ thị
lưu trữ đệm tài liệu web cũng như thời gian lưu trữ
các file đệm
Cấu hình máy chủ web Microsoft IIS:
Cấu hình máy chủ IIS có sự khác biệt giữa nén nội
dung web động và nội dung web tĩnh
IIS cho phép nén các file HTML tĩnh theo mặc định
nhưng lại yêu cầu phải tự cấu hình để nén thêm các
kiểu file tĩnh khác hoặc để nén nội dung web động
Chỉ thị lưu trữ đệm trong header hồi đáp HTTP:
Chuẩn HTTP 1.1 định nghĩa một số header để chỉ thị
lưu trữ đệm tài liệu web cũng như thời gian lưu trữ
các file đệm
Slide 6 - Kiểm tra tính hợp lệ và tối ưu hóa mã web di động 17
Expires: Sun, 18 Oct 2009 00:00:00 GMT
KIỂM TRA TÍNH HỢP LỆ CỦA MÃ ĐÁNH
DẤU WEB DI ĐỘNG
KIỂM TRA TÍNH HỢP LỆ CỦA MÃ ĐÁNH DẤU
Tầm quan trọng của mã đánh dấu hợp lệ trong
trang web cho di động:
đối với web cho di động, cú pháp stylesheet và mã
đánh dấu hợp lệ lại là điều rất cần thiết
để đảm bảo khả năng tương thích của trang web với
nhiều loại trình duyệt di động khác nhau
mã đánh dấu không hợp lệ và định dạng kém sẽ ảnh
hưởng đến khả năng tương thích của tài liệu đối với
trình duyệt di động hơn nhiều so với sự ảnh hưởng
trên trình duyệt trên máy tính
Tầm quan trọng của mã đánh dấu hợp lệ trong
trang web cho di động:
đối với web cho di động, cú pháp stylesheet và mã
đánh dấu hợp lệ lại là điều rất cần thiết
để đảm bảo khả năng tương thích của trang web với
nhiều loại trình duyệt di động khác nhau
mã đánh dấu không hợp lệ và định dạng kém sẽ ảnh
hưởng đến khả năng tương thích của tài liệu đối với
trình duyệt di động hơn nhiều so với sự ảnh hưởng
trên trình duyệt trên máy tính
Slide 6 - Kiểm tra tính hợp lệ và tối ưu hóa mã web di động 19
KIỂM TRA TÍNH HỢP LỆ CỦA MÃ ĐÁNH DẤU
Những vấn đề mà trình kiểm tra tính hợp lệ bỏ qua:
Trình kiểm tra tính hợp lệ không đánh giá chất lượng
và hiệu quả của mã đánh dấu.
(Markup
Validation
Service) của W3C
Cú pháp mã đánh
dấu HTML,
XHTML và những
mã đánh dấu
web khác.
http://validator.w
3.
org/
http://validator.w
3
.org/source/
Slide 6 - Kiểm tra tính hợp lệ và tối ưu hóa mã web di động 21
Dịch vụ kiểm tra
tính hợp lệ cho
mã đánh dấu
(Markup
Validation
Service) của W3C
Cú pháp mã đánh
dấu HTML,
XHTML và những
mã đánh dấu
web khác.
http://validator.w
3.
org/
http://validator.w
duyệt di động và máy chủ web.
Slide 6 - Kiểm tra tính hợp lệ và tối ưu hóa mã web di động 25
Copyright: Tài liệu đại học ©