Web前端性能优化-重绘与回流
1、什么是重绘与回流
Render tree 的重新构建就叫回流。当布局和几何属性改变时就需要回流,鼠标移动到图片 图片变大 也会触发回流。回流 能避免就避免
Render tree 改变外观、风格 而不影响布局的时候,就叫重绘
重绘与回流的关系:回流会引起重绘 重绘不一定会引起回流
2、避免重绘回流的两种方法
什么会引起回流和重绘
触发页面布局从而触发重绘的:
(1) 盒子模型属性
(2) 定位属性和浮动
(3) 改变节点内部文字结构
如下图:
只触发重绘不触发回流的属性:
优化方法:
(1) 避免使用触发重绘回流的css属性
(2) 将容易产生重绘的元素 独立到一个图层 。控制重绘回流影响的范围 如gif图 。但是注意新建图层会耗资源
3、优化点
(1) 用translate替换top
(2) 用opacity替换visibility
(3) 不要一条条的修改dom样式 而是写如一个class ,修改dom的className
(4) 把dom 离线 ,修改N次再显示
(5) Dom节点的属性值不要再循环里循环改变
(6) 不要使用table ,table部分的改变会引起整个table的重绘。而Div只会影响所改变之后的,不会影响之前的
(7) 对于动画要告知chrome新建图层。
(8) 使用GPU加速。 GPU是一个并行处理单元 顶点加速器 纹理加速器 ,但是cpu 到gpu传输需要时间。多个元素启用GPU加速,大量时间会花在图层合成。
Web前端性能优化-重绘与回流的更多相关文章
- web前端性能优化指南(转)
web前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网络 ...
- Web前端性能优化的9大问题
1.请减少HTTP请求基本原理:在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出.一个正常HTTP请求的流程简述:如在浏览器中输入&qu ...
- web前端性能优化指南
web前端性能优化指南 web前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loadin ...
- Web前端性能优化进阶——完结篇
前言 在之前的文章 如何优化网站性能,提高页面加载速度 中,我们简单介绍了网站性能优化的重要性以及几种网站性能优化的方法(没有看过的可以狂戳 链接 移步过去看一下),那么今天我们深入讨论如何进一步优化 ...
- web前端性能优化的技巧
1. 请减少HTTP请求 基本原理: 在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出. 一个正常HTTP请求的流程简述:如在浏览器中输 ...
- Web前端性能优化教程05:网站样式和脚本
本文是Web前端性能优化系列文章中的第五篇,主要讲述内容:网站样式和脚本代码的放置位置.使用外部javascript和css.完整教程可查看:Web前端性能优化 一.将样式表放在顶部 可视性回馈的重要 ...
- WEB前端性能优化:HTML,CSS,JS和服务器端优化
对前端开发工程师来说,前端性能优化的重要性是不言而喻的,最为大家所知的是YSLOW的23条优化规则,在我的理解中,性能优化不纯粹是指用户访问网站的速度,也包括开发的效率,这里我总结下我理解中的WEB前 ...
- WEB前端性能优化小结
转:http://www.gafish.net/archives/1514 对前端开发工程师来说,前端性能优化的重要性是不言而喻的,最为大家所知的是YSLOW的23条优化规则,在我的理解中,性能优化不 ...
- Web 前端性能优化相关内容解析
Web 前端性能优化相关内容,来源于<Google官方网页载入速度检测工具PageSpeed Insights 使用教程>一文中PageSpeed Insights 的相关说明.大家可以对 ...
随机推荐
- 【Day4】3.urllib模块使用案例
import urllib.request as ur ret = ur.urlopen('https://edu.csdn.net/').read() with open('edu.html','w ...
- linux安装vsftpd后无法登陆
安装完成后在主机上登陆时,不管是输入用户,还是匿名都无法登陆 经过检查,发现是因为/etc/hosts.deny禁止了所有ip访问 将hosts.deny中的all:all删除,或者在/etc/hos ...
- 一图一知-TS之泛型
- 浅谈矩阵变换——Matrix
矩阵变换在图形学上经常用到.基本的常用矩阵变换操作包括平移.缩放.旋转.斜切. 每种变换都对应一个变换矩阵,通过矩阵乘法,可以把多个变换矩阵相乘得到复合变换矩阵. 矩阵乘法不支持交换律,因此不同的变换 ...
- Android之Json
Servlet部分 public class JasonAction extends HttpServlet { private JsonService service; public void do ...
- Apache、nginx 、lighttpd性能比较
Apache.nginx .lighttpd性能比较 1. web服务器简介 1. lighttpd Lighttpd是一个德国人领导的开源软件,其根本的目的是提供一个专门针对高性能网站,安全.快速. ...
- 数据结构系列文章之队列 FIFO
转载自https://mp.weixin.qq.com/s/ILgdI7JUBsiATFICyyDQ9w Osprey 鱼鹰谈单片机 3月2日 预计阅读时间: 6 分钟 这里的 FIFO 是先入先出 ...
- 内置对象:Math
JavaScript内置函数Math.random()自定义封装函数:1,Math.floor(Math.random()*(b-a+1)+a) 随机生成a到b之间的整数. 也可以写成:Math.f ...
- PHP mysqli_fetch_fields() 函数
mysqli_fetch_fields() 函数返回结果集中代表字段(列)的对象的数组. 返回结果集中代表字段(列)的对象的数组,然后输出每个字段名称.表格和最大长度: <?php // 假定数 ...
- 封装Vue组件的一些技巧
封装Vue组件的一些技巧 本文同步在个人博客shymean.com上,欢迎关注 写Vue有很长一段时间了,除了常规的业务开发之外,也应该思考和反思一下封装组件的正确方式.以弹窗组件为例,一种实现是在需 ...