HenryYong

Results 6 comments of HenryYong

正在用lerna做组件库,及时雨啊。。

> 我看了下,目前好像是这样的效果,本质上是因为picker的更新数据是通过setData的方式去更新数据长度类的效果。 > > 不过这种场景还是比较奇怪,未来我们会在2.x中进行修复,当前还是建议区分不同场景实例化不同picker 这也是为啥 所有picker类都不建议使用单例模式是一个道理 所以同一场景下,多个picker也不建议使用单例么?我遇到的问题是在$updateProps里不能更新onSelect方法

> > 这就不得不介绍(推销)下我的文章了:[你真的了解回流和重绘吗](https://github.com/chenjigeng/blog/issues/4) > > 原文如下: > > # 你真的了解回流和重绘吗 > > 回流和重绘可以说是每一个web开发者都经常听到的两个词语,可是可能有很多人不是很清楚这两步具体做了什么事情。最近有空对其进行了一些研究,看了一些博客和书籍,整理了一些内容并且结合一些例子,写了这篇文章,希望可以帮助到大家。 > > ## 浏览器的渲染过程 > > 本文先从浏览器的渲染过程来从头到尾的讲解一下回流重绘,如果大家想直接看如何减少回流和重绘,优化性能,可以跳到后面。(这个渲染过程来自[MDN](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction?hl=zh-cn)) > > ![webkit渲染过程](https://camo.githubusercontent.com/bc1b4024057309bf919e96e7ccdccb39d50fa712/68747470733a2f2f757365722d676f6c642d63646e2e786974752e696f2f323031382f31322f31302f313637393862386462353463616133313f773d36323426683d32383926663d706e6726733d3431303537) > > 从上面这个图上,我们可以看到,浏览器渲染过程如下: > > > >...

我写了一个很简单的demo: ```html Document div { width: 200px; height: 200px; background-color: aqua; } setTimeout(() => { document.querySelector('div').style.backgroundColor = 'red' }, 2000) ``` ![image](https://user-images.githubusercontent.com/7967105/64073872-a4b67780-ccd6-11e9-9f63-bdeb5f433d48.png) 然后用performance记录了一下,在修改背景色的时候,只触发了`paint`

> @HenryYong > ![image](https://user-images.githubusercontent.com/14784326/64074113-e0067580-ccd9-11e9-8000-185448761a77.png)这里不是触发了回流了吗。 我尝试了修改`background-color`和`width`,都会有`Recalculate Style`和`Update Layer Tree`这两个阶段,但是在修改`width`的时候,会多一个`Layout`的阶段 ![image](https://user-images.githubusercontent.com/7967105/64678392-0da6a800-d4ac-11e9-8cb1-20b5979aa863.png)

thanks!!正好用到这个!