腾讯音乐TME-Q音暑期实习前端一面4.1

腾讯音乐TME-Q音暑期实习前端一面4.1的面试问题及解答思路如下：

屏幕适配相关

除媒体查询、弹性布局和响应式布局外，还有哪些屏幕适配方案
视口单位（vw/vh）：基于视口宽度（vw）或高度（vh）的单位，可实现动态缩放，例如width: 50vw表示占视口宽度的50%。
百分比布局：通过设置元素的宽度、高度或边距为百分比，相对于父元素尺寸动态调整。
CSS Grid布局：通过网格容器和网格项的划分，实现复杂布局的灵活适配。
图片适配：使用max-width: 100%防止图片溢出容器，结合object-fit控制图片显示方式。
rem布局动态适配方案
动态设置根字体大小：通过JavaScript监听窗口大小变化，计算并设置html元素的font-size。例如：
function setRootFontSize() { const baseSize = 16; // 基准字体大小（如16px） const scale = window.innerWidth / 375; // 以375px设计稿为基准 document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px';}window.addEventListener('resize', setRootFontSize);setRootFontSize(); // 初始化
结合媒体查询优化：在特定断点下调整根字体大小，避免极端屏幕尺寸下的布局异常。

CSS布局手写题

左边固定100px，右边固定100px，中间自适应的三栏布局
普通方案（浮动+margin）：
.left { float: left; width: 100px; }.right { float: right; width: 100px; }.middle { margin: 0 100px; }
弹性布局（Flexbox）：
.container { display: flex; }.left { width: 100px; }.right { width: 100px; }.middle { flex: 1; }

跨域问题

允许多个域名跨域的CORS设置
在服务器响应头中设置Access-Control-Allow-Origin为多个域名（需动态生成）或通配符*（不推荐，无法携带Cookie）。
动态域名示例（Node.js）：
const allowedOrigins = ['
https://domain1.com'
, '
https://domain2.com'
];app.use((req, res, next) => { const origin = req.headers.origin; if (allowedOrigins.includes(origin)) { res.setHeader('Access-Control-Allow-Origin', origin); } next();});
跨域携带Cookie的设置
需同时满足：
服务器响应头包含Access-Control-Allow-Credentials: true。
Access-Control-Allow-Origin不能为*，必须指定具体域名。
前端请求需设置withCredentials: true（如axios.defaults.withCredentials = true）。

长列表页面优化

白屏时间优化方案
网络层面：
使用CDN加速静态资源加载。
开启HTTP/2多路复用，减少连接建立时间。
JS/CSS层面：
代码分割（Code Splitting）和懒加载（Lazy Load）。
压缩和混淆代码，减少文件体积。
图片层面：
使用WebP格式或渐进式JPEG。
懒加载（loading="lazy"属性或Intersection Observer API）。
强缓存与协商缓存的区别
强缓存：
响应头：Cache-Control: max-age=3600或Expires: GMT时间。
直接从本地缓存读取，不发起网络请求，状态码为200 (from cache)。
协商缓存：
响应头：Last-Modified/If-Modified-Since或ETag/If-None-Match。
需向服务器验证资源是否更新，未更新时返回304 Not Modified，更新则返回200和新资源。

长列表滚动加载实现

核心思路：
初始加载前10条数据，监听滚动事件。
当滚动到底部时，加载下一批数据（如每次10条）。
使用Intersection Observer API优化性能（替代直接监听scroll事件）。
代码示例（Vue 3）：
<template> <div @scroll="handleScroll" ref="container"> <div v-for="item in list" :key="item.id" @click="showIndex(item.id)"> {{ item.content }} </div> </div></template><script setup>import { ref, onMounted } from 'vue';const list = ref([]);const container = ref(null);let page = 1;// 模拟加载数据const loadData = () => { const newData = Array.from({ length: 10 }, (_, i) => ({ id: (page - 1) * 10 + i + 1, content: `Item ${(page - 1) * 10 + i + 1}` })); list.value = [...list.value, ...newData]; page++;};// 初始加载onMounted(() => { loadData();});// 滚动加载const handleScroll = () => { const { scrollTop, clientHeight, scrollHeight } = container.value; if (scrollTop + clientHeight >= scrollHeight - 10) { loadData(); }};// 点击显示索引const showIndex = (id) => { alert(`Clicked: ${id}`);};</script>

Vue相关问题

Vue生命周期关键点
Vue 2：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。
Vue 3：新增setup阶段（Composition API入口），beforeUnmount和unmounted替代beforeDestroy和destroyed。
Vue 3与Vue 2的区别
Composition API：通过setup函数组织逻辑，替代Options API的分散写法。
响应式系统：Vue 3使用Proxy替代Object.defineProperty，支持更多数据类型（如数组长度变化）。
性能优化：编译阶段优化（如静态节点提升）、碎片化DOM（Fragment）、Tree-shaking支持。
其他：v-model参数简化、Teleport组件、Suspense异步组件等。

反问环节建议

热门标签