ਪਰਫ਼ਾਰਮੈਂਸ ਖ਼ਰਾਬ ਕੀਤੇ ਬਿਨਾਂ ਸਕ੍ਰੋਲ ਨਾਲ ਚੱਲਦੇ ਵੀਡੀਓ ਹਿੱਸੇ

ਪ੍ਰੀਮੀਅਮ ਸਾਈਟਾਂ ਨੂੰ ਪਿੰਨ ਕੀਤਾ ਹਿੱਸਾ ਪਸੰਦ ਹੈ ਜਿੱਥੇ ਸਕ੍ਰੋਲ ਨਾਲ ਵੀਡੀਓ ਖੁੱਲ੍ਹਦੀ ਹੈ ਅਤੇ ਕੈਪਸ਼ਨ ਅਧਿਆਇ-ਦਰ-ਅਧਿਆਇ ਬਦਲਦੇ ਹਨ। ਇਹ ਪੰਨੇ ਨੂੰ ਝਟਕੇਦਾਰ, ਭਾਰੀ ਅਤੇ ਬੈਟਰੀ ਖਾਣ ਵਾਲਾ ਬਣਾਉਣ ਦਾ ਸਭ ਤੋਂ ਸੌਖਾ ਤਰੀਕਾ ਵੀ ਹੈ। ਨਮੂਨਾ ਲਾਇਬ੍ਰੇਰੀ ਦਾ ਸ਼ੋਅਕੇਸ ਹਿੱਸਾ ਤੇਜ਼ ਰਹਿਣ ਲਈ ਇਸ ਤਰ੍ਹਾਂ ਬਣਿਆ ਹੈ।

#ਇੱਕ ਤਰੱਕੀ ਮੁੱਲ ਸਭ ਕੁਝ ਚਲਾਉਂਦਾ ਹੈ

ਹਿੱਸਾ ਇੱਕ ਉੱਚਾ ਡੱਬਾ ਹੈ ਜਿਸ ਅੰਦਰ ਸਥਿਰ ਮੰਚ ਹੈ। ਸਕ੍ਰੋਲ ਉੱਤੇ ਸਕ੍ਰਿਪਟ ਇੱਕ ਨੰਬਰ ਗਿਣਦੀ ਹੈ — ਵਿਜ਼ਿਟਰ ਨੇ ਡੱਬੇ ਦਾ ਕਿੰਨਾ ਹਿੱਸਾ ਪਾਰ ਕੀਤਾ, 0 ਤੋਂ 1 — ਅਤੇ ਬਾਕੀ ਸਭ ਉਸੇ ਤੋਂ ਨਿਕਲਦਾ ਹੈ:

• clip-path ਦਾ ਹਾਸ਼ੀਆ ਜੋ ਫ਼ਰੇਮ ਵਾਲੀ ਵੀਡੀਓ ਨੂੰ ਪੂਰੀ ਚੌੜਾਈ ਤੱਕ ਖੋਲ੍ਹਦਾ ਹੈ,
• ਸਰਗਰਮ ਵੀਡੀਓ ਦਾ ਹਲਕਾ ਵਾਧਾ,
• ਕਿਹੜਾ ਅਧਿਆਇ (ਕਲਿੱਪ ਅਤੇ ਕੈਪਸ਼ਨ) ਸਰਗਰਮ ਹੈ,
• ਤਰੱਕੀ ਪੱਟੀ ਦੀ ਚੌੜਾਈ,
• ਸਿਰਲੇਖ ਦਾ ਫਿੱਕਾ ਪੈਣਾ ਅਤੇ ਖਿਸਕਣਾ।

ਮੁੱਲ CSS ਕਸਟਮ ਪ੍ਰਾਪਰਟੀਆਂ ਵਜੋਂ ਲਿਖੇ ਜਾਂਦੇ ਹਨ ਅਤੇ ਬਾਕੀ CSS ਕਰਦਾ ਹੈ। ਨਾ ਹਰ ਤੱਤ ਲਈ ਐਨੀਮੇਸ਼ਨ ਸਮਾਂ-ਰੇਖਾਵਾਂ ਮਿਲਾਉਣੀਆਂ ਪੈਂਦੀਆਂ ਹਨ, ਨਾ ਕੋਈ ਲਾਇਬ੍ਰੇਰੀ ਡਾਊਨਲੋਡ ਕਰਨੀ।

const p = clamp(-rect.top / (rect.height - innerHeight));
stage.style.setProperty('--p', p);

#ਇੱਕ ਫ਼ਰੇਮ ਵਿੱਚ ਪੜ੍ਹਨਾ ਅਤੇ ਲਿਖਣਾ

