Tối ưu hóa website (Phần cuối)

Với phần cuối này, mình xin trình bày về cách tối ưu hóa hình ảnh trong website. Hình ảnh là thành phần quan trọng, được sử dụng khá nhiều trong trang, chính vì vậy bạn cần phải cân nhắc khi sử dụng hình ảnh hợp lý. Tối ưu hình ảnh có những công đoạn sau:

Cách sử dụng hình ảnh
Hình ảnh hiển thị thường thông qua 2 cách, sử dụng thẻ img và sử dụng thuộc tính background. Ở đây mình xin khuyến khích các bạn nên sử dụng thuộc tính background khi có thể, vì những lợi điểm sau:

Dễ thay đổi bằng hình ảnh khác khi cần, chỉ cần thay đổi nội dung CSS là có thể chuyển đổi hình ảnh khác, thay vì phải vào mã HTML dò tìm thẻ IMG và thay đổi thuộc tính src

Có thể tạo hiệu ứng thay đổi khi di chuyển mouse vào thẻ, chỉ cần định thêm style dành cho :hover là ta có thể có 2 trang thái hiển thị khác nhau trên cùng một thẻ, điều này muốn thực hiện trên thẻ IMG phải sử dụng Javascript

Lớp dạy Javascript trực tuyến

Hình thức / thời gian
Mình sẽ đăng những bài viết lý thuyết Javascript liên tục, các bạn sẽ đọc và tham gia thảo luận, gửi bài tập qua mẫu form ở cuối bài. Sau khi nhận bài mình sẽ xem và phản hồi ý kiến, đồng thời đăng tải lên blog. Thời gian học sẽ bắt đầu từ ngày 01/11/2010

Nội dung
Khóa học sẽ dài hoặc ngắn tùy theo chuyên đề của khóa học, hiện tại mình sẽ gửi mẫu đăng ký và tùy theo kết quả đăng ký mình sẽ quyết định chuyên đề, thời gian của khóa học là gì.

Kết quả
Mình không tham vọng sẽ đem đến cho bạn được những kỹ năng như bạn mong muốn, nhưng trên hết, sẽ là sự cố gắng chia sẻ kiến thức của chính mình để giúp các bạn có một số vốn kiến thức nhất định qua mỗi khóa học. Trong quá trình thảo luận, nếu có những điểm bạn nhận thấy mình truyền đạt không chính xác, hãy góp ý xây dựng bằng cách trình bày nguyên nhân, nội dung sai lạc, có liên kết tham khảo càng tốt, nhằm mục đích hoàn thiện nội dung khóa học.

Chơi xếp kim cương 2 thật đã trên web của bạn

Game xếp kim cương 2 nguyên bản của Popcap

Đối với mỗi người chúng ta, dòng game xếp kim cương của hãng Popcap đã không còn xa lạ nữa. Nhớ lại cái thời người người chơi xếp kim cương, nhà nhà chơi xếp kim cương (hì hì, nói hơi quá nhưng thực ra thì các bạn nữ mê trò này lắm). Hôm nay mình xin trình bày cách cài đặt một game xếp kim cương lên website, blog, forum hoặc bất cứ đâu, miễn là nơi đó có hỗ trợ javascript, vì game này được viết bằng javascript mà.

Tối ưu hóa website (Phần 3)

Xem lại Phần 1, Phần 2

Ở 2 bài trước mình đã trình bày về tối ưu hóa CSS và Javascript, hôm nay mình xin trình bày về tối ưu hóa HTML. HTML là một phần mã không thể thiếu của một trang web, ở bất kỳ đâu cũng có HTML, vì vậy nếu ta tối ưu hóa được HTML là đã cải thiện tốc độ web khá nhiều. HTML như các bạn đã biết, là một ngôn ngữ đánh dấu có cấu trúc, nó có những cú pháp tùy tiện hơn Javascript và CSS, dù bạn có viết sai cú pháp thì nó vẫn có khả năng hiển thị, còn hiển thị "cái gì" thì không xác định được. Để tối ưu HTML gồm có những công việc sau:

