前端技术文章
-
LongAnimationFramesAPI不检测掉帧，而是记录执行超50ms的单帧动画回调作为卡顿预警信号；它仅捕获rAF/timeout等调度任务，不含layout/paint耗时，需页面加载后运行动画再调用performance.getEntriesByType('long-animation-frame')获取数据。360 收藏 -
sticky失效主因是祖先元素overflow:hidden/auto/scroll截断滚动上下文；需逐级检查父容器overflow值，改用clip-path替代或调整DOM结构；同时确保父容器有高度、不触发新层叠上下文，且sticky元素设top等偏移值。357 收藏 -
ResizeObserver构造函数必须传入回调函数，否则报TypeError；监听目标须为已挂载DOM元素；contentRect仅含contentbox尺寸；需手动调用unobserve或disconnect清理，避免内存泄漏。447 收藏 -
清除HTML本地缓存中的恶意数据需从用户和开发者双层面入手，用户可通过浏览器设置彻底删除站点数据，包括Cookie、缓存文件及本地存储；开发者应利用JavaScriptAPI如localStorage.clear()、indexedDB.deleteDatabase()和caches.delete()等清除特定存储，并在登出时同步清理敏感信息；同时，服务器应通过Cache-Control头控制缓存策略，避免存储敏感数据；根本上，预防措施包括不将敏感信息存入客户端、启用HttpOnlyCookie、实施CS286 收藏 -
JS实现下拉菜单展开与收缩的方法通常涉及操作DOM元素的样式和事件监听。以下是基本的实现思路和示例代码：1. HTML结构
下拉菜单的展开和收缩可以通过CSS和JavaScript实现。1）使用CSS的:hover伪类可以简单实现，但不适合触摸屏。2）JavaScript方法通过toggleDropdown函数和点击事件监听器实现更灵活的控制，适合触摸屏和现代Web应用。200 收藏
本文教你用纯JavaScript（无需jQuery）批量为具有相同类名的HTML容器按1→2→3→1→2→3的规律动态添加test1/test2/test3类，实现视觉循环效果。493 收藏
在@media中用background-image响应式换图需确保选择器权重足够、路径正确（如url(./img/bg-mobile.jpg)）、补全background-repeat和background-size；注意缓存问题（加?v=版本号）、所有图均会下载的性能缺陷，以及cover/contain裁剪风险。445 收藏
配置文件懒加载的核心是按需解析、不预占内存、不提前触发IO。它通过生成器逐段yield配置块或按key延迟解析并缓存，避免传统方式一次性全量加载的资源浪费，尤其适用于大文件、多环境及动态字段场景。158 收藏
font-smooth在现代移动端浏览器中基本无效，因其是已废弃的WebKit私有属性，iOSSafari、ChromeforAndroid和FirefoxMobile均忽略，CanIUse标注无支持；真正影响字体清晰度的是-webkit-font-smoothing（仅限macOS）、text-rendering、font-weight/family组合、硬件加速触发及字体加载控制等。390 收藏
progress元素color不生效因其是替换元素，视觉由浏览器UA样式控制；必须用accent-color（Chrome93+/Firefox97+/Safari15.4+）或伪元素（如::-webkit-progress-value、::progress-value）定制样式。449 收藏
audio标签需加controls才显示控件，仅src属性会导致静默加载；必须用<source>提供mp3+ogg双格式并声明type；autoplay须配合muted才生效；原生控件不可CSS定制，需JS自定义。450 收藏
HTML页面向服务器上报数据有五种方式：一、表单提交；二、XMLHttpRequest；三、FetchAPI；四、Image对象GET上报；五、WebSocket持续上报。418 收藏
Ruby注音必须严格使用rb+rt结构，单独ruby或rt无效；rp用于降级兼容；需CSS控制字号行高；自动化生成须逐字处理并人工校验多音字。268 收藏
list-style-position:outside是对齐混乱的根源，因序号绘制在内容框外且不参与盒模型计算，导致序号与文字左边缘错位；应设为inside并统一重置ul/ol的margin和padding，配合box-sizing:border-box与明确line-height确保稳定对齐。213 收藏
HTTPS页面加载HTTP资源会被现代浏览器默认阻止，主动混合内容（如script、iframe）直接报错阻断，被动内容（如img）在Chrome94+也统一阻止；应将所有http://替换为https://，并检查API、第三方SDK及构建流程。446 收藏