Download - Performance-driven front-end development
![Page 1: Performance-driven front-end development](https://reader033.vdocuments.mx/reader033/viewer/2022051611/54b745894a795950768b45c5/html5/thumbnails/1.jpg)
Performance-driven front-end development
2013-10-25
By Zhang Hongliang
Online slide show
Raxtone
![Page 2: Performance-driven front-end development](https://reader033.vdocuments.mx/reader033/viewer/2022051611/54b745894a795950768b45c5/html5/thumbnails/2.jpg)
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
![Page 3: Performance-driven front-end development](https://reader033.vdocuments.mx/reader033/viewer/2022051611/54b745894a795950768b45c5/html5/thumbnails/3.jpg)
Raxtone
![Page 4: Performance-driven front-end development](https://reader033.vdocuments.mx/reader033/viewer/2022051611/54b745894a795950768b45c5/html5/thumbnails/4.jpg)
Main engine
Raxtone
![Page 5: Performance-driven front-end development](https://reader033.vdocuments.mx/reader033/viewer/2022051611/54b745894a795950768b45c5/html5/thumbnails/5.jpg)
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.htmRaxtone
![Page 6: Performance-driven front-end development](https://reader033.vdocuments.mx/reader033/viewer/2022051611/54b745894a795950768b45c5/html5/thumbnails/6.jpg)
Problems
Performance Tooling by Paul Irish (#perfmatters at SFHTML5)YouTubeslide Raxtone
![Page 7: Performance-driven front-end development](https://reader033.vdocuments.mx/reader033/viewer/2022051611/54b745894a795950768b45c5/html5/thumbnails/7.jpg)
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
![Page 9: Performance-driven front-end development](https://reader033.vdocuments.mx/reader033/viewer/2022051611/54b745894a795950768b45c5/html5/thumbnails/9.jpg)
User perception
Raxtone
![Page 10: Performance-driven front-end development](https://reader033.vdocuments.mx/reader033/viewer/2022051611/54b745894a795950768b45c5/html5/thumbnails/10.jpg)
Ideal situation
Raxtone
![Page 11: Performance-driven front-end development](https://reader033.vdocuments.mx/reader033/viewer/2022051611/54b745894a795950768b45c5/html5/thumbnails/11.jpg)
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
![Page 12: Performance-driven front-end development](https://reader033.vdocuments.mx/reader033/viewer/2022051611/54b745894a795950768b45c5/html5/thumbnails/12.jpg)
Page load time
Chrome(Canary): Devtools – Network(open Devtools and refresh)
Raxtone
![Page 13: Performance-driven front-end development](https://reader033.vdocuments.mx/reader033/viewer/2022051611/54b745894a795950768b45c5/html5/thumbnails/13.jpg)
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
![Page 14: Performance-driven front-end development](https://reader033.vdocuments.mx/reader033/viewer/2022051611/54b745894a795950768b45c5/html5/thumbnails/14.jpg)
Solution - methods
Raxtone
Sprite,combine
Including css,html
$.ajax cache default
•Missing Trailing Slash•Connecting Web Sites
Common module
![Page 15: Performance-driven front-end development](https://reader033.vdocuments.mx/reader033/viewer/2022051611/54b745894a795950768b45c5/html5/thumbnails/15.jpg)
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
![Page 16: Performance-driven front-end development](https://reader033.vdocuments.mx/reader033/viewer/2022051611/54b745894a795950768b45c5/html5/thumbnails/16.jpg)
PageSpeed Insights
• Best Practice(help page)
Raxtone
S sprite
![Page 17: Performance-driven front-end development](https://reader033.vdocuments.mx/reader033/viewer/2022051611/54b745894a795950768b45c5/html5/thumbnails/17.jpg)
PageSpeed Insights
• Before building
Raxtone
Grunt tasks:ConcatCssminuglifyhtmlminimagemin
![Page 18: Performance-driven front-end development](https://reader033.vdocuments.mx/reader033/viewer/2022051611/54b745894a795950768b45c5/html5/thumbnails/18.jpg)
PageSpeed Insights
• After building (suggestion config by server client)
Raxtone
![Page 19: Performance-driven front-end development](https://reader033.vdocuments.mx/reader033/viewer/2022051611/54b745894a795950768b45c5/html5/thumbnails/19.jpg)
Image assets
• Pc portal flynavi.cn
Raxtone
![Page 20: Performance-driven front-end development](https://reader033.vdocuments.mx/reader033/viewer/2022051611/54b745894a795950768b45c5/html5/thumbnails/20.jpg)
Solution
• grunt-contrib-imagemin– Minify PNG and JPEG images
Raxtone
![Page 21: Performance-driven front-end development](https://reader033.vdocuments.mx/reader033/viewer/2022051611/54b745894a795950768b45c5/html5/thumbnails/21.jpg)
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
![Page 22: Performance-driven front-end development](https://reader033.vdocuments.mx/reader033/viewer/2022051611/54b745894a795950768b45c5/html5/thumbnails/22.jpg)
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
![Page 23: Performance-driven front-end development](https://reader033.vdocuments.mx/reader033/viewer/2022051611/54b745894a795950768b45c5/html5/thumbnails/23.jpg)
Critical path css
• External CSS stylesheets are render-blocking, 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
![Page 24: Performance-driven front-end development](https://reader033.vdocuments.mx/reader033/viewer/2022051611/54b745894a795950768b45c5/html5/thumbnails/24.jpg)
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
![Page 25: Performance-driven front-end development](https://reader033.vdocuments.mx/reader033/viewer/2022051611/54b745894a795950768b45c5/html5/thumbnails/25.jpg)
@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
![Page 26: Performance-driven front-end development](https://reader033.vdocuments.mx/reader033/viewer/2022051611/54b745894a795950768b45c5/html5/thumbnails/26.jpg)
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
![Page 27: Performance-driven front-end development](https://reader033.vdocuments.mx/reader033/viewer/2022051611/54b745894a795950768b45c5/html5/thumbnails/27.jpg)
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
![Page 28: Performance-driven front-end development](https://reader033.vdocuments.mx/reader033/viewer/2022051611/54b745894a795950768b45c5/html5/thumbnails/28.jpg)
Interation
• Human–computer interaction– Human–computer interaction (HCI) involves
the study, planning, and design of the interaction between people (users) and computers.
Raxtone
![Page 29: Performance-driven front-end development](https://reader033.vdocuments.mx/reader033/viewer/2022051611/54b745894a795950768b45c5/html5/thumbnails/29.jpg)
Transitions & animations
• The CSS transition property is a shorthand property for transition-property, transition-duration, transition-timing-function, 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-timing-function, animation-delay, animation-iteration-count and animation-direction.
Raxtone
![Page 30: Performance-driven front-end development](https://reader033.vdocuments.mx/reader033/viewer/2022051611/54b745894a795950768b45c5/html5/thumbnails/30.jpg)
Solution
Raxtone
![Page 31: Performance-driven front-end development](https://reader033.vdocuments.mx/reader033/viewer/2022051611/54b745894a795950768b45c5/html5/thumbnails/31.jpg)
Example 1 - 1
• Source: flynavi project
• Tool: devtools -
Raxtone
![Page 32: Performance-driven front-end development](https://reader033.vdocuments.mx/reader033/viewer/2022051611/54b745894a795950768b45c5/html5/thumbnails/32.jpg)
Example 1 - 2
Raxtone
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.
![Page 33: Performance-driven front-end development](https://reader033.vdocuments.mx/reader033/viewer/2022051611/54b745894a795950768b45c5/html5/thumbnails/33.jpg)
Example 1 - 3
• Applying transform style
Raxtone
![Page 34: Performance-driven front-end development](https://reader033.vdocuments.mx/reader033/viewer/2022051611/54b745894a795950768b45c5/html5/thumbnails/34.jpg)
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
![Page 35: Performance-driven front-end development](https://reader033.vdocuments.mx/reader033/viewer/2022051611/54b745894a795950768b45c5/html5/thumbnails/35.jpg)
Example 1 - 5
Raxtone
![Page 36: Performance-driven front-end development](https://reader033.vdocuments.mx/reader033/viewer/2022051611/54b745894a795950768b45c5/html5/thumbnails/36.jpg)
Scrolling
• Scrolling areas are used to let the user move text and/or images across the device's display.
Raxtone
![Page 37: Performance-driven front-end development](https://reader033.vdocuments.mx/reader033/viewer/2022051611/54b745894a795950768b45c5/html5/thumbnails/37.jpg)
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
![Page 38: Performance-driven front-end development](https://reader033.vdocuments.mx/reader033/viewer/2022051611/54b745894a795950768b45c5/html5/thumbnails/38.jpg)
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
![Page 39: Performance-driven front-end development](https://reader033.vdocuments.mx/reader033/viewer/2022051611/54b745894a795950768b45c5/html5/thumbnails/39.jpg)
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
![Page 40: Performance-driven front-end development](https://reader033.vdocuments.mx/reader033/viewer/2022051611/54b745894a795950768b45c5/html5/thumbnails/40.jpg)
What causes the browser to layout?
Raxtone
innerHTML
![Page 41: Performance-driven front-end development](https://reader033.vdocuments.mx/reader033/viewer/2022051611/54b745894a795950768b45c5/html5/thumbnails/41.jpg)
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
![Page 42: Performance-driven front-end development](https://reader033.vdocuments.mx/reader033/viewer/2022051611/54b745894a795950768b45c5/html5/thumbnails/42.jpg)
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
![Page 43: Performance-driven front-end development](https://reader033.vdocuments.mx/reader033/viewer/2022051611/54b745894a795950768b45c5/html5/thumbnails/43.jpg)
Devtools• Devtools – Timeline
Raxtone
![Page 44: Performance-driven front-end development](https://reader033.vdocuments.mx/reader033/viewer/2022051611/54b745894a795950768b45c5/html5/thumbnails/44.jpg)
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
![Page 45: Performance-driven front-end development](https://reader033.vdocuments.mx/reader033/viewer/2022051611/54b745894a795950768b45c5/html5/thumbnails/45.jpg)
Example 1
• The code shared on jsfiddle.– Move a div element
Raxtone
![Page 46: Performance-driven front-end development](https://reader033.vdocuments.mx/reader033/viewer/2022051611/54b745894a795950768b45c5/html5/thumbnails/46.jpg)
Example 2
• Positioning button animation(flynavi project)
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 …Raxtone
![Page 47: Performance-driven front-end development](https://reader033.vdocuments.mx/reader033/viewer/2022051611/54b745894a795950768b45c5/html5/thumbnails/47.jpg)
Example 3 - 1
• 3,innerText leading to layout
Raxtone
![Page 48: Performance-driven front-end development](https://reader033.vdocuments.mx/reader033/viewer/2022051611/54b745894a795950768b45c5/html5/thumbnails/48.jpg)
Example 3 - 2
• Before modified
Raxtone
$('#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)));})
![Page 49: Performance-driven front-end development](https://reader033.vdocuments.mx/reader033/viewer/2022051611/54b745894a795950768b45c5/html5/thumbnails/49.jpg)
Example 4
• Comprehensive use: coffeescript, requirejs, fastdom, javascriptmvc, RWD, refactor
Raxtone
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'})
) ) ) } ))
require(['mapRouteView'],function(){ setMapRouteView = new MapRouteView(config); setMapRouteView.displayData();})
![Page 50: Performance-driven front-end development](https://reader033.vdocuments.mx/reader033/viewer/2022051611/54b745894a795950768b45c5/html5/thumbnails/50.jpg)
Qualification
Raxtone
![Page 51: Performance-driven front-end development](https://reader033.vdocuments.mx/reader033/viewer/2022051611/54b745894a795950768b45c5/html5/thumbnails/51.jpg)
Todo
• Turn on pain rects, layer borders, continuous repainting
• about:tracing• bootstrap• Css lib
– Topcoat• Tool
– speed curve– WebPageTest Raxtone
![Page 52: Performance-driven front-end development](https://reader033.vdocuments.mx/reader033/viewer/2022051611/54b745894a795950768b45c5/html5/thumbnails/52.jpg)
Thanks
• @paul_irish
• @ChromiumDev
• @YouTube
• Other internet resources
Raxtone
![Page 53: Performance-driven front-end development](https://reader033.vdocuments.mx/reader033/viewer/2022051611/54b745894a795950768b45c5/html5/thumbnails/53.jpg)
Raxtone