Large dataset of markers or dots in Leaflet

You should check https://github.com/robertleeplummerjr/Leaflet.glify. It provides way of rendering leaflet points and polygons using web gl, allowing to scale more easily.

It's also available for the people that uses R to produce their leaflet: https://github.com/tim-salabim/leaflet.glify

The R version is super easy.

The performance issue is due to the fact that each marker is an individual DOM element. Browsers struggle in rendering thousands of them.

In your case, an easy workaround would be instead to use Circle Markers and have them rendered on a Canvas (e.g. using map preferCanvas option, or with a specific canvas renderer that you pass as renderer option for each of your Circle Marker). That is how Google Maps works by default: its markers are actually drawn on a Canvas.

var map = L.map('map', {
    preferCanvas: true
});
var circleMarker = L.circleMarker(latLng, {
    color: '#3388ff'
}).addTo(map);

or

var map = L.map('map');
var myRenderer = L.canvas({ padding: 0.5 });
var circleMarker = L.circleMarker(latLng, {
    renderer: myRenderer,
    color: '#3388ff'
}).addTo(map);

With this solution, each Circle Marker is no longer an individual DOM element, but instead is drawn by Leaflet onto a single Canvas, which is much easier to handle for the browser.

Furthermore, Leaflet still tracks the mouse position and related events and triggers the corresponding events on your Circle Markers, so that you can still listen to such events (like mouse click, etc.).

Demo with 100k points: https://jsfiddle.net/sgu5dc0k/