Front end Performance

Jump to bottom

Rick edited this page Apr 2, 2018 · 7 revisions

http://kelle.co/react-perf-slides/ A cool slide

http://perf.rocks/tools/ A cool tools set web site

http://www.perf-tooling.today/tools Another perf-tool set web site

Front-end perf requirement

Breakdown page time Full page time -> Front-end loading time -> A specify component(grid) loading time -> Function time in this component
Auto-gather JS/CSS/Media(image, docs) timeline
Scan out unused CSS/JS
Reduce noise, better only include self-defined js and css files/functions/variables
Auto-highlight items that do not match speed requirement
Monitor of front-end resources
Consist of metrics, should include time of network/loading/painting/scripting/...

Seems better open sources

https://github.com/mobxjs/mobx-react-devtools

https://github.com/nolanlawson/marky

https://github.com/axemclion/browser-perf

https://github.com/Comcast/Surf-N-Perf

https://github.com/macbre/phantomas

https://github.com/addyosmani/timing.js

https://github.com/axemclion/perfjankie

http://speedgun.io/#?uuid=fba998ae-3419-49b6-8756-e049289487ec

https://github.com/paulirish/automated-chrome-profiling

https://github.com/GoogleChrome/big-rig

https://github.com/macbre/analyze-css

https://github.com/gmetais/unusedjs

https://github.com/jakubpawlowicz/clean-css

https://github.com/purifycss/purifycss

2018.3.30

https://github.com/ebidel/appmetrics.js

https://github.com/zeman/perfmap an interesting tool to show performance heatmap in the browser page