以前寫**不太注意瀏覽器回流和重繪問題,這次掉坑里了,必須解決這個問題.
在專案中,用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賦值，修改背景，
這段**會讓瀏覽器先回流，再重繪，重繪的時候背景的大小就不會使用之前設定的大小，而是按照渲染準則(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:"+width+";height:"+height+";background-image:"+"url("+thumbnail+");"+"background-size: 100% 100%;";
dragboxelement.style.csstext=csstext;
dragboxelement.style.csstext的使用可以減少回流重繪的次數；
關於重繪和回流請參考：
瀏覽器重繪和重排
我的部落格地圖 前端開發崗位是乙個知識範圍比較綜合的乙個崗位，需要了解和 的知識很多，因此，可以從廣度和深度兩個方面著手，初級工程師以廣度學習為主，高階工程師以深度研究為主。重排發生的情景 頁面渲染初始化 瀏覽器視窗改變 dom元素幾何屬性 width，height 變化 可見dom元素的增刪 do...
瀏覽器重繪與重排
當我們在做前端開發的時候，肯定會碰到操作dom的情況，在操作dom的時候，就會引起瀏覽器的重繪與重排。重繪 如果dom變化僅僅影響的了visibility outline 背景色等等非幾何屬性，此時就發生了重繪 repaint 而不是重排，因為布局沒有發生改變。重排 當dom變化影響了元素的幾何屬性...
瀏覽器的重繪和回流
重繪 當元素樣式的改變不影響布局時，瀏覽器會使用重繪的方式來更新元素的變化，這種改變只會在ui層的重新畫素繪製，這種方式的對瀏覽器開銷比較小。常見的重繪操作有 改變元素顏色 改變元素背景色 more 回流 又名 重排 當元素的尺寸 結構或者觸發了某個屬性的改變，會導致瀏覽器重新渲染，這種操作會造成回...