初級水平

1. 問題：什麼是 CSS 網(wǎng)格？ 答案： CSS 網(wǎng)格是一個佈局系統(tǒng)，可讓您在網(wǎng)路上建立二維佈局。它將頁面分為行和列，從而更容易定位元素。例如：

   .grid-container {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       grid-gap: 10px;
   }

1. 問題：什麼是「DOMContentLoaded」事件？ 答案： 當初始 HTML 文件完全載入和解析後，將觸發(fā) DOMContentLoaded 事件，無需等待樣式表、圖像和子框架完成載入。一旦 DOM 準備好，它對於運行腳本很有用：

   document.addEventListener("DOMContentLoaded", function() {
       console.log("DOM completamente carregado e analisado");
   });

1. 問題： CSS 中的「z-index」屬性是什麼？ 答案： z-index 屬性控制元素的堆疊順序。 z-index 較高的元素顯示在 z-index 較低的元素前面。例如：

   .box1 {
       position: relative;
       z-index: 1;
   }
   .box2 {
       position: relative;
       z-index: 2; /* box2 será exibido na frente de box1 */
   }

1. 問題： JavaScript 中的「this」是什麼？ 答案： JavaScript 中的 this 指的是目前執(zhí)行上下文。該值可以根據(jù)函數(shù)的呼叫方式而變化。例如：

   const obj = {
       name: "John",
       greet: function() {
           console.log("Hello, " + this.name);
       }
   };
   obj.greet(); // "Hello, John"

1. 問題：什麼是 CSS 選擇器？ 答案： CSS 選擇器是用來選擇要設(shè)定樣式的元素的模式。選擇器有多種類型，例如類別、ID 和類型選擇器。例如：

   .className { /* Seleciona todos os elementos com a classe "className" */
       color: blue;
   }
   #idName { /* Seleciona o elemento com o ID "idName" */
       font-size: 20px;
   }

1. 問題： JavaScript 中的「localStorage」是什麼？ 答案： localStorage 是一個 API，可讓您在使用者的瀏覽器中持久儲存資料。儲存在 localStorage 中的資料不會過期，即使關(guān)閉瀏覽器後仍會保留。例如：

   localStorage.setItem("key", "value");
   const value = localStorage.getItem("key"); // "value"

1. 問題：什麼是「事件冒泡」？
   
   答案： 「事件冒泡」是一種事件傳播機制，其中事件從最內(nèi)層元素開始並傳播到外層元素。例如，如果

   內(nèi)的按鈕按一下時，將首先在按鈕上觸發(fā)按一下事件，然後在

   上觸發(fā)。

2. 問題：什麼是「回呼函數(shù)」？
   
   答案： 「回呼函數(shù)」是作為參數(shù)傳遞給另一個函數(shù)的函數(shù)，可以在以後呼叫。例如：
   

   .grid-container {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       grid-gap: 10px;
   }

1. 問題：什麼是「響應(yīng)式設(shè)計」？ 答案：「響應(yīng)式設(shè)計」是一種網(wǎng)頁設(shè)計方法，旨在建立適應(yīng)不同螢?zāi)怀叽绾脱b置的頁面。這通常是使用 CSS 中的媒體查詢來實現(xiàn)的。例如：

   document.addEventListener("DOMContentLoaded", function() {
       console.log("DOM completamente carregado e analisado");
   });

1. 問題：什麼是「fetch API」？
   
   答案： fetch API 是一個用於在 JavaScript 中發(fā)出 HTTP 請求的現(xiàn)代介面。它會傳回一個解決請求回應(yīng)的 Promise。例如：
   

      .box1 {
          position: relative;
          z-index: 1;
      }
      .box2 {
          position: relative;
          z-index: 2; /* box2 será exibido na frente de box1 */
      }
   

滿級

1. 問題：什麼是「CORS」？
   
   答案： CORS（跨來源資源共享）是一種安全機制，允許從與提供該頁面的網(wǎng)域不同的網(wǎng)域請求網(wǎng)頁上的受限資源。這對於保護用戶資料非常重要。

2. 問題：React 中的「虛擬 DOM」是什麼？
   
   答案：「虛擬 DOM」是真實 DOM 的輕量級表示。 React 使用虛擬 DOM 來優(yōu)化 DOM 更新，透過將虛擬 DOM 與真實 DOM 進行比較並僅套用必要的更改，使其能夠更有效地進行更改。

3. 問題：React 中的「props」是什麼？
   
   答案： 「Props」是 React 中元件之間傳遞資料的一種機制。它們允許您將資料從父元件傳遞到子元件。例如：
   

      const obj = {
          name: "John",
          greet: function() {
              console.log("Hello, " + this.name);
          }
      };
      obj.greet(); // "Hello, John"
   

4. 問題：React 中的「狀態(tài)」是什麼？
   
   答案：「狀態(tài)」是一個對象，代表應(yīng)用程式中可以更改的部分。它用於儲存影響組件渲染的資料。例如：
   

      .className { /* Seleciona todos os elementos com a classe "className" */
          color: blue;
      }
      #idName { /* Seleciona o elemento com o ID "idName" */
          font-size: 20px;
      }
   

5. 問題：什麼是「React Router」？
   
   答案： React Router 是一個函式庫，允許在 React 應(yīng)用程式中的不同元件之間進行導(dǎo)航，從而促進單頁應(yīng)用程式（SPA）的建立。它允許你定義路由並基於 URL 渲染元件。

