整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
所周知，函數節流（throttle）是 JS 中一個非常常見的優化手段，可以有效的避免函數過于頻繁的執行。
舉個例子：一個保存按鈕，為了避免重復提交或者服務器考慮，往往需要對點擊行為做一定的限制，比如只允許每300ms提交一次，這時候我想大部分同學都會到網上直接拷貝一段throttle函數，或者直接引用lodash工具庫
btn.addEventListener('click', _.throttle(save, 300))其實除了 JS 方式， CSS 也可以非常輕易的實現這樣一個功能，無需任何框架庫，一起看看吧
CSS 實現和 JS 的思維不同，需要從另一個角度去看待這個問題。
比如這里的需要對點擊事件進行限制，也就是禁用點擊事件，想想有什么方式可以禁用事件，沒錯，就是pointer-events;
然后是時間的限制，每次點擊后需要自動禁用300ms，時間過后重新恢復，那么，有什么特性和時間以及狀態恢復有關呢？沒錯，就是animation;
除此之外，還需要有觸發時機，這里是點擊行為，所以必然和偽類:active有關聯。
因此，綜合分析，實現這樣一個功能需要用到pointer-events、animation以及:active，那么如何將這些思路串聯起來呢？
思考3秒...
你想到了嗎？
其實這種場景可以理解成是對 CSS 動畫的控制，比如有一個動畫控制按鈕從禁用->可點擊的變化，每次點擊時讓這個動畫重新執行一遍，在執行的過程中，一直處于禁用狀態，是不是就達到了“節流”的效果了？
接下來看看具體實現
假設有一個按鈕，綁定了一個點擊事件
<button onclick="console.log('保存')">保存</button>這時的按鈕連續點擊就會不斷地觸發，效果如下
下面定義一個關于pointer-events的動畫，就叫做 throttle 吧
@keyframes throttle {
from {
pointer-events: none;
}
to {
pointer-events: all;
}
}很簡單吧，就是從禁用到可點擊的變化。
接下來，將這個動畫綁定在按鈕上，這里為了方便測試，將動畫設置成了2s
button{
animation: throttle 2s step-end forwards;
}注意，這里動畫的緩動函數設置成了階梯曲線，step-end，它可以很方便的控制pointer-events的變化時間點。
如下示意，pointer-events在0~2秒內的值都是none，一旦到達2秒，就立刻變成了all，由于是forwards，會一直保持all的狀態
最后，在點擊時重新執行一遍動畫，只需要在按下時設置動畫為none就行了
這個技巧之前在這篇文章中有更詳細的介紹： CSS 實現按鈕點擊動效的套路
實現如下
button:active{
animation: none;
}為了演示方便，我們暫時把顏色變化也加在動畫里
@keyframes throttle {
from {
color: red;
pointer-events: none;
}
to {
color: green;
pointer-events: all;
}
}現在如果文字是red，表示是禁用態，只有是green，才表示可以被點擊，非常清晰明了，如下
下面是最終點擊對比效果，很好地限制了點擊頻率
完整代碼如下，就這么幾行，如果需要改限制時間，直接改動畫時間就行了
button{
animation: throttle 2s step-end forwards;
}
button:active{
animation: none;
}
@keyframes throttle {
from {
pointer-events: none;
}
to {
pointer-events: all;
}
}借用這種思路，也可以很輕松的實現節流的效果。而且為了更好的體驗，可以用上真正的按鈕禁用
btn.disabled = true具體思路是這樣的，通過:active去觸發transition變化，然后通過監聽transition回調去動態設置按鈕的禁用狀態，實現如下
定義一個無關緊要的過渡屬性，比如opacity
button{
opacity: .99;
transition: opacity 2s;
}
button:not(:disabled):active{
opacity: 1;
transition: 0s;
}然后監聽transition的起始回調
// 過渡開始
document.addEventListener('transitionstart', function(ev){
ev.target.disabled = true
})
// 過渡結束
document.addEventListener('transitionend', function(ev){
ev.target.disabled = false
})這樣做的最大好處是，這部分禁用的邏輯是完全和業務邏輯是解耦的，可以在任意時候，任意場合下無縫接入，也不受框架和環境影響，效果如下
以上通過 CSS 的思路實現了類似“節流”的功能，相比 JS 實現而言，實現更精簡、使用更簡單，沒有框架限制，下面一起總結一下實現要點：
原文鏈接：https://juejin.cn/post/7165828047520661534
要：在本文中，將重點關注網頁的初始渲染，即它從解析 HTML 開始。 我將探索可能導致高渲染時間的問題，以及如何解決它們。
本文分享自華為云社區《頁面首屏渲染性能指南-云社區-華為云》，作者：Ocean2022。
我們知道渲染頁面是一個將服務器的響應內容翻譯成圖片的過程。但是，如果你頁面的渲染性能比較糟糕的話，可能會帶來相對較高的跳出率。
在本文中，我將重點關注網頁的初始渲染，即它從解析 HTML 開始。 我將探索可能導致高渲染時間的問題，以及如何解決它們。
關鍵渲染路徑 (CRP) 是瀏覽器將代碼轉換為屏幕上可顯示像素的過程。 它有幾個階段，其中一些可以并行執行以節省時間，但有些部分必須依次完成。 如下圖所示：
首先，一旦瀏覽器得到響應，它就會開始解析它。 當它遇到依賴項時，它會嘗試下載它。 如果它是一個樣式表文件，瀏覽器必須在渲染頁面之前完全解析它，這就是為什么 CSS 會阻塞渲染的原因。
如果是腳本，瀏覽器必須：停止解析，下載腳本，然后運行。 只有在那之后它才能繼續解析，因為 JavaScript 程序可以改變網頁的內容（尤其是 HTML）。 這就是為什么 JS 會阻塞解析的原因。
完成所有解析后，瀏覽器將構建文檔對象模型 (DOM) 和級聯樣式表對象模型 (CSSOM)。 將它們組合在一起得到渲染樹。 頁面的不顯示部分不會進入渲染樹，因為它只包含繪制頁面所需的數據。
倒數第二步是將渲染樹進行布局， 這個階段也稱為回流：就是計算每個渲染樹節點的每個位置及其大小的地方。
最后一步是繪制。 它會根據瀏覽器在前一階段計算得到的數據對像素進行著色。
因此，根據這一過程，我們在優化性能方面，得出了一些結論。如果你要提升頁面初始化渲染的性能，你需要：
同時，我們會根據下面 3 個指標來衡量優化的效率：
除了渲染時間之外，還有其他一些因素也需要考慮。例如，你的頁面使用了多少阻塞資源以及下載它們需要多長時間。
鑒于我們在上面得出的結論，我們得出網站性能優化有三種主要策略：
首先，移除所有未使用的部分，例如 JavaScript 中無法訪問的函數、帶有從不匹配任何元素的選擇器的樣式以及被 CSS 永遠隱藏的 HTML 標簽。 其次，刪除所有重復項。
然后，我建議建立一個自動壓縮過程。 例如，它應該從你的后端服務中刪除所有注釋（但不是源代碼）以及每個不包含附加信息的字符（例如 JS 中的空白字符）。
完成后，我們剩下的可以是文本字符串。 這意味著我們可以安全地應用諸如 GZIP（大多數瀏覽器都理解）之類的壓縮算法。
最后，還有緩存。 瀏覽器第一次呈現頁面時它不會有幫助，但它會在以后的訪問中節省很多。 但是，記住兩點至關重要：
當然，應該為每個資源定義緩存策略。 有些可能很少改變或根本不會改變，有的則是變化的很快，還有些文件包含敏感的信息（可以使用 “private” 防止 CDN 緩存私有數據）。
“關鍵”僅指網頁正確呈現所需的資源。 因此，我們可以直接跳過所有流程中沒有涉及的樣式以及腳本文件。
為了告訴瀏覽器不需要特定的 CSS 文件，我們應該為所有引用樣式表的鏈接設置媒體屬性。 使用這種方法，瀏覽器將只根據需要處理與當前媒體（設備類型、屏幕尺寸）匹配的資源，同時降低所有其他樣式表的優先級。 例如，如果你將 media=“print” 屬性添加到引用樣式以打印頁面的樣式標記，則這些樣式不會在不打印媒體時干擾你的關鍵渲染路徑。
為了進一步改進該過程，你還可以將一些樣式內聯，這可以為我們節省了至少一次到服務器的往返行程。
如上所述，腳本會阻塞解析，因為它們可以改變 DOM 和 CSSOM。 為了避免這一點，所有腳本標簽都必須用屬性標記——異步或延遲。
標有 async 的腳本不會阻塞 DOM 構建或 CSSOM，因為它們可以在 CSSOM 構建之前執行。 但請記住，內聯腳本無論如何都會阻止 CSSOM，除非你將它們放在 CSS 之上。
相比之下，標有 defer 的腳本將在頁面加載結束時進行執行。
換句話說，使用 defer，腳本直到頁面加載事件被觸發后才會執行，而 async 讓腳本在文檔被解析時就會在后臺運行。
最后，應將 CRP 長度縮短到可能的最小值。
作為樣式標簽屬性的媒體查詢將減少必須下載的資源總數。 script 標簽屬性 defer 和 async 將防止相應的腳本阻塞解析。
使用 GZIP 壓縮、壓縮和歸檔資源將減少傳輸數據的大?。◤亩矞p少數據傳輸時間）。
內聯一些樣式和腳本也可以減少瀏覽器和服務器之間的往返次數。
按照最新的最佳性能實踐理念，一個網站應該做的最快的第一件事就是展示 ATF 內容。 ATF 代表首屏。 這是立即可見的區域，無需滾動。 因此，最好以首先加載所需樣式和腳本的方式重新排列與渲染相關的所有內容，而其他所有內容都停止（既不解析也不渲染）。
總而言之，網站性能優化包含了網站響應的各個方面，例如緩存、設置 CDN、重構、資源優化等，但是所有這些都可以逐步完成。 作為 Web 開發人員，你可以將本文作為參考，并始終記住在實驗之前和之后測量性能。
瀏覽器開發人員盡最大努力優化你訪問的每個頁面的網站性能，這就是瀏覽器通常實現所謂的“預加載器”的原因。 這部分程序會在你以 HTML 格式請求的資源之前進行掃描，以便一次發出多個請求并讓它們并行運行。 這就是為什么在 HTML（逐行）以及腳本標簽中保持樣式標簽彼此靠近的原因。
此外，嘗試批量更新 HTML 以避免多個布局事件，這些事件不僅由 DOM 或 CSSOM 中的更改觸發，而且在設備方向更改和窗口大小調整時也會觸發。
點擊下方，第一時間了解華為云新鮮技術~
華為云博客_大數據博客_AI博客_云計算博客_開發者中心-華為云
果您想避免重復的內容問題，使用規范鏈接標簽會有所幫助。這種技術性SEO最佳實踐相當簡單，在本文中，我將討論為什么以及何時應該使用它，以及如何開始的技巧。
規范 URL 是一組重復或近乎重復的網頁的最佳代表。
規范鏈接元素通過向 Google 等搜索引擎發出信號，從一組重復或接近重復的頁面中選出哪個網頁是原始網頁或最佳網頁，從而幫助解決重復內容問題。
Google 將規范網址定義為：
“根據谷歌的說法，規范 URL 是一組重復頁面中最具代表性的頁面的 URL。例如，如果您在同一網頁上有兩個網址（例如：example.com？dress=1234 和 example.com/dresses/1234），Google 會選擇其中一個網址作為規范網址。同樣，如果您有多個幾乎相同的網頁，Google 可以將它們組合在一起（例如，僅通過內容排序或過濾（例如按價格或商品顏色）而有所不同的網頁）。（您可能偶爾會聽到“規范頁面”一詞，但這在技術上是不正確的，因為它實際上是規范的特定 URL。
規范可以與副本（例如 en.example.com 和 fr.example.com）位于不同的域中。
希望規范 URL 是獲得 SEO 好處的網頁。雖然您可以指定規范網址，但 Google 表示它們都不是必需的：
“雖然我們鼓勵您使用這些方法，但它們都不是必需的;您的網站可能會在不指定規范首選項的情況下做得很好。這是因為，如果您不指定規范網址，Google 會確定哪個版本的網址客觀上最適合在 Google 搜索中向用戶展示。
在視頻中，谷歌的約翰·穆勒（John Mueller）指出，谷歌通過遵循兩個一般準則來選擇規范URL：
如有疑問，您可以使用 Google Search Console 中的網址檢查工具來了解 Google 認為哪個網頁是規范網頁。
規范網址用于解決重復內容問題。這些重復的內容問題可能存在于您的網站上，也可能與其他網站共享。
重復內容是 SEO 的禁忌，您可以在以下位置了解更多信息： 重復內容對搜索引擎排名有害嗎？
使用規范鏈接元素的一些原因：
過去，如果您要跨第三方發布商聯合內容，則經常使用規范鏈接元素。
今天，谷歌說：
“對于那些希望避免聯合合作伙伴重復的人，不建議使用規范鏈接元素，因為頁面通常非常不同。
最有效的解決方案是讓合作伙伴阻止對您的內容進行索引。
有關更多信息，請參閱避免 Google 新聞中的文章重復，其中還提供了有關阻止 Google 搜索中的聯合內容的建議。
谷歌在其幫助文件中給出了規范化時該做和不該做的列表：
請勿將 robots.txt 文件用于規范化目的。請勿使用網址移除工具進行規范化。它會在搜索中隱藏 URL 的所有版本。請勿使用不同的規范化技術為同一網頁指定不同的網址作為規范網址（例如，不要在站點地圖中指定一個網址，而是使用 rel=“canonical” 為同一網頁指定不同的網址）。我們不建議使用 noindex 來阻止在單個網站中選擇規范網頁，因為這會完全阻止該網頁進入 Google 搜索。rel=“canonical” 鏈接注釋是首選解決方案。如果您使用的是 hreflang 元素，請確保指定相同語言的規范頁面，或者如果不存在同一語言的規范頁面，則指定最佳替代語言。在網站內關聯時，請鏈接到規范網址，而不是重復的網址。始終如一地鏈接到您認為是規范的網址有助于 Google 了解您的偏好。使用 hreflang 標簽時指定規范頁面。指定相同語言的規范頁面，如果同一語言不存在規范，則指定最佳替代語言。在網站內關聯時，請鏈接到規范網址，而不是重復的網址。始終如一地鏈接到您認為是規范的網址有助于 Google 了解您的偏好。
另請注意，“Google 更喜歡 HTTPS 頁面而不是等效的 HTTP 頁面作為規范頁面，除非存在問題或信號沖突。
在該視頻中，它們涵蓋了：
您可以通過兩種方式使用 rel=“canonical” 指定規范網址：
谷歌在這里給出了每種執行類型的優缺點列表。
盡管 Google 給出了多種建議，但他們解釋說您應該選擇一種類型的規范化方法并堅持下去。
與使用單一類型的規范化方法相比，使用多種類型的規范化方法更容易出錯。
要告訴搜索引擎一個頁面何時是另一個頁面的重復，您可以在所有重復頁面上使用 rel=“canonical” 鏈接標簽，指示哪個頁面是規范 URL。
讓我們看一個例子。要指定指向虛構 URL 的規范鏈接，請執行以下操作： http://www.example.com/product.php?item=swedish-fish，您需要創建一個 <link> 元素，如下所示：
<link rel=“canonical” href=“http://www.example.com/product.php?item=swedish-fish”/>
然后，您可以將此鏈接復制到該頁面的所有非規范版本（例如 http://www.example.com/product.php?item=swedish-fish&sort=price）的<頭>部分。
如果同時在 http 和 https 上發布內容，例如以下示例：
http://www.example.com/product.php?item=swedish-fish 和 https://www.example.com/product.php?item=swedish-fish，您還需要指定頁面的規范版本。
創建 <link> 元素，如下所示：
<link rel=“canonical” href=“http://www.example.com/product.php?item=swedish-fish”/>
將此鏈接添加到 https://www.example.com/product.php?item=swedish-fish 的 <head> 部分。
將 rel=“canonical” 添加到頁面的頭部部分對于 HTML 內容很有用，但不能用于 PDF 和其他被 Google 編入索引的文件類型。
在這些情況下，您可以通過使用鏈接 rel=“canonical” HTTP 標頭進行響應來指示規范 URL，如下所示（請注意，要使用此選項，您需要能夠配置服務器）：
鏈接： <http://www.example.com/downloads/white-paper.pdf>;rel=“規范”
以下是我們收到的一些關于規范化的常見問題及其答案：
rel=“canonical” 屬性是提示或建議，而不是指令。
rel=“canonical” 允許網站所有者建議 Google 應將其視為規范的網頁版本。但是，rel=“canonical” 是一個強烈的信號，表明指定的 URL 應該成為規范的。
Google 在確定哪些網址集具有相同的內容時，以及在計算要在搜索結果中顯示的這些網頁中最相關的網頁時，會考慮這一點和其他信號。
rel=“canonical” 屬性只能用于指定具有相同內容的頁面的首選版本（盡管排序順序等細微差異是可以的）。
例如，如果一個網站有一組相同型號的舞鞋頁面，每個頁面僅因圖片中鞋子的顏色而異，那么將突出顯示最流行顏色的頁面設置為規范版本可能是有意義的，這樣 Google 更有可能在搜索結果中顯示該頁面。
是的，在某種程度上，但為了確保最佳的規范化，我們的建議是更新鏈接以指向單個規范頁面。
301 重定向和規范標簽都用于告訴搜索引擎一個網頁的多個版本。
當頁面永久移動時，將使用 301 重定向，而當頁面有多個版本時，則使用規范標簽。
以下是 301 重定向和規范代碼之間的一些區別：
谷歌在這里給出了一些你何時使用301重定向的例子。
Google 建議使用帶有 rel=“canonical” 鏈接元素的絕對 URL，而不是相對 URL。
盡管 Google 支持相對路徑，但從長遠來看，它們可能會導致問題（例如，如果您無意中允許抓取您的測試網站），因此不建議這樣做）。
（詳細了解相對 URL 與絕對 URL。
不可以，規范鏈接元素僅在頁面重復或接近重復時才有效。
如果網頁不同，Google 將忽略規范鏈接元素，并將網址視為兩個不同的網頁
總而言之，如果您認為可能會遇到重復的內容問題，那么值得花時間實施規范 URL。你的SEO程序會感謝你。
規范 URL 在網站優化中起著至關重要的作用，使您能夠解決重復內容問題并增強您的 SEO 工作。了解它們的目的并正確實施它們可以對您的搜索引擎排名產生重大影響。
因此，讓我們討論有效使用它們的最佳實踐。
定義規范網址
規范網址是 HTML 標記，當有多個版本具有相似內容時，它會通知搜索引擎網頁的首選版本。通過指定規范 URL，您可以引導搜索引擎朝著正確的方向發展，確保它們將所需的 SEO 值歸因于所選 URL。
為什么規范網址很重要？
當搜索引擎遇到重復內容時，他們可能會對在搜索結果中排名哪個版本感到困惑。因此，您網站的 SEO 可能會受到影響，流量可能會在不同的頁面之間分配。規范 URL 通過整合權威性并確保只考慮一個版本進行排名來解決這個問題。
正確實現規范網址
要有效地使用規范網址，請按照以下步驟操作：
規范代碼的最佳做法
要充分利用規范網址，請考慮以下提示：
買方意向搜索字詞
在優化您的內容時，請記住與規范網址相關的買方意向搜索字詞。一些示例包括“規范網址的最佳做法”、“規范標簽實現”和“如何使用規范網址防止重復內容”。
規范 URL 對 SEO
的好處 通過正確使用規范 URL，您可以將重復內容頁面的 SEO 值合并到一個首選版本中。這有助于搜索引擎更好地了解您的網站結構，并使您的排名集中在所需的 URL 上。
定期監控重復內容
通過使用 SEO 工具密切關注您網站的重復內容，這些工具會在檢測到新實例時發送警報。這種積極主動的方法可確保您保持對網站 SEO 性能的控制。
規范 URL 是防止重復內容問題和增強 SEO 策略的重要工具。通過正確實施規范標簽，您可以引導搜索引擎走向首選版本并鞏固 SEO 價值。保持警惕，定期監控重復內容并優化您的網站以提高搜索引擎排名。
分步程序：
實施本文中概述的步驟，以防止重復的內容問題，優化您的網站并提高搜索引擎排名。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
