Mẹo tối ưu hóa HTML/CSS/JS

(Ngày: 08/10/2019)
Tối ưu hóa trang web luôn là điều mà mọi lập trình viên đều hướng đến, bởi điều này giúp cho trang web của bạn cải thiện hiệu năng, giảm thời gian chờ đợi và được ưu tiên trong các bộ máy tìm kiếm chẳng hạn như của Google.

Tránh chèn, nhúng code CSS/JS vào file HTML

-Inline

<div style="color:red;">

<button class="btn" onclick="alert('Hello World')">

-Nhúng

<style>.red {color: red;}</style>

<script>alert('Hello World');</script>

  • Dùng file bên ngoài

<link rel="stylesheet" href="file.css">

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

Đối với 2 cách Inline/Nhúng, cách này làm giảm kết nối đến server nhưng lại làm tăng kích thước file HTML. Cách thứ 3 được dùng rộng rãi nhất nhằm giúp bạn quản lý source code dễ dàng và browser có thể lưu lại cache cho các file này.

Hạn chế thao thác rên các Dom

Ví dụ ta có 2 trường hợp thao tác trên Dom-TH1

  for (var i = 0; i < 100; i++) {

    document.getElementById("test").innerHTML += "<span>" + i + "</span>";

  }

-TH2

  var test = "";

  for (var i = 0; i < 100; i++) {

    test += "<span>" + i + "</span>";

  }

   document.getElementById("test").innerHTML = test;

So sánh hiệu năng giữa 2 cách trên thì có thể nhận ra việc sử dụng thao tác trên Dom ảnh hưởng rất lớn đến tốc độ của trang web.

Nối các file CSS/JS lại với nhau

Việc tách các file CSS/JS sẽ giúp bạn quản lý code dễ dàng hơn. Tuy nhiên điều này khiến cho trình duyệt chúng ta mất rất nhiều thời gian kết nối mới tải về đủ. Thông thường đối với việc tải trang tài nguyên trình duyệt sẽ cho bạn từ 4 đến 8 kết nối đồng thời. Vì vậy, hãy gộp các file CSS/JS của bạn lại đẻ giảm số lượng kết nối cần thiết và tăng tốc tải trang nhanh nhất có thể.

Tải CSS trước JS

Trong khi tải trang nếu trình duyệt gặp thẻ <script> nó sẽ dừng việc load HTML để ưu tiên cho việc tải các file JS về và khởi chạy. Điều này làm gián đoạn việc load các file HTML.

Vì vậy nếu file JS của bạn không phải xử lý đặc biệt thì nên lưu nó sau cùng. Ngược lại, bạn nên tải các file CSS đầu tiên để người dùng trong khi đợi tải trang sẽ không thấy một trang web xấu xí khi chưa có CSS.


    <html lang="vi">

      <head>

          <meta charset="UTF-8" />

          <title>Test | KarmiPhuc</title>

          <link type='...' src='public/css/style.css'>

      </head>

      <body>

          <!-- HTML here -->

          ...

          <script type='...' src='public/js/script.js'>

      </body>

  </html>

Sử dụng các kỹ thuật tải không đồng bộ

Khi lập trình một trang web thì việc tăng tương tác trên mạng xã hội là điều rất phổ biến. Nhưng điều này đòi hỏi bạn phải tải về các file cần thiết và đôi khi lại ngốn kha khá thời gian khi tải trang. Có 2 cách để giải quyết vấn đề này.

  • Sử dụng JS để tải không đồng bộ các file JS bên ngoài

  (function() {

     var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;

     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);

   })();

  • Sử dụng Iframe

  (function() {

   var url = 'http://example.org/js.js';

   var iframe = document.createElement('iframe');

   (iframe.frameElement || iframe).style.cssText =

     "width: 0; height: 0; border: 0";

   iframe.src = "javascript:false";

   var where = document.getElementsByTagName('script')[0];

   where.parentNode.insertBefore(iframe, where);

   var doc = iframe.contentWindow.document;

   doc.open().write('<body onload="'+

     'var js = document.createElement(\'script\');'+

     'js.src = \''+ url +'\';'+

     'document.body.appendChild(js);">');

   doc.close();

  }());

Tránh sử dụng @import

Có 2 cách để chèn file CSS vào trang web.

  <link rel="stylesheet" href="file.css">

Với cách này trình duyệt có thể tải nhiều file css đồng thời .

  @import url('style.css');

Khi sử dụng @import file style.css chỉ được tải sau khi các file css gốc đã tải xong, hạn chế khả năng tải đồng thời của trình duyệt.

>> Xem thêm: Đặt tên class của element trong HTML sao cho phù hợp?

viblo.asia