Bộ câu hỏi phỏng vấn HTML phần 3

Giải thích sự khác biệt giữa Cookie, Session Storage và Local Storage?


  • Không gian lưu trữ hạn chế 4096 byte / ~ 4 kb.
  • Chỉ cho phép lưu trữ dữ liệu dưới dạng chuỗi.
  • Dữ liệu đã lưu trữ được gửi trở lại máy chủ theo mọi HTTP Request như HTML, CSS, Hình ảnh, v.v.
  • Chỉ có thể lưu trữ 20 cookie cho mỗi domain.
  • Tổng cộng 300 cookie được phép trên một trang web.
  • Đặt cờ “HTTP only” sẽ ngăn truy cập cookie qua javascript.
  • Có thể đặt thời gian hết hạn để tự động xóa (có thể được đặt từ server hoặc client).

Ví dụ:

// Set with expiration & path
document.cookie = "name=Gokul; expires=Thu, 18 Dec 2016 12:00:00 UTC; path=/;";
// Get
document.cookie;
// Delete by setting empty value and same path
document.cookie = "name=; expires=Thu, 18 Dec 2016 12:00:00 UTC; path=/;";

Session Storage

  • Không gian lưu trữ là 5 mb / ~ 5120 kb.
  • Không gian lưu trữ có thể thay đổi một chút tùy theo trình duyệt.
  • Chỉ cho phép lưu trữ dữ liệu dưới dạng chuỗi.
  • Dữ liệu có sẵn trên mỗi window hoặc tab.
  • Sau khi đóng window hoặc tab, dữ liệu được lưu trữ sẽ bị xóa.
// Set
sessionStorage.setItem("name", "gokul");
// Get
sessionStorage.getItem("name"); // gokul
// Delete
sessionStorage.removeItem("name");
// Delete All
sessionStorage.clear();

Local Storage

  • Không gian lưu trữ là 5 mb / ~ 5120 kb.
  • Không gian lưu trữ có thể thay đổi một chút tùy theo trình duyệt.
  • Chỉ cho phép lưu trữ dữ liệu dưới dạng chuỗi.
  • Dữ liệu sẽ chỉ có sẵn trên cùng một origin.
  • Dữ liệu không có giới hạn tồn tại (cho đến khi bị xóa).
// Set
localStorage.setItem("name", "gokul");
// Get
localStorage.getItem("name"); // gokul
// Delete
localStorage.removeItem("name");
// Delete All
localStorage.clear();

Thẻ optional trong HTML là gì?


Trong HTML, một số phần tử có các thẻ tùy chọn (optional tag). Thực tế, cả thẻ mở (opening tag) và đóng (closing tag) của một số phần tử có thể hoàn toàn bị xóa khỏi một tài liệu HTML, mặc dù bản thân các phần tử là bắt buộc phải có.

Ba phần tử html bắt buộc có thẻ mở (opening tag) và đóng (closing tag) là tùy chọn: html, headbody

Sự khác nhau giữa thẻ section và thẻ div là gì?


  • <section> là một thẻ có ngữ nghĩa, nó mô tả ràng nội dung bên trong được nhóm các nội dung có cùng chủ đề. (ví dụ: trang chủ của một website có thể được chia thành nhiều khu vực khác nhau như: giới thiệu, nội dung mới, thông tin liên hệ,…).
  • <div> ngược lại với thẻ <section>, thẻ <div> không miêu tả nội dung trong thẻ của mình, ta có thể dùng thẻ div ở bất cứ nơi nào mình muố

