前端新的口试题又来咯拖拽与 DOM问题 1：拖拽历程中，要是底本的元素散失了，onDrop 还能触发么？具体阐明是什么？谜底： 能触发。onDrop 事件会在摈弃的贪图元素上触发。具体阐明是：拖拽源元素在拖拽历程中被移除（如竖立为 display: none 或从 DOM 中删除），惟一鼠标在灵验的摈弃贪图上开释，onDrop 仍会触发。然则，event.dataTransfer 对象中对于拖拽源的数据可能变得不能靠或丢失。 问题 2：怎么转变拖拽预览图？谜底： 使用 DataTransfer.setDragImage 身手。

element.addEventListener('dragstart'， (e) => {

// 创建一个自界说图像元素 #前端 #口试

const dragImage = document.createElement('div');

dragImage.textContent = '自界说预览';

dragImage.style.background = 'blue';

document.body.appendChild(dragImage);

// 竖立拖拽预览图，后两个参数是鼠标相对于预览图的偏移量 e.dataTransfer.setDragImage(dragImage， 10， 10); }); 问题 3：怎么让拖拽预览图有圆角？谜底： 为你在 setDragImage 中使用的自界说预览元素添加 CSS border-radius 属性即可。

#customDragImage {

border-radius: 10px;

}

TypeScript ECharts 与反映式布局问题 4：你用了 echart，怎么让 echart 的内容随从容器大小而变化？onResize 的时候要怎么作念？谜底： 调用 ECharts 实例的 .resize 身手。

// 运行化图表

const myChart = echarts.init(document.getElementById('chart-container'));

// 监听窗口 resize 事件 window.addEventListener('resize'， => { myChart.resize; }); 问题 5：要是有可伸缩侧边栏之类的，导致容器因为其他原因发生了转变，应该用什么事件监听？谜底： 使用 ResizeObserver API。它不错监听凭意 DOM 元素尺寸的变化，而不单是是窗口。

const resizeObserver = new ResizeObserver(entries => {

for (let entry of entries) {

myChart.resize;

}

});

resizeObserver.observe(document.getElementById('chart-container'));

C 部署、缓存与 CDN问题 6：要是是 toc 居品，后端为 index.html 竖立了 1 h 的 max age，讨教从你再行构建代码发布，豪爽多久之后，通盘用户都不错看到新界面？谜底： 表面上最长需要 1 小时（max-age 时辰）加上 CDN 边际节点的缓存落后时辰。但由于用户浏览器缓存、CDN 设立（如是否启用了 stale-while-revalidate ）等身分，本色时辰可能更长或更短。保守忖度，1-2 小时内通盘用户会渐渐看到新界面。 问题 7：要是用户走访出现了白屏，是什么原因？谜底： 常宥恕因包括： JavaScript 加载失败： 资源旅途失实、CDN 故障、收集问题。JavaScript 实际失实： 新版块代码存在语法失实或运行时失实，导致应用运行化失败。资源加载超时。浏览器兼容性问题。进口 HTML 文献被缓存（如 index.html），但援用的新版块 JS/CSS 文献无法加载。问题 8：toc 居品大都使用 cdn，讨教 cdn 的订价豪爽若干？针对这么的订价战略，前端应该进行什么样的优化？谜底：订价： 主流云厂商（阿里云、腾讯云）的 CDN 频频按 流量 和 HTTP 央求次数 计费。流量用度约 0.1 - 0.3 元/GB，央求用度约 0.01 - 0.05 元/万次。上传（回源）流量频频比下载（分发）流量贵。前端优化：资源压缩： 启用 Gzip/Brotli 压缩，图片使用 WebP 方法。减少央求： 合并小文献（雪碧图）、运用 HTTP/2 多路复用。缓存优化： 为静态资源竖立长的 Cache-Control max-age，并使用内容哈希定名达成“永不外期”缓存。代码分割与懒加载： 只加载刻下页面需要的代码。使用 CDN 预热功能 ，将伏击资源提前推送到边际节点。问题 9：前端应用中？上传贵仍是下载贵？上传快仍是下载快？谜底： 在 CDN 语境下，上传（回源）频频比下载（分发）贵 。对于平方收集相连，下载速率频频远快于上传速率 （家庭宽带坎坷行不合称）。

HTTP 缓存与多媒体问题 10：图片竖立协商缓存后，浏览器会举座缓存，视频能竖立协商缓存么？视频的 http 复返内容与图片有什么区别？谜底：视频不错竖立协商缓存。区别： 视频频频相沿 限制央求（Range Requests） 。HTTP 反映头会包含 Accept-Ranges: bytes ，而况在央求部分视频时，景色码是 206 Partial Content 而不是 200 OK 。这使得客户端不错只央求视频的某一部分，而不是通盘文献。问题 11：怎么缩短视频展示的资本？谜底：使用高效的视频编码： 如 H.265/HEVC 或 AV1，在换取质地下文献更小。自适合码流： 使用 HLS 或 DASH 等技能，银河国际把柄用户网速动态切换不同了了度的视频流。CDN 加快。视频压缩与优化： 在可继承的限制内缩短码率和分离率。懒加载： 视频参加视口后再脱手加载。想象与视觉问题 12：既然有那么多 4k，2k，屏幕，为啥想象师的图还所以 1280 为主？是什么原因导致的？谜底： 主要原因： 历史与兼容性： 1280px 是永远以来最主流和踏实的屏幕宽度基准。开拓恶果： 提供一个表率尺寸便于想象和开拓对王人。内容可读性： 过宽的单行文本不利于阅读，想象稿更良善中枢内容的布局。反映式想象： 想象以 1280px 为“桌面端”基准，然后通过反映式章程适配更大或更小的屏幕，而非径直为 4K 想象。问题 13：高分离率图片在低分离率屏幕上为什么会糊？为什么会有图片明明正常然则一朝有动画之后也糊了？遭受这种问题怎么搞定？谜底：原因1（高分离率图在低分离率屏）： 浏览器需要将高像素密度的图片压缩到更少的物理像素上闪现，这个“下采样”历程可能导致迷糊和细节亏空。原因2（动画后变糊）： 浏览器为了动画性能，可能会将动画元素擢升到颓落的合成层（GPU 渲染）。在层创建或变换历程中，要是处理失当（如不是整数像素出动），抗锯齿算法可能导致暂时性迷糊。搞定决议：使用 srcset 和 sizes 属性为不同屏幕提供妥当的图片尺寸。对动画元素应用 transform: translateZ(0) 或 will-change: transform 来触发 GPU 加快，并确保动画属性（如 transform ）的值为整数像素。检查图片的原始尺寸是否与闪现尺寸匹配。问题 14：想象师给了一套 SVG 图片，图片在 macos 上闪现正常，但在 windows 下异常迷糊，是你的代码问题仍是想象师出的图片的问题？要是有这么的情况，终末是怎么搞定的？谜底： 这频频是 代码或环境问题 ，而非 SVG 源文献问题。SVG 是矢量方法，表面上应在职何分离率下都了了。 常宥恕因与搞定决议：CSS 尺寸问题： 确保 SVG 的容器尺寸是整数像素，幸免非整数缩放。 width: 100.5px 可能导致迷糊。Viewport 和 ViewBox 不匹配： 检查 SVG 代码中的 viewBox 属性，并确保其与闪现尺寸成比例。浏览器渲染引擎各异： macOS 和 Windows 的字体渲染和图形抗锯齿算法不同。不错尝试为 SVG 添加 shape-rendering: geometricPrecision; CSS 属性。位图镶嵌： 要是 SVG 内嵌了迷糊的位图，那么在 Windows 上也会迷糊。TypeScript TypeScript问题 15：ts 开拓下，interface 和对象类型声明可不能以用来声明数组和函数？谜底： 不错。

// 声明数组

interface NumberArray {

[index: number]: number; // 索引签名

}

type NumberArrayType = number[]; // 更简单的样貌

// 声明函数 interface SearchFunc { (source: string， subString: string): boolean; // 调用签名 } type SearchFuncType = (source: string， subString: string) => boolean; 问题 16：要是声明函数，函数名可不能以近似？函数名要是近似，意味着什么？谜底： 在兼并个作用域内，不允许 径直声明同名函数（会报错）。但在接口或类中，不错通过 函数重载 来声明多个同名但参数/复返值不同的函数签名。

// 函数重载

function greet(name: string): string;

function greet(age: number): string;

function greet(value: string | number): string {

// 达成...

}

近似的函数名意味稳健载，调用时会把柄传入的参数类型来匹配对应的签名。

JavaScript Vue.js 深度常识问题 17：要是你用的是 Vue，在 Vue 的 ts 用法中，哪些 api 的用法运用了 ts 这一特质？谜底：Props 类型界说： 使用 defineProps 进行严格的类型检查。组件实例类型： 使用 InstanceType 来赢得模板援用（ref）的类型。Composables 类型推断： ref ， computed 会自动推断类型， reactive 也会基于对象字面量推断。事件类型界说： 使用 defineEmits 来界说和校验组件发出的事件过火载荷。问题 18：Vue 中银河国际，是不是通盘情况下，template 都会自动赢得 ref 的 .value 属性？要是不是，列举不会自动赢得的情况。谜底： 不是通盘情况。 会自动解包 .value 的情况：在

凤凰彩票官网首页 - Welcome

• 口试
• 不是
• 初心
• 银河国际
• 前端