如何實(shí)現(xiàn)Tab選項(xiàng)卡內(nèi)容的懶加載？小白，這位還在成長中的前端工程師，如果有任何錯(cuò)誤，請(qǐng)跟蹤研究并改正！制表符切換在項(xiàng)目中使用得太頻繁。為了提高性能，只需進(jìn)入頁面并要求他在當(dāng)前頁面中只加載一個(gè)選項(xiàng)卡。這

如何實(shí)現(xiàn)Tab選項(xiàng)卡內(nèi)容的懶加載？

小白，這位還在成長中的前端工程師，如果有任何錯(cuò)誤，請(qǐng)跟蹤研究并改正！制表符切換在項(xiàng)目中使用得太頻繁。為了提高性能，只需進(jìn)入頁面并要求他在當(dāng)前頁面中只加載一個(gè)選項(xiàng)卡。這樣，一旦進(jìn)入頁面，所有數(shù)據(jù)都將被加載。如果數(shù)據(jù)太多，用戶將等待加載數(shù)據(jù)。用戶體驗(yàn)很差?，F(xiàn)在項(xiàng)目使用元素UI的tab效果。其原理是顯示和隱藏顯示。這里的問題是，這種隱藏是看不到的，但是DOM渲染仍然會(huì)被渲染。因此，為了解決這個(gè)問題，我們使用V-IF讓當(dāng)前頁面為真，下一個(gè)頁面為假，這樣當(dāng)你點(diǎn)擊時(shí)，你可以在你點(diǎn)擊的標(biāo)簽下請(qǐng)求創(chuàng)意。當(dāng)然，你不能總是讓它是V-IF，否則性能會(huì)更差，所以我們以后可以繼續(xù)點(diǎn)擊哪個(gè)選項(xiàng)卡是true，記住其他選項(xiàng)卡不需要改為false，因?yàn)檫@些元素UI已經(jīng)完成了，以后會(huì)繼續(xù)自動(dòng)顯示。這樣，DOM就不會(huì)經(jīng)常被操作，性能也會(huì)得到提高。我不知道有沒有錯(cuò)。如果有任何錯(cuò)誤，請(qǐng)理解和改變后

這是近九個(gè)月的工作和學(xué)習(xí)在前端。其實(shí)，在接下來的三個(gè)月里，前端并不比后端容易，我對(duì)業(yè)務(wù)很熟悉，能熟練使用jQuery，掌握了MVC框架（公司業(yè)務(wù)使用的MVC輪子），編寫了各種插件（彈出、分頁、氣泡、日歷、旋轉(zhuǎn)木馬圖、懶加載等）

在過去的三個(gè)月里，我通讀了zepto源代碼（發(fā)現(xiàn)了幾個(gè)bug），后來我構(gòu)建了一個(gè)MVC輪子，然后開始學(xué)習(xí)webpack、ES6、Vue和react的配置。現(xiàn)在我正在學(xué)習(xí)react而沒有任何指導(dǎo)，所以我將看一看GIT上面的源代碼。

感覺前端非常面向積累，我需要投入足夠的時(shí)間

大三計(jì)算機(jī)妹子，一開始想做java方面的，后來想做前端，求教？

在這個(gè)問題上，我們可以從兩個(gè)方面考慮：服務(wù)器/網(wǎng)站建設(shè)者和客戶端/用戶端：

如果您是網(wǎng)站建設(shè)者，您可以考慮但不限于：

1。選擇強(qiáng)大的互聯(lián)網(wǎng)服務(wù)提供商，選擇高帶寬、可靠的服務(wù)器部署服務(wù)器程序，如云服務(wù)器，具有負(fù)載均衡能力。

2. 服務(wù)器端采用靜態(tài)文件生成技術(shù)，采用CDN加速靜態(tài)資源。

3. 使用緩存提高加載速度。

1. 選擇網(wǎng)速快、非人員密集的地方上網(wǎng)，最好用有線上網(wǎng)。

2. 選擇處理器能力強(qiáng)、內(nèi)存/緩存大的電腦或手機(jī)。

3. 及時(shí)清理瀏覽器緩存和其他文件。電腦和手機(jī)運(yùn)行時(shí)間過長，產(chǎn)生大量垃圾文件，處理器和內(nèi)存耗盡，這將減慢網(wǎng)頁的打開速度。

如何提升網(wǎng)站的打開速度？

關(guān)于如何使用jQuery預(yù)加載圖像，我將直接給您一些代碼。

如下：<script type=“text/JavaScript”SRC=“jQuery/jQuery-1.10.2最小js“></script>

<script type=”文本/javascript”src=”圖像/jquery.lazyload.js查詢“></script>

<script type=”text/javascript”charset=”utf-8“>

$（函數(shù)（）{

$（”img“）.lazyload（{

效果：”Fadein“

}）

</script>

<！--HTML代碼-->

<img SRC=“預(yù)加載圖片地址”data original=“實(shí)際圖片地址”border=“0”/>