实习转正前端面经

百度yy直播，好吧可能也跟百度没有关系了，现在是欢聚集团底下的，广州120一天无餐补房补，还没饭堂，天天造外卖实习到毕业再分配hc，另外清楚了里面招三到四个实习生，选择一个来决定转正，之前的都跑了，主要是做封装组件，c端相关的，h5居多活动，直播间互动技术部门

有前端同学在yy直播实习就说很累不开心

总体来说问得已经很简单了，答案仅参考

自我介绍

讲一讲前端的体系

HTML/CSS/JavaScript：基本的网页构建语言。
框架和库：如React、Vue、Angular等，用于构建复杂的前端应用。
构建工具：如Webpack、Rollup等，用于模块打包、代码压缩、热替换等功能。
版本控制：如Git，用于代码的版本管理和多人协作开发。
测试：包括单元测试、集成测试、端到端测试等，确保代码质量和功能正确性。
部署和持续集成：通过CI/CD工具自动构建、测试和部署代码到生产环境

项目怎么部署的

代码准备：确保代码已经通过所有测试，并且已经合并到主分支。

构建项目：运行构建脚本（如npm run build），将源代码编译、打包成最终的静态资源文件。

上传到服务器：将构建好的静态资源上传到服务器或静态资源托管平台（如CDN）。

配置服务器：设置服务器的路由、域名、SSL证书等，确保项目可以被正确访问。

监控和维护：部署后，监控应用的性能和错误，并根据需要进行维护和更新。

你部署项目的时候的缓存是设置了多大

静态资源（如图片、CSS、JavaScript文件）

长期缓存：对于不会频繁更新的静态资源，可以设置较长的缓存时间，例如一年：

动态资源（如API响应）

不缓存或短期缓存：对于动态生成的内容，通常不希望缓存，或者只设置较短的缓存时间：或者这样的设置确保每次请求都会与服务器进行新鲜度校验，以获取最新的数据。

HTML文件

中等缓存时间：对于HTML文件，可以设置一个较短的缓存时间，以便在更新时能够较快地被用户获取：这里的max-age=3600表示HTML文件可以在客户端缓存1小时（3600秒）。

缓存头的设置方式等

Cache-Control：用于定义资源的缓存策略，例如：public, max-age=31536000：允许资源被缓存，且缓存时间为一年。no-cache：表示每次请求都需要与服务器进行新鲜度校验。
Expires：设置资源的过期时间，通常与Cache-Control一起使用。
ETag和Last-Modified：用于协商缓存，服务器会根据这些头信息判断资源是否更新。

有什么缓存头？

常见的HTTP缓存头包括什么

Cache-Control：定义资源的缓存策略和行为。
Expires：设置资源的过期时间。
ETag：资源的版本标识符，用于协商缓存。
Last-Modified：资源最后修改的时间，用于协商缓存。
Pragma：用于向后兼容HTTP/1.0缓存，通常设置为no-cache。

你做移动端还是pc端的页面比较多

都有

讲一个性能优化的实际场景，当时是怎么做到的

比如我正在开发一个大型的电商平台网站，该网站拥有海量的商品数据和复杂的页面布局。用户在浏览商品列表页面时，需要加载大量的商品图片、商品信息以及各种动态推荐内容。随着平台的不断发展，用户数量和数据量急剧增加，导致页面加载速度变慢，用户体验受到了严重影响。

问题分析

经过分析，发现以下几个主要的性能瓶颈：

图片加载缓慢：商品图片数量众多且体积较大，直接加载会导致页面渲染阻塞，用户需要等待很长时间才能看到完整的商品列表。
JavaScript执行耗时：页面中包含大量的JavaScript代码，用于实现各种交互功能和动态内容加载。这些代码在执行时会占用大量的CPU资源，导致页面响应缓慢。
服务器响应时间长：由于请求的商品数据量大，服务器处理请求的时间较长，导致页面加载等待时间增加。

优化措施

