前端概念 II

初级水平

1. 问题：什么是 CSS 网格？ 答案： CSS 网格是一个布局系统，允许您在网络上创建二维布局。它将页面分为行和列，从而更容易定位元素。例如：

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

1. 问题：什么是“DOMContentLoaded”事件？ 答案： 当初始 HTML 文档完全加载和解析后，将触发 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 指的是当前执行上下文。该值可以根据函数的调用方式而变化。例如：

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

1. 问题：什么是 CSS 选择器？ 答案： CSS 选择器是用于选择要设置样式的元素的模式。选择器有多种类型，例如类、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 中的数据不会过期，即使关闭浏览器后仍会保留。例如：

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

1. 问题：什么是“事件冒泡”？
   
   答案： “事件冒泡”是一种事件传播机制，其中事件从最内层元素开始并传播到外层元素。例如，如果

   内的按钮单击时，将首先在按钮上触发单击事件，然后在

   上触发。

2. 问题：什么是“回调函数”？
   
   答案： “回调函数”是作为参数传递给另一个函数的函数，可以在以后调用。例如：
   

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

1. 问题：什么是“响应式设计”？ 答案：“响应式设计”是一种网页设计方法，旨在创建适应不同屏幕尺寸和设备的页面。这通常是使用 CSS 中的媒体查询来实现的。例如：

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

1. 问题：什么是“fetch API”？
   
   答案： fetch API 是一个用于在 JavaScript 中发出 HTTP 请求的现代接口。它返回一个解决请求响应的 Promise。例如：
   

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

满级

1. 问题：什么是“CORS”？
   
   答案： CORS（跨源资源共享）是一种安全机制，允许从与提供该页面的域不同的域请求网页上的受限资源。这对于保护用户数据非常重要。

2. 问题：React 中的“虚拟 DOM”是什么？
   
   答案：“虚拟 DOM”是真实 DOM 的轻量级表示。 React 使用虚拟 DOM 来优化 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 中的“状态”是什么？
   
   答案：“状态”是一个对象，代表应用程序中可以更改的部分。它用于存储影响组件渲染的数据。例如：
   

      .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 应用程序中的不同组件之间进行导航，从而促进单页应用程序（SPA）的创建。它允许你定义路由并基于 URL 渲染组件。

6. 问题：React 中的“hooks”是什么？
   
   答案： Hooks 是允许您在功能组件中使用状态和其他 React 资源的函数。 useState 和 useEffect 是钩子的示例。例如：
   

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

7. 问题：什么是“Webpack”？
   
   答案： Webpack 是 JavaScript 应用程序的模块包装器。它允许您将 JavaScript、CSS 和其他资源文件捆绑到单个文件或多个生产优化文件中。

8. 问题：什么是“Babel”？
   
   答案： Babel 是一个转译器，允许您编写现代 JavaScript 代码 (ES6) 并将其转换为与旧浏览器兼容的版本。它经常与Webpack结合使用。

9. 问题：什么是“SASS”？
   
   答案： SASS（Syntropically Awesome Style Sheets）是一个 CSS 预处理器，允许您使用变量、嵌套和函数，使 CSS 更加动态且更易于维护。例如：
   

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

10. 问题：什么是“AJAX”？
    
    答案： AJAX（异步 JavaScript 和 XML）是一种允许您向服务器发出异步请求而无需重新加载页面的技术。这通常用于动态更新网页的某些部分。

高级级别

1. 问题：什么是“微服务架构”？
   
   答案： 微服务架构是一种架构风格，它将应用程序构建为一组相互通信的小型独立服务。这使得不同的团队能够更有效地处理应用程序的不同部分。

2. 问题：什么是“SSR”（服务器端渲染）？
   
   答案： SSR 是一种在服务器而不是客户端上完成 Web 应用程序渲染的技术。这可以提高性能和 SEO，因为内容发送到已经呈现的客户端。

3. 问题：什么是“CSR”（客户端渲染）？
   
   答案： CSR 是一种在客户端上完成 Web 应用程序渲染的技术，通常使用 JavaScript。这可以提供更具交互性的用户体验，但如果实施不当，可能会对 SEO 产生负面影响。

4. 问题：什么是“Redux Saga”？
   
   答案： Redux Saga 是一个有助于管理 Redux 应用程序中副作用的库。它使用生成器以更具可读性和组织性的方式处理 API 调用等异步操作。

5. 问题：React 中的“Context API”是什么？
   
   答案： Context API 是一种通过组件树传递数据的方法，而无需在每个级别手动传递 props。这对于共享主题或用户信息等全局数据非常有用。

6. 问题：什么是“TypeScript”？
   
   答案： TypeScript 是 JavaScript 的超集，它为代码添加了静态类型。它允许您定义变量、函数和对象的类型，有助于避免运行时错误。

7. 问题：什么是“渐进式 Web 应用程序”(PWA)？
   
   答案： PWA 是提供类似本机应用程序体验的 Web 应用程序，包括离线支持、推送通知和主屏幕安装。它们是使用标准网络技术构建的。

8. 问题：什么是“GraphQL”？
   
   答案： GraphQL 是一种 API 查询语言，允许客户端准确请求他们需要的数据。这与 REST API 形成鲜明对比，在 REST API 中，客户端可能会收到超出必要数量的数据。

9. 问题：什么是“网页辅助功能”？
   
   答案： Web 可访问性是指使 Web 应用程序可供残障人士使用的做法。这包括使用语义标签、ARIA 属性以及确保内容可通过键盘导航。

10. 问题：什么是“Service Worker”？
    
    答案： Service Worker 是浏​​览器在后台运行的脚本，与网页分开，支持缓存、推送通知和后台同步等功能。它对于构建 PWA 至关重要。

参考书目

所提供的信息是从多个可靠来源提取和改编的，包括：

1. Glassdoor - 人们分享面试经验和常见问题的网站。

   • 玻璃门

2. MDN Web 文档 - 有关 HTML、CSS 和 JavaScript 的综合文档。

   • MDN 网络文档

3. JavaScript.info - JavaScript 的现代指南，涵盖从基础知识到高级主题的所有内容。

   • JavaScript.info

4. React Documentation - React 官方文档，提供有关库的详细信息。

   • React 文档

5. CSS-Tricks - 提供有关 CSS 和前端开发的提示和教程的网站。

   • CSS 技巧

这些资源在 Web 开发社区中得到了广泛认可，是深化前端知识的重要资源。