论坛首页 Web前端技术论坛

1kjs省市三级联动,数据独创中文压缩,完美支持各种编码,附带完整的原理和代码说明

浏览 9967 次
精华帖 (9) :: 良好帖 (0) :: 新手帖 (1) :: 隐藏帖 (0)
作者 正文
   发表时间:2011-09-07   最后修改:2011-09-07

上周在工作中需要使用一个三级联动的省市组件,故准备自己动手写一个,虽然以前也写了一个,但是有些问题却没有深究!

 

这次准备深究的问题有:

 

1.如何让组件在utf-8页面或者gbk页面中中文都正常显示?

2.如此巨量的地区数据(接近40KB),如何将他们缩小一些?

 

在此,针对第一个问题,我想大家的做法就是将数据转换成unicode编码!

针对第二个,有些人可能会ajax来获取...或者干脆全部塞进js(曾经我就是这么做)

 

我测试了下,假如中文进行unicode编码,并且都放在js里面,那么这个组件的体积估计大于100Kb,因为单单中文数据就放大了3倍!

我这边处理后组件总大小在37KB左右,已经相当超值了

 

 

不过在周末,花了点时间,想出来一个万全之策,不仅仅压缩了数据,并且满足了不同编码之间也能正常显示中文的问题!

 

先简单粘帖下介绍,具体算法代码,数据和结果以及示例请访问:http://www.1kjs.com/lib/widget/cnarea/

 

针对地区最简数据结构和纯中文压缩算法,欢迎各位大侠使劲拍砖,并且也希望各位能有更简洁更高效的思路予以共享!

 


 

 

  • 大小: 23.1 KB
   发表时间:2011-09-07  
你这个思路太另辟蹊径了。压缩是解决传输存储效率的。内存中为了这100多K做这样的工作貌似不值啊。而且不见得在内存中一个字母就是一个字节的存储空间,这和操作系统,浏览器实现、编码都有关系,因此楼主这个思路有点另了
0 请登录后投票
   发表时间:2011-09-07  
楼上可能理解错了吧,估计没看完整,我是这样理解的,
楼主的中文压缩主要有两个目的:
1、减少文件加载量,解决网络带宽的问题。
2、为了能在各种编码环境下工作,解决乱码的问题。

确实是不错的创意, mark一下~~
0 请登录后投票
   发表时间:2011-09-07   最后修改:2011-09-07
汗。。。太极端了,不过很同意2楼所说的,现在浏览器没哪个不支持gzip吧?压缩一下,轻轻松松减少80%传输大小。


likaituan 写道
楼上可能理解错了吧,估计没看完整,我是这样理解的,
楼主的中文压缩主要有两个目的:
1、减少文件加载量,解决网络带宽的问题。
2、为了能在各种编码环境下工作,解决乱码的问题。

确实是不错的创意, mark一下~~

1. 手工压缩的确会比自动算法压缩率高,但在这里受限于能使用的字符串太少,它达成的效果肯定不如gzip。虽然可以两者结合,但说真的顶多也就10来K的差距。
2. 中文本身就可以写成unicode,增加的文件大小对gzip等压缩传输来说都没什么。

总的一句话,gzip、deflate等压缩传输算法对这种纯文本数据的压缩率是非常高的,个人觉得花这么多精力去压缩十来K的数据,只适合有时间有精力追求完美的人去干……
现在哪个网站不是一张图片就好几十K了?如今已经不是56K猫拔号的时代了。。。
0 请登录后投票
   发表时间:2011-09-07   最后修改:2011-09-07
完全没必要,开启gzip后估计增加实际传输数据量,因为代码多了一些多余的逻辑。
直接在js里定义城市信息,ajax也不需要了。
解决编码问题用charset。<script charset="utf-8" src="a.js"></script>
0 请登录后投票
   发表时间:2011-09-08  
luolonghao 写道
完全没必要,开启gzip后估计增加实际传输数据量,因为代码多了一些多余的逻辑。
直接在js里定义城市信息,ajax也不需要了。
解决编码问题用charset。<script charset="utf-8" src="a.js"></script>

 

写成charset="utf-8"或者charset="gbk"这不会很麻烦吗,万一忘记写了,不是乱码了吗?

 

 

clue 写道
汗。。。太极端了,不过很同意2楼所说的,现在浏览器没哪个不支持gzip吧?压缩一下,轻轻松松减少80%传输大小。


likaituan 写道
楼上可能理解错了吧,估计没看完整,我是这样理解的,
楼主的中文压缩主要有两个目的:
1、减少文件加载量,解决网络带宽的问题。
2、为了能在各种编码环境下工作,解决乱码的问题。

确实是不错的创意, mark一下~~

1. 手工压缩的确会比自动算法压缩率高,但在这里受限于能使用的字符串太少,它达成的效果肯定不如gzip。虽然可以两者结合,但说真的顶多也就10来K的差距。
2. 中文本身就可以写成unicode,增加的文件大小对gzip等压缩传输来说都没什么。

总的一句话,gzip、deflate等压缩传输算法对这种纯文本数据的压缩率是非常高的,个人觉得花这么多精力去压缩十来K的数据,只适合有时间有精力追求完美的人去干……
现在哪个网站不是一张图片就好几十K了?如今已经不是56K猫拔号的时代了。。。

 

中文转unicode至少体积增加3倍,话虽有gzip,确实会有很大压缩,但是为什么我们不能尽量做好他呢,为什么我们不能在自己可控的范围内做的更好呢!

可想过大型网站的日访问量几万,几十万,几百万,甚至几千万的点击率,1kb能节省多少带宽?能节省多少时间?

 

其实我抛出这个问题就是想大家来提提自己的想法,但请不要认为这种事情没意义,思考的本身就是意义!

 

 

 

 

 

0 请登录后投票
   发表时间:2011-09-09  
如果是动态数据,不能写在js里,如何解决
0 请登录后投票
   发表时间:2011-09-09  
luolonghao 写道
完全没必要,开启gzip后估计增加实际传输数据量,因为代码多了一些多余的逻辑。
直接在js里定义城市信息,ajax也不需要了。
解决编码问题用charset。<script charset="utf-8" src="a.js"></script>


部分浏览器不支持这个属性,不能完全解决乱码问题
0 请登录后投票
   发表时间:2011-09-09  
赞扬楼主。。。。
这个思路可以用在很多场景,虽然大家都认为这个三级联动场景不是很适合。但是楼主的这种思路以及解决问题的态度,我觉得是值得我学习的。
0 请登录后投票
   发表时间:2011-09-09   最后修改:2011-09-09
很有趣的思路

问题1:为什么不用AJAX 点击后传一小段数据
问题2:
我的测试,从你网站COPY ({"str":"+ ~~~ dfbc1ikd1a1dnj4c679u4nb5n1jes5i3u"}

我姑且认为是你的压缩数据 保存下来 A=34K

COPY你的数据 从北京到彰化 B=36K
在线Escape C=107K


单位K
                     原始大小   ZIP大小      BASE64大小
数据A          34              21               29
原始数据B   36              19               25
ENS数据C   107            21               29


从你业余个人角度来看是不错 有精力 有想法

0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics