The application is written in PHP + JAVASCRIPT

The page displays about 2000 lines or more (if it shows a little - about 100, then no problems); In the table, several lines are used in the code of the style=".." , class=".." , id=".." , onclick=".." Also on the screen, in addition to the table, there are elements with a style attribute ( position:fixed ) I do not know maybe this also affects something?

JavaScript tracks the screen scrolling to perform some functions (add the "Up" button, load more lines when scrolling down ...)

So when displaying such a number of lines on the screen, the browser begins to significantly slow down ..

After a long search, it was felt that with a large number of elements they can slow down:

  • JavaScript functions that recount a large number of elements on the screen,

  • tags style="" ,

  • maybe elements with position:fixed style ..

In order to eliminate the extreme assumption, I removed the table with orders in a block of fixed sizes and Overflow-y:auto; As a result, it became even more to brake! :))

Can anyone come across a similar problem? Maybe there is a list of phenomena and constructions that can significantly slow down the browser ??? Help))

UPDATE: Recorded Timeline, while scrolling this page. Timeline

Increased area: Extended timeline

HERE IS AN EXAMPLE OF CODE LINE FROM TABLE:

 <tr></tr> <tr><td> <table> <tbody><tr> <td> <div>β„– 133334</div> </td> <td> <div> <div tit="Бтатус" onreset="selectStatus('133770');"> <span>Новый</span> <span></span> <div> <span name="Π½ΠΎΠ²Ρ‹ΠΉ" forp="1">Новый</span> <span name="333" forp="5">333</span> <span name="Π² производствС" forp="3">Π’ производствС</span> <span name="123123" forp="2">123123</span> <span name="Π² ΠΏΡƒΡ‚ΠΈ" forp="4">Π’ ΠΏΡƒΡ‚ΠΈ</span> <span name="123123" forp="7">123123</span> <span name="123123" forp="8">123123</span> <span name="ΠΏΡ€ΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½" forp="12">ΠŸΡ€ΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½</span> <span name="123123" forp="13">123123</span> <span name="555" forp="15">555</span> <span name="123123" forp="14">123123</span> <span name="Π²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎΠΉ" forp="16">Π’Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎΠΉ</span> <span name="ΠΏΡ€ΠΎΠ·Π²ΠΎΠ½Π΅Π½" forp="17">ΠŸΡ€ΠΎΠ·Π²ΠΎΠ½Π΅Π½</span> <span name="Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½" forp="10">Π’Ρ‹ΠΏΠΎΠ»Π½Π΅Π½</span> <span name="списан" forp="11">Бписан</span> </div> <input type="hidden" value="1"> </div> </div> </td> <td> <div> <div tit="Π‘ΠΎΡ‚Ρ€ΡƒΠ΄Π½ΠΈΠΊ" onreset="selectWaiter('133770','');"> <input type="text"> <span>Π‘ΠΎΡ‚Ρ€ΡƒΠ΄Π½ΠΈΠΊ</span> <span></span> <div> <span name="1112" forp="197">1112</span> <span name="сСргСй Ρ‰Π΅Ρ€Π±ΠΈΠ½ΠΊΠ°" forp="132">Π‘Π΅Ρ€Π³Π΅ΠΉ Π©Π΅Ρ€Π±ΠΈΠ½ΠΊΠ°</span> <span name="Π΄Π°Π½ΠΈΡ‘Ρ€" forp="143">Π”Π°Π½ΠΈΡ‘Ρ€</span> <span name="алСксандр подольск" forp="120">алСксандр подольск</span> <span name="рустам" forp="77">Рустам</span> <span name="Π΄ΠΈΠΌΠ°" forp="83">Π”ΠΈΠΌΠ°</span> <span name="мишакино" forp="158">МишаКино</span> <span name="коля " forp="167">Коля </span> <span name="Π°Π½Π΄Ρ€Π΅ΠΉΠΊΠ°" forp="117">АндрСйка</span> <span name="ΠΎΠ»Π΅Π³" forp="43">ОлСг</span> <span name="Π΄ΠΈΠΌΠ° самсон" forp="123">Π”ΠΈΠΌΠ° Бамсон</span> <span name="Π»Π°Π·ΠΈΠ·" forp="64">Π›Π°Π·ΠΈΠ·</span> <span name="ΠΎΠ»Π΅Π³ Ρ‚Π΅ΠΌΠΊΠ°" forp="156">ОлСг Π’Π΅ΠΌΠΊΠ°</span> <span name="Π°Π½Π΄Ρ€Π΅ΠΉ сСрТант " forp="111">АндрСй Π‘Π΅Ρ€ΠΆΠ°Π½Ρ‚ </span> <span name="Ρ€Π°ΠΉΠΎΠ½" forp="37">Π Π°ΠΉΠΎΠ½</span> <span name="Π½ΠΈΠΊΠΈΡ‚Π° " forp="183">Никита </span> <span name="Π°Π±Ρ€ΠΎΡ€" forp="154">Аброр</span> <span name="миша" forp="119">Миша</span> <span name="Π²Π°Π»ΡŒΠ΄Π΅ΠΌΠ°Ρ€" forp="128">Π’Π°Π»ΡŒΠ΄Π΅ΠΌΠ°Ρ€</span> <span name="саша пСший" forp="150">Баша пСший</span> <span name="сСргСй ΠΏΡƒΡˆΠΊΠΈΠ½ΡΠΊΠ°Ρ" forp="165">Π‘Π΅Ρ€Π³Π΅ΠΉ ΠŸΡƒΡˆΠΊΠΈΠ½ΡΠΊΠ°Ρ</span> <span name="ваня" forp="41">Ваня</span> <span name="ΠΌΠ°Ρ€ΠΈΠ½Π°" forp="147">ΠœΠ°Ρ€ΠΈΠ½Π°</span> <span name="Π²Π°Π»Π΅Ρ€Π°" forp="190">Π’Π°Π»Π΅Ρ€Π°</span> <span name="ванюшка" forp="161">Π’Π°Π½ΡŽΡˆΠΊΠ°</span> <span name="Π°Π»Π°ΠΌ" forp="2">Алам</span> <span name="Π°Ρ€Ρ‚Π΅ΠΌ" forp="5">АртСм</span> <span name="Π³Π΅Ρ€Π°" forp="8">Π“Π΅Ρ€Π°</span> <span name="максим" forp="20">Максим</span> <span name="паша" forp="23">Паша</span> <span name="самовывоз" forp="24">Π‘ΠΠœΠžΠ’Π«Π’ΠžΠ—</span> <span name="уася" forp="195">Уася</span> </div> <input type="hidden" value=""> </div> </div> </td> <td> <div tit="Π€ΠΈΠ»ΠΈΠ°Π»" onreset="for_filial('133770')"> <span>Π©Π΅Ρ€Π±ΠΈΠ½ΠΊΠ°</span> <span></span> <div> <span name="Ρ‰Π΅Ρ€Π±ΠΈΠ½ΠΊΠ°" forp="1">Π©Π΅Ρ€Π±ΠΈΠ½ΠΊΠ°</span> <span name="Π±ΡƒΡ‚ΠΎΠ²ΠΎ" forp="2">Π‘ΡƒΡ‚ΠΎΠ²ΠΎ</span> <span name="ясСнСво" forp="3">ЯсСнСво</span> <span name="ΠΊΠΎΠΌΠΌΡƒΠ½Π°Ρ€ΠΊΠ°" forp="4">ΠšΠΎΠΌΠΌΡƒΠ½Π°Ρ€ΠΊΠ°</span> <span name="подольск" forp="5">Подольск</span> <span name="тСстовый Ρ„ΠΈΠ»ΠΈΠ°Π»" forp="6">ВСстовый Ρ„ΠΈΠ»ΠΈΠ°Π»</span> </div> <input type="hidden" value="1"> </div> </td> <td> <div tit="Π’ΠΎΡ‡ΠΊΠ° ΠΏΡ€ΠΎΠ΄Π°ΠΆ" onreset="for_point('133770')"> <span>Основная</span> <span></span> <div> <span name="основная" forp="1">Основная</span> <span name="123" forp="2">123</span> <span name="333" forp="3">333</span> <span name="43" forp="4">43</span> </div> <input type="hidden" value="1"> </div> </td> <td><span title="Бтатистика ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π°" onclick="popup('client_stat','id=','600','400')">!!!</span> </td> <td> <div> <span></span> </div> </td> <td> <div> <span></span> <div> <span>80 ΠΌΠΌ</span> <span>Π’ΠΎΠ²Π°Ρ€Π½Ρ‹ΠΉ</span> <span>Π”Π²Π° Ρ‚ΠΎΠ².</span> <span>50 ΠΌΠΌ</span> <span>Π‘Π±ΠΎΡ€ΠΊΠ°</span> </div> </div> </td> <td> <div> <span></span> </div></td> </tr> </tbody></table> </td></tr>