Tối ưu cấu trúc sử dụng thẻ
Việc sử dụng thẻ một cách hợp lý, "tiết kiệm", nói chung là càng ít thẻ càng tốt. Ít thẻ thì được lợi gì ? Ít thẻ thì mã ít hơn, trong sáng hơn, dễ hiểu hơn, ít thẻ thì trình duyệt biên dịch nhẹ gánh biên dịch hơn, giảm thiểu trường hợp "cạn" bộ nhớ. Vậy tiêu hoang thẻ là như thế nào ? Xem đoạn mã dưới:

<table class="box">
    <tr>
        <td class="box-header"></td>
    </tr>
    <tr>
        <td class="box-body">Nội dung</td>
    </tr>
    <tr>
        <td class="box-footer"></td>
    </tr>
</table>

"Tình hình" là đoạn mã trên có 7 thẻ, nếu sử dụng một cách khác:

Điều kỳ diệu của đối tượng Date trong Javascript

Lần này mình xin "đổi gió" chút đỉnh. Hôm nay mình xin trình bày về đối tượng Date trong Javascript. Ngày tháng là yếu tố quan trọng, được sử dụng khá nhiều, nên việc tính toán ngày tháng cũng muôn hình vạn trạng.

Khởi tạo một đối tượng Date

var now = new Date();

Với lệnh khởi tạo Date không tham số, hệ thống sẽ trả về ngày hiện tại. Ta cũng có thể khởi tạo đối tượng Date bằng cách chỉ định rõ những tham số theo thứ tự sau: năm, tháng, ngày, giờ, phút, giây:

var vnwomanDay = new Date(2010, 9, 20);
alert(vnwomanDay);
var vnwomanDayAndTime = new Date(2010, 9, 20, 12, 20, 30);
alert(vnwomanDayAndTime);

Có một điểm cần lưu ý, trong Javascript, tháng được tính từ 0 - 11, nghĩa là 0 là tháng 1, 1 là tháng 2 ... Chúng ta phải luôn ghi nhớ điều này để tránh tính toán hoặc hiển thị nhầm.

Tối ưu hóa website (Phần 2)

Xem lại phần 1

Ở phần 1, mình đã trình bày về cách "nén" mã javascript, sang phần này mình sẽ giải quyết tới "anh chàng" CSS.
Vậy CSS có khả năng "nén" được như javascript không ?
Ngoài cách "nén" ra còn có cách nào để tối ưu hóa CSS không ?

Chúng ta sẽ đi vào từng vấn đề trên.
CSS cũng tương tự như javascript, là một dạng văn bản có cấu trúc, mà đã là văn bản thì ta đều có thể "nén" được, tuy nhiên, tỉ lệ nén ở CSS không nhiều, và chỉ có một cách nén duy nhất. Thông thường các trình nén CSS sẽ làm như sau:

Tối ưu hóa website (Phần 1)

Tối ưu hóa là cách làm cho website hoạt động trơn tru hơn, tốt hơn. Nhìn chung mọi người thường hiểu là làm sao cho website của tôi "chạy nhanh". Đôi khi có những định nghĩa tối ưu hóa website tương đương với việc tối ưu hóa đối với bộ máy tìm kiếm (SEO), ở đây mình xin trình bày khía cạnh tối ưu hóa nội dung, tài nguyên website.

Những kiến thức này dựa trên việc tham khảo tài liệu của 2 chương trình Page Speed (anh Goo) và YSlow (anh Yah), mình đã giản lược đồng thời mô tả chi tiết hơn một số khái niệm để các bạn có thể nắm được.

