几种神秘鲜为人知但却有趣的前端技术
测定网速
navigator.connection.downlink 是一个用于表示当前连接下行速度的属性，它是 JavaScript 的 Network Information API 的一部分。此属性返回一个数值，单位为 Mbps（Megabits per second），表示网络的下行带宽。
例如，你可以通过以下方式使用它：
if (navigator.connection) {
const downlink = navigator.connection.downlink;
console.log(`当前下行速度为: ${downlink} Mbps`);
} else {
console.log("当前浏览器不支持Network Information API");
}
需要注意的是，Network Information API 并不是所有浏览器都支持，因此在使用时最好进行兼容性检查。
在智能手机上启用振动
window.navigator.vibrate 是一个用于触发设备震动的 Web API，通常用于移动设备上。这个方法允许开发者控制设备的震动模式，它接受一个数字或一个数组作为参数。
- 如果传入一个数字，这个数字表示震动的时长（以毫秒为单位）。
- 如果传入一个数组，可以定义震动和静止的模式，例如
[200, 100, 200]表示震动200毫秒，静止100毫秒，再震动200毫秒。
以下是一个简单的示例：
// 使设备震动 500 毫秒
if (navigator.vibrate) {
navigator.vibrate(500);
} else {
console.log("当前浏览器不支持震动 API");
}
// 使用数组来创建震动模式
if (navigator.vibrate) {
navigator.vibrate([200, 100, 200, 100, 200]);
}
请注意，并不是所有的设备和浏览器都支持震动 API，因此在使用时最好确认设备的兼容性。
禁止插入文字
你可能不希望用户在输入字段中粘贴从其他地方复制的文本（请仔细考虑清楚是否真的要这样做）。通过跟踪事件paste并调用其方法preventDefault()就很容易完成了。
<input type="text"></input>
<script>
const input = document.querySelector('input');
input.addEventListener("paste", function(e){
e.preventDefault()
})
</script>
好了，现在你无法复制粘贴，必须得手动编写和输入所有的内容了
快速隐藏dom
要隐藏DOM元素，不是非得用到JavaScript。原生的HTML属性完全可以实现hidden。效果类似于添加样式display: none;。元素就从页面上消失了。
<p hidden>我在页面看不到了</p>
注意，这个技巧不适用于伪元素
快速使用定位
你知道CSS的inset属性吗？这是我们所熟悉的top，left，right和bottom的缩写版本。通过类比短语法margin或属性padding，只要一行代码就可以设置元素的所有偏移量。
/* 普通写法 */
div {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/* inset写法 */
div {
position: absolute;
inset: 0;
}
使用简短的语法可以大大减小CSS文件的体积，这样代码看起来更干净。但是，可别忘了inset是一个布尔属性，它考虑了内容排版方向。换句话说，如果站点使用的是具有rtl方向（从右到左）的语言，那么left要变成right，反之亦然。
你不知道的Console的用法
通常我们用的最多的console.log(xxx)，其实在 JavaScript 中，console 对象提供了一些很有用的方法用于调试和查看信息。以下是一些可能不太常见的 console 用法：
- console.table() : 可以用来以表格的格式输出数组或对象，非常适合查看数据结构。
const data = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 30 }
];
console.table(data); - console.group() 和 console.groupEnd() : 可以将相关日志信息分组，方便查看和组织输出。
console.group('Gr0up Label');
console.log('这是一条 log');
console.log('这是一条 log 2');
console.groupEnd(); - console.time() 和 console.timeEnd() : 用于测量代码块的执行时间。
console.time('myTimer');
// 执行一些操作
console.timeEnd('myTimer'); // 输出所用的时间 - console.error() 和 console.warn() : 用于输出错误和警告信息，通常会以不同的颜色高亮显示。
console.error('这是一个错误信息');
console.warn('这是一个警告信息'); - console.assert() : 用于在条件为 false 时输出错误信息。
const condition = false;
console.assert(condition, '条件为 false，输出这条信息'); - console.clear() : 清空控制台的输出。
console.clear(); - console.dir() : 用于打印对象的可枚举属性，方便查看对象的详细结构。
const obj = { name: 'Alice', age: 25 };
console.dir(obj);
禁止下拉刷新
下拉刷新是当前流行的移动开发模式。如果你不喜欢这样做，只需将overscroll-behavior-y属性的值设为contains即可达到此效果。
body {
overscroll-behavior-y: contain;
}
这个属性对于组织模态窗口内的滚动也非常有用——它可以防止主页在到达边框时拦截滚动
使整个网页的 <body> 内容可编辑
document.body.contentEditable='true'; 是一段 JavaScript 代码，用于使整个网页的 <body> 内容可编辑。这意味着用户可以直接在浏览器中点击并编辑文本，就像在文本编辑器中一样。
以下是一些相关的要点：
- 启用编辑模式：将
contentEditable属性设置为'true'，浏览器会允许用户更改页面的内容。document.body.contentEditable = 'true'; - 禁用编辑模式：如果希望用户无法编辑页面，您可以将该属性设置为
'false'。document.body.contentEditable = 'false'; - 注意事项：
- 这种做法在很多场景中很方便，比如在展示一些信息并希望用户能快速修改的时候。例如，创建自定义的富文本编辑器。
- 但是，使用
contentEditable也可能会带来一些不便，比如用户修改了页面的结构，甚至可能影响脚本的运行。因此在使用时要谨慎，并确保有合适的方法来处理用户的输入。 - 启用
contentEditable后，如果网页中有表单元素，用户的输入可能与表单的默认行为产生冲突。
- 样式和功能：在启用编辑模式后，你可能还想添加一些 CSS 来改变光标样式，或者结合 JavaScript 进一步增强编辑体验，比如自动保存用户的修改。
示例代码：
// 启用编辑功能
document.body.contentEditable = 'true';
// 禁用编辑功能
// document.body.contentEditable = 'false';
这种功能可以非常方便地用于快速原型设计或需要快速内容编辑的应用，但在生产环境中要慎重使用。
带有Id属性的元素，会创建全局变量
在一张HTML页面中，所有设置了ID属性的元素会在JavaScript的执行环境中创建对应的全局变量，这意味着document.getElementById像人的智齿一样显得多余了。但实际项目中最好还是老老实实该怎么写就怎么写，毕竟常规代码出乱子的机会要小得多。
<div id="test"></div>
<script>
console.log(test)
</script>
网站平滑滚动
在 <html> 元素中添加 scroll-behavior: smooth，以实现整个页面的平滑滚动。
html{
scroll-behavior: smooth;
}
:empty 表示空元素
此选择器定位空的 <p> 元素并隐藏它们
p:empty{
display: none;
}
来源：juejin.cn/post/7423314983884292134
