2008-04-09 04:02:40来源：互联网 阅读 ()
在Web上，速度、组织方式、透明度和一致性的问题驱动着你的解决方案。本文讲解使Web页面的设计和样式之间平衡的时候如何紧记这些方面以及客户的需求。<BR>图1：主页性能在下降<BR><BR> 图片说明：尽管研究显示站点访问者对于缓慢的站点反映消极，但是数据还是显示载入商务站点主页的速度趋势是减慢而不是加快。更多的广告和动态生成页面的流行促成了这种性能的迟缓。这张图表显示了56Kbps连接到流行的旅游、购物和证券交易站点时的平均响应时间。<BR><BR><IMG onerror="this.src='/info/upimg/allimg/080410/1926002.jpg';" hspace=3 src="/info/upimg/allimg/080410/1926003.png" align=center vspace=1 border=1><BR>图2：不要用缓慢的下载试验客户地耐心或妨碍可用性<BR><BR> 图片说明：世界上的大多数人仍然在使用低速连接，因此应该尽可能减少页面上的元素。例如，如果你使用图像导航，那么把它们放到一组中而不要彼此孤立。 <DIV></DIV> <DIV class=left><SPAN id=ad7></SPAN></DIV> <B>网络的实际情况</B><BR><BR> Internet是一个复杂、分布式的网络，支持着数量不断增加的数据和用户。它的产生是为了连接学院、政府和军事机构，并没有打算用于处理数以十亿美元计的国际贸易。结果就是它有一定的限制，其中最值得注意的是等待时间，或者称为滞后。数据包从一台计算机传递到另一台计算机时延迟就会发生，等待时间指计算机之间请求和响应信息之间的时间间隔。<BR><BR> 在过去几年中，大部分Web内容（例如很多商务站点提供的内容）变成了动态的。实时（动态地）组合内容比起发送静态页面不仅需要更多的带宽，还需要更高响应性的Web服务器和应用程序。由信息处理引起的任何延迟都会增加到网络延迟中。你的站点的大部分响应能力依赖于网络技术、软件和硬件的复杂的相互影响。<BR><BR> 设计最快的站点的先决条件是理解页面如何从服务器到达客户，以及在路途中哪儿可能发生潜在的延迟（图3所示）。<BR><BR><IMG onerror="this.src='/info/upimg/allimg/080410/1926004.jpg';" hspace=3 src="/info/upimg/allimg/080410/1926005.gif" align=center vspace=1 border=1><BR>图3：加速过程<BR><BR> 图片说明：在你设计一个快速的站点前，你必须了解Web页面如何从服务器到达客户。这是一个复杂的并且大部分不可见的过程。<BR><BR> 很多商务站点使用专门的内容传递服务（例如Akamai和Digital Island）。这些公司已经设计了改量的系统，它们能智能地删除了网络中的很多延迟。<BR><BR> </div> <div class="left"><span id="ad7"></span></div> <B>对付过失的方法</B><BR><BR> 尽管在网络处理中可能出现很多的错误，但是其中的大多数因素对于临时用户是不可见的。如果页面载入缓慢，并且在很多放置图片的地方是空的方框，那么程序员组会首先呼叫设计师，因为你的工作是绝对可以看见的。程序员组要求你把页面再减少1KB比调试应用程序服务器中的某个问题更加容易。<BR><BR> 你准备好处理类似的情形就可能对设计组有用。图3是一个很好的开始，它帮助你了解在设计中可以调整哪些东西，并且当你的调整不够的时候可以建议小组的其它成员查找问题。<BR><BR> 如果有下载缓慢的页面，就收集供给信息。从任何相关的性能数据开始，记录有HTML和图象的完整的页面的大小。有一些HTML编辑软件程序（例如Macromedia的Dreamweaver）会自动计算这些信息。设置页面限制并且确保没有页面超过它。与某个可以不断衡量站点下载时间和等待时间的公司（例如Keynote Systems4）签订合同。你的站点的速度应该在频繁的测试中优先权最高。<BR><BR> <B>底线</B><BR><BR> 尽管采用快速访问连接的用户比例不断增加，但是了解仍然使用拨号连接的在线用户的容量是至关紧要的（图4所示）：<BR><BR><IMG onerror="this.src='/info/upimg/allimg/080410/1926006.jpg';" hspace=3 src="/info/upimg/allimg/080410/1926007.gif" align=center vspace=1 border=1><BR>图4：按连接速度划分的在线用户<BR><BR> 测试显示访问者的下载时间的容忍的范围是2到10秒。因为所有的证据显示速度越快越好，因此目标应该为每个页面4－5秒（图5所示），是否符合这个条件可能意味着你的底线上的数百与数千美元之间的差距。<BR><BR><IMG onerror="this.src='/info/upimg/allimg/080410/1926008.jpg';" hspace=3 src="/info/upimg/allimg/080410/1926009.gif" align=center vspace=1 border=1><BR>图5：考虑带宽<BR><BR> 图片说明：这个图表对于估计某个页面在最好的网络上会花费多长下载时间是有用的。但是你要记住网络中的等待时间会增加延迟。<BR><BR> 当有了历史的性能和页面大小的总量信息后，你可以让小组重新聚焦于其它的可能出现故障的地方。更重要的是，你可能成为速度问题的用户主张者，并且使提供良好的用户体验成为最主要的标准。<BR><BR> 想象一下销售部的某个人走进来说"在这个页面上还需要两个广告位置"。你可能会回答"增加这些位置每个页面将会增加下载28KB的时间。而速度减慢将会对销售产生负面影响。你希望这样吗？"。通常的解释没有这么容易，但是把要求与现实性连接起来，你就能教育涉及这个问题的所有当事人。<BR><BR> 速度是个设计问题，但是它不是你能作出差异的唯一地方。作为设计师，你可以做的事情比压缩JPEG或清除HTML更多。如果你设计的站点更容易使用，即使实际的下载时间是相同的，你的客户也会认为站点更快了。 <p class="article-con-biaoqian mt-20"> <span>标签：</span> </p> <p class="banquan">版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com<br/> 特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有 </p> </div> <a href="https://love.4c.cn/" target="_blank"><img src="http://www.west999.com/www/wp-content/uploads/2019/10/-20" alt=""/></a> <div class="other-article mt-10 font14"> <p><span class="mr-20">上一篇：<a href='/info/html/wangluobiancheng/qita/20080410/59762.html'>如何编写企业解决方案书</a> </span></p> <p><span class="mr-20">下一篇：<a href='/info/html/wangluobiancheng/qita/20080410/59766.html'>编写优秀技术文档的技巧</a> </span></p> </div> <div class="relative-link mt-20"> <div class="relative-tab"> <span class="relative-tab-active">相关文章</span> </div> <div class="relative-con"> <div class="relative-list mt-20"> <ul> </ul> </div> </div> </div> </div> <div class="category mt-20"> <p><span>IDC资讯：</span> <a href="/info/html/IDCzixun/xunizhuji/">主机资讯</a> <a href="/info/html/IDCzixun/yumingzhuce/">注册资讯</a> <a href="/info/html/IDCzixun/zhujizuyong/">托管资讯</a> <a href="/info/html/IDCzixun/vpszhuji/">vps资讯</a> <a href="/info/html/IDCzixun/zhinenjianzhan/">网站建设</a> </p><p><span>网站运营：</span> <a href="/info/html/wangzhanyunying/jianzhanjingyan/">建站经验</a> <a href="/info/html/wangzhanyunying/cehuayingli/">策划盈利</a> <a href="/info/html/wangzhanyunying/sousuoyouhua/">搜索优化</a> <a href="/info/html/wangzhanyunying/wangzhantuiguang/">网站推广</a> <a href="/info/html/wangzhanyunying/mianfeiziyuan/">免费资源</a> </p><p><span>网站联盟：</span> <a href="/info/html/wangzhanlianmeng/lianmengxinwen/">联盟新闻</a> <a href="/info/html/wangzhanlianmeng/lianmengjieshao/">联盟介绍</a> <a href="/info/html/wangzhanlianmeng/lianmengdianping/">联盟点评</a> <a href="/info/html/wangzhanlianmeng/wangzhuanjiqiao/">网赚技巧</a> </p><p><span>行业资讯：</span> <a href="/info/html/xingyezixun/sousuoyinqing/">搜索引擎</a> <a href="/info/html/xingyezixun/wangluoyouxi/">网络游戏</a> <a href="/info/html/xingyezixun/dianzishangwu/">电子商务</a> <a href="/info/html/xingyezixun/guanggaochuanmei/">广告传媒</a> </p><p><span>网络编程：</span> <a href="/info/html/wangluobiancheng/DotNetBianCheng/">Asp.Net编程</a> <a href="/info/html/wangluobiancheng/Aspbiancheng/">Asp编程</a> <a href="/info/html/wangluobiancheng/Phpbiancheng/">Php编程</a> <a href="/info/html/wangluobiancheng/Xmlbiancheng/">Xml编程</a> <a href="/info/html/wangluobiancheng/Access/">Access</a> <a href="/info/html/wangluobiancheng/Mssql/">Mssql</a> <a href="/info/html/wangluobiancheng/Mysql/">Mysql</a> <a href="/info/html/wangluobiancheng/qita/">其它</a> </p><p><span>服务器技术：</span> <a href="/info/html/fuwuqijishu/Webfuwuqi/">Web服务器</a> <a href="/info/html/fuwuqijishu/Ftpfuwuqi/">Ftp服务器</a> <a href="/info/html/fuwuqijishu/Mailfuwuqi/">Mail服务器</a> <a href="/info/html/fuwuqijishu/Dnsfuwuqi/">Dns服务器</a> <a href="/info/html/fuwuqijishu/anquanfanghu/">安全防护</a> </p><p><span>软件技巧：</span> <a href="/info/html/ruanjianjiqiao/qitaruanjian/">其它软件</a> <a href="/info/html/ruanjianjiqiao/Word/">Word</a> <a href="/info/html/ruanjianjiqiao/Excel/">Excel</a> <a href="/info/html/ruanjianjiqiao/Powerpoint/">Powerpoint</a> <a href="/info/html/ruanjianjiqiao/Ghost/">Ghost</a> <a href="/info/html/ruanjianjiqiao/Vista/">Vista</a> <a href="/info/html/ruanjianjiqiao/QQkongjian/">QQ空间</a> <a href="/info/html/ruanjianjiqiao/QQ/">QQ</a> <a href="/info/html/ruanjianjiqiao/FlashGet/">FlashGet</a> <a href="/info/html/ruanjianjiqiao/xunlei/">迅雷</a> </p><p><span>网页制作：</span> <a href="/info/html/wangyezhizuo/FrontPages/">FrontPages</a> <a href="/info/html/wangyezhizuo/Dreamweaver/">Dreamweaver</a> <a href="/info/html/wangyezhizuo/Javascript/">Javascript</a> <a href="/info/html/wangyezhizuo/css/">css</a> <a href="/info/html/wangyezhizuo/photoshop/">photoshop</a> <a href="/info/html/wangyezhizuo/fireworks/">fireworks</a> <a href="/info/html/wangyezhizuo/Flash/">Flash</a> </p><p><span>程序设计：</span> <a href="/info/html/chengxusheji/Javajishu/">Java技术</a> <a href="/info/html/chengxusheji/C-C--/">C/C++</a> <a href="/info/html/chengxusheji/VB/">VB</a> <a href="/info/html/chengxusheji/delphi/">delphi</a> </p><p><span>网络知识：</span> <a href="/info/html/wangluozhishi/wangluoxieyi/">网络协议</a> <a href="/info/html/wangluozhishi/wangluoanquan/">网络安全</a> <a href="/info/html/wangluozhishi/wangluoguanli/">网络管理</a> <a href="/info/html/wangluozhishi/zuwangfangan/">组网方案</a> <a href="/info/html/wangluozhishi/Ciscojishu/">Cisco技术</a> </p><p><span>操作系统：</span> <a href="/info/html/caozuoxitong/Win2000/">Win2000</a> <a href="/info/html/caozuoxitong/WinXP/">WinXP</a> <a href="/info/html/caozuoxitong/Win2003/">Win2003</a> <a href="/info/html/caozuoxitong/Mac-OS/">Mac OS</a> <a href="/info/html/caozuoxitong/Linux/">Linux</a> <a href="/info/html/caozuoxitong/FreeBSD/">FreeBSD</a> </p> </div> </div> <div class="rightcon f-r ml-20"> <div class="sider-img"> <a href="https://www.west.cn/cloudhost/?ReferenceID=zzxxw999" target="_blank" title="云服务器仅需0.69元/天起！快速备案，无需幕布！"><img src="http://www.west999.com/www/wp-content/uploads/2019/10/-12"></a> </div> <div class="right-sider mt-20"> <div class="sider-title clearfix"><strong class="f-l"><i class="iconfont font20 icon-read"></i>热门词条</strong></div> <div class="biaoqian-con"> </div> </div> <div class="right-sider mt-20"> <div class="sider-title"><strong><i class="iconfont font20 icon-liebiaodaohang_zixun"></i>最新资讯</strong></div> <div class="sider-con pt-10"> <ul> <li><a href="/info/html/wangyezhizuo/photoshop/20210526/4674019.html"><i class="radius"></i>Photoshop绘制立体风格的微笑表情</a></li> <li><a href="/info/html/wangyezhizuo/photoshop/20210525/4674018.html"><i class="radius"></i>PS文字特效教程：制作公路上个性的涂鸦</a></li> <li><a href="/info/html/wangyezhizuo/photoshop/20210525/4674017.html"><i class="radius"></i>Photoshop设计卷边效果的变形金刚电影</a></li> <li><a href="/info/html/wangyezhizuo/photoshop/20210525/4674016.html"><i class="radius"></i>PS色彩修复教程：利用色阶工具快速给红</a></li> <li><a href="/info/html/wangyezhizuo/photoshop/20210524/4674015.html"><i class="radius"></i>PS半透明物体抠图：利用通道选区工具抠</a></li> <li><a href="/info/html/wangyezhizuo/photoshop/20210524/4674014.html"><i class="radius"></i>PS海报设计技巧教程：学习制作个性的扭</a></li> <li><a href="/info/html/wangyezhizuo/photoshop/20210524/4674013.html"><i class="radius"></i>PS图片特效制作教程：学习给铁塔图片制</a></li> <li><a href="/info/html/wangyezhizuo/photoshop/20210524/4674012.html"><i class="radius"></i>学习用photoshop把浑浊的海水照片后期</a></li> <li><a href="/info/html/wangyezhizuo/photoshop/20210524/4674011.html"><i class="radius"></i>PS古风照片教程：给古风美女打造出女侠</a></li> <li><a href="/info/html/wangyezhizuo/photoshop/20210524/4674010.html"><i class="radius"></i>PS个性人物海报制作：设计创意时尚的玻</a></li> </ul> </div> </div> <div class="right-sider mt-20"> <div class="sider-title"><strong><i class="iconfont font20 icon-remen"></i>热门关注</strong></div> <div class="sider-con pt-10"> <ul> <li><a href="/info/html/wangluobiancheng/qita/20181019/4599908.html"><i class="radius"></i>分享 《利用Python进行数据分析(第二版</a></li> <li><a href="/info/html/wangluobiancheng/qita/20181105/4603761.html"><i class="radius"></i>第一章：正则表达式</a></li> <li><a href="/info/html/wangluobiancheng/qita/20181023/4600823.html"><i class="radius"></i>《Python金融大数据分析》中文版PDF+英</a></li> <li><a href="/info/html/wangluobiancheng/qita/20180803/4427306.html"><i class="radius"></i>Python有哪些有趣的代码呢，这些代码让</a></li> <li><a href="/info/html/wangluobiancheng/qita/20180817/4513411.html"><i class="radius"></i>Pandas数据去重和对重复数据分类、求和</a></li> <li><a href="/info/html/wangluobiancheng/qita/20180617/4170408.html"><i class="radius"></i>kettle安装部署及远程执行</a></li> <li><a href="/info/html/wangluobiancheng/qita/20180727/4396151.html"><i class="radius"></i>看日本电影真痛苦，本来就听不懂！还没</a></li> <li><a href="/info/html/wangluobiancheng/qita/20190310/4615934.html"><i class="radius"></i>基于python的种子搜索网站，你懂得！</a></li> <li><a href="/info/html/wangluobiancheng/qita/20180709/4286954.html"><i class="radius"></i>利用Python画图，千变万化，各种画图技</a></li> <li><a href="/info/html/wangluobiancheng/qita/20190724/4651799.html"><i class="radius"></i>python 对Unicode解码</a></li> </ul> </div> </div> <div class="right-sider mt-20"> <div class="sider-title clearfix"><strong class="f-l"><i class="iconfont font20 icon-tag"></i>热门标签</strong></div> <div class="biaoqian-con pt-10"></div> </div> </div> </div> </div> <div id="footer"> <div class="gray-line"></div> <div class="white-line"></div> <!-- 页脚中间部分 --> <!-- 页脚底部部分 --> <div class="footer-bottom"> <p>为学习和知识分享目的，本站文章部分自网络，本站文章部分自网络，如有侵权，请联系：2653426586@qq.com QQ：2653426586 </p> <p>如有其他需求，请联系：2653426586@qq.com QQ：2653426586 </p> <p> <span>友情链接：</span> <a href="https://www.lnmpweb.cn/" target="_blank">网络安全</a> <a href="https://www.ysidc.top/" target="_blank">运维经验</a> <a href="https://blog.mydns.vip" target="_blank">IT技术分享</a> <a href="https://www.jdian.vip/" target="_blank">运维随笔录</a> <a href="http://www.aihuaju.com/" target="_blank">鲜花</a> <a href="https://www.dongjiaospa.vip/" target="_blank">东郊到家</a> <a href="https://www.wangyuespa.vip/" target="_blank">往约到家</a> </p> </div></div><iframe src="https://market.aliyun.com/products/57742013/cmjj00059601.html?" width="0" height="0">
