-
SSE基于HTTP实现服务端向浏览器的单向实时推送，使用EventSourceAPI建立连接，服务端以text/event-stream格式持续发送数据，支持自动重连与自定义事件，适合通知类低频实时场景。
-
推荐将HTML结构与JS逻辑分离：index.html仅保留结构和挂载点，main.js单独编写并用script标签引入；务必通过LiveServer启动，确保DOM加载完成后再绑定事件，优先使用addEventListener而非内联onclick。
-
本文介绍因HTML结构不当导致的图像悬停抖动及热点区域（area）偏移问题，通过移除冗余换行符、统一容器布局与优化交互逻辑，彻底解决地图切换时的位置跳变与“hitbox”失效问题。
-
为什么BEM能减少样式冲突BEM（Block-Element-Modifier）不是魔法，它靠命名规则强行切断CSS选择器的隐式依赖。传统写法里.header.nava这种嵌套选择器，一旦组件挪位置、父级加类、甚至只是引入第三方UI库，就可能意外覆盖或被覆盖。BEM强制每个类名自包含：header__nav、header__nav-link、header__nav-link--active——没有层级假设，不依赖DOM结构，自然不怕嵌套变动或第三方干扰。怎么写才算合规的BEM类名三个部分必须严
-
transform-origin的默认值是50%50%，即元素盒模型的几何中心；若元素存在padding、border、裁剪或定位偏移，视觉中心与几何中心不一致，会导致旋转“歪了”。
-
:has()伪类仅在Chrome105+默认可用，Firefox需手动启用标志，Safari完全不支持，仅适用于渐进增强；它不支持伪元素、动态伪类及深层嵌套，权重遵循常规层叠规则，调试时需关注DevTools中的无效提示。
-
grid-row和grid-column未生效的主因是父容器未设display:grid或布局属性干扰；需检查线号范围、避免与grid-area混用，并注意DOM顺序与可访问性问题。
-
<mark>标签本身性能开销极小，真正影响首屏速度的是不当CSS样式、大规模无节制渲染及客户端动态插入等误用行为。
-
元素拖拽时突然跳到页面右侧，通常是因为错误地将视口坐标直接赋值给left/top样式，而未考虑定位上下文（如父容器的position:relative）和单位基准；解决关键是使用相对于父容器的偏移量，并将被拖元素设为position:absolute。
-
<link>引入外部CSS必须写在<head>中，rel="stylesheet"和href缺一不可；href路径需正确（相对路径以HTML文件位置为基准，根目录路径加斜杠），且服务器需返回text/cssMIME类型、CSS语法无误、缓存已更新。
-
采用一体化项目结构，将前端frontend与后端backend整合于同一根目录，通过配置构建工具输出前端资源至backend/src/main/resources/static，实现静态文件自动集成；后端使用@RestController提供/api/v1/前缀的RESTful接口，配合CORS允许前端域名访问；开发阶段前端利用Vite等工具的代理功能将/api请求转发至后端8080端口，兼顾热重载与跨域解决；前后端分离运行、统一接口规范、自动化构建部署，提升协作效率与项目可维护性。
-
动态import()是浏览器原生支持的唯一可靠动态模块加载方式，返回Promise，支持表达式路径、CORS远程加载及错误捕获，但要求远程脚本为ES模块格式且响应头正确。
-
本文详解HTML中<button>点击后页面瞬间跳转又返回首页的问题，核心原因是事件对象未正确传递导致event.preventDefault()失效，同时提供更简洁可靠的替代方案——使用语义化<a>标签。
-
实时数据可视化首选Canvas因其直接操作像素的优势。通过减少重绘区域与频率、使用离屏Canvas预渲染静态内容、精简绘图操作并分组绘制、结合数据降采样与视口裁剪，可显著提升性能。核心是“少画、快画、聪明地画”，实现每秒上千次更新的高效渲染。
-
本文详解如何从结构为{"28338":{"high":696000000,...},...}的API响应中，精准提取每个顶层键对应的high值，生成Map<string,number>或普通对象映射，解决因忽略响应嵌套层级（如data字段）导致的undefined问题。
