Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Js Reflow: [Violation] Forced reflow while executing JavaScript took ~200ms #5

Open
0m3r opened this issue Dec 31, 2024 · 3 comments
Open

Comments

@0m3r
Copy link
Member

0m3r commented Dec 31, 2024

image

popular place swiper.js line 506
line 506 took 75 % of time

  function css(props, value) {
    var i;
    if (arguments.length === 1) {
      if (typeof props === 'string') {
        if (this[0]) { return win.getComputedStyle(this[0], null).getPropertyValue(props); } //line 506 took 75 % of time
      } else {

image

@0m3r 0m3r changed the title Js Reflow: [Violation] Forced reflow while executing JavaScript took 204ms Js Reflow: [Violation] Forced reflow while executing JavaScript took ~200ms Dec 31, 2024
0m3r added a commit that referenced this issue Jan 2, 2025
@0m3r
Copy link
Member Author

0m3r commented Jan 2, 2025

one more possible improvment

      setTimeout(() => {

      $images.each(function (imageIndex, imageEl) {
        var $imageEl = $(imageEl);
        $imageEl.addClass(params.loadingClass);

image

@0m3r 0m3r closed this as completed in f2c8ebe Jan 3, 2025
@0m3r 0m3r reopened this Jan 3, 2025
0m3r added a commit that referenced this issue Jan 3, 2025
@0m3r
Copy link
Member Author

0m3r commented Jan 3, 2025

related
nolimits4web/swiper#2465

@0m3r
Copy link
Member Author

0m3r commented Jan 3, 2025

possible improvement

image

split init function

Utils.nextTick(() => {
swiper.updateSize();

Swiper.prototype.init = function init() {
            var swiper = this;
            if (swiper.initialized) {
                return;
            }
            swiper.emit('beforeInit');
            if (swiper.params.breakpoints) {
                swiper.setBreakpoint();
            }
            swiper.addClasses();
            if (swiper.params.loop) {
                swiper.loopCreate();
            }
            Utils.nextTick(() => {
                swiper.updateSize();
                swiper.updateSlides();
                if (swiper.params.watchOverflow) {
                    swiper.checkOverflow();
                }
                if (swiper.params.grabCursor) {
                    swiper.setGrabCursor();
                }
                if (swiper.params.preloadImages) {
                    swiper.preloadImages();
                }
                if (swiper.params.loop) {
                    swiper.slideTo(swiper.params.initialSlide + swiper.loopedSlides, 0, swiper.params.runCallbacksOnInit);
                } else {
                    swiper.slideTo(swiper.params.initialSlide, 0, swiper.params.runCallbacksOnInit);
                }
                swiper.attachEvents();
                swiper.initialized = true;
                swiper.emit('init');
            });
        }
        
        ```

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant