DOM内脚本和样式的性能优势

performance benefit of script and style inside DOM

本文关键字：性能 样式 脚本 DOM      更新时间：2023-09-26

我正在使用PHP模板构建一个网站。

我有很多外部的CSS库和样式表，他们链接到主要的HTML文档与<link rel="stylesheet">(他们应该的方式)。

我对外部脚本(<script src="...">)做同样的事情。

将上面的所有资源连接到一个文本块中，并将其直接插入PHP的主文档中，是否有好处?

的例子:

<html>
   <head>
     <style>
       <?php echo $style; // Huge block of CSS (maybe 300KB) ?>
     </style>
  </head>
  <body>
    ....
     <script>
       <?php echo $scripts; // Also pretty big maybe 500KB ?>
     </script>
  </body>
</html>

我知道这将取消客户端缓存这些资源的好处。然而，我认为，它会给我一个好处，与初始加载时间，因为更少的连接需要获取资源。

我将面临来自DOM的任何性能瓶颈吗?

任何想法吗?

我知道可以使用许多不同的浏览器附件来监视这些进程，包括大多数浏览器中的本机web监视器。

我不能马上告诉你，但我认为这实际上可能会增加加载时间，因为PHP是在HTML之前处理的。

查看:http://getfirebug.com/

使用该工具，您可以检查连接次数并进行相应调整。

相关文章：