草依山的Javascript世界

一个Javascript程序猿的学习纪录剩地,不仅仅是JS,还有Linux、Mac、nodeJs、吃、玩!

一次简单的性能问题排查

有同事反应某个广告素材很卡,需要查一下,那就搞一下啦。

首先这个卡有可能是网络原因,在资源没有下载完的情况下,操作无响应,是很正常的情况。

  1. 上chrome,打开开发者工具,切到Network选项卡,找开网址,一看各响应都是在120ms以下的,肯定不是网络的原因了。
  2. 放了一会广告,鼠标操作完全没反应,动画切换如同慢镜头
  3. 猜测是JS的问题,切到Timeline选项卡,录制一下,真相迅速浮出水面,有图如下

首先看到了每次timer触发后,render的时候特别长

定位到代码

其中的mvproduct.makeg1函数会不停的在head区域添加生成的style标签,随着时间的增长,每一次添加,浏览器都会重新计算所有的style,并且重新渲染对应的元素,这个就是真相!

素材地址在这里,跟对方说明情况后,已经很快修复了,估计你们看不到效果了,并且我也不想再写一个复现的例子了,哈哈,我好懒。

文章地址: 一次简单的性能问题排查
欢迎关注我的微博与我交流:@草依山
Github上也有一些东西:[Github]
所有文章坚决抵制jb51.net的转载!
标签: javascript 29
2014-03-10

相关文章

2017-03-22 一次算PI的小尝试
2017-02-13 new做了些什么
2016-09-29 [翻译]bash的各种文件载入执行顺序
2016-05-31 phantomjs在linux下截图中文字体问题
2016-04-24 Promise的错误处理

文章修改纪录

加载中...
Copyright © 2013. Create By 草依山, Fork