web前端：回流和重绘

　　页面布局是对页面的文字、图形或表格进行格式设置。包括字体、字号、颜色纸张大小和方向以及页边距等。可以在word中使用。

　　一、概念

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

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

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

　　重排一定会触发重绘

　　二、关于前端性能的优化

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

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

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

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

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

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

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

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

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

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

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

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

　　关于优化还可以

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

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

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

　　关于网站排名的优化

　　<title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>

　　<metaname="description"content="京东JD.COM-专业的综合网上购物商城、数码通讯、电脑、家居百货、服食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"/>

　　<metaname="Keywords"content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"/>

　　<title></title>具有不可替代性，搜索引擎了解网页的入口，一定要写

　　meta中的description关键字，网站说明，说明这个网站是做什么的。有很多搜索引擎是根据meta中的描述部分作为搜索结果的“内容摘要”所以一定要写

　　meta中的keywords里面写的是页面的关键词，也是搜索引擎的关注点之一。也要写。。。。。。。

　　使用div>h1>a这种结构

　　<divclass="logo">

　　<h1>

　　<ahref="#"title="京东网">

　　京东<!--这里的字不能删除，起到网站优化作用-->

　　</a>

　　</h1>

　　</div>

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

　　前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，完美的动效设计，给用户带来极高的用户体验。