蚂蚁面试官问问题的角度好刁钻,而且语速很快很快,一不注意就会被他带跑了。不过仔细复盘之后觉得他问的问题都挺有价值的,在这里记录一下。
虚拟DOM到底是如何提升性能的?(问的很详细,最好能列举出真实DOM,虚拟DOM的操作行为例子)
- 减少重绘回流次数
比如向一个<ui>列表添加5个<li>,如果直接操作真实DOM,那么浏览器需要经历5次回流;
但使用虚拟DOM在更新完后再异步批量更新真实DOM,一次性插入5个,浏览器只需要经历一次回流。
2.diff算法可以尝试对DOM进行复用,可以减少一些可能的DOM操作
虚拟DOM未必一定能提升性能,需要分情况讨论:
小量数据更新: 当页面的渲染数据高达几万条,但只需要修改某一条数据时,Virtual DOM的Diff比对算法,能够避免不必要的DOM操作,节省开销大量数据更新: 当页面的渲染数据高达几万条, 但是更新的数据却非常大,甚至全量更新,Virtual DOM无法进行优化, 加剧了性能的浪费给一个二维平面点坐标的集合,如(2,3)(4,5),将这些点依次按顺序连线,判断最后连成的图形是否是一个三角形
我的思路:
- 判断第一个点和最后一个点是否相同,若不同则直接返回false(首尾不相连)。
- 维护一组直线方程参数ABC,分别对应Ax+By+C=0。遍历点集,根据当前点和下一个点计算一组ABC并和之前的ABC比较是否全等,若全等则代表当前点和前后两个点共线,否则代表当前点是一个拐点,同时将ABC更新为新计算出的ABC。
- 遍历完成后检查是否一共恰好有3组不同的ABC(分别代表三角形的三条边的直线方程参数),若是则返回true,否则返回false
面试官说思路可以,但实操起来不太可行,但我自己琢磨也不是很难实现啊...
关于上面的问题,欢迎各位在评论区多多指教~