web前端優化之reflow 減少頁面的回流

2022-01-14 23:51:43 字數 771 閱讀 7473

1、什麼是reflow?

reflow(回流)是指瀏覽器為了重新渲染部分或者全部的文件,重新計算文件中的元素的位置和幾何構造的過程。

因為回流可能導致整個dom樹的重新構造,所以是效能的一大殺手。

以下操作會引起回流:

① 改變視窗大小

② font-size大小改變

③ 增加或者移除樣式表

④ 內容變化(input中輸入文字會導致)

⑤ 啟用css偽類(:hover)

⑥ 操作class屬性,新增或者減少

⑦ js操作dom

⑧ offset相關屬性計算

⑨ 設定style的值

reflow與repaint是減緩js的幾大主要原因,尤其是reflow更是效能殺手,所以我們應該想法避免。

推薦第三種,避免第一種

以上幾種做法,我這裡弱弱的推薦第三種,避免第一種。

② 具有動畫效果請使用absolute

因為absolute元素的改變對其它元素的回流影響不大,所以我們的動畫效果的元素還是將他搞成absolute吧。

③ 避免使用**布局(記住只是布局哦,我們資料還是應該用**的)

④ 請絕對不要使用css表示式,效能殺手啊,特別是ie

⑤ 在最末改變元素

因為回流是自上而下的,所以下不及上,我們在最後面修改資訊對全域性影響越少。

⑥ 動畫移動時候,要控制

比如我們拖動元素時候,我是在他x或者y座標改變5px才操作,這樣雖說降低了平滑度,但是對效能有提高。

web前端優化

盡量避免使用eval函式 多了一步解析的步驟 function testnoeval var endtime new date console.log 耗時1 endtime starttime ms function testeval var endtime new date console.lo...

web前端優化

做為乙個好的優秀前端,不僅能夠寫出優雅的 也要更加關注於效能性的問題,但由於我們在專案過程中可能會考慮到一些成本性的問題,不可能讓我們的專案在效能方面面面俱到,但我們可以做到最為基本的做優化。我們可以從以下幾點進行優化 1.減少對伺服器方面的請求 我們使用外部檔案 css 和js css sprit...

Web前端效能優化之CDN加速

1 什麼是cdn?在介紹cdn加速之前,我們先來簡單的了解一下什麼是cdn?cdn content delivery network 即內容分發網路,其基本思路是盡可能的避開網際網路上有可能影響資料傳輸速度和穩定性的瓶頸和環節,使內容傳輸更快 更穩定。通過在網路各處放置節點伺服器所構成的現有網際網路...