fixed元素，常见网站右侧出现一个返回顶部的按钮，滚动的时候，会发现返回顶部这个区域在不停的进行重绘，而返回顶部是position:fixed定位的。这也解释了为什么fixed定位是最耗性能的属性之一

如何查看元素在不停的重绘呢？Chrome渲染分析工具 Rendering；

如上图，按F12调出开发者工具，然后按“ESC”（按2次）  调出Rendering界面。

1、Show paint rectangles 显示绘制矩形

2、Show composited layer borders 显示层的组合边界（注：蓝色的栅格表示的是分块）

3、Show FPS meter 显示FPS帧频

4、Enable continuous page repainting 开启持续绘制模式 并 检测页面绘制时间

5、Show potential scroll bottlenecks 显示潜在的滚动瓶颈。

观察上图本案例；箭头所指示的；（绿色块）元素表示在不停的发生重绘；

那么如何解决呢？

通过css3的-webkit-transform:translateZ(0) 的属性启动 硬件GPU加速

如何硬件加速，一般我们看到这个：

webkit-transform: translateZ(0);

-moz-transform: translateZ(0);

-ms-transform: translateZ(0);

-o-transform: translateZ(0);

transform: translateZ(0);

或

webkit-transform: translate3d(0,0,0);

-moz-transform: translate3d(0,0,0);

-ms-transform: translate3d(0,0,0);

-o-transform: translate3d(0,0,0);

transform: translate3d(0,0,0);

其实，浏览器开启硬件GPU加速，css  中只要有这些属性：即可以开启；GPU hack本质 是纹理缓存和图像缓存；

-webkit-transform: translate3d(0,0,0);

-webkit-transform:translate3D(0,0,0); //大写3D

-webkit-transform: translateZ(0);

-webkit-backface-visibility:hidden;

-webkit-transform: scaleZ(0) ;

-webkit-transform: rotateX(0);

-webkit-transform: rotateY(0);

-webkit-transform: rotateZ(0) ;

-webkit-transform:  scale3d(0,0,0) ;

-webkit-transform: rotate3d(0,0,0,0);

通过开启GPU硬件加速虽然可以提升动画渲染性能或解决一些棘手问题，但使用仍需谨慎，使用前一定要进行严谨的测试，否则它反而会大量占用浏览网页用户的系统资源，尤其是在移动端，肆无忌惮的开启GPU硬件加速会导致大量消耗设备电量，降低电池寿命等问题。

再次观察；myFixed 元素没有发现没有绿色块重绘

影响页面重绘的因素

主要有2大类：

1、页面滚动

2、互动操作
1).Dom节点被Javascript改变，导致Chrome重新计算页面的layout。

2).动画不定期更新。

3).用户交互，如hover导致页面某些元素页面样式的变化。

4).调整窗口大小 和 改变字体

5).内容变化，比如用户在input框中输入文字

6).激活 CSS 伪类，比如 :hover

7).计算 offsetWidth 和 offsetHeight 属性

8).增加或者移除样式表

另外一个情况；fixed元素在滚动条滚动时候，ie7版本 有抖动情况；除了background-attachment: fixed\9; (我的ie8浏览器切换ie7渲染发现还是有抖动现象)； 我一般是这样处理的

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"  />

当我点  击回到顶部  时候，页面 scrollTop:0;jQuery为了兼容一般是这样写：

$('#myFixed').on("click",function(){

          $('html, body').animate({scrollTop:0},"slow",function(){

		   console.log('我回到了顶部');

		  });

	 });

实际上，仔细观察控制台，你会发现；实际上渲染了2次;

主要原因 webkit 内核的浏览器使用body 进行滑动，而其他浏览器则使用html进行滑动

如何优化：

var userAgent=window.navigator.userAgent.toLowerCase();

       isWebkit = userAgent.indexOf('webkit') !== -1,

	$('#myFixed').on("click",function(){//webkit 内核的浏览器使用body 进行滑动，而其他浏览器则使用html进行滑动

		 $(!!isWebkit?"body":"html").animate({scrollTop:0},"slow",function(){

		   console.log('我回到了顶部');

		  });

	 }); 
 

