使用被動事件監聽器改善捲動效能
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
被動事件監聽器是新在 Chrome 51 版本中推出的網路標準,可大幅提升捲動效能,特別是行動裝置。歡迎觀看下方影片,並同時示範改善功能的實際運作情形:
運作方式
捲動頁面時,因為網頁無法感覺到手指的位置延遲,就是所謂的捲動卡頓。遇到捲動卡頓時,原因通常是觸控事件監聽器。觸控事件監聽器通常適合用於追蹤使用者互動和建立自訂捲動體驗,例如在與嵌入的 Google 地圖互動時徹底取消捲動。目前瀏覽器無法得知觸控事件監聽器是否會取消捲動,因此一律會等到事件監聽器完成之後,才捲動頁面。
被動事件監聽器可以在 addEventListener
的 options
參數中設定標記,指出事件監聽器一律不會取消捲動,藉此解決這個問題。以便瀏覽器立即捲動頁面,而不是在事件監聽器完成設定後捲動頁面。
瞭解詳情
如需被動事件監聽器的運作方式簡介,請參閱 Chromium 網誌:
協助開發人員改善捲動效能的新 API
以及規格的存放區,瞭解如何實作被動事件監聽器:
被動事件監聽器說明
除非另有註明,否則本頁面中的內容是採用創用 CC 姓名標示 4.0 授權,程式碼範例則為阿帕契 2.0 授權。詳情請參閱《Google Developers 網站政策》。Java 是 Oracle 和/或其關聯企業的註冊商標。
上次更新時間:2016-06-05 (世界標準時間)。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"缺少我需要的資訊"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"過於複雜/步驟過多"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"過時"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻譯問題"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"示例/程式碼問題"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"其他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"容易理解"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"確實解決了我的問題"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"其他"
}]
{"lastModified": "\u4e0a\u6b21\u66f4\u65b0\u6642\u9593\uff1a2016-06-05 (\u4e16\u754c\u6a19\u6e96\u6642\u9593)\u3002"}