前端面试题六

net
154 阅读22分钟

能不能说说vue中的 computed 属性为什么能够在依赖改变的时候，自己发生变化？

在 Vue 中，computed 是一种计算属性，它可以根据依赖的数据动态地计算出一个新的值。当依赖的数据发生变化时，computed 会自动重新计算，并返回更新后的值。这种自动响应变化的特性得益于 Vue 的响应式系统。

Vue 的响应式系统基于数据的依赖追踪。当一个计算属性（如 computed）使用了其他响应式数据（如 data 或其他 computed）时，Vue 会自动建立起这个计算属性与其依赖之间的联系。当依赖发生变化时，Vue 会自动触发计算属性的重新计算。

下面是计算属性的工作原理简要说明：

  1. 初始计算：当组件加载时，Vue 会计算所有的计算属性，并将它们的值缓存起来。

  2. 依赖追踪：Vue 在计算属性的 getter 中建立与依赖数据的关联。这样，当依赖的数据发生变化时，Vue 就能知道哪些计算属性依赖于这个数据。

  3. 依赖变化：当某个依赖数据发生变化时，Vue 会触发一个依赖更新的过程。在这个过程中，Vue 会通知所有依赖这个数据的计算属性进行重新计算。

  4. 重新计算：当计算属性被重新计算时，Vue 会检查它依赖的数据是否发生变化。如果依赖数据没有变化，Vue 会直接返回缓存的计算结果，避免不必要的计算开销。如果依赖数据发生了变化，Vue 会重新计算计算属性的值，并更新缓存。

通过这种依赖追踪和自动更新的机制，Vue 中的计算属性（computed）能够在依赖改变时自动发生变化，确保计算属性的值始终与依赖数据保持同步。这使得开发者可以方便地编写和使用具有自动响应特性的计算属性，提高了代码的可读性和维护性。

webpack 中的loader 和 plugin 分别是什么？有什么区别呢？

在 Webpack 中，loader 和 plugin 是两个核心概念，用于处理不同的任务和功能：

  1. Loader（加载器）：

    • Loader 是用于对模块源代码进行转换的工具。
    • Loader 可以将非 JavaScript 资源（如 CSS、图片、字体等）转换为 JavaScript 可以处理的模块。
    • Loader 是一个函数或者函数组合，在 Webpack 的配置中定义了模块转换的规则。
    • 每个 Loader 只负责单一的转换任务，多个 Loader 可以串行使用，将资源从一个 Loader 传递给下一个 Loader 进行处理。

  2. Plugin（插件）：

    • Plugin 是用于扩展 Webpack 功能的插件机制。
    • Plugin 可以在构建过程的特定时机执行自定义的逻辑，例如优化输出、资源管理、注入环境变量等。
    • Plugin 是一个包含 apply 方法的 JavaScript 对象，通过在 Webpack 配置中引入并实例化来使用。
    • Plugin 可以监听 Webpack 构建过程中的事件，并在特定事件发生时执行相应的操作。

区别：

  • Loader 主要用于转换模块的源代码，将非 JavaScript 资源转换为 JavaScript 可以处理的模块。它们作用于每个模块的加载过程，按照配置的规则将模块源代码转换成新的模块代码。
  • Plugin 主要用于扩展 Webpack 的功能，执行一些额外的构建任务和操作。它们通过监听 Webpack 构建过程中的事件，通过自定义逻辑对构建过程进行干预和定制。

在使用 Webpack 时，可以通过配置不同的 Loader 和 Plugin 来实现对不同类型资源的处理、优化构建结果、自定义打包流程等。Loader 和 Plugin 的组合使用可以满足不同的开发需求，并且可以通过社区提供的丰富 Loader 和 Plugin 生态来扩展 Webpack 的功能和能力。

怎么学习前端知识呢

