internal training presentation

1. Performance-driven front-end development
2013-10-25
By Zhang Hongliang
Online slide show
Raxtone

2. Concepts
•
•
•
•
Layout is the process by which Chrome calculates the positions and
sizes of all the elements on the page.
Reflow (aka layout thrashing )is the name of the web browser process
for re-calculating the positions and geometries of elements in the
document, for the purpose of re-rendering part or all of the document.
A repaint occurs when changes are made to an elements skin that
changes visibility, but do not affect its layout.
A web browser engine, (sometimes called layout engine or rendering
engine), is a software component that takes marked up content (such
as HTML, XML, image files, etc.) and formatting information (such as
CSS, XSL, etc.) and displays the formatted content on the screen.
– Main engine
Raxtone

3. Raxtone

4. Main engine
Raxtone

5. Sources
• Tools
– Canary or chrome
• Open a Chrome window in incognito
mode(ctrl+shift+n)
– Devtools
– Pagespeed insights
• Links( slash not omitted )
– http://testwww.flynavi.cn/help/
– http://testwww.flynavi.cn/
– http://testwww.flynavi.cn/webflynavi/navi.htm
Raxtone

6. Problems
Performance Tooling by Paul Irish
(#perfmatters at SFHTML5)
YouTube
Raxtone
slide

7. Page load
• The DOMContentLoaded event is fired when the
document has been completely loaded and parsed,
without waiting for stylesheets, images, and
subframes to finish loading (the load event can be
used to detect a fully-loaded page).
• The load event is fired when a resource and its
dependent resources have finished loading.
Raxtone

8. External cause
Region
Platform
Network
GTmetrix
Raxtone

9. User perception
Raxtone

10. Ideal situation
Raxtone

11. Current situation
• The study found that the median load time
for first-time visitors to a retail website’s
home page was 7.25 seconds
• 57% of online shoppers will wait 3 seconds
or less before abandoning the site.
• based the 3 seconds ideal load time on pc
(source:PhoCusWright/Akamai report)
Raxtone

12. Page load time
Chrome(Canary): Devtools – Network
(open Devtools and refresh)
Raxtone

13. Network waterfall
•
resources in the Network table are sorted by the start time of each
request (the network "waterfall").
– the request's latency and receipt time are displayed above the
corresponding bar's light- and dark-shaded areas, respectively
Raxtone

14. Solution - methods
Sprite,combine
•Missing Trailing Slash
•Connecting Web Sites
Including css,html
Common module
$.ajax cache default
Raxtone

15. Solution - tool
• Use PageSpeed Insights to identify
performance best practices that can be
applied to your site, and PageSpeed
optimization tools to automate the process
of applying those best practices.
Raxtone

16. PageSpeed Insights
• Best Practice(help page)
S sprite
Raxtone

17. PageSpeed Insights
• Before building
Grunt tasks:
Concat
Cssmin
uglify
htmlmin
imagemin
Raxtone

18. PageSpeed Insights
• After building (suggestion config by server
client)
Raxtone

19. Image assets
• Pc portal flynavi.cn
Raxtone

20. Solution
• grunt-contrib-imagemin
– Minify PNG and JPEG images
Raxtone

21. Non-blocking delivery
• Limiting yourself to downloading a single
large JavaScript file will only result in
locking the browser out for a long period of
time, despite it being just one HTTP
request.
Raxtone

22. Solution
• The secret to nonblocking scripts is to load
the JavaScript source code after the page
has finished loading.
–
–
–
–
–
Asynchronous
Script Positioning
Deferred Scripts
Requirejs
Jquery.lazyload
Raxtone

23. Critical path css
• External CSS stylesheets are renderblocking, meaning the browser won’t paint
content to the screen until all of your CSS –
specifically, media=’screen’ CSS – arrives.
– Source:
Detecting Critical CSS For Above-the-Fold Content
Raxtone

24. Solution
• Prioritize visible content
– one (and only one) external CSS file
– an inlined CSS block that is page specific and
allows your above the fold content to load
immediately.
Raxtone

25. @font-face load
• 1) custom fonts are awesome and we want
to use them
• 2) custom fonts slow down our pages by
being large additional resources.
Raxtone

26. Solution
• Only load on large screens
• Ajax in the fonts
• Lazy load the fonts, load on subsequent
page loads after cached
– Source:
Preventing the Performance Hit from Custom Fonts
Raxtone

27. Runtime
• Run time (program lifecycle phase)
– In computer science, run time, run-time,
runtime, or execution time is the time during
which a program is running (executing), in
contrast to other phases of a program's lifecycle
such as compile time, link time, load time, etc.
Raxtone

28. Interation
• Human–computer interaction
– Human–computer interaction (HCI) involves
the study, planning, and design of the
interaction between people (users) and
computers.
Raxtone

29. Transitions & animations
• The CSS transition property is a shorthand property for
transition-property, transition-duration, transition-timingfunction, and transition-delay. It allows to define the
transition between two states of an element. Different
states may be defined using pseudo-classes like :hover
or :active or dynamically set using JavaScript.
• The animation CSS property is a shorthand property for
animation-name, animation-duration, animation-timingfunction, animation-delay, animation-iteration-count and
animation-direction.
Raxtone

30. Solution
Raxtone

31. Example 1 - 1
• Source: flynavi project
• Tool: devtools -
Raxtone

