Archive for 八月, 2007

访问速度缓慢的互联网已经成为过去,但页面能瞬时呈现也只是未来才会发生的事情. Christian heilmann的一些技巧,现在就可以令你的网站访问起来更为流畅。 页面首次访问时的延时是网站和Web应用设计中遇到的一个很重要的问题。用户总是感觉页面相应的不够快。 为什么用户会有这样的感觉?也许用户还保留多年前那种按分钟计费的接入网方式的使用习惯(现在的饭店或机场还保持那种接入方式);也许是因为用户觉得页面要有足够快的响应才能称得上所谓的信息高速路。但在我看来这是好莱坞的责任。在每部好莱坞的动作大片中:敲击一下键盘的同时,电脑屏幕上就会出现超高分辨率,有着密密麻麻数据显示的精美网站操作界面;而且网站上读取一部百科全书也不过短短几毫秒就可以完成。 但在现实生活中却完全不是这么回事,因为无论你如何尽量简化你的页面,延迟还是存在的。而且为了使页面更绚丽,通常会使用flash,但如果滥用flash会严重影响页面的响应速度。作为网络应用,还必须保证页面元素的加载顺序,不会因为页面上未完全加载的元素被用户访问而造成异常。 那些因素造成网站响应缓慢? 当谈到提高网站响应速度,最通常的做法就是尽可能的减少网站文件的尺寸。(这也导致针对JavaScript库文件大小的无休止的讨论,但最终也没什么结果。)实际上,有许多因素会影响到网页初次访问的响应速度: HTML文档的大小。 页面中嵌入的脚本、图像、多媒体元素文档的大小。 HTML页面的复杂程度。(浏览器可以很快的展现简单的页面) 用户的接入速度 会被页面访问的第三方内容所在服务器的访问速度。 网站域名及其页面包含的外部域名的DNS解析速度。 用户计算机的性能。(浏览器会因为系统消耗过多的资源在其他任务上而变得响应缓慢)。 服务器的相应速度。 除了以上的技术上的因素会导致网站响应变慢以外,还有一些人为设计上的因素。例如:为了避免页面加载过程中出现的页面区域错乱和无图像显示;页面被设计为需要页面内容完全加载完毕后才一起显示。 让网站响应变快的方法 经过实践,以下经验对于解决由于技术和人为因素造成网站响应变慢的问题会有所帮助。 在不影响页面显示质量的前提下,尽可能的优化HTML代码。(这包括在发布页面时,去掉HTML文档中的注释以及冗余的换行标记。但为了保证页面的可读性,这些代码还应当保留在源代码中) 页面中尽可能少的包含其他外部引用,减少文档之间的依赖。(可以将多个脚本放入一个脚本文件,用CSS的sprite技巧将多个小图片合并为一个大图,这样就只需要加载一次) 确保你没有从外部服务器上引用第三方的内容:用一个脚本将远程的RSS源缓存在本地。这样不仅可以避免DNS解析所造成的延时,而且也不会因为外部服务器的宕机影响你的服务。 尽可能的制定图片及包含图片的元素的尺寸。这样可以避免页面展现时由于图片陆续加载而造成页面元素跳动的现象。 在页面的末端加载大的脚本,这样页面的可以在大的脚本加载完成前展示出来。如果把大的脚本在页面头元素中加载,则浏览器会等到脚本完全加载完成后才显示页面内容。 web开发准则与提高响应速度 可惜上文提到的这些计巧与我们通常认为的web开发的准则有冲突。例如减少页面包含文件数量会造成产品的可维护性变差。为了使网站的不用页面(首页,文章页,存档页)保持不同的页面风格最简单的方法是不同类型的页面的特殊的样式存放在他们各自的样式文件中。一个页面可以有一个最基本的样式文件,然后根据页面的不同类型再包含该类型页面的指定的样式文件。 脚本的存放也可以用相同的方法,将功能相近的脚本放到一个文件中。这样有助于代码的维护。你不用察看所有的脚本代码就可以很快的找到你需要的函数。此外,将脚本加入到页面的主体部分通常被认为是不良的编码习惯,因为他将用户的行为控制逻辑嵌入的页面的结构中。 幸好有技术方案可以解决这些问题。 用一个包含来引用多个样式或脚本。 爱德华艾略特提出的解决方法是用一个PHP的脚本将多个CSS样式或脚本整理成单一的档案。这个脚本对于javascript还可以调用Douglas Crockford’s的JSmin进行压缩。这个脚本使用很简单,而且可以缓存归并后的文件,直到这些被归并的文件被修改。这就意味着当你修改被归并的某个文件后,脚本会自动重新打包缓存。这样就很简单的解决了代码维护和页面响应速度间的矛盾。 解决页面加载的问题 另一个棘手的问题是,嵌入在页面头元素的脚本,必要要等页面加载完成后才能被调用。这样就会有些延时 ,而且还会产生问题。 延时是由于浏览器加载,解析和展现文档的方式造成的。当你用window的onload事件加载脚本时,浏览器的处理顺序是这样的: 解析HTML代码装载外部脚本和样式表 执行被解析后的脚本 建立HTML的DOM树 装载图片和其它外部引用内容 页面装载完毕 在大多数情况下这样的加载会比较慢,而有些步骤需要提前。许多聪明的程序员致力于解决这个问题,不时的会有新的解决方案出现。大多数的javascript脚本都会有针对onAvailable或onDocumentReady的事件处理。这类事件会在部分文档装载完成后就会被触发,而不用等到大量图片被加载。但通过实践和反复测试,针对旧的浏览器和操作系统并没有无懈可击的解决方案。但我相信只要我们继续努力,再加上那么点运气一定会找到最终的解决方案的。 对于web应用由于调用未加载完成的元素而导致异常是很致命的问题。如果这类问题时发生在页面美化部分,则会有一些解决方法。 为了解决一次加载过多内容的问题,可以采按需分别加载内容。 为了更好的装饰页面一次载入大量的内容,往往会产生问题。大量的内容有可能是每个标签中都包含过多的文字或者是一个有四级的导航栏。运用javacript脚本可以很轻松的动态展示这些内容。但是如果脚本被禁用,则这些动态内容就会失去样式而被打乱,无法正确地展示,这当然不是一个好主意。页面也没有必要一次将所有的动态展示内容都一次加载,这样会增加页面载入的负载。 解决方法是当用户触发标签时再用javascript动态的加载显示的内容。当用户关闭脚本后也会显示一个基本的静态文本。 用什么方法来加载额外的内容取决于你需要引用的是什么。最简单的方法是动态的生成脚本标签。这是一个很早就有的方法,被用来引入大量的javascript数据集或在页面加载后再引入脚本。 function pull(){ var s = document.createElement(‘script’); s.type = ‘text/javascript’; [...]

全世界都知道ALEXA的排名算法做了调整,所以很多中文站排名都掉了,有人掉就一定有人升,不过这个升的应该大部分不是中文站。这里思域且不说谁升谁掉,想说说在排名算法调整之前为什么有些站排名升得那么块。 博客网(bokee.com)、中国博客网(blogcn.com)、站长站(chinaz.com)、我要啦(5i.la)我们来看看这四个站,前两个是博客门户,后两个是站长聚集的地方。而且这四个站流量曲线总体看来攀升得很快。思域承认作为网站经营方面有他们成功的地方,他们的特色服务,他们独特的经营模式都为他们带来了用户,建立了黏性。但是思域发现这两类网站排名的攀升并不完全取决与其提供特色的服务和独特的经营模式,还取决于他们面向的特殊群体加快了他们在ALEXA中的排名。 思域可以豪不犹豫的说,上面两类网站最大的用户群体绝对是IT人士,互联网从业人士又占了其中的大部分,而在中国安装了Alexa工具条――Alexa Toolbar最多的就是这类群体。为什么思域要说这个?因为Alexa排名算法其中很大的一部分取决于访问这个网站的用户中有多少是安装了Alexa Toolbar。 最近Alexa调整了它的排名算法,思域还没有明白现在的算法是怎样的,但我们可以回顾一下之前的算法。 在06年3月份之前,Alexa的网站排名是按照每个特定网站的被访问量进行排名的。访问量越大,越靠前。 某个特定网站被排名时,依据的访问量数据是基于该网站3个月访问量记录的累积。也就是说Alexa每三个月发布一次排名结果,即通常说的名次。它的计算主要取决于用户链接数(Users Reach)和页面浏览数(Page Views)。Alexa系统每天对每个网站的用户链接数和页面浏览数进行统计,通过这两个量的三个月累积值的几何平均得出当前名次。变动是指与前三个月的比较。 用户链接数(Users Reach)指通过Internet访问某个特定网站的人数。用访问某个特定网站的人数占所有Internet用户数的比例来表示。即:用户链接数 = (访问人数/全部Alexa用户数)* 100%,Alexa以每百万人作为计数单位。以雅虎(Yahoo)为例,如果它的用户链接数为28%的话,就是说,随意抽取一百万的Internet用户,其中有280,000人访问Yahoo。 页面浏览数(Page Views) 是指用户访问了某个特定网站的多少个页面。是所有访问该网站的用户浏览的页面数之和。每个用户浏览的页面数取平均值,是所有访问该网站的用户每天每人浏览的独立页面数的平均。同一人、同一天、对同一页面的多次浏览只记一次。 值得大家注意的是,纳入统计的访问量仅来自使用Alexa工具栏(Alexa Toolbar)的用户。也就是说,只有用户下载了Alexa工具栏,并将其嵌入自己的浏览器。这样,该用户访问某个网站的话,访问的记录才能算作被访问网站的访问量。据Alexa统计,现在使用该工具栏的用户达数百万。 从上面的算法大家应该知道博客网和站长站这两类网站排名相对较高的其中一个重要因素了吧? 最近我要啦第三方流量统计网站Alexa排名提升得甚是凶猛,站长杨队告诉思域,每天3万左右的访问IP,其中七成是站长,而大家可以想像这2万多的站长40%安装了alexa工具条不为过吧? 对于博客网排名高还有另一个值得大家关注的因素,还要说到Alexa的算法。 Alexa 自身的排名采用自定的 Traffic Rank ,在这个定义中,排名的数据来自 Reach (达到率)的平方乘以单人 PageView 。也就是说,达到率以平方的方式来实现了其很高的权重。这个定义给那些通过程序来增加弹出页面数的网站设置了障碍,却同时给那些大量分设子域名的网站提供了机会。 因为 Reach 的平方乘以单人 PageView ,也就等于总 PageView 乘以 Reach ,那么,当一个网站分设更多的子域名如 a.sina.com 、 b.sina.com ……的时候,虽然总 PageView 没有变化, Reach 却得以成倍增加,这是造成大型网站总是比中小网站的 Traffic 数值高很多的重要原因。 好了,大家看看bokee和blogcn他们的个人博客域名是什么形式的?显然,他们都是二级域名,例如用户abc的个人博客网址就为:abc.bokee.com和abc.blogcn.com。想想博客网上有多少用户,有多少二级域名?从上面说的Alexa 自身的排名采用自定的 Traffic Rank来看,他们具备了多么好的条件啊! 综上所述,你网站的用户群体安装alexa工具条比例越大,对你的alexa排名越有利,你网站所产生的二级域名越多,且这些二级域名都是有一定流量的,对你的alexa排名越有利。那么亲爱的站长们,你们还在等什么呢? [...]

其实各位看官已不是第一天上网了,对一些网站的内容表现形式虽然对他们的好坏因果说不出个所以然来,但是感觉对比起来还是有差异的。但是其实网页的内容体现也是有考究的,今天思域就和大家分享一下!

*网页个性化的概念: 网页的个性化是指网页根据用户直接提供的,或从用户间接获得的信息调整自己的内容 &表达方式,以满足各个用户不同的需求。 *个性化网站模式举例: 这里可以给大家举例4个模式:


About this blog

产品设计、产品运营、产品营销。讲述产品经理自己的故事!

Photostream