桌面网站与网页大革命

阅读：评论：作者：Rybby 日期：来源：rybby.com

桌面网站，就是像桌面程序一样的网站，只有一个窗口，只有一个页面，这就是桌面网站的概念！

其实，这样的网站早就存在了，只是得不到广泛应用而已。像网页地图，就是桌面网站。然而，现在网络上大多数网站所展现的网站，居然如此丑陋！如此霸道！看看门户网站那些首页、栏目页，居然把所有内容都挤进一个页面里！如果我要看某个栏目里的某篇文章，就得无条件地接受99.99%其它栏目的垃圾内容的骚扰！难道，这就是所谓的、传说中的“大器”？如果这就是大器，那我宁愿浏览小器的网站。那些门户网站确实真他妈的“大器”！打开一个首页，大概要花费整整1MB的流量！如果用手机上网，一不小心打开了一个电脑网而非wap网，就得损耗1MB的流量，如果没开套餐的话就等着哭吧！呀！应该是等着运营商笑吧！我就试过一次，去中国联通买了一张新卡，叫客服帮我开通无线上网套餐，谁知他们只给开一个月，下个月套餐取消了也没有以任何形式通知我，结果我用手机浏览了几个页面就被扣了30几元！（0.03元/KB）中国联通真他妈比黑客还黑！还有，他们的网页居然分等级的！那就是3G套餐的用户与非3G套餐的用户不一样，3G用户可以在网页上修改、设置各种套餐，非3G套餐用户没有修改的权限！居然特意设计两种页面来服务不同的用户！这算是歧视我们穷人吗？堂堂一个大品牌企业，居然做出来这样的事，还好意思在自己名字前加上“中国”两个字！再说那些“大器”的门户网站，他们把网页设计得足够大！无非就是想多摆几个广告位，多捞几个臭钱！（沾满汗臭味的钱）难道不会向搜索引擎网站学习？难道不会向Digg学习？网页已经成长了几十年，居然还停留在现在这个水平！我们，真应该感到可耻！我们，真应该感到丢脸！如果不是微软的臭IE在拖后退，我们早就用上3D网页了！SVG已经出现那么多年了！就因为IE这个臭家伙不支持，导致程序员都不愿意用SVG进行页面设计。不要有事没事拿人身攻击来说事，我锐某人并没有刻意要对微软的品牌形像进行攻击。自己做得不好，遭人唾弃是理所当然的！作为用户，难道我们连发泄权也没有了！老比前辈大概是想钱想疯了，一直都不把标准当回事！把我们这些网页程序员给害苦了！估计，他们在偷偷研发自己的标准，以期望在将来推出自己的专属浏览器，进而垄断市场吧！

从来没有网站向网友征集意见，到底什么样的网页才是我们喜欢的网页？网页从她诞生时是这个样子，现在也还是这个样子！是网页没落了还是我们没落了？那到底什么样的网页才是我们喜欢的网页？这个我无法给出确切答案，如果没有提供一些备选方案给我们选择，估计很难有个答案。毕竟我们只见过目前这种网页而已，网页还能长成什么模样？我觉得应该开设一些网页设计活动或大赛，让设计师们设计出自己理想中的网页或未来可能会出现的网页，然后由网友投票，这样就能知道我们喜欢的网页是什么样子的了。可能会是像手机屏幕那样可以上下左右滑动的效果吧！（换作是我，我就喜欢这种，但是自己喜欢不代表别人也喜欢，可能是我的性格比较叛逆吧，大多数人喜欢的东西都是我不喜欢的）凭目前的js脚本语言还是能做得到的，只是有一点点卡而已。但是目前没有人做，至少我浏览过的大量网站里没发现有人做这样的网页。目前网络上的网页，我们到底喜欢不喜欢？我不确定，但有一点可以确定，目前的网页已经不适合我们浏览了！应该革新！看看百度的维客“百科”有多“大器”！居然把词条的所有内容同时展现在一个页面里！进行上下翻屏的时候卡得要死！不信去浏览一个大城市的词条看看就知道了。百度，拥有那样多的人力、财力、物力，居然设计出来这样愚蠢的网页，不丢脸的吗？难道不会用js进行节点的添加删除操作吗？好歹也控制一下一个页面的内容量吧！

一站一页的桌面网站会给我们带来哪些好处？好处还是很多的吧！想想看如果我们同时打开100个页面，以目前的网页形式进行展现的话，整个浏览器的标签条会排得满满的！如果我们要浏览隐藏在标签条左右两侧的页面，不得不将标签条往左右方向滚呀滚！滚呀滚！但如果我们用桌面网站就可以将这些打开的页面链接写在一个历史页里，页面的内容隐藏在DOM树里，同时可以用样式修饰、美化这些链接，比如添加一些半透明的玻璃特效！我们可以为页面添加上下左右滑动的效果，超出屏幕边缘太远的节点使之隐藏。当然，隐藏并不是个优秀的办法，随着DOM树结构的不断庞大，会使页面越来越卡！出于性能考虑，最好的方法就是直接删除！需要时再添加进来，我们将DOM树结构控制地一定范围内，不能让它过于庞大！那么被删除掉的节点怎么办？重新添加时再次请求服务端吗？那样耗时耗带宽的事情，我们当然不能让它发生！被删掉的节点全部存储在客户端，比较愚蠢的方法是使用本地存储：localstorage 或 user data，但是这样会涉及频繁的IO操作！比较好的方法是保存在内存里！我们可以分门别类的设计很多数组或对象来存储这些节点，只要浏览器不刷新当前页面，这些数据就不会消失，请求新的页面全部通过异步来进行。那一个页面能存储多少数据？这个由浏览器来决定的，IE6的话，超过100M就会崩溃！其它浏览器可容纳多一点。如果以100K一张页面来算的话，一张页面里可容纳1000张页面的内容！如果不用桌面网站，用浏览器打开1000个网页，会是什么概念可以想象得到的吧！可见，一站一页的桌面网站比我们现在的一站多页的网站模式要优秀多少倍！另外，我们每请求一张新页面只需要载入网页内容部分的数据，网页头与网页尾可以完全剔除，这会为我们省下非常大的带宽与流量！

页面滚动条，在桌面网站模式里将会消失，因为它实在太影响美观了！我们完全可以用鼠标滚轮进行页面滑动，或者用鼠标上下左右拖动实现滑动，再就是用快捷键进行滑动，比如用E,D,S,F,代替上下左右翻屏，用Z+E,Z+D,Z+S,Z+F代替上下左右滑动一行或一列（日常操作的快捷键完全可根据用户喜好进行自定义）。我们惯用的操作方式是：左手操键盘，右手操鼠标！这个从事图形图像设计的网友应该深有体会，为了提高操作的效率，键盘的快捷键不能离左手可触摸的范围太远，通常都以T,G,B,作为分隔线，左手只要管住左边的按键就行，右边的丢弃。就网页的日常操作而言，这足够了！如若不够用就用组合键，Ctrl, Shift, Alt这样的功能键已经被浏览器用了，我们不能用，所以只能用Z,A,F,等等，这些都根据用户喜好进行定义。

上下页导航按钮，在桌面网站模式里将会消失，我们以无缝浏览代替按钮导航。最早实现无缝浏览的好像是古狗（Google）的图片垂直搜索吧！百度的图片垂直搜索直到去年才开始使用无缝浏览技巧，百度搜索什么都比人家古狗差了那么一截，这也是网络上很多网龄长的网友都喜欢用古狗的原因。所谓的无缝浏览就是无需用户主动请求服务端加载新页面，完全通过鼠标事件自动进行触发，当满足一定条件时就会触发。比如鼠标划过节点列表最后五个或十个时就触发载入下一页，为了获得像本地程序一样的流畅效果可以将数值设置大一点，比如一次载入20页或30页，鼠标划过最后20个节点又开始触发请求新页面（应该将多余的节点存放在内存里，浏览到时再添加到DOM树里呈现出来）。

3D网页是未来的发展方向，SVG的出现使得这一目标得以实现！我们可以通过js脚本语言像添加普通DOM节点一样动态添加SVG节点，这样，我们想在网页上画什么形状就画什么形状，虽然VML也可以做大部分这样的操作，但远远不能跟SVG比！SVG虽然很好，但由于臭名远扬的IE在拖后腿，使得SVG一直没有发展的机会。IE，让我们唾骂一千年，一万年也不能解恨，锐某只能用一句话来形容——此恨绵绵无绝期！如果，这世界上有30%-50%的网民从事网页设计，那微软的视窗软件“Windows”可能就要去睡棺材了！这不仅仅体现在某一方面而已，DOM方法、CSS属性等很多标准IE都不支持！响应性能也极差（这个主要体现在动态添加与删除节点方面）！真的对她讨厌到了极点！最近冒出的html5可能是未来的流行趋势，但是如果不能解决IE6，就算是html8，html10来了也没有意义！只要微软的视窗软件WinXP没有睡进棺材里，IE6是斩不尽也杀不绝的！幸好，我们的桌面网站不需要SVG与html5的支持就能实现，让我们来掀起一场网页大革命吧！

下面展示一些桌面网站的部分效果图，因为要模拟圆柱滚动的效果，所以用了vv图（vml + svg），不支持 SVG 的浏览器就用 VML，这两种格式图形的效果没有什么区别，但是 SVG 支持透明渐变，所以可以做出很酷的玻璃特效！VML 不支持透明渐变（确切地说是不支持完全透明的渐变，因为它的起点渐变色不能设置成透明），要做玻璃特效是不行滴，虽说可以用滤镜的 alpha 属性来做，但是对 VML 图形添加透明滤镜后会使图形边缘有黑线！这点很丑的说。既然要用圆柱体来呈现内容，那就得用路径文本了。firefox 与 ie 的路径文本很完美，其它的 chrome、safari 与 opera 等浏览器呈现路径文本会有错乱与重叠的毛病，要解决这个问题可以用三盒一模型。所谓的三盒一就是用三种用途的盒子来组成一个整体的内容块，<包装盒><美化盒><内容盒>，包装盒的作用就是固定位置；美化盒的作用就是装饰、美化，这样即使对美化盒进行透明度的设置也不会影响内容盒里的内容；内容盒就是用来承载内容。三盒一模型很好的解决了 SVG 不能显示多行文本的问题，我们用普通的 DOM 节点来存放多行文本，然后将文本节点放在 vv图节点的上一层，大家互不干扰；另外，通过定位包装盒也很容易控制路径生成的图形的位置。

用vv图可以做出很酷的效果，比如3D之类的，如果再加上动画就更酷了。比如上面的圆柱形内容载体，我们将内容从右边向左边滚动，要实现这个效果可以用 ss动画，ss动画就是用 js + css 来实现的动画。通过 js 控制节点的显示与隐藏来模拟帧播放的效果，如果要显示的节点所装的内容不是很多的话，播放效果还是很流畅的，这点锐某测试过，将几十个内容有变化的节点进行显示、隐藏，如此顺序循环播放，效果不会比 flash 差，CPU 资源也只用到70%-80%，这点还是可以接受吧。

vv图的部分效果图：

http://e.hiphotos.bdimg.com/album/w%3D1600%3Bq%3D90/sign=dcf9e173377adab43dd01f45bbe4886d/e61190ef76c6a7efeafbfa7dfcfaaf51f2de668f.jpg