All geek questions in one place

Javascript JavaScript API takes a long time to initialize when there are a lot of images on the page

I recently ran into a problem when the Facebook API takes a very long time to initialize when there are a lot of images on the page. I would have been more noticeable when there were about 50 MB of images. Facebook init is actually called first in front of everything, but it still seems to be waiting for all images to be loaded first. 95% of the images are actually added to the page asynchronously.

Does anyone encounter a similar problem? At the moment, I'm not sure if this is a bug or how browsers behave, but it is pretty consistent between Chrome and Safari. I also made sure that there is no synchronous code anywhere that could block initialization.

Since we rely on Facebook to find out if the user has already been logged in by first checking the cookie (or making a call to Facebook if there is no cookie), this affects the user interface a bit. We also use Facebook login as the main way, so the user cannot log in until the API is initialized.

This is very easy to play with a slow internet connection. If you want to see the actual behavior, you can go to https://www.toovia.com . Click on the login in the upper right corner and you will see that Face Pile does not exist, that is, the API is still initializing.

This is how I initialize the API. It is largely copied from the Facebook documentation.

var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0]; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js"; ref.parentNode.insertBefore(js, ref);
+4
source share
2 answers

Just FYI. We have finished solving the problem with 3 steps.

  • We have implemented an image resizing scheme so that pages now load 10 times faster.
  • Add the fb element as close as possible to the top possible.
  • A shell has been implemented for the Facebook class to handle all dependent classes of the FB class so that they can be initialized without having to wait for the FB. They are then called when the FB is ready to execute any remaining logic.

Our code is quite complicated, therefore, if the fb element on top just without additional steps just causes too many unexpected problems due to time. It also has a big impact on performance if everything has to wait until the FB object is initialized, although only a subset of the logic depends on the FB.

+1
source

Use the asynchronous version of sdk init and make all your api calls with the help in it, where ays comments call all graph api calls here.

The call will not be executed until sdk is fully loaded.

refer to https://developers.facebook.com/docs/javascript/gettingstarted/#asynchronous

 <div id="fb-root"></div> <script> window.fbAsyncInit = function() { // init the FB JS SDK FB.init({ appId : 'YOUR_APP_ID', // App ID from the app dashboard channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel file for x-domain comms status : true, // Check Facebook Login status xfbml : true // Look for social plugins on the page }); // do all function calls or class calls here as well, fb related. // make all graph api calls here // Additional initialization code such as adding Event Listeners goes here }; // Load the SDK asynchronously (function(d, s, id){ var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script>
0
source

Source: https://habr.com/ru/post/1486718/

More articles:


All Articles