Hozzászólások
Elsődleges fülek
Az egy dolog, hogy gyors lefelé scrollozás közben az oldal alját egy idő után fehér dobozok töltik ki, amit még nem töltött be az oldal
Ezt nekem is csinálta, de most jó!
@monyo
Szerk.: Egy ideje ki van kapcsolva a bug fícsör ami okozta, mikor nézted? Mert nekem most fasza minden.
a bénább gépekben nincs hardwares gyorsítás böngészésre
megneztem asszony laptopjan (p4 3ghz, 3gb ram, vmi radeon video, winXP) es semmi gond, siman gorget. azt mondjuk nemtudom, hogy hw gyorsitas bevan-e kapcsolva, lehet xp alatt nem is lehetseges, de ebben az esetben sztem nem is fontos.
szerk.: ff 37.0.1
Hmmm.... az irodai vas (ami nem túl bika) nehezen birkózik meg nekem is az oldallal. Az egy dolog, hogy gyors lefelé scrollozás közben az oldal alját egy idő után fehér dobozok töltik ki, amit még nem töltött be az oldal, azonban az igazi gond, hogy maga a komment gépelése is lelassult. Ez biztos hülyén hangzik, de a gombnyomás és a betű megjelenése között érezhető lag van.
feedback: Most jó
Nemtom, persze nem masterrace a gép, de azért nehogy már szarakodjon egy i5 akármilyen is egy weboldallal?!
Nem tom mit kéne basznom még a browserrel, hogy jó legyen, hiszen be van kapcsolva a HW gyorsítás.
Whatever. Attól még fasza lett minden és(!)
psi for president!!
szerintem is, és tuti valami driver/browser támogatás kérdése, de a legfájdalommentesebb ha egyelőre kispad az árnyékeffektusokra még át nem rágom kicsit a kérdést.
Legalább te tudod magadról hogy Celeronnal is igazi masterrace tag vagy. :D Nekem se problémázott semmit a gép cseppet sem btw.
BTW, ultragyenge Celeron 1037u gépen is simán megy, tehát valami valszleg náluk van... driver galiba esetleg?
Igen, a korábbi 5 kb helyett lett vagy 60 byte-os a kép, de a legerősebb gép is térde kényszerüt, mire kirenderelte...
nyugi van, nem kell pánikolni. :D Nem az a baj hogy optimizáltam egy rakat dolgot, hanem hogy a bénább gépekben nincs hardwares gyorsítás böngészésre, és nem viszik a modern effektusokat, azaz nem tartoznak a masterrace-hez. :D
Kispadon van egyelőre az a része amúgy mint mondtam. Mennie kell mindennek sokkal jobban már.
utánajárok ennek. Egyelőre kispadon van a masterrace rész, nem esszenciális csak extra csicsa eleve. Annak aki igazi masterrace tag és bírja vassal. :D
Minden más fejlesztés benne maradt és nem kellene megfogja a béna gépeket se.
+1, melóhelyen a gép gyenge, de sávszél van dögivel (na meg feltalálták már a cache-elést is), most szenved a RW. Erről az jut eszembe, amikor egyik kollégám egy "sakktáblás" hátteret (pont be/pont ki) "optimalizált" úgy, hogy 2x2 pixelesre redukálta a képet, aztán azt tette háttérbe. Igen, a korábbi 5 kb helyett lett vagy 60 byte-os a kép, de a legerősebb gép is térde kényszerüt, mire kirenderelte...
Hali,
HW renderelés be van kapcsolva, FF és Chrome alatt is produkálja.
Csináltam 2 tesztet. Webdrótozós topik 9. oldallal tesztelem, mert ott kevés a kép, ezzel kizárva talán azt is.
referencia képpen ezt az oldalt nyitottam meg és:
Megfogtam oldalt a görgető sáv gombot(?) és húztam le föl. Itt, szaggat mint állat a másikon szépen megy le föl.
Nem tudom számít-e, de ha fölfelé húzom, akkor méginkább szaggat.
Akárhányszor le, vagy fel húzom produkálja.
Ötlet?
Chrome-ban még sosem nyitottam meg az oldalt azelőtt és ugyanez a jelenség.
hardware rendering kellene a modern effektusoknak igen, optimális esetben. Kapcsoljátok be ha eddig nem tettétek volna.
Mülye kérdés: be van lőve a HW-es renderelés a böngészőkben? Annak hiánya szokott hasonló akadásokhoz vezetni.
...meg amikor már nagyon szemetes a böngésző és újra kéne indítani, de gondolom ez már megvolt.
Lenovo G510 Laptop, i5, 4GB RAM, win7 64(valid) összes updattel, integrált radeon videokari (bár sztem csak akkor használja, ha kell amúgy meg az intel), samsung 840 EVO SSD. FF alatt.
valami gebasz lehet a browser/oprendszer beállításaidba sztem, vagy vidkari driver kérdés lehet. Milyen böngészőt, oprendszert használsz? Adj picit több infót a rendszeredről.
+1 Nekem is "szaggatottan" megy le, fel.
Hát, nem tudom. Nyomtam én ctrl+f5-öt, de nekem sokkal lassabb lett minden. Értsd, utolsó oldal top commentnél nyomok egy ctrl+endet, és nem "legörög", hanem kb 3 állóképpel megy le.
egy huje kerdes: elerheto/megoldhato vhogy az, hogy lassam az oldal latogatottsagat? napra bontva mongyuk.
Én négy befejezés közül választhattam, a stáblista utáni jelenet pedig már akkor azt sugallta nekem, hogy annyit nem számít a döntésünk, így akár össze is fésülhetik úgy, mint az Invisible Warban tették, vagy máshogy.
@Komplikato
Miért inkább az IW fegyvermodifikációi jutnak szedve, mint az első részé? Látványra mindenesetre tényleg a Crysist idézi, és a módosítások sugallt ki-be kapcsolhatósága is. (Bár voltak "alternatív tüzelési" módok az IW-bek és a HR-ben, az előbbiben szinte érdektelenek voltak, és az utóbbi sem volt ebben nagy szám.)
Ügyes. Főleg, amit a pinával műveltél :P (Nekem már korábban is a punci ugrott be, bár mondjuk mióta terhes az asszony, kb. mindenről az).
Sok köze nincs hozzá, csak feltünt hogy mostanában ez a trend. ;)
szerintem mindenki nyomjon ctrl+f5öt (cache ürítés) mivel tuti van több elem is ott ami outdated az update után és potenciálisan lehet bugzana (vizuálisan) valamilyen módon.
NAGY technikai update:
Szóval a rendering megoldásokat és a kapcsolatos elemeket feltuningoltam a napokban mobilra és PC-re egyaránt. Röviden ez azt jelenti hogy cirka tízszer kevesebb helyet foglal el a háttér és navigációs content (és ennyiszer gyorsabban tölti is be őket szerverről), ráadásul még jobban is néz ki mint előtte.
Hosszabban:
(vagyis kibaszott hosszabban :D)
kezdem azzal hogy ugye pár napja konstatáltuk hogy kb 2.5megát foglalt el minden háttér és navigációs kontent és ezeket PCn és mobilon egyaránt beolvassa a böngészőnk az esetleges lapnyitásnál (legtöbbször cache-ből, de ez nem kibújó ok a problémára).
Elkezdtem gondolkodni a lehetséges megoldásokon, elindultam egy lokalizált színpaletta választás vonalon kezdetnek, Dulakh javasolta pm-ben hogy segít letisztítani a kérdéses képek körvonalait, mivel szélesebb színskálás transzparencia hiánya láthatóvá tette az elsietett körbevágásait KMZ-nek az elemeken, és ezzel tenni kellett valamit.
1-2 napra rá meg is kaptam őket, faszák voltak és ráadásnak elküldte a photoshop fájlokat is, de mondta hogy a felső és alsó sarokképnek csak az egyik felét, mivel eleve ugyanazok a képek csak tükrözve és úgy kimentve használatra.
Ekkor esett le bennem, hogy basszus, ha én így állok hozzá és megtalálom az ismétlődő elemeket minden más részben, és algoritmusra vagy okosan kiötlött darabos összevágásra bízom ezek összeállítását, rohadt sok helyet (sávszélt, betöltés sebességet, rendering időt) tudok spórolni. Elővettem a photoshop fájlokat és átkezdtem dolgozni ennek tudatában a kapcsolatos cuccokat.
Megláttam hogy a pina (gyerekek, ugyan nézzetek rá már a 4 sarokban levő elemre, mondjátok meg mi ugrik be róla elsőre nektek :D)
rwurl=http://i.imgur.com/j0tR2ZP.jpg
, kb ugyanaz az egy grafika mindenhol, csak apró változásokkal és elforgatva. Alul pl kicsit kevesebb jelenik meg belőle mind a felső header részen, és a felső header részen vannak drótok is rajta. Így kivágtam drót nélkül csak egyetlen pinát külön, ezt az egyetlen képet beolvastam 4x, majd elforgattam html5 módszerrel. Alul kicsit lecsípve belőle, felső részekben teljes nagyságában, és így drótoktól mentesre vágtam a teljes nagyságát. Lokalizált palettát addig csökkentettem amíg nagyon látható degradáció nem keletkezett, szándékomban volt megtartani a vizuális szinten amennyire csak lehetett az optimizálás során. Szóval itt akkor megoldottam hogy a pina csak 32(!) darab színből álljon, + 1 a transzparenciára, látható vizuális degradáció nélkül. A drótot a felső pinákra egy külön képpé vettem ki, amit nem több mint 8 darab színből ki tudtam már hozni, és úgy ragasztottam a beszélt módszerrel a helyükre.
előtte mindez 468kb foglalt el, most a pina 25kb + drót 6kb-t, azaz csak 31kb! :D
Jött a footer, itt levágtam hogy ez gyakorlatilag 2 elemből állt előtte és csak el vannak forgatva, egymásra ragasztva. Itt kettévágtam a képet, szintúgy 33 lokalizált színre redukáltam a palettát transzparenciával és így vágtam a beszélt html5 módszerekkel a kellő régi helyzete kinézetére.
előtte a footer 635kb-t foglalt el, most így 30kb!
Header kicsit trükkösebb volt, ott is dettó tükrözve volt a bal és jobb fele, de apró változásokkal. Amit ravaszan meg tudtam oldani hogy független ettől kettévágtam a képet, és kivágtam külön azokat az elemeket apró négyzetekben (a kettévágott headeren üresen hagytam) amelyek különböznek az oldalakon. Viszont úgy voltam vele nem tökölnék túl sokat itt, csak a vizuálisan igen szembetűnőekkel. És a jobb-bal apró füst különbségek nem voltak annyira szembetűnőel, mivel bal felén szinte teljesen takarja a content, viszont a koponya mindig szem előtt van és állandóan rajta van a felhasználó szeme. Itt a szemtől felfelé kivágtam a szemből kijövő füsttel együtt a képet, és ezt külön ragasztottam oda a letükrözött oldalakra.
A letükrözött headert szintúgy meg tudtam oldani 33 színből, viszont a csontkoponyán túl sok volt a gradiens átmenet, 74 szín volt amennyiből meg tudtam oldani hogy szépen és érintetlenül nézzen ki, de szerencsére ez így magában nagyon kicsi kép és nem sokkal többet foglalt így el.
előtte a header 547kb-t foglalt el, most így 59kb+ koponya 10kb, azaz összesen csak 69kb!
A logot es a mobillogot is redukáltam 32színre, ott nem kellett +1 a transzparenciának, ott is sikerült
40kb-rőé 11kbra levakarni a nagyságot.
Minden beszélt elem így kb 1.7megáról 137kb-ra csökkent, ami brutálisan effektív előrelépés.
Egyedül a kopott fémháttér maradt neccesebb mivel hatalmas fájl, és jpg, mellette nagyon részletes, nem nagyon lehetett trükközni színpalettákkal benne. Mindenesetre azzal már nagyot léptem előre hogy rájöttem hogy az is 2 tükrözött kép összevágása. Egyrészt azért mert nincs módszer arra html sztandardban hogy ismétlődjön végtelenségig a háttér, de minden ismétlődéssel forduljon egyet a megfelelő x vagy y irányba. Kerestem eleget higgyétek el.
Nos ez rajtam nem fogott ki, ráfordítottam pár órát és írtam egy nagyon cseles és flexibilis custom kódot ami gyakorlatilag bármilyen hátteret bármilyen helyzetben le tud osztani x és y sávban a végtelenségig ha kell, automatikusan, állítható extra pufferekkel.
és a CSS fele:
A lényege az hogy van a kezdőfunkció amivel automatikusan rendering előtt olvasódik be minden content, és így nem kell dekkolni minden oldalbeolvasásnál hogy a motor kiszámolja hol helyezkednek el a háttérelemkék, hogyan fordulnak egymáshoz viszonyítva és hogy kirakja őket.
Azután fogja és megnézi mekkora épp a nyitott oldal és kiveszi a méreteket, beolvassa a háttérképet is és kivenné a méreteket belőle. (azért csak kivenné mivel az egész kód, még a legtöbb vizuális content és elem, beleértve a háttérképrészlet beolvasása előtt már lejátszódik, így nem tudja megtenni. Így kézileg odaírtam neki külön hogy tudjunk dolgozni az adatokkal)
Utána nagyrészt 2 ciklus van, egyik ami X tengelyen végig nyitogat friss DIV tagokat és a css3 fájlokban meg a megfelelő transzformációt ráolvassa a megfelelő képkockák helyzetére, ugyanezt megteszi ha a sor végére ért az Y tengelyen is, egészen addig ameddig az oldal aljára nem ért. Egyszerű bit-checkinggel oldottam meg hogy figyelje hogy az adott számlázó páros vagy páratlan számot számol épp, és így nyitogatja a megfelelően forgatott DIV ablakrészeket rá. Volt kismillió helyzet amire figyelnem kellett (mondjuk úgy potenciális bug), pl hogy sűrűn a javascript az oldalakon később olvasódik be mint az oldal váza, és ez tud változtatni az oldal nagyságon, vagy mi történik ha csak félig fedné ki az utolsó befért képrészlet a hátteret, stb. Erre kitaláltam hogy pufferelhető X és Y sávban extra sor vagy oszlop képrészlet, ha úgy választjuk. Eddig úgy bizonyult 2 sor és 2 oszlop extra puffer elég volt minden esetben, így is hagytam.
Mindezzel sokkal jobb és flexibilisebb motort kaptunk a háttérrenderingre mint a meglevőek voltak, pl régi módszernél ha nagyobb felbontásunk (mittomén hamarosan 4k monitorok, mobilon is) lenne mindjárt előjön ismétlődés probléma, bármekkora is az alapháttérképünk http://i.imgur.com/rMlP0fQ.jpg
A friss módszerrel viszont minden irányba végtelen ismétlődés van, átmenet nélkül: http://i.imgur.com/PbL64hD.jpg
Könnyen ki tudjuk cserélni bármikor a háttérszeletet egy másik, vagy kisebb fájlra, és ott is törésvonal mentes lesz mindig minden: http://i.imgur.com/bki3LkU.jpg
Ok ezzel megvan is ismétlődés és beszúrás kérdése oldva, eredetileg 746kb-ról 196kb-ra redukáltam a háttérképméretet. Itt ugye játszottam a minőséggel meg a beszélt ismétlődés kérdéssel, de nem tudtam túlságosan nagyon levenni a minőséget mivel meglátszódott volna a kifejezetten nagy részletességeken az élességesés. Ja ezenfelül progresszív technikával jeleníti meg a képet most nem baseline-nal, ami azt jelenti hogy beolvasódik a teljes kép nagyon gyorsan csak mosottan, majd egyre élesebb lesz ahogy lejön a teljes kép, ahelyett hogy addig feketeség látszódna (vagy vonalakban felülről olvasódva lassan), amíg teljesen lent nem van a kép a gépünkön. Azért szerintem az is nagyon impresszív hogy 746kbs jpg ből 196kbsat tudtam varázsolni trükkökkel, szinte vizuális visszaesés nélkül.
Ez nem volt elég még, fel kellett tenni az i-re a pontot. PC masterrace effektust is produkáltam keveset a masterrace tagoknak. Azaz PC-n softshadow-ot vetnek a drótok a háttérre, amolyan fasza 3D hatást adva, a drótok also fele fénylik egy nüansznyit hogy fénycsillanó hatást adjon, a pinák és a header-footer körvonalai meg gyengéd "fake antialiasing" effektust kapott, hogy mégjobban beleolvadjon a háttérbe és ne látszódjanak rajtuk a recék.
rwurl=http://i.imgur.com/v3rzgw2.jpg
softshadow és fénylés blur effektus a pinán fuck yea :D
Összegezve mindezt, akkor régi 2.5megás komplett háttértartalom helyett impresszív 340kb-ra estünk vissza, és még gyorsabb és faszábban kinéző lett az oldal. :D
Érdekességképen a Chrome pl ha x és y irányban is el van forgatva egy kép, pl a pina jobb alsó sarkában a lapnak, ott nem tudja a szélekre rárenderelni az "antialiasing" effektust.
Internet Explorerrel meg sehogyan sem tudtam a proprietary directx effektusokkal ugyanezeket működésre bírni, pedig elméletben nem túl komplikált, de így ott hagytam a picsába a masterrace részt. Tehát csak Firefoxban és Chrome-ban (egyetlen apró chrome buggal) van masterrace effektus. =)
Más, mondjuk end júzereknek nem mond sokat, de eddig különböző oldalrészekre mint a főoldal, PM beszélgetések, user login panel, stb mind mind külön php oldal volt renderelve a bizonyos helyzetekben kellő, másikokban viszont hanyagolandó DIV és CSS kiosztásokra. Mostantól megoldottam egy intelligens regular expressionnel hogy figyelje mit mutat az URL és annak megfelelően nyitogassa dinamikusan csak a változó kellő elemeket, de gyakorlatilag minden más egy és ugyanabból az oldalról olvasódik be. Ez gyorsítja ismét az oldalbeolvasást, mivel nem kell kisezerszer beolvasni a gépnek ugyanazt a hosszú infót, apró változásokkal, hanem elég egyetlen intelligens kóddal kiosztottat ami majd kapcsolgatja a kérdéseseket.
rwurl=http://i.imgur.com/t6gos2F.jpg
Mobilon dolgoztam még layoutoptimizációkon, helyretettem pár elemet, és ott nem olvasódik be a háttér mivel egyetlen pici bug maradt a kódban, ami csak abban az esetben jön ki ha nagyon összenyomódik a szélesség és nagyon nagy háttérfile van bent a képben, de kijavítom ezt idővel. Addig is van solid color háttér. Plusz nem olvasódnak be a pinák, mivel feleslegesen takarnák a header és footer designt. Az also footer text css is helyre van téve. Eddig mobilon css nélkül jelent meg a kiírás, most ugyanúgy látszik mint PCn.
Fórumbejegyzések kimutatását is megpróbáltam egysorosra levinni és egységessé tenni a kinézetet (friss válaszok kimutatása, stb) a kedvencekkel és a legfrissebb bejegyzésekkel, picit még majd dolgozok rajta hogy minden lehető legjobban smakkoljon, és jó lesz az is.
Phew!
rwurl=http://i.imgur.com/bYCCwCk.gif
Megvolt a Fargo sorozat utolsó része is. A karakterek jók voltak, a sztori úgy ahogy kerek lett a végére, de a katarzis elmaradt. A 10 rész tele volt üresjárattal, egy csomó lassú és/vagy feleslegesnek tűnő jelenettel, meg akadt némi rébuszos mellébeszélés is itt-ott. Azért élveztem, de azt hittem, hogy a nagy hájpnak, ami a sorozatot övezi, nagyobb alapja van.
Iszol te eleget? ;) ?Mostanában némileg feszült vagy...
Magyarítás mikor lesz hozzá? =D