图片优化图片懒加载：只加载用户当前可视区域内的图片，当用户滚动页面时，再按需加载其他图片。这样可以减少初始加载的图片数量，加快页面渲染速度。图片压缩：对图片进行压缩处理，减小图片文件的体积，降低网络传输时间。可以使用工具如TinyPNG等对图片进行无损压缩。使用CDN加速：将图片资源部署到CDN（内容分发网络），利用CDN的分布式节点将图片缓存在离用户更近的位置，从而加快图片的加载速度。
JavaScript优化代码分割：将JavaScript代码进行模块化分割，只在需要时加载相应的模块代码。例如，将商品详情页的代码单独打包成一个模块，当用户点击商品时才加载该模块。异步加载：使用异步加载的方式加载JavaScript文件，避免阻塞页面的渲染。可以使用async或defer属性来实现异步加载。性能监测和优化：使用工具如Chrome的Performance面板对JavaScript代码的执行进行监测，找出耗时较长的函数和操作，进行针对性的优化。例如，优化复杂的DOM操作和数据处理逻辑，减少不必要的计算和渲染。

讲一个有成就感的工作经历

重构

实习的项目的webpack是原生的还是封装过一层的

主要使用的是原生的Webpack配置，但同时也有一些封装过的部分。项目中有一个基础的Webpack配置文件，它包含了大部分常用的配置和插件。然后，在此基础上，我们根据项目的具体需求进行了一些自定义的配置和扩展。例如，我们可能会根据不同的环境（开发环境和生产环境）来调整一些配置参数。这种结合使用的方式既能够利用封装带来的便利，又能够保持一定的灵活性。

rem的原理

rem 是一种 CSS 长度单位，它是相对于根元素（<html> 元素）的字体大小进行计算的。无论在页面的哪个位置使用 rem，它的值始终基于根元素的 font-size 属性。例如，如果根元素的字体大小设置为 16px，那么 1rem 就等于 16px。这种方式使得 rem 在响应式设计中非常有用，因为它允许通过调整根元素的字体大小来全局控制页面的布局和元素大小.

你项目当时怎么做移动端适配的

使用视口元标签：在页面的 <head> 部分添加了视口元标签（<meta name="viewport" content="width=device-width, initial-scale=1.0">），确保页面宽度与设备屏幕宽度一致，并且初始缩放比例为1，避免页面在不同设备上出现缩放问题。
采用响应式布局：使用媒体查询（Media Queries）根据不同的屏幕宽度调整布局。例如，当屏幕宽度小于600px时，将导航栏改为汉堡菜单样式，内容布局调整为单列显示，以适应小屏手机；当屏幕宽度大于600px时，恢复为正常的多列布局，适用于平板电脑等较大屏幕设备。
使用 rem 单位：将字体大小和部分元素的尺寸设置为 rem 单位，以根元素的字体大小为基准进行缩放。例如，设置 <html> 元素的字体大小为 16px，然后根据需要调整其他元素的字体大小，如 1rem、1.2rem 等，确保在不同屏幕尺寸下，元素的相对大小保持一致，同时方便全局调整字体大小以适应不同设备的显示效果.

react里实现性能优化的api有哪一些

React.lazy 和 Suspense：用于懒加载组件，可以减少初始加载时间。
useMemo：用于缓存计算结果，避免不必要的重复计算。
useCallback：用于缓存函数，避免在每次渲染时重新创建函数。
React.memo：用于对函数组件进行记忆化处理，避免不必要的重新渲染。
useTransition：允许将更新标记为非紧急，让React优先处理更重要的更新

vh wh你用过吗，怎样的一个场景

在一个在线教育平台的移动端网页中，需要设计一个全屏的课程介绍页面。页面需要展示课程的封面图、课程名称、讲师信息等，并且要求在不同设备上都能完整展示，不出现滚动条。

解决方案

使用 vh 和 vw 单位：全屏背景：将课程封面图设置为全屏背景，使用 height: 100vh 和 width: 100vw，确保背景图始终覆盖整个视口。内容布局：对于课程名称和讲师信息等文字内容，使用 vw 单位来设置字体大小，例如 font-size: 5vw，这样字体大小会根据屏幕宽度动态调整，保持良好的可读性。