<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clip

Hi <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="

For reference: <a href="https://developer.mozilla.org/en-US/docs/Web/API/MutationObser

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

The third feature has also now been implemented in <a class="issue-link js-issue-link"

Further improvements in <a class="issue-link js-issue-link" data-error-text="Failed to

Greedy script? about jquery.initialize HOT 17 CLOSED

pie6k commented on May 22, 2024

Greedy script?

from jquery.initialize.

Comments (17)

bezborodow commented on May 22, 2024

Hi @ZzZombo. Your performance issue sounds plausible. I'll be looking into it soon.

from jquery.initialize.

bezborodow commented on May 22, 2024

For reference: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

from jquery.initialize.

bezborodow commented on May 22, 2024

There are a few issues here (without delving into the code):

Subscription to all mutations. According to documentation, there are three mutation types: childList, attributes, or characterData. The script needs to observe attributes for situations such as when the class or id attributes are changed. childList must be observed for when a new element is added to the document. We could probably ignore characterData, so we can change that.
The entire document is observed. There is the possibility to add extra options to limit this to specific elements, such as <body> or the main container <div>, etc. This isn't a major issue anyhow.
When a mutation is observed, we search the entire document for matching elements. This could be limited to the element where the mutation occured. However, this could break selectors that use child or descendant combinators. So, this would probably need to be an optional feature to ensure backward compatibility.

from jquery.initialize.

ZzZombo commented on May 22, 2024

This shouldn't break anything. Nodes are already inserted/removed by the time an observer handles such actions. Same goes for all the other event types.

from jquery.initialize.

pati610 commented on May 22, 2024

@ZzZombo I have 50+ selectors registered, and have no impacts on performance whatsoever. Are you sure that you're only initializing your selectors once? Because if they get reinitialized, let's say at partial loads on a dynamic page, that will choke the page in no time.

I know this from my own experience, because I have to do just that - detect newly inserted DOM elements at every partial ajax page load. The site went crazy when selectors were registered. I wrote a deInitialize func, removing either all or defined selectors, that I attached to a jQuery on hashchange callback. Works great!

@pie6k I'll fork your script and then I'll make a pull request, you are free to incorporate my added func as you see fit (if at all.)

from jquery.initialize.

ZzZombo commented on May 22, 2024

The amount of selectors has no impact on performance whatsoever. It's the actual DOM that matters, whether it's a single element "Hello, world" page or both element heavy and dynamically changing one makes huge difference. Using this library in my userscript had actually made my browser ask me if I want to kill unresponsive page or not several times. I no longer use it, having learnt to use the MutationObserver API directly, and while the browser may choke sometimes on complex pages, it still yields better response times overall over the previous version of my script.

from jquery.initialize.

bezborodow commented on May 22, 2024

Edit: Deleted to avoid confusion. The content of this post is out-of-date.

from jquery.initialize.

bezborodow commented on May 22, 2024

The third feature has also now been implemented in #19.

from jquery.initialize.

bezborodow commented on May 22, 2024

Further improvements in #21.

@ZzZombo If you are interested in testing, please test the branch in #21, dbezborodovrp:feature/autoperf

To test via NPM:

npm install github:dbezborodovrp/jquery.initialize#feature/autoperf --save && npm install

from jquery.initialize.

ZzZombo commented on May 22, 2024

You made the wrong call. Please read the API specs, or just do a simple test with debug output to browser console. When MutationObserver fires a callback, all changes in the batch it provides have ALREADY executed, as I have said it so in my first response 😩. That's why you are provided with the changed element and optionally **old**-whatever attribute values and not the other way around, element to be changed, and **new**-something values.

from jquery.initialize.

bezborodow commented on May 22, 2024

Have you seen and tested the changes?

I'm not sure I follow your reasoning. I know that the element has already been mutated before the observer sees it. That's not a problem. If fact, if the change were not visible, then it would be impossible to query the mutated nodes for matches. So, this seems completely irrelevant to me.

I may have not explained my changes correctly. Disregard the above. I will explain it afresh.

What I have done in #19 and #21 is to address the following concerns:

Does it mean that for all mutations

The plugin now ignores mutation types that are not childList or attributes

it subscribed to to all elements in the document

By default, the plugin will observe all elements (that is, document.documentElement. However, you can now override this by specifying an element. For example:

$.initialize.defaults.target = document.getElementById('observe-this-element');

Or:

$.initialize('div.foo', callbackFunction, { target: document.getElementById('observe-this-element') });

Furthermore, the plugin will not query the entire document for nodes matching the selector. It will only check the mutated node for a match (or its descendants or parents depending upon the complexity of the selector.)

from jquery.initialize.

bezborodow commented on May 22, 2024

Did you want to be able to set attributeOldValue to true in the MutationObserverInit options? I can expose that if that is what you are after.

from jquery.initialize.

ZzZombo commented on May 22, 2024

$.initialize.defaults.scanDocument = false; is not needed is all I say.

from jquery.initialize.

bezborodow commented on May 22, 2024

I agree. I removed that in #21.

from jquery.initialize.

ZzZombo commented on May 22, 2024

Then great. Hope to use the updated version in a project soon.

from jquery.initialize.

bezborodow commented on May 22, 2024

Very good. The performance improvements haven't been released yet. If you want to test with your application, please do so by installing the test branch:

npm install github:dbezborodovrp/jquery.initialize#feature/autoperf --save && npm install

I also exposed observer options in 573fb61

from jquery.initialize.

bezborodow commented on May 22, 2024

These performance changes have been released under 1.2.0.

from jquery.initialize.

Greedy script? about jquery.initialize HOT 17 CLOSED

Comments (17)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent