提高网页页面显示速度的秘技

 更新时间:2016年9月20日 19:02  点击:1467

  在安排Web页面的布局时,最常用的方法之一是用HTML表格界定页面的结构。例如,假设Web页面由顶端的导航条和它下面的两栏(列)构成——左边的列是一个导航条,右边的列是实际安置内容的区域。对于这样一个页面,我们可以用一个两行、两列的大表格进行布局:在第一行中,合并两个列然后放上顶端导航表格;在第二个行中,左边的列放上一个显示导航按钮的表格,右边的列再用一个表格显示页面的实际内容。用这种表格嵌套表格的方法进行布局可以得到非常好的效果。

  要制作出这种页面,我们可以使用如下HTML代码:

< TABLE BORDER="0" > < TR > < TD COLSPAN="2" >< !-- 顶端导航条的内容 -- >< /TD > < /TR > < TR > < TD ALIGN="LEFT" VALIGN="TOP" >< !-- 左边导航条的内容 -- >< /TD > < TD ALIGN="LEFT" VALIGN="TOP" >< !-- 页面内容区域 -- >< /TD > < /TR > < /TABLE >



  如果浏览器发现页面中有一个TABLE标记,在接收到对应的结束标记< /TABLE >之前它不会显示这个表格。因此,如果整个页面都放入了一个大表格中,在浏览器下载这个大表格的< /TABLE >标记之前整个页面都不会显示。当显示内容非常多的页面时(例如,搜索结果或者电子商务网站上的产品目录),表格的延迟显示会导致整个页面显示的停顿。

  为了避免出现这种情况,我们应该把页面划分成多个较小且独立的表格区域。这样的话,每个表格的HTML代码下载之后浏览器就可以立即显示它。对于浏览者来说,页面将在屏幕上一部分、一部分地逐渐显示出来。而且更重要的是,这种页面在屏幕上开始显示的速度要比前面等待整个页面下载才显示的方法快得多。

  对于前面介绍的例子,我们不是使用单个大表格进行页面布局,而是使用三个独立的表格:第一个表格显示页面顶端的导航条,使其具有足够的宽度显示页面内容并完整地给出其< TABLE >< /TABLE >标记对;在第一个表格的左下位置安排第二个表格,使这个表格向左对齐;最后一个表格位于第二个表格的右边,用于放置页面内容。由于现在每一部分都是一个独立的表格,浏览器只要下载了任一部分的代码就会立即显示它。因此,页面顶端和左面的导航条将比页面其余部分更快地显示出来。这就避免了让浏览者长时间地在空白页面前等待,而是给了他这样一种印象:页面已经开始下载,整个页面将立刻出现在屏幕上。

  修改后的布局代码如下所示:

< TABLE BORDER="0" WIDTH="100%" > < TR > < TD ALIGN="CENTER" VALIGN="TOP" >< !-- 顶端导航条的内容 -- >< /TD > < /TR > < /TABLE > < TABLE BORDER="0" ALIGN="LEFT" > < TR > < TD ALIGN="LEFT" VALIGN="TOP" >< !-- 左边导航条的内容 -- >< /TD > < /TR > < /TABLE > < TABLE BORDER="0" > < TR > < TD ALIGN="LEFT" VALIGN="TOP" >< !-- 页面内容区域 -- >< /TD > < /TR > < /TABLE >

  正如尽可能早地关闭TABLE标记使得浏览器能够快速地显示出表格中的数据,还有另外两个标记也同样可以用这种方法提高显示速度,这两个标记就是用于制作列表框的< OPTION >标记和用于制作无序列表的< LI >标记。

