web前端场景题面试（三）

你笑得很好看
159 阅读31分钟

继续更新啦，完结篇，希望以后都不用再更新面试题🙏🙏🙏

以下问题均为个人整理回答，码字不易，转发和发布请携带发布者
面试问题有误可联系修改

一、webpack打包时hash码如何生成的？

webpack打包时，hash码的生成是基于文件内容的哈希值。这个哈希值是通过对文件内容进行哈希运算（如MD4、SHA-1或MD5）得到的，确保文件内容的任何变化都会导致生成不同的哈希值。这样做的目的是确保每次文件内容有变动时，输出的文件名也会相应改变，从而强制浏览器重新下载更新的资源。webpack中常见的hash有hash、chunkhash和contenthash，它们分别用于不同的场景，以实现更精细的缓存控制和版本管理。‌

  1. ‌hash‌：基于所有chunk生成的hash值，任何chunk修改都会导致hash变化。
  2. ‌chunkhash‌：基于每个chunk内容生成的hash值，只有相关chunk修改时hash才会变化。
  3. ‌contenthash‌：基于文件内容生成的hash值，仅当文件内容变化时hash才会变化。

二、webpack项目中通过script标签引入资源，在项目中如何处理？

  1. 使用copy-webpack-plugin插件‌：将资源文件拷贝到项目的输出目录中，然后使用script标签引入。‌
  2. ‌动态加载script标签‌：在需要引入资源的模块或页面中，动态创建script标签并添加到DOM中。‌
  3. ‌配置webpack的output和publicPath‌：在webpack配置中指定打包后资源的输出路径和访问路径，然后在HTML文件中使用script标签引入。‌
  4. ‌使用html-webpack-plugin插件‌：该插件可以自动生成带有正确script标签的HTML文件。‌

三、为什么Vite速度比Webpack快？

  1. 利用ESM支持‌：Vite利用现代浏览器对ES Modules的原生支持，直接运行源代码，无需打包，启动速度快‌。
  2. ‌按需编译‌：Vite采用按需编译策略，只有当请求某个模块时，才会对该模块进行编译，缩减了编译时间‌。
  3. ‌底层语言差异‌：Vite使用Go语言编写的esbuild进行预构建依赖，比Webpack使用的Node.js快‌。
  4. ‌内存模块处理‌：Vite将模块处理放在内存中，消除了磁盘读写的开销，提高了速度‌。
  5. ‌HMR高效实现‌：Vite利用ES模块特性和内存模块处理，实现了高效的热模块替换机制‌。

四、vite和webpack在热更新上有什么区别？

  1. 实现机制‌：Vite利用现代浏览器支持的ES Module特性，通过WebSocket与浏览器建立连接，实现模块的热替换（HMR）。当模块内容改变时，Vite只需通知浏览器重新请求该模块即可。而Webpack则需要重新编译打包整个模块链，然后通过HMR机制将更新后的模块注入到应用程序中‌。‌
  2. 效率‌：由于Vite只处理变动的模块，无需重新编译和打包整个项目，因此其热更新速度更快，尤其在大型项目中表现更明显。而Webpack的热更新速度可能随着项目体积的增大而变慢‌。

五、webpack有哪些优化项目的手段？

  1. 代码分割与按需加载‌：通过配置Webpack的代码分割功能，将项目代码分割成多个块，并在需要时按需加载，减少初始加载的文件大小。‌
  2. ‌Tree Shaking‌：配置Webpack的Tree Shaking功能，只保留项目中实际使用到的代码，剔除未使用的代码，以减少打包后的文件大小。‌
  3. ‌缓存机制‌：使用Webpack的缓存功能，使得构建过程中只重新构建发生更改的部分，而不是每次都重新构建整个项目。‌
  4. ‌多线程构建‌：使用如thread-loader等插件，将任务分发给多个子进程并行处理，提高构建速度。‌

六、webpack如何打包运行时chunk，在项目工程中如何价加载这个运行时chunk？

  • ‌打包运行时Chunk‌：通过optimization.runtimeChunk配置生成运行时chunk。例如，设置为'single'会生成一个单独的运行时chunk，包含所有必要的引导代码‌。
  • ‌加载运行时Chunk‌：在多页应用中，可能需要手动加载运行时chunk。这通常涉及在HTML文件中通过

