【转】关于大型网站技术演进的思考(十三)--网站静态化处理—CSI(5)

分享到:

  讲完了SSI,ESI,下面就要讲讲CSI了 ,CSI是浏览器端的动静整合方案,当我文章发表后有朋友就问我,CSI技术是不是就是通过ajax来加载数据啊,我当时的回答只是说你的理解有点片面,那么到底什么是CSI技术了?这个其实要和动静资源整合的角度来定义。

  CSI技术其实是在页面进行动静分离后,将页面加载分为两个步骤完成,第一步是加载静态资源,静态资源加载完毕后进行第二步骤加载动态资源。不过这个定义还是表述的不全面,不全面的地方就是我们要强调动静分离的目的,我们把页面里的动静资源拆分出来是为了将静态资源做有效的缓存,这个静态资源可能是在静态web容器上,也有可能是在CDN上,也有可能是在浏览器上,不管静态资源是如何缓存的,我们的目的都是为了让静态资源加载的速度更快,如果我们没有让静态资源加载变得高效,就算我们使用了CSI的形式来设计页面,其实也没有发挥CSI的优点,反倒还会一不小心引入CSI的缺点。那什么是CSI的缺点呢?具体如下:

  CSI的缺点一:CSI不利于页面的SEO即搜索引擎优化。搜索引擎的网络爬虫一般是根据url访问页面,获取页面的内容后去掉没用的信息例如:css样式,js脚本,然后分析剩下的文本内容,因此假如页面的一部分内容需要进行异步加载,那么这个加载控制肯定是由javascript代码来完成的,因此网络爬虫爬下来的页面里异步加载的操作是没法执行的(听说有些高级的爬虫可以执行异步的操作,抓取异步的内容,即便有这个技术,大部分主流的爬虫还是会忽略掉javascript代码的也会忽略异步加载的内容的),这就会导致爬虫爬的页面里有部分信息丢失了,所以说CSI对SEO不太友好。不过这个缺点我们仔细分析下,可能并不会是那么严重,前面我们谈论了很多静态分离的策略,如果我们动静分离策略做的好,那么动态资源基本都是不能被缓存的内容,经常发生变化的内容,这些变化的内容本来就不需要被网络爬虫爬到,就算真的被爬到,搜索引擎有个查询结果指向了这个页面,我们点开这个页面结果也是在页面找不到被搜索的关键字,这种情形我相信很多朋友在使用搜索引擎时候都会碰到过。不过我想如果开发人员没有正确使用CSI,那么这块他们可能也不会处理的特别好,因此这个缺点还是很容易被引入的。

  CSI的缺点二:我们那么费时费力想让自己的网站静态化,目的就是想让页面加载更快点,我们简简单单把页面加载分成了两个步骤进行,那么这么做就真的快吗?这可不一定啊,其实动静分离的做法和我上一个系列里讲到的数据库读写分离有类似之处,数据库读写分离我们是通过拆分原表的读写之间的关联关系,从而达到解决读的瓶颈问题,而网页的动静分离是因为静态资源很容易被优化,所以我们要拆分动静资源。所以当我们对资源进行了动静分离,但是又没有优化静态资源,这个一看就知道我们缺少一个加速页面加载速度的操作,那么真的能让页面加载快点,还真的很难说了,而且异步加载需要执行javascript代码才行,但是静态资源加载时候很容易造成javascript脚本被阻塞,如果阻塞的脚本正好是异步加载的部分,结果只会是比以前加载的更慢了。

  由此可见,我在前面讲到的SSI和ESI技术对于我们在浏览器端发挥CSI技术优点是非常有必要的,SSI和ESI做好了能让动静分离出的静态资源加载的更加高效,这也就让CSI操作的第一个步骤变得高效,第一个步骤处理好了我们只要在页面控制好脚本阻塞对异步加载的影响,那么我们就可以达到提升整个页面加载效率的目的了。此外我觉得CSI对SEO有重大影响是个伪命题,假如使用CSI造成了SEO效果不佳,那么肯定是我们CSI方案设计的不到位。

  有人认为CSI还会有个缺点,不过笔者我并不认为这是一个缺点,这其实是一个设计问题,好与坏是根据个人的操作习惯所决定的。这个别人认为的缺点是什么呢?它就是使用CSI技术时候,虽然页面很快的被加载出来了,但是动态内容那部分可能会显示一个正在加载的提示,那么这就导致页面用户友好性降低,其实这种同步和异步加载混搭操作实在太常见了,几乎所有大型门户网站,电商网站还有一大堆数不尽的网站都是采用同步和异步混搭的加载方式,假如这些网站不这么做,我相信这些网站例如首页加载一定会慢的让人吐血,因为它们很多网页里面内容实在太多,图片也都有点爆棚了,所以它们不得不使用同步和异步混搭的加载方式,甚至很多静态资源例如图片,flash这些东西也会采取异步加载方式。说到这里,估计有人还是觉得不服气,他就是不喜欢页面加载时候还要出现个正在加载提示,但是网页里又非常需要CSI带来的好处,那么我们该如何解决这个问题呢?这个问题很好解决,首先愿意使用CSI技术也就说明用户还是很愿意使用异步的加载技术的,不喜欢则是正在加载的提示,这说明用户想要在做同步加载操作时候不要掺杂异步操作,虽然现在ajax技术大行其道,但是ajax技术有个同步加载是没有办法解决的,那就是我们在浏览器地址栏里输入网站url请求页面 ,所以面对上面的需求我们只要保证这种同步操作只是一个纯粹的同步操作而不要掺杂异步加载即可,这个方案还是很好实施的,这里我就不再累述了。

  动静分离后我们会把静态资源进行缓存,前面文章里讲了一大堆都是在讲服务端的静态资源缓存,现在讲到了CSI已经到了浏览器端,那么我们就得谈谈浏览器的缓存操作。页面的缓存操作就是使用http的expires和cache-control,我们首先看看下面的写法:

