優化網頁效能

2021-09-22 02:28:55 字數 633 閱讀 4026

預設情況下css會被當作阻塞渲染的資源來處理,可以使用**型別和**查詢來標識css的某些部分為非阻塞渲染的:

第一句:這個樣式只有在列印頁面時才會生效。它在頁面首次載入時不會阻塞渲染

第二句:這個樣式只有在寬度大於等於768px時才會生效

借助ps中的「儲存為網頁格式」功能,可以對生成的任意一張,輸出各種質量。這個功能,可以幫助你在影象的視覺效果和檔案體積之間找到平衡點。

imageoptim是乙個採用無失真壓縮演算法來壓縮影象檔案的軟體;

css3代替動畫、

chrome的開發者工具中,audits面板來找到未使用的css規則

firefox的外掛程式dust-me selectors

在中載入css,盡量避免使用@import,css檔案盡量不超過30kb,最好有通用樣式

在頁面的最後載入js,盡可能非同步載入。因為js會阻塞dom構建,除非明確宣告為非同步載入。

引用外部js檔案,瀏覽器就需要向第三方伺服器請求這個檔案,可能會浪費很長時間,而html解析器在繼續渲染dom之前會一直被阻塞,因此新增async標記來告訴瀏覽器這個指令碼不需要被立即執行:

盡量不要使用第三方指令碼,請求數量越少越好。

網頁效能優化

這些事廢話大家隨意ha 之前一直不太注意這方面的需求,而且專案 量也不是很多看起來好像沒什麼前端效能方面的問題,加之公司專案方面也沒太要求,所以我就似偷懶了嘛,氮素最近面試還是總結下吧hhhhh 首先造成前端效能方面的東西從最基本的頁面渲染方面那就是重排和重繪 例如 一般來說,樣式的寫操作會造成頁面...

網頁效能優化

網頁的生成過程,大致可以分成五步。1.html 轉化成dom 2.css 轉化成cssom css object model 3.結合dom和cssom,生成一棵渲染樹 包含每個節點的視覺資訊 4.生成布局 layout 即將所有渲染樹的所有節點進行平面合成 5.將布局繪製 paint 在螢幕上 這...

使用keep alive優化網頁效能

該筆記為最近專案中的一點經驗積累 keep alive 主要用於保留元件狀態或避免重新渲染。比如 有乙個列表頁面和乙個 詳情頁面,那麼使用者就會經常執行開啟詳情 返回列表 開啟詳情,這樣的話 列表 和 詳情 都是乙個頻率很高的頁面,那麼就可以對列表元件使用進行快取,這樣使用者每次返回列表的時候,都能...