web页面的回流和重绘

时间: 2019-07-10阅读: 1537标签: 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打包
压缩/合并jscss代码,减少代码文件的个数和体积


关于网站排名的优化

具有不可替代性,搜索引擎了解网页的入口,一定要写 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(首行缩进进行隐藏),这样做可以启动搜索优化,可以使自己的网站靠前一点  



站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

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

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

让Web应用更安全的13个小技巧

无论你是React、Angular、Vue.js,还是原生JavaScript开发者,你的代码都有可能成为黑客眼中的猎物。作为一个前端开发者,我们可能更加关注性能、SEO、UI/UX,往往会忽视安全问题。

为什么说 Web 开发的未来在于组件?

预测未来并非易事。在预测社会现象的未来趋势时,我们不能认为未来就是当下现状的简单线性延伸——而 Web 开发就是一种社会现象

Web服务常用的几种开发方法

Web服务,即通过程序实现网页服务,服务启动后,一般用户可通过访问URL获取到网站提供的网页服务,如网页浏览、留言、商品购买等。开发Web服务的技术有很多,有Java、Python、ASP.NET、脚本语言等

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

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

5 张图描绘Web3 堆栈全景

Web3 堆栈最令人难以置信的一点是,它们不需要任何集中协调就可以组合在一起。开发本身是去中心化的。没有主架构师。这与地球上几乎所有其他的开发堆栈项目形成了鲜明的对比。在 Linux 基金会,少数人设定整个 Linux 的方向

Web标准

Web标准不是某一个标准,而是由W3C和其他标准化组织制定的一系列标准的集合。主要包括结构(Structure)、表现(Presentation)和行为(Behavior)三个方面。

web名词解释

HTML:超文本标记语言,标准通用标记语言下的一个应用。JavaScript:一种直译式脚本语言,其主要作用是在不与服务器交互的情况下修改 HTML 页面内容, 为网页添加各式各样的动态功能

Web应用和Web框架

Web应用程序是一种可以通过Web访问的应用程序,特点是用户很容易访问,只需要有浏览器即可;Web框架(Web framework)是一种开发框架,用来支持动态网站

函数式 UI:Web开发终于摆脱了框架的束缚

用户界面都是响应式系统,因此可以使用一个纯响应函数,将用户界面接受的事件映射到接口系统上的动作来定义用户界面。利用函数式编程的实现技术可以让实现更接近规范,更易推理和测试。函数式 UI 可以让开发人员摆脱不兼容的 UI 和测试框架带来的麻烦

点击更多...

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