html中ul標(biāo)簽的優(yōu)化

wzyplus 發(fā)布于2019-08-01 15:55 / 1404人閱讀

摘要：對(duì)于前端的優(yōu)化接觸的太少了，平時(shí)在端上感覺(jué)正常，但是到了移動(dòng)端，時(shí)間一長(zhǎng)就不行了。今天說(shuō)說(shuō)中的優(yōu)化問(wèn)題我給出了一種傳統(tǒng)的寫法耗時(shí)的一種優(yōu)化的寫法模擬一種業(yè)務(wù)流程吧，類似留言墻，大家留言后，要將留言顯示在留言墻上面。

對(duì)于前端的優(yōu)化接觸的太少了，平時(shí)在pc端上感覺(jué)正常，但是到了移動(dòng)端，時(shí)間一長(zhǎng)就不行了。今天說(shuō)說(shuō)html中ul的優(yōu)化問(wèn)題,我給出了一種傳統(tǒng)的寫法(耗時(shí)的),一種優(yōu)化的寫法.
模擬一種業(yè)務(wù)流程吧，類似留言墻，大家留言后，要將留言顯示在留言墻上面。
開始我們的代碼編寫吧
如果在平時(shí)我會(huì)這樣寫，但是假如我接收了一百萬(wàn)條數(shù)據(jù)，代碼如下：




    
    沒(méi)有進(jìn)行性能優(yōu)化的案例

整整使用了大約一分鐘，我的天啊，我想大家早已散去，可以看到時(shí)間都花在了Rendering中，并且要等所有的li都渲染好了之后，才會(huì)顯示，用戶體驗(yàn)感極差.
優(yōu)化方案就是減少Rendering.設(shè)定數(shù)量合適的li標(biāo)簽，根據(jù)位置調(diào)整li的內(nèi)容與樣式




  
  性能優(yōu)化


  List的性能優(yōu)化

再來(lái)看一眼性能圖

同樣的寫法這樣速度直接提高了20倍.

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/50208.html

相關(guān)文章

網(wǎng)站代碼優(yōu)化

摘要：將面試整理的網(wǎng)站優(yōu)化資料記一記，針對(duì)移動(dòng)端的代碼說(shuō)的。而第三種里面在移動(dòng)端里使用號(hào)比數(shù)組快很多，在端得看瀏覽器，不同瀏覽器不同版本對(duì)這兩種方式的優(yōu)化不同。盡量減少對(duì)的操作這個(gè)例子需要?jiǎng)討B(tài)添加，動(dòng)態(tài)刪除，每個(gè)標(biāo)簽有事件。將面試整理的網(wǎng)站優(yōu)化資料記一記，針對(duì)移動(dòng)端的代碼說(shuō)的。 html 1: 標(biāo)簽嵌套層級(jí)不要太深，標(biāo)簽盡量簡(jiǎn)潔化.如懶加載后將data屬性去除 2: DNS預(yù)先處理 dns...

xcold 2019-08-19 17:18 評(píng)論0 收藏0
網(wǎng)站代碼優(yōu)化

摘要：將面試整理的網(wǎng)站優(yōu)化資料記一記，針對(duì)移動(dòng)端的代碼說(shuō)的。而第三種里面在移動(dòng)端里使用號(hào)比數(shù)組快很多，在端得看瀏覽器，不同瀏覽器不同版本對(duì)這兩種方式的優(yōu)化不同。盡量減少對(duì)的操作這個(gè)例子需要?jiǎng)討B(tài)添加，動(dòng)態(tài)刪除，每個(gè)標(biāo)簽有事件。將面試整理的網(wǎng)站優(yōu)化資料記一記，針對(duì)移動(dòng)端的代碼說(shuō)的。 html 1: 標(biāo)簽嵌套層級(jí)不要太深，標(biāo)簽盡量簡(jiǎn)潔化.如懶加載后將data屬性去除 2: DNS預(yù)先處理 dns...

Forest10 2019-08-28 18:28 評(píng)論0 收藏0
網(wǎng)站代碼優(yōu)化

摘要：將面試整理的網(wǎng)站優(yōu)化資料記一記，針對(duì)移動(dòng)端的代碼說(shuō)的。而第三種里面在移動(dòng)端里使用號(hào)比數(shù)組快很多，在端得看瀏覽器，不同瀏覽器不同版本對(duì)這兩種方式的優(yōu)化不同。盡量減少對(duì)的操作這個(gè)例子需要?jiǎng)討B(tài)添加，動(dòng)態(tài)刪除，每個(gè)標(biāo)簽有事件。將面試整理的網(wǎng)站優(yōu)化資料記一記，針對(duì)移動(dòng)端的代碼說(shuō)的。 html 1: 標(biāo)簽嵌套層級(jí)不要太深，標(biāo)簽盡量簡(jiǎn)潔化.如懶加載后將data屬性去除 2: DNS預(yù)先處理 dns...

leoperfect 2019-08-01 14:59 評(píng)論0 收藏0
前端基礎(chǔ)-HTML的的標(biāo)簽詳解

閱讀目錄一、head內(nèi)常用標(biāo)簽二、 HTML語(yǔ)義化三、字符實(shí)體四、 h系列標(biāo)簽五、 p標(biāo)簽六、 img標(biāo)簽七、 a標(biāo)簽八、列表標(biāo)簽九、 table標(biāo)簽十、 form標(biāo)簽一、 head內(nèi)常用標(biāo)簽 1、meta相關(guān) #1、指定字符集 #2、頁(yè)面描述 #3、關(guān)鍵字：有助于搜索引擎SEC優(yōu)化，再怎么優(yōu)化也抵不過(guò)競(jìng)價(jià)排名 #4、3秒后跳轉(zhuǎn) #5、三秒刷新 ...

番茄西紅柿 2019-04-23 13:42 評(píng)論0 收藏0
淺聊SEO

摘要：白帽是搜索引擎提倡的，也是一種良性競(jìng)爭(zhēng)。這當(dāng)然不被搜索引擎提倡，甚至于說(shuō)是頭疼的，還需要想辦法如何在搜索結(jié)果內(nèi)剔除掉那些頁(yè)面。影響搜索引擎對(duì)網(wǎng)站排名的合理和公正性。扁平化目錄層次網(wǎng)站層次既然要清晰，目錄最好不要超過(guò)三次分級(jí)。 SEO【search engine optimization】即搜索引擎優(yōu)化。搜索引擎對(duì)用戶來(lái)說(shuō)，就是搜東西，那他是怎樣展示關(guān)鍵詞的相關(guān)東西呢？這就需要有人每天...

yedf 2019-08-02 16:14 評(píng)論0 收藏0