Benchmark: Vevet.SplitText & SplitType Comparison / Words & Letters

HTML Preparation code:

<p id="split-text"> <b>Lorem</b>ipsum dolor <b style="color: red;">sit</b> amet,&nbsp;consectetur adipiscing elit, <span style="color: blue;">sed <b><i>d</i>o</b></span> eius<b>m<i>od</i></b> tempor <i>incididunt ut</i> labore et dolore magna aliqua. <br /> <br /> <button type="button" style="font: inherit; background-color: #ccc;">Ut enim</button> ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>

Script Preparation code:

!function(){"use strict";const e=[];function t(t,s,n,r){if(void 0!==r){const e={passive:!1,once:!1};r.once&&(e.once=!0),r.passive&&(e.passive=!0),t.addEventListener(s,n,e)}else t.addEventListener(s,n);const o=`${Math.random()}-${+new Date}`;return e.push({id:o,el:t,target:s,callback:n}),{id:o,remove:i.bind(this,o)}}function i(t){const i=[];for(let s=0,n=e.length;s<n;s++){const n=e[s];n.id===t?n.el.removeEventListener(n.target,n.callback):i.push(n)}}let s=0;class n{get callbacks(){return this._callbacks}constructor(e=!0){this._callbacks=[],e&&this._init()}_init(){}add(e,t,i={}){const n=function(e="id"){return s+=1,`${e}_${s}`}("callback");return this._callbacks.push(Object.assign({id:n,isEnabled:!0,target:e,action:t},i)),{id:n,remove:()=>this.remove(n)}}remove(e){return this._remove(e)}_remove(e,t=!1){let i=!1;return this._callbacks=this._callbacks.filter((({id:s,isProtected:n})=>s!==e||!(!n||t)||(i=!0,!1))),i}_removeAll(){for(;this._callbacks.length>0;)this._remove(this._callbacks[0].id,!0)}turn(e,t=!0){const i=this.get(e);i&&(i.isEnabled=t)}get(e){return this._callbacks.filter((({id:t})=>t===e))[0]||void 0}_callAction({id:e,isEnabled:t,timeout:i,isOnce:s,action:n},r){t&&(function(e,t){let i;0===t?e():i=setTimeout((()=>e()),t)}((()=>n(r)),null!=i?i:0),s&&this._remove(e,!0))}tbt(e,t){this._callbacks.forEach((i=>{i.target===e&&this._callAction(i,t)}))}destroy(){this._removeAll()}}var r,o;function a(){return window.vevetApp}!function(e){e.Desktop="desktop",e.Tablet="tablet",e.Phone="phone"}(r||(r={})),function(e){e.Landscape="landscape",e.Portrait="portrait"}(o||(o={}));class l extends n{get width(){return this._width}get height(){return this._height}get radius(){return Math.sqrt(Math.pow(this.width,2)+Math.pow(this.height,2))/2}get vw(){return this.width/100}get vh(){return this.height/100}get vr(){return this.radius/100}get isLandscape(){return this.width>this.height}get isPortrait(){return this.width<this.height}get isDesktop(){return this.width>a().props.tablet}get isTablet(){return this.width<=a().props.tablet&&this.width>a().props.phone}get isPhone(){return this.width<=a().props.phone}get dpr(){return window.devicePixelRatio}get lowerDesktopDpr(){return a().isDesktop?1:this.dpr}constructor(){super(!1),this._width=0,this._height=0,this._init()}_init(){this._updateValues(),this._setEvents()}_setEvents(){this._resizeListener=t(window,"resize",(()=>{this._resizeTimeout&&(clearTimeout(this._resizeTimeout),this._resizeTimeout=void 0),this._resizeTimeout=setTimeout((()=>{this._onResize(),this._resizeTimeout=void 0}),a().props.resizeDebounce)}))}_updateValues(){const{html:e,props:t}=a(),i="boundingRect"===t.widthDetection?parseFloat(e.getBoundingClientRect().width.toFixed(3)):e.clientWidth;this._width=i,this._height=e.clientHeight,this._updateClassNames(),this._updateCSSVars()}_updateClassNames(){const e=[r.Desktop,r.Tablet,r.Phone];this.isDesktop?this._updateBreakpointClassNames(r.Desktop,e):this.isTablet?this._updateBreakpointClassNames(r.Tablet,e):this._updateBreakpointClassNames(r.Phone,e);const t=[o.Landscape,o.Portrait];this.isLandscape?this._updateBreakpointClassNames(o.Landscape,t):this.isPortrait?this._updateBreakpointClassNames(o.Portrait,t):this._updateBreakpointClassNames("",t)}_updateBreakpointClassNames(e,t){const{html:i,prefix:s}=a();t.forEach((t=>{t===e?i.classList.add(`${s}viewport-${t}`):i.classList.remove(`${s}viewport-${t}`)}))}_updateCSSVars(){const{html:e}=a();e.style.setProperty("--vw",`${this.vw}px`),e.style.setProperty("--vh",`${this.vh}px`),e.style.setProperty("--vr",`${this.vr}px`)}_onResize(){const{_width:e,_height:t}=this;this._updateValues();const{width:i,height:s}=this,n={isWidthChanged:i!==e,isHeightChanged:s!==t,isOrientationChanged:i>s!=e>t};i!==e&&s===t&&this.tbt("widthOnly",n),s!==t&&i===e&&this.tbt("heightOnly",n),i!==e&&s!==t&&this.tbt("both",n),i!==e&&this.tbt("width",n),s!==t&&this.tbt("height",n),this.tbt("any",n)}destroy(){var e;super.destroy(),this._resizeTimeout&&clearTimeout(this._resizeTimeout),null===(e=this._resizeListener)||void 0===e||e.remove()}}class c extends n{get isLoaded(){return this._isLoaded}constructor(){super(!1),this._isLoaded=!1,this._init()}_init(){super._init(),this._setEvents()}_setEvents(){"complete"!==document.readyState?this._loadListener=t(window,"load",(()=>this._handleLoaded())):this._handleLoaded()}_handleLoaded(){const e=a(),{prefix:t}=e;this._isLoaded=!0,e.html.classList.remove(`${t}loading`),e.body.classList.remove(`${t}loading`),e.html.classList.add(`${t}loaded`),this.tbt("loaded",void 0)}onLoad(e){if(!this.isLoaded)return this.add("loaded",e.bind(this));e()}destroy(){var e;super.destroy(),null===(e=this._loadListener)||void 0===e||e.remove()}}var h=function(e,t,i){if(i||2===arguments.length)for(var s,n=0,r=t.length;n<r;n++)!s&&n in t||(s||(s=Array.prototype.slice.call(t,0,n)),s[n]=t[n]);return e.concat(s||Array.prototype.slice.call(t))},d=function(e,t,i){this.name=e,this.version=t,this.os=i,this.type="browser"},p=function(e){this.version=e,this.type="node",this.name="node",this.os=process.platform},u=function(e,t,i,s){this.name=e,this.version=t,this.os=i,this.bot=s,this.type="bot-device"},f=function(){this.type="bot",this.bot=!0,this.name="bot",this.version=null,this.os=null},m=function(){this.type="react-native",this.name="react-native",this.version=null,this.os=null},v=/(nuhk|curl|Googlebot|Yammybot|Openbot|Slurp|MSNBot|Ask\ Jeeves\/Teoma|ia_archiver)/,g=3,b=[["aol",/AOLShield\/([0-9\._]+)/],["edge",/Edge\/([0-9\._]+)/],["edge-ios",/EdgiOS\/([0-9\._]+)/],["yandexbrowser",/YaBrowser\/([0-9\._]+)/],["kakaotalk",/KAKAOTALK\s([0-9\.]+)/],["samsung",/SamsungBrowser\/([0-9\.]+)/],["silk",/\bSilk\/([0-9._-]+)\b/],["miui",/MiuiBrowser\/([0-9\.]+)$/],["beaker",/BeakerBrowser\/([0-9\.]+)/],["edge-chromium",/EdgA?\/([0-9\.]+)/],["chromium-webview",/(?!Chrom.*OPR)wv\).*Chrom(?:e|ium)\/([0-9\.]+)(:?\s|$)/],["chrome",/(?!Chrom.*OPR)Chrom(?:e|ium)\/([0-9\.]+)(:?\s|$)/],["phantomjs",/PhantomJS\/([0-9\.]+)(:?\s|$)/],["crios",/CriOS\/([0-9\.]+)(:?\s|$)/],["firefox",/Firefox\/([0-9\.]+)(?:\s|$)/],["fxios",/FxiOS\/([0-9\.]+)/],["opera-mini",/Opera Mini.*Version\/([0-9\.]+)/],["opera",/Opera\/([0-9\.]+)(?:\s|$)/],["opera",/OPR\/([0-9\.]+)(:?\s|$)/],["pie",/^Microsoft Pocket Internet Explorer\/(\d+\.\d+)$/],["pie",/^Mozilla\/\d\.\d+\s\(compatible;\s(?:MSP?IE|MSInternet Explorer) (\d+\.\d+);.*Windows CE.*\)$/],["netfront",/^Mozilla\/\d\.\d+.*NetFront\/(\d.\d)/],["ie",/Trident\/7\.0.*rv\:([0-9\.]+).*\).*Gecko$/],["ie",/MSIE\s([0-9\.]+);.*Trident\/[4-7].0/],["ie",/MSIE\s(7\.0)/],["bb10",/BB10;\sTouch.*Version\/([0-9\.]+)/],["android",/Android\s([0-9\.]+)/],["ios",/Version\/([0-9\._]+).*Mobile.*Safari.*/],["safari",/Version\/([0-9\._]+).*Safari/],["facebook",/FB[AS]V\/([0-9\.]+)/],["instagram",/Instagram\s([0-9\.]+)/],["ios-webview",/AppleWebKit\/([0-9\.]+).*Mobile/],["ios-webview",/AppleWebKit\/([0-9\.]+).*Gecko\)$/],["curl",/^curl\/([0-9\.]+)$/],["searchbot",/alexa|bot|crawl(er|ing)|facebookexternalhit|feedburner|google web preview|nagios|postrank|pingdom|slurp|spider|yahoo!|yandex/]],w=[["iOS",/iP(hone|od|ad)/],["Android OS",/Android/],["BlackBerry OS",/BlackBerry|BB10/],["Windows Mobile",/IEMobile/],["Amazon OS",/Kindle/],["Windows 3.11",/Win16/],["Windows 95",/(Windows 95)|(Win95)|(Windows_95)/],["Windows 98",/(Windows 98)|(Win98)/],["Windows 2000",/(Windows NT 5.0)|(Windows 2000)/],["Windows XP",/(Windows NT 5.1)|(Windows XP)/],["Windows Server 2003",/(Windows NT 5.2)/],["Windows Vista",/(Windows NT 6.0)/],["Windows 7",/(Windows NT 6.1)/],["Windows 8",/(Windows NT 6.2)/],["Windows 8.1",/(Windows NT 6.3)/],["Windows 10",/(Windows NT 10.0)/],["Windows ME",/Windows ME/],["Windows CE",/Windows CE|WinCE|Microsoft Pocket Internet Explorer/],["Open BSD",/OpenBSD/],["Sun OS",/SunOS/],["Chrome OS",/CrOS/],["Linux",/(Linux)|(X11)/],["Mac OS",/(Mac_PowerPC)|(Macintosh)/],["QNX",/QNX/],["BeOS",/BeOS/],["OS/2",/OS\/2/]];function y(e){var t=function(e){return""!==e&&b.reduce((function(t,i){var s=i[0],n=i[1];if(t)return t;var r=n.exec(e);return!!r&&[s,r]}),!1)}(e);if(!t)return null;var i=t[0],s=t[1];if("searchbot"===i)return new f;var n=s[1]&&s[1].split(".").join("_").split("_").slice(0,3);n?n.length<g&&(n=h(h([],n,!0),function(e){for(var t=[],i=0;i<e;i++)t.push("0");return t}(g-n.length),!0)):n=[];var r=n.join("."),o=function(e){for(var t=0,i=w.length;t<i;t++){var s=w[t],n=s[0];if(s[1].exec(e))return n}return null}(e),a=v.exec(e);return a&&a[1]?new u(i,r,o,a[1]):new d(i,r,o)}var _=/iPhone/i,O=/iPod/i,k=/iPad/i,E=/\biOS-universal(?:.+)Mac\b/i,C=/\bAndroid(?:.+)Mobile\b/i,S=/Android/i,P=/(?:SD4930UR|\bSilk(?:.+)Mobile\b)/i,T=/Silk/i,N=/Windows Phone/i,j=/\bWindows(?:.+)ARM\b/i,A=/BlackBerry/i,x=/BB10/i,L=/Opera Mini/i,W=/\b(CriOS|Chrome)(?:.+)Mobile/i,M=/Mobile(?:.+)Firefox\b/i,B=function(e){return void 0!==e&&"MacIntel"===e.platform&&"number"==typeof e.maxTouchPoints&&e.maxTouchPoints>1&&"undefined"==typeof MSStream};function D(){var e;const t=i?y(i):"undefined"==typeof document&&"undefined"!=typeof navigator&&"ReactNative"===navigator.product?new m:"undefined"!=typeof navigator?y(navigator.userAgent):"undefined"!=typeof process&&process.version?new p(process.version.slice(1)):null;var i;return{osName:null===(e=(null==t?void 0:t.os)||"")||void 0===e?void 0:e.split(" ")[0].toLowerCase(),browserName:((null==t?void 0:t.name)||"").toLowerCase(),device:function(e){var t={userAgent:"",platform:"",maxTouchPoints:0};"undefined"==typeof navigator||(t={userAgent:navigator.userAgent,platform:navigator.platform,maxTouchPoints:navigator.maxTouchPoints||0});var i=t.userAgent,s=i.split("[FBAN");void 0!==s[1]&&(i=s[0]),void 0!==(s=i.split("Twitter"))[1]&&(i=s[0]);var n=function(e){return function(t){return t.test(e)}}(i),r={apple:{phone:n(_)&&!n(N),ipod:n(O),tablet:!n(_)&&(n(k)||B(t))&&!n(N),universal:n(E),device:(n(_)||n(O)||n(k)||n(E)||B(t))&&!n(N)},amazon:{phone:n(P),tablet:!n(P)&&n(T),device:n(P)||n(T)},android:{phone:!n(N)&&n(P)||!n(N)&&n(C),tablet:!n(N)&&!n(P)&&!n(C)&&(n(T)||n(S)),device:!n(N)&&(n(P)||n(T)||n(C)||n(S))||n(/\bokhttp\b/i)},windows:{phone:n(N),tablet:n(j),device:n(N)||n(j)},other:{blackberry:n(A),blackberry10:n(x),opera:n(L),firefox:n(M),chrome:n(W),device:n(A)||n(x)||n(L)||n(M)||n(W)},any:!1,phone:!1,tablet:!1};return r.any=r.apple.device||r.android.device||r.windows.device||r.other.device,r.phone=r.apple.phone||r.android.phone||r.windows.phone,r.tablet=r.apple.tablet||r.android.tablet||r.windows.tablet,r}()}}var R,$,z,I,V,F,H,X,K=(R=function(e,t){return R=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i])},R(e,t)},function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");function i(){this.constructor=e}R(e,t),e.prototype=null===t?Object.create(t):(i.prototype=t.prototype,new i)}),Q=function(e,t,i,s,n){if("m"===s)throw new TypeError("Private method is not writable");if("a"===s&&!n)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!n:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===s?n.call(e,i):n?n.value=i:t.set(e,i),i},U=function(e,t,i,s){if("a"===i&&!s)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!s:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===i?s:"a"===i?s.call(e):s?s.value:t.get(e)},q=function(e){function t(t){var i=e.call(this,t||"Promise was canceled")||this;return i.name="CancelError",i}return K(t,e),Object.defineProperty(t.prototype,"isCanceled",{get:function(){return!0},enumerable:!1,configurable:!0}),t}(Error),G=Object.freeze({pending:Symbol("pending"),canceled:Symbol("canceled"),resolved:Symbol("resolved"),rejected:Symbol("rejected")}),J=function(){function e(e){var t=this;$.add(this),z.set(this,[]),I.set(this,!0),V.set(this,G.pending),F.set(this,void 0),H.set(this,void 0),Q(this,F,new Promise((function(i,s){Q(t,H,s,"f");var n=function(e){if(U(t,V,"f")!==G.pending)throw new Error("The `onCancel` handler was attached after the promise ".concat(U(t,V,"f").description,"."));U(t,z,"f").push(e)};Object.defineProperties(n,{shouldReject:{get:function(){return U(t,I,"f")},set:function(e){Q(t,I,e,"f")}}}),e((function(e){U(t,V,"f")===G.canceled&&n.shouldReject||(i(e),U(t,$,"m",X).call(t,G.resolved))}),(function(e){U(t,V,"f")===G.canceled&&n.shouldReject||(s(e),U(t,$,"m",X).call(t,G.rejected))}),n)})),"f")}return e.fn=function(t){return function(){for(var i=[],s=0;s<arguments.length;s++)i[s]=arguments[s];return new e((function(e,s,n){i.push(n),t.apply(void 0,i).then(e,s)}))}},e.prototype.then=function(e,t){return U(this,F,"f").then(e,t)},e.prototype.catch=function(e){return U(this,F,"f").catch(e)},e.prototype.finally=function(e){return U(this,F,"f").finally(e)},e.prototype.cancel=function(e){if(U(this,V,"f")===G.pending){if(U(this,$,"m",X).call(this,G.canceled),U(this,z,"f").length>0)try{for(var t=0,i=U(this,z,"f");t<i.length;t++)(0,i[t])()}catch(e){return void U(this,H,"f").call(this,e)}U(this,I,"f")&&U(this,H,"f").call(this,new q(e))}},Object.defineProperty(e.prototype,"isCanceled",{get:function(){return U(this,V,"f")===G.canceled},enumerable:!1,configurable:!0}),e}(),Y=J;function Z(e,t){if(e instanceof Window)return e;if((i=e)instanceof HTMLElement||i instanceof Element)return e;var i;if(void 0!==t){const i=Z(t);if(i)return i.querySelector(e)}return document.querySelector(e)}z=new WeakMap,I=new WeakMap,V=new WeakMap,F=new WeakMap,H=new WeakMap,$=new WeakSet,X=function(e){U(this,V,"f")===G.pending&&Q(this,V,e,"f")},Object.setPrototypeOf(J.prototype,Promise.prototype);class ee{get props(){return this._props}constructor(e,t=(()=>{}),i="Responsive Props"){this._initProps=e,this._onMutate=t,this._name=i,this._responsiveRules=[],this._refProps=Object.assign({},e),this._props=Object.assign({},e),this._activeBreakpoints=[]}addResponsiveProps(e){this._responsiveRules.push(e),this._responseProps(),void 0===this._viewportCallback&&(this._viewportCallback=a().viewport.add("width",this._responseProps.bind(this),{name:this._name}))}_responseProps(){const e=a(),{viewport:t}=e;let i=!1;const s=Object.assign({},this._refProps),n=[...this._activeBreakpoints].join("_");this._activeBreakpoints=[],this._responsiveRules.forEach((({settings:n,breakpoint:r})=>{"number"==typeof r?t.width<=r&&(this._activeBreakpoints.push(r),i=Object.assign(Object.assign({},s),n)):"string"==typeof r&&(("viewport_desktop"===r&&t.isDesktop||"viewport_tablet"===r&&t.isTablet||"viewport_phone"===r&&t.isPhone)&&(this._activeBreakpoints.push(r),i=Object.assign(Object.assign({},i||s),n)),("device_phone"===r&&e.isPhone||"device_tablet"===r&&e.isTablet||"device_mobile"===r&&e.isMobile)&&(this._activeBreakpoints.push(r),i=Object.assign(Object.assign({},i||s),n)))}));const r=this._activeBreakpoints.join("_")!==n;this._props=i?Object.assign(Object.assign({},this._props),i):Object.assign(Object.assign({},this._props),this._refProps),r&&this._onMutate()}changeProps(e){this._props=Object.assign(Object.assign({},this._props),e),this._refProps=Object.assign(Object.assign({},this._refProps),e),this._onMutate()}destroy(){this._viewportCallback&&this._viewportCallback.remove()}}class te{_getDefaultProps(){return{}}get props(){return this._mutableProps.props}get callbacks(){return this._callbacks}get name(){return this.constructor.name}get prefix(){return""}get isInitialized(){return this._isInitialized}get isDestroyed(){return this._isDestroyed}constructor(e,t=!0){if(this._isInitialized=!1,this._isDestroyed=!1,!a())throw new Error('Vevet.Application does not exist yet. Call "new Vevet.Application()" before using all the stuff');this._callbacks=new n,this._listeners=[],this._destroyableActions=[],this._classNamesToRemove=[];const i=Object.assign(Object.assign({},this._getDefaultProps()),e||{});this._mutableProps=new ee(i,(()=>this._onPropsMutate()),this.name),t&&this.init()}addResponsiveProps(e){if(this.isInitialized)throw new Error("Responsive properties cannot be added after `init` is called");this._mutableProps.addResponsiveProps(e)}changeProps(e){this.isDestroyed||(this._mutableProps.changeProps(e),this._callbacks.tbt("propsChange",void 0))}_onPropsMutate(){this._callbacks.tbt("propsMutate",void 0)}init(){this.isInitialized||(this._isInitialized=!0,this._init())}_init(){}addDestroyableAction(e){this._destroyableActions.push(e)}addViewportCallback(e,t,i={}){const s=a().viewport.add(e,t,Object.assign(Object.assign({},i),{name:this.constructor.name}));this.addDestroyableAction((()=>s.remove()))}addCallback(e,t,i={}){return this.callbacks.add(e,t,i)}addEventListener(e,i,s,n){const r=t(e,i,s,n);return this._listeners.push(r),Object.assign(Object.assign({},r),{remove:()=>(this._listeners=this._listeners.filter((e=>e.id!==r.id)),r.remove())})}className(...e){return e.map((e=>`${this.prefix}${e}`)).join(" ")}toggleClassName(e,t,i){const s=e.classList.contains(t);e.classList.toggle(t,i),s||this._classNamesToRemove.push({element:e,className:t})}destroy(){this.isDestroyed||this._destroy()}_destroy(){this._callbacks.tbt("destroy",void 0),this._callbacks.destroy(),this._mutableProps.destroy(),this._destroyableActions.forEach((e=>e())),this._listeners.forEach((e=>e.remove())),this._classNamesToRemove.forEach((({element:e,className:t})=>e.classList.remove(t))),this._isDestroyed=!0}}class ie extends te{addPlugin(e){void 0===this._plugins&&(this._plugins=[]),this._plugins.push(e),e.component=this,e.init()}_destroyPlugins(){var e;null===(e=this._plugins)||void 0===e||e.forEach((e=>e.destroy()))}_destroy(){super._destroy(),this._destroyPlugins()}}function se(e,t){return ne(e,t)}function ne(e,t){return e===t||null!==e&&ne(e.parentNode,t)}function re(e,t){var i;return(null==e?void 0:e.parentElement)===t?e:re(null!==(i=null==e?void 0:e.parentElement)&&void 0!==i?i:null,t)}function oe({container:e,words:t,className:i,tagName:s}){const n=[];let r=-1,o=1/0;t.forEach((t=>{var a;const l=Math.round(t.element.getBoundingClientRect().top),c=re(t.element,e);if(l!==o){o=l,r+=1;const e=document.createElement(s);e.style.display="block",e.classList.add(i),n[r]={element:e,nodes:[],words:[]}}const h=n[r];n.find((({nodes:e})=>e.includes(c)))||(h.nodes.push(c),3===(null===(a=c.nextSibling)||void 0===a?void 0:a.nodeType)&&h.nodes.push(c.nextSibling))})),n.forEach((t=>{e.insertBefore(t.element,t.nodes[0]),t.element.append(...t.nodes)}));const a=[];return n.forEach((e=>{const t=e.element.nextElementSibling;t instanceof HTMLBRElement&&(t.style.display="none",a.push(t))})),n.forEach((e=>{e.words.push(...t.filter((t=>se(t.element,e.element))))})),{lines:n,destroy:()=>{a.forEach((e=>{e.style.display=""})),n.forEach((t=>{t.nodes.forEach((i=>{e.insertBefore(i,t.element)})),t.element.remove()}))}}}function ae(e,t){for(var i=0;i<t.length;i++){var s=t[i];s.enumerable=s.enumerable||!1,s.configurable=!0,"value"in s&&(s.writable=!0),Object.defineProperty(e,s.key,s)}}function le(e,t,i){return t&&ae(e.prototype,t),i&&ae(e,i),e}function ce(e,t,i){return t in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function he(e,t){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);t&&(s=s.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),i.push.apply(i,s)}return i}function de(e){for(var t=1;t<arguments.length;t++){var i=null!=arguments[t]?arguments[t]:{};t%2?he(Object(i),!0).forEach((function(t){ce(e,t,i[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):he(Object(i)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(i,t))}))}return e}function pe(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e)){var i=[],s=!0,n=!1,r=void 0;try{for(var o,a=e[Symbol.iterator]();!(s=(o=a.next()).done)&&(i.push(o.value),!t||i.length!==t);s=!0);}catch(e){n=!0,r=e}finally{try{s||null==a.return||a.return()}finally{if(n)throw r}}return i}}(e,t)||fe(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function ue(e){return function(e){if(Array.isArray(e))return me(e)}(e)||function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}(e)||fe(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function fe(e,t){if(e){if("string"==typeof e)return me(e,t);var i=Object.prototype.toString.call(e).slice(8,-1);return"Object"===i&&e.constructor&&(i=e.constructor.name),"Map"===i||"Set"===i?Array.from(e):"Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i)?me(e,t):void 0}}function me(e,t){(null==t||t>e.length)&&(t=e.length);for(var i=0,s=new Array(t);i<t;i++)s[i]=e[i];return s}function ve(e,t){return Object.getOwnPropertyNames(Object(e)).reduce((function(i,s){var n=Object.getOwnPropertyDescriptor(Object(e),s),r=Object.getOwnPropertyDescriptor(Object(t),s);return Object.defineProperty(i,s,r||n)}),{})}function ge(e){return"string"==typeof e}function be(e){return Array.isArray(e)}function we(){var e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},i=ve(t);return void 0!==i.types?e=i.types:void 0!==i.split&&(e=i.split),void 0!==e&&(i.types=(ge(e)||be(e)?String(e):"").split(",").map((function(e){return String(e).trim()})).filter((function(e){return/((line)|(word)|(char))/i.test(e)}))),(i.absolute||i.position)&&(i.absolute=i.absolute||/absolute/.test(t.position)),i}function ye(e){var t=ge(e)||be(e)?String(e):"";return{none:!t,lines:/line/i.test(t),words:/word/i.test(t),chars:/char/i.test(t)}}function _e(e){return null!==e&&"object"==typeof e}function Oe(e){return _e(e)&&/^(1|3|11)$/.test(e.nodeType)}function ke(e){return be(e)?e:null==e?[]:function(e){return _e(e)&&function(e){return"number"==typeof e&&e>-1&&e%1==0}(e.length)}(e)?Array.prototype.slice.call(e):[e]}function Ee(e){var t=e;return ge(e)&&(t=/^(#[a-z]\w+)$/.test(e.trim())?document.getElementById(e.trim().slice(1)):document.querySelectorAll(e)),ke(t).reduce((function(e,t){return[].concat(ue(e),ue(ke(t).filter(Oe)))}),[])}!function(){function e(){for(var e=arguments.length,t=0;t<e;t++){var i=t<0||arguments.length<=t?void 0:arguments[t];1===i.nodeType||11===i.nodeType?this.appendChild(i):this.appendChild(document.createTextNode(String(i)))}}function t(){for(;this.lastChild;)this.removeChild(this.lastChild);arguments.length&&this.append.apply(this,arguments)}function i(){for(var e=this.parentNode,t=arguments.length,i=new Array(t),s=0;s<t;s++)i[s]=arguments[s];var n=i.length;if(e)for(n||e.removeChild(this);n--;){var r=i[n];"object"!=typeof r?r=this.ownerDocument.createTextNode(r):r.parentNode&&r.parentNode.removeChild(r),n?e.insertBefore(this.previousSibling,r):e.replaceChild(r,this)}}"undefined"!=typeof Element&&(Element.prototype.append||(Element.prototype.append=e,DocumentFragment.prototype.append=e),Element.prototype.replaceChildren||(Element.prototype.replaceChildren=t,DocumentFragment.prototype.replaceChildren=t),Element.prototype.replaceWith||(Element.prototype.replaceWith=i,DocumentFragment.prototype.replaceWith=i))}();var Ce=Object.entries,Se="_splittype",Pe={},Te=0;function Ne(e,t,i){if(!_e(e))return console.warn("[data.set] owner is not an object"),null;var s=e[Se]||(e[Se]=++Te),n=Pe[s]||(Pe[s]={});return void 0===i?t&&Object.getPrototypeOf(t)===Object.prototype&&(Pe[s]=de(de({},n),t)):void 0!==t&&(n[t]=i),i}function je(e,t){var i=_e(e)?e[Se]:null,s=i&&Pe[i]||{};return void 0===t?s:s[t]}function Ae(e){var t=e&&e[Se];t&&(delete e[t],delete Pe[t])}var xe="\\ud800-\\udfff",Le="\\u0300-\\u036f\\ufe20-\\ufe23",We="\\u20d0-\\u20f0",Me="\\ufe0e\\ufe0f",Be="[".concat(xe,"]"),De="[".concat(Le).concat(We,"]"),Re="\\ud83c[\\udffb-\\udfff]",$e="(?:".concat(De,"|").concat(Re,")"),ze="[^".concat(xe,"]"),Ie="(?:\\ud83c[\\udde6-\\uddff]){2}",Ve="[\\ud800-\\udbff][\\udc00-\\udfff]",Fe="\\u200d",He="".concat($e,"?"),Xe="[".concat(Me,"]?"),Ke=Xe+He+"(?:"+Fe+"(?:"+[ze,Ie,Ve].join("|")+")"+Xe+He+")*",Qe="(?:".concat(["".concat(ze).concat(De,"?"),De,Ie,Ve,Be].join("|"),"\n)"),Ue=RegExp("".concat(Re,"(?=").concat(Re,")|").concat(Qe).concat(Ke),"g"),qe=RegExp("[".concat([Fe,xe,Le,We,Me].join(""),"]"));function Ge(e){return qe.test(e)}function Je(e){var t,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"";return(e=null==(t=e)?"":String(t))&&ge(e)&&!i&&Ge(e)?function(e){return Ge(e)?function(e){return e.match(Ue)||[]}(e):function(e){return e.split("")}(e)}(e):e.split(i)}function Ye(e,t){var i=document.createElement(e);return t?(Object.keys(t).forEach((function(e){var s=t[e],n=ge(s)?s.trim():s;null!==n&&""!==n&&("children"===e?i.append.apply(i,ue(ke(n))):i.setAttribute(e,n))})),i):i}var Ze={splitClass:"",lineClass:"line",wordClass:"word",charClass:"char",types:["lines","words","chars"],absolute:!1,tagName:"div"};function et(e,t){var i=e.nodeType,s={words:[],chars:[]};if(!/(1|3|11)/.test(i))return s;if(3===i&&/\S/.test(e.nodeValue))return function(e,t){var i,s=ye((t=ve(Ze,t)).types),n=t.tagName,r=e.nodeValue,o=document.createDocumentFragment(),a=[];return/^\s/.test(r)&&o.append(" "),i=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:" ";return(e?String(e):"").trim().replace(/\s+/g," ").split(t)}(r).reduce((function(e,i,r,l){var c,h;return s.chars&&(h=Je(i).map((function(e){var i=Ye(n,{class:"".concat(t.splitClass," ").concat(t.charClass),style:"display: inline-block;",children:e});return Ne(i,"isChar",!0),a=[].concat(ue(a),[i]),i}))),s.words||s.lines?(Ne(c=Ye(n,{class:"".concat(t.wordClass," ").concat(t.splitClass),style:"display: inline-block; ".concat(s.words&&t.absolute?"position: relative;":""),children:s.chars?h:i}),{isWord:!0,isWordStart:!0,isWordEnd:!0}),o.appendChild(c)):h.forEach((function(e){o.appendChild(e)})),r<l.length-1&&o.append(" "),s.words?e.concat(c):e}),[]),/\s$/.test(r)&&o.append(" "),e.replaceWith(o),{words:i,chars:a}}(e,t);var n=ke(e.childNodes);if(n.length&&(Ne(e,"isSplit",!0),!je(e).isRoot)){e.style.display="inline-block",e.style.position="relative";var r=e.nextSibling,o=e.previousSibling,a=e.textContent||"",l=r?r.textContent:" ",c=o?o.textContent:" ";Ne(e,{isWordEnd:/\s$/.test(a)||/^\s/.test(l),isWordStart:/^\s/.test(a)||/\s$/.test(c)})}return n.reduce((function(e,i){var s=et(i,t),n=s.words,r=s.chars;return{words:[].concat(ue(e.words),ue(n)),chars:[].concat(ue(e.chars),ue(r))}}),s)}function tt(e){je(e).isWord?(Ae(e),e.replaceWith.apply(e,ue(e.childNodes))):ke(e.children).forEach((function(e){return tt(e)}))}function it(e,t,i){var s,n,r,o=ye(t.types),a=t.tagName,l=e.getElementsByTagName("*"),c=[],h=[],d=null,p=[],u=e.parentElement,f=e.nextElementSibling,m=document.createDocumentFragment(),v=window.getComputedStyle(e),g=v.textAlign,b=.2*parseFloat(v.fontSize);return t.absolute&&(r={left:e.offsetLeft,top:e.offsetTop,width:e.offsetWidth},n=e.offsetWidth,s=e.offsetHeight,Ne(e,{cssWidth:e.style.width,cssHeight:e.style.height})),ke(l).forEach((function(s){var n=s.parentElement===e,r=function(e,t,i,s){if(!i.absolute)return{top:t?e.offsetTop:null};var n=e.offsetParent,r=pe(s,2),o=r[0],a=r[1],l=0,c=0;if(n&&n!==document.body){var h=n.getBoundingClientRect();l=h.x+o,c=h.y+a}var d=e.getBoundingClientRect(),p=d.width,u=d.height,f=d.x;return{width:p,height:u,top:d.y+a-c,left:f+o-l}}(s,n,t,i),a=r.width,l=r.height,p=r.top,u=r.left;/^br$/i.test(s.nodeName)||(o.lines&&n&&((null===d||p-d>=b)&&(d=p,c.push(h=[])),h.push(s)),t.absolute&&Ne(s,{top:p,left:u,width:a,height:l}))})),u&&u.removeChild(e),o.lines&&(p=c.map((function(e){var i=Ye(a,{class:"".concat(t.splitClass," ").concat(t.lineClass),style:"display: block; text-align: ".concat(g,"; width: 100%;")});Ne(i,"isLine",!0);var s={height:0,top:1e4};return m.appendChild(i),e.forEach((function(e,t,n){var r=je(e),o=r.isWordEnd,a=r.top,l=r.height,c=n[t+1];s.height=Math.max(s.height,l),s.top=Math.min(s.top,a),i.appendChild(e),o&&je(c).isWordStart&&i.append(" ")})),t.absolute&&Ne(i,{height:s.height,top:s.top}),i})),o.words||tt(m),e.replaceChildren(m)),t.absolute&&(e.style.width="".concat(e.style.width||n,"px"),e.style.height="".concat(s,"px"),ke(l).forEach((function(e){var t=je(e),i=t.isLine,s=t.top,n=t.left,o=t.width,a=t.height,l=je(e.parentElement),c=!i&&l.isLine;e.style.top="".concat(c?s-l.top:s,"px"),e.style.left="".concat(i?r.left:n-(c?r.left:0),"px"),e.style.height="".concat(a,"px"),e.style.width="".concat(i?r.width:o,"px"),e.style.position="absolute"}))),u&&(f?u.insertBefore(e,f):u.appendChild(e)),p}var st=ve(Ze,{}),nt=function(){function e(t,i){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.isSplit=!1,this.settings=ve(st,we(i)),this.elements=Ee(t),this.split()}return le(e,null,[{key:"clearData",value:function(){Object.keys(Pe).forEach((function(e){delete Pe[e]}))}},{key:"setDefaults",value:function(e){return st=ve(st,we(e)),Ze}},{key:"revert",value:function(e){Ee(e).forEach((function(e){var t=je(e),i=t.isSplit,s=t.html,n=t.cssWidth,r=t.cssHeight;i&&(e.innerHTML=s,e.style.width=n||"",e.style.height=r||"",Ae(e))}))}},{key:"create",value:function(t,i){return new e(t,i)}},{key:"data",get:function(){return Pe}},{key:"defaults",get:function(){return st},set:function(e){st=ve(st,we(e))}}]),le(e,[{key:"split",value:function(e){var t=this;this.revert(),this.elements.forEach((function(e){Ne(e,"html",e.innerHTML)})),this.lines=[],this.words=[],this.chars=[];var i=[window.pageXOffset,window.pageYOffset];void 0!==e&&(this.settings=ve(this.settings,we(e)));var s=ye(this.settings.types);s.none||(this.elements.forEach((function(e){Ne(e,"isRoot",!0);var i=et(e,t.settings),s=i.words,n=i.chars;t.words=[].concat(ue(t.words),ue(s)),t.chars=[].concat(ue(t.chars),ue(n))})),this.elements.forEach((function(e){if(s.lines||t.settings.absolute){var n=it(e,t.settings,i);t.lines=[].concat(ue(t.lines),ue(n))}})),this.isSplit=!0,window.scrollTo(i[0],i[1]),Ce(Pe).forEach((function(e){var t=pe(e,2),i=t[0],s=t[1],n=s.isRoot,r=s.isSplit;n&&r||(Pe[i]=null,delete Pe[i])})))}},{key:"revert",value:function(){this.isSplit&&(this.lines=null,this.words=null,this.chars=null,this.isSplit=!1),e.revert(this.elements)}}]),e}(),rt=new class{get version(){return"3.14.0"}get props(){return this._props}get defaultProps(){return{tablet:1199,phone:899,prefix:"v-",easing:[.25,.1,.25,1],resizeDebounce:16,shouldCheckWebpSupport:!0,widthDetection:"boundingRect"}}get prefix(){return this._props.prefix}get isPhone(){return this._isPhone}get isTablet(){return this._isTablet}get isMobile(){return this._isMobile}get isDesktop(){return this._isDesktop}get osName(){return this._osName}get browserName(){return this._browserName}get isWebpSupported(){return this._isWebpSupported}get pageLoad(){return this._pageLoad}get viewport(){return this._viewport}constructor(e={}){if(window.vevetApp)throw new Error("Vevet Application already exists!");this._props=Object.assign(Object.assign({},this.defaultProps),e),this._isWebpSupported=!1,this._setDeviceFeatures(),window.vevetApp=this,this._pageLoad=new c,this._viewport=new l}_setDeviceFeatures(){const{prefix:e,html:t}=this,{osName:i,browserName:s,device:n}=D();t.classList.add(`${e}os-${i}`),this._osName=i,t.classList.add(`${e}browser-${s}`),this._browserName=s,this._isPhone=n.phone,t.classList.toggle(`${e}phone`,this._isPhone),this._isTablet=n.tablet,t.classList.toggle(`${e}tablet`,this._isTablet),this._isMobile=n.phone||n.tablet,t.classList.toggle(`${e}mobile`,this._isMobile),this._isDesktop=!this._isMobile,t.classList.toggle(`${e}desktop`,this._isDesktop),this.props.shouldCheckWebpSupport&&new Y(((e,t)=>{const i=new Image;i.onload=()=>{1===i.width?e():t()},i.onerror=t,i.src="data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoBAAEAAwA0JaQAA3AA/vuUAAA="})).then((()=>{this._isWebpSupported=!0})).catch((()=>{}))}get doc(){return document}get html(){return document.documentElement}get body(){return document.body}onPageLoad(){return new Y((e=>this._pageLoad.onLoad(e)))}};window.vevetApp=rt,window.VevetSplitText=class extends ie{_getDefaultProps(){return Object.assign(Object.assign({},super._getDefaultProps()),{container:`#${this.prefix}`,hasLetters:!0,hasLines:!1,letterTag:"span",wordTag:"span",lineTag:"span",viewportTarget:"any",resizeDebounce:0})}get prefix(){return`${a().prefix}split-text`}get letterClassName(){return this.className("__letter")}get wordClassName(){return this.className("__word")}get lineClassName(){return this.className("__line")}get container(){return this._container}get letters(){return this._letters}get words(){return this._words}get lines(){return this._lines}constructor(e,t=!0){super(e,!1),this._isBaseSplit=!1,this._container=Z(this.props.container),this.toggleClassName(this._container,this.className(""),!0),this._container.translate=!1,this._initialHTML=this._container.innerHTML,this._letters=[],this._words=[],this._lines=[],t&&this.init()}_init(){super._init(),this._setResize()}_setResize(){const{viewportTarget:e,resizeDebounce:t,hasLines:i}=this.props;if(!i)return void this.splitText();const s=function({onResize:e,element:t,viewportTarget:i="any",hasBothEvents:s=!1,resizeDebounce:n=0}){let r,o,a,l=!0;const c=(t,i)=>{r&&clearTimeout(r),r=setTimeout((()=>e(null!=t?t:{trigger:"unknown"})),null!=i?i:n)};return t&&(t instanceof Element||Array.isArray(t))&&"ResizeObserver"in window&&(o=new ResizeObserver((()=>{l?l=!1:c({trigger:"ResizeObserver"},window.vevetApp.props.resizeDebounce+n)})),Array.isArray(t)?t.forEach((e=>null==o?void 0:o.observe(e))):o.observe(t)),!s&&o||(a=window.vevetApp.viewport.add(i,(()=>c({trigger:"Viewport"})))),{remove:()=>{r&&clearTimeout(r),null==o||o.disconnect(),null==a||a.remove()},resize:()=>e({trigger:"unknown"}),debounceResize:()=>c(),hasResizeObserver:!!o}}({onResize:()=>this.splitText(),element:this.container,viewportTarget:e,resizeDebounce:t});s.resize(),this.addDestroyableAction((()=>s.remove()))}splitText(){this._splitBase(),this.props.hasLines&&this._splitIntoLines(),this.callbacks.tbt("split",void 0)}_splitBase(){if(this._isBaseSplit)return;const{container:e,letterClassName:t,wordClassName:i}=this,{letterTag:s,wordTag:n}=this.props;this._isBaseSplit=!0;const{helper:r,words:o,letters:a}=function({container:e,letterClassName:t,wordClassName:i,hasLetters:s,letterTag:n,wordTag:r}){const o=e.cloneNode(!0),a=function({container:e,classname:t,tagName:i}){const s=String.fromCharCode(32),n=[];return function e(r){var o;if(r instanceof HTMLElement)"BR"!==r.tagName&&(r.style.display="inline-block"),[...Array.from(r.childNodes)].forEach((t=>e(t)));else if(3===r.nodeType){const e=r.parentElement,a=null!==(o=r.nodeValue)&&void 0!==o?o:"",l=a.split(s);if(a===s)return null==e||e.insertBefore(document.createTextNode(s),r),void r.remove();l.forEach(((o,a)=>{if(o){const s=document.createElement(i);s.style.display="inline-block",s.classList.add(t),s.appendChild(document.createTextNode(o)),n.push({element:s,text:o,letters:[]}),null==e||e.insertBefore(s,r)}a<l.length-1&&(null==e||e.insertBefore(document.createTextNode(s),r))})),r.remove()}}(e),n}({container:o,classname:i,tagName:r}),l=[];if(s){const e=function({words:e,classname:t,tagName:i}){const s=[];return e.forEach((e=>{const n=e.element.childNodes[0],r=n.textContent;r&&(r.split("").forEach((n=>{const r=document.createElement(i);r.style.display="inline-block",r.classList.add(t),r.appendChild(document.createTextNode(n)),e.element.appendChild(r);const o={element:r,text:n};e.letters.push(o),s.push(o)})),n.remove())})),{letters:s}}({words:a,classname:t,tagName:n});l.push(...e.letters)}return{helper:o,words:a,letters:l}}({container:e,letterClassName:t,wordClassName:i,hasLetters:this.props.hasLetters,letterTag:s,wordTag:n});for(;e.childNodes[0];)e.childNodes[0].remove();for(;r.childNodes[0];)e.appendChild(r.childNodes[0]);this._words=o,this._letters=a}_splitIntoLines(){var e;const{container:t,words:i,lineClassName:s}=this,{lineTag:n}=this.props;null===(e=this._lineWrapper)||void 0===e||e.destroy(),this._lineWrapper=oe({container:t,words:i,className:s,tagName:n}),this._lines=this._lineWrapper.lines}_destroy(){super._destroy(),this._container.innerHTML=this._initialHTML}},window.SplitType=nt}();

Tests:

Vevet.SplitText
const container = document.getElementById('split-text'); const instance = new window.VevetSplitText({ container, hasLetters: true, hasLines: false }); instance.destroy();
SplitType
const container = document.getElementById('split-text'); const instance = new window.SplitType(container, { types: ['words', 'chars'] }); instance.revert();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Vevet.SplitText
SplitType

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 27 days ago):

LLMs can make mistakes. Check important info.

The provided code appears to be a benchmarking script for a text splitting library, possibly Vevet.SplitText or SplitType, which is used to split text into words and/or characters on different platforms.

Based on the code structure and syntax, I would recommend using the following approach to improve performance:

1.  **Minimize DOM Manipulation**: The provided code creates multiple elements for each word and character in the input text, which can lead to inefficient DOM updates and reflows.
2.  **Use Efficient Data Structures**: Consider using data structures like `Array` or `Set` to store the words and characters instead of creating objects for each individual element.
3.  **Reduce Function Call Overhead**: Minimize function calls by inlining or caching common operations.
4.  **Optimize for Mobile Devices**: Since Chrome Mobile 127 is specified as a benchmarking device, ensure that the code is optimized for mobile devices with limited resources.

However, without access to the actual library implementation and further information about the requirements, it's challenging to provide a more detailed analysis or concrete suggestions for improvement.

Latest run results:

Run details: (Test run date: 2 months ago)

User agent: Mozilla/5.0 (Linux; Android 14; K) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/127.0.6533.103 Mobile Safari/537.36

Browser/OS: Chrome Mobile 127 on Android

View result in a separate tab

Test name	Executions per second
Vevet.SplitText	1292.9 Ops/sec
SplitType	541.4 Ops/sec

Related benchmarks:

Vevet.SplitText & SplitType Comparison / Words & Letters (version: 0)

Comparing performance of: Vevet.SplitText vs SplitType

Created: 2 months ago by: Registered User

Jump to the latest result

Vevet.SplitText

SplitType

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 27 days ago):