<meta http-equiv="pragma" content="no-cache">

<meta http-equiv="cache-control" content="no-cache">

<meta http-equiv="expires" content="0">
昵    称:
验证码:

相关文档:

  • [Javascript] Gradient Fills on the HTML5 Canvas
    window.onload=function(){ varcanvas=document.getElementById("canvas"), context=canvas.getContext("2d"); vargradient=context.createLinearGradient(10...
  • HTML5/HTML
    (文章还在修改完善中,文中只整理出了部分标签)需要的可以参考下: html的meta标签描述的头部信息特别多,有针对的SEO的头部信息,...
  • 什么是SharePoint?
    在聊SharePoint开发之前,有必要说下什么是SharePoint. 在我工作的过程中,经常遇到客户对SharePoint不太了解的情况。有客户说,SharePoint太烂...
  • Flash学习初总结
    话说尝试了一周多的Flash编程,有些理解为什么很多程序员都不喜欢用Flash编程了。 首先,就是没有编程的难度,想要编好Flash,也就是...
  • 解决ie不支持placeholder的问题
    html5的input标签有一个很强大的placeholder属性,可是ie9以下的都不支持(包括ie9).为了解决这个问题。需要自己写js控制 <!DOCTYPEhtml> <h...
  • HTML5 新元素
    audio:定义音频内容 canvas定义画布功能 command定义一个命令 datalist定义一个下拉列表 details定义一个元素的详细内容 dialog定义一个对话框 ke...
  • HTML5+J2EE实现文件异步上传
    P.S.HTML5经过了W3C的8年努力,终于正式推广了。这次升级最大的就是升级了XMLHTTPRequest,让它变成了XMLHTTPRequestLevelII(这有啥奇怪的?)。...
  • HTML5两个打包工具
    AppCan:http://www.appcan.cn/ HBulider:http://www.dcloud.io/...
  • 前端编码风格规范之 HTML 规范
    HTML规范 文档类型 推荐使用HTML5的文档类型申明:<!DOCTYPEhtml>. (建议使用text/html格式的HTML。避免使用XHTML。XHTML以及它的属性,比如...
  • 基于html5制作3D拳击游戏源码下载
    今天给大家分享一款基于HTML5实现的3d拳王游戏源码。这款实例适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.不支...
  • [转]HTML5 LocalStorage 本地存储
    说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就...
  • HTML5的新特性
    一、HTML5新特性 1、视频 在HTML5之前,网络上的视频大多都是使用Flash插件进行播放的,保险现在也仍然有很多。HTML5规定了一种通过video...
  • HTML5系列文章(二)
    HTML5新增的表单控件 开文之前先备注一下我了解到的提高可访问性的两个小技巧: 为lable标签写上for属性,for属性用于引用与其相关联的...
  • html script的async属性
    一般网页加载的script标签时,没有带async属性,浏览器渲染时会从上至下依次进行,当某一个script解析缓慢会影响后续的网页的渲染,在h...
  • HTML5+javascript实现图片加载进度动画效果
    在网上找资料的时候,看到网上有图片加载进度的效果,手痒就自己也写了一个。 图片加载完后,隐藏loading效果。 想看加载效果,请ctr...
  • 基于html5和css3响应式全屏滚动页面切换效果
    分享一款全屏响应式的HTML5和CSS3页面切换效果。这个页面布局效果对于那些页面要求固定100%高度和宽度的网站和APP来说是十分有用的。...
  • 7个惊艳的HTML5 Canvas动画效果及源码
    HTML5非常强大,尤其是现在大部分浏览器都支持HTML5和CSS3,用HTML5制作的动画也多了起来。另外,Canvas上绘制图形非常简单,本文就分享...
  • XSS (Cross Site Scripting) Prevention Cheat Sheet(XSS防护检查单)
    本文是XSS防御检查单的翻译版本https://www.owasp.org/index.php/XSS_%28Cross_Site_Scripting%29_Prevention_Cheat_Sheet 介绍 本文描述了一种恰当地使用输出转...
  • C# asp.net PhoneGap html5
    很久没写博客,今天自己写一篇吧。来谈一谈c#PhoneGap,html5与asp.net。能搜到这篇博客就说明你是一位.net开发者,即将或者正在从事移动开...
  • H5-CORS[转]
    原:http://blog.csdn.net/hfahe/article/details/7730944 前言:像CORS对于现代前端这么重要的技术在国内基本上居然很少有人使用和提及,在百度或...