ਸਕ੍ਰੋਲ ਘਟਨਾਵਾਂ ਸਕ੍ਰੀਨ ਤਾਜ਼ਗੀ ਨਾਲੋਂ ਵੱਧ ਵਾਰ ਆਉਂਦੀਆਂ ਹਨ। ਹੈਂਡਲਰ ਸਿਰਫ਼ requestAnimationFrame ਨਾਲ ਕੰਮ ਤੈਅ ਕਰਦਾ ਹੈ, ਅਤੇ ਹਰ ਫ਼ਰੇਮ ਪਹਿਲਾਂ ਲੇਆਉਟ ਪੜ੍ਹਦਾ ਅਤੇ ਫਿਰ ਸਟਾਈਲ ਲਿਖਦਾ ਹੈ। ਪੜ੍ਹਨ ਅਤੇ ਲਿਖਣ ਨੂੰ ਮਿਲਾਉਣਾ ਵਾਰ-ਵਾਰ ਮੁੜ ਗਣਨਾ ਕਰਵਾਉਂਦਾ ਹੈ — ਝਟਕੇਦਾਰ ਸਕ੍ਰੋਲ ਦਾ ਸਭ ਤੋਂ ਆਮ ਕਾਰਨ।

#ਸਿਰਫ਼ ਇੱਕ ਵੀਡੀਓ ਚੱਲੇ

ਇੱਕੋ ਵੇਲੇ ਤਿੰਨ ਆਪ-ਚੱਲਦੀਆਂ ਵੀਡੀਓ ਫ਼ੋਨ ਗਰਮ ਕਰਦੀਆਂ ਅਤੇ ਡਾਟਾ ਖਾਂਦੀਆਂ ਹਨ। ਨਿਯਮ:

• ਪਹਿਲਾ ਕਲਿੱਪ ਤੁਰੰਤ ਲੋਡ ਹੁੰਦਾ ਹੈ, ਤਾਂ ਜੋ ਹਿੱਸਾ ਕਦੇ ਖ਼ਾਲੀ ਨਾ ਹੋਵੇ।
• ਬਾਕੀ preload="none" ਨਾਲ ਸ਼ੁਰੂ ਹੁੰਦੇ ਹਨ।
• ਜਦੋਂ ਅਧਿਆਇ ਸਰਗਰਮ ਹੁੰਦਾ ਹੈ, ਉਸਦਾ ਕਲਿੱਪ ਚੱਲਦਾ ਹੈ ਅਤੇ ਅਗਲਾ ਕਲਿੱਪ ਪਹਿਲਾਂ-ਲੋਡ ਹੋਣ ਲੱਗਦਾ ਹੈ।
• ਗ਼ੈਰ-ਸਰਗਰਮ ਕਲਿੱਪ ਫਿੱਕੇ ਪੈਣ ਤੋਂ ਬਾਅਦ ਰੁਕ ਜਾਂਦੇ ਹਨ।
• ਜਦੋਂ ਪੂਰਾ ਹਿੱਸਾ ਸਕ੍ਰੀਨ ਤੋਂ ਬਾਹਰ ਜਾਂਦਾ ਹੈ, ਸਭ ਰੁਕ ਜਾਂਦਾ ਹੈ।

ਸਾਰੇ ਕਲਿੱਪ ਬੇਆਵਾਜ਼, ਲੂਪ ਵਿੱਚ ਅਤੇ playsinline ਹਨ, ਜੋ ਫ਼ੋਨ ਉੱਤੇ ਆਪ-ਚੱਲਣ ਲਈ ਲਾਜ਼ਮੀ ਹੈ।

#ਸਸਤੀਆਂ ਪ੍ਰਾਪਰਟੀਆਂ ਐਨੀਮੇਟ ਕਰੋ

opacity, transform ਅਤੇ clip-path GPU ਵੱਲੋਂ ਜੋੜੀਆਂ ਜਾ ਸਕਦੀਆਂ ਹਨ। ਵੱਡੇ ਤੱਤਾਂ ਉੱਤੇ top, width ਜਾਂ background-position ਐਨੀਮੇਟ ਕਰਨਾ ਮੁੜ ਗਣਨਾ ਜਾਂ ਮੁੜ ਚਿੱਤਰਣ ਕਰਵਾਉਂਦਾ ਹੈ। ਲੇਟਵੀਂ ਗੈਲਰੀ translate3d ਨਾਲ ਚੱਲਦੀ ਹੈ, ਅਤੇ ਹਰ ਕਾਰਡ ਦਾ ਪੈਰਾਲੈਕਸ ਅੰਦਰਲੀ ਤਸਵੀਰ ਨੂੰ ਟ੍ਰਾਂਸਫ਼ਾਰਮ ਨਾਲ ਖਿਸਕਾਉਂਦਾ ਹੈ, ਉਸਦੀ ਥਾਂ ਬਦਲ ਕੇ ਨਹੀਂ।

#ਵੀਡੀਓ ਸਮਝਦਾਰੀ ਨਾਲ ਪਰੋਸੋ

