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前端性能优化-重绘与回流的更多相关文章

  1. web前端性能优化指南(转)

    web前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网络 ...

  2. Web前端性能优化的9大问题

    1.请减少HTTP请求基本原理:在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出.一个正常HTTP请求的流程简述:如在浏览器中输入&qu ...

  3. web前端性能优化指南

    web前端性能优化指南 web前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loadin ...

  4. Web前端性能优化进阶——完结篇

    前言 在之前的文章 如何优化网站性能,提高页面加载速度 中,我们简单介绍了网站性能优化的重要性以及几种网站性能优化的方法(没有看过的可以狂戳 链接 移步过去看一下),那么今天我们深入讨论如何进一步优化 ...

  5. web前端性能优化的技巧

    1. 请减少HTTP请求 基本原理: 在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出. 一个正常HTTP请求的流程简述:如在浏览器中输 ...

  6. Web前端性能优化教程05:网站样式和脚本

    本文是Web前端性能优化系列文章中的第五篇,主要讲述内容:网站样式和脚本代码的放置位置.使用外部javascript和css.完整教程可查看:Web前端性能优化 一.将样式表放在顶部 可视性回馈的重要 ...

  7. WEB前端性能优化:HTML,CSS,JS和服务器端优化

    对前端开发工程师来说,前端性能优化的重要性是不言而喻的,最为大家所知的是YSLOW的23条优化规则,在我的理解中,性能优化不纯粹是指用户访问网站的速度,也包括开发的效率,这里我总结下我理解中的WEB前 ...

  8. WEB前端性能优化小结

    转:http://www.gafish.net/archives/1514 对前端开发工程师来说,前端性能优化的重要性是不言而喻的,最为大家所知的是YSLOW的23条优化规则,在我的理解中,性能优化不 ...

  9. Web 前端性能优化相关内容解析

    Web 前端性能优化相关内容,来源于<Google官方网页载入速度检测工具PageSpeed Insights 使用教程>一文中PageSpeed Insights 的相关说明.大家可以对 ...

随机推荐

  1. 六:MVC数据建模(增删改查)

    今天我们来学习mvc增删改查等操作(试着结合前面学习的LINQ方法语法结合查询) 我创建了一个car的数据库,只有一个Cars表 表里面就几个字段 插入了一些数据 想要创建一个ADO.NET实体数据模 ...

  2. QQ气泡效果剖析

    对于QQ汽泡效果我想不用多说了,都非常的熟悉,而且当时这效果出来简直亮瞎眼了,挺炫的,这里再来感受下: 而这次只实现单个汽泡的效果,并不涉及到加入Listview上的处理,一步步来,先上一下最终这次要 ...

  3. elasticsearch联想加搜索实例

    //搜索框具体的ajax如下: <form class="form-wrapper cf"> <img src="__PUBLIC__/Home/img ...

  4. 使用Xcode Instruments定位APP稳定性问题

    Xcode Instruments提供了各种各样的工具用来定位APP的各种稳定性问题.这里简单总结几个问题: 1. 内存泄漏 Xcode->Open Developer Tools->In ...

  5. ssh推送安装mysql脚本

    [root@tianyun project]# vim mysql_install_1.sh #! /usr/bin/env bash # mysql install 1 # by tianyun w ...

  6. 12 canvas 画布 - 基础

    二.线条的绘制和填充 在canvas中,各个图像绘制代码可以通过beginPath()和closePath()这两个函数进行包裹,主要用于分割各个画图,表示开始和结束.线条的绘制主要调用方法是move ...

  7. $ python manage.py makemigrations You are trying to add a non-nullable field 'name' to course without a default; we can't do that (the database needs something to populate existing rows). Please selec

    问题: $ python manage.py makemigrationsYou are trying to add a non-nullable field 'name' to course wit ...

  8. Java项目出现的问题--学习--SSM

    01 反向工程正常运行但是没有出现应该有的包 进行反向工程时记得要刷新一下才能看到的 03 复制包只有当前目录的包,目录下的文件不包含 当sec下的包以hierarcical形式排布时复制只能复制当前 ...

  9. 通俗理解数字签名,ssl数字证书和https

    前言 最近在开发关于PDF合同文档电子签章的功能,大概意思就是在一份PDF合同上签名,盖章,使其具有法律效应.签章有法律效应必须满足两个条件: 能够证明签名,盖章者是谁,无法抵赖 PDF合同在签章后不 ...

  10. IntelliJ 如何显示代码的代码 docs

    希望能够在 IntelliJ 代码上面显示方法的 docs. 如何进行显示? 你可以使用 Ctrl + Q 这个快捷键来查看方法的 Docs. https://blog.ossez.com/archi ...