-
使用MiniCssExtractPlugin提取公共CSS，通过CssMinimizerPlugin压缩文件，结合splitChunks优化公共样式，实现异步加载与顺序控制，提升页面加载与渲染性能。
-
前端调用SpringBootActuator需先启用端点并配置CORS。1.引入actuator依赖并在application.yml中暴露health、info等端点；2.通过WebMvcConfigurer配置允许前端域名访问/actuator/**路径；3.前端使用fetch请求如/actuator/health获取数据；4.生产环境应限制敏感端点，结合SpringSecurity添加认证，避免直接暴露env、shutdown等高危接口。
-
HTML需通过标准方式引用外部资源：一、用<linkrel="stylesheet">引入CSS；二、用<scriptsrc>加载JS，可加defer/async；三、用@import或<link>引入字体；四、用img/audio/video的src或source嵌入媒体；五、用a标签跳转或fetch调用API。
-
本文介绍如何使用defer和shareReplay构建真正的惰性Observable，确保昂贵的异步计算（如API调用或初始化逻辑）仅在第一次订阅时触发，且结果被安全共享给后续所有订阅者。
-
实现虚拟列表的核心是只渲染可视区域内的项，通过计算滚动位置和项高度确定显示范围，用空白占位维持滚动高度，从而提升长列表性能。
-
Notepad++默认不识别HTML\_等带下划线的非标准扩展名，需手动在“设置→首选项→文件关联”中将HTML\_绑定至HTML语言，或直接编辑config.xml添加<associationext="HTML_"lang="html"/>，修改后需重载文件才生效。
-
:first-child匹配父元素的第一个子元素且类型需一致，而非首个某类型元素；应改用:first-of-type才能准确选中第一个p等目标类型元素。
-
优先用Flex布局解决缩略图与标题对齐问题：给图片容器设display:flex;align-items:flex-start;，标题用align-self:center;；避免float和vertical-align失效，统一弹性容器对齐基准，并删除固定height确保响应式正常。
-
HTML响应式开发需用外部CSS文件+viewport声明，配合移动优先的媒体查询、vw/vh/clamp()单位，以及touch-action、IntersectionObserver等性能优化手段。
-
viewportmeta标签缺失或参数错误是平板端样式错乱的主因，正确写法为<metaname="viewport"content="width=device-width,initial-scale=1">，常见错误包括漏写initial-scale=1、禁用缩放或使用固定宽度；媒体查询应结合pointer:coarse等特性提升精度；老AndroidWebView对flex-wrap支持差，需降级处理；iPad字体应优先用rem配合html{font-
-
HTML和CSS无内置单位换算功能，唯一可靠方式是用getComputedStyle获取已挂载元素的计算后px值并parseFloat提取数字，手动换算需考虑rootfont-size动态变化、vw/vh视口依赖、ch字体差异及CSS自定义属性解析。
-
Effect作用域与嵌套Effect清理机制是Vue响应式系统保障依赖准确追踪和避免内存泄漏的核心：通过effectScope()显式划分副作用边界，scope.run()注册effect，scope.stop()批量清理；嵌套effect按作用域层级自动管理生命周期，父effect重执行时仅清理同scope子effect，全局或异步effect需手动绑定并清理。
-
安全定义全局主题色需在:root中单独声明--primary-color，避免被高优先级选择器覆盖；深色模式应拆分变量并用class控制；局部重置须在容器上直接声明变量；fallback仅在变量未定义时生效，需双层保障；动态更新变量后需注意重绘问题。
-
浮动布局中每行固定数量的原理是容器宽度与子项宽度及间距共同决定换行时机，而非float本身控制列数；需精确计算尺寸、清除浮动并处理边界细节。
-
Tailwindv3.4并未新增Grid功能，仅放宽任意值解析限制，使grid-cols-[repeat(auto-fit,_minmax(300px,_1fr))]等写法生效，需满足content配置匹配、空格转义为下划线、不嵌套引号三个条件。
