Thủ Thuật‎ > ‎

Một số mẹo đơn giản nên làm để website load nhanh hơn



1) Nên sử dụng 1 hình ảnh duy nhất chứa tất cả icon.

Khi sử dụng chỉ cần show vùng icon muốn dùng. Bởi vì nếu như dùng 10 hình cho 10 icon nhỏ thì trình duyệt phải mở kết nối 10 lần để lấy 10 cái hình đó về, thay vì thế mình gộp vào 1 hình thì chỉ cần request 1 lần và sẽ giảm rất nhiều overhead.



2) Không cần đóng các thẻ html sau:

</li>
</option>
</p>
</td>
</tr>

thay vì bạn viết     <li>danh sách 1</li>  thì bạn có thể chỉ viết <li>danh sách 1. Tương tự như thế với các thẻ khác.



3) Các file cùng loại nên để cùng 1 cấp.

vd không nên để ở 2 folder khác nhau:

              abc.com/image/ex.jgg
        abc.com/image/exam/ex1.jgg

tốt nhất nên để:
              abc.com/image/ex.jgg
        abc.com/image/ex1.jgg



4) dùng .htacess để cho browser có thể cache các file(.jpg, png... ) cố định.

Việc này sẽ tránh cứ mỗi lần vào web lại lấy đúng cái file đó về. Đây là vd 1 file .htacess:

ExpiresActive On ExpiresDefault "access plus 1 week"
ExpiresByType text/html "access plus 12 hours"
ExpiresByType image/* "access plus 1 year"
ExpiresByType audio/* "access plus 1 year"

tìm hiểu thêm về htacess tại http://httpd.apache.org/docs/2.2/mod/mod_expires.html

Lưu ý
: với file css thì không nên cache.



5) cố gắng gộp nhiều file js/css vào cùng một file duy nhất.

Cũng như lý do của mẹo thứ nhất. Giả sử trang index của bạn có dùng 5 file .js chứa 5 hàm riêng biệt thì bạn nên gộp nó vào 1 file duy nhất chứa 5hàm đó.



6) dùng javascript để load 1file javascript khác chỉ khi người dùng cần tới nó.

Giả sử bạn có 1 trang web, có 1 button khi click vào sẽ gọi lên 1 form lên, để thao tác trên form đó thì cần file javascript abc.js . Vậy khi load trang web lên với những người dùng ko click button thì web không cần phải load file abc.js mình sẽ bắt sự kiện click của button để load file abc.js



7) Load file javascript sau khi trang đã được load hoàn tất.

Đề load 1 file sau khi trang đã được load bạn có thể dùng như sau (đặt đoạn code này nằm ở dưới cùng của body - ngay trên thẻ </body> )

<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "vidu.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>



8) Tránh sử dụng @import file css.

Khi sử dụng
<link rel="stylesheet" href="file1.css">
<link rel="stylesheet" href="file2.css">
Trình duyệt có thể load file1 và file2 song song
nhưng khi bạn dùng @import url("file2.css") trong file1.css thì trình duyệt phải đợi load file2.css xong mới có thể hoàn tất việc load file1.css



9) Khai báo các file .css và .js theo nhóm, không nên xen kẽ nhau.

ví dụ:
Không nên:

<head>
<link rel="stylesheet" type="text/css" href="stylesheet1.css" />
<script type="text/javascript" src="scriptfile1.js" />
<link rel="stylesheet" type="text/css" href="stylesheet2.css" />
<link rel="stylesheet" type="text/css" href="stylesheet3.css" />

<script type="text/javascript" src="scriptfile2.js" />
</head>

browse sẽ load stylesheet1.css -> sau khi hoàn tất load tiếp scriptfile1.js -> sau khi hoàn tất load 2 file stylesheet2.css, và stylesheet3.css song song và cuối cùng load scriptfile2.js


Thay vì thế, chúng ta nên sắp xếp theo nhóm để browse có thể load song song

<head>
<link rel="stylesheet" type="text/css" href="stylesheet1.css" />
<link rel="stylesheet" type="text/css" href="stylesheet2.css" />
<link rel="stylesheet" type="text/css" href="stylesheet3.css" />

<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />

</head>

Browse sẽ load scriptfile1.js, scriptfile2.js, scriptfile3.js song song, sau khi load xong sẽ load scriptfile1.js và scriptfile2.js song song. => sẽ cải thiện thời gian load 1 page.

Lưu ý: nên để .css trước .js bởi vì nhiều lúc các hàm trong file js phải lấy giá trị từ các class trong file .css nhưng file css thì không phụ thuộc vào file .js.






Comments