七、在项目中，使用过哪些webpack plugin，使用过哪些webpack loader，有什么作用？

‌webpack插件包括‌：

  • HtmlWebpackPlugin‌：自动生成HTML文件，并将打包生成的资源自动注入到HTML文件中。
  • ‌CleanWebpackPlugin‌：在构建前清理/dist文件夹，避免旧文件干扰。
  • ‌MiniCssExtractPlugin‌：将CSS从主应用程序中分离出来，生成单独的CSS文件，以便实现CSS的异步加载和浏览器缓存优化。

‌webpack加载器包括‌：

  • ‌‌babel-loader‌：将ES6+代码转换为向后兼容的JavaScript版本，确保代码在不同浏览器中的兼容性。
  • ‌css-loader‌：解析CSS文件，将其转换为CommonJS模块，以便在JavaScript中import。
  • ‌style-loader‌：将CSS样式动态注入到DOM中，通常与css-loader结合使用。
  • ‌file-loader‌：处理文件资源，如图片、字体等，将它们移动到输出目录并返回（相对）URL。

八、如何从0到1搭建前端基建？

从0到1搭建前端基建，首先需要‌明确项目目标和范围‌，充分考虑业务需求、用户需求、技术能力、时间和资源以及用户体验等方面‌。接着进行‌需求分析‌，确保项目需求的准确性和完整性‌。

在技术实施上，可以‌选择Vue等前端框架‌，利用Vue CLI等工具创建项目，并设置好项目目录结构‌。开发过程中，需要注意代码的模块化、组件化，以及交互和动画的实现‌。同时，为了保障代码质量，可以引入ESLint和husky等工具进行代码校验和提交规范‌。

最后，进行‌项目的打包和部署‌，可以使用Nginx等工具将项目部署到服务器上‌23。这样，一个基本的前端基建就搭建完成了。

九、你在开发过程中，使用过哪些TS的特性或者能力？

在开发过程中，我充分使用了TypeScript（TS）的多种特性和能力来提升项目的质量和开发效率。

  • 首先，我利用了TS的‌类型系统‌，为变量、函数等定义了明确的类型。这有助于在编码阶段就发现潜在的错误，避免了运行时错误的发生。
  • 其次，我使用了TS的‌接口（Interfaces）‌和‌类（Classes）‌来定义对象的形状和类的结构。这使得代码更加清晰、易于理解和维护。
  • 此外，我还利用了TS的‌枚举（Enums）‌特性来定义一组命名的常量，这使得代码更加易于阅读和理解。
  • 同时，TS的‌泛型（Generics）‌也是我常用的一个特性。它允许我创建可重用的组件，一个组件可以支持多种类型的数据。
  • 最后，我还使用了TS的‌命名空间（Namespaces）‌来组织代码，避免全局命名空间的污染。
  • 总的来说，TS的这些特性和能力使得我的开发过程更加高效，代码质量也得到了显著的提升。

十、js的加载会阻塞浏览器渲染吗？

‌是的，JS的加载会阻塞浏览器渲染‌。浏览器在渲染主线程中执行JS代码，当遇到JS文件时，会挂起渲染过程，等待JS文件加载并解析完毕，才会继续HTML的渲染过程‌。这是因为JS可能修改DOM结构，所以在JS执行完成前，后续的所有渲染都是没必要的‌。为了减少JS对页面渲染的阻塞影响，可以采取异步加载或延迟加载JS的方法，使用

十一、浏览器对队头阻塞有什么优化？

  1. 域名分片‌：将请求分散到不同的域名下，以突破原有长连接的数量限制，从而减少队头阻塞的影响。
  2. ‌提升服务端响应速度‌：服务端应遵循快速响应原则，超时或错误时快速返回，甚至进行异步处理，以减少队头阻塞的时间。‌
  3. ‌减少请求数量‌：在条件允许的情况下，通过减少网络请求的数量来降低队头阻塞的可能性。‌
  4. ‌使用HTTP/2协议‌：HTTP/2协议通过多路复用、服务器推送等特性，有效减少了队头阻塞的问题。（此点虽未直接提及，但是作为现代浏览器优化的一个重要方向，值得提及）

