前端技术文章
-
CSSmin()函数不能写在HTML标签里，必须写在CSS规则中；它是一次性取最小计算值，需含vw/rem/%等动态单位才有效，否则为静态值。235 收藏 -
说明：width: 100% 会让图片宽度等于其父容器的宽度。displ">
最直接有效的方式是设置img{width:100%;height:auto;display:block;}；固定尺寸容器用object-fit:cover/contain；装饰性图片推荐背景图；全屏场景结合vw或%单位。267 收藏 -
Object.entries配合reduce可一行将对象转为Map，且支持值加工；关键是以newMap()为初始值，每次调用set后返回同一实例。276 收藏 -
JavaScript可通过CanvasAPI进行基础图像处理，如灰度化和边缘检测；结合TensorFlow.js可实现浏览器端图像分类与目标检测；借助tracking.js、face-api.js等库能简化开发；但需注意性能瓶颈与跨域限制，适合前端实时处理与轻量级识别任务。193 收藏 -
class命名应全小写连字符分隔，按功能而非样式命名，避免拼音、中文、驼峰、下划线；推荐BEM结构，JS操作用classListAPI确保安全。249 收藏 -
WeakMap是实现业务组件状态“硬隔离”托管的最可靠原生方案，其键必须为对象、不可遍历、无size/clear方法，且键失联后自动GC回收，确保状态与实例在语言机制层面强绑定。336 收藏 -
String.prototype.normalize()是解决Unicode等价性问题的核心方法，支持NFC、NFD、NFKC、NFKD四种标准化形式，分别适用于显示存储、底层处理、搜索匹配和文本清洗，但不处理简繁体等非等价字符。168 收藏 -
本文详解如何用纯CSS实现ChatGPT风格的聊天容器：新消息始终出现在可视区域底部，旧消息自然上移；聊天区独立滚动，父容器保持100%高度且无多余滚动条。本文详解如何用纯CSS实现ChatGPT风格的聊天容器：新消息始终出现在可视区域底部，旧消息自然上移；聊天区独立滚动，父容器保持100%高度且无多余滚动条。要构建一个专业、流畅的聊天UI（如ChatGPT），关键在于消息流的视觉逻辑：新消息“生长”于底部，历史消息被向上推挤，且仅聊188 收藏 -
HTML不能做权限管理，权限控制必须由后端决定是否返回DOM节点或权限数据，前端仅负责根据后端返回的细粒度权限字符串（如"product:delete"）动态控制元素显隐，通过data-permission标记和事件委托批量更新视图，并确保API和服务端模板同步鉴权。317 收藏 -
calc()不能直接用于颜色值，仅hsl()/hsla()的h/s/l参数及rgb()/rgba()各通道可间接使用calc()，因它们接受角度、百分比或无单位整数。228 收藏 -
JavaScript错误处理需分层拦截、类型识别与明确抛出：try...catch不捕获异步错误、语法错误及未处理Promise拒绝；应使用Error子类区分业务异常，Promise链须显式catch，全局需同时监听error和unhandledrejection事件。499 收藏 -
embed标签必须显式设置type="application/pdf"，否则Firefox/Safari会失败；iframe兼容性更好；复杂功能需用pdf.js实现。413 收藏 -
document.title是最直接有效的动态改标题方式，它直接控制HTML页面的<title>标签内容，赋值后立即反映在浏览器标签页上，无需操作DOM节点或重新渲染。141 收藏 -
loading="lazy"并非万能，需考虑浏览器兼容性、首屏关键图加载稳定性、srcset/sizes语法正确性、框架属性透传及局部滚动容器限制。460 收藏 -
使用opacity可设置元素整体透明度，取值0到1，但会影响所有子元素；若仅需背景半透明，推荐使用RGBA颜色值，如background-color:rgba(0,0,0,0.5)，以保持文字清晰。198 收藏
说明：width: 100% 会让图片宽度等于其父容器的宽度。displ