使用JavaScript来避免冗余数据
2014-04-08 17:34
169 查看
页面的原始源中经常都会存在很多重复的东西,这些重复的东西是有规律可循的,可以通过简短的程序来处理,避免从服务器加载这些大量重复的内容。而且这些简短的处理对程序的维护成本影响并不大,在存在大量重复内容的页面上可以试着使用。
比如有这样的超链接列表
target="_blank" 如果一堆超链接都需要新选项卡打开,我们就可以从程序上解决,而不是为每个A标签添加同样的属性。还一些很常用的标签属性如,*:title、IMG:alt,等。它们都可以通过程序从其它地方复制过去。以文章列表为例,文章标题文字可能被
text-overflow:ellipsis 省略,所以需要title来让鼠标悬停时看到完整的文章标题。而直接从服务器输出文章标题就需要传输多余的数据,所以我们可以通过程序来复制这些属性。
也许有人会问,GZIP不是可以把这些重复数据压缩掉吗?GZIP确实可以压缩,但LZ77算法的实现是在每一个重复位置都放置标识符,对于单个重复的内容不多,但是数量很大的东西GZIP的压缩率并不高。而且HTTP上的数据未必是一次性传输给客户端的,GZIP的窗口压缩模式未必能一次性就处理完所有数据。所以在原始源中避免一些力所能及的数据是有效的。
也许有人会考虑另一个极端,数据归数据,模板归模板,模板复用数据,数据复用模板。这个思想很好,而且是可以实现的,这么一来就不存在数据传输冗余的问题了,目前的很多模板框架都是基于这样的思想。但这个思想的实施需要考虑的就是前端模板框架SEO的问题了。
随着现在互联网的发展,大网站越来越大,小网站越来越少,也许以后SEO真会变得不再重要。所以前端模板式编程很可能是未来的主流,而目前如果无法使用前端模板框架的话,以上的这些优化方式也是可以带来一定效果的。
比如有这样的超链接列表
运行<nav> <a href="JavaScript:">a</a> <a href="JavaScript:">b</a> <a href="JavaScript:">c</a> <a href="JavaScript:">d</a> ······ </nav>这些超链接都是由程序处理的,但需要加href属性以确保超链接的行为正常。但是这么写显然是冗余的,公共部分可以使用程序来添加。
运行<nav> <a>a</a> <a>b</a> <a>c</a> <a>d</a> ······ </nav> <script> (function(){ var nav=document.getElementsByTagName("nav")[0]; var i=0,s=nav.children,o; while(o=s[i++])o.setAttribute("href","JavaScript:"); })(); </script>虽然程序也是挺大一段,但如果需要处理的标签量大的话还是很划算的。或者如果使用了jQuery的话程序只需要一句
$("nav a").attr("href","JavaScript:");除了A标签的href属性,还有很多标签的属性也可以这么做。比如同样是A标签的
target="_blank" 如果一堆超链接都需要新选项卡打开,我们就可以从程序上解决,而不是为每个A标签添加同样的属性。还一些很常用的标签属性如,*:title、IMG:alt,等。它们都可以通过程序从其它地方复制过去。以文章列表为例,文章标题文字可能被
text-overflow:ellipsis 省略,所以需要title来让鼠标悬停时看到完整的文章标题。而直接从服务器输出文章标题就需要传输多余的数据,所以我们可以通过程序来复制这些属性。
也许有人会问,GZIP不是可以把这些重复数据压缩掉吗?GZIP确实可以压缩,但LZ77算法的实现是在每一个重复位置都放置标识符,对于单个重复的内容不多,但是数量很大的东西GZIP的压缩率并不高。而且HTTP上的数据未必是一次性传输给客户端的,GZIP的窗口压缩模式未必能一次性就处理完所有数据。所以在原始源中避免一些力所能及的数据是有效的。
也许有人会考虑另一个极端,数据归数据,模板归模板,模板复用数据,数据复用模板。这个思想很好,而且是可以实现的,这么一来就不存在数据传输冗余的问题了,目前的很多模板框架都是基于这样的思想。但这个思想的实施需要考虑的就是前端模板框架SEO的问题了。
随着现在互联网的发展,大网站越来越大,小网站越来越少,也许以后SEO真会变得不再重要。所以前端模板式编程很可能是未来的主流,而目前如果无法使用前端模板框架的话,以上的这些优化方式也是可以带来一定效果的。
相关文章推荐
- 使用javascript验证数据
- 使用JSP代码和使用JavaScript代码进行表单数据验证有什么不同?
- 使用javascript实现无刷新数据校验
- 在JavaScript中使用JSON数据
- 如何使用JavaScript和正则表达式进行数据验证
- jquery使用attr访问自定义属性,减少javascript脚本中代码和数据的耦合
- jsp中如何避免客户端浏览器在刷新时,使用缓存的数据
- HDFS-RAID使用Erasure Code来实现HDFS的数据冗余
- 『原创』使用ASP与JAVASCRIPT配合实现多个复选框数据关联显示
- jsp中如何避免客户端浏览器在刷新时,使用缓存的数据
- 使用javascript绘制页面元素-->数据列表
- 使用JavaScript访问XML数据
- C和C++的面向对象专题(5)——合理使用模板,避免代码冗余
- ArcGIS JavaScript API实时数据接入展示探索(一)使用http-server
- 使用javascript以post的方式向服务器提交数据
- 【转】使用arcgis javascript api 保存不规则面状数据(镂空、自相交)
- SQL Server在已有数据的表上建立约束,使用 WITH NOCHECK 避免对现有数据检查
- 【Javascript】Js动态生成checkbox(使用Json数据)
- 使用SQL Loader导入大量数据,避免使用SQL频繁写库
- [Effective JavaScript 笔记]第45条:使用hasOwnProperty方法以避免原型污染