提到重排與重繪肯定要提到瀏覽器對文檔的渲染流程,如下圖

重排,一些人又叫做回流,在谷歌瀏覽器中叫 Layout,火狐中叫reflow
瀏覽器在第一次解析文檔的時候 會不斷的進行重排與重繪,display:none不會渲染,絕對定位會脫離文檔流 所以可以將一些比較復雜的動畫使用絕對定位 讓其在其他地方渲染不阻塞正常的渲染。
除了第一次渲染頁面會重排,當幾何屬性發生變化的時候也會引發重排,如瀏覽器的窗口大小發生變化,元素的大小、位置發生變化,增刪一些dom里的元素,元素內容發生改變(寬高撐起來)。
重排一定伴隨著重繪,重繪不一定有重排如文字顏色,背景顏色的改變不會引起重排但是有重繪。
這里梳理一下,從輸入地址到渲染呈現頁面經過了那些過程,這張圖還可以在細化很多,這里寫個大概的流程就好了。

- 以專業工程師的標準要求自己
- JS
- 函數的this
- 函數的argument
- 函數的apply、bind、call方法
- 創建對象
- 構造函數創建對象
- 原型結合構造函數創建對象
- 原型
- 繼承
- 閉包
- 正則表達式
- Ajax
- 設計模式
- ES6
- es6的模塊化
- 定義變量的新方式
- 函數擴展
- 數組擴展
- 性能與工程化
- 關于http與緩存
- 重排(reflow、layout)與重繪
- 頁面性能
- gulp
- webpack
- 一些項目回顧總結
- 移動端&微信H5游戲
- 微信小程序
- Vue.js
- 隨手記錄
- 如何通過前端技能獲取2018世界杯門票
- jsonp
- es6 javascript對象方法Object.assign()
- 一份不錯的基礎面試題
- vscode常用插件
- koroFileHeader
- 構建自己的Js工具庫
- H5 game
- Phaser從入坑到放棄再入坑
- 1.游戲的創建
- 2.資源的加載
- 3.phaser中的舞臺,世界和攝像機
- 4.游戲縮放控制,移動端的適配
- 5.phaser中的顯示對象
- 1.概述
- 2.phaser中的圖片,圖形,和按鈕
- 3.phaser中的精靈
- 4.文字
- 5.組
- 6.phaser中的動畫
- 7.粒子和瓦片地圖
- 8.瓦片地圖
- lodash
- ES5 to ESNext?—?here’s every feature added to JavaScript since 2015
- 防抖(debounce) 和 節流(throttling)