html通過(guò)js渲染數(shù)據(jù) 怎樣保證js在頁(yè)面元素渲染完后再執(zhí)行?
怎樣保證js在頁(yè)面元素渲染完后再執(zhí)行? 虛擬用戶.js你需要把watch和nexttick方法結(jié)合起來(lái)。具體方法如下。具體步驟:1。在頁(yè)面上加載數(shù)據(jù)列表之后,頁(yè)面會(huì)自動(dòng)滾動(dòng)到中間的列表元素。列表數(shù)據(jù)呈
怎樣保證js在頁(yè)面元素渲染完后再執(zhí)行?
虛擬用戶.js你需要把watch和nexttick方法結(jié)合起來(lái)。具體方法如下。具體步驟:
1。在頁(yè)面上加載數(shù)據(jù)列表之后,頁(yè)面會(huì)自動(dòng)滾動(dòng)到中間的列表元素。列表數(shù)據(jù)呈現(xiàn)完成后,計(jì)算列表的高度,然后控制到指定行的定位。首先,讓我們介紹一下在第一次嘗試中沒(méi)有生效的計(jì)劃,這也是你最容易犯錯(cuò)誤的地方,虛擬用戶.js提供的mounted函數(shù)表示掛載到實(shí)例后調(diào)用鉤子。
2. 運(yùn)行后,發(fā)現(xiàn)在執(zhí)行mounted期間獲得的高度值不正確。您還可以發(fā)現(xiàn)此時(shí)沒(méi)有呈現(xiàn)頁(yè)面,并且列表塊仍然為空。
3. 查詢官方API文檔時(shí),我們發(fā)現(xiàn)有一個(gè)nexttick方法,即在下一個(gè)DOM更新周期結(jié)束后執(zhí)行延遲回調(diào)。修改數(shù)據(jù)后立即使用此方法獲取更新的dom。使用后,我發(fā)現(xiàn)它仍然不能解決我需要的效果。
4. 繼續(xù)查詢API文檔并找到watch方法,該方法用于觀察Vue實(shí)例上的數(shù)據(jù)更改。對(duì)應(yīng)一個(gè)對(duì)象,鍵是觀察表達(dá)式,值是對(duì)應(yīng)的回調(diào)。再試一次,你會(huì)發(fā)現(xiàn)它運(yùn)行后仍然無(wú)法工作。
5. 最后將watch和nexttick{顯示列表:函數(shù)(){ 這是戈普萊斯換句話說(shuō),[show]~}頁(yè)的對(duì)應(yīng)表是簡(jiǎn)單綁定的。
內(nèi)部工作原理是瀏覽器引擎解析HTML的DOM元素,最終形成屏幕像素,構(gòu)成可見(jiàn)的點(diǎn)、線、面。
渲染過(guò)程將調(diào)用GPU進(jìn)行圖形渲染,渲染的數(shù)據(jù)源是前端元素或標(biāo)簽。
渲染速度與代碼編寫密切相關(guān)。如果是一個(gè)大的周期,你會(huì)看到頁(yè)面加載非常慢。也可以說(shuō)渲染非常慢,因?yàn)閳D形和文本的顯示需要完成整個(gè)計(jì)算。
整個(gè)過(guò)程如下:后端HTML頁(yè)作為靜態(tài)文件存在。當(dāng)前端請(qǐng)求時(shí),后端不修改文件的內(nèi)容,而是直接以資源的形式返回給前端。獲取頁(yè)面后,前端修改HTML的內(nèi)容,并根據(jù)HTML頁(yè)面上編寫的JS代碼進(jìn)一步顯示。
答題完畢,供參考
!張飛鴻
這個(gè)問(wèn)題的核心不是技術(shù),而是什么是“JS渲染完成”。
讓我舉個(gè)例子。有一個(gè)頁(yè)面,每5秒從后端提取一次數(shù)據(jù),更新頁(yè)面上的幾個(gè)項(xiàng)目,并且永遠(yuǎn)不會(huì)這樣結(jié)束。何時(shí)“呈現(xiàn)”頁(yè)面?