6. 問題：React 中的「hooks」是什麼？
   
   答案： Hooks 是允許您在功能元件中使用狀態(tài)和其他 React 資源的函數(shù)。 useState 和 useEffect 是鉤子的範例。例如：
   

      .grid-container {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          grid-gap: 10px;
      }
   

7. 問題：什麼是「Webpack」？
   
   答案： Webpack 是 JavaScript 應(yīng)用程式的模組包裝器。它允許您將 JavaScript、CSS 和其他資源檔案捆綁到單一檔案或多個生產(chǎn)優(yōu)化檔案中。

8. 問題：什麼是「Babel」？
   
   答案： Babel 是一個轉(zhuǎn)譯器，可讓您編寫現(xiàn)代 JavaScript 程式碼 (ES6) 並將其轉(zhuǎn)換為與舊瀏覽器相容的版本。它經(jīng)常與Webpack結(jié)合使用。

9. 問題：什麼是「SASS」？
   
   答案： SASS（Syntropically Awesome Style Sheets）是一個 CSS 預(yù)處理器，可讓您使用變數(shù)、巢狀和函數(shù)，使 CSS 更加動態(tài)且更易於維護。例如：
   

      document.addEventListener("DOMContentLoaded", function() {
          console.log("DOM completamente carregado e analisado");
      });
   

10. 問題：什麼是「AJAX」？
    
    答案： AJAX（非同步 JavaScript 和 XML）是一種允許您向伺服器發(fā)出非同步請求而無需重新載入頁面的技術(shù)。這通常用於動態(tài)更新網(wǎng)頁的某些部分。

高階等級

1. 問題：什麼是「微服務(wù)架構(gòu)」？
   
   答案： 微服務(wù)架構(gòu)是一種架構(gòu)風格，它將應(yīng)用程式建構(gòu)成一組相互通訊的小型獨立服務(wù)。這使得不同的團隊能夠更有效地處理應(yīng)用程式的不同部分。

2. 問題：什麼是「SSR」（伺服器端渲染）？
   
   答案： SSR 是一種在伺服器而不是客戶端上完成 Web 應(yīng)用程式渲染的技術(shù)。這可以提高效能和 SEO，因為內(nèi)容會傳送到已經(jīng)呈現(xiàn)的客戶端。

3. 問題：什麼是「CSR」（客戶端渲染）？
   
   答案： CSR 是一種在客戶端上完成 Web 應(yīng)用程式渲染的技術(shù)，通常使用 JavaScript。這可以提供更具互動性的用戶體驗，但如果實施不當，可能會對 SEO 產(chǎn)生負面影響。

4. 問題：什麼是「Redux Saga」？
   
   答案： Redux Saga 是一個有助於管理 Redux 應(yīng)用程式中副作用的函式庫。它使用生成器以更具可讀性和組織性的方式處理 API 呼叫等非同步操作。

5. 問題：React 中的「Context API」是什麼？
   
   答案： Context API 是一種透過元件樹傳遞資料的方法，而無需在每個層級手動傳遞 props。這對於共享主題或用戶資訊等全域資料非常有用。

6. 問題：什麼是「TypeScript」？
   
   答案： TypeScript 是 JavaScript 的超集，它為程式碼新增了靜態(tài)類型。它允許您定義變數(shù)、函數(shù)和物件的類型，有助於避免執(zhí)行時間錯誤。

7. 問題：什麼是「漸進式 Web 應(yīng)用程式」(PWA)？
   
   答案： PWA 是提供類似本機應(yīng)用程式體驗的 Web 應(yīng)用程序，包括離線支援、推播通知和主螢?zāi)话惭b。它們是使用標準網(wǎng)路技術(shù)建構(gòu)的。

8. 問題：什麼是「GraphQL」？
   
   答案： GraphQL 是一種 API 查詢語言，允許客戶端準確地要求他們需要的資料。這與 REST API 形成鮮明對比，在 REST API 中，客戶端可能會收到超出必要數(shù)量的資料。

9. 問題：什麼是「網(wǎng)頁輔助功能」？
   
   答案： Web 可訪問性是指使 Web 應(yīng)用程式可供殘障人士使用的做法。這包括使用語義標籤、ARIA 屬性以及確保內(nèi)容可透過鍵盤導(dǎo)航。

10. 問題：什麼是「Service Worker」？
    
    答案： Service Worker 是瀏覽器在後臺運行的腳本，與網(wǎng)頁分開，支援快取、推播通知和後臺同步等功能。它對於建立 PWA 至關(guān)重要。

參考書目

所提供的資訊是從多個可靠來源提取和改編的，包括：

1. Glassdoor - 人們分享面試經(jīng)驗和常見問題的網(wǎng)站。

   • 玻璃門

2. MDN Web 文件 - 有關(guān) HTML、CSS 和 JavaScript 的綜合文件。

   • MDN 網(wǎng)路文件

3. JavaScript.info - JavaScript 的現(xiàn)代指南，涵蓋從基礎(chǔ)知識到高級主題的所有內(nèi)容。

   • JavaScript.info

4. React Documentation - React 官方文檔，提供有關(guān)庫的詳細資訊。

   • React 文件

5. CSS-Tricks - 提供有關(guān) CSS 和前端開發(fā)的提示和教學的網(wǎng)站。

   • CSS 技巧

這些資源在 Web 開發(fā)社群中得到了廣泛認可，是深化前端知識的重要資源。