使用javascript动态加载元素的性能？

我正在研究用javascript动态加载css样式表、javascript脚本和html元素。这一切似乎都很好，但我想知道这样加载有什么缺点？这样做的好处和坏处是什么？如果我这样加载整个页面会怎么样

页面加载是否较慢

这是否会使页面加载更加同步/异步

这是否会向服务器发送大量请求？（例如，延迟加载程序）

---

这会占用服务器或客户端的资源吗？

这取决于您的具体需求。如果你没有很多css等，就不建议使用HTML。如果你不动态加载它，HTML会更好，因为如果你想要一个SEO友好的网站，这是最重要的内容，用javascript加载它对搜索引擎没有任何帮助

这里有一个预加载图像的简单片段。例如，如果您有带有悬停图像的按钮或元素，并且您不想让它们在您将鼠标放在它们上面时显示它们是如何加载的，那么它有时非常有用

var preloadcache = [];
var preloadImages = function(arr){
    for(var i in arr){
        preloadcache.push(function(){
            var img = document.createElement("img");
            img.setAttribute("src",arr[i]);
            return img;
        }());
    }
}

只需将所有资源放在一个数组中，并使用它调用函数：

var myimages = ['path/to/image.png','another/path/example.jpg','ohyes.gif'];
preloadImages(myimages);

但是，如果要将元素加载到DOM的主体或主体，只需创建它们并按如下方式附加它们：

var body = documents.getElementsByTagName("body")[0];
var head = documents.getElementsByTagName("head")[0];

// then prepare your elements

var p = document.createElement("p");
p.setAttribute("class","myclass");
p.innerHTML = 'some text with <span> html </span>';

// the append them

body.appendChild(p);

var body=documents.getElementsByTagName（“body”）[0]；
var head=documents.getElementsByTagName（“head”）[0]；
//然后准备好你的元素
var p=document.createElement（“p”）；
p、 setAttribute（“类”、“myclass”）；
p、 innerHTML='带有html的某些文本'；
//附加
体感儿童（p）；

使用脚本执行此操作，但尽量不在innerHTML中包含代码，而是将它们放在单独的文件中，只设置它们的src属性。要小心，因为一旦添加它们，它们就会运行。请尝试使用

document.onload=function（）{…}

进行此操作

页面加载是否较慢

这是否会向服务器发送大量请求？（例如，延迟加载程序）

是和否

如果页面中几乎没有内容，则加载速度非常快。通常，您只想加载必要的内容，因此是“延迟加载”。对于第一个页面加载，您可能需要加载必要的CSS。至于JS，您可能希望最后加载它们（就在

之前），因为加载脚本在浏览器中是不一致的（有些并行加载，有些串行加载，但它们按照定义的顺序执行）。另外，为了安全起见，在执行这些脚本时，您需要在这些脚本中操作的元素是存在的（但现在jQuery的

.ready（）

保存了这些元素）

至于淹没服务器。。犯错误更像是霸占“管道”。浏览器有大约2-8个“管道”来下载文件。例如，IE6有两个管道。如果你已经有了一个视频流，它需要一个管道，这意味着其他的东西必须使用另一个管道加载，现在他们串联加载-使它变慢。缓解这种情况的一种方法是缩小（收缩）并合并（放入一个）文件。就我个人而言，我合并了库（jQuery和其他库），因为它们从未被更改过。不经常更改的CSS，我压缩和合并。它们不仅更小，而且文件也更少——不会占用管道

这是否会使页面加载更加同步/异步

网页总是从上到下解析，但它们的下载取决于浏览器如何处理。有些浏览器以并行方式加载文件，有些则以串行方式加载（如IE中的脚本），但它们是自上而下执行的。这就是为什么脚本应该最后加载，因为解析会妨碍执行线程。页面中间的一个无响应的脚本将在页面中途停止处理。

这会占用服务器或客户端的资源吗

服务器资源，是的。如果您有太多的文件需要请求，这会给您的服务器带来压力。这就是为什么需要缓存系统，包括脚本和浏览器缓存。所谓浏览器缓存，我指的是存储CSS、JS、图像等的自然缓存。然而，AJAX并没有被缓存（据我所知），这就是为什么您需要在JS中实现自己的缓存

让我们以Twitter为例。您可以查看一个人的推文。流程是单击、AJAX请求帖子、加载以查看和完成。现在，你想看另一个人。同样的程序。现在你想回到另一个人身上。作为程序员/服务器维护人员，您是否希望再次加载该内容？您想再次请求吗？不，相反，程序员使用对象/本地存储器来存储数据。这样，就不会有不必要的请求。至于过期。。你得弄清楚

---

总的来说，这既有利也不利。这不像是介绍一种解决所有问题的方法。这就像有一把枪，你可以保护自己，但伤害别人，或者反过来。正是找到了平衡，才使一切顺利。

谢谢你提供的信息，我不知道这一点。但是，为了让服务器接收请求，我想知道，对于添加到DOM中的每个新元素，如果需要图像、样式表等资源，脚本是否需要单独的http请求。是这样吗？如果是，您如何对此进行优化？浏览器只加载一次图像，无论该图像在页面中使用了多少次（请注意，一个动画GIF的多个实例如何同时移动）。然而，从服务器获取资源需要一个请求。但是，浏览器缓存可以帮助您。获取缓存的内容从缓存中检索，而不是从服务器请求。。直到到期。