十二、应用上线后，怎么通知用户刷新当前页面？

  1. WebSocket/SSE‌：利用WebSocket或Server-Sent Events (SSE)建立与服务器的实时通信，服务器在部署后发送通知，前端接收到后提示用户刷新。‌
  2. ‌版本控制‌：通过检查服务端版本标识文件（如manifest.json）的更新，前端定期检测变化并提示用户。
  3. ‌Service Worker‌：注册Service Worker来检测新版本，安装后通知用户刷新页面。
  4. ‌无侵入式提示‌：使用Toast、Snackbar等全局通知形式，告知用户有新更新并提供刷新按钮。‌
  5. ‌智能刷新‌：结合业务逻辑，在特定操作前后判断是否需要提醒用户刷新。‌

十三、什么是强缓存？什么是协商缓存？如何清理缓存？

  • 强缓存是指浏览器在请求资源时，先检查本地缓存是否存在该资源的副本，并且该副本是否有效。如果有效，浏览器直接从本地缓存中获取资源，不会发送请求到服务器‌。强缓存主要用到两个请求头：Expires和Cache-Control。Expires是Http1.0规范，返回一个具体的时间值，代表缓存的有效期；Cache-Control是Http1.1规范，通过max-age设置缓存时间，单位为秒。
  • ‌协商缓存是由Etag和Last-Modified两个字段实现。浏览器首次请求数据时，服务器返回数据，并带上这两个字段。浏览器再次请求时，会附上If-None-Match和If-Modified-Since字段，由服务器进行校验，决定是否使用缓存‌。

关于如何清理缓存，这通常可以通过浏览器的设置选项来完成，或者使用特定的快捷键（如Ctrl+Shift+Delete）来清除浏览数据，包括缓存的文件。

十四、HTTP是一个无状态的协议，那么web应用要怎么保持用户的登录态呢？

HTTP是一个无状态的协议，每个请求都是独立的，服务器不会保存客户端的状态信息。为了在Web应用中保持用户的登录态，可以采取以下几种方式：

  1. Cookie‌：服务器在响应头中添加Set-Cookie字段，客户端收到后将Cookie保存起来，并在后续请求中通过Cookie字段将信息发送给服务器，从而实现用户状态的保存‌。
  2. ‌Session‌：服务器在后端保存用户的状态信息，每个用户都有一个唯一的标识符（SessionId），通过这个标识符来识别用户。标识符一般存储在Cookie中，也可以通过URL重写或隐藏表单域来传递‌。
  3. ‌Token‌：服务器在用户登录成功后生成一个Token，并将Token返回给客户端，客户端在后续的请求中通过在请求头中携带Token来进行身份验证和状态保存‌。

十五、如何检测网页空闲状态？

检测网页空闲状态可以通过监听用户的输入事件来实现。当用户一定时间内没有对网页进行任何操作时，即可认为当前网页为空闲状态。具体实现方式如下：

  1. 监听输入事件‌：监听鼠标移动事件（mousemove）和键盘按下事件（mousedown）。
  2. ‌设置延时器‌：在用户进入网页后，设置一个延时器，如果在设定的时间内触发了上述的输入事件，则移除延时器并重新开始计时。
  3. ‌判断空闲状态‌：如果延时器计时达到设定的空闲时间阈值，则认为网页处于空闲状态。

此外，还可以使用ifvisible.js等第三方库来帮助检测网页的空闲状态。‌

十六、列表分页，快速翻页下的竞态问题

  1. 取消未完成的请求‌：使用axios等HTTP库时，可以利用其提供的取消功能。在发送新请求之前，取消上一个还未完成的请求。这样可以确保只有最新的请求会被处理。
  2. ‌使用防抖或节流‌：防抖（debounce）和节流（throttle）是两种常用的限制函数执行频率的技术。在翻页事件中，可以使用防抖或节流来限制请求的发送频率，从而避免发送过多的请求。
  3. ‌锁定翻页按钮‌：在请求发送后，可以禁用翻页按钮，直到请求完成并更新页面数据后再启用。这样可以防止用户在请求处理期间进行翻页操作。
  4. ‌检查响应的有效性‌：在请求响应后，检查响应的数据是否仍然有效。例如，可以比较响应中的数据与当前页面状态是否匹配，如果不匹配，则忽略该响应。
  5. ‌使用Vuex或全局状态管理‌：如果你的应用使用了Vuex或类似的全局状态管理工具，你可以在其中管理分页状态，并确保在发送新请求之前更新状态，以反映最新的分页信息。
  6. ‌优化后端处理‌：确保后端能够处理并发的分页请求，并返回正确的数据。后端也可以实现类似的防抖或节流机制，以限制处理请求的频率。

