zoukankan      html  css  js  c++  java
  • 浏览器重绘和回流

    以前写代码不太注意浏览器回流和重绘问题,这次掉坑里了,必须解决这个问题.

    在项目中,用angular的derective写了一个组件,组件的background-image随着选中变化,并且组件的大小也会变化 ,之前的代码使用了下面写法:

    dragBoxElement.style.top = "" + (newVal*$scope.dragModel.top) + "px"; //造成浏览器回流
    dragBoxElement.style.left = "" + (newVal*$scope.dragModel.left) + "px";
    dragBoxElement.style.width = "" + (newVal*$scope.dragModel.width) + "px";
    dragBoxElement.style.height = "" + (newVal*$scope.dragModel.height) + "px";

    然后再给background: url( {{dragModel.thumbnail}}中的dragModel.thumbnail赋值,修改背景图片,

    这段代码会让浏览器先回流,再重绘,重绘的时候背景图片的大小就不会使用之前设置的大小,而是按照渲染准则(css中初始规定)的大小显示。

    最终的解决办法就是让将这些引起回流和重绘的操作,构建为一个一个整体样式,让浏览器只 回流重绘一次,修改如下:

    var top = "" + ($scope.scaleRatio*$scope.dragModel.top) + "px"; //按照比例显示素材宽高
    var left = "" + ($scope.scaleRatio*$scope.dragModel.left) + "px";
    var width = "" + ($scope.scaleRatio*$scope.dragModel.width) + "px";
    var height = "" + ($scope.scaleRatio*$scope.dragModel.height) + "px";
    var thumbnail= $scope.dragModel.materials[i].type==="IMAGE"?$scope.dragModel.materials[i].originalFilePath:$scope.dragModel.materials[i].filePath;
    var cssText="top:"+top+";left:"+left+";"+width+";height:"+height+";background-image:"+"url("+thumbnail+");"+"background-size: 100% 100%;";
    dragBoxElement.style.cssText=cssText;

    dragBoxElement.style.cssText的使用可以减少回流重绘的次数;

    关于重绘和回流请参考:http://www.css88.com/archives/4996

    select中option选项的上下移动,添加、删除操作参考代码:

    http://blog.csdn.net/jadyer/article/details/16804279

  • 相关阅读:
    调试IPV6
    [super class]和[self class]
    Django2 + python3 上传图片
    django2 + python3 显示静态文件中的图片
    机器工厂——贪心
    Handstand 2——AT(先打表)
    Low Elements--AT
    Double Factorial——AT
    Brick Break——AT
    变音量——动态规划
  • 原文地址:https://www.cnblogs.com/liangxin/p/6773778.html
Copyright © 2011-2022 走看看