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

Polyfill urls with too many features result in errors #2708

Open
romainmenke opened this issue Jul 31, 2022 · 0 comments
Open

Polyfill urls with too many features result in errors #2708

romainmenke opened this issue Jul 31, 2022 · 0 comments
Labels
service Relates to an Origami service

Comments

@romainmenke
Copy link
Contributor

romainmenke commented Jul 31, 2022

I was wondering what the limits are because it came up in the polyfill service that there is a trade off when adding more features : JakeChampion/polyfill-library#1187 (comment)

Maximum size that seems to work :

  • ± 3086 chars
  • ± 135 features

https://polyfill.io/v3/polyfill.min.js?version=3.111.0&features=AbortController%2CAggregateError%2CArray.from%2CArray.of%2CArray.prototype.%40%40iterator%2CArray.prototype.at%2CArray.prototype.copyWithin%2CArray.prototype.entries%2CArray.prototype.fill%2CArray.prototype.find%2CArray.prototype.findIndex%2CArray.prototype.flat%2CArray.prototype.flatMap%2CArray.prototype.includes%2CArray.prototype.keys%2CArray.prototype.sort%2CArray.prototype.values%2CArrayBuffer%2CArrayBuffer.isView%2CAudioContext%2CBlob%2CCSS.supports%2CCustomEvent%2CDOMRect%2CDOMRect.fromRect%2CDOMTokenList%2CDOMTokenList.prototype.%40%40iterator%2CDOMTokenList.prototype.forEach%2CDOMTokenList.prototype.replace%2CDocumentFragment%2CDocumentFragment.prototype.append%2CDocumentFragment.prototype.prepend%2CElement.prototype.after%2CElement.prototype.append%2CElement.prototype.before%2CElement.prototype.classList%2CElement.prototype.closest%2CElement.prototype.dataset%2CElement.prototype.getAttributeNames%2CElement.prototype.matches%2CElement.prototype.placeholder%2CElement.prototype.prepend%2CElement.prototype.remove%2CElement.prototype.replaceWith%2CElement.prototype.toggleAttribute%2CEvent%2CEvent.focusin%2CEvent.hashchange%2CEventSource%2CFunction.prototype.name%2CHTMLCanvasElement.prototype.toBlob%2CHTMLCollection.prototype.%40%40iterator%2CHTMLDocument%2CHTMLElement.prototype.inert%2CHTMLInputElement.prototype.valueAsDate%2CHTMLPictureElement%2CHTMLSelectElement.prototype.selectedOptions%2CHTMLTemplateElement%2CIntersectionObserver%2CIntersectionObserverEntry%2CIntl.DateTimeFormat%2CIntl.DateTimeFormat.~locale.en%2CIntl.DateTimeFormat.~timeZone.all%2CIntl.DateTimeFormat.~timeZone.golden%2CIntl.DisplayNames%2CIntl.DisplayNames.~locale.en%2CIntl.ListFormat%2CIntl.ListFormat.~locale.en%2CIntl.Locale%2CIntl.NumberFormat%2CIntl.NumberFormat.~locale.en%2CIntl.PluralRules%2CIntl.PluralRules.~locale.en%2CIntl.RelativeTimeFormat%2CIntl.RelativeTimeFormat.~locale.en%2CIntl.getCanonicalLocales%2CMap%2CMath.acosh%2CMath.asinh%2CMath.atanh%2CMath.cbrt%2CMath.clz32%2CMath.cosh%2CMath.expm1%2CMath.fround%2CMath.hypot%2CMath.imul%2CMath.log10%2CMath.log1p%2CMath.log2%2CMath.sign%2CMath.sinh%2CMath.tanh%2CMath.trunc%2CMediaQueryList.prototype.addEventListener%2CMutationObserver%2CNode.prototype.contains%2CNode.prototype.isSameNode%2CNodeList.prototype.%40%40iterator%2CNodeList.prototype.forEach%2CNumber.Epsilon%2CNumber.MAX_SAFE_INTEGER%2CNumber.MIN_SAFE_INTEGER%2CNumber.isFinite%2CNumber.isInteger%2CNumber.isNaN%2CNumber.isSafeInteger%2CNumber.parseFloat%2CNumber.parseInt%2CObject.assign%2CObject.entries%2CObject.freeze%2CObject.fromEntries%2CObject.getOwnPropertyDescriptor%2CObject.getOwnPropertyDescriptors%2CObject.getOwnPropertyNames%2CObject.is%2CObject.isExtensible%2CObject.isFrozen%2CObject.isSealed%2CObject.keys%2CObject.preventExtensions%2CObject.seal%2CObject.setPrototypeOf%2CObject.values%2CPromise%2CPromise.allSettled%2CPromise.any%2CPromise.prototype.finally%2CReflect%2CReflect.apply%2CReflect.construct%2CReflect.defineProperty%2CReflect.deleteProperty%2CReflect.get

This seems like a lot of features but it is fairly easy to reach this because of two aspects :

  • Intl features have a lot of locale's and a site might use multiple Intl features with multiple locales
  • well known Symbols affect many features. (e.g. @@toStringTag)

Even a very naive approach of gzip + base64 reduces the size sufficiently to include all 304 current features plus locale en with a lot of room to spare.


Ideally polyfills would have a short ID.
Using url save characters a large alphabet (±70) can be constructed for a custom encoding.
This would make it possible to only use 3 characters per feature with space for +100k features in total. (current number is 3338 and 2 chars is limited to ±5k features)

This would still not make it possible to request all features and all locales at once, but it would significantly increase the possible number before errors are encountered.


Building URL's could also employ some cleverness like removing features which are already listed as a dependency of other features included in the url.

@origamiserviceuser origamiserviceuser added this to Backlog in Origami ✨ Jul 31, 2022
@github-actions github-actions bot added the service Relates to an Origami service label Jul 31, 2022
@robertboulton robertboulton removed this from Backlog in Origami ✨ Jul 26, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
service Relates to an Origami service
Projects
None yet
Development

No branches or pull requests

1 participant