通过实施上述策略之一或多个组合，你可以有效地解决Vue中列表分页时的竞态问题，提升应用的性能和用户体验。

十七、如何禁止别人调试自己的前端页面代码？

  1. 无限Debugger‌：通过不断输出debugger语句来阻止代码调试。当控制台被打开时，debugger会执行，从而阻止断点调试和查看网页请求‌。
  2. ‌检测调试工具状态‌：通过检测浏览器调试工具的打开状态来进行限制或操作。例如，检测window.console对象是否存在，以判断是否开启了调试工具，然后采取相应的措施‌。‌
  3. 使用代码混淆工具‌：利用如UglifyJS、Terser等工具对代码进行混淆，增加代码的阅读难度，从而降低被调试的风险‌。

十八、web系统里如何对图片进行优化？

‌选择合适的图片格式‌：根据图片内容选择合适的格式，如JPEG适用于照片，PNG适用于透明背景，GIF适用于动态图像，WebP和AVIF则提供更高的压缩率。

  1. ‌调整图片尺寸‌：确保图片尺寸与显示区域匹配，避免不必要的加载负担。
  2. ‌压缩图片‌：使用工具如TinyPNG、JPEGmini等进行有损或无损压缩，减少文件大小。
  3. ‌使用响应式图片‌：通过srcset和sizes属性提供不同分辨率的图片，以适应不同设备。
  4. ‌懒加载和预加载‌：懒加载非首屏图片，预加载关键视频资源，提升用户体验。
  5. ‌利用CDN‌：将图片缓存到全球各地的CDN节点，加快加载速度。
  6. ‌移除图片元数据‌：减少不必要的图片信息，进一步压缩文件大小。
  7. ‌使用CSS Sprites‌：合并多个小图标为一张大图，减少HTTP请求次数。

十九、常见的登录鉴权方式有哪些？

  1. 用户名密码登录‌：用户输入用户名和密码，后端验证后返回令牌（token），后续请求需携带此令牌进行验证。‌
  2. ‌扫码登录‌：用户扫描二维码，后端生成登录凭证，前端轮询检查凭证状态，验证通过后获取令牌。‌
  3. ‌第三方登录‌：用户使用第三方平台账号登录，前端发送登录凭证到后端验证，验证通过后获取令牌。
  4. ‌HTTP Basic Authentication‌：基于HTTP协议的认证方式，客户端弹出登录窗口，用户输入用户名和密码进行登录，安全性不高。‌
  5. ‌Session-Cookie认证‌：利用服务端的Session和客户端的Cookie实现通信认证。‌
  6. ‌Token验证‌：包括JWT、SSO等，使用令牌进行身份验证。‌
  7. ‌OAuth（开放授权）‌：一种授权方式，允许第三方应用访问用户资源。‌

二十、需要在跨域请求中携带另一个域名下的cookie该如何操作？‌

  1. 设置withCredentials属性‌：在发送跨域请求的客户端代码中，将withCredentials属性设置为true。这适用于XMLHttpRequest或Fetch API等请求方式。‌
  2. ‌服务端处理CORS请求‌：在服务器端，需要对来自其他域的请求进行特殊处理，以允许跨域请求携带cookie。具体方法取决于所使用的后端技术，例如，在Express框架中，可以使用cors中间件，并将credentials设置为true。‌
  3. ‌配置响应头‌：服务端需要在响应头中设置Access-Control-Allow-Origin和Access-Control-Allow-Credentials属性，以允许特定的源发送携带cookie的跨域请求。‌

二十一、封装一个请求超时，发起重试的axios代码

import axios from 'axios';

// 创建axios实例
const axiosInstance = axios.create({
  // 设置基础URL
  baseURL: 'https://your-api-url.com',
  // 设置请求超时时间
  timeout: 5000, // 5秒
});

