-
flex-shrink未生效的根本原因是min-width:auto阻止收缩，必须显式设置min-width:0，并配合word-break或overflow-wrap强制折行及overflow:hidden裁剪。
-
使用text-align:justify可实现HTML文本两端对齐，使段落左右边缘整齐，适用于正文、新闻等正式排版场景，但需注意短文本可能导致字间距过大，影响阅读体验。
-
浮动布局通过float实现文字环绕或简单多列，需注意清除浮动；2.定位布局利用position控制元素位置，适合弹窗、吸顶等特殊效果；3.弹性盒子（Flexbox）为一维布局，适用于导航、居中等组件级排布；4.网格布局（Grid）是二维系统，擅长复杂页面结构如仪表盘；5.传统文档流为基础布局方式。现代开发推荐优先掌握Flexbox和Grid。
-
flex布局比百分比更可靠，因其自动分配剩余空间、处理溢出且不受边框/内边距四舍五入影响；推荐display:flex+flex-wrap:wrap，用gap替代margin，父容器设box-sizing:border-box。
-
在SVG中为不同<text>元素添加不同背景色时，若复用相同id的<filter>，会导致所有文本均应用首个定义的滤镜颜色；解决方法是为每个滤镜分配唯一id，并确保filter属性正确引用对应ID。
-
:only-of-type只判断同级中同标签是否唯一，无视class等属性；真正需要“唯一某类元素”时应改用:is(.item):not(.item~.item)或JavaScript检测。
-
favicon.ico放根目录虽可被部分浏览器自动加载，但iOS/Android需显式link声明，HTTPS下HTTP图标会被拦截，缓存顽固须硬刷新或改名，PWA必须配manifest.json。
-
图片在flex容器中被拉伸变形的根本原因是默认flex-shrink:1与align-items:stretch共同作用，解决关键是img{flex-shrink:0;width:100%;height:auto;}，并依flex-direction调整尺寸声明。
-
箭头函数的this继承外层普通函数作用域的this值，不绑定执行上下文；不能用call/apply/bind修改，不可作为构造函数，无arguments对象。
-
需先通过DOM获取media元素实例（如querySelector或getElementById），确保脚本在DOM加载后执行；跨域资源需加crossorigin="anonymous"；play()必须由用户手势触发并处理Promise拒绝；常用属性包括currentTime、volume（iOS受限）、muted、paused、ended、playbackRate；应监听canplay、canplaythrough、timeupdate、ended等事件而非轮询。
-
实现元素旋转动画需结合transform、@keyframes和animation。首先用transform:rotate()设置旋转角度，再通过@keyframes定义从0deg到360deg的动画帧，接着使用animation属性指定动画名称、时长、速度曲线和循环次数，如animation:spin2slinearinfinite可实现匀速无限旋转。常用于加载动画或悬停效果，注意设置transform-origin确保旋转中心正确，默认为centercenter。
-
join()是数组方法，将数组元素用指定分隔符连接成字符串，默认逗号分隔，不修改原数组；split()是字符串方法，按分隔符将字符串拆分为数组，分隔符可为字符、字符串或正则，返回新数组。两者功能相反，数据类型与返回值不同，常用于数据转换与文本处理。
-
答案：高性能JavaScript动画引擎需基于requestAnimationFrame同步屏幕刷新，避免布局抖动，使用transform等合成属性，结合时间驱动插值与缓动函数，批量更新样式，并管理动画生命周期以实现流畅效果。
-
答案是使用for循环和Math.sqrt(n)判断质数：首先排除小于2的数，然后从2循环到√n，若存在整除则非质数，否则为质数。
-
使用浏览器开发者工具和PerformanceAPI定位执行超50毫秒的JavaScript长任务：1.用ChromeDevToolsPerformance面板录制并分析火焰图中Main线程上的长任务；2.通过PerformanceObserver监听longtask条目实现生产环境监控；3.结合主线程活动、FPS及CPU指标判断影响；4.采用代码分割、WebWorker或setTimeout分片优化。
