First screen takes more than ten seconds

• Several seconds of blank background before any tile appears.
• Grey squares resolve one by one while the layer tree keeps spinning.
• Data arrives but the page freezes for hundreds of milliseconds while 2000 features are inserted.

1. Read the network timeline and attribute the time to one of the four phases.
2. Check whether the first request pulls the whole national dataset instead of the current bbox.
3. Check the initial zoom: starting at 15 instead of 11 to 12 multiplies the tile count.
4. Check whether features are inserted in one synchronous loop.
5. Check bundle size: Cesium.js plus assets is about 3 MB while Leaflet is about 42 KB.
6. Add a loading indicator, which changes perceived speed at almost zero cost.

Request data by viewport bbox on load and on moveend, drop the initial zoom to 10 to 12, insert features in batches through requestAnimationFrame, and lower OpenLayers maxTilesLoading from 16 to 8. Trim library weight by importing modules on demand or using the official Cesium build.

var map = L.map('map', {
  center: [39.9, 116.4],
  zoom: 11,          // 先给一个粗略的层级
  minZoom: 3
});

// OpenLayers
var map = new ol.Map({
  // ...
  maxTilesLoading: 8      // 默认 16，调低可让首屏瓦片更快出齐
});

• Prefetching the entire national dataset to make the page feel instant, which delays first paint and blows up memory.
• Raising tile concurrency: bandwidth is split across more requests, so the last visible tile arrives later.