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

  • 相关阅读:
    分享下有趣的注释头
    android studio 的自动更新问题
    docker 搭建kafka集群(入门版)
    brew换源
    golang web框架 kratos中的日志框架
    golang 日志框架(zap)完整配置和使用
    python 日志模块
    mysqldump备份恢复数据
    寻找二叉树上从根结点到给定结点的路径
    linux 磁盘IO速度测试
  • 原文地址:https://www.cnblogs.com/liangxin/p/6773778.html
Copyright © 2011-2022 走看看