Keep repaint (appearance) and reflow (layout) to a minimum
A repaint is a change in appearance of a DOM (Document Object Model) element, while a reflow is a change/recalculation of the position of the elements in the DOM. You should avoid triggering these two operations as they are resource-expensive, especially in terms of CPU usage.
Use input help instead of autocomplete
Autocomplete helps users by automatically completing text entered in a field. This feature can be very useful for avoiding errors or providing suggested searches, but it requires constant communication between the browser and the server (although the exchanges may be
capped). The browser sends each new character or word entered to the server, which sends back the text to complete the user’s entry. While the volume of data may be very small, it is very demanding on the servers and network in terms of requests.
When possible, you should avoid this feature and replace it with input help. This involves guiding the user through a series of information points and hints (e.g. example of the required format in grey in the entry field, error message from the interface or help with incorrect entries). These interactions are managed locally, thus reducing exchanges with the server.