学习前端知识可以按照以下步骤进行：

  1. 建立基础：

    • 开始学习前端之前，确保你已经掌握了基本的 HTML、CSS 和 JavaScript 的基础知识。
    • 学习 HTML 标签的使用、CSS 样式的应用和 JavaScript 的语法和基本概念。

  2. 学习核心技术：

    • 深入学习和掌握前端的核心技术，如 HTML5、CSS3 和 JavaScript 的高级特性。
    • 学习 HTML5 的语义化标签、表单验证、多媒体处理等；学习 CSS3 的动画、响应式设计、布局技巧等；学习 JavaScript 的面向对象编程、异步编程、模块化开发等。

  3. 掌握前端框架和工具：

    • 学习并熟悉流行的前端框架，如 Vue.js、React、Angular 等，了解它们的特性和用法。
    • 学习使用前端工具，如 Webpack、Babel、ESLint 等，以提高开发效率和代码质量。

  4. 实践项目：

    • 通过实际的项目实践来巩固所学的知识。
    • 可以从小型项目开始，逐渐扩大项目的规模和复杂度，锻炼解决问题和项目开发的能力。

  5. 持续学习和实践：

    • 前端技术不断发展，保持学习的状态非常重要。
    • 持续关注前端领域的最新技术和趋势，学习新的工具和框架，参与开源项目或社区讨论，与其他开发者交流和分享经验。

  6. 多阅读文档和教程：

    • 学习前端知识需要阅读相关的文档和教程，理解官方文档和教程中的示例和案例。
    • 可以阅读相关书籍、博客、技术文章，关注优秀的前端技术网站和社区。

  7. 参与实际项目和团队：

    • 加入实际项目或工作团队，与其他开发者合作，学习和积累实际开发经验。
    • 在实践中遇到问题时，善于查找文档、搜索引擎和技术社区中的解决方案。

  8. 不断反思和总结：

    • 学习前端是一个持续的过程，不断反思和总结自己的学习进度和方式。
    • 定期回顾和巩固已学的知识，及时补充和强化基础知识。
    • 通过编写博客或教学笔记来整理和总结学习过程中的知识点和经验。
    • 参与技术讨论和分享，与其他开发者交流，互相学习和启发。

  9. 探索更广泛的前端领域：

    • 前端领域非常广泛，涉及到不仅仅是网页开发，还有移动端开发、桌面应用、游戏开发等领域。
    • 如果感兴趣，可以进一步探索和学习其他前端领域的知识和技术，扩展自己的技术视野。

  10. 坚持学习和实践：

  • 学习前端是一个不断迭代和更新的过程，需要保持持续的学习和实践。
  • 遇到困难和挑战时不要轻易放弃，通过坚持学习和解决问题来不断提高自己的技能和能力。

重要的是要持续学习、勇于实践，并且保持对前端技术的热情和好奇心。前端领域发展迅速，保持对新技术的关注并不断更新自己的知识和技能是非常重要的。

cache-control 有哪些字段？

Cache-Control 是 HTTP 头部字段，用于控制缓存的行为。下面是常用的 Cache-Control 字段：

  1. public：表示响应可以被任何缓存（包括客户端和代理服务器）缓存。

  2. private：表示响应只能被客户端缓存，不允许代理服务器缓存。

  3. no-cache：表示客户端可以缓存响应，但在使用缓存副本之前必须先向服务器发送请求进行验证。即使验证后缓存仍然有效，也必须发送请求进行重新验证。

  4. no-store：表示响应不允许被缓存，每次请求都必须向服务器发送请求获取最新的响应。

  5. max-age：指定响应的最大有效时间（以秒为单位），超过该时间后缓存将被认为过期。

  6. s-maxage：类似于 max-age，但仅适用于共享缓存（如代理服务器），而不适用于个人缓存（如浏览器缓存）。

  7. must-revalidate：表示在缓存过期后，必须向服务器发送请求进行重新验证，以确定缓存副本是否仍然有效。

  8. proxy-revalidate：类似于 must-revalidate，但仅适用于代理服务器。

  9. no-transform：表示不允许代理服务器修改响应的内容，例如不允许压缩或修改文件格式。

  10. stale-while-revalidate：表示在缓存过期后，在重新验证缓存之前，仍然可以向客户端提供过期的响应。

这些字段可以单独使用，也可以组合使用来控制缓存的行为。通过在 HTTP 响应头部中设置适当的 Cache-Control 字段，可以控制缓存的存储、有效期和重新验证等行为，以优化网络性能和用户体验。

能不能说说 Cookie 有哪些字段？

Cookie 是在 HTTP 协议中用于在客户端和服务器之间传递数据的一种机制。下面是 Cookie 中常见的字段：

  1. Name（名称）：Cookie 的名称，用于标识和识别不同的 Cookie。

  2. Value（值）：Cookie 的值，存储在客户端的数据内容。

  3. Domain（域）：指定 Cookie 可以发送到哪个域名下的服务器。默认情况下，Cookie 的域值是设置 Cookie 的服务器的域名。

  4. Path（路径）：指定 Cookie 可以发送到哪个路径下的服务器。默认情况下，Cookie 的路径值是设置 Cookie 的页面路径。

  5. Expires（过期时间）：指定 Cookie 的过期时间，即 Cookie 失效的时间点。过期时间以 GMT 格式的日期字符串表示。

  6. Max-Age（最大有效期）：指定 Cookie 的最大有效期（单位：秒），从设置 Cookie 开始计算。设置了 Max-Age 后，Expires 字段将被忽略。

  7. Secure（安全标志）：标志是否仅通过 HTTPS 连接发送 Cookie。

  8. HttpOnly（仅限 HTTP）：设置该属性后，JavaScript 将无法读取或修改 Cookie，只能在 HTTP 请求中传递给服务器。

