Java browser 執(zhí)行javascript響應(yīng)慢

1、Javabrowser執(zhí)行javascript回流操作，而執(zhí)行了過多的回流操作，你就會發(fā)現(xiàn)自己的網(wǎng)站變得越來越慢了，我們應(yīng)該盡可能的減少DOM操作。

成都創(chuàng)新互聯(lián)是一家專業(yè)提供嘉黎企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站建設(shè)、成都網(wǎng)站建設(shè)、H5響應(yīng)式網(wǎng)站、小程序制作等業(yè)務(wù)。10年已為嘉黎眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)絡(luò)公司優(yōu)惠進(jìn)行中。

2、執(zhí)行過程耗時越久，瀏覽器等待響應(yīng)用戶輸入的時間就越長。瀏覽器在下載和執(zhí)行腳本時出現(xiàn)阻塞的原因在于，腳本可能會改變頁面或JavaScript的命名空間，它們對后面頁面內(nèi)容造成影響。

JS的回流和重繪

一、首先我們簡單了解下瀏覽器的渲染過程：

1.解析HTML抽象DOM Tree

2.抽象出Render Tree

3.布局（layout）render tree

4.繪畫render tree

HTML解析成DOM，抽象DOM Tree

解析html文檔并將解析的元素轉(zhuǎn)換為dom樹中的實(shí)際dom節(jié)點(diǎn)。

把CSS解析成CSSOM，抽象CSSOM Tree

當(dāng)瀏覽器解析dom的時候，遇到link標(biāo)簽，引用外部的css樣式表，引擎會將css抽象成cssom

構(gòu)建渲染樹（Render Tree）

DOM和CSSOM合并就產(chǎn)生了Render Tree。構(gòu)建渲染樹大致步驟：

①從dom樹的根開始，遍歷每個可見節(jié)點(diǎn)。

②對于每個可見節(jié)點(diǎn)，瀏覽器找到適當(dāng)?shù)钠ヅ鋍ssom規(guī)則并應(yīng)用它們。

③它會發(fā)布帶有內(nèi)容和計算樣式的可見節(jié)點(diǎn)。

④每個渲染器代表一個矩形區(qū)域，通常對應(yīng)于一個節(jié)點(diǎn)的CSS框。

渲染樹的布局

①當(dāng)渲染器被創(chuàng)建并添加到樹中時，它沒有位置和大小。計算這些值稱為布局。

②布局是一個遞歸過程，從根元素開始，也就是html，每個渲染器都會去計算他自己的位置和大小，由于瀏覽器使用流式布局，對Render Tree的計算通常只需要遍歷一次就可以完成，但table及其內(nèi)部元素除外，他們可能需要多次計算，通常要花3倍于同等元素的時間，這也是為什么要避免使用table布局的原因之一。

繪制渲染樹

遍歷渲染器樹，調(diào)用渲染器的paint（）方法，然后展示。

二、回流和重繪（reflow和repaint）

1. 理解回流和重繪

回流： 當(dāng)元素的結(jié)構(gòu)、位置、尺寸或某些屬性發(fā)生改變時，瀏覽器需要重新計算樣式和渲染樹；

重繪：當(dāng)元素發(fā)生的改變只影響了節(jié)點(diǎn)的一些樣式（背景色，邊框顏色，文字顏色等），瀏覽器只需要將新樣式賦予給這個元素并重繪它。

需要注意的是， 回流必將引起重繪，重繪不一定會引起回流。

2.如何觸發(fā)回流

（1）頁面首次渲染

（2）DOM樹變化（如：增刪可見dom節(jié)點(diǎn)）

（3）瀏覽器窗口resize

（4）元素尺寸或位置發(fā)生改變

（5）查詢布局信息，包括offsetLeft、offsetTop、offsetWidth、offsetHeight、 scrollTop/Left/Width/Height、clientTop/Left/Width/Height、調(diào)用了getComputedStyle()或者IE的currentStyle時，瀏覽器為了返回最新值，會觸發(fā)回流。

3. 如何觸發(fā)重繪

背景色、顏色、字體改變，（例如：color、background-color、visibility等，注意：字體大小發(fā)生變化時，會觸發(fā)回流）

三、可減少回流和重繪，優(yōu)化渲染性能

1.盡量避免改變和多次讀取布局屬性。如width, height, left, top。

2.除了transforms 或者 opacity屬性都會引起重繪，做動畫的時候要注意，盡量使用這兩個屬性；

3.將復(fù)雜的節(jié)點(diǎn)元素脫離文檔流，降低回流成本。

4.緩存布局信息

5.使元素進(jìn)行動畫效果的時候脫離文檔流，可先絕對定位，設(shè)置好后再恢復(fù)。

部分參考：;isappinstalled=0

javascript什么是回流

JavaScript是一種腳本語言，常用于網(wǎng)頁客戶端編程，使網(wǎng)頁在客戶端瀏覽器中，實(shí)現(xiàn)更多地動態(tài)功能，表現(xiàn)出更加豐富的視覺效果。

以下是“JavaScript”的標(biāo)準(zhǔn)解釋：

JavaScript一種直譯式腳本語言，是一種動態(tài)類型、弱類型、基于原型的語言，內(nèi)置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語言，最早是在HTML（標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用）網(wǎng)頁上使用，用來給HTML網(wǎng)頁增加動態(tài)功能。

1995年，由Netscape公司的Brendan Eich，在網(wǎng)景導(dǎo)航者瀏覽器上首次設(shè)計實(shí)現(xiàn)而成。因?yàn)镹etscape與Sun合作，Netscape管理層希望它外觀看起來像Java，因此取名為JavaScript。但實(shí)際上它的語法風(fēng)格與Self及Scheme較為接近。

網(wǎng)頁標(biāo)題：javascript回流,js重繪回流
URL鏈接：http://chinadenli.net/article30/dsspgpo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計公司、營銷型網(wǎng)站建設(shè)、建站公司、微信小程序、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站維護(hù)

廣告

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