昨天看了一篇博客，里面讲到了一些非常有意思的前端技巧，今天分享给大家。
1. 检测网络速度
通过 JavaScript 的 Network Information API，你可以轻松检测用户的网络下载速度，从而动态调整页面加载的资源大小。
if (navigator.connection) {
const downlink = navigator.connection.downlink;
console.log(`当前下载速度: ${downlink} Mbps`);
} else {
console.log("Network Information API 不被支持");
}这对于在网络速度较慢时减少大文件加载尤其有用。但请注意，这个 API 并不在所有浏览器中支持。
2. 为移动端应用添加振动反馈
如果你正在开发移动应用，可以使用 Vibrate API 来提供振动反馈，从而增强用户体验。
// 振动 500 毫秒
if (navigator.vibrate) {
navigator.vibrate(500);
} else {
console.log("Vibrate API 不被支持");
}
// 创建振动和暂停的模式
if (navigator.vibrate) {
navigator.vibrate([200, 100, 200, 100, 200]);
}这个功能在移动设备中尤其有效，但记得检查设备的兼容性。
3. 禁止文本粘贴
在某些场景下，例如密码输入框，你可能希望阻止用户粘贴文本。通过下面的代码可以简单实现：
<input type="text" id="text-input" />
<script>
const input = document.getElementById('text-input');
input.addEventListener("paste", function(e){
e.preventDefault();
alert("禁止粘贴内容！");
});
</script>这个方法能够提高输入的安全性，但应谨慎使用，避免对用户体验造成负面影响。
4. 隐藏 DOM 元素
有时候你不需要借助 JavaScript 来隐藏元素，HTML 的 hidden 属性就可以轻松完成这个任务：
<p hidden>这个文本是不可见的</p>这个属性与 display: none; 类似，会让元素从页面中消失。
5. 使用 inset 简化定位
CSS 中使用 top、left、right、bottom 进行绝对定位有时显得冗长，你可以使用 inset 来简化这个过程：
/* 原始方法 */
div {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/* 使用 inset 简化 */
div {
position: absolute;
inset: 0;
}这不仅让 CSS 更简洁，还提高了代码的可读性。
6. 高级 console 调试技巧
除了常见的 console.log()，你还可以利用以下更强大的 console 方法来调试：
- console.table()：以表格形式展示数组或对象：
const data = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 30 }
];
console.table(data);- console.group() 和 console.groupEnd()：将相关的日志进行分组：
console.group('调试日志');
console.log('消息 1');
console.log('消息 2');
console.groupEnd();- console.time() 和 console.timeEnd()：测量代码执行的时间：
console.time('代码运行时间');
// 模拟耗时代码
console.timeEnd('代码运行时间');7. 防止移动端下拉刷新
当用户在移动端使用你的应用时，可能会无意中触发下拉刷新。通过以下 CSS 属性，你可以防止这个行为：
body {
overscroll-behavior-y: contain;
}这个属性同样适用于阻止模态框滚动到边界时滚动背景页面。
8. 让网页可编辑
如果你需要快速编辑网页内容，可以使用 contentEditable 属性将整个网页变成可编辑的状态：
document.body.contentEditable = 'true';注意，这个功能可能会对页面结构和脚本产生影响，建议仅用于开发或调试阶段。
9. 使用 ID 生成全局变量
你可能不知道，HTML 元素的 id 会自动生成一个全局变量，直接在 JavaScript 中调用，而无需 document.getElementById()。
<div id="myDiv">Hello</div>
<script>
console.log(myDiv); // 自动生成全局变量 myDiv
</script>尽管这样做很方便，但在实际项目中应避免，仍然推荐使用 document.getElementById() 来保持代码的清晰性。
10. 平滑滚动效果
通过 CSS 的 scroll-behavior: smooth; 属性，你可以轻松为网页添加平滑滚动效果，增强用户体验：
html {
scroll-behavior: smooth;
}11. 使用 :empty 选择器隐藏空元素
CSS 的 :empty 选择器可以帮助你有效地选中并隐藏那些空的 HTML 元素：
p:empty {
display: none;
}这对保持页面干净整洁非常有用。
