2

I am wondering which would load faster in a lightning component. Something like this

<input id="testId" type="text">
or
<lightning:input label="Name" name="myname" />

I suspect on a small page it makes no difference, but on a page that is thousands of lines long which would load quicker? The example above is just to demonstrate the different ways the same thing could be written. Another example could be:

<input type="button" onclick="{!c.dosomething}"/>
or
<lightning:button variant="base" label="Base" title="Base action" onclick="{! c.dosomething}"/>

1 Answer 1

2

As far as the lightning components that are LWC (which is most of them), there is negligible difference in loading times, as the browser treats these components as native components. Aura components, in contrast, will always load slower than the equivalent markup in HTML. You should refer to the documentation to determine if a component is LWC or not.

Your generic examples aren't quite equivalent; a lightning-input, for example, has a label, a variant attribute, and so on. It will necessarily be slower than a normal input, but also be more robust/feature-heavy. They save developers development time, which is often just as important as performance. Note that browsers themselves really don't do well with "thousands of lines long" in any framework. This is why we have progressive/infinite loading and pagination.

You should prefer to use native components as much as possible if they make sense for your use case. This will give your app a more consistent look and feel with Salesforce, even if things change in future releases. However, some discretion is warranted, as sometimes you need performance or a custom UI, or elements you'd like to use simply don't exist yet (e.g. SLDS's "progress ring" does not exist as a component yet).

So, in summary, unless you're having performance problems, go for native components when possible. They'll offer a more consistent UI at the expense of some performance, but this should hardly be noticeable for the majority of use cases, and for the remainder, pagination/infinite scrolling/fake scrolling/etc should be used, because the browser itself would still ultimately be the bottleneck for performance.

2
  • So if my UI is 100% different than the default SF UI us there any reason to use LWC? The reason I ask is there is a debate going on where I work if we should always use LWC or if it is okay to use more HTML.
    – Travis
    Apr 24, 2019 at 22:45
  • @Travis There might be a misunderstanding of what LWC is. LWC is an entire framework, including the markup, JavaScript, and CSS. Even if you're using input, you're still using Aura and possibly LWC. The difference is that if you want the SLDS styling, you should use the lightning:* elements, if you don't, you're not required to.
    – sfdcfox
    Apr 25, 2019 at 0:24

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .