html怎么添加图层,html – Chrome渲染图层

我的网站上有一个动画,我的速度很慢.

经过一些调查后,我发现(通过DevTools时间线选项卡)问题是整个页面正在被重新绘制而不仅仅是动画div.

我检查了“显示合成图层边框”选项,发现有时动画div位于另一个渲染层中.

但我找不到一致的行为：

>当div不在另一层时 – 动画很慢.

>当div在另一层时,有时动画很快,有时它很慢,这取决于页面中其他元素的存在(具有位置的div：固定,选取框等).这些其他元素似乎与DOM树中的动画div完全无关,但显然会对动画期间页面的渲染产生影响.

我发现了一些文章(1,2,3,4,5),这些文章提出了“强制”Chrome在另一个渲染层中渲染元素的可能方法,但大多数都是旧的(事情可能已经改变).

而且,它们通常不解决元素如何相对于渲染层相互影响.

> Chrome如何确定将哪个元素放入哪个图层？

>我怎样才能知道我的案件决定了什么？ (即调试渲染层)

>关于渲染层,不同元素如何相互影响？

>如何在另一个图层中生成元素的动画,从而重新绘制整个页面？ (在某些情况下这会发生)

>如何确保快速渲染动画？即 – 将元素强制转换为另一个图层,并确保动画不会导致整个页面的重新绘制.

>最后 – 我如何能够掌握浏览器渲染算法的变化,以便将来不再返回这些问题？

html怎么添加图层,html – Chrome渲染图层 – 创建条件？相关推荐

android 队列执行动画,Android 重学系列渲染图层-图元缓冲队列初始化
前言经过上一篇文章,对开机启动动画的流程梳理,引出了实际上在开机启动动画中,并没有Activity,而是通过OpenGL es进行渲染,最后通过某种方式,把数据交给Android渲染系统. 本文,先 ...
使用openlayers的扩展插件实现矢量图层的3D渲染
实现openLayers二维地图上的矢量图层的3D效果 openLayers简介 openlayers是一个用于开发WebGIS的客户端的JavaScript包,主要负责GIS数据的展示和交互.在操作 ...
AMap JS 高德地图，修改渲染图层层级
AMap高德地图,修改渲染图层层级问题官网方法手动方法更改层级演示最后问题前端使用 AMap JS 高德地图时,覆盖物绘制线条(AMap.Polyline),会覆盖住下方的路段名称,路段 ...
arcgis更改图层坐标系_以图层的形式添加 x,y 坐标数据
除了 shapefile 等数据源,还可以将包含地理位置的表格数据以 x,y 坐标的形式添加到地图中.如果表中也包含 z 坐标(例如,高程值),则可以将表格数据作为 3D 内容添加到 globe 或 ...
VB.net 调用添加图层实现AutoCad增加图层的代码效果
''调用添加图层的指令<CommandMethod("AddLayer")>Public Sub AddLayer()Dim db As Database = Host ...
微信小程序使用echarts/数据刷新重新渲染/图层遮挡问题
微信小程序使用echarts/数据刷新重新渲染/图层遮挡问题 1.微信小程序使用echarts,首先下载echarts并导入小程序项目中,因小程序后期上线对文件大小有要求,所以建议进行定制下载导入可减 ...
Chrome 渲染流水线演化的未来
摘要:前段时间我写了一篇文章浏览器渲染流水线解析与网页动画性能优化,对目前 60 左右版本的 Chrome 的渲染流水线进行解析,文末也讨论了当前渲染流水线的一些不足和未来演化的方向. 当前的渲染流水 ...
ArcGIS API For JavaScript（8）之使用动态图层dynamicLayers实现多图层合并截图
场景还原: 定位某个矢量图斑范围面,过滤展示该图斑,以图斑为中心,截图图斑周边并附带影像底图的截图. 在前端要实现地图截图,首先想到的是使用arcgis rest api中的export接口,这是没问 ...
Serverless 实战——使用 Rendertron 搭建 Headless Chrome 渲染解决方案
为什么需要 Rendertron? 传统的 Web 页面,通常是服务端渲染的,而随着 SPA(Single-Page Application) 尤其是 React.Vue.Angular 为代表的前端 ...

html怎么添加图层,html – Chrome渲染图层 – 创建条件？

html怎么添加图层,html – Chrome渲染图层 – 创建条件？相关推荐

最新文章

热门文章