解析和加載
- 加載是一個(gè)異步的過程 直砂，例如圖片的請求渲染不會(huì)影響整個(gè)html的加載和渲染
解析的過程
- 形成dom tree ，render tree是個(gè)對象
- 形成css tree浩习，根據(jù)樣式表形成樣式tree
- 將dom tree和css tree有機(jī)結(jié)合起來形成render tree
- render tree構(gòu)建完畢后静暂，開始渲染頁面
- display none的元素、head谱秽、script元素不會(huì)包含在render tree里洽蛀。
回流和重繪
- 回流：當(dāng)頁面的布局發(fā)生變化，渲染頁面時(shí)疟赊，計(jì)算布局位置的過程叫做回流郊供。
- 重繪：所有的回流操作，都會(huì)導(dǎo)致相關(guān)元素進(jìn)行重繪近哟。
- 僅改變顏色及其他不影響元素物理變化的行為驮审，會(huì)只導(dǎo)致重繪。
- 引起回流的操作有：
- 頁面首次加載吉执、渲染疯淫、
- 布局變化(增加或刪除元素)、
- display: none戳玫、visibility: hidden;不會(huì)引起回流熙掺，只會(huì)引起重繪
- 邊距、
- 位置咕宿、
- 大小(包括字體大小)
- 頁面渲染初始化
- 改變?yōu)g覽器窗口大小
- 請求offset币绩、client、scroll府阀、width缆镣、height、getComputedStyle或ie的currentStyle等
- 引起回流的特征是元素發(fā)生了物理性變化
- 回流比重繪更影響瀏覽器的性能
- 如果在body子元素最前面添加元素肌似，會(huì)導(dǎo)致整個(gè)頁面重新渲染
- 如果在body子元素最后面添加元素费就，只會(huì)繪制最后面的元素
- 如果父節(jié)點(diǎn)發(fā)生回流诉瓦，會(huì)導(dǎo)致所有子節(jié)點(diǎn)回流+重繪川队。
- 優(yōu)化：
- 減少回流的次數(shù)，盡量避免單個(gè)css屬性挨個(gè)去處理睬澡。
- 較好的方式是修改classname
- 使用documentFragment或新創(chuàng)建的div對數(shù)據(jù)進(jìn)行緩存固额，最后append到body中。
- 如var fragment = document.createDocumentFragment();
- fragment.appendChild(多個(gè)新創(chuàng)建的div);
- document.body.append(fragment);
- 使用el.style.cssText = 'width:' + wNum + 'px; height:' + hNum + 'px;';
- 將元素的display設(shè)置為none煞聪，然后對元素的樣式隨意設(shè)置斗躏，最后將display設(shè)置為'block';
- 減少回流影響的規(guī)模
- 盡可能的在末尾添加或刪除元素
- 瀏覽器隊(duì)列機(jī)制
- 較新的瀏覽器會(huì)將多次回流操作放置到隊(duì)列中，在固定的時(shí)間內(nèi)刷新隊(duì)列昔脯，批量執(zhí)行回流操作啄糙，減少回流次數(shù)笛臣。
- 當(dāng)訪問offset、client等屬性時(shí)隧饼，會(huì)強(qiáng)制瀏覽器刷新隊(duì)列(這樣瀏覽器才能獲取到精確的樣式值)沈堡，因此盡量避免重復(fù)調(diào)用el.offset，要將其進(jìn)行變量緩存燕雁。如果el.offset是動(dòng)態(tài)變化的诞丽，使用getComputedStyle要比el.offset性能更好。
- 動(dòng)畫相關(guān)
- 要使用絕對定位動(dòng)態(tài)操作top left等值拐格，這樣父級元素不會(huì)引起回流重繪
- 但使用margin會(huì)導(dǎo)致父級元素回流和重繪僧免。
- table
- 使用table元素性能要比其他元素差很多，屬于彈性元素捏浊，內(nèi)部封裝了較多的東西懂衩，容易引起頁面回流。
- 減少回流的次數(shù)，盡量避免單個(gè)css屬性挨個(gè)去處理睬澡。