不知你以前是否学过页面排版,对页面文字、图象、色彩的表达方式做过研究,不管怎样,制作网页就应该了解一些版面设计的知识。

  首先我们在制作一个网页之前,应该先进行构思版式,版面设计基础较差的朋友最好将网页的版式画在纸上,免得在做了一半时发现页面不好看而放弃。

  第一步先明确页面主题,比如你正在做一个关于介绍娱乐的首页,就应先想好网页的标题。假设你把它叫做“娱乐前线”,那么就考虑是否有合适的图片来衬托主题,如果有现成的图片就ok了,没有的话,就根据情况来决定是否自己做一幅(可以选一幅较漂亮的明星图片),但不管怎样,标题的主色调应先定下来,这对后面几步的版面影响可很大。

  第二步明确页面上要链接的目录,比如你共有“明星动态、各大明星、新歌推介、我的明星、娱乐新闻等五个主链接目录,那么要将他们放在较显眼的位置,根据页面风格的不同可以放在顶部、左边、右边、中部等较明显的位置,主链接可以做成小图标的形式,但注意图片不能太大、也不能过分枪眼(一般情况下不比标题或主图的色彩重)。在明确次链接目录:假如本页有“历史回顾、友情链接、与我联系”等三个次目录,就放在比主链接次一些的位置,图片大小和用色不能超过主链接。

  第三步是指定主图,所谓主图,就是放一幅较能反映页面主题思想的图片,他的大小可适当超过页面上的任何图片,颜色也可不加限制。比如我们这里就用一幅股市交易大厅的照片。

  以上三步确定下来后,页面的基本风格就出现了,我们在根据情况进行调整,或者看是否加上背景,主要考虑主图是否需要背景。

  第四步是决定加入引导文。

  从版面设计上来将,一个有特色的主页,主要包含有三个要素:图象、排列方法、主色凋,这三者相辅相成、缺一不可;

  要成为主页设计高手,首先要成为计算机图形高手,仅这一点就可以让一些初入门者学上一年半载了。图片的要求与页面的内容有关,一些较随意的主页像股票、医药站点等,来访者并不在乎你能否做出精彩的图片,有些时候他们反而觉得放置图象后影响了访问速度,他们关心的只是页面内容;相反像一些需要靠图象来吸引访客的主页,如游戏介绍、影视介绍、风光名胜等站点,图象是一个极为重要的要素,在这里缺少了恰当的图象、整个页面就会黯然失色、就是一个不完整的主页。但是并不是每个人都可以成为图象制作高手,这需要去学一大堆繁琐复杂的砑     索引:
    每一位杰出的Web设计师,对Web设计都有者自己独特的见解.这里我们要介绍一些Web设计的正确观念和原则.
    内容:
    总则:
    作为一个Web设计师,最重要的一点是要有创意,没有创意的网站是不成功的.
    原则:
    1.要考虑带宽的问题;
    2.要考虑适应不同浏览器.不同分辨率的情况;
    3.要注重色彩的搭配问题;
    4.要让浏览者容易找到要找的东西,网页内容便于阅读;
    5.站点内容要精.专.及时更新;
    6.提供交互性
    7.简单即为美
    国际专页Web设计流程:
    1.初始会商,主要是收集该站点的关键信息,包括站点的目标读者.要发布的内容.开发Web服务器平台;
    2.概念开发,设计师根据收集的信息,开始构思,通常,设计师要把这些构思用草图的形式呈现给顾客,这个草图要有整个网站的结构,不同的布局.设计及导航;
    3.内容综合,当决定了设计师的设计,设计师开始制作一些初始图样,这些图样用PHOTOSHOP那样的程序来创建,然后,设计师将图样打印出来配合文字;
    4.HTML布局和导航,一旦客户同意了这些内容综合,设计师开始编制Web页面,导航器也被编制到页面中,使客户第一次真正体验一下;
    5.图形制作,如果客户同意了站点的外观和感受,设计师将大量制作所需的图形,并进行优化;
    6.内容流程,客户的书面材料利用各种网页技术(CSS、JAVA、FLASH),有机的和相关的图形整合在一起;
    7.测试,在站点被提交给客户之前,设计师要彻底测试每个Web页面和联结,利用清单,进行修补;
    8.交付,一旦签收,客户要经常进行他们的测试,找出排版和内容方面的错误,做完了这些次要的修正后,正式启用站点.
    这套完整的计划可以用1-12个月来完成,平均完成时间为4个月.当站点启用后,要进行跟踪调查,以确定人们如何使用站点。经过6-12个月的运行之后,重新收集数据,开始重新设计,然后这个Web设计过程再开始一遍.


     从微软推出了ASP(ActiveServerPage)后,它以其强大的功能,简单易学的特点而受到广大WEB开发人员的喜欢。但是它却有微软产品的通病,只能在Windows平台下使用,虽然它可以通过增加控件而在LINUX下使用,但是其功能最强大的DCOM控件却不能使用。而SUN公司在JAVA的基础下开发出的JSP(Java ServerPages)实现了动态页面与静态页面的分离,脱离了硬件平台的束缚,以及编译后运行等方式大大提高了其执行效率而逐渐成为因特网上的主流开发工具。为了使用广大应用ASP的程序员们能近快的学会JSP。现把其异同对比如下:

一、结构
   JSP和ASP在结构上类似,都是以"<%"和"%>"作为标计符,不同的是在标计符之间的代码ASP为JavaScript或VBScript脚本,而JSP为JAVA代码。JSP将网页的表现形式和服务器端的代码逻辑分开。作为服务器进程的JSP页面,首先被转换成servlet(一种服务器端运行的java程序)。Servlet支持HTTP协议的请求和响应。当JSP被转换成纯JAVA代码。多个用户同时请求一个jsp页面时,应用实例化线程来响应请求。这些线程由WEB服务器进程来管理,和ASP的线程管理器功能类似。同CGI为每个请求创建一个进程的模式比较,这种方式效率高的多。

二、性能和平台无关性
   与C++、VB等语言比较,JAVA被看作是个效率不太高的语言,但它以牺牲效率换来了平台无关性使JAVA可以在大多数操作系统上运行而不需要重新编译--许多人愿意为此而付出代价。JAVA的编译代码是一种字节代码,在运行时由操作系统上的一个Java VirtualMachine(JVM)虚拟机解释。字节代码可以在所有平台上迁移,而不需要任何改动。交叉平台编程倾向于采用所有操作系统的"最小公分母",尤其是使用图形化界面时(servlets不需要任何图形界面)。Servlets比传统的java程序(applets, javaapp)要快,因为它们在服务器端运行,不需要加载沉重的GUI(HTML的GUI是非常少的)。另外,servlets的字节代码只有在客户请求时才执行,所以尽管当首次调用servlets时会有几秒钟的加载时间,但后续的请求相应非常迅速,因为服务器已经缓存了运行的servlets。当前的jsp服务器,都带有java 即时编译器(JIT),因此,JSP的执行比每次都要解释执行的ASP代码要快,尤其是在代码中存在循环操作时,JSP的速度要快1到2个数量级.

三、Session管理
   为了跟踪用户的操作状态,ASP应用SESSION对象。JSP使用一个叫HttpSession的对象实现同样的功能。Session的信息保存在服务器端,Session的id保存在客户机的cookie中。如果客户机禁止cookie,Session Id就必须带在url后面。Session一般在服务器上设置了一个30分钟的过期时间,当客户停止活动后自动失效。Session 中保存和检索的信息不能是基本数据类型(primitivedatatypes)如(int, double)等,而必须是java的相应的object(对象)如(Integer,Double)。
HttpSessionsession=request.getSession();//得到一个session对象或创建一个
session.getId()//得到sessionID数
Integerid=(Integer)session.getValue("id")//检索出session的值并转化为整型 session.putValue("ItemValue",itemName);//ItemValue必须不是must简单类型

四、Application管理
   有时服务器需要管理面向整个应用的参数,使得每个客户都能获得同样的参数值。和Session一样,ASP使用Application对象而JSP使用ServletContext对象,操作的方法和Session一样。
getServletContext().setAttribute("Item",ItemValue);//设置一个应用变量
Integeri=(Integer)getServletContext().getAttribute("ItemName");//得到//item

五、ServerSideIncludes
   在服务器端引用上ASP和JSP有着相同之处。ASP和JSP都可以支持此功能的服务器(IIS,APACHE)上实现服务器端包含虚文件。但JSP是将动态页面的结果包含进来,而不是包含文件的代码本身。当你包含的文件在另一个服务器上时,不包含任何代码和对象是一个非常有效的功能。

