MrZWH / Web-front-end-performance-optimization

剖析web前端性能优化原理,分析当前大公司在性能优化上所做的实践。
MIT License
6 stars 2 forks source link

chrome 优化实践 #1

Open MrZWH opened 4 years ago

MrZWH commented 4 years ago

Timeline掌控帧渲染模式

触发分层

1.DOM子树渲染层(RenderLayer)-> RenderObject -> GraphicsContext (根元素、position、transform、半透明、CSS滤镜、Canvas2D、video、溢出)
2.Compositor -> 渲染层子树的图形层(GraphicsLayer)-> RenderLayer -> RenderObject
Compositor 将所有的拥有 compositing layer 进行合成,合成过程GPU进行参与。合成完毕就能够将纹理映射到一个网格几何结构之上——在视频游戏或者CAD程序中,这种技术用来给框架式的3D模型添加皮肤。Chrome采用纹理把页面中的内容分块发送给GPU。纹理能够以很低的代价映射到不同位置,而且还能够以很低的代价把他们应用到一个简单的矩形网格中进行变形,这就是 CSS 3D 的实现原理。(CSS3D 透视变换、video、webgl、transform动画、加速CSS滤镜、叠加在已经触发合成图)

MrZWH commented 4 years ago

Profiles 分析具体问题

引起 Nodejs 内存泄漏

1.全局变量需要进程退出才能释放 2.闭包引用中间函数,中间函数也不会释放,会使原始的作用域也不会释放,作用域不被释放它占用的内存也不会被释放。所以使用过后重置为null等待垃圾回收。 3.谨慎使用内存当作缓存,建议采用 redis 或者 Memcached。好处:外部缓存软件有着良好的缓存过期淘汰策略以及自由的内存管理,不影响node主进程的性能。减少内部常驻内存的对象数量垃圾回收更高效率,进程间功效缓存。