ਕਲਿੱਪ 720p ਹਨ, ਹਰ ਇੱਕ ਕੁਝ ਮੈਗਾਬਾਈਟ, ਇੱਕ edge ਪ੍ਰੌਕਸੀ ਰਾਹੀਂ ਪਰੋਸੇ ਜੋ ਉਨ੍ਹਾਂ ਨੂੰ ਕੈਸ਼ ਕਰਦਾ ਹੈ ਅਤੇ HTTP range ਬੇਨਤੀਆਂ ਦਾ ਸਮਰਥਨ ਕਰਦਾ ਹੈ, ਤਾਂ ਜੋ ਬ੍ਰਾਊਜ਼ਰ ਛਾਲ ਮਾਰ ਸਕੇ ਅਤੇ ਸਟ੍ਰੀਮ ਕਰ ਸਕੇ। ਪੋਸਟਰ ਸਥਿਰ ਤਸਵੀਰਾਂ ਤੋਂ ਆਉਂਦੇ ਹਨ, ਤਾਂ ਜੋ ਪਹਿਲਾ ਫ਼ਰੇਮ ਡੀਕੋਡ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ ਕੁਝ ਅਰਥਪੂਰਨ ਦਿਸੇ।

#ਘੱਟ ਹਿਲਜੁਲ ਦਾ ਆਦਰ ਕਰੋ

ਜਦੋਂ ਵਿਜ਼ਿਟਰ ਨੇ ਸਿਸਟਮ ਤੋਂ ਘੱਟ ਹਿਲਜੁਲ ਮੰਗੀ ਹੋਵੇ, ਹਿੱਸਾ ਪਿੰਨ ਹੋਣਾ ਬੰਦ ਕਰ ਦਿੰਦਾ ਹੈ, ਗੈਲਰੀ ਆਮ ਸਕ੍ਰੋਲ ਹੋਣ ਵਾਲੀ ਕਤਾਰ ਬਣ ਜਾਂਦੀ ਹੈ ਅਤੇ ਟੈਕਸਟ ਬਿਨਾਂ ਐਨੀਮੇਸ਼ਨ ਦਿਸਦਾ ਹੈ। ਸਮੱਗਰੀ ਇੱਕੋ ਜਿਹੀ ਹੈ; ਸਿਰਫ਼ ਨਾਚ ਹਟਦਾ ਹੈ।

#ਆਪਣੀਆਂ ਸਟਾਈਲਾਂ ਦੀ ਰਾਖੀ ਕਰੋ

ਇਹ ਹਿੱਸਾ ਕਈ ਵੱਖਰੇ ਟੈਂਪਲੇਟਾਂ ਵਿੱਚ ਪਾਇਆ ਜਾਂਦਾ ਹੈ, ਅਤੇ ਇੱਕ ਵਿੱਚ ਆਮ .gal ਗ੍ਰਿਡ ਨਿਯਮ ਸੀ ਜਿਸਨੇ ਚੁੱਪਚਾਪ ਗੈਲਰੀ ਪੱਟੀ ਸੁੰਗੇੜ ਦਿੱਤੀ। ਹੁਣ ਕੰਪੋਨੈਂਟ ਦੀ ਹਰ ਕਲਾਸ ਦਾ ਅਗੇਤਰ ਹੈ। ਜੇ ਤੁਸੀਂ ਅਜਿਹੇ ਕੰਪੋਨੈਂਟ ਬਣਾਉਂਦੇ ਹੋ ਜੋ ਉਨ੍ਹਾਂ ਪੰਨਿਆਂ ਵਿੱਚ ਜਾਂਦੇ ਹਨ ਜਿਨ੍ਹਾਂ ਉੱਤੇ ਤੁਹਾਡਾ ਕਾਬੂ ਨਹੀਂ, ਤਾਂ ਨੇਮਸਪੇਸ ਵਿਕਲਪਿਕ ਨਹੀਂ।

#ਸਾਰ

• ਸਭ ਕੁਝ ਇੱਕ ਤਰੱਕੀ ਮੁੱਲ ਤੋਂ ਕੱਢੋ।
• requestAnimationFrame ਨਾਲ ਤੈਅ ਕਰੋ; ਪਹਿਲਾਂ ਪੜ੍ਹੋ, ਫਿਰ ਲਿਖੋ।
• ਇੱਕ ਚੱਲਦੀ ਵੀਡੀਓ; ਸਮੇਂ ਸਿਰ ਪਹਿਲਾਂ-ਲੋਡ; ਸਕ੍ਰੀਨ ਤੋਂ ਬਾਹਰ ਰੋਕੋ।
• ਸਿਰਫ਼ ਕੰਪੋਜ਼ਿਟਰ-ਅਨੁਕੂਲ ਪ੍ਰਾਪਰਟੀਆਂ ਐਨੀਮੇਟ ਕਰੋ।
• ਵੀਡੀਓ ਕੈਸ਼ ਕਰੋ ਅਤੇ edge ਉੱਤੇ range ਨਾਲ ਪਰੋਸੋ।
• prefers-reduced-motion ਦਾ ਆਦਰ ਕਰੋ।
• ਪਾਈਆਂ ਸਟਾਈਲਾਂ ਨੂੰ ਨੇਮਸਪੇਸ ਦਿਓ।