页面 渲染 回流 测试 笔记
页面重绘(repaints),回流(reflow),网上已经有很多介绍了,以前也只是看看,并没有仔细理解,所以现在留点笔记
一些有用的连接
http://www.zhangxinxu.com/wordpress/2009/10/attention-reflow-to-make-web-faster/
http://www.zhangxinxu.com/wordpress/2010/01/%E5%9B%9E%E6%B5%81%E4%B8%8E%E9%87%8D%E7%BB%98%EF%BC%9Acss%E6%80%A7%E8%83%BD%E8%AE%A9javascript%E5%8F%98%E6%85%A2%EF%BC%9F/
首先,要大概知道浏览器怎么渲染成页面的
文档初次加载时,浏览器引擎会解析HTML文档来构建DOM树,之后根据DOM元素的几何属性构建一棵用于渲染的树。渲染树的每个节点都有大小和边距等属性,类似于盒子模型(由于隐藏元素不需要显示,渲染树中并不包含DOM树中隐藏的元素)。当渲染树构建完成后,浏览器就可以将元素放置到正确的位置了,再根据渲染树节点的样式属性绘制出页面。
反正就是要知道盒模式,才方便理解重绘和回流
重绘(repaints)
当render tree中的一些元素需要更新属性,而这些属性只是影响元素的外观,风格,而不会影响布局的,比如background-color。则就叫称为重绘
这是从网上抄来的一句话,还是很好理解的,改变外观,不改变布局,不影响其他的dom
回流(reflow)
这个是重点
回流(reflow)这个名词指的是网络浏览器为了重新渲染部分或全部的文档而重新计算文档中元素的位置和几何结构的过程。因为回流(reflow)在浏览器中属于一种用户主导的模块化操作,所以知道如何去改进回流(reflow)时间以及知道各种文档属性(DOM节点深度,css的渲染效率,各种各样的样式改变)对回流(reflow)时间的影响对于开发人员讲是很有帮助的。有时候,即使仅仅回流一个单一的元素,也可能要求它的父元素以及任何跟随它的元素也产生回流
从网上抄的,按我的理解就是回流是很容易操作出来的,而且很容易影响性能,所以我们要多留意,尽量不要引起回流,
那它为什么会影响性能了?
一个元素的回流导致了其所有子元素以及DOM中紧随其后的祖先元素的随后的回流.
这句话也是网上抄的.我的理解是回流不仅仅影响的是自己,还会影响到其他元素的重新布局,计算(包括样式的计算)
反正最后总结一句话,就是回流影响很大,要理解它,尽量少让它发生
哪些操作会产生回流了?
1.调整窗口大小(Resizing the window)
2.改变字体(Changing the font)
3.增加或者移除样式表(Adding or removing a stylesheet)
4.内容变化,比如用户在input框中输入文字(Content changes, such as a user typing text in an input box)
5.激活 CSS 伪类,比如 :hover (IE 中为兄弟结点伪类的激活)(Activation of CSS pseudo classes such as :hover (in IE the activation of the pseudo class of a sibling))
6.操作 class 属性(Manipulating the class attribute)
7.脚本操作 DOM(A script manipulating the DOM)
8.计算 offsetWidth 和 offsetHeight 属性(Calculating offsetWidth and offsetHeight)
9.设置 style 属性的值 (Setting a property of the style attribute)
10.fixed定位的元素,在拖动滚动条的时候会一直回流
网上抄的,确实是可以会引起了回流
为什么是可以了,因为修改样式,可能只是修改背景,颜色什么的,可能只是重绘,不一定就是回流
我们应该怎么避免回流了(或者说是尽量少的引起回流)?
1. 减少不必要的DOM深度。因为无论你改变DOM节点树上任何一个层级都会影响节点树的每个层级——从根结点一直到修改的子节点。不必要的节点深度将导致执行回流时花费更多的时间。
2. 精简css,去除没有用处的css
3. 如果你想让复杂的表现发生改变,例如动画效果,那么请在这个流动线之外实现它。使用position-absolute或position-fixed来实现它。
4. 避免不必要的复杂的css选择符,尤其是使用子选择器,或消耗更多的CPU去做选择器匹配。
5. 既然计算offsetWidth也会引起回流,那么就拿一个变量保存它
6. 一次性修改多个样式,使用cssText ,或者直接加个className
注意:回流必将引起重绘,而重绘不一定会引起回流。
如何测试重绘和回流了?
我看网上说有一款测试工具Speed Tracer,但是在chrome web store里面已经找不到了!
然后我看到了一篇文章介绍查如何查看页面渲染的 地址 http://www.ghugo.com/chrome-rendering-tools-1/
chrome Opera可以这么测试,ff,safari不知道怎么弄
它主要是能让用户看到页面发生了渲染,并且渲染面积有多大(但是好像区分不了重绘和回流)
如何操作?
1.调出开发者管理工具(f12)
2.按esc键
3.选择Rendering选项卡
4.勾选Show paint rectangles选项卡
如图所示
操作一下,会发现,如果某个元素发生了渲染,会出现绿色的框,显示渲染的面积
这个可以来测试下上面说的一些产生回流和渲染
1.fixed定位,拖动滚动条会一直回流
测试发现确实一直在渲染,但是还好只是对自己渲染,不影响其他的dom
2.调整窗口大小,缩放浏览器
测试发现整个页面都在渲染,这个应该是影响比较大的回流了
3.删除元素
没删除之前
删除了
测试发现,会影响之前他后面的元素,但是不会影响之前的元素
4.改变字体
会影响本身以及他下面元素的渲染
5.触发hover
如果只是重绘,只会影响到自己(比如改变背景,字体颜色)
如果是回流,会影响到他下面的元素都要回流(比如改变字体,高度)
6.计算offsetWidth和offsetHeight
这个没测试出来页面有渲染 -_-!
测试回流重绘是个麻烦的事情,暂时没有找到一款工具能够分清重绘和回流的
但是如果只是要查看页面渲染的情况,chrome的Rendering就足够了
信息来源:http://www.cnblogs.com/wtcsy/p/reflow.html
转载于:https://www.cnblogs.com/sunshq/p/4186635.html
页面 渲染 回流 测试 笔记相关推荐
- 前端开发这么多年,你真的了解浏览器页面渲染机制吗?
作者 | 浪里行舟 前言 浏览器的内核是指支持浏览器运行的最核心的程序,分为两个部分的,一是渲染引擎,另一个是JS引擎.渲染引擎在不同的浏览器中也不是都相同的.目前市面上常见的浏览器内核可以分为这四种 ...
- html页面渲染vue组件,Vue组件页面渲染的基本流程
html: 组件页面渲染的基本流程 main.js: import Vue from "vue"; import Home from "./home.vue"; ...
- 同一个页面生成多个sessionid_web页面渲染(一)
作为开发者,我们经常会面临一些影响我们整个网站结构的决定,其中web开发者一定要做的核心决定之一就是在应用程序中实现逻辑和渲染的位置.这可能比较难,因为有很多不同的方式来构建一个网站. 我们在这一领域 ...
- 前端性能优化:当页面渲染遇上边缘计算
简介: 当前几种常见的前端性能优化方案仍然不可避免地会存在一些缺点.本文在 ESI (Edge Side Include) 的基础上,提出了一种新的优化思路:边缘流式渲染方案(ESR),即借助 CDN ...
- 5渲染判断_Vue页面渲染中key的应用实例教程
引言 在前端项目开发过程中,el-table展示的结果列使用组件形式引入,其中某些字段通过:formatter方法转码,结果栏位的字段显示/隐藏控制也使用组件形式引入,前端在控制字段显示属性时,发现码 ...
- 前端开发这么多年,你真的了解浏览器页面渲染机制吗? | 技术头条
作者 | 浪里行舟 前言 浏览器的内核是指支持浏览器运行的最核心的程序,分为两个部分的,一是渲染引擎,另一个是JS引擎.渲染引擎在不同的浏览器中也不是都相同的.目前市面上常见的浏览器内核可以分为这四种 ...
- 阿里p7大手子测试笔记:一线互联网大厂面试问题吃透,巧过面试关
前言 金九银十刚过去,有一部分朋友在这期间肯定经历了一番大厂面试的洗礼,不知道大家是经受住了考验如愿以偿了,还是折戟沉沙无功而返呢? 身边已经有技术大佬顺利通过了阿里P6/P7的面试,在30岁之前成功 ...
- 浏览器页面渲染机制-前端原理剖析
浏览器页面渲染机制 前言 浏览器的内核是指支持浏览器运行的最核心的程序,分为两个部分,一是渲染引擎,另一个是JS引擎.渲染引擎在不同的浏览器中也不是都相同的.目前市面上常见的浏览器内核可以分为这四种: ...
- 提高Web页面渲染速度的7个技巧
用户在访问一个Web网站(页面)或应用时,总是希望它的加载速度快,功能流畅.如果过于慢,用户就很有可能失去耐心而离开你的Web网站或应用.作为开发人员,给自己应用提供更快的访问速度,提供很好的用户体验 ...
最新文章
- 聊一聊 Spring 中的线程安全性
- Linux命令:dd、iostat、sar
- 安卓java音乐播放器下一曲_Android实现简单音乐播放器(MediaPlayer)
- 【WPF on .NET Core 3.0】 Stylet演示项目 - 简易图书管理系统(2)
- WTL 学习博文地址
- vue获取麦克风_vue使用recorder.js实现录音功能
- 手机QQ Hybrid 的架构演进
- 常用Android模拟器的默认监听端口(转载)
- redhat 生产环境版本选择
- 1688-API接口安全详解
- WinDriver 驱动安装err e000024b,err e000022f解决办法
- DEV中右键菜单如何只在非空单元格上显示?
- 面试最后问你期望薪酬_我不能问你的薪水历史吗? 谢谢!
- javacc jjtree 写法 以及 jj写法 基本语法 以及应用
- 孩子写作业用护眼台好吗?光照柔和的护眼灯有效缓解眼疲劳
- .NET工具篇(二)—GACUtil
- Doclist压缩方法简介
- 向武 清华大学 计算机,哥哥保送弟弟全市第二 双胞胎如何同时上清华?
- Dharma家族变体,.adobe后缀勒索病毒解密
- 用python玩转数据作业答案_大学mooc2020年用Python玩转数据作业答案
热门文章
- JVM中OutOFMemory和StackOverflowError异常代码
- 【Hadoop Summit Tokyo 2016】Hivemall: Apache Hive/Spark/Pig 的可扩展机器学习库
- 没有人会告诉您乘坐飞机时的几个事实 但是您一定要知道
- T-Sql(八)字段索引和数据加密
- 汉语编程能获得诺贝尔奖
- 工作中让你提建议怎么办?
- SpringBoot出现Request method ‘GET‘ not supported
- Intellij关闭自动更新
- ubuntu20.04中gedit使用markdown插件(没搞定)
- 真实HDFS集群启动后master的jps没有DataNode