（這些事廢話大家隨意ha）之前一直不太注意這方面的需求，而且專案**量也不是很多看起來好像沒什麼前端效能方面的問題，加之公司專案方面也沒太要求，所以我就似偷懶了嘛，氮素最近面試還是總結下吧hhhhh
首先造成前端效能方面的東西從最基本的頁面渲染方面那就是重排和重繪
例如：一般來說，樣式的寫操作會造成頁面的重新渲染
offsettop/offsetleft/offsetwidth/offsetheight
scrolltop/scrollleft/scrollwidth/scrollheight
clienttop/clientleft/clientwidth/clientheight
getcomputedstyle
()
// bad
document.getelementsbytagname
('div'
)[0].style.left = document.getelementsbytagname
('div'
)[0].offsetleft + 10 + "px";
// good
//var left = document.getelementsbytagname
('div'
)[0].offsetleft;
('div'
)[0].style.left = left + 10 + "px"
;
1. 多個讀操作之後執行寫操作如上面。 2. 操作樣式可以統一操作類名
操作非真實dom
1. 可使用js完成對操作的dom物件在統一插入到頁面中。2. 使用虛擬dom的指令碼庫，比如react等
改變操作dom的屬性
1. position屬性為absolute或fixed的元素，重排的開銷會比較小，因為不用考慮它對其他元素的影響。2. 只在必要的時候，才將元素的display屬性為可見，因為不可見的元素不影響重排和重繪。另外，visibility : hidden的元素只對重繪有影響，不影響重排。(這個可參考理解vue的v-show和v-if)––
公共方法
window.requestanimationframe()，將讀操作和寫操作的重新渲染統統放到下一次重新渲染，通過減少渲染次數提高網頁效能
優化網頁效能
預設情況下css會被當作阻塞渲染的資源來處理，可以使用 型別和 查詢來標識css的某些部分為非阻塞渲染的 第一句 這個樣式只有在列印頁面時才會生效。它在頁面首次載入時不會阻塞渲染 第二句 這個樣式只有在寬度大於等於768px時才會生效 借助ps中的 儲存為網頁格式 功能，可以對生成的任意一張，輸出各...
網頁效能優化
網頁的生成過程，大致可以分成五步。1.html 轉化成dom 2.css 轉化成cssom css object model 3.結合dom和cssom，生成一棵渲染樹 包含每個節點的視覺資訊 4.生成布局 layout 即將所有渲染樹的所有節點進行平面合成 5.將布局繪製 paint 在螢幕上 這...
使用keep alive優化網頁效能
該筆記為最近專案中的一點經驗積累 keep alive 主要用於保留元件狀態或避免重新渲染。比如 有乙個列表頁面和乙個 詳情頁面，那麼使用者就會經常執行開啟詳情 返回列表 開啟詳情，這樣的話 列表 和 詳情 都是乙個頻率很高的頁面，那麼就可以對列表元件使用進行快取，這樣使用者每次返回列表的時候，都能...