Pt -- 一个简易的网页性能报告工具

• 最近看到不少electronjs的文章, 并且想作点小工具. 因此就有Pt
• 好久没看angular了(以前看的时候是2, 如今8都RC了), 因此放弃了平常使用的Vue, 复习下angular 
• 性能相关的本身所学很少, 因此想依靠chrome, 因此看上了Puppeteer 

先看个动图吧:

 好了理由说完了, 说下基本的过程吧. 固然重要的是这个学习的过程. 

 脚手架: https://github.com/maximegris/angular-electron 

 而后作了几个步骤: 

• 整合pupeteer, 我这里使用了 pupeteer-core, 因此须要机器上自带chrome 
• 整合下material (angular 生态里UI库确实还不太行, material仍是那么拖后腿)
• 看了2天angular官网走了一遍hero
• electronjs部分基本都是官网和参考例子(github.com/hokein/elec…)

基本想法:

须要一些现成的数据:

资源使用率 - 这个貌似不少人都不过重视. 

lighthouse 报告-  这个比较全面

其实,咱们组里的不少前端都没用过上面两个东西.

获取数据:

puppeteer整合完了, 参考例子 github.com/GoogleChrom…

使用率方面我是改了例子的代码, 生成一个数组出来, 例子里是输出到终端了.

lighthouse基本就是直接拿来用的, 改的地方很少.

展现:

Material的Table 来作列表,这里也本身写了个pipe. 并且以为angular的组件真的不太强大...

search button加个缩放小动画

lighthouse button 来个透明度小动画

使用率进度条来个width的动画

别看就一个页面, animation还用上了. 

----

lighthouse报告展现的问题,由于拿到的是一个整页面. 因此开始考虑的方向就是iframe这种. 官方不推荐webview. 最终选择了新开一个子window. 这个报告相对独立. 自带亮暗两种主题, 默认是亮的, 为了配合我列表页的颜色, 我用代码改为了暗主题.

打包:

我打包搜了很久, 最后的方法是 Travis上打linux的包, 本地 MBP 打mac的dmg. windows还没弄, 看其余人文章是须要另外一个CI.

Logo:

咱们的设计师同窗不爱帮忙, 因此我找了对面可爱的前端小伙伴设计了.  鄙视下不会PS的本身. 设计方面本身还真的挺想学下的.

一些问题:

有些网站常常会报错, 超时什么的. 这个还得继续看看是什么状况, 难道SPA的 都不行?

有经验的大佬请留言, 给小弟点思路.

仓库地址:

github.com/dreambo8563…