Sergio
8a0496dbb3
Medida la ganancia del PGO ayer: -9,4% en una página de DOM/maquetación y -1,0% en 3d-raytrace de SunSpider. La razón de la diferencia es que un benchmark JIT-bound es casi CIEGO al PGO: el bucle caliente no lo ejecuta el C++ de SpiderMonkey sino el código máquina que el JIT emite en runtime, y el PGO optimiza el intérprete, el GC y el propio JIT — no lo que el JIT produce. El corpus de Mozilla está dominado en número de páginas por SunSpider, o sea que entrenaba mucho justo donde el PGO menos rinde. Estas diez ejercitan el camino que sí es C++ de punta a punta: flex flexbox anidado, wrap, alineaciones rejilla CSS Grid: pistas, áreas nombradas, auto-fit tablas tablas grandes con table-layout FIJO y AUTO (dos algoritmos) texto columnas, shaping, reflujo por cambio de ancho selectores DOM profundo contra 600 reglas, muchas que NO casan pintado degradados, sombras, opacidad, mix-blend-mode transformar transforms y contextos de apilamiento svg paths, degradados, clip desbordes overflow anidado, position:sticky, scroll programático reflujo layout thrashing: leer y escribir geometría alternadamente Reglas que cumplen todas, y no son de estilo: · DETERMINISTAS (LCG propio, ni Math.random ni Date ni red) — dos corridas hacen lo mismo, así que dos perfiles difieren por el timing de los contadores y no por haber visitado caminos distintos. · AUTOCONTENIDAS — el perfilado corre sin red. · NUESTRAS — nada de páginas ajenas capturadas, que traerían licencia y fragilidad. · ACOTADAS — 16 a 32 s cada una; el perfilado arranca un navegador POR PÁGINA. Validadas las diez contra el firefox sellado: todas renderizan y producen captura. `flex` hubo que acortarla de 40 a 12 cajas raíz: con 40 la página medía 68.241 px de alto y la captura moría con «Failed to allocate a surface due to invalid size». El layout ocurría igual, pero sin captura no se ejercita el pintado, que es justo la mitad que se venía a entrenar.
28 lines
1.4 KiB
HTML
28 lines
1.4 KiB
HTML
<!doctype html><meta charset=utf-8><title>flex</title><style>
|
|
body{font:13px sans-serif;margin:0}
|
|
.c{display:flex;flex-wrap:wrap;gap:2px;padding:2px;border:1px solid #ccd}
|
|
.c>div{flex:1 1 auto;min-width:40px;padding:3px;background:#eef;border:1px solid #99c}
|
|
.col{flex-direction:column}.ctr{align-items:center;justify-content:space-between}
|
|
.gr2{flex-grow:2}.sh0{flex-shrink:0}
|
|
</style><div id=r></div><script>
|
|
// Flexbox anidado a 4 niveles, con mezcla de grow/shrink/basis y wrap. Determinista.
|
|
function lcg(s){return function(){s=(s*1103515245+12345)&0x7fffffff;return s/0x7fffffff}}
|
|
var r=lcg(7);
|
|
function caja(prof){
|
|
if(prof===0) return "<div>"+((r()*1e6)|0)+"</div>";
|
|
var cls="c"+(r()<0.4?" col":"")+(r()<0.3?" ctr":"");
|
|
var n=2+((r()*4)|0), h="<div class='"+cls+"'>";
|
|
for(var i=0;i<n;i++){
|
|
var extra=r()<0.25?" class='gr2'":(r()<0.2?" class='sh0'":"");
|
|
h+="<div"+extra+">"+caja(prof-1)+"</div>";
|
|
}
|
|
return h+"</div>";
|
|
}
|
|
var out=[]; for(var i=0;i<12;i++) out.push(caja(4)); // 12 y no 40: con 40 la página medía 68.241 px de alto y la captura fallaba por tamaño de superficie
|
|
document.getElementById('r').innerHTML=out.join("");
|
|
// Forzar layout de verdad, no sólo parse.
|
|
var t=0; for(var i=0;i<120;i++){ t+=document.getElementById('r').getBoundingClientRect().height;
|
|
document.body.style.width=(900+i%7)+"px"; }
|
|
document.title="flex-"+(t|0);
|
|
</script>
|