这些字段通过在 HTTP 响应头部中的 Set-Cookie 字段进行设置，并在后续的请求中通过 Cookie 字段进行传递。Cookie 可以用于在客户端和服务器之间保持会话状态、存储用户偏好设置等。

需要注意的是，Cookie 是以明文形式传递的，可能会存在安全风险。因此，在处理敏感数据时，应采用适当的加密和安全机制，或者考虑使用更安全的替代方案，如使用 HTTP-only 和 Secure 标志，使用加密协议等。

说说箭头函数和普通函数的区别？

箭头函数（Arrow Function）和普通函数（Regular Function）在 JavaScript 中有以下几个区别：

  1. 语法形式：

    • 箭头函数使用箭头（=>）来定义函数，具有简洁的语法形式。
    • 普通函数使用关键字 function 来定义函数。

  2. this 绑定：

    • 箭头函数没有自己的 this 绑定，它继承外层作用域的 this 值。这意味着在箭头函数中，this 的值是在定义函数时确定的，而不是在函数执行时确定的。
    • 普通函数的 this 值是在函数调用时动态确定的，根据调用方式和上下文而定。

  3. arguments 对象：

    • 箭头函数没有自己的 arguments 对象，因此无法直接访问传递给函数的参数。
    • 普通函数有自己的 arguments 对象，可以通过 arguments 访问传递给函数的参数。

  4. 构造函数：

    • 箭头函数不能用作构造函数，不能使用 new 关键字实例化。
    • 普通函数可以用作构造函数，通过 new 关键字实例化一个对象。

  5. 函数体内的 this、arguments、super 和 new.target：

    • 箭头函数没有自己的 this、arguments、super 和 new.target 绑定，它们会继承外层作用域中对应的值。
    • 普通函数有自己的 this、arguments、super 和 new.target 绑定。

需要注意的是，箭头函数和普通函数在某些场景下具有不同的行为，特别是在涉及到 this 的使用时。因此，在选择使用箭头函数还是普通函数时，需要考虑到具体的需求和语境。

flutter是做什么呢？

Flutter 是一种开源的跨平台移动应用开发框架，由 Google 开发和维护。它可以用于快速构建高性能、美观的移动应用程序，可以同时在 iOS、Android、Web、桌面等多个平台上运行。

Flutter 使用 Dart 作为开发语言，提供了丰富的 UI 组件和开发工具，使开发者能够以声明式的方式构建用户界面，并通过热重载功能进行快速迭代和实时预览。Flutter 还具备高度的定制化能力，开发者可以根据自己的需求进行 UI 的定制和扩展。

Flutter 的特点和优势包括：

  1. 跨平台：Flutter 可以同时构建 iOS、Android、Web 和桌面应用，通过一套代码实现多个平台的开发和发布，减少了开发和维护的工作量。

  2. 快速开发：Flutter 提供了丰富的 UI 组件和开发工具，使开发者能够以快速、高效的方式构建应用程序，并通过热重载功能实时查看代码更改的效果。

  3. 高性能：Flutter 使用自绘引擎，能够直接绘制应用程序的 UI，无需依赖平台的原生控件，提供了快速、流畅的用户体验。

  4. 强大的定制化能力：Flutter 具有丰富的 UI 定制化能力，开发者可以根据自己的需求自由定制和扩展应用程序的外观和交互。

  5. 丰富的生态系统：Flutter 拥有活跃的开发者社区和丰富的第三方库，提供了大量的资源和工具，帮助开发者解决问题、提高开发效率。

总之，Flutter 是一种强大的移动应用开发框架，通过它可以高效地构建跨平台的移动应用程序，具备快速开发、高性能和丰富的定制化能力等优势。

serverless 是干什么的呢

Serverless 是一种计算模型和云计算架构，它旨在简化应用程序的开发和部署，使开发者能够专注于编写业务逻辑而无需管理底层的服务器基础设施。

传统的应用开发和部署通常需要开发者自行管理服务器的配置、扩展性和可用性等方面的问题。而在 Serverless 架构中，开发者无需关心服务器的管理和维护，而是将精力集中在编写函数或业务逻辑上。

