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 的相关说明.大家可以对 ...
随机推荐
- python基础:数据类型二
一.元组类型 二.字典类型 三.集合 一.元组类型 # 什么是元组: 元组就是一个不可变的列表 # ======================================基本使用======== ...
- golang shell 交叉编译
#!/usr/bin/env bash set -e uname_s=`uname -s | awk '{print tolower($0)}'` uname_m=`uname -m` timeTag ...
- LoadRunner(7)
一.参数化策略 1.Select next row(How? 如何取?)取值方式 选择下一行 1)Sequential:顺序的 每个VU都从第一行开始,顺序依次向下取值: 数据取完可以从头循环重复使用 ...
- ShedLock日常使用
首发于个人博客:ShedLock日常使用 场景模拟 定时器Scheduler在平时使用比较频繁,比如定时数据整理,定时向客户发送问候信息等...,定时任务的配置比较简单,比如在springboot中, ...
- C#实现异步阻塞TCP(Send,Receive,Accept,Connect)
1.类 (1)服务器端操作类 public class TcpServiceSocket { //接收数据事件 public Action<Socket, string> recvMess ...
- 手摸手教你让Laravel开发Api更得心应手
https://www.guaosi.com/2019/02/26/laravel-api-initialization-preparation/ 1. 起因 随着前后端完全分离,PHP也基本告别了v ...
- js 获取json对象的 键 和 值
直接上图 结果:
- 用node.js读写文件
node.js没有二进制数据类型,却提供了类似字节数组的“流“数据类型,着一种数据类型在文件系统模块中频频出现 node.js打开文件 fs = require('fs'); console.log( ...
- Java8-Stream-No.09
import java.util.Arrays; public class Streams9 { public static void main(String[] args) { Arrays.asL ...
- mysql慢查询配置(5.7)
刚装了Windows版mysql,想开启慢查询日志. 修改D:\mysql-5.7.23-winx64下my.ini配置文件,添加: [mysqld]slow_query_log = onslow_q ...