回流和重绘

2019-08-14 10:30:53来源:博客园 阅读 ()

一  概念

     什么是回流? 回流也叫重排(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>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物!</title>
<meta name="description" content="京东JD.COM-专业的综合网上购物商城、数码通讯、电脑、家居百货、服食品等数万个品牌优质商品.便捷、诚信的服务,为您提供愉悦的网上购物体验!" />
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />

<title></title>具有不可替代性,搜索引擎了解网页的入口,一定要写
meta中的 description关键字,网站说明,说明这个网站是做什么的。 有很多搜索引擎是根据meta中的描述部分作为搜索结果的“内容摘要” 所以一定要写
meta中的 keywords 里面写的是页面的关键词,也是搜索引擎的关注点之一。 也要写。。。。。。。
使用div>h1>a这种结构
  <div class="logo">
    <h1>
      <a href="#" title="京东网">
             京东<!-- 这里的字不能删除 ,起到网站优化作用 -->
      </a>
    </h1>
  </div>
 
  在写html时,使用 div>h1>a 这种结构有优化作用,比如 上面的logo区域,a标签里面的字也不要删除,可以使用text-indent:-99999(首行缩进进行隐藏),这样做可以启动搜索优化,可以使自己的网站靠前一点

 

 

   

 


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

标签:wordQ文件HTML使用索引

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

上一篇:vue路由传参的三种方式

下一篇:js 对 只包含简单类型数据的对象 为元素 组成的数组 进行去重