Hello，大家好，我是 Sunday。

昨天看了一篇博客，里面講到了一些非常有意思的前端技巧，今天分享給大家

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;
}

這對保持頁面干凈整潔非常有用。