国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

passive的作用和原理

nanchen2251 / 3270人閱讀

摘要：直接由合成線程處理的事件不經過內核線程就能快速處理的輸入事件為手勢輸入事件滑動捏合。劃重點最騷的來了，雖然手勢事件可以不在內核線程處理，但是手勢事件的產生還是離不開內核線程。

passived到底有什么用？

passived主要用于優化瀏覽器頁面滾動的性能，讓頁面滾動更順滑~~

passived產生的歷史時間線

addEventListener()：大家都是認識的，為dom添加觸發事件，故事就從這里開始。
在早期addEventListener是這樣的：

addEventListener(type, listener, useCapture)

useCapture:是否允許事件捕捉，但是很少會傳true，然后就變成可選項了：

addEventListener(type, listener[, useCapture ])

到現在就變成了這個樣子：

addEventListener(type, listener, {
    capture: false, //捕獲
    passive: false, 
    once: false    //只觸發一次
})

我們的主角passive就出現了

passive為什么能優化頁面的滾動性能？ 簡述chrome的線程化渲染框架 chrome的線程化渲染框架的兩個線程：

內核線程（Main/Render Thread）：負責DOM樹構建、元素的布局、圖層繪制記錄部分（main-thread side）、JavaScript的執行

合成線程（Compositor Thread）：圖層繪制實現部分（impl-side）、圖層圖像合成


上圖可知，頁面Frame#1在內核線程中完成js執行、布局和繪制后，經過一個周期合成線程去執行Frame#1頁面圖像的合成。

用戶輸入事件分類：

在內核線程處理的事件

直接由合成線程處理的事件

那么有什么區別呢？

在內核線程處理的事件：需要經過內核線程處理的輸入事件要在內核線程執行邏輯，遇到內核線程在忙，無法立即響應。如用戶的大部分輸入事件都跟頁面元素有關系，一旦頁面元素注冊了對應事件的監聽器，監聽器的邏輯代碼（JavaScript）必須在內核線程中執行（V8引擎運行在內核線程），因此這種輸入事件經常無法立即得到響應。
直接由合成線程處理的事件：不經過內核線程就能快速處理的輸入事件為手勢輸入事件（滑動、捏合）。

劃重點：最騷的來了，雖然手勢事件可以不在內核線程處理，但是手勢事件的產生還是離不開內核線程。

頁面卡頓的原因

手勢事件有個屬性 cancelable,作用是告訴瀏覽器該事件是否允許監聽器通過 preventDefault() 方法阻止，默認為true。如果在touch事件內部調用preventDefault()，事件默認行為被取消，頁面也就靜止不動了。但是瀏覽器并不知道touch事件內部是否調用了preventDefault()，瀏覽器只有等內核線程執行到事件監聽器對應的JavaScript代碼時，才能知道內部是否會調用preventDefault函數來阻止事件的默認行為，所以瀏覽器本身無法優化這種場景。手勢輸入事件是由連續的普通輸入事件組成的，在這種場景下，無法快速產生，會導致頁面無法快速執行滑動邏輯，從而讓用戶感覺到頁面卡頓。

而Chrome團隊從統計數據中分析得出，注冊了mousewheel/touch相關事件監聽器的頁面中，80%的頁面內部都不會調用preventDefault函數來阻止事件的默認行為。對于這80%的頁面，即使監聽器內部什么都沒有做，相對沒有注冊mousewheel/touch事件監聽器的頁面，在滑動流暢度上，有10%的頁面增加至少100ms的延遲，1%的頁面甚至增加500ms以上的延遲。Chrome團隊認為對于統計中的這80%的頁面來說，他們都是不希望因為注冊mousewheel/touch相關事件監聽器而導致滑動延遲增加的。

passive的誕生

所以，passive 監聽器誕生了，passive 的意思是“順從的”，表示它不會對事件的默認行為說 no，瀏覽器知道了一個監聽器是 passive 的，它就可以在兩個線程里同時執行監聽器中的 JavaScript 代碼和瀏覽器的默認行為了。

經過上面的分析，我們了解到了Passive Event Listeners特性實際上是為了解決瀏覽器頁面滑動流暢度而設計的，它通過擴展事件屬性passive讓Web開發者來告知瀏覽器監聽器是否會阻止事件的默認行為，從而讓瀏覽器可以更智能地決策并優化，這其中涉及到了Chrome的多線程渲染框架、輸入事件處理等知識。

總結 
參考自：
https://blog.csdn.net/dj0379/...
http://www.cnblogs.com/ziyunf...

本文主要是對上面提及兩篇文章的總結和整理，理順一下自己的思路。如果我寫得不夠明白可以去看看兩位大佬的文章。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/99721.html

相關文章

  • 阻止微信瀏覽器下拉滑動效果（ios11.3 橡皮筋效果）

    摘要：一前言瀏覽器在移動端有一個默認觸摸滾動的效果，讓我們感觸最深的莫過于微信瀏覽器里面，下拉時自帶橡皮筋的效果。二解釋微信在端和端使用的不是同樣的瀏覽器內核版微信瀏覽器瀏覽器內核相當于使用的版微信瀏覽器相當于使用的所以下面分別使用和來分析。 在升級到 ios11.3 系統后，發現之前阻止頁面滾動的代碼e.preventDefault代碼失效了。于是自己折騰了一番，找到了解決辦法，分享給大家...

    cangck_X 評論0 收藏0

  • React禁止頁面滾動踩坑實踐與方案梳理

    摘要：最近在使用技術棧重構一個單頁應用，其中有個頁面是實現城市選擇功能，主要是根據城市的首字母來快速跳轉到相應位置，比較類似原生中的電話聯系人查找功能，頁面如圖主要問題在上下滑動右側定位的元素時，頁面會跟著一起滑動當然這個現象在開發過程中應該會經 最近在使用 React 技術棧重構一個單頁應用，其中有個頁面是實現城市選擇功能，主要是根據城市的首字母來快速跳轉到相應位置，比較類似原生 APP ...

    zhjx922 評論0 收藏0

  • js常見基礎對象屬性方法 (二)

    摘要：常見基礎對象屬性方法二關于的箭頭函數的返回對象的問題箭頭函數具有隱式返回的特性。返回值函數累計處理的結果。語句將某個對象添加的作用域鏈的頂部，如果在中又某個未使用命名空間的變量，跟作用域鏈中的某個屬性同名，則這個變量將指向這個屬性值。 js常見基礎對象屬性方法 (二) 關于es6的箭頭函數的返回對象的問題 箭頭函數(=>)具有隱式返回的特性。如果某個函數體只有單個表達式，你就可以忽略r...

    Donald 評論0 收藏0

  • webapp頁面滾動卡頓的解決辦法

    摘要：手機瀏覽器在滾動當前頁面還可能是縮放頁面時，由于默認行為被阻止，導致頁面被迫靜止，導致用戶使用體驗差，感覺滾動頁面有停頓感。具體一點的解釋由于事件對象的屬性為，也就是說它的默認行為可以被監聽器通過方法阻止。 手機瀏覽器在滾動當前頁面（還可能是縮放頁面）時，由于默認行為被阻止，導致頁面被迫靜止，導致用戶使用體驗差，感覺滾動頁面有停頓感。 具體一點的解釋：由于 touchstart 事件對...

    OnlyLing 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<