16ms
github.com/glebmachine
facebook.com/glebmachine
00:30:00
,
, ->
!
?Lag -
? , . -
: : , . .
?
, ?
?
, - . - .
, ( - ). : , .
, . , ,
?
- .- .
, , .
?
?
?
00:25:00
?
)--------
60hz16ms
?
, 60 . , , , , . , 16.
, , , .
?
, 16 , .
, . ) ., , ,
~60 16 : ?
, : 60 , , 16 ,
?
00:23:00
? ?
?PARSING HTML/CSS
5-
html css , . 5- . ,
PARSING HTML/CSS
htmlheadh1paspan
body
: http://bit.ly/2eM71AEfont-size: 16pxbodyfont-size: 16pxcolor:
#252525pfont-size: 16pxcolor: #333display nonespanfont-size:
16pxfont-size: 46pxh1
font-size: 16pxcolor: blueaDOMCSSOM ?
- . 2 : DOM CCSOM , HTML
- , .
, CSS . . ( , , normalize.css)
,
PARSING HTML/CSS
htmlheadh1paspan
body
font-size: 16pxbodyfont-size: 16pxcolor: #252525pfont-size:
16pxcolor: blueafont-size: 16pxcolor: #333display
nonespanfont-size: 16pxfont-size: 46pxh1
: http://bit.ly/2eM8eIqRender Tree ?
- .
, DOM CSS , , display: none.
Render Tree - , .
PARSING HTML/CSS
h1p : http://bit.ly/2eM8eIq ?
- .
, .
PARSING HTML/CSS
: http://bit.ly/2eM8eIq ?
- .
: , .
PARSING HTML/CSS
: http://bit.ly/2frF5Ws ?
, . )
, .
HTML/CSS , ? ?
, ? HTML CSS ( ) -
?
00:18:00
.
, , js .
.
?
? : http://bit.ly/2f7rFOW JS (repaint) JS (reflow)
.
: -
, , : ,
, -
( ).
, ,
? .
, .
, , ?
)) , , .
: http://bit.ly/2f7rFOW
, , .
, . , . : .
: .
.
: , .
, / , .
. - :
(repaint) JS (reflow) JS : http://bit.ly/2f7rFOW (Composite
layer) JS
. . .
, .
, , - , , .
: translateZ translate3d will-change CSS
, : , , will-change. , , css transform translateZ translate3d. ,
css , js . , , . - , . , , , . - opacity 0 . visibility: hidden, ,
. , .
: greensock, autoAlpha.
00:10:00
) !
***** ,
JS
. .
. devtools 2 : , more tools, rendering
: .
, - , .
. ,
.
, css . .
JS
, . , , event log
, :
JS
, : 47
JS
, . , , .
, , .
, : 65
18 ,
JS
.
, , . :
, , .Main thread , , composition? ??
, , main threade? .
? js , css Web Animation API, . , . , main threada , .
, Fullpage iScroll .
: .
js.
200 , , 1 .
, +1 . . .. 100, , 10 .
? , . main thread !
, ? 200 !! 200!
, ?
:
( ) 200 ( ) 199 !!!
200 ( ) - .
, , js , : , , , . ! , , , javascript . .
198 !!! 199 !
,
, , 200 .
, 100 )
, , .
. , fastdom. , , , DOM .
? 200 200
, , . - . . : ) 4,5 ( 25 ).
-, , , 10
!..-, , 22-24 , .
3 - . , .
Composition Repaint Reflow CSS Web Animation API JS ,
requestAnimationFrame
, : ( ) CSS Web Animation API , ., JS , . , , : , , , , , .
, , . , , . , 16. .
, , DOM, requestAnimationFrame.
!
00:00:00
, !). !
