-
新手学CSS应先掌握12个核心属性：display/position控制布局行为，box-sizing/width-height/padding-margin管理盒子模型，font-size/line-height/color/text-align处理文本呈现，background/border/outline/box-shadow负责视觉效果。
-
本文详解为何直接向数组推送Object.keys()后调用.sort()无法实现排序，揭示JavaScript数组嵌套与原地排序机制的关键差异，并提供简洁、高效、符合最佳实践的对象键名排序方案。
-
ShadowDOM是唯一浏览器原生支持的完全样式隔离机制，通过作用域边界确保内外样式互不干扰，而CSSModules等仅为构建时模拟，缺乏浏览器级保障。
-
粘性定位元素滚动时“消失”是因触发条件未满足或父容器干扰：需确保父容器有可滚动上下文、top值合理、无裁剪遮挡及兼容性问题。
-
HTML表格实现可展开树形行需用data-level和data-parent-id标记父子关系，子行初始hidden，点击父行时动态querySelectorAll匹配data-parent-id并切换显隐；CSS缩进用padding-left配合CSS变量，禁用transform缩进；tr不支持height过渡，改用td内边距或max-height动画。
-
生成器和迭代器基于统一协议实现惰性求值与数据遍历，通过next()方法返回{value,done}对象，生成器函数简化了迭代器创建过程，提升处理大数据序列的效率与代码可读性。
-
使用async/await和mock技术可有效测试异步代码和副作用。首先通过async测试函数或返回Promise确保等待异步完成，如：test('fetchesdata',async()=>{constdata=awaitfetchData();expect(data).toEqual({id:1});});接着用jest.mock或spyOn隔离外部依赖，例如模拟fetch实现：global.fetch=jest.fn(()=>Promise.resolve({json:()=>Pr
-
<link>放在<head>仍会闪屏，因CSS加载延迟（如@import嵌套、网络慢、动态插入）导致FOUC；需内联关键样式、异步加载非关键样式，并配置font-display:swap等优化字体加载。
-
用sed或awk可快速将纯文本转为无格式HTML：sed命令可添加html/body标签、将空行转<br>、非空行包<p>；需先清理Windows换行符；若含Markdown，推荐用Pythonmarkdown库并启用fenced_code和tables扩展，注意XSS防护与UTF-8编码处理。
-
Leaflet地图在React应用中因视口缩放未正确配置，导致移动端渲染时内容溢出、遮挡Navbar；根本解决方案是在HTML<head>中添加严格控制的viewport元标签。
-
Promise.all()用于并行处理多个Promise，返回所有Promise完成后的结果数组。1)它简化了多个异步操作的处理，2)但需注意任何一个Promise被拒绝会导致整体失败，3)结果数组顺序与传入顺序一致，4)不提升性能但使代码更易管理，5)可与Promise.allSettled()结合使用以处理所有Promise结果。
-
CSS背景渐变方向由linear-gradient()首参控制，可用关键词（如toright）或角度（如90deg），角度以中心为原点顺时针计算：0deg向上、90deg向右、180deg向下、270deg向左；45deg为左上到右下，-45deg为右上到左下；颜色后可加位置值精确控制过渡。
-
浮动元素缩放换行是因父容器宽度收缩致子项溢出，min-width须设在父容器并精确计算总占用宽（含边距等）；替代方案优先选flex或grid。
-
Set和Map是ES6专为去重/存在性判断与灵活键值映射设计的原生集合类型；Set自动去重、O(1)查询、支持集合运算；Map支持任意类型键、保持插入顺序、无原型污染，语义清晰且性能更优。
-
flex-shrink是控制元素在容器空间不足时相对于自身flex-basis的收缩份额，而非缩小比例；其实际收缩量由（自身flex-basis×flex-shrink）占总权重的比例决定，且flex-basis默认为auto。
