web页面的回流和重绘

更新日期: 2019-07-10阅读: 2.3k标签: web

一  概念

什么是回流? 

回流也叫重排(reflow),当页面中的元素发生影响布局的变化,比如:改变宽高,修改显示影藏。页面需要重新布局,就会触发重排。 简单的说就是,页面布局改变,就会触发重排。

什么是重绘(repaint)? 

页面中的元素样式发生改变比如:背景颜色,背景图片,字体颜色的样式改变。 只要页面需要重新渲染,就会触发重绘。

注意:  

每个页面只要会发生一次重排和重绘。
重排一定会触发重绘


二 关于前端性能的优化 

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

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

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

1  在for循环中,尽量不要进行样式的获取操作(因为一获取就会flush(清空)浏览器维护的队列 )
2  尽量少用sytle修改样式,通过添加class进行一次性修改样式
3  使用 translate 代替 left/top等,(translate只会触发重绘,不会引起重排,可以减少一次重排的时间)
4  使用opacity代替visibility,改透明度渲染效率更高
5  使用绝对定位或者固定定位(absolute  fixed),脱离文档流不会引起页面其它盒子的变化
6  将大量需要重排操作的元素,进行display:none ,(专业术语是' 离线处理')

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

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

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


关于优化还可以

使用css精灵图片,减少图片的张数,或者使用iconfont字体图标
减少ajax请求的次数,使用webpack打包
压缩/合并js和css代码,减少代码文件的个数和体积


关于网站排名的优化

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

<title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物!</title>
<meta name="description" content="京东JD.COM-专业的综合网上购物商城、数码通讯、电脑、家居百货、服食品等数万个品牌优质商品.便捷、诚信的服务,为您提供愉悦的网上购物体验!" />
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />
<title></title>
  <div class="logo">
    <h1>
      <a href="#" title="京东网">
             京东<!-- 这里的字不能删除 ,起到网站优化作用 -->
      </a>
    </h1>
  </div>
....

 在写html时,使用 div>h1>a 这种结构有优化作用,比如 上面的logo区域,a标签里面的字也不要删除,可以使用text-indent:-99999(首行缩进进行隐藏),这样做可以启动搜索优化,可以使自己的网站靠前一点  



链接: https://www.fly63.com/article/detial/4599

前端开发,页面加载速度性能优化,如何提高web页面加载速度

通过技术的角度,来探讨如何提高网页加载速度的方法和技巧,一个网站速度的访问快慢将直接影响到用户体验,对于我们开发来说是应该解决的。

web开发,关于XSS的介绍和案例分析

XSS攻击的全称Cross Site Scripting(跨站脚本攻击),为了避免和样式表CSS混淆而简写为XSS。XSS恶意攻击者往Web页面里插入恶意Script代码,当用户浏览该页之时,嵌入其中Web里面的Script代码会被执行,从而达到恶意攻击用户的目的。

web页面弹出遮罩层,通过js或css禁止蒙层底部页面跟随滚动

通过js或css禁止蒙层底部页面跟随滚动:pc端推荐给body添加样式overflow: hidden;height: 100%;移动端利用移动端的touch事件,来阻止默认行为,若应用场景是全平台我们要阻止页面滚动,那么何不将其固定在视窗(即position: fixed),这样它就无法滚动了,当蒙层关闭时再释放。

关于渐进式 Web 应用,你应该知道的一切

渐进式 Web 应用是利用现代浏览器的特性,可以添加到主屏幕上,表现得像原生应用程序一样的 Web 应用程序。

Web前端知识体系精简

Web前端技术由 html、css 和 javascript 三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言。而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知识点,因此对于初学者很难理清楚整个体系的脉络结构。

Web的26项基本概念和技术

Web开发是比较费神的,需要掌握很多很多的东西,特别是从事前端开发的朋友,需要通十行才行。今天,本文向初学者介绍一些Web开发中的基本概念和用到的技术,从A到Z总共26项,每项对应一个概念或者技术。

web浏览器基础知识【web前端】

Web浏览器的主要功能是展示网页资源,即请求服务器并将结果展示在窗口中。地址栏输入URL到页面显示经历的过程、浏览器的主要组件、浏览器渲染...

Web 前端中的增强现实(AR)开发技术

增强现实(以下简称 AR)浪潮正滚滚而来,Web 浏览器作为人们最唾手可得的人机交互终端,正在大力发展 AR 技术。AR 可以简单的理解为一种实时将虚拟图像叠加在现实场景中的技术

神奇的Workbox_让你的 Web 站点轻松做到离线可访问

先了解一下 workbox:不管你的站点是何种方式构建的,都可以为你的站点提供离线访问能力。就算你不考虑离线能力,也能让你的站点访问速度更加快。几乎不用考虑太多的具体实现,只用做一些配置...

原生js判断用户是否操作了web页面

用户是否操作了web页面,我们可以在一定时间内根据用户是否触发了某些事件进行判断。比如用户是否点击,是否按键,是否移动了鼠标等

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!