32. Example 1 - 2
Show composited layer borders: It can indicate the rendered
elements which may be animating or have CSS transforms/
transitions applied to them that change the shape or positioning
of the element.
Raxtone

33. Example 1 - 3
• Applying transform style
Raxtone

34. Example 1 - 4
• Enable continuous page repainting
– This is a tool that helps you identify elements
on the page which are costly. The page will
continuously repaint, showing a counter of how
much painting work is happening.
– Paint hurts on low-end devices
Raxtone

35. Example 1 - 5
Raxtone

36. Scrolling
• Scrolling areas are used to let the user move
text and/or images across the device's
display.
Raxtone

37. Memory leak & GC
•
•
•
A memory leak is a gradual loss of available computer memory. It occurs
when a program repeatedly fails to return memory it has obtained for
temporary use. JavaScript web apps can often suffer from similar memory
related issues that native applications do, such as leaks and bloat but they also
have to deal with garbage collection pauses.
In computer science, garbage collection (GC) is a form of automatic memory
management. The garbage collector, or just collector, attempts to reclaim
garbage, or memory occupied by objects that are no longer in use by the
program.
Problem:
– Is my page using too much memory?
– Is my page free of memory leaks?
– How frequently is my page forcing
garbage collection?
Raxtone

38. Key point - layout thrashing
• Outside of initial page load problems,
“layout thrashing” is the most common
performance problem in dynamic web
applications. This is particularly true for
Single Page Applications which build and
destroy views on the fly.
Raxtone

39. Solution - Minimize reflow
• Reduce unnecessary DOM depth. Changes at one level in
the DOM tree can cause changes at every level of the tree all the way up to the root, and all the way down into the
children of the modified node.
• Minimize CSS rules, and remove unused CSS rules.
• If you make complex rendering changes such as
animations, do so out of the flow. Use position-absolute or
position-fixed to accomplish this.
• Avoid unnecessary complex CSS selectors - descendant
selectors in particular - which require more CPU power to
do selector matching.
Raxtone

40. What causes the browser to
layout?
innerHTML
Raxtone

41. RequestAnimationFrame
• The window.requestAnimationFrame()
method tells the browser that you wish to
perform an animation and requests that the
browser call a specified function to update
an animation before the next repaint. The
method takes as an argument a callback to
be invoked before the repaint.
Raxtone

42. The basic tools
• The workbench becomes the center of the
wood shop, the craftsman returning to it
time and time again as a piece takes shape.
-- The pragmatic programmer by Andrew
Hunt David Thomas
Raxtone

43. Devtools
• Devtools – Timeline
Raxtone

44. Libraries
• FastDom
– Target
» Eliminates layout thrashing by batching DOM read/write
operations
– Principle
» Each read/write job is added to a corresponding read/write
queue. The queues are emptied (reads, then writes) at the
turn of the next frame using
window.requestAnimationFrame.
Raxtone

45. Example 1
• The code shared on jsfiddle.
– Move a div element
Raxtone

46. Example 2
• Positioning button animation(flynavi project)
Raxtone
var position_interval = null;
void function () {
var num = 0 ,interval=200, preFrameTime=0
position_interval = requestAnimationFrame(function (stampTime) {
var duration = stampTime - preFrameTime;
if(duration< interval){
requestAnimationFrame(arguments.callee)
return
}
/* 填加自车位置后，隐藏正在定位按钮样式 */
if (mapHandler.mapObj && mapHandler.curMarker) {
positionStateEnd();
return;
}
preFrameTime=stampTime
…

47. Example 3 - 1
• 3,innerText leading to layout
Raxtone

48. Example 3 - 2
•
Before modified
$('#normal_withTime_one').text(util_common.formatMinute(Math.round(newVal.timeExtend10/60)));
$('#normal_withTime_two').text(util_common.formatMinute(Math.round(newVal.timeExtend20/60)));
After modified
fastdom.write(function () {
$('#normal_withTime_one').text(util_common.formatMinute(Math.round(newVal.timeExtend10 / 60)));
$('#normal_withTime_two').text(util_common.formatMinute(Math.round(newVal.timeExtend20 / 60)));
})
Raxtone

49. Example 4
• Comprehensive use: coffeescript, requirejs,
fastdom, javascriptmvc, RWD, refactor
define(['fastdom','jquerymx'] ,(fastdom)->
$.Model('MapRouteView',
{
setUi: ->
$path_info = $('#path_info')
fastdom.read(->
top1 = $path_info.position().top - 57
top2 = $path_info.position().top - 94
fastdom.write(->
$('#zoom_out').css('top', top1);
$('#zoom_in').css('top', top2);
$('#tmc_btn').hide();
$('#navi').hide("fast", ->
$path_info.css({'visibility':
'visible'})
)
)
)
}
)
)
Raxtone
require(['mapRouteView'],function(){
setMapRouteView = new MapRouteView(config);
setMapRouteView.displayData();
})

50. Qualification
Raxtone

51. Todo
• Turn on pain rects, layer borders, continuous
repainting
• about:tracing
• bootstrap
• Css lib
– Topcoat
• Tool
– speed curve
– WebPageTest
Raxtone

52. Thanks
•
•
•
•
•
@twitter
@paul_irish
@ChromiumDev
@YouTube
Other internet resources
Raxtone

53. Raxtone