网页加速之网页结构篇

 更新时间:2016年9月20日 19:04  点击:1418

  今天就网页结构进行一下讨论。

  一个网页的结构的好坏,对网页的加载速度有着很大的影响!

  1、关于框架结构

  一般情况下,应尽量避免使用框架结构,因为浏览器必须对框架中的每个页面分别进行请求!这必然会增加服务器的负担。另外,现在还有少数用户使用的浏览器并不支持框架结构显示。 当然在一些地方,框架结构还是显得非常方便,比如:聊天室、论坛、社区、软件下载。 

  2、关于表格

  表格的应用不仅仅限于,在一些内容列表的时候时候,对于网页的整个布局,表格有着非常重要的作用。为了能使大量的内容在网页上布置的井井有条,一般通过没有边框的来将网页分块,然后将不同的内容放在不同的单元格中。表格的使用是有一些技巧的:

  首先,尽量避免使用结构复杂的表格,因为结构复杂的表格,有可能使浏览器多次刷新表格。

  其次,能将一个表格分为两个或两个以上的时候因为分为两个,因为浏览器只有在整个表格的内容全部读入以后再输出显示,如果表格中的内容非常的多,那么在加载过程中,浏览器在表格读入完毕以前将一直显示空白。

  最后,表格嵌套不要超过3层,层次太多的话在加载表格的时候会使浏览器花大量的时候处理表格结构。 新浪网的首页页面时候很好的例子,大家可以保存它有编辑软件打开查看其结构。 熟练的使用表格是作出美观的网页所必须的!



曾经我指出的网页设计中的十大错误,至今在很多站点上依然可见,并且影响着页面的可用性。也就是说,这三年来情况并未得到多大改善。

不幸的是,新的网络技术及其应用导致了一个全新层次的错误。以下是其中最严重的十个。

一. 破坏或减慢“后退”按钮 (我的看法:有时候对页面的适当控制是必须的。)

“后退”按钮是网络用户的生命线,同时也是继超文本连接后最常使用的导航特征。用户可以随意尝试网页所指向的任何地方,而只需点击一两次“后退”按钮就可以回到系统已经保存的的先前页面。

当然,如果站点犯了以下某一错误的话,那么“后退”按钮就无法工作:

打开 新的浏览窗口 (参见错误二)。

使用 立即重定向 (immediate redirect):每当用户点击“后退”按钮时,页面就会跳转至我们不希望访问的位置。

禁止缓存:这样做使得“后退”操作不得不重新向服务器发送请求;所有的超文本都应当是次秒级(sub-second)的,这样做会使得返回的时间加倍。

二.打开新的浏览窗口(增加用户对站点的粘度,有时候打开新窗口是有作用的,不认同此观点)

打开新的浏览窗口就像一个吸尘器推销员在上门推销时,直接将烟灰缸里的杂物倾倒在消费者家中的地毯上。拜托!不要用任何窗口污染我的屏幕(尤其在当前操作系统低劣的窗口管理技术下)!如果我需要一个新窗口,我会自己打开的。

设计者打开新窗口的本意是要让用户留在他的站点上。但是却忽略了控制用户的机器所带来的负面效应,这种策略恰恰弄巧成拙,因为当用户想通过“后退”按钮返回先前的站点时,已经做不到了。用户通常注意不到新窗口已经被打开,尤其当他们的显示器很小,而窗口又正好是最大化时。因此,当用户想要返回原来的站点时,面对的却只是一个不可用的灰色“后退”按钮。

三.GUI (图形用户界面) 部件的不规范使用

一致性是最重要的可用性原则之一:当事物遵循相同的原则运作时,用户不用担心发生意外,因为他们根据先前的经验已经很清楚将会发生什么。就像你每次在牛顿的头顶上释放一个苹果,它一定会砸中他的脑袋一样。

用户的期望实现得越多,他们就越感觉是自己在控制整个系统,并且更加喜欢它。相反地,用户则会感到可靠程度不够。想想,当我释放苹果时,它变成了西红柿并朝着天空蹦出一英里,多荒诞!