Thuộc tính defer và async trên thẻ script là gì?


  • Thuộc tính defer/async có giá trị true/false (boolean). Khi dùng defer, điều này quy định rằng script sẽ thực thi khi trang (page) đã hoàn tất việc phân tích cú pháp HTML (parsing). Nếu cả hai thuộc tính đều không khai báo, tập lệnh được tải xuống và thực thi đồng bộ, đồng thời sẽ tạm dừng phân tích cú pháp tài liệu (document) cho đến khi nó thực thi xong (hành vi mặc định). Các tập lệnh được tải xuống và thực thi theo thứ tự mà chúng gặp phải.
  • Thuộc tính defer tải xuống tập lệnh trong khi tài liệu vẫn đang phân tích cú pháp nhưng đợi cho đến khi tài liệu hoàn tất quá trình phân tích cú pháp trước khi thực thi nó, tương đương với việc thực thi bên trong trình nghe sự kiện DOMContentLoaded, trì hoãn các tập lệnh sẽ thực thi theo thứ tự.
  • Thuộc tính async tải xuống tập lệnh trong khi phân tích cú pháp tài liệu nhưng sẽ tạm dừng trình phân tích cú pháp để thực thi tập lệnh trước khi nó hoàn tất quá trình phân tích cú pháp. các tập lệnh không đồng bộ sẽ không nhất thiết phải thực thi theo thứ tự.

Lưu ý: cả hai thuộc tính chỉ được sử dụng nếu tập lệnh có thuộc tính src (tức là không phải tập lệnh nội tuyến). Ví dụ:

<script src="myscript.js"></script>
<script src="myscript.js" defer></script>
<script src="myscript.js" async></script>

Mục đích của chặn bộ nhớ cache (cache busting) là gì và làm thế nào bạn có thể thực hiện nó?


Các trình duyệt có bộ nhớ cache để lưu trữ tạm thời các tệp trên trang web để chúng không cần phải tải xuống lại khi chuyển đổi giữa các trang hoặc tải lại cùng một trang. Máy chủ được thiết lập để gửi tiêu đề yêu cầu trình duyệt lưu trữ tệp trong một khoảng thời gian nhất định. Điều này làm tăng đáng kể tốc độ trang web và bảo toàn băng thông.

Tuy nhiên, nó có thể gây ra sự cố khi trang web đã được thay đổi bởi các nhà phát triển vì bộ nhớ cache của người dùng vẫn tham chiếu đến các tệp cũ. Điều này có thể khiến chúng có chức năng cũ hoặc lỗi trang web nếu các tệp CSS và JavaScript được lưu trong bộ nhớ cache là các phần tử tham chiếu không còn tồn tại, đã bị di chuyển hoặc đã được đổi tên.

Cache busting là quá trình buộc trình duyệt tải xuống các tệp mới. Điều này được thực hiện bằng cách đặt tên tệp khác với tệp cũ. Một kỹ thuật phổ biến để buộc trình duyệt tải xuống lại tệp là nối một chuỗi truy vấn vào cuối tệp.

src = "js/script.js" => src = "js/script.js?v=2"

Trình duyệt xem nó là một tệp khác và chúng ta không cần phải thay đổi tên tệp.

Hãy liệt kê một số khác biệt mà XHTML có so với HTML?


Một số khác biệt chính là:

  • Phần tử XHTML phải có XHTML <DOCTYPE>.
  • Các giá trị thuộc tính phải được đặt trong dấu ngoặc kép.
  • Giảm thiểu thuộc tính bị cấm (ví dụ: người ta phải sử dụng checked = "checked" thay vì checked).
  • Các phần tử phải luôn được lồng đúng cách.
  • Các phần tử phải luôn được đóng.
  • Các ký tự đặc biệt phải được bỏ qua.

Web Workers là gì?


  • Web worker giúp chúng ta chạy mã javascript ở chế độ nền mà không chặn ứng dụng.
  • Web Worker chạy trong một isolated thread để thực thi mã javascript của chúng ta.
  • Web Worker thường được sử dụng cho các tác vụ lớn.
  • Web Worker cần một tệp riêng cho mã javascript của chúng ta.
  • Tệp Web Worker được tải xuống bất đồng bộ.
  • Web Worker được hỗ trợ trong tất cả các trình duyệt mới nhất.

Ví dụ:

Tệp js ở client-side:

var myWebWorker = new Worker("task.js"); // Creating a worker
// Listen to task.js worker messages
worker.addEventListener(
  "message",
  function (event) {
    console.log("Worker said: ", event.data);
  },
  false,
);
worker.postMessage("From web worker file"); // Will start the worker