// 请求拦截器
axiosInstance.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么，例如设置请求头等
    return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 响应拦截器
axiosInstance.interceptors.response.use(
  response => {
    // 对响应数据做点什么
    return response;
  },
  error => {
    // 对响应错误做点什么
    if (error.code === 'ECONNABORTED') {
      // 如果是超时错误，可以在这里进行重试逻辑
      console.log('请求超时，准备重试...');
      // 这里只是一个简单的重试示例，实际项目中可能需要更复杂的重试逻辑
      return axiosInstance(error.config); // 重新发起请求
    }
    return Promise.reject(error);
  }
);

// 使用封装好的axios实例进行请求
axiosInstance.get('/your-endpoint').then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error('请求失败:', error);
});

二十二、前端如何设置请求超时timeout？

  1. 修改Axios实例的超时时间‌：在创建Axios实例时，设置timeout属性。例如，将超时时间设置为1000000毫秒（约16分钟）。‌
  2. ‌在定义接口时设置超时时间‌：在调用Axios请求时，直接在请求配置中添加timeout属性。例如，将某个接口的超时时间设置为100000毫秒。‌
  3. ‌全局拦截器中设置超时处理‌：在Vue的全局拦截器中，对请求进行拦截，并设置超时处理逻辑。例如，使用setTimeout来设置超时时间，并在超时后执行特定的回调函数。‌

二十三、后端一次性返回树形结构数据，数据量非常大，前端应该如何处理？

  1. 虚拟滚动（Virtual Scrolling）‌：虚拟滚动技术可以在用户滚动时只渲染可视区域内的元素，从而避免一次性渲染大量DOM元素，减少浏览器的负担。
  2. ‌懒加载（Lazy Loading）‌：对于树形结构，可以实施懒加载策略，即只有当用户展开某个节点时才加载其子节点数据。这样可以显著减少初次加载时的数据量。
  3. ‌分批处理（Chunk Processing）‌：将数据分成多个小块，根据用户的交互逐步加载和渲染。例如，可以首先加载和显示树的顶层节点，然后根据用户操作逐步加载更深层次的节点。
  4. ‌数据压缩和优化‌：在发送到前端之前，后端可以进行数据压缩和优化，例如去除不必要的字段，减少数据冗余。
  5. ‌使用Web Workers‌：利用Web Workers在后台线程处理数据，避免阻塞UI线程，提高应用的响应性。
  6. ‌优化渲染‌：使用前端框架（如React、Vue等）提供的优化技术，如React的React.memo、useMemo和useCallback，以及Vue的v-memo等，来减少不必要的渲染。
  7. ‌分页或分段显示‌：如果树形结构非常庞大，可以考虑将其分页或分段显示，每次只显示一部分数据。
  8. ‌监控和性能分析‌：使用浏览器的开发者工具进行性能分析，找出性能瓶颈，并针对性地进行优化。
  9. ‌用户交互设计‌：设计合理的用户交互，如提供搜索功能，允许用户快速定位到他们感兴趣的部分，而不是浏览整个树形结构。
  10. ‌使用现代前端库和工具‌：利用现代前端库和工具（如D3.js、vis.js等）来处理大型数据集和复杂的可视化。

二十四、你认为组件封装的基本准则是什么？

  1. 单一职责原则‌：每个组件应只关注一个特定的功能或UI部分，避免过度设计，使得维护更简单。‌
  2. ‌高内聚低耦合‌：组件内部功能应高度聚合，对外部的影响降到最低，减少组件间的依赖。‌
  3. ‌可复用性和模块化‌：组件应能独立使用，并能与其他组件组合，提高代码的复用率。‌
  4. ‌状态管理‌：组件的状态应通过props从外部传递，避免直接修改状态，保持组件的纯函数特性。
  5. ‌易于理解的API‌：组件的接口应直观易懂，有助于其他开发者快速上手。‌

