一 概念

什麼是迴流？

迴流也叫重排（reflow），當頁面中的元素髮生影響佈局的變化，比如：改變寬高，修改顯示影藏。頁面需要重新佈局，就會觸發重排。 簡單的說就是，頁面佈局改變，就會觸發重排。

什麼是重繪（repaint）？

頁面中的元素樣式發生改變，比如：背景顏色，背景圖片，字型顏色的樣式改變。 只要頁面需要重新渲染，就會觸發重繪。

注意：

每個頁面只要會發生一次重排和重繪。
重排一定會觸發重繪

二 關於前端效能的優化

前端效能優化的關鍵在於 減少DOM操作 和 減少頁面的重排重繪

如何減少頁面重排重繪呢？ 想要減少重排重繪還要了解瀏覽器自帶的優化，每個瀏覽器都是聰明的，瀏覽器都有自己的優化操作。每個瀏覽器都有一個維護佇列

所以想要減少重排和重繪，條件允許一定要減少獲取操作，如：

1 在for迴圈中，儘量不要進行樣式的獲取操作（因為一獲取就會flush(清空)瀏覽器維護的佇列 ）
2 儘量少用sytle修改樣式，通過新增class進行一次性修改樣式
3 使用 translate 代替 left/top等，（translate只會觸發重繪，不會引起重排，可以減少一次重排的時間）
4 使用opacity代替visibility,改透明度渲染效率更高
5 使用絕對定位或者固定定位(absolute fixed),脫離文件流不會引起頁面其它盒子的變化
6 將大量需要重排操作的元素，進行display:none ，（專業術語是' 離線處理'）

這些是減少重排重繪的優化方法。

// GPU 是圖形處理器，使用3d屬性可以觸發gpu硬體加速。

移動端的優化可以給元素新增 3d屬性（比如 transform: translateZ(0)），使用3d屬性可以使手機開啟gpu硬體加速，讓手機可以最高效能的進行渲染。

資源搜尋網站大全 https://www.renrenfan.com.cn

關於優化還可以

使用css精靈圖片，減少圖片的張數，或者使用iconfont字型圖示
減少ajax請求的次數，使用webpack打包
壓縮/合併js和css程式碼，減少程式碼檔案的個數和體積

關於網站排名的優化

具有不可替代性，搜尋引擎瞭解網頁的入口，一定要寫 meta中的 description關鍵字，網站說明，說明這個網站是做什麼的。 有很多搜尋引擎是根據meta中的描述部分作為搜尋結果的“內容摘要” 所以一定要寫 meta中的 keywords 裡面寫的是頁面的關鍵詞，也是搜尋引擎的關注點之一。 也要寫 使用div>h1>a這種結構 。

<title>京東(JD.COM)-正品低價、品質保障、配送及時、輕鬆購物！</title>
<meta name="description" content="京東JD.COM-專業的綜合網上購物商城、數碼通訊、電腦、家居百貨、服食品等數萬個品牌優質商品.便捷、誠信的服務，為您提供愉悅的網上購物體驗!" />
<meta name="Keywords" content="網上購物,網上商城,手機,筆記本,電腦,MP3,CD,VCD,DV,相機,數碼,配件,手錶,儲存卡,京東" />
<title></title>
　　<div class="logo">
　　　　<h1>
　　　　　　<a href="#" title="京東網">
　　　　         京東<!-- 這裡的字不能刪除 ，起到網站優化作用 -->
　　　　　　</a>
　　　　</h1>
　　</div>
....

在寫html時，使用 div>h1>a 這種結構有優化作用，比如 上面的logo區域，a標籤裡面的字也不要刪除，可以使用text-indent：-99999（首行縮排進行隱藏），這樣做可以啟動搜尋優化，可以使自己的網站靠前一點