网页性能优化

（这些事废话大家随意ha）之前一直不太注意这方面的需求，而且项目代码量也不是很多看起来好像没什么前端性能方面的问题，加之公司项目方面也没太要求，所以我就似偷懒了嘛，氮素最近面试还是总结下吧hhhhh

首先造成前端性能方面的东西从最基本的页面渲染方面那就是重排和重绘

“重绘"不一定需要"重排”，“重排"必然导致"重绘”。
参考博客看这里原文链接

例如：一般来说，样式的写操作会造成页面的重新渲染

offsetTop/offsetLeft/offsetWidth/offsetHeight
scrollTop/scrollLeft/scrollWidth/scrollHeight
clientTop/clientLeft/clientWidth/clientHeight
getComputedStyle()

大家可自行试下哦

// bad
document.getElementsByTagName('div')[0].style.left = document.getElementsByTagName('div')[0].offsetLeft + 10 + "px";
 
// good
//var left = document.getElementsByTagName('div')[0].offsetLeft;
//document.getElementsByTagName('div')[0].style.left = left + 10 + "px";

合并操作	1. 多个读操作之后执行写操作如上面。 2. 操作样式可以统一操作类名
操作非真实dom	1. 可使用js完成对操作的DOM对象在统一插入到页面中。2. 使用虚拟DOM的脚本库，比如React等
改变操作dom的属性	1. position属性为absolute或fixed的元素，重排的开销会比较小，因为不用考虑它对其他元素的影响。2. 只在必要的时候，才将元素的display属性为可见，因为不可见的元素不影响重排和重绘。另外，visibility : hidden的元素只对重绘有影响，不影响重排。(这个可参考理解vue的v-show和v-if)
–	–
公共方法	window.requestAnimationFrame()，将读操作和写操作的重新渲染统统放到下一次重新渲染，通过减少渲染次数提高网页性能