二十五、页面加载速度提升应该从哪些方向思考？‌

  1. 优化资源文件‌：压缩图片和多媒体文件，使用高效格式。压缩和合并CSS、JavaScript文件，减少文件大小。
  2. ‌减少HTTP请求‌：合并多个文件，减少请求次数。使用CSS Sprites合并图像请求。
  3. ‌利用缓存机制‌：配置浏览器缓存，加速重复访问。使用CDN加速静态资源的全球分发。
  4. ‌服务器响应优化‌：选择高性能服务器并优化其配置。使用压缩技术减少数据传输量。
  5. ‌代码和插件管理‌：剔除不必要的插件和脚本。定期审查和优化代码。

二十六、前端日志埋点SDK设计思路

  1. SDK结构设计‌：采用面向对象编程，设计类结构，能够传递配置参数（如上报数据地址、版本等）。将SDK的执行分为三个阶段：加载时、页面加载完成时、页面卸载时，并考虑到错误捕获。
  2. ‌数据收集与上报‌：在特定时机收集数据，如页面停留时长、页面访问量等。提供上报数据的方法，将数据异步发送给服务器。
  3. ‌灵活性与扩展性‌：SDK应具备良好的灵活性和扩展性，以适应不同项目的需求。提供设置用户ID等方法，以便跟踪用户行为。
  4. ‌错误处理与性能监控‌：考虑到错误捕获，确保SDK的稳定性。监控应用程序的性能指标，如加载时间、响应时间等。

二十七、token进行身份验证了解多少？

**‌Token身份验证是一种高效、安全的用户验证方式‌。**以下是关于Token身份验证的详细解释：

  • 原理‌：用户登录后，服务器生成一串字符串（Token）并返回给客户端。客户端后续请求时携带此Token，服务器验证其有效性。

  • 优势‌：

    • 无状态：服务器不需保存用户登录状态，减轻负担。
    • 安全性：Token具有复杂性和随机性，可设置过期时间。
    • 可扩展性：适用于各种平台和设备，包括Web和移动应用。
    • 分布式系统支持：不依赖于特定的身份验证服务器。
    • ‌应用场景‌：用户身份验证、API访问授权、单点登录等‌。

二十八、在前端应用中如何进行权限设计？

  • 角色和权限定义‌：首先，需要定义角色和权限的数据结构，通常使用对象或数组来表示。角色代表用户的身份，而权限则表示用户可以执行的操作。
  • 身份验证和授权‌：在用户登录时，进行身份验证并获取用户的角色和权限信息。通常使用令牌（token）进行身份验证，通过发送用户凭证到后端进行验证，并在响应中返回用户角色和权限信息。之后，前端应用会根据这些信息来控制用户对系统功能和资源的访问。

二十九、低代码平台一半渲染是如何设计的？

  • 组件化设计‌：低代码平台通常采用组件化的设计思想，将页面拆分为多个可复用的组件。这些组件可以是基础的HTML元素，也可以是复杂的业务组件。
  • ‌动态组件加载‌：平台根据用户在界面上的操作，动态地加载和渲染相应的组件。这通常通过前端框架（如Vue.js）提供的动态组件功能来实现。
  • ‌数据驱动‌：组件的渲染和状态更新由数据驱动。平台维护一个数据模型，当数据发生变化时，界面会自动更新以反映最新的数据状态。

三十、indexedDB存储空间大小是如何约束的？

  1. 浏览器默认限额‌：不同浏览器对IndexedDB的存储空间有不同的默认限额，例如Chrome的初始限额约为50MB，Firefox可能更高。限额会随浏览器版本更新而变动。
  2. ‌用户设置‌：用户可以根据自身需求调整对特定网站或所有网站的存储限额，实际可用存储空间可能小于浏览器的默认限额。
  3. ‌域名/源限制‌：浏览器为每个不同的域名或源设置独立的存储配额，不同网站的IndexedDB存储空间是隔离的，不能跨域访问。

三十一、浏览器的存储有哪些？

  1. Web Storage‌：包括LocalStorage和SessionStorage，用于存储较少量的数据，但不适合存储大量结构化数据‌。
  2. ‌IndexedDB‌：是一种基于键值对存储的大型数据库，允许在用户的浏览器中存储和检索大量结构化数据，支持事务、索引、查询等高级功能，类似于传统的关系型数据库‌。
  3. ‌Cookies‌：主要用于存储用户的会话信息，但存储空间有限，且每次HTTP请求都会携带Cookie信息，不适合存储大量数据‌。

