回流和重绘

一  概念

     什么是回流？ 回流也叫重排（reflow），当页面中的元素发生影响布局的变化，比如：改变宽高，修改显示影藏。页面需要重新布局，就会触发重排。 简单的说就是，页面布局改变，就会触发重排。

     什么是重绘（repaint）？ 页面中的元素样式发生改变，比如：背景颜色，背景图片，字体颜色的样式改变。 只要页面需要重新渲染，就会触发重绘。

     注意：  每个页面只要会发生一次  重排和重绘。

　　　　    重排一定会触发重绘

二 关于前端性能的优化 

     前端性能优化的关键在于 减少DOM操作  和   减少页面的重排重绘

     如何减少页面重排重绘呢？  想要减少重排重绘还要了解浏览器自带的优化，每个浏览器都是聪明的，浏览器都有自己的优化操作。每个浏览器都有一个  维护队列  ，它会把引起重排和重绘的操作放到维护队列中， 等 维护队列 中的操作到达一定数量或者到达一定的时间间隔， 浏览器就会清空这个维护队列，进行批量处理，这样就会减少重排和重绘的次数。　　注意：对应一些特殊的获取操作，为了保证获取数值的准确性，浏览器会提前清空维护队列，将其提前渲染。

　 所以想要减少重排和重绘，条件允许一定要减少获取操作

　 如： 01  在for循环中，尽量不要进行样式的获取操作（因为一获取就会flush(清空)浏览器维护的队列 ）

　　　  02  尽量少用sytle修改样式，通过添加class进行一次性修改样式

             03  使用 translate 代替 left/top等，（translate只会触发重绘，不会引起重排，可以减少一次重排的时间）

　　　  04  使用opacity代替visibility,改透明度渲染效率更高

             05  使用绝对定位或者固定定位(absolute  fixed),脱离文档流不会引起页面其它盒子的变化

             06  将大量需要重排操作的元素，进行display:none ，（专业术语是' 离线处理'）

这些是减少重排重绘的优化方法。

//  GPU 是图形处理器，使用3d属性可以触发gpu硬件加速。

移动端的优化可以给元素添加 3d属性（比如 transform: translateZ(0)），使用3d属性可以使手机开启gpu硬件加速，让手机可以最高性能的进行渲染。

　 关于优化还可以

　　　　使用css精灵图片，减少图片的张数，或者使用iconfont字体图标

　　　　减少ajax请求的次数，使用webpack打包

　　　　压缩/合并js和css代码，减少代码文件的个数和体积

   关于网站排名的优化

<title></title>具有不可替代性，搜索引擎了解网页的入口，一定要写
meta中的 description关键字，网站说明，说明这个网站是做什么的。 有很多搜索引擎是根据meta中的描述部分作为搜索结果的“内容摘要”  所以一定要写
meta中的 keywords 里面写的是页面的关键词，也是搜索引擎的关注点之一。  也要写。。。。。。。
使用div>h1>a这种结构

原文链接:https://www.cnblogs.com/javascript9527/p/11327587.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有