页面渲染主要经过过程,具体介绍如下:
字节 → 字符 → 令牌 → 节点 → 对象模型
CSS树的生成和DOM树的生成基本是相同,如下
为什么会有CSS树
因为CSS关系也会有父子关系,就是css中常说的继承,一些样式如font-size等子元素会继承父级,所以会生成一套对应的CSS树和DOM树相对应。
通过上面的页面渲染介绍,很容易理解,重排就是重新布局页面结构,计算节点位置,而重绘就是绘制页面,只是一些样式如背景,颜色的变化等,不需要重新计算位置布局,所以 重排一定会导致重绘,但是重绘不一定导致重排。
导致页面重排主要有以下几点
上文中触发了四次重排,通过上文介绍,offsetTop,scrollTop,clientTop等属性的修改会触发重排,当浏览器获取DOM样式的时候立刻会执行一次重排,因为需要计算浏览器位置坐标,不会再继续观察下文是否还有DOM的操作,下文介绍浏览器渲染机制。
这种情况看似会触发四次重排,实际只会触发一次重排,现代浏览器基本都有渲染机制,浏览器会批量将样式修改一次性执行,批量修改完后再批量获取DOM位置,实际只触发一次。
等价于
通过上文,容易理解这种情况会触发两次重排,可以使用缓存(实际是分离读写)来优化。
这种情况会触发五次重排
避免设置大量的style属性,因为通过设置style属性改变结点样式的话,每一次设置都会触发一次reflow,所以最好是使用class属性实现元素的动画,设置position属性,最好是设为absoulte或fixed,脱离文档流,这样不会影响其他元素的布局。
事件委托原理:利用事件冒泡的特性,子元素都会冒泡到父元素上,当子元素如(li)元素都绑定事件时,可以只需绑定父元素(ul)来达到相同的效果,这样不仅减少了对dom的操作,减少重排或重绘,而且不用分配大量变量来保存dom,减少了内存。
委托
不要使用table布局,因为table中某个元素一旦触发了reflow,那么整个table的元素都会触发reflow。那么在不得已使用table的场合,可以设置table-layout:auto或者是table-layout:fixed这样可以让table一行一行的渲染,这种做法也是为了限制reflow的影响范围。
不要一个个修改属性,应通过一个class来修改
改为
参考文献
https://blog.csdn.net/b954960630/article/details/82317999
1、首先,打开VS页面,如果是英文版也没关系,操作是一样的。
2、点击左上角的文件,选择新建——网站。
3、在模版处,选择Visual C# ,再选择ASP.net空网站,最下面是放文件路径的地方。
4、打开后,点击解决方案资源管理器——右击你的项目——添加。
5、添加新建项目。
6、选择 HTML页面,下面是存放HTML页面的路径。
7、一个HTML页面就创建好了。在页面标签里面写入自己想在网页上现实的内容。
8、写好代码后点击三角形按钮,进行软件启动运行查看效果。就完成了。
1、直接贴图:在界面上贴一个gif动态等待效果图片
gif图片获取方式:网上找素材,会ps的可以自己制作
<img src="wait.gif" />
2、CSS3/SVG/HTML5 Canvas手动绘制等待效果:
这种效果:网上有很多类似素材,可以根据需要选择,或使用上述技术绘制
下面提供一个CSS3绘制的范例
<style>
.loading {
width:0
height:0
border-right:20px solid #fff
border-top:20px solid #000
border-left:20px solid #fff
border-bottom:20px solid #000
border-radius: 20px
-moz-border-radius: 20px
-webkit-border-radius: 20px
}
.loading {
animation: bganim 0.6s linear 0s infinite
-moz-animation: bganim 0.6s linear 0s infinite
-webkit-animation: bganim 0.6s linear 0s infinite
}
@keyframes bganim {
from { transform:rotate(0deg)} to { transform:rotate(360deg)}
}
@-moz-keyframes bganim {
from { -moz-transform:rotate(0deg)} to { -moz-transform:rotate(360deg)}
}
@-webkit-keyframes bganim {
from { -webkit-transform:rotate(0deg)} to { -webkit-transform:rotate(360deg)}
}
</style>
<label>CSS3效果</label>
<div class="loading"></div>
-------------------------------------------------
效果如下图:
运行机制很简单,先手动绘制一个静态的图,然后控制对应div进行360度旋转,即可实现
3、使用js等待效果插件(如:spin.js)
JS
-----------------------------------------------------
var opts = {
lines: 9,
length: 0,
width: 15,
radius: 20,
corners: 1,
rotate: 0,
direction: 1,
color: '#0101DF',
speed: 1,
trail: 34,
shadow: false,
hwaccel: false,
className: 'spinner',
zIndex: 2e9,
top: '50%',
left: '50%'
}
var target = document.getElementById('img_wait')
var spinner = new Spinner(opts).spin(target)
7
html
---------------------------------
<div id="img_wait"></div>