html中ul标签的优化

wzyplus 发布于2019-08-01 15:55 / 1383人阅读

摘要：对于前端的优化接触的太少了，平时在端上感觉正常，但是到了移动端，时间一长就不行了。今天说说中的优化问题我给出了一种传统的写法耗时的一种优化的写法模拟一种业务流程吧，类似留言墙，大家留言后，要将留言显示在留言墙上面。

对于前端的优化接触的太少了，平时在pc端上感觉正常，但是到了移动端，时间一长就不行了。今天说说html中ul的优化问题,我给出了一种传统的写法(耗时的),一种优化的写法.
模拟一种业务流程吧，类似留言墙，大家留言后，要将留言显示在留言墙上面。
开始我们的代码编写吧
如果在平时我会这样写，但是假如我接收了一百万条数据，代码如下：




    
    没有进行性能优化的案例

整整使用了大约一分钟，我的天啊，我想大家早已散去，可以看到时间都花在了Rendering中，并且要等所有的li都渲染好了之后，才会显示，用户体验感极差.
优化方案就是减少Rendering.设定数量合适的li标签，根据位置调整li的内容与样式




  
  性能优化


  List的性能优化

再来看一眼性能图

同样的写法这样速度直接提高了20倍.

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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