這篇文章給大家分享的是有關(guān)HTML中重繪與重排的用法的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過來看看吧。

10年積累的成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站制作后付款的網(wǎng)站建設(shè)流程，更有豐鎮(zhèn)免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

瀏覽器加載頁面原理

通常在文檔初次加載時(shí)，瀏覽器引擎會(huì)解析HTML文檔來構(gòu)建DOM樹，之后根據(jù)DOM元素的幾何屬性構(gòu)建一棵用于渲染的樹。渲染樹的每個(gè)節(jié)點(diǎn)都有大小和邊距等屬性，類似于 盒子模型 （由于隱藏元素不需要顯示，渲染樹中并不包含DOM樹中隱藏的元素）。當(dāng)渲染樹構(gòu)建完成后，瀏覽器就可以將元素放置到正確的位置了，再根據(jù)渲染樹節(jié)點(diǎn)的樣式屬性繪制出頁面。由于瀏覽器的 流布局，對(duì)渲染樹的計(jì)算通常只需要遍歷一次就可以完成。但table及其內(nèi)部元素除外，它可能需要多次計(jì)算才能確定好其在渲染樹中節(jié)點(diǎn)的屬性，通常要花3倍于同等元素的時(shí)間。這也是為什么我們要避免使用table做布局的一個(gè)原因。

重繪

重繪是一個(gè)元素 外觀的改變 所觸發(fā)的瀏覽器行為，例如改變vidibility、outline、背景色等屬性。瀏覽器會(huì)根據(jù)元素的新屬性重新繪制，使元素呈現(xiàn)新的外觀。重繪不會(huì)帶來重新布局，并不一定伴隨重排。瀏覽器在進(jìn)行重繪和重排的時(shí)候是要付出高昂的性能代價(jià)的。

重排

重排是更明顯的一種改變，可以理解為渲染樹需要重新計(jì)算。下面是常見的觸發(fā)重排的操作：

1. DOM元素的幾何屬性變化。

2. DOM樹的結(jié)構(gòu)變化。

例如節(jié)點(diǎn)的增減、移動(dòng)等.

獲取某些屬性。

當(dāng)獲取一些屬性時(shí)，瀏覽器為取得正確的值也會(huì)觸發(fā)重排。這樣就使得瀏覽器的優(yōu)化失效了。這些屬性包括：offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle() (currentStyle in IE)。所以，在多次使用這些值時(shí)應(yīng)進(jìn)行緩存。

此外，改變?cè)氐囊恍邮剑{(diào)整瀏覽器窗口大小，滾動(dòng)條出現(xiàn)等等也都將觸發(fā)重排。

減少重排次數(shù)和重排影響范圍

1、將多次改變樣式屬性的操作合并成一次操作。例如，

JS:
    var changep = document.getElementById(‘changep’);
    changep.style.color = ‘#093′;
    changep.style.background = ‘#eee';
    changep.style.height = ‘200px';
    可以合并為：
CSS:
    p.changep {
        background: #eee;
        color: #093;
        height: 200px;
    }
JS:
    document.getElementById(‘changep’).className = ‘changep';

2、 將需要多次重排的元素，position屬性設(shè)為absolute或fixed，這樣此元素就脫離了文檔流，它的變化不會(huì)影響到其他元素。例如有動(dòng)畫效果的元素就最好設(shè)置為絕對(duì)定位。

3、 在內(nèi)存中多次操作節(jié)點(diǎn)，完成后再添加到文檔中去。例如要異步獲取表格數(shù)據(jù)，渲染到頁面。可以先取得數(shù)據(jù)后在內(nèi)存中構(gòu)建整個(gè)表格的html片段，再一次性添加到文檔中去，而不是循環(huán)添加每一行。

4、 由于display屬性為none的元素不在渲染樹中，對(duì)隱藏的元素操作不會(huì)引發(fā)其他元素的重排。如果要對(duì)一個(gè)元素進(jìn)行復(fù)雜的操作時(shí)，可以先隱藏它，操作完成后再顯示。這樣只在隱藏和顯示時(shí)觸發(fā)2次重排。

5、 在需要經(jīng)常取那些引起瀏覽器重排的屬性值時(shí)，要緩存到變量

感謝各位的閱讀！關(guān)于HTML中重繪與重排的用法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

標(biāo)題名稱：HTML中重繪與重排的用法
文章地址：http://chinadenli.net/article28/ppshcp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、小程序開發(fā)、做網(wǎng)站、全網(wǎng)營銷推廣、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)