前端技术文章
-
推荐用@mixinclearfix封装，输出::before、::after及*zoom:1兼容IE6/7，避免手动重复、维护难和失效问题；但BFC已触发时（如overflow:hidden、flex/grid）不应滥用。235 收藏 -
用canvas+getImageData手动改色是唯一靠谱方式，需逐像素按通道加权重做非线性映射，才能实现胶片特有的高光/阴影分离、青橙对比、颗粒感与褪色偏移。135 收藏 -
JavaScript事件监听器生效需满足三条件：元素存在、绑定成功、事件路径未中断；动态元素须用事件委托；注意避免移除失败、重复绑定、冒泡阻断及CSS禁用事件。192 收藏 -
展开运算符（...）实现浅拷贝并覆盖属性，即先展开原对象再以后面同名属性为准；仅复制顶层属性，嵌套引用类型仍共享内存；支持解构排除、动态键及条件更新，比Object.assign更声明式。326 收藏 -
函数柯里化是将多参函数转为单参函数链，通过闭包逐步收参、延迟执行；函数组合则串联单参函数，让数据从右向左流动。二者结合可提升代码复用性、可测试性与表达力。352 收藏 -
预加载核心是通过link标签提前加载关键资源以提升性能。1.使用rel="preload"并配合as属性指定资源类型，如字体、脚本、样式等；2.正确设置as值避免重复请求；3.结合media属性按条件加载；4.避免滥用以防阻塞队列。精准预加载可显著优化首屏速度。302 收藏 -
:required伪类仅匹配原生支持required属性的表单元素（input/select/textarea）且HTML中真实存在required属性；JS设置property、框架未透传、ShadowDOM隔离、Safari旧版bug或选择器错误均会导致失效。442 收藏 -
HTML本身不能CDN加速，需将script/link/img等外部资源替换为CDN域名URL；通过浏览器Network面板检查RequestURL是否为CDN地址及响应头x-cache等字段验证是否命中CDN。115 收藏 -
Canvas需显式设置width/height属性并配JavaScript才能绘图，CSS仅拉伸致模糊；必须用getContext('2d')获取上下文对象操作，且需DOM加载后执行，否则为空白或异常。240 收藏 -
最有效解法是正确使用.clearfix类：必须包含content:"";display:table;clear:both，且加在直接包裹浮动子元素的父容器上；单独写clear:both在父元素上无效，因clear只影响自身位置，不解决父容器无法感知浮动子项的高度塌陷问题。353 收藏 -
现代响应式布局应以flexbox+grid为核心，外层grid划分区域、内部flex流式排列，配合srcset、clamp、prefers-reduced-motion等原生特性实现真正可用的跨设备体验。352 收藏 -
核心解决思路是控制子项自身对齐行为并限制内容溢出表现：设align-self:start/center防撑高，配合max-height:100%和overflow:auto实现安全滚动。140 收藏 -
不能只靠[dir="rtl"]选择器，因为它仅匹配显式设置dir="rtl"的元素，无法捕获继承或浏览器自动推断RTL方向的元素；:dir(rtl)则基于实际文本流方向匹配，支持继承与自动推断，且在主流浏览器中已逐步支持。262 收藏 -
<address>标签专用于声明页面或文章的责任人联系信息，如作者、维护者邮箱或官网链接；仅允许嵌套<a>、<em>、<br>等短语内容，作用域限于最近<article>或<body>顶层，不可用于普通地址或跨作用域混用。103 收藏 -
动态发布编辑器的核心是让用户输入后立即以HTML形式追加并可交互；应使用createElement+textContent安全插入，避免innerHTML导致的DOM重置、性能下降、XSS风险及事件丢失。398 收藏