三十二、为什么市面上做表格渲染可视化技术大多数都是canvas而不是svg？

  1. 性能优势‌：Canvas渲染速度快，适合处理大量图像和高度动态的图像，内存占用较低，尤其在处理大数据集时表现更优‌。
  2. ‌跨平台兼容性‌：Canvas在所有现代浏览器中都有良好的支持，易于实现跨平台兼容性‌。
  3. ‌开发和维护成本‌：存在许多基于Canvas的可视化库和工具，降低了开发和维护成本‌。
  4. ‌交互性和动画效果‌：Canvas适合创建高质量、流畅的动画效果，高效的重绘特性在处理复杂动画和交互时非常有用‌。
  5. ‌移动端表现‌：Canvas在移动设备上的性能表现更好，内存占用更低‌。

三十三、将静态资源缓存在本地的方式有哪些？

  1. 强缓存‌：通过设置HTTP响应头中的Cache-Control和Expires字段实现，使浏览器在有效期内直接从本地缓存加载资源，无需向服务器发送请求‌。
  2. ‌协商缓存‌：利用HTTP的ETag和Last-Modified字段进行缓存协商。当浏览器请求资源时，服务器会检查资源的状态，如果资源未修改，则返回304状态码，告诉浏览器使用本地缓存‌。
  3. ‌应用缓存‌：根据业务需求拆分缓存，如读写分离、按用户或业务拆分，以及使用Redis等工具进行对象缓存‌。
  4. ‌离线缓存‌：通过创建.appcache文件并列出需要缓存的文件，实现离线访问缓存资源的功能‌。

三十四、SPA首屏加载速度慢如何优化？

SPA首屏加载速度慢的优化可以从以下几个方面进行：

  1. 代码和资源优化‌：
  • 使用Webpack等工具进行代码压缩、合并，减少文件大小。
  • 利用代码分割（Code Splitting）和路由懒加载，按需加载资源。
  • 对图片进行压缩，使用WebP等高效格式。
  1. ‌页面渲染优化‌：
  • 优化HTML结构，将CSS放在顶部，JS放在底部。
  • 减少页面的重绘和重排。
  • 使用SSR（服务器端渲染）减少客户端渲染时间。
  1. ‌静态资源处理‌：
  • 使用CDN加速静态资源加载。
  • 应用HTTP缓存减少重复请求。
  • 考虑使用HTTP2提高请求效率。
  1. ‌用户体验提升‌：
  • 使用骨架屏（Skeleton Screen）改善用户等待体验。

三十五、axios是如何区分node环境还是浏览器环境的？

‌axios通过环境特有对象区分环境‌。axios是一个基于Promise的HTTP库，适用于浏览器和node环境。axios内部会自动对环境进行判断，是通过Nodejs和浏览器中各自的全局变量来区别当前在哪个环境下：浏览器环境使用promise对XMLHttpRequest进行封装；node环境则基于nodejs的http或https发起请求。环境的切换使用process.env.NODE_ENV设置不同环境的请求url前缀。axios源码中采用了process和XMLHttpRequest对象来判断环境，通过宿主环境的特有对象识别当前环境，适配出不同环境下的请求方式‌。

三十六、如何拦截web应用的请求？

  • 使用浏览器API拦截‌：通过覆写浏览器的fetch、xhr等API，可以在请求发出前后执行自定义逻辑，实现请求的拦截和处理‌。
  • ‌设置网络拦截器‌：在Web组件或服务工作者（ServiceWorker）中设置网络拦截器，当Web内核发出请求时，会触发拦截器的回调，从而实现对请求的拦截‌。
  • ‌使用Java拦截器‌：在Java Web应用程序中，可以通过实现HandlerInterceptor接口创建拦截器，对请求进行预处理、后处理等操作‌。
  • ‌使用Burp Suite插件‌：通过开发Burp Suite的扩展插件，可以实现请求的拦截与配置管理功能，根据用户配置的域名和路径信息，拦截符合条件的请求‌。

