display:none和visibility:hidden的区别 // 1、空间占据 display:none;// 隐藏的元素不占文档流 visibility:hidden;// 隐藏的元素空间存在(占茅坑、不拉屎) // 2、回流和重绘(reflow/repaint) display:none ...
分类：
Web程序 时间：
2020-04-09 19:10:21
阅读次数：
126
重绘（Repaint)和回流（Reflow） 什么是回流 通过构造render tree，我们将可见DOM节点以及它对应的样式结合起来，可是我们还需要计算它们在设备视口(viewport)内的确切位置和大小，这个计算的阶段就是回流。 当render tree中的一部分(或全部)因为元素的规模尺寸，布 ...
分类：
其他好文 时间：
2020-04-08 12:29:54
阅读次数：
101
display: none 把一个元素隐藏，同时去除了宽高，也就是在文档流中没有了元素的位置，但是会被加载 会产生回流和重绘 不会被子元素继承，但是父元素都不在了，子元素自然也就不会显示了 visibility: hidden 把一个元素隐藏，但不同的是该元素在文档流中依然占有原来的位置，同样是被加 ...
分类：
其他好文 时间：
2020-04-07 22:35:25
阅读次数：
74
尽量使用css3动画，开启硬件加速 适当使用touch时间代替click时间 避免使用css3渐变阴影效果 可以用transform: translateZ(0) 来开启硬件加速 不滥用float。float在渲染时计算量比较大，尽量减少使用 不滥用web字体。web字体需要下载，解析，重绘当前页面 ...
分类：
移动开发 时间：
2020-04-06 17:34:37
阅读次数：
72
``` 重绘:当元素的一部分属性发生改变， 如外观、背景、颜色等不会引起布局变化， 只需要浏览器根据元素的新属性重新绘制， 使元素呈现新的外观叫做重绘。 重排（回流）:当render树中的一部分或者全部因为大小边距等问题发生改变而需要DOM树重新计算的过程 所以简单的来说就是。不会引起布局的变化，叫... ...
分类：
其他好文 时间：
2020-04-05 18:45:35
阅读次数：
66
1、定义 虚拟dom就是一个简单的对象，包含标签名（tag）、属性（attr）、子元素（children），通过js操作virtual DOM，最终映射到真实的dom上。 2、为什么要用虚拟dom： 频繁地操作dom，会造成页面的回流和重绘，增加性能开销，降低页面的渲染速度。 把dom的操作放到js ...
分类：
其他好文 时间：
2020-04-03 23:30:09
阅读次数：
112
document.write只能重绘整个页面，innerHTML可以重绘页面的一部分。 1. ducument.write使用举例html文档： <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/h ...
分类：
Web程序 时间：
2020-04-01 16:34:02
阅读次数：
109
联系：都可以使元素不可见 区别： 1. ;会让元素完全从渲染树中消失，渲染的时候不占据任何空间； ;不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见 2. ;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示 是继承属性，子孙节点消失由于继承了 ，通过设置 ...
分类：
其他好文 时间：
2020-03-25 21:45:18
阅读次数：
147
|方法|是否占据空间|是否响应事件|补充说明| |: |: |: |: | | |否|否|会引起回流和重绘| | |是|否| | | |是|是|会引起重绘| | 将元素移除可见区域|是| | | | 将元素缩放为 0 尺寸|是|否| | | 层级调低的同时在同样的位置上用其他元素覆盖|是|否| | ...
分类：
其他好文 时间：
2020-03-23 14:59:42
阅读次数：
76
影响页面渲染速度主要有：reflow(回流)和repaint(重绘) reflow(回流)： 页面为什么会慢？那是因为浏览器要花时间、花精力去渲染，尤其是当它发现某个部分发生了点变化影响了布局，需要倒回去重新渲染， 该过程称为reflow（回流）。reflow 几乎是无法避免的。现在界面上流行的一些 ...
分类：
其他好文 时间：
2020-03-21 11:26:09
阅读次数：
65
