前端技巧第一期

检测网络速度

通过 JavaScript 的 Network Information API，你可以轻松检测用户的网络下载速度，从而动态调整页面加载的资源大小。

if (navigator.connection) {
    const downlink = navigator.connection.downlink;
    console.log(`当前下载速度: ${downlink} Mbps`);
} else {
    console.log("Network Information API 不被支持");
}

这对于在网络速度较慢时减少大文件加载尤其有用。但请注意，这个 API 并不在所有浏览器中支持。

为移动端应用添加振动反馈

Vibrate API 来提供振动反馈

// 振动 500 毫秒
if (navigator.vibrate) {
    navigator.vibrate(500);
} else {
    console.log("Vibrate API 不被支持");
}

// 创建振动和暂停的模式
if (navigator.vibrate) {
    navigator.vibrate([200, 100, 200, 100, 200]);
}

注意：检查设备的兼容性

禁止文本粘贴

<input type="text" id="text-input" />

<script>
  const input = document.getElementById('text-input');
  input.addEventListener("paste", function(e){
    e.preventDefault();
    alert("禁止粘贴内容！");
  });
</script>

隐藏 DOM 元素

<p hidden>这个文本是不可见的</p>

高级 console 调试技巧 除了 console.log()

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('代码运行时间');

防止移动端下拉刷新

body {
  overscroll-behavior-y: contain;
}

这个属性同样适用于阻止模态框滚动到边界时滚动背景页面。

平滑滚动效果

通过 CSS 的 scroll-behavior: smooth; 属性，你可以轻松为网页添加平滑滚动效果，增强用户体验：

html {
    scroll-behavior: smooth;
}

使用 :empty 选择器隐藏空元素

CSS 的 :empty 选择器可以帮助你有效地选中并隐藏那些空的 HTML 元素：

p:empty {
  display: none;
}