前端效能優化

2021-09-25 05:30:54 字數 560 閱讀 7901

translate替代top改變

opacity替代visibility

不要一條一條的修改dom的樣式,預先定義好class,然後修改dom的classname

把dom離線後修改,比如:先把dom給display:none(有一次reflow),然後你修改100次,然後再把它顯示出來

不要把dom節點的屬性值放在乙個迴圈裡面當成迴圈裡的變數

不要使用table布局,可能乙個很小的改動都會造成整個table的布局

動畫實現的速度選擇

對於動畫新建圖層

啟用gpu硬體加速

3d或透視變換(prespective transform)css屬性

擁有3d(webgl)上下文或加速的2d上下文的節點

混合外掛程式(如:flash)

對自己的opacity做css動畫或使用動畫webkit變換的元素

擁有加速css過濾器的元素

元素有乙個包含復合層的後代節點(乙個元素擁有乙個子元素,該子元素在自己的層裡)

元素有z-index較低且包含乙個復合層的兄弟元素(換句話說就是該元素在復合層上面渲染)

前端效能優化

1.減少http請求次數 css sprites 在國內很多人叫css精靈,是一種網頁應用處理方式。它允許你將乙個頁面涉及到的所有零星都包含到一張大圖中去,這樣一來,當訪問該頁面時,載入的就不會像以前那樣一幅一幅地慢慢顯示出來了。對於當前網路流行的速度而言,不高於200kb的單張的所需載入時間基本是...

前端效能優化

在開發好頁面後,如何讓頁面更好更快的執行 從前端的角度來看,效能可以分為兩個方向 從使用者角度來看,乙個是頁面載入的很快,另乙個是頁面使用起來非常流暢 輸入了url 瀏覽器開始解析 查詢本地快取 dns解析 建立連線 伺服器處理 伺服器響應 客戶端收到響應 解析html 然後開始渲染頁面 使用者可以...

前端效能優化

隨著現在 越來越酷炫,各種,資源庫,動畫等等用的越來越多,在使用者視覺和功能的提公升的同時,效能也成為乙個必須考慮的點。有人說 乙個 開啟時間超過8s,網民就會流失70 以上。這種說法我覺得不是很正確的,除非是非常重要 必須要使用的 否則超過5s我基本直接關了,體驗太差。所以,使用者 忍讓 是有極限...