Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

让页面上静态的部分尽量缓存

  在做后端开发时,我们通常会为了方便,把公共部分提取出来。但是很多时候这些操作仅仅停留在了后端的逻辑层。对于前端来说,每个页面依然都加载了公共的部分。那为什么不在前端做这些公共部分的独立呢?这样我们可以缓存掉更多不必要的静态内容。
  网页上的数据通常是动态的,这就意味着,即使使用ETag缓存,当内容改变时请求也会获取完整数据。而网页中通常只会有很小一部分数据在变动,大体上都是静态的。这么一来,这些静态的内容就需要因为网页内容的细微变动而重新加载。这显然是不科学的!所以,我们应该考虑将这些静态的资源在前端缓存起来。就像后端开发时提取公共部分一样,这些缓存的内容很多都可以跨页面使用。但重点在于,如何从一个HTML引入另一个HTML?   其实引入HTML并没有什么难度,因为SCRIPT标签什么都能干。这里给出两种目前可行的做法。   第一种,同步HTTP请求。既然是加载内容,也就是要让用户觉得这块内容是随着网页刷新一起加载下来的。所以我们可以使用同步HTTP请求来完成。因为SCRIPT标签本身可以阻止DOM树解析,而同步HTTP请求又可以阻止JavaScript执行。这样效果就类似于页面使用同步模式加载了一个外部资源。虽然很多开发者非常不建议使用同步请求,但是我觉得,只要不把它用在交互中就没问题。在页面加载时发起同步请求并不会带来任何副作用或不良的用户体验。实际上我们平时使用SCRIPT标签加载外部资源,如果没加上async或defer的话就和一般的同步请求一样了。下面是这种方式的测试代码:
<!--header.php-->
<?header('Cache-Control: max-age=86400');?>
<h1>我是网页的头部分!</h1>
<!--test.php-->
<script>
with(new XMLHttpRequest)
  open("GET","header.php",false),
  send(),document.write(responseText);
</script>
我是网页的动态内容 - 当前时间:<?=date('Y-m-d H:i:s')?>

  第二种,把HTML以字符串模板。以字符串的形式将HTML文本写在js中,引入这个js文件自然就加载这一段HTML。但至于以何种方式存放这些HTML文本就是另外的问题了。最简单的可以直接以JSON的方式传递。 <!--header.php-->
<?
header('Cache-Control: max-age=86400');
header('Content-Type: application/json');
ob_start();
?>
<h1>我是网页的头部分!</h1>
<?='document.write('.json_encode(ob_get_clean()).');';?>
<!--test.php-->
<script src="header.php"></script>
我是网页的动态内容 - 当前时间:<?=date('Y-m-d H:i:s')?>

  测试结果基本是一样的。第二次访问这个页面时,资源是from cache的,也就是不向服务器发起请求。所以这样在前端把HTML块独立成文件做缓存的方式是可行的。但是以上这些实现还是有SCRIPT参与了,显得有些别扭。实际上最新的WebComponent相关草案中就有对HTML文件引用的支持,只是现在的浏览器的支持程度还不够,暂时也不扯这玩意儿。
网名:
34.203.213.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^