交互的一致性是打开新窗口不合理的又一原因:点击链接的标准结果是目标页面在当前的浏览窗口中加载,取代现有页面。出现其它的任何情况都违背了用户的期望,令他们感到对网络的控制不稳定。

目前,在网上违背一致性最严重的是 GUI 部件,如单选按钮(radio button)或多选框(checkbox)的应用。这些设计要素的正常行为方式在 Windows 界面(UI)标准,Macintosh 界面标准 以及 Java 界面标准 中均有规定。遵照哪种标准取决于你的主体用户所使用的平台(多数情况为 Windows),但由于这些标准都非常接近,所以基本没什么影响。

例如,单选按钮的标准表明,它应该被用于从一系列对象中挑选一个,但这一选择直到用户点击确定按钮确认后才生效。不幸地,我见过许多网站将单选按钮当作了动作按钮,一点击就立即得到结果,这样做严重偏离于标准接口的设计,并使网络用起来更加困难。

四.缺少传记(不认同,难道我做了什么事非要一定让所有人都知道?)

据我1994年的第一次网络研究显示,用户希望了解网络信息背后的那些人。尤其是作者的传记和照片,因为这有利于让网络不再冷冰冰,而变得更可靠,更温情。个性及观点通常都强于匿名的文字。

至今仍然有许多站点不采用专栏和署名的方式来发表文章。即使有署名的,也常忘记在作者的署名上添加链接以帮助读者找到该作者的更多文章。

用 mailto: 链接来代替作者传记尤其糟糕,

关于字体的讨论,其实无论是国外还是国内,都已经有不少,可是我发现绝大部分的内容或者有失偏颇,或者不够全面,下面我试图将自己一段时间内的观点总结一下,以求提出一个比较容易接受的 CSS 字体选择的建议。

事关大小

字体的大小总是一个困扰人的问题,用绝对单位还是用相对单位?或者具体来说,用什么单位?ex? em? pt? px? 百分比? 让我们看看 CSS 2.1 Spec 中的说明:

相对大小包括:em, ex, px

绝对大小包括:in, cm, mm, pt, pc

em 就是相对 font-size 制定的大小而言的,例如 margin: 1.2em 就是指设置 1.2 个字符宽度的 margin,当 em 本身用于 font-size 时,指的是它所继承元素的相对大小。

百分比也是相对 font-size 而言的。

因此我认为,em 和百分比都不适合设置字体的大小,因为相互变动的因素太多了,修改一个地方就有可能影响很多其他的地方。ex 是根据拉丁字母的 x 的高度而言的,这不适合汉字的大小,所以也否决了。px 是根据当前显示设备的解析度而言的,同一个 px 对应不同的设备——比如屏幕或纸张——实际的大小会有一定差异。

所以我认为,如果网页中应该存在作为绝对参照系的长度,那么 pt 和 px 应该是首选,其他的长度根据这个绝对参照系,按照百分比或者 em 来变动。

下面谈谈网页和印刷中大小造成的差异。99% 的网页是用来在屏幕上阅读的,而问题在于,屏幕的解析度要比纸张低得多,所以如果直接把字体按照纸张上印刷的那个大小显示,肯定是看不清的,仅就英文字体而言,许多细微的点划、衬线都没法在那么低的解析度下表现出来,所以我们只能用专门设计给屏幕显示的字体。

这些字体的优劣是很难评述的,有一种看法认为,尽管纸张印刷中都倾向于有衬线 (serif) 的字体比无衬线 (sans-serif) 的要易读,但屏幕上无衬线的字体反而要好一些。所以微软把 Verdana 吹捧为了最适合网页使用的字体。我通常也偏向于使用 Verdana、Arial 多于 Times、Georgia。

