Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chrome 优化实践 #1

Open
MrZWH opened this issue Dec 13, 2019 · 1 comment
Open

chrome 优化实践 #1

MrZWH opened this issue Dec 13, 2019 · 1 comment

Comments

@MrZWH
Copy link
Owner

MrZWH commented Dec 13, 2019

Timeline掌控帧渲染模式

触发分层

  • 1.获取DOM并将其分割为多个层
  • 2.将每个层独立的绘制进位图中
  • 3.将层作为纹理上传至GPU
  • 4.复合多个层来生成最终的屏幕图像

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
Copy link
Owner Author

MrZWH commented Dec 13, 2019

Profiles 分析具体问题

  • 通过分析找到原因,如果是 JavaScript 通过 V8-Profiles
  • 硬件加速与重排
  • node-inspector
  • Webkit 技术内幕

引起 Nodejs 内存泄漏

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant