网页优化:缩小后是否应该将CSS和JS插入HTML资源中

Webpage optimization: Should CSS and JS be inserted into the HTML resource after minification?

本文关键字：JS CSS 插入 HTML 资源 优化 缩小 是否 网页      更新时间：2023-09-26

将所有JS和CSS压缩成一个缩小的文件，并从HTML页面链接到它们是一种合理的方法，这似乎是许多网站进行优化的地方。

然而，我很少看到一个网站只有一个资源负载。

我的问题是，拥有这样的三个资源是否与获取它们的内容并将其放入标签以生成一个要加载的资源完全相同。对于JS来说，这对<script>标签来说很简单（去掉src并将缩小的JS放入标签中），而对于CSS来说，这只是用<style type="text/css" /> ...minified CSS... </style>替换<link rel="stylesheet" ... />。

这是将页面压缩成尽可能小的包（希望是一个TCP事务）的常见做法吗？

如果没有别的，它大大简化了Web服务器软件的工作。

我会将它们分开，原因有两个：

  1. 浏览器可以使用多个套接字来下载内容

  2. 脚本/样式表可以缓存并在其他html页面中重复使用，因此只能下载一次

我相信这不会影响移动设备等设备的速度优化，但在宽带连接上，这不会有太大区别（显然速度是一个很好的优化，我并不是说不是），但从我所读到的内容来看，尽可能从多个服务器上服务器所有内容/图像以及代码优化不是更好吗？芒福德的内容将节省总页面大小。但我认为，只要你没有多个CSS页面和多个js文档并对它们进行优化，代码是在页面上还是通过src文件都无关紧要

.页眉{颜色：#000000；}.测试{颜色：#000000；}进入.标头，.test{颜色：#000000；}

缩小CSS，不确定这是否是你想要的，但我相信如果你优化得太多，你会花更多的时间进行优化，因为你可能只增加了0.001秒的速度。

链接资源并将其嵌入html页面是一样的。但是在多个页面上使用并不方便。然后你必须重复你自己。

如果你把所有的脚本和css放在一起，请记住：

在大多数情况下，大部分JavaScript代码处理用户启动的事件，如鼠标单击和拖动。所有这些用户触发的事件都发生在加载页面并触发onload事件之后。为了推迟这些JavaScripts的加载，在包含文档的头部插入一个JavaScript事件侦听器，强制在onload事件之后加载外部文件。（谷歌开发者提示）

这是一个代码示例，让它更清楚，延迟脚本将在基本页面元素形成后加载：

 // Add a script element as a child of the body
 function downloadJSAtOnload() {
 var element = document.createElement("script");
 element.src = "deferredfunctions.js";
 document.body.appendChild(element);
 }
 // Check for browser support of event handling capability
 if (window.addEventListener)
 window.addEventListener("load", downloadJSAtOnload, false);
 else if (window.attachEvent)
 window.attachEvent("onload", downloadJSAtOnload);
 else window.onload = downloadJSAtOnload;
相关文章：