html中ul標簽的優化

wzyplus 發布于2019-08-01 15:55 / 1379人閱讀

摘要：對于前端的優化接觸的太少了，平時在端上感覺正常，但是到了移動端，時間一長就不行了。今天說說中的優化問題我給出了一種傳統的寫法耗時的一種優化的寫法模擬一種業務流程吧，類似留言墻，大家留言后，要將留言顯示在留言墻上面。

對于前端的優化接觸的太少了，平時在pc端上感覺正常，但是到了移動端，時間一長就不行了。今天說說html中ul的優化問題,我給出了一種傳統的寫法(耗時的),一種優化的寫法.
模擬一種業務流程吧，類似留言墻，大家留言后，要將留言顯示在留言墻上面。
開始我們的代碼編寫吧
如果在平時我會這樣寫，但是假如我接收了一百萬條數據，代碼如下：




    
    沒有進行性能優化的案例

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




  
  性能優化


  List的性能優化

再來看一眼性能圖

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

GPU云服務器云服務器 html ul的圖標 html的ul橫放 ul標簽 html的ul和ol

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50208.html

網站代碼優化

摘要：將面試整理的網站優化資料記一記，針對移動端的代碼說的。而第三種里面在移動端里使用號比數組快很多，在端得看瀏覽器，不同瀏覽器不同版本對這兩種方式的優化不同。盡量減少對的操作這個例子需要動態添加，動態刪除，每個標簽有事件。將面試整理的網站優化資料記一記，針對移動端的代碼說的。 html 1: 標簽嵌套層級不要太深，標簽盡量簡潔化.如懶加載后將data屬性去除 2: DNS預先處理 dns...

xcold 2019-08-19 17:18 評論0 收藏0
網站代碼優化

摘要：將面試整理的網站優化資料記一記，針對移動端的代碼說的。而第三種里面在移動端里使用號比數組快很多，在端得看瀏覽器，不同瀏覽器不同版本對這兩種方式的優化不同。盡量減少對的操作這個例子需要動態添加，動態刪除，每個標簽有事件。將面試整理的網站優化資料記一記，針對移動端的代碼說的。 html 1: 標簽嵌套層級不要太深，標簽盡量簡潔化.如懶加載后將data屬性去除 2: DNS預先處理 dns...

Forest10 2019-08-28 18:28 評論0 收藏0
網站代碼優化

摘要：將面試整理的網站優化資料記一記，針對移動端的代碼說的。而第三種里面在移動端里使用號比數組快很多，在端得看瀏覽器，不同瀏覽器不同版本對這兩種方式的優化不同。盡量減少對的操作這個例子需要動態添加，動態刪除，每個標簽有事件。將面試整理的網站優化資料記一記，針對移動端的代碼說的。 html 1: 標簽嵌套層級不要太深，標簽盡量簡潔化.如懶加載后將data屬性去除 2: DNS預先處理 dns...

leoperfect 2019-08-01 14:59 評論0 收藏0
前端基礎-HTML的的標簽詳解

閱讀目錄一、head內常用標簽二、 HTML語義化三、字符實體四、 h系列標簽五、 p標簽六、 img標簽七、 a標簽八、列表標簽九、 table標簽十、 form標簽一、 head內常用標簽 1、meta相關 #1、指定字符集 #2、頁面描述 #3、關鍵字：有助于搜索引擎SEC優化，再怎么優化也抵不過競價排名 #4、3秒后跳轉 #5、三秒刷新 ...

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

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

yedf 2019-08-02 16:14 評論0 收藏0