-
使用@import会因串行加载导致渲染阻塞，而改用link标签可实现并行下载，提前触发资源请求，缩短关键渲染路径，提升页面首次渲染速度。
-
文字发灰主因是屏幕色域、亮度、对比度及环境光差异，非颜色值问题；应优先保障明度对比、采用LCH/OKLCH色彩空间、用@media适配屏幕特性，并确保WCAG对比度达标。
-
核心原因是图标字体渲染依赖font-size和vertical-align等文本属性，而非宽高；应统一父容器font-size、设置vertical-align对齐、避免混用字体与SVG版本。
-
Sassmixin可高效复用样式，通过@mixin定义、@include调用，支持参数、默认值、可变参数及条件逻辑，提升开发效率与维护性。
-
TailwindCSS通过工具类提升开发效率，首先利用响应式前缀如sm:、md:实现移动优先布局，例如text-leftmd:text-center使文本移动端左对齐、桌面居中；其次使用hover:、focus:等状态变体定义交互效果，保持视觉反馈简洁；当类名重复时，通过组件封装或@apply抽离共用样式，如.btn-primary合并常用类；再结合px、py、gap及flex、grid构建清晰响应式结构，如containermx-auto配合flex布局实现居中卡片；最终在灵活使用工具类与适时抽象间取得
-
JavaScript运算符是实现动态逻辑的核心工具。1.算术运算符（如+、-、、/、%、*、++、--）用于数学计算，但需注意浮点精度问题，例如0.1+0.2!==0.3；2.比较运算符（==、===、!=、!==、<、>等）判断值关系，推荐使用===和!==以避免类型转换带来的错误；3.逻辑运算符（&&、||、!）支持短路求值，可简化条件判断，如name=user.name||'匿名用户'和admin&&admin.doSomething()；4.赋值运算符（+=、-=等）和三元运算符（?:
-
模板引擎通过字符串生成HTML，虚拟DOM以对象映射UI并高效更新。1.模板引擎如Handlebars用{{}}插值和逻辑控制生成HTML字符串，直接操作真实DOM，易造成性能浪费；2.虚拟DOM如React、Vue将结构转为JS对象，通过Diff算法比对差异，批量更新真实DOM，减少重绘回流；3.Vue等框架融合两者，模板编译为渲染函数，兼顾开发体验与运行效率；4.简单项目选模板引擎，复杂应用优先虚拟DOM框架，提升动态更新性能。
-
SSE是服务器向浏览器单向推送数据的技术，基于HTTP、使用EventSourceAPI实现，适合实时更新场景。1.前端通过newEventSource()连接后端接口，onmessage接收数据；2.后端返回Content-Type为text/event-stream，按格式发送data、event、id、retry字段；3.支持自定义事件监听与断线重连，浏览器自动携带Last-Event-ID恢复；4.适用于日志监控、行情推送等服务端频繁推送场景，但不支持二进制和IE，需注意代理缓冲配置。
-
使用flex-wrap和overflow可解决Flex布局子元素溢出问题。1.设置flex-wrap:wrap允许子元素换行，避免横向溢出；2.当禁止换行时，通过overflow-x:auto添加滚动条；3.结合min-width:0防止项目被压缩过度；4.实际应用中根据需求选择策略：响应式布局用换行，单行展示用滚动，弹性内容配min-width与overflow，合理组合即可有效控制溢出。
-
background-size:cover和contain的核心区别在于图片适应容器的方式。cover会等比缩放图片以覆盖整个容器，可能裁剪图片；而contain会等比缩放以完整显示图片，可能留白。1.cover常用于全屏背景、卡片封面等需要视觉冲击的场景，优点是填满容器，缺点是可能裁剪关键内容。2.contain适用于Logo、图标等不可裁剪的场景，优点是完整展示图片，缺点是可能出现空白。选择时根据内容优先级和视觉需求决定：若需填满且可裁剪，用cover；若需完整显示且可接受留白，用contain。此外
-
在HTML中，margin是CSS属性，用于控制元素与周围元素的间距。使用方法包括：1.设置单一值（如margin:10px）；2.设置双值（如margin:10px20px）；3.设置三值（如margin:10px20px30px）；4.设置四值（如margin:10px20px30px40px）。
-
首先保存HTML文件为.html格式，然后可通过安装SideBarEnhancements插件右键OpeninBrowser打开，或手动配置BuildSystem实现Ctrl+B运行，也可直接拖拽文件到浏览器中预览。
-
简写属性通过合并多个子属性减少代码量，提高可读性，但可能重置未显式声明的子属性为默认值；完整写法则逐项设置，更明确但冗长。1.margin和padding按上右下左顺序支持1~4个值的简写；2.border简写需同时定义宽度、样式、颜色，适用于四边相同场景；3.font简写需遵循特定顺序且必须包含font-size和font-family；4.background简写可配置图像、重复、位置、尺寸和颜色等，但修改单一属性时建议用完整写法以避免覆盖其他设置。合理使用简写能提升效率，但需注意默认值风险。
-
JavaScript模块化通过拆分功能为独立单元，解决命名冲突与依赖混乱。从函数封装、对象字面量、IIFE到CommonJS、AMD，最终ES6Modules成为标准，实现静态分析与tree-shaking。现代项目应优先使用ES6Modules，配合构建工具提升可维护性。
-
output标签用于语义化展示表单中动态计算的结果，如实时求和、总价计算、密码强度提示等；通过name属性标识输出项，for属性关联依赖的输入元素，提升可访问性与结构清晰度，相比innerHTML或value更具语义优势。
