前端技术文章
-
真正可交付的HTML模板美化必须依赖外部CSS+语义化结构+可控作用域，通过:root声明CSS变量统一管理主题色与间距，支持暗色模式切换，避免内联样式及appearance:none单独使用导致的兼容问题。325 收藏 -
Object.isFrozen不能判定“全局单例是否处于只读安全期”，它仅检测对象是否浅层冻结（不可扩展、属性不可配置且不可写），不感知初始化完成、运行时锁、并发安全或深嵌套可变性。500 收藏 -
text-align用于设置文本水平对齐方式，包括left（左对齐）、right（右对齐）、center（居中）、justify（两端对齐）及start/end（智能对齐），适配多语言与排版需求，提升可读性与视觉层次。139 收藏 -
可通过HTML和CSS纯代码绘制圆形、椭圆、三角形、梯形、六边形等几何形状：圆形需正方形+border-radius:50%；椭圆为长宽不等矩形+50%圆角；三角形利用透明边框交汇；梯形用skew变形或clip-path；六边形用polygon()裁剪。405 收藏 -
Grid容器结合absolute定位时，需将容器设为relative，使绝对定位元素以其为参考点。.overlay等脱离文档流的元素不参与网格布局，常用于角标、弹窗等叠加效果，提升布局灵活性。185 收藏 -
HTML组件测试实为HTML+CSS+JS构成的可复用UI单元测试，需用Playwright通过getByRole定位、断言状态变化与真实交互反馈，并在真实浏览器中验证动态属性同步与可访问性，而非仅测静态标签。147 收藏 -
CSS计数器方案可实现无JS行号：用pre+code结构，配合counter-reset、counter-increment及::before伪元素生成行号，兼容IE11+且不影响代码复制。467 收藏 -
用max-width配合width:100%是控制容器响应式宽度最稳妥的方式，比单纯用width:100%或width:100vw更可靠，尤其在嵌套、缩放、滚动条场景下不容易溢出或错位。487 收藏 -
优先用XLSX.writeFile或加BOM头的Blob导出CSV，避免手动拼接导致中文乱码、错列等问题；关键点包括添加\uFEFFBOM头、正确转义双引号、过滤隐藏行列、处理iOS降级等。124 收藏 -
absolute元素用left:50%top:50%偏右下因定位的是左上角；需配合transform:translate(-50%,-50%)反向平移自身宽高50%才能真正居中，且该百分比基于元素自身尺寸。289 收藏 -
WebSocket需手动实现重连机制，关键包括：onclose须在readyState=0时用addEventListener绑定；采用指数退避（起始1s、倍率1.6、上限30s）并设最大重试次数；结合心跳（25sping/15spong超时）与连接标识防消息混乱；所有send前校验readyState===OPEN且匹配_ws._id。413 收藏 -
PerformanceMonitor可实时监控JSHeap波动，刷新即显，适合快速排查内存异常增长；它显示可到达对象的堆内存、DOM节点数等四条曲线，但不记录历史或展示引用链。352 收藏 -
答案：前端权限路由通过用户角色动态生成可访问路由。登录后，后端返回角色权限，前端根据meta字段中的角色信息过滤动态路由，利用router.addRoute注册合法路由，并结合导航守卫控制跳转，确保用户仅能访问授权页面，同时菜单同步渲染，提升安全与体验。127 收藏 -
使用float可实现图片并排排列，通过float:left或right使图片脱离文档流并靠向指定方向，结合width和margin控制布局，每行显示多图并自动换行；需用overflow:hidden或clear:both清除浮动避免父容器高度塌陷；配合媒体查询实现响应式，在小屏幕下改为堆叠显示以提升可读性。299 收藏 -
本文详解如何通过JavaScript精确限制缩放/平移图像的可视边界，确保图像边缘始终不超出容器视口，尤其解决高缩放倍率下边界失效的问题。152 收藏