IFrame Hell

Duża ilość iframe potrafi powodować problemy w działaniu strony responsywności itp. itd.

Zagnieżdżone iframe powodowały duża ilość requestów w krótkim czasie ( oraz powtarzające się requesty w odstępach czasu ).

Widok po kilku sekundach od załadowania strony bez żadnej optymalizacji.

Mimo powtarzającej się zawartości iframe skrypty oraz zawartość były ładowana jednocześnie.

Jednym ze sposobów optymalizacji tego było opóźnienie ładowania zawartości iframe wraz z kontrolą czy skrypty są nadal wykonywane w iframe.

Tutaj przychodzimy nam atrybut sandbox z HTML5 ( https://www.w3schools.com/tags/att_iframe_sandbox.asp ).

Sandbox pozwala na kontrolowanie co może być wykonywane w iframe lub blokowane.

Optymalizacja polegała na:

  1. Dodanie standardowo atrybutu sandbox ( pustego ) do wszystkich iframe. Skrypty oraz zawartość nie była ładowana podczas ładowania strony.
  2. Dodanie biblioteki jquery.visible ( https://github.com/customd/jquery-visible )
  3. Dodanie funkcji checkVisible która sprawdza wszystkie elementy iframe i ich widoczność w viewport. Jeśli element jest widoczny atrybut sandbox jest usuwany a iframe przeładowywany w innym przypadku do iframe jest dodawany atrybut sandbox który blokuje wykonywanie dalszych skryptów. 

    Kod funkcji checkVisible

    function checkVisible(){
    		var elementsList = $( '.postMain[data-type="1"]' );
    
    		for( var iPosition = 0; iPosition < elementsList.length; iPosition++ ){
    			if( $( elementsList[ iPosition ] ).visible( true ) ){
    
    				var iframe = $( elementsList[ iPosition ] ).find( 'iframe' );
    
    				if( typeof $( iframe ).attr( 'sandbox' ) === typeof undefined ){
    					continue;
    				}
    
    				$( iframe ).removeAttr( 'sandbox' );
    
    				$( iframe ).attr( 'src' ,  $( iframe ).attr( 'src' ) )
    			}
    			else{
    				$( elementsList[ iPosition ] ).find( 'iframe' ).attr( 'sandbox' , '' );
    			}
    		}
    	}
  4. Funkcja checkVisible jest uruchomiana w $( document ).ready() oraz eventu scroll dokumentu i osobnego diva.

Dodaj komentarz

This site uses Akismet to reduce spam. Learn how your comment data is processed.