capacitorHttp vs fetch in preformance

Hello developers,

I wonder if there is a performance difference between capacitorHttp and normal web fetch.

  • When using capacitorHttp, since the request occurs on the native side, it doesn’t affect the main thread of the webview, so it might be more beneficial from a javascript and html paint performance.
  • On the other hand, since there’s an additional process of exchanging data between the native and the webview via a bridge, it could negatively impact the overall performance of the app.

What do you guys think? If it’s not due to issues like Cookie/Session/CORS, is there no advantage to using capacitorHttp purely in terms of performance?

I believe in the past a Capacitor team member said to use fetch over Capacitor HTTP if possible. As you mentioned, there is that extra overhead of serializing/deserializing the data between the web layer and the native layer.

I personally only use the web stack for HTTP calls in my app and don’t see any issues.

1 Like

what’s your experience with capacitorHttp with file upload ? i tried to upload file to my server api the file are not reaching my api

I’ve not done any file uploading. How big of a file are you trying? iOS or Android or both? What does your code look like?

If the file is too large you may have issues - Http Capacitor Plugin API | Capacitor Documentation

Do you have to use the HTTP plugin? Why not use the standard web stack for uploading?

Hello @twestrick, is there any way to use capacitorHttp for specific urls?
In my case, one of npm package(which I cannot control) is causing a CORS error, but I don’t want all of my “fetch” requests to be handled by capacitorHttp.

You can use the plugin’s javascript API instead of patching fetch

2 Likes

@julio-ionic, what about the requests that I cannot control? For example, firebase npm package has CORS problem for host capacitor://localhost, and I cannot control their own requests.

I did some researches and I concluded that there is no way to use capacitorHttp only for the firebase URLs. I have Blob upload feature as well, so I cannot enable capacitorHttp globally.

I hope there should be some configuration for enabling capacitorHttp for certain URLs, such as

plugins: {
  CapacitorHttp: {
     enabled: true,
     interceptUrls: [/https:\/\/google-api.com.*/]
  }
}

No, it’s not possible, “enabling” http plugin is just patching fetch/XHR objects and it’s all or nothing