ASP:<!--#includefile="subfile.asp"-->
JSP:<%@includefile="subfile.jsp"-->

    每一个网页制作的初学者,都想让自己的网页更漂亮,看起来更专业。要想制作 出声形兼俱的动态网页,您需要了解动态网页制作技术,它是建立在动态HTML语言(即DHTL语言)之上的一 种新技术,它包括CSS文字效果,层技术,框架结构,push技术,JavaScript、Java和ASP等。(听不懂, 太专业了!),听不懂没关系,您只要清楚,要使用Dreamwave3.0以上制作网页,因为Dreamwave3.0内置 以上大部分技术,您所要做的仅仅是插入层,拖动,复制,粘贴。也就是把动态网页脚本插入到原来网页 的HTML中。

  下面的动态网页制作技术可能是您需要的:

  推(push)技术,让您 网页上的新闻自动更新;Java小应用程序(Java applet),如让您网页中的图像模拟水滴落在预制图像文 件上,水面上激起层层涟漪,给人一促宁静致远的感受;Java Script脚本,让您的网页每次进入都播放 不同的音乐,如你第一次进入该网页播放《泰坦尼克号主题曲》,第二次进入则播放《999朵玫瑰》,第 三次进入……;ASP中的ADO的技术,让用户在浏览器画面中输入、更新和删除网站服务器的数据库信息。
  以上是目前国际上非常流行的技术,使用起来也不困难,不用编程,只需从网上下载相应的脚本 (即程序),将其添到您的网页上即可,任何稍微懂得一点网页制作的初学者都可以做到,怎么样?心动了 吧,且听我慢慢道来。

  一、使用Java动态小应用程序

  利用Java可以 在您的网页上加入各式各样的动态效果,它可是制作动态网页的好工具,代表了新一代的Web技术。
  Java于1995年问世,是一种由美国Sun公司开发的新一代编程语言,其目标是在网络环境中开发软件 。由于Java是一种编程语言,要想掌握它,需要有一定的计算机程序设计基础。然而对于网上的Java小应 用程序(Java Applet),即网页中小巧可爱的Java程序。你无须学会Java就可以使用,只要稍作改动就可 放在网页上使用。因此,怎么将现成的Java小应用程序嵌入自己的网页中,如何改动参数,让小应用程序 变成你自己的东西可是个关键。
  也许,大家对什么是“Java小应用程序”有些摸不着头脑。事 实上是伴随网页而来的Java程序有一个特别的名字,叫Applet,可以把它想像成是一个个小巧可爱的程序 ,这主是“Java小应用程序”名称的由来。
   捷径:要将Java小应用程序嵌入网页

  1.将Java applet脚本复制到网页的html文件中

  首先复制Java源程序, 进入 Dreamwave3中,在网页的某个位置插入新图层,并确定层在html中的位置。即按菜单插入/图层,点按菜 单窗口/html源文件,出现html源文件窗口,定位新加的层在html文件中的位置,如:将鼠标放到新图层 中打几个字母mmm,则html源文件也应该出现mmm,鼠标定位到html源文件中的mmm后,将html源文件中的 mmm删除。
按粘贴,将Java程序粘贴在html源文件中光标所在位置。

  2.注意还要将java 程序所需的*.class文件,*.gif背景文件复制到网页文件*.htm所在的同一目录下。按<F12>键预览。

  3.参数修改:

  下面是一个Java applet的源文件:比较重要的两行width="128" height="128"表示动画的宽和高,value="imfad1.gif"表示背景文件名。
<applet archive="AnWater.jar" code="AnWater.class" width="128" height="128">
动画的宽和高

