Techniques to send javascript objects from server without parsing from HTML?

I think what you're doing currently is already one of the best options.

Is there a way to skip the serialization/deserialization?

Any option will necessarily involve serialization and deserialization somewhere - the data is sent over the internet, after all, and objects can't be sent, only strings (possibly in the form of a .js file, possibly as HTML) which then gets deserialized and run.

Another possibility is to make a network request on pageload, allowing you to request the values:

fetch('get-data-values')
  .then(response => response.json())
  .then((values) => {
    // do stuff
  });

This works, but requires an extra delay before the values can be processed. A single pageload would require two connections, rather than one.

Another possibility is to have your backend serve inline Javascript which defines the variable you use, eg:

<script>
var values = [1,2,3,4,5];
</script>

Dynamically generated Javascript often isn't that pretty, though, and often makes for smelly code.

You can also do what you're doing currently, which is to embed the information in an HTML tag, which (IMO) is perfectly fine, and possibly the best option - it's quite maintainable doesn't require an extra request.

For large amounts of data, you can consider using <script type="application/json"> rather than data- attributes. It's very similar, you just put the data inside the tag, rather than as an attribute:

const values = JSON.parse(document.querySelector('#values').textContent);
console.log(values);

<script id="values" type="application/json">[1,2,3,4,5]</script>

(the type="application/json" can be anything, as long as it isn't type="javascript" - a Javascript type or an empty type will mean the browser attempts to run the code)