动态加载/卸载javascript和css样式表是否有优势?

背景: 我正在整理一个将使用ajax作为更改内容的主要方法的网站。这样,主页框架和图像不必在每次页面更改时不断重新加载。主框架有自己的site.css样式表。 问题1: 是否值得将所有样式表信息放入单个样式表中?我认为这会使网站更少模块化。每次添加/删除新页面或内容时,都必须更新css(假设内容需要不同的样式信息)。 问题1.1: 同样的问题,但用javascript。 问题2: 如果有多个样式表是值得的(我认为是这样),那么在不使用样式表时卸载它是有益的。例如,我加载profile.php页面,以便动态加载profile.css。然后用户更改到settings.php页面,我卸载profile.css并加载settings.css。这种恒定的装载/卸载是否会达到油箱性能甚至节省网站尺寸? 问题2.1 与上述问题相同但适用于javascript函数。     
已邀请:
将javascript或css文件下载到计算机后,它们会被浏览器缓存。因此,您不会产生另一个HTTP请求的额外成本。延迟加载脚本和样式表可能有意义,但是一旦将这些Web资产发送到客户端,就没有任何意义。 最好使用某种机制来编译脚本和样式表,以便将每个资产类型的初始http请求最小化。在许多情况下,只有一个样式表和一个javascript文件将是一个建筑噩梦,但这并不意味着你仍然无法以这种方式将它呈现给浏览器。我使用.NET,所以我不确定你是如何在PHP中处理它的,但我确信它的功能在那里。     
答案1: 这完全是关于平衡。您应该保留不同的CSS和JS文件,但在部署之前将它们全部合并为一个(一个CSS文件和一个JS文件)。基本上没有必要用一个大文件开发,因为有些工具可以为你编译它们。 棘手的部分(取决于您的网站的复杂性)是弄清楚哪些CSS和JS代码经常使用,以便在每个页面上调用。如果您的代码只能在一个页面上使用,您应该动态加载它...除非您的整个站点只有5页。就像我说的,平衡。 答案1.1和1.2: 不,不值得。只要加载CSS和JS文件,它们就会缓存在用户的计算机上。因此卸载它们毫无意义。     
这对我来说有些过早的优化。让我们看看SO的加载时间:   
all.css
- 46.8 Kb - 加载时间87 ms 只是为了更多地推动这一点,这里是这个特定SO页面上的一堆其他项目的加载时间(通过光纤连接在我四岁的笔记本电脑上): 以下是(部分)这些组件的相对大小: 我认为,如果你能够很好地构建网站的其余部分,那么你不必担心在最后几毫秒内优化它们,直到它们真正重要。     
每次您需要另一个css或js文件时,您的浏览器都会请求它。您发出的请求越多,页面加载的时间就越长。     
问题1 是的,因为如前所述,一旦下载了css就会被缓存。这就是为什么通常在包含样式信息时最好不要内联定义它。您可以使用一个简单的PHP脚本来处理这个问题,该脚本将内容类型声明为css,然后将您的各个css文件包含在一起。
header("content-type: text/css");
$file = file_get_contents('your.css');
$file .= file_get_contents(...)
然后在链接标记中正常引用它。
<link rel="stylesheet" href="yourCSS.php" >
问题1.1 与以前相同的答案只需使用它:
header("content-type: application/javascript");
问题2 不会。一旦加载,它将始终可以在内存缓存中访问。 Googles GWT框架实际上编译了所有外部内容,并将其作为一个庞大的整体包进行传输。这是因为每个域只能执行2个并发HTTP_Requests。这也是为什么雅虎的速度指南建议你将你的CSS放在页面的顶部,你的javascript放在body标签的底部。 问题2.1 不。但是请尽量保持外部文件小。始终缩小生产代码。     
答案1 尽管根据需要加载CSS规则可能会有一些好处,但我建议不要这样做。仅仅因为这不符合您的站点或Web应用程序的统一布局。您的设计应该在所有页面中标准化,并且无论您通过Ajax请求加载什么“模块”,它们都应使用与主页面相同的布局。 JQuery UI就是一个很好的例子;无论你是否使用小部件,它的风格仍然是下载的。 但是,如果您需要将特定样式应用于从请求中检索的HTML位,那么您只需将这些规则放在
<head>
部分附加的
<style>
标记内,或将CSS文件添加到
<head>
,或者甚至有您的规则设置为HTML元素的
style
属性。 答案1.1 如果你应该根据需要加载Javascript代码,这个代码不应该重新加载两次,除非你真的需要重新加载代码,原因有些不明...... 但无论如何,CSS和Javascript都不应该“卸载”,没有任何意义。 答案2和2.1 如果几年前你问过这个问题,答案可能是“加载一个样式表和/或Javascript更好”,但这不再是真的了。随着互联网连接速度和计算机性能的提高,浏览器变得非常高效,并且麻烦不值得性能提升(大多数时候)。此外,如果这些资源是静态的(URL不会更改),则会对它们进行缓存和重用,但是可以使用很多资源。如果期待等待,用户通常不介意等待(参见第2.10节),或者这是第一次。     

要回复问题请先登录注册