<param name="image" value="imfad1.gif"> ; 载入图像

  Java动画的背景图 片是一些JPG或GIF的静态图片,动态效果是Java程序加在背景图片上产生的,如水波效果。假如要将Java 动画的背景图片改成另一图片,则可将另一图片复制到*.htm所在的同一目录下,在html源文件中修改背 景文件名,修改宽和高的值即可。新图片宽和高的值若不知道是多少,可在ACDSee的中打开该新图片,在 其底下的状态行有图片的宽和高的信息。
  假如你想让新图片的大小与原Java applet图片的大小 一致,可以用Photoshop对新图片进行放大或缩小。

  4.注意事项:

  要将java 程序所需的*.class文件,*.gif背景文件复制到网页文件*.htm所在的同一目录下。
  Java applet 的效果十分华丽,但将大降低浏览器的刷新速度,因此不可太贪多。一个页面有一两个Java Applet即可 。
   注意*.class文件的大小写。笔者就遇到这样的情况:有时提供的AnWater.class写成了 ANWATER.CLASS,这时Java Applet在本机上能运行,上传至服务器中,该有Java效果的位置只显示一块灰 板,开始以为上传过程中出错,造成文件缺损,但用CuteFTP上传了几次还是这样,用鼠标点击灰色方块 ,状态行提示找不到AnWater.class,

[!--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
  • 美图秀秀怎么提高图片清晰度 提高图片清晰度教程

    今天小编在这里就来给美图秀秀的这一款软件的使用者们来说下提高图片清晰度的具体教程,各位想知道具体操作步骤的使用者,那么下面就快来看一看小编分享的这一篇文章吧。...2016-09-14
  • C#抓取网页数据 解析标题描述图片等信息 去除HTML标签

    本文主要一步一步介绍利用C#抓取页面数据的过程,抓取HTML,获取标题、描述、图片等信息,并去除HTML,希望对大家有所帮助。...2020-06-25
  • 站长必看:怎么提高广告主转换率

    第一:网站的访问速度,对浏览者来说,这点是非常之重要的,一般来讲,如果一个站点打开速度慢,过了4-5秒还没打开的话,基本上浏览者就会关闭,看下一条信息了,在此bnnet 建议网站首页...2017-07-06
  • vue如何在用户要关闭当前网页时弹出提示的实现

    这篇文章主要介绍了vue如何在用户要关闭当前网页时弹出提示的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-01
  • 分析网页的几种加密技术

      现在专业性的网站越来越多,许多网友们都在网上建立起了自己的小家。不过辛辛苦苦制作的网页被人拿去改头换面却是件非常痛心的事,所以大家都想保护自己独创的...2016-09-20
  • $i++ ++$i 运行速度与区别

    关于$i++与++$i是什么区别了,下面来看看这些区别的分别。 <?php 方式一: $begin = time(); $i = 0; while(++$i < 10000) { $j = 0; while(++$j < 10000)...2016-11-25
  • 网页页面控制注意事项

    1、检查标题。2、检查版权信息,尤其是电话号码。3、图片、文件定位问题。4、产品页面首页指向产品类别问题。5、文章页面首页指向文章类别问题。6、产品图片大小...2016-09-20
  • 如何在网页中制作虚线表格

      在制作网页的时候,常常要遇到制作虚线表格的问题,下面的文章就能解决这个问题。  方法一:作一个1X2的图。   半黑半白,再利用表格作成线。这种方法虽然麻烦...2016-09-20
  • ASP.NET使用HttpWebRequest读取远程网页源代码

    本文分享了一个使用HttpWebRequest读取远程网页的案例,供大家参考学习。...2021-09-22
  • Illustrator设计细腻的网页纹理背景制作教程

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

    当你在INTERNET这个信息的海洋中尽情遨游时,会发现许许多多内容丰富、创意新颖、设计独特的个人网页,不知道你见到这样漂亮可人的网页是否有点心动。一旦你具备了...2016-09-20
  • 哪款手机快充技术最快安全省心呢?全球TOP5手机快充速度对比

    目前来说,处理器芯片厂商一般都会内置快充技术方案。比如说主流的有高通家的Quick Charge 3.0、联发科的Pump Express Plus以及华为SuperCharge。哪款手机快充技术最快安全省心呢?下面为大家带来全球TOP5手机快充速度对比,来看看吧...2017-07-06
  • python 自动刷新网页的两种方法

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

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