以前在写网页的时候很少关注到网站的性能,时间进入今天,一个网站不在是单纯几张图片或者几段文字,组成一个网站,今天的用户更加注重网站体验,所以写一个页面的时候网站的性能优化变得格外重要,作为一个前端的开发人员,一定的要对网站的每一个页面做到最大性能优化,今天的学习了一下如果提高网站性能重要的知识:
回流与重绘
----------------------------------------让你的网页快点在快点-----------------------------------------------
html中的每个tag都是dom 树中的1个节点,document(根节点)。
回流:
当视图中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建。这就叫着回流(也可以叫做重新布局)
重绘:
当视图中的有些元素需要更新属性,而这些属性只是影响元素的外观,风格,而不会影响布局的,就叫着重绘
这里提到重要的一点: 回流一定会重绘,而重绘未必回流。
会产生回流或者重绘的操作:
1、添加、删除元素(回流+重绘)
2、隐藏元素 display:none,(回流+重绘),visibility:hidden(重绘,不回流)
3、移动元素:改变top,left,或者移动元素到另外1个父元素中(重绘+回流)
4、对style的操作()
5、改变浏览器的大小(回流+重绘)
浏览器在处理回流和重绘的时候,会把所有的引起回流、重绘的操作放入一个队列里面,一定数量或者时间间隔就会flush对象,这样就会让多次的回流、重绘变成一次回流重绘
减少回流、重绘
1.不要改变一个元素的样式属性,最后直接改变类名,类名是预先定义好的样式,不是动态的,你要动态的改变一些样式,可以使用字符串拼接形式进行改变
示例:
// 不好的写法var left = 1;var top = 1;el.style.left = left + "px";el.style.top = top + "px";// 比较好的写法 el.className += " className1";// 比较好的写法 el.style.cssText += "; left: " + left + "px; top: " + top + "px;";
2.让要操作的元素的进行“离线处理”,
3.不要经常访问会引起浏览器fiush队列的属性,如果确实要访问,可以先对变量进行缓存,应聘哪的时候就可以直接读取变量
示例:
// 别这样写,大哥for(循环) { el.style.left = el.offsetLeft + 5 + "px"; el.style.top = el.offsetTop + 5 + "px";}// 这样写好点var left = el.offsetLeft,top = el.offsetTop,s = el.style;for(循环) { left += 10; top += 10; s.left = left + "px"; s.top = top + "px";}
4.一定要思考清除,操纵元素会影响到多少个节点,尽量减少对节点的影响,影响越多,就越耗费资源、