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记录无效,刷新会返回首页。
    • 主应用劫持快捷键操作,事件冒泡不穿透到主文档树。
    • 模态弹窗背景无法覆盖整个应用。
    • 应用加载失败或内容错误,主应用无法感知,通信困难。‌

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