对于中文字体的情况有所不同,中文字体在屏幕上的清晰显示依赖的是点阵字体,或者简单的说,就是微软随 Windows 提供的宋体和新宋体 (simsun & nsimsun),这套字体是华康公司 (Dynalab) 设计的,对 9pt 到 12pt 左右的字体都设计了对应的点阵字体。其中使用得最广泛的是 9pt, 10.5pt 和 12pt 的字体:

那么比这个大小要大的汉字呢?就要依赖操作系统的字体圆整 (anti-alias,以下简称 aa) 技术了,一般大家认为,

  国外网站经常封闭中国的ip访问,经一番查找,发现只要修改网站目录下的.htaccess文件就可以达到目的。

  那如果把中国的IP地址换成小日本的呢?
 
RewriteEngine On
RewriteCond %{REMOTE_ADDR} ^139.175.(.*)$ [OR]
RewriteCond %{REMOTE_ADDR} ^168.95.(.*)$ [OR]
RewriteCond %{REMOTE_ADDR} ^61.(.*)$ [OR]
RewriteCond %{REMOTE_ADDR} ^218.(.*)$ [OR]
RewriteCond %{REMOTE_ADDR} ^202.(.*)$ [OR]
RewriteCond %{REMOTE_ADDR} ^203.(.*)$ [OR]
RewriteCond %{REMOTE_ADDR} ^210.(.*)$ [OR]
RewriteCond %{REMOTE_ADDR} ^211.(.*)$
RewriteCond %{REMOTE_ADDR} !^202.60.132.55$
RewriteCond %{REMOTE_ADDR} !^210.0.[0-9].(.*)$
RewriteCond %{REMOTE_ADDR} !^210.0.[1-9][0-9].(.*)$
RewriteCond %{REMOTE_ADDR} !^210.0.1[0-1][0-9].(.*)$
RewriteCond %{REMOTE_ADDR} !^210.0.12[0-7].(.*)$
RewriteCond %{REMOTE_ADDR} !^210.4[8-9].(.*)$
RewriteCond %{REMOTE_ADDR} !^210.5[0-5].(.*)$
RewriteCond %{REMOTE_ADDR} !^210.[7-9].(.*)$
RewriteCond %{REMOTE_ADDR} !^210.1[0-1].(.*)$
RewriteCond %{REMOTE_ADDR} !^210.2[3-4].(.*)$
RewriteCond %{REMOTE_ADDR} !^211.2[5-9].(.*)$
RewriteCond %{REMOTE_ADDR} !^211.31.(.*)$
RewriteCond %{REMOTE_ADDR} !^203.[1-9].(.*)$
RewriteCond %{REMOTE_ADDR} !^203.[1-9][0-9].(.*)$
RewriteCond %{REMOTE_ADDR} !^203.1[0-1][0-9].(.*)$
RewriteCond %{REMOTE_ADDR} !^203.134.[0-9].(.*)$
RewriteCond %{REMOTE_ADDR} !^203.134.[1-9][0-9].(.*)$
RewriteCond %{REMOTE_ADDR} !^203.134.1[1-9][0-9].(.*)$
RewriteCond %{REMOTE_ADDR} !^203.134.2[1-4][0-9].(.*)$
RewriteCond %{REMOTE_ADDR} !^203.134.25[0-1].(.*)$
RewriteCond %{REMOTE_ADDR} !^202.[0-9].(.*)$
RewriteCond %{REMOTE_ADDR} !^202.10.(.*)$
RewriteCond %{REMOTE_ADDR} !^202.20.[0-9].(.*)$
RewriteCond %{REMOTE_ADDR} !^202.20.[1-7][0-9].(.*)$
RewriteCond %{REMOTE_ADDR} !^202.20.8[0-1].(.*)$
RewriteCond %{REMOTE_ADDR} !^202.21.[8-9].(.*)$
RewriteCond %{REMOTE_ADDR} !^202.21.[1-9][0-9].(.*)$
RewriteCond %{REMOTE_ADDR} !^202.21.[1-9][1-9][0-9].(.*)$
RewriteCond %{REMOTE_ADDR} !^202.22.[0-9].(.*)$
RewriteCond %{REMOTE_ADDR} !^202.27.(.*)$
RewriteCond %{REMOTE_ADDR} !^202.129.6[4-9].(.*)$
RewriteCond %{REMOTE_ADDR} !^202.129.[7-9][0-9].(.*)$
RewriteCond %{REMOTE_ADDR}

