30+ 个工作中常用到的前端小知

type

status

date

slug

summary

2.使用css写出一个三角形角标

元素宽高设置为0，通过border属性来设置，让其它三个方向的border颜色为透明或者和背景色保持一致，剩余一条border的颜色设置为需要的颜色。

3.水平垂直居中

我一般只使用两种方式定位或者flex，我觉得够用了。

父级控制子集居中

4. css一行文本超出...

5.多行文本超出显示...

6.IOS手机容器滚动条滑动不流畅

7.修改滚动条样式

隐藏div元素的滚动条

‌兼容性说明：‌

仅支持 WebKit 内核浏览器（如 Chrome/Safari/新版 Edge），Firefox 等浏览器需通过 scrollbar-width 和 scrollbar-color 属性调整样式。

‌替代隐藏方案：‌

‌视觉覆盖法‌

用与背景同色元素定位覆盖滚动条区域，实现“视觉隐藏”。

‌尺寸截断法‌

父容器设置 overflow: hidden，子元素宽度/高度略大于父容器，直接截断滚动条。

‌适用场景：‌

需精细样式时用 ::-webkit 伪类定制，但注意兼容性。

仅需隐藏滚动条时，推荐替代方案，简单高效。

‌8. iOS 音频自动播放与循环播放解决方案‌

问题背景

iOS 系统为防止用户流量消耗，默认阻止音视频自动播放，需通过用户交互触发播放。

技术方案

注意事项

需真实用户交互（如点击）才能触发播放

微信浏览器需监听 WeixinJSBridgeReady 事件

循环播放推荐用 currentTime 重置而非 load() 重载

‌9. 页面元素隐藏方案对比‌

方法	空间占用	事件触发	渲染性能	适用场景
`display: none`	❌ 不占用	❌ 不触发	触发重排	彻底移除元素
`opacity: 0`	✅ 占用	✅ 可触发	触发重绘	需要过渡动画的元素
`visibility: hidden`	✅ 占用	❌ 不触发	性能最优	保留布局但无需交互的隐藏元素

‌10. 前端工程化体系解析‌

核心理念

通过工具链和规范化流程，解决 ‌开发效率‌、‌质量管控‌ 和 ‌协作成本‌ 三大核心问题。

技术矩阵

阶段	典型工具/方案	解决的问题
初始化	`npm init`/`plop`	项目模板生成
开发	`Webpack`/`Vite`/`Babel`	模块化构建与语法兼容
质量管控	`ESLint`/`Prettier`/`Jest`	代码规范与自动化测试
部署	`Docker`/`Jenkins`/`Git CI`	持续集成与自动化发布
监控	`Sentry`/`Performance` API	线上异常与性能追踪

演进趋势

从「刀耕火种」到现代工程体系，驱动因素包括：

应用复杂度提升（SPA/SSR/跨端）

团队协作规范化需求

性能优化与质量保障要求

‌11. contenteditable 特性深度指南‌

基础用法

特性对比

功能	input/textarea	contenteditable
事件机制	支持 change/input	仅 input 事件
内容限制	原生 maxlength 属性	需手动实现字符限制
富文本能力	仅纯文本	支持 HTML 格式

进阶实现

应用场景

富文本编辑器（协同编辑）

动态内容批注功能

自定义输入组件开发

12. calc

calc() 是CSS的计算函数，能混合不同单位进行运算，如：

优点是增强布局灵活性，缺点是可能降低代码可读性。使用时建议添加注释说明计算逻辑。

13. Date对象

获取当前时间毫秒值：

创建Date对象时注意跨平台兼容性：

14. Proxy和Object.defineProperty区别

Proxy提供对象操作的拦截机制：

相比Object.defineProperty，Proxy可以：

监听更多操作类型

直接监视数组变化

非侵入式监管对象

15. Reflect

Reflect是ES6引入的静态对象，提供统一的对象操作API：

Reflect方法与Proxy处理器方法对应，常用作默认实现：

使用Reflect API操作对象更规范，有助于编写健壮的代码。

16.解析get参数

使用正则表达式和replace方法快速解析URL中的GET参数：

17.解析URL

利用<a>标签解析URL各部分：

18.localStorage

HTML5提供的永久存储，通常限制为5MB。支持跨域隔离。

注意：存储超出限制会抛出QuotaExceededError错误。

19.sessionStorage

与localStorage类似，但仅在当前会话中有效。

重要：新开标签页不会保留sessionStorage，但通过页面跳转（如超链接、location.href或window.open）可以保留。

20.会话cookie

未设置过期时间的cookie为会话cookie。

注意：在macOS和iOS上，关闭浏览器不会立即清除会话cookie，需要结束浏览器进程。

21.标签模板字符串

允许在模板字符串前添加函数进行处理：

22.字符串常用方法

includes(): 检查字符串是否包含子串

startsWith(): 检查字符串是否以指定子串开始

endsWith(): 检查字符串是否以指定子串结束

repeat(n): 重复字符串n次

padEnd(length, padString): 在尾部填充至指定长度

padStart(length, padString): 在首部填充至指定长度

示例：

这些方法提供了更简洁和直观的字符串操作方式。

23.数组快速去重

利用Set数据结构特性实现数组去重：

注意：此方法仅适用于基本数据类型，对引用类型对象无效。

24.Object.keys, values, entries

操作对象的三个实用方法：

25.Object.getOwnPropertyDescriptors

获取对象完整的属性描述符，解决Object.assign无法正确复制getter/setter的问题：

26.BigInt

处理超出JavaScript数值范围(Number.MAX_SAFE_INTEGER = 9007199254740991)的整数：

27.合并空运算符

仅当左侧值为null或undefined时，返回右侧默认值：

28.可选链运算符

安全访问嵌套对象属性，避免空引用错误：

29.import

ES模块系统的导入语法：

ES模块特点：

自动采用严格模式

模块作用域隔离

支持CORS加载外部脚本

默认延迟执行（类似defer）

支持动态导入（ES2020）

30. 0.1 + 0.2 === 0.3 // false

JavaScript浮点数精度问题：

原因：JavaScript使用IEEE 754双精度浮点数表示，二进制无法精确表示某些十进制小数。

解决方案：使用Number.EPSILON定义可接受的最小误差范围：

或使用toFixed进行指定精度比较：