Tối ưu hóa tài nguyên website
Tài nguyên website được kể ở đây chính là: hình ảnh, tập tin javascript, tập tin css, tập tin html. Thông thường ta sử dụng những tài nguyên này và không nghĩ rằng có thể làm gì với nó để cho nó phục vụ website tốt hơn. Việc tối ưu hóa chúng nhằm mục đích cải thiện thời gian tải về của trang web (là làm nhanh lên đó), việc cải thiện này cũng sẽ làm giảm tải phía máy chủ nhưng đôi lúc cũng bắt máy chủ làm việc nhiều hơn.

Những định dạng hình ảnh thường được sử dụng cho trang web

Hình ảnh là thành phần không thể thiếu của một trang web. Hình ảnh dùng để trang trí, nhấn mạnh nội dung, truyền tải thông điệp. Một trang web được xem là đẹp thì không thể thiếu hình ảnh.

Với vai trò khá quan trọng như thế, ta cần phải nắm rõ về những định dạng ảnh thường được sử dụng, từ đó vận dụng tốt hơn trong việc hiển thị trang.

Hiện nay được sử dụng nhiều nhất là 3 định dạng ảnh: GIF, JPG (JPEG), PNG. Mỗi định dạng này có những ưu khuyết điểm riêng, phục vụ tốt cho một mục đích hiển thị đặc thù. Mình sẽ trình bày sơ lược về "tiểu sử" cũng như cách sử dụng chúng, những chi tiết liên quan thì mình sẽ dẫn link tham khảo.

Khắc phục lỗi chiều cao thẻ nhỏ hơn chiều cao của font mặc định của IE6

Khi tạo box ta thường sử dụng 4 thẻ DIV với cấu trúc như sau

<div class="box">
    <div class="box-top"></div>
    <div class="box-middle">Nội dung</div>
    <div class="box-bottom"></div>
</div>

Ta sử dụng một hình ảnh làm nền:

Các phần box-top, box-middle, box-bottom chứa những phần hình ảnh tương ứng: cạnh trên của hộp, phần giữa hộp, cạnh dưới hộp. Do phần cạnh trên và cạnh dưới có chiều cao nhỏ 10px, ta đặt style như sau:

.box-top {height: 10px; background: ...}
.box-bottom {height: 10px; background: ...}

Hiển thị ở những trình duyệt khác thì hoàn toàn chính xác:

Riêng IE6 bắt đầu "khó chịu":

Lần này ta được "ban tặng" cho 2 khoảng trống rất chi là vô duyên. Vậy khoảng trống này từ đâu ra ? Xin thưa rằng, trong IE6 nếu một thẻ có chiều cao X, và chiều cao của font là Y thì IE6 sẽ chọn chiều cao lớn nhất giữa 2 giá trị này làm chiều cao hiển thị của thẻ, điều này làm phát sinh những khoảng trống ngoài dự liệu.

Linq2Js: Thực thi chậm trong Linq2Js

Đặc tính thực thi chậm trong Linq2Js giúp cho hệ thống tiết kiệm bộ nhớ khi ta chưa sử dụng kết quả, lấy ví dụ:

// Bước 1: Khởi tạo mảng
var numbers = [1, 2, 3, 4];
// Bước 2: Sắp xếp theo thứ tự giảm
var sortedNumbers = linq(numbers).desc();
// Bước 3: Thêm một phần tử mới vào mảng gốc
numbers.push(5);
// Bước 4: Xuất ra kết quả
sortedNumbers.alert();

Ở tại bước 2, nếu ngay lúc đó biểu thức linq thực thi và sắp xếp lại thứ mảng giảm dần là không cần thiết, vì ta chưa sử dụng đến kết quả sắp xếp đó, đến bước 3 ta thêm một phần tử vào mảng numbers thì linq vẫn chưa làm công việc của mình, chỉ khi ta gọi những hàm kết xuất như alert, array.. thì toàn bộ biểu thức mới được thực thi.

Theo như mình tham khảo một số thư viện khác, ngay tại bước 2 thì linq của họ đã thực thi và chuyển hóa thành một mảng số mới đã được sắp xếp, những thao tác sau đó với linq đều không có tác dụng.