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

資訊專欄INFORMATION COLUMN

passive的作用和原理

nanchen2251 / 3263人閱讀

摘要：直接由合成線程處理的事件不經(jīng)過內(nèi)核線程就能快速處理的輸入事件為手勢(shì)輸入事件滑動(dòng)捏合。劃重點(diǎn)最騷的來了，雖然手勢(shì)事件可以不在內(nèi)核線程處理，但是手勢(shì)事件的產(chǎn)生還是離不開內(nèi)核線程。

passived到底有什么用？

passived主要用于優(yōu)化瀏覽器頁面滾動(dòng)的性能，讓頁面滾動(dòng)更順滑~~

passived產(chǎn)生的歷史時(shí)間線

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

addEventListener(type, listener, useCapture)

useCapture:是否允許事件捕捉，但是很少會(huì)傳true，然后就變成可選項(xiàng)了：

addEventListener(type, listener[, useCapture ])

到現(xiàn)在就變成了這個(gè)樣子：

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

我們的主角passive就出現(xiàn)了

passive為什么能優(yōu)化頁面的滾動(dòng)性能？ 簡(jiǎn)述chrome的線程化渲染框架 chrome的線程化渲染框架的兩個(gè)線程：

內(nèi)核線程（Main/Render Thread）：負(fù)責(zé)DOM樹構(gòu)建、元素的布局、圖層繪制記錄部分（main-thread side）、JavaScript的執(zhí)行

合成線程（Compositor Thread）：圖層繪制實(shí)現(xiàn)部分（impl-side）、圖層圖像合成


上圖可知，頁面Frame#1在內(nèi)核線程中完成js執(zhí)行、布局和繪制后，經(jīng)過一個(gè)周期合成線程去執(zhí)行Frame#1頁面圖像的合成。

用戶輸入事件分類：

在內(nèi)核線程處理的事件

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

那么有什么區(qū)別呢？

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

劃重點(diǎn)：最騷的來了，雖然手勢(shì)事件可以不在內(nèi)核線程處理，但是手勢(shì)事件的產(chǎn)生還是離不開內(nèi)核線程。

頁面卡頓的原因

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

而Chrome團(tuán)隊(duì)從統(tǒng)計(jì)數(shù)據(jù)中分析得出，注冊(cè)了mousewheel/touch相關(guān)事件監(jiān)聽器的頁面中，80%的頁面內(nèi)部都不會(huì)調(diào)用preventDefault函數(shù)來阻止事件的默認(rèn)行為。對(duì)于這80%的頁面，即使監(jiān)聽器內(nèi)部什么都沒有做，相對(duì)沒有注冊(cè)mousewheel/touch事件監(jiān)聽器的頁面，在滑動(dòng)流暢度上，有10%的頁面增加至少100ms的延遲，1%的頁面甚至增加500ms以上的延遲。Chrome團(tuán)隊(duì)認(rèn)為對(duì)于統(tǒng)計(jì)中的這80%的頁面來說，他們都是不希望因?yàn)樽?cè)mousewheel/touch相關(guān)事件監(jiān)聽器而導(dǎo)致滑動(dòng)延遲增加的。

passive的誕生

所以，passive 監(jiān)聽器誕生了，passive 的意思是“順從的”，表示它不會(huì)對(duì)事件的默認(rèn)行為說 no，瀏覽器知道了一個(gè)監(jiān)聽器是 passive 的，它就可以在兩個(gè)線程里同時(shí)執(zhí)行監(jiān)聽器中的 JavaScript 代碼和瀏覽器的默認(rèn)行為了。

經(jīng)過上面的分析，我們了解到了Passive Event Listeners特性實(shí)際上是為了解決瀏覽器頁面滑動(dòng)流暢度而設(shè)計(jì)的，它通過擴(kuò)展事件屬性passive讓W(xué)eb開發(fā)者來告知瀏覽器監(jiān)聽器是否會(huì)阻止事件的默認(rèn)行為，從而讓瀏覽器可以更智能地決策并優(yōu)化，這其中涉及到了Chrome的多線程渲染框架、輸入事件處理等知識(shí)。

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/99721.html

相關(guān)文章

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

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

    cangck_X 評(píng)論0 收藏0

  • React禁止頁面滾動(dòng)踩坑實(shí)踐與方案梳理

    摘要：最近在使用技術(shù)棧重構(gòu)一個(gè)單頁應(yīng)用，其中有個(gè)頁面是實(shí)現(xiàn)城市選擇功能，主要是根據(jù)城市的首字母來快速跳轉(zhuǎn)到相應(yīng)位置，比較類似原生中的電話聯(lián)系人查找功能，頁面如圖主要問題在上下滑動(dòng)右側(cè)定位的元素時(shí)，頁面會(huì)跟著一起滑動(dòng)當(dāng)然這個(gè)現(xiàn)象在開發(fā)過程中應(yīng)該會(huì)經(jīng) 最近在使用 React 技術(shù)棧重構(gòu)一個(gè)單頁應(yīng)用，其中有個(gè)頁面是實(shí)現(xiàn)城市選擇功能，主要是根據(jù)城市的首字母來快速跳轉(zhuǎn)到相應(yīng)位置，比較類似原生 APP ...

    zhjx922 評(píng)論0 收藏0

  • js常見基礎(chǔ)對(duì)象屬性方法 (二)

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

    Donald 評(píng)論0 收藏0

  • webapp頁面滾動(dòng)卡頓的解決辦法

    摘要：手機(jī)瀏覽器在滾動(dòng)當(dāng)前頁面還可能是縮放頁面時(shí)，由于默認(rèn)行為被阻止，導(dǎo)致頁面被迫靜止，導(dǎo)致用戶使用體驗(yàn)差，感覺滾動(dòng)頁面有停頓感。具體一點(diǎn)的解釋由于事件對(duì)象的屬性為，也就是說它的默認(rèn)行為可以被監(jiān)聽器通過方法阻止。 手機(jī)瀏覽器在滾動(dòng)當(dāng)前頁面（還可能是縮放頁面）時(shí)，由于默認(rèn)行為被阻止，導(dǎo)致頁面被迫靜止，導(dǎo)致用戶使用體驗(yàn)差，感覺滾動(dòng)頁面有停頓感。 具體一點(diǎn)的解釋：由于 touchstart 事件對(duì)...

    OnlyLing 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<