死活没生成layerForScrollingContent的解决办法

先挖个坑, 之后再寻找原因

问题是这样的一个可以滚动的页面, 但是死活都没有生成出layerForScrollingContent , 不知道为什么, 即便给scroll的contianer添加will-change:scroll;也没有用, 如果添加了will-change:transform;,则会生成containerscrollBar的layer , 就是不生成content的layer

那么既然没有生成解决办法就是手动生成, 做法很简单 , 在需要滚动的内容包一个div, 并且设置will-change:transform; 如图二

!图一](http://upload-images.jianshu.io/upload_images/252050-90839f87e940e06f.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)

还是上动图清楚看到区别吧~

很明显的区别就是没有paint的触发

没有手动添加一个layer的时候

手动添加layer的时候

从单位上就可以知道有多少倍的区别了

不过如果对比那些默认生成layerForScrollingContent还有有些区别的, 主要是在一帧开始就开始渲染了 , 其他的不好对比因为还没找到没有生成layerForScrollingContent的原因, 这是另外的页面来的 ( 注: 虚线是这一帧的开始

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏CaiRui

Zabbix监控详解

Zabbix是什么 Zabbix 是由Alexei Vladishev创建,目前由Zabbix SIA在持续开发和支持。 Zabbix 是一个企业级的分布式开源...

8198
来自专栏Java技术栈

8条关于Web前端性能的优化建议

一般网站优化都是优化后台,如接口的响应时间、SQL优化、后台代码性能优化、服务器优化等。高并发情况下,对前端web优化也是非常重要的。 下面说说几种常见的优化措...

3325
来自专栏散尽浮华

ngx_pagespeed-nginx前端优化模块介绍

ngx_pagespeed是Nginx的一个扩展模块,借助pagespeed,为Nginx网站服务器提速。主要的功能是针对前端页面而进行服务器端的优化,对前端设...

22410
来自专栏andychai

前端静态资源缓存策略

页面加载提速是战场,首当其冲要优化的就是 静态资源(js|css) 的加载速度。我们小组去年基于Vue开发了一个积分商城单页面应用。本文旨在与大家分享在单页应用...

1127
来自专栏进击的君君的前端之路

从 URL 输入到页面展现发生了什么

1414
来自专栏性能与架构

eBay 对静态资源加载的优化

对于页面中引用 JS CSS 静态资源的处理,eBay 之前的主要模式是打包资源 每个页面中所需要的 JS 都打包为一个 JS 文件,放在页面的底部加载,CSS...

3258
来自专栏运维一切

ceph rbd resize之后文件系统的调节

###ceph的rbd是可以进行调节大小的,但是调节需要进行一些操作,否则你看不到调节之后的效果,等于没调节,因为rbd就相当一块硬盘,但是文件系统一经初始化,...

1001
来自专栏BestSDK

37个TOP实例命令,超过一半你肯定都没见过

1. Top 命令输出 首先,让我们了解一下输出。top命令会显示系统的很多信息。我们需要理解不同部分输出的意义:默认运行时,top命令会显示如下输出: ? 前...

3136
来自专栏企鹅号快讯

大型网站技术架构:Web 前端性能优化

浏览器访问渲染优化 减少 http 请求数 http 协议是无状态的应用层协议,每次 http 请求都会建立新的通信链路,并且在服务端,每个 http 连接都会...

1846
来自专栏令仔很忙

Nginx反向代理

客户端访问数据的时候,不会直接与目标服务器进行连接,而是所有的请求都发送到代理(Proxy)服务器,然后代理服务器会去根据你的请求去访问相应的服务器,并最终返...

1022

扫码关注云+社区