Tệp task.js (worker file):

// Listen to client js file post messages
self.addEventListener(
  "message",
  function (event) {
    self.postMessage(event.data); // Send processed data to listening client js file.
  },
  false,
);

Thuộc tính rel="noopener" được sử dụng ở đâu và tại sao?


  • Thuộc tính rel="noopener" là một thuộc tính được sử dụng trong các phần tử <a> (hyperlinks).
  • Nó ngăn chặn các trang có thuộc tính window.opener, điều này sẽ trỏ đến trang từ nơi được mở ra và cho phép trang mở ra từ hyperlink để thao tác trang

WebSQL là gì?


  • WebSQL là API cơ sở dữ liệu cho cơ sở dữ liệu của client (trình duyệt) sử dụng SQL.
  • Tương tự như SQL, API khá đơn giản.
  • Không phải tất cả các trình duyệt đều hỗ trợ WebSQL.
  • Hiện tại, WebSQL không được dùng nữa.

Bạn biết gì về DOCTYPE trong HTML?


DOCTYPE là từ viết tắt của "document type". Nó là một khai báo được sử dụng trong HTML để phân biệt giữa standards modequirks mode. Sự hiện diện của nó yêu cầu trình duyệt hiển thị trang web ở standards mode.

Chỉ cần thêm <! DOCTYPE html> ở đầu trang của bạn.

DOM là gì?


DOM là tên gọi viết tắt của (Document Object Model – tạm dịch Mô hình Các Đối tượng Tài liệu). Là một chuẩn được định nghĩa bởi W3C (Tổ Chức Web Toàn Cầu – World Wide Web Consortium). DOM được dùng để truy xuất và thao tác trên các tài liệu có cấu trúc dạng HTML hay XML bằng các ngôn ngữ lập trình thông dụng như Javascript, PHP…

Trong mỗi thẻ HTML sẽ có những thuộc tính (Properties) và có phân cấp cha – con với các thẻ HTML khác. Sự phân cấp và các thuộc tính của thẻ HTML này ta gọi là selector và trong DOM sẽ có nhiệm vụ xử lý các vấn đề như đổi thuộc tính của thẻ, đổi cấu trúc HTML của thẻ.

Có thể thấy tất cả các thẻ HTML sẽ được quản lý trong đối tượng document. Thẻ cao nhất là thẻ html, tiếp theo là phân nhánh body và head. Bên trong head thì có những thẻ như style, title, … và bên trong body thì là vô số các thẻ HTML khác. Như vậy trong Javascript, để thao tác với các thẻ HTML ta phải thông qua đối tượng document.

DOM là gì

Các nút này là các đối tượng có thể được thao tác theo chương trình và mọi thay đổi có thể nhìn thấy được thực hiện đối với chúng đều được phản ánh trực tiếp trong document. Trong một trình duyệt, API này có sẵn cho JavaScript, nơi các nút DOM có thể được điều khiển để thay đổi kiểu của chúng, nội dung, vị trí trong tài liệu hoặc được tương tác qua các sự kiện.

  • DOM được thiết kế để độc lập với bất kỳ ngôn ngữ lập trình cụ thể nào, làm cho biểu diễn cấu trúc của document có sẵn từ một API nhất quán duy nhất.
  • DOM được xây dựng dần dần trong trình duyệt khi tải trang, đó là lý do tại sao các tập script thường được đặt ở cuối trang, trong <head> với thuộc tính defer hoặc bên trong trình xử lý sự kiện DOMContentLoaded.
  • Các tập script thao tác các nút DOM nên được chạy sau khi DOM đã được xây dựng để tránh lỗi. document.getElementById()document.querySelector() là các hàm phổ biến để chọn các nút DOM.
  • Việc gán thuộc tính innerHTML thành một giá trị mới sẽ chạy chuỗi thông qua HTML parser, cung cấp một cách dễ dàng để nối nội dung HTML động vào một nút.
Avatar Techmely Team
VIẾT BỞI

Techmely Team