Serverless 的核心思想是将应用程序拆分为小型的独立函数，每个函数执行特定的任务或处理请求。这些函数以事件驱动的方式运行，根据需要自动触发和扩展，而无需预先配置和维护服务器。

Serverless 的优势包括：

  1. 无服务器管理：开发者无需关心服务器的配置、扩展和维护，由云服务提供商负责管理基础设施，包括服务器的配置、自动扩展和监控等。

  2. 弹性伸缩：Serverless 平台根据请求的负载自动扩展或收缩资源，确保应用程序始终具有高可用性和弹性。

  3. 按需付费：以函数的执行时间和资源消耗为基础进行计费，避免了长时间闲置的资源浪费，以及预先配置和维护服务器的成本。

  4. 快速迭代：开发者可以快速迭代和部署函数，以及对函数进行单独的测试和调试，提高开发效率和灵活性。

Serverless 并不意味着没有服务器，而是将服务器的管理交给云服务提供商，并通过函数计算的方式提供一种更简化、高效和成本优化的应用开发和部署方式。常见的 Serverless 平台包括 AWS Lambda、Azure Functions 和 Google Cloud Functions 等。

WebAssembly 是干什么的呢

WebAssembly（简称为Wasm）是一种用于在Web浏览器中运行高性能代码的二进制格式。它是一种可移植、可扩展的虚拟机技术，可以在Web环境中执行其他语言（如C、C++、Rust等）编写的代码。

WebAssembly 的主要目标是提供一种比JavaScript更高效的执行环境，以便在Web应用程序中运行计算密集型任务，同时保持与Web平台的兼容性。

WebAssembly 的特点和优势包括：

  1. 高性能：WebAssembly 的二进制格式能够在现代浏览器中以接近原生代码的速度执行，提供了比传统的JavaScript执行更高的性能。

  2. 安全性：WebAssembly 运行在沙箱环境中，能够提供更好的安全性，防止恶意代码对浏览器和用户设备的攻击。

  3. 跨平台：WebAssembly 可以在不同的操作系统和硬件平台上运行，使开发人员能够以一种统一的方式构建跨平台的应用程序。

  4. 生态系统：WebAssembly 有一个庞大的开发者社区和丰富的生态系统，提供了许多开源工具和库，方便开发者进行开发和集成。

  5. Web集成：WebAssembly 与现有的Web技术（如JavaScript、HTML和CSS）无缝集成，可以与现有的Web应用程序进行交互和共享数据。

WebAssembly 可以用于各种应用场景，包括游戏开发、图像和音视频处理、科学计算、虚拟化等。它为Web开发者提供了更多的选择和灵活性，使得他们能够利用其他语言和库的优势来构建更强大和高性能的Web应用程序。

前端中PWA是什么做什么用的呢

PWA（Progressive Web App）是一种使用现代 Web 技术构建的具备应用程序类似功能的 Web 应用。PWA 的目标是提供类似原生应用的用户体验，可以在各种平台上访问，并且具有可靠性、快速加载和离线访问等特性。

PWA 的主要特点和用途包括：

  1. 可靠性：PWA 应用具有快速响应和稳定性，能够在不稳定的网络环境下正常工作。

  2. 快速加载：PWA 应用采用了一系列优化策略，包括缓存资源、延迟加载等，以提供快速的加载速度，减少用户等待时间。

  3. 离线访问：PWA 应用可以通过使用 Service Worker 技术在离线状态下提供基本功能，使得用户可以在断网或网络较差的情况下继续使用应用。

  4. 推送通知：PWA 应用可以使用浏览器的推送通知功能，向用户发送及时的通知和消息。

  5. 安装性：PWA 应用可以通过添加到主屏幕或任务栏等方式，以类似原生应用的方式呈现给用户，让用户更容易访问应用。

  6. 跨平台：PWA 应用可以在不同的平台和设备上运行，无需针对特定平台进行开发和适配。

通过使用 PWA 技术，开发者可以将 Web 应用的用户体验提升到与原生应用相当的水平，同时减少了开发和维护成本，提高了应用的可访问性和可用性。PWA 技术的广泛应用使得用户可以更方便地访问和使用Web应用，无需下载和安装应用，同时提供了更好的性能和体验。

你觉得前端工程化的理解是怎样的？可以从从代码的角度，编译、压缩、规范，从人的角度，团队协作、统一产出标准等说说

前端工程化是指通过一系列工具、流程和最佳实践，对前端项目进行规范化、自动化和可持续化的管理和开发。它涉及到多个层面，从代码的角度，到团队协作和项目交付的流程。