三十七、前端有哪些跨页面通信方式？

  • Broadcast Channel API‌：允许同源不同页面之间实时通信，通过创建频道发送和监听消息实现‌。
  • ‌LocalStorage/SessionStorage+StorageEvent‌：利用存储变化触发事件，实现跨页面通信‌。
  • ‌Service Worker/Shared Worker‌：作为消息处理中心，实现多页面共享和通信‌。
  • ‌Cookies‌：通过设置和读取Cookie，在不同页面间传递信息‌。
  • ‌Window.postMessage‌：支持跨域通信，通过发送和监听消息事件实现不同窗口间的数据传递‌。

三十八、vue如何实现转场动画？

Vue实现转场动画主要依赖于Vue的过渡系统和Vue Router的配置。以下是实现步骤：

  • 使用Vue的过渡系统‌：
    • 利用组件包裹需要动画的元素或组件。
    • 通过设置的name属性来定义动画类名。
    • 使用CSS来定义进入和离开的动画效果。
  • ‌配置Vue Router‌：
    • 在路由配置中，利用meta对象存储路由相关的元信息，如页面级别或动画方向。
    • 监听路由变化，根据新旧路由的meta信息来判断动画方向。
    • 动态设置组件的name属性，以实现不同的转场动画效果。

三十九、从vue层面上，能做的性能优化有哪些？

  1. 合理使用指令‌：如使用v-show代替v-if进行频繁切换的场景，减少DOM操作；在v-for中必须添加key以提高渲染效率，并避免与v-if同时使用。
  2. ‌优化计算属性与侦听器‌：合理使用computed和watch，computed基于依赖缓存，避免重复计算；watch适用于执行异步操作或复杂逻辑。
  3. ‌组件优化‌：利用keep-alive缓存组件状态，减少重复渲染；对长列表使用虚拟滚动或Object.freeze冻结数据，减少初始化时间。
  4. ‌资源懒加载‌：实现图片、路由组件等资源的懒加载，减少初始加载时间。
  5. ‌代码分割与Tree Shaking‌：使用Webpack等工具进行代码分割，按需加载；利用Tree Shaking去除未引用代码，减小打包体积。
  6. ‌使用CDN与gzip压缩‌：将静态资源部署到CDN，启用gzip压缩，加快资源加载速度。
  7. ‌防抖与节流‌：在事件处理中使用防抖与节流技术，减少不必要的计算和操作，提升性能。

四十、git仓库迁移应该怎么操作？

  1. 克隆旧仓库‌：使用git clone --mirror <旧仓库URL>命令克隆旧仓库到本地，确保包含所有分支、标签和Git配置。
  2. ‌添加新仓库远程地址‌：进入克隆的仓库目录，使用git remote add new-origin <新仓库URL>命令添加新仓库作为远程仓库。
  3. ‌推送到新仓库‌：使用git push --mirror new-origin命令将所有分支、标签和Git配置推送到新仓库。
  4. ‌验证迁移‌：进入新仓库的网页界面，检查所有分支和标签是否成功迁移。
  5. ‌更新本地仓库远程URL‌（如有需要）：使用git remote set-url origin <新仓库URL>命令更新本地仓库的远程URL。

四十一、什么是微前端？iframe有什么优缺点？

微前端是一种前端架构模式‌。

  • ‌定义‌：微前端将单个应用程序分解为多个小型、独立的部分，每个部分由独立团队开发、测试和部署，最后组合成一个完整的应用程序。
  • ‌目标‌：使前端开发更易、更可维护、更可扩展，并实现团队间的协作。

iframe的优缺点‌

  • 优点
    • 自带样式、环境隔离机制，具备沙盒特性。
    • 嵌入子应用简单，学习成本低。
  • ‌缺点‌：
    • 功能间跳转无效，刷新页面无法保存状态。
    • URL记录无效，刷新会返回首页。
    • 主应用劫持快捷键操作，事件冒泡不穿透到主文档树。
    • 模态弹窗背景无法覆盖整个应用。
    • 应用加载失败或内容错误，主应用无法感知，通信困难。‌

面试的文章暂时就更新到这了，后续有机会的话还会继续更新，找工作没面试的话不用着急，放平心态，面试都是一波波来的，要么没有，要么一下很多，心态最重要，做好自己的准备就行。 那就这样了，最后一句：乾坤未定，你我皆牛马！！！加油！

avatar
文章
阅读
粉丝