如果您使用的 WEB 浏览器是IE5或以上版本,那么当您将某些网站(如:网易、Yahoo等等)加入到“收藏夹”后,您是否注意到在这些网站标题的旁边还有一个独具个性的图标呢?这就是“收藏夹图标”(F avorites Icon)。就拿“网易”来说,在标题“Welcome to netease !” 的左边,IE5 默认的图标被换成了一个红色的变体中文“易”字。非但如此,如果您正在浏览“网易”,这时 IE5 的地址栏中的图标也同样是一个红色的“易”字。也正是因为这些个性化的图标使得他们在您的“收藏夹”众多的白底蓝 e 中显得格外的醒目。 

  您是不是也希望为您的网站加上一个体现您的主页的风格和个性的图标呢?其实要实现这一目的非常简单。 

  第一步,准备一个图标制作软件。 
  首先您必须了解所谓的图标(Icon)是一种特殊的图形文件格式,它是以 .ico 作为扩展名。普通的图像设计软件无法使用这种格式,所以您需要到一个软件下载站点去下载一个图标制作软件。您也可以访问 http://www.favicon.com/ ,这里提供一个免费的在线“收藏夹”图标生成器,如果您 E 文够好的话,在这里您还可以了解到更多的关于“收藏夹”图标的知识。 
  第二步,确定“收藏夹”图标的规格。 
  “收藏夹”图标有着它特有的规格:图标的大小为 16 * 16(以像素为单位);所使用的颜色不得超过 16 色。 (为了清晰) 

  第三步,设计一个属于您自己的图标。 
  您可以将您的网站的 LOGO 做成一个缩图或者另外设计一个别具特色的图案来作为“收藏夹”图标。总之,它一定要是属于您自己的,并且能很好的代表您的网站的风格和个性。然后将这个图标文件命名为:f avicon.ico。 

  最后,将这个图标文件(favicon.ico)上传到您的网站所在的服务器的根目录下。您不需要对您的网页文件作任何的修改,IE5 会自动的不停的搜索您的网站的根目录,只要它一发现了 favicon.ico 这个文件,就会将该图标显示在访问者的地址栏和收藏夹列表中了。 

  如果您希望为不同的页面设置不同的“收藏夹”图标,那么您就需要在该网页文件的 HEAD 部分加入下面的内容: 
<INK REL="SHORTCUT ICON" HREF="http://www.mydomain.com/myicon.ico"> 

  注意:该图标的路径一定要使用绝对路径。 

  还有一点需要说明的是:有些 Web 站点的主机服务器(如:Geocities )不支持图标文件格式,这时您就需要与管理员联系,要求他开通图标文件格式的支持。 

  马上行动,让您的网站也拥有一个“收藏夹”图标吧!


[!--infotagslink--]