In fact, this is only part of the line, but it already gives tangible consequences when there are many such lines on the screen ...

UPD: After solving a number of problems with brakes, I encountered a new unknown: even if the block with the table (with large content) is not visible on the screen (display: none), when the elementary alert function ('123') is called, the brakes appear, which are reflected in the Timeline as Other, here is the screen: Timeline - Other

And! If this content is visible on the screen and there is no display style in the wrapper: none; the alert () function executes quickly, as expected)) Amazing!

  • 3
    Most modern browsers have the ability to profile code. Have you tried? - KoVadim
  • 2
    Usually inhibit curves scripts. And the browser will show it, if you write off the timeline. - Qwertiy ♦
  • Tried, but not very strong in this, did not reveal the exact error .. I also tried to exclude gradually the functions that are involved in the application at all .. As a result, it stopped to slow down, but I had to remove a lot, then began to add alternately and unfortunately I can’t to reveal the moment ... Now I am trying to add from scratch: first a table with lines, then alternately functions and styles .. But this is such a long process (( - L. Aleksandr
  • Recorded Timeline during this three times, scrolled with the mouse scroll, that's what happened! See above. Also in the console 2 warnings: Handling of 'mousewheel' 228 ms due to main thread being busy. Consider marking event handler as 'passive' to make the page more responsive, what to look for ??? - L. Aleksandr
  • You have a lot of rendering time to spend on rendering. Most likely, the scrolling function is working with the house, which causes rending, show the code) - ThisMan 4:05

2 answers 2

Try these steps:

  1. Try to get rid of unnecessary search elements in the dom

    badly:

     for(row in table){ $("selector").find("selector2").css("..."); }

    OK:

     var _$elem = $("selector").find("selector2"); for(row in table){ _$elem.css("..."); }

  2. Make sure that when you hang up an event handler, you then remove it. It is necessary to monitor this so that suddenly it does not turn out that several processors are listening at once or that the processors are duplicated.

    For example:

     //устанавливаСм var eventListener = el.addEventListener("click", eventHandler, false); //ΠΊΠΎΠ³Π΄Π° Π½Π΅ Π½ΡƒΠΆΠ΅Π½ удаляСм el.removeEventListener('click', eventListener, false);

  3. Try to get rid of the unnecessary call of heavy functions and rendering when scrolling. For example, listen to only every tenth scroll, or draw not everything, but only what has really changed.

  4. Shake pictures. Even if you do export for web in Photoshop, for example tinyPng presses them even more (Just be careful with the gradients, make sure not to get too hard)

  5. Think towards modular code organization on the client. For example RequireJs or React-Redux or something like that.

  • Comments are not intended for extended discussion; conversation moved to chat . - PashaPash ♦
  • The first "good" is also bad ... - Qwertiy ♦

It also slows down the browser - CSS!

 html,body { -webkit-touch-callout: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

In my case, the brakes (expressed in Timeline - Other) were due to the indication of such a property in the css file. Naturally brakes are noticeable with a lot of content! And to the surprise if the content is hidden from the screen (display: none)

Maybe someone will be useful))