最近项目上线，用户一多，页面就卡得不行。首屏加载 3 秒起，滚动掉帧，手机发烫……被 QA 喊去聊了好几次。 没办法，只能低头研究性能优化。翻了一圈文档和实战案例，发现现代浏览器其实给了我们很多“外挂”——...
HTML
弃用 html2canvas！快 93 倍的截图神器
在前端开发中，网页截图是个常用功能。从前，html2canvas 是大家的常客，但随着网页越来越复杂，它的性能问题也逐渐暴露，速度慢、占资源，用户体验不尽如人意。 好在，现在有了 SnapDOM，一款性能...
一个隐藏的 HTML 属性帮我省下了 500 行 JavaScript 代码
上周二，我在改一个“远古”管理后台的时候，被自己气笑了。 为了维护几个弹窗，我居然堆了 500 多行 JavaScript： 管理焦点的 focus trap 监听 Esc 关闭 点击遮罩关闭 一堆 ARIA 无障碍属性...
神技！Canvas竟可手绘富文本+SVG+路径？一文解锁高阶渲染黑科技
在现代前端开发中，HTML 与 DOM 提供了声明式、对象化的界面构建方式。浏览器自动管理布局、样式和事件。然而，<canvas> 完全不同——它是一个基于命令的绘图表面，没有内置的“元素”概念。 Canvas ...
HTML+CSS实现3D时间轴！！附源码！！
效果展示 完整源码 <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>3D旋转时间轴</title> <link re...
前端实现画中画超简单，让网页飞出浏览器
Document Picture-in-Picture 介绍 今天，我来介绍一个非常酷的前端功能：文档画中画 (Document Picture-in-Picture, 本文简称 PiP)。你有没有想过，网页上的任何内容能悬浮在桌面上？ 视频流媒体的画中画...
HTML&CSS ：卡片去边角效果
这段代码创建了一个带有装饰性按钮的卡片(图片去边角)，通过 CSS 技术实现了按钮的装饰性效果，为页面添加了视觉吸引力。 演示效果 HTML&CSS <!doctype html> <html> <head>...
前端实现文件预览img、docx、xlsx、ppt、pdf、md、txt、audio、video
前言 最近有接到一个需求，要求前端支持上传制定后缀文件，且支持页面预览，上传简单，那么预览该怎么实现呢，尤其是不同类型的文件预览方案，那么下面就我这个需求的实现，答案在下面 「具体的预览需求：...
如何一次性渲染十万条数据
前言 后端一次性返回过多数据时，我们前端应该如何渲染，本文提供了两种比较适合方案供大家参考 直接渲染 先看下直接渲染会有什么问题吧 先模拟下这个数据过多时的情景，我生成十万条li，然后每个li...
HTTP 面试真题
1、如何理解OSI七层模型? 1.1 是什么 OSl(Open System Interconnect)模型全称为开放式通信系统互连参考模型，是国际标准化组织(ISO)提出的一个试图使各种计算机在世界范围内互连为网络的标准框架 ...