svg.html (544B)
1 <!DOCTYPE html> 2 <div id="main"> 3 <svg viewBox="0 0 10 10"> 4 <defs> 5 <circle id="myCircle" cx="5" cy="5" r="4" stroke="blue" /> 6 </defs> 7 <use id="circle" href="#myCircle" fill="green" /> 8 </svg> 9 </div> 10 <script> 11 const observer = new PerformanceObserver(list => { 12 const fcp = list.getEntriesByName("first-contentful-paint"); 13 if (!fcp.length) 14 return; 15 16 // Message the parent when FCP has been reached. 17 parent.postMessage("GotFCP", '*'); 18 }); 19 observer.observe({ type: "paint", buffered: true }); 20 </script>