js之图片加载与动态标签创建方式

                                                                            js之图片加载与动态标签创建方式

    在加载图片的过程中，时常会遇到由于网络等原因使得加载的图片要在很久之后才能够被加载出，这样在很大的程度上影响了用户的视觉感受。例如，如果我们直接在页面上使用img标签，在加载图片的中因为网络的问题，图片会一点一点的被加载。因此在这种情况下我们采用了下面的二种情况进行加载：

  

在这种情况下，我们先创建一个img对象，然后再用src引入图片，最后当图片加载完成之后才插入图片。这样的方式我们称之为图片的预加载方式。

第二种就是在最初的时候我们不去加载图片最后当点击或者其他方法时，再来促成这个图片的加载。这样的方式被称之为图片懒加载，用这样的方式在很大的程度上提高了整个网页或者时app的性能。为什么这样说呢，如果在最初的时候我们直接加载所有的图片，例如在淘宝网上购物时，我们查看商品，如果在最初的时候就全加载完，那么很明显这在性能上就大大的减少了。采用懒加载之后，图片是一部分一部分的加载，只有当你去查看这个部分时，图片才会被加载。

因此上面两种处理图片的方式对于用户交互，提高页面性能上都有很大的帮助。

文档碎片化，在这里我们要弄清楚整个页面呈现的过程，先是加载html树，然后再去加载css树，再dom树,最终再来进行页面的渲染，改变html树中的结构是最耗页面性能的。明白这个之后，让我们再来看看下面的这个例子：

在这种方式中，我们在ul中插入li标签。每插入一个li就会重新进行一次页面的渲染，现在这在很大的程度上降低了整个页面的性能，那么我们就想到了下面的方式来处理：

采用碎片化来进行处理，使用document.createDocumentFragment()来创建碎片化，这种方式不会在html中多一个层级结构。因此对于上面的页面的加载方式中，我们每次都将li插入到这个碎片化当中，当所有的li都创建完之后，再将这个碎片化插入到ul当中，这样整个页面就只渲染一次，之前是渲染1000次。因此很明显在性能上会有很大的提升。因此在创建动态标签时，我们多考虑使用这种碎片化的思想。来辅助进行动态标签的创建。