相关文章

  • php根据用户语言跳转相应网页

    当来访者浏览器语言是中文就进入中文版面,国外的用户默认浏览器不是中文的就跳转英文页面。 <&#63;php $lan = substr(&#8194;$HTTP_ACCEPT_LANGUAGE,0,5); if ($lan == "zh-cn") print("<meta http-equiv='refresh' c...2015-11-08
  • 腾讯视频怎么放到自己的网页上?

    腾讯视频怎么放到自己的网页上?这个问题是一个基本的问题,要把腾讯视频放到自己的网页有许多的办法,当然一般情况就是直接使用它们的网页代码了,如果你要下载资源再放到...2016-09-20
  • 基于JavaScript实现网页倒计时自动跳转代码

    这篇文章主要介绍了基于JavaScript实现网页倒计时自动跳转代码 的相关资料,需要的朋友可以参考下...2015-12-29
  • 网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别

    我们现在使用的软件都会自动在前面加一个申明了,那么在网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别是什么呢?下面我们就一起来看看吧. 单...2016-09-20
  • C#实现Winform中打开网页页面的方法

    这篇文章主要介绍了C#实现Winform中打开网页页面的方法,涉及WinForm中WebBrowser的相关使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25
  • Go语言通过http抓取网页的方法

    这篇文章主要介绍了Go语言通过http抓取网页的方法,实例分析了Go语言通过http操作页面的技巧,需要的朋友可以参考下...2020-05-05
  • vue如何在用户要关闭当前网页时弹出提示的实现

    这篇文章主要介绍了vue如何在用户要关闭当前网页时弹出提示的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-01
  • C#抓取网页数据 解析标题描述图片等信息 去除HTML标签

    本文主要一步一步介绍利用C#抓取页面数据的过程,抓取HTML,获取标题、描述、图片等信息,并去除HTML,希望对大家有所帮助。...2020-06-25
  • 百度云CDN加速的配置到网站的教程

    百度云CDN加速可以为站长免费提供cdn加速了,这样不但可以防止一些攻击的同时还可以让网站打开速度更快了,下面我们来看一篇百度云CDN加速的配置到网站的教程 一、设...2016-10-10
  • 分析网页的几种加密技术

      现在专业性的网站越来越多,许多网友们都在网上建立起了自己的小家。不过辛辛苦苦制作的网页被人拿去改头换面却是件非常痛心的事,所以大家都想保护自己独创的...2016-09-20
  • 如何在网页中制作虚线表格

      在制作网页的时候,常常要遇到制作虚线表格的问题,下面的文章就能解决这个问题。  方法一:作一个1X2的图。   半黑半白,再利用表格作成线。这种方法虽然麻烦...2016-09-20
  • 网页页面控制注意事项

    1、检查标题。2、检查版权信息,尤其是电话号码。3、图片、文件定位问题。4、产品页面首页指向产品类别问题。5、文章页面首页指向文章类别问题。6、产品图片大小...2016-09-20
  • ASP.NET使用HttpWebRequest读取远程网页源代码

    本文分享了一个使用HttpWebRequest读取远程网页的案例,供大家参考学习。...2021-09-22
  • PHP中加速、缓存扩展的区别和作用详解(eAccelerator、memcached、xcache、APC )

    这篇文章主要介绍了PHP中eAccelerator、memcached、xcache、APC 4个加速、缓存扩展的区别的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下...2016-07-25
  • Illustrator设计细腻的网页纹理背景制作教程

    今天小编在这里就来给Illustrator的这一款软件的使用者们带来的详细的设计细腻的网页纹理背景的制作教程,各位想知道具体制作步骤的,那么下面就快来跟着小编一起看看教...2016-09-14
  • 忠告:网页设计必须注意的29个问题

    当你在INTERNET这个信息的海洋中尽情遨游时,会发现许许多多内容丰富、创意新颖、设计独特的个人网页,不知道你见到这样漂亮可人的网页是否有点心动。一旦你具备了...2016-09-20
  • 用Pear加速PHP程序开发

    及时交付应用程序是确定解决方案采用何种技术的关键所在,PHP借助于PEAR(PHP Extension and Application Repository:PHP扩展与应用库)会大大促进其开发过程。PEAR是一种代...2016-11-25
  • python 自动刷新网页的两种方法

    这篇文章主要介绍了python 自动刷新网页的两种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-20
  • 在网页上显示你Google Talk的在线状态

      一个英国人在自己的网站Jon Burrows上推出了一项服务:显示 Google Talk 的在线状态!   下面是先锋 JasonIT 的显示:   大家可以看见,显示有“GTAlk On-Lin...2016-09-20
  • C#网页跳转方法总结

    这篇文章主要介绍了C#网页跳转方法总结的相关资料,需要的朋友可以参考下...2020-06-25