结构体
在后端我有以下结构.在public_html和几个子页面中有一个主页面,每个子页面都具有不同的特定CSS规则.所有最小化的文件的创建都是由脚本完成的,所以没有额外的复杂性.为了简单起见,我们假设这是结构,尽管它更复杂：
/public_html /index.PHP /style.css ~50kb /min.css ~100kb /subjects /index.PHP /style.css ~20kb /min.css ~10kb /books /index.PHP /style.css ~20kb /min.css ~10kb ...
第一个要求
所以当用户首先在子页面上输入时,他们会收到这个HTML代码：
<!DOCTYPE html>
<html>
<head>
<link href="/subjects/min.css" rel="stylesheet" type="text/css">
</head>
<body>
All the body here
<link href="/min.css" rel="stylesheet" type="text/css">
</body>
如您所见,用户将小页面中的该页面所需的所有css代码加载到小型文件中.请注意,/subjects/min.css比/min.css小很多,这将使第一个请求加载更快.然后,在完整的html和css正确加载之后,/min.css将开始加载.此文件包含所有子页面样式.
请注意,it’s appropriate to put the <link> within the <body> tag,即使它没有工作,没有问题,因为页面特定的样式已经加载.为什么我在这里加载？继续阅读：
以下请求
<!DOCTYPE html>
<html>
<head>
<link href="/min.css" rel="stylesheet" type="text/css">
</head>
<body>
All the body here
</body>
/min.css应该已经从第一个请求缓存.但是,如果由于任何原因,它不会,现在将加载完全最小化的风格,如在任何正常的网站.这将是回退的情况.
这是一个有效的方案吗？为什么以前没有看到过这样的事情？它是否包含任何逻辑错误？
这些是我可以看到的主要问题,不够强大,与好处相比：
>它增加了一些额外的复杂性的代码.
>一旦额外的请求,一切都已经加载后,需要做.这将在服务器上增加一点点开销,但它是一个静态文件.
关于评论的注意事项：
>浏览器会减少请求.这是真的,这样浏览器就会有一个额外的请求.但是,在加载html和css之后,所以这不会很好地影响html.
>缓存.是的,我正在尽力抓住这个档案.可以对< link>的缓存进行一个点.但是,如果它位于< body>之内,因为我不知道缓存的行为是否不一样,所以我只是在问题中假设是.
CSS可能是一个很好的例子,但是同样的原则(通过ajax btw加载最后一个)
像说,图像.
我们在我们网站的第1页,我们知道访问者将访问第2页的99.999％的时间,我们知道,在第2页,我们有一些大的图像可以服务,是的,然后我们可以默认加载他们第1页已经加载 – 准备就绪,那么该网站在导航时“感觉到”快.移动Web应用程序/站点/
那么是的
对于任何类型的文件,您可能希望为后续请求“预缓存”是相同的原则.
>加载页面
>而访问者正在读取加载的页面,预取文件/数据
你期望他们可能要求下一个. (图像,结果数据的第2页,javascript和css).这些都是通过ajax加载的,因为不能保持页面的“onload”事件触发 – 与您的示例的主要区别
但是,为了回答您的目标 – 允许加载页面尽可能快
如果我们不从静态服务器,无Cookie域以及最终的内容传送网络提供静态文件,那么这样做或任何一种“预先加载”技术对于“传送速度”来说都是最小化的.
实现允许页面加载尽可能快的目标是静态文件的服务与动态内容的不同(PHP rendered et all)
1)为这些资源创建一个子域(css,js,images / media) – static.yourdomain.com
3)查看使用像http://cdnify.com/或www.akamai.com这样的服务.
这些是提供静态内容的性能和速度步骤. (希望没有吮鸡蛋,只是直接相关的问题,如果有人不熟悉这个)
“预先装载”技术仍然很棒,
但是它们现在更多地涉及预加载数据的可用性,而不是速度.
编辑/更新：
澄清“速度”和“可用性速度”.
>速度是通过软件来判断的,当页面“onload”事件触发时(这就是为什么重要的是通过ajax加载这些’pre emptive resources’).
>感知速度(可用性)是用户可以快速查看和与内容进行交互(即使页面加载事件可能未被触发).
编辑/更新
在发布的几个方面,在评论中提到这些额外的’pre emptive’资源通过javascript / ajax加载.
原因是不要拖延页面“onload”事件触发.
许多网站测试速度工具(yslow,google ..)使用这个’onload’事件来判断页面速度.
这里我们延迟页面“onload”事件.
<body> ... page content <link rel="stylesheet" href="/nextpage.css" /> </body>
这里我们通过javascript /某些情况Ajax(页面数据)加载,并且不要阻止页面加载事件
<body>
.. page content
<script>
window.onload = function () {
var style = document.createElement( 'link' );
style.rel = 'stylesheet';
style.type = 'text/css';
style.href = '/nextpage.css';
document.getElementsByTagName( 'head' )[0].appendChild( style );
};
</script>