再次，观察控制台，这回只选染一次；

关于 bug，iphone 移动端 QQ浏览器如果缓动回到顶部；无法真正回到顶部；我们看看天猫 和蘑菇街存在的问题

<meta name="apple-mobile-web-app-capable" content="yes" />

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

直接通过click 直接调用window.scrollTo(0,0)回到顶部；去掉动画；

本文地址：http://www.cnblogs.com/surfaces/

另外；一个注意点：当父元素 含有 transform 时候，或者 will-change 属性，可能导致子类元素含有fixed 属性失效；

附上代码：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"  />

<meta http-equiv="X-UA-Compatible" content="edge,chrome=1"  />

<title>渲染优化之 fixed 与 返回顶部</title>

</head>

<body>

<style>

*{ margin:0; padding:0;}

body{

_background-image: url(about:blank);     /*用浏览器空白页面作为背景*/

background-attachment: fixed\9;/* 确保滚动条滚动时，元素不闪动*/

text-overflow:ellipsis;}

p{ color:#fff;}

#text{height:2500px; margin:0 auto; width:1000px; border:2px solid #999; background:#333 url(../images/TaylorSwift.jpg) no-repeat; }

#myFixed{-webkit-transform:translateZ(0); position:fixed; left:50%;top:70%; *position:absolute;*top:expression(eval(documentElement.scrollTop +550));  margin-left:550px; width:50px;  height:50px; border:2px solid red;background-attachment: fixed\9;/*IE=EmulateIE8" 才有效果*/}

#myFixed:hover{ cursor:pointer; border-color:#FF0;  }

</style>

<div id="text">我是滚动的区块</div>

<div id="myFixed"  style="">回到顶部</div>

<script src="../js/jquery-1.8.2.min.js"></script>

<script>

   var userAgent=window.navigator.userAgent.toLowerCase();

       isWebkit = userAgent.indexOf('webkit') !== -1,

       texts=document.getElementById("text"),

       str='', i=0;

      for(;i<120;i++){

        str+='<p>我是第'+i+'行</p>'

        }

      texts.innerHTML=str;

    $('#myFixed').on("click",function(){//webkit 内核的浏览器使用body 进行滑动，而其他浏览器则使用html进行滑动

         $(!!isWebkit?"body":"html").animate({scrollTop:0},"slow",function(){

           console.log('优化后我回到了顶部');

          });

     });

</script>

</body>

</html>

http://fourkitchens.com/blog/article/fix-scrolling-performance-css-will-change-property

http://stackoverflow.com/questions/15194313/webkit-css-transform3d-position-fixed-issue

http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/

渲染优化 之fixed与返回顶部 以及开启GPU Hack的更多相关文章

  1. 返回顶部 fixed oncheck(点击按钮）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. jquery返回顶部和底部插件和解决ie6下fixed插件

    (function($){ //返回顶部和底部插件 $.fn.extend({ goTopBootom:function (options){ //默认参数 var defaults = { &quo ...

  3. 剖析虚幻渲染体系（12）- 移动端专题Part 3（渲染优化）

    目录 12.6 移动端渲染优化 12.6.1 渲染管线优化 12.6.1.1 使用新特性 12.6.1.2 管线优化 12.6.1.3 带宽优化 12.6.2 资源优化 12.6.2.1 纹理优化 1 ...

  4. 编写jQuery插件--实现返回顶部插件

    国庆过去一周多了,作为IT界的具有严重’工作狂‘性质的宅人,居然还没走出玩耍的心情,拖了程序猿的脚后跟了.最近工作不顺,心情不佳,想吐槽下公司,想了还是厚道点,以彼之道还施彼身,觉得自己也和他们同流合 ...

  5. javascript返回顶部几种代码总结

    纯js代码 /** * 回到页面顶部 * @param acceleration 加速度 * @param time 时间间隔 (毫秒) **/ function goTop(acceleration ...

  6. 返回顶部的功能 div固定在页面位置不变

    1.你在网上搜索的时候,可能会搜索到div固定在页面上,不随滚动条滚动而滚动是用CSS写的,写法是position:fixed;bottom:0; 但是这个在iframe满地跑的页面实际开发中,有啥用 ...

  7. 【前端优化之渲染优化】大屏android手机动画丢帧的背后

    前言 上周我与阿里的宇果有一次技术的交流,然后对天猫H5站点做了一些浅层次的分析,后面点时间基本天天都会有联系,中途聊了一些技术细节.聊了双方团队在干什么,最后聊到了前端优化.因为我本身参与了几次携程 ...

  8. jquery 返回顶部 兼容web移动

    返回顶部图片 http://hovertree.com/texiao/mobile/6/tophovertree.gif 具体实现代码 <span id="tophovertree&q ...

  9. js实现返回顶部功能的解决方案

    很多网站上都有返回顶部的效果,主要有如下几种解决方案. 1.纯js,无动画版本 window.scrollTo(x-coord, y-coord); window.scrollTo(0,0); 2.纯 ...

随机推荐

  1. WPF换肤之五：创建漂亮的窗体

    原文:WPF换肤之五:创建漂亮的窗体 换肤效果 经过了前面四章的讲解,我们终于知道了如何拖拉窗体使之改变大小,也知道了如何处理鼠标事件,同时,也知道了如何利用更好的编写方式来编写一个方便实用和维护的换 ...

  2. WPF实现无窗体鼠标跟随

    原文:WPF实现无窗体鼠标跟随 上次的弹力模拟动画实现后,我觉得可以把这个弄得更好玩一些,我们可以让小球实时跟随着鼠标,并且还可以让窗口完全消失,让小球在桌面上飞来飞去. 这只需要一些简单的修改就可以 ...

  3. windows phone 使用相机并获取图片（3）

    原文:windows phone 使用相机并获取图片(3) 使用相机需要引用如下命名空间 " Margin="12,10,12,0" ></Image> ...

  4. 优化移动设备上SharePoint 2013网站

    优化移动设备上SharePoint 2013网站 本文由SPFarmer翻译自Waldek Mastykarz的文章 移动市场在持续的增长.在不远的将来,使用移动设备浏览站点将会超过电脑.为了保证用户 ...

  5. 重新想象 Windows 8 Store Apps (8) - 控件之 WebView

    原文:重新想象 Windows 8 Store Apps (8) - 控件之 WebView [源码下载] 重新想象 Windows 8 Store Apps (8) - 控件之 WebView 作者 ...

  6. 【原创】leetCodeOj --- Excel Sheet Column Title 解题报告

    题目地址: https://oj.leetcode.com/problems/excel-sheet-column-title/ 题目内容: Given a positive integer, ret ...

  7. sql 与linq的转换

    1. left Join 原始sql select t.[MINTAccountIdentifier] from BSS_Tenant t left join BL_SAPCustomer s on ...

  8. Autodesk FBX SDK Program 中文 (二)

    这是Autodesk FBX SDK学习笔记第二篇.下面部分汉字翻译自Autodesk FBX SDK Program.翻译人:有道翻译. 上一篇讲了一些FBX SDK的基本操作.创建FbxManag ...

  9. partial 的好处

    1.可以将一个类中的属 性, 方法分类来写 2.方法了可以写在多个类中, 这样可以对方法进行分类   由于项目上使用了代码生成工具, 自定义的一些按钮事件默认是不生成的,得自己定义,如果把定义的代码写 ...

  10. Performance Monitor采集性能数据

    Performance Monitor采集性能数据 Windows本身为我们提供了很多好用的性能分析工具,大家日常都使用过资源管理器,在里面能即时直观的看到CPU占用率.物理内存使用量等信息.此外新系 ...