从代码的角度，前端工程化包括以下方面：

  1. 代码规范：制定和遵循统一的代码规范，以保证团队成员的代码风格一致，提高代码的可读性和可维护性。

  2. 模块化开发：使用模块化的开发方式，将代码划分为小而独立的模块，以便于管理和复用，提高开发效率。

  3. 构建工具：使用构建工具（如Webpack、Parcel、Rollup等），自动化完成编译、打包、压缩和优化等任务，提高开发效率和项目性能。

  4. 自动化测试：采用自动化测试工具和框架，编写单元测试、集成测试和端到端测试，确保代码质量和功能的稳定性。

  5. 版本控制：使用版本控制系统（如Git），管理代码的版本和变更，方便团队协作和版本回溯。

从人的角度，前端工程化包括以下方面：

  1. 团队协作：制定良好的团队协作流程和规范，包括代码的提交、审核、分支管理等，提高团队的协作效率和代码质量。

  2. 持续集成和部署：采用持续集成和持续部署的流程，将代码的集成、构建和部署自动化，减少人工操作和人为错误。

  3. 文档和知识分享：编写项目文档、API 文档和技术文档，方便团队成员之间的沟通和知识共享，提高项目的可维护性。

  4. 统一产出标准：制定项目产出的规范和标准，包括代码的目录结构、命名规范、文档格式等，保证项目的一致性和可维护性。

通过前端工程化的实践，可以提高前端开发的效率和质量，降低项目的维护成本，使团队成员能够更好地协作、交付高质量的项目。它不仅仅关注代码本身，还关注整个开发流程和团队的协作方式，提升了整个前端项目的工程化水平。

html中的Element 和 Node 的区别是什么

在 HTML 中，Element 和 Node 是两个相关的概念，具有以下区别：

  1. Element（元素）：Element 是 HTML 文档中的标签（如 <div>, <p>, <a> 等），表示页面中的具体元素。每个 Element 可以包含其他 Element，形成一个树状结构，也称为 DOM（Document Object Model）树。

  2. Node（节点）：Node 是 DOM 树中的基本单位，表示文档中的任何一个部分，包括 Element、文本、注释等。Element 是 Node 的一种特殊类型，也可以说 Element 是 Node 的子类。

  3. 包含关系：Element 可以包含其他 Element、文本、注释等不同类型的节点。Node 表示 DOM 树中的一个节点，可以是 Element，也可以是其他类型的节点。

  4. 属性和方法：Element 和 Node 都有一些共同的属性和方法。例如，它们都有 nodeName 属性表示节点的名称，nodeType 属性表示节点的类型，以及 appendChild()、removeChild() 等方法用于操作节点。

总结起来，Element 是 Node 的一种特殊类型，表示 HTML 文档中的具体元素，而 Node 表示 DOM 树中的一个节点，可以是 Element 或其他类型的节点。Element 是 Node 的一种，Node 是更广泛的概念，用于表示 DOM 树中的各个部分。

fetch 和 xhr 有什么区别？

Fetch 和 XMLHttpRequest (XHR) 是用于在 JavaScript 中发起网络请求的两种不同的技术。它们之间有以下几个区别：

  1. API 设计和语法：Fetch 使用了 Promise 和基于链式调用的 API 设计，提供了更简洁、现代化的语法，使请求和响应的处理更加直观和易于理解。而 XHR 使用了传统的回调函数方式进行异步处理。

  2. 请求和响应对象：Fetch 使用了 Request 和 Response 对象，可以更灵活地创建和处理请求和响应。XHR 使用一个包含多个属性和方法的单一对象来处理请求和响应。

  3. 跨域请求：XHR 对跨域请求的处理需要通过设置额外的标志（如设置 Access-Control-Allow-Origin）来进行配置。Fetch 则更加简化了跨域请求的处理，使用了基于 CORS（Cross-Origin Resource Sharing）的标准机制，对跨域请求提供了更直接和便捷的支持。

  4. 请求的中止：Fetch 提供了 AbortController 和 AbortSignal 接口，使得可以更方便地取消或中止请求。XHR 中止请求的处理需要通过调用 abort() 方法来实现。

  5. 兼容性：XHR 具有更广泛的浏览器支持，包括旧版本的浏览器。而 Fetch API 的支持较新，需要考虑浏览器的兼容性。

需要注意的是，Fetch 和 XHR 在网络请求方面的基本功能是类似的，它们都可以发起 HTTP 请求、处理请求头和响应体等。选择使用哪种技术取决于具体的需求、项目要求和目标浏览器的支持情况。

avatar
文章
阅读
粉丝