优化网页HTML代码 提高网页访问速度

a364542054

a364542054

2016-02-19 21:11

今天图老师小编要向大家分享个优化网页HTML代码 提高网页访问速度教程,过程简单易学,相信聪明的你一定能轻松get!

  一、不要将整个页面放到到一个table中

    一般大家都是用表格来进行布局的,将整个页面的内容都塞进了一个Table(表格)里,然后再由单元格td来划分各个“块”的布局,这种网站的显示速度是绝对慢的。因为Table要等里面所有的内容都加载完毕后才显示出来的,如果某些内容无法访问,就会拖延整个页面的访问速度。在布局时把整个页面分成三部分,头部top、中部middle、版权(尾部)bottom、中部最好再多分几部分,因为,现在大家的首页一般都是分成好几个栏目的内容,其实都可以分开放,不要全都塞到一个Table里。多用几个table,尤其是广告联盟的代码什么的,尽量放到一个单独的table ;比较慢的广告代码,用个table直接放到最底下。反正访问的人最关心的、第一个要看的不是版权信息。

  二、不要放太大的Flash动画、图片,能用GIF格式的就不用JPG的。大图最好切成几块再拼。

  三、尽量用静态HTML页面 ,少用点javascript特效,有时候搞的太多,反而搞的大家眼花,以前看到一个站,状态栏的文字替换狂快,就一直闪啊闪。。   没多少必要,别人是来看站上的文章的、mm图片的。。不是看特效,当然,适当的搞几个还是可以的,至少可以在超级菜鸟面前显示下自己的能力,让他们崇拜下。。

  四、将ASP、PHP等文件的访问改为.js引用

    如果你要在静态的HTML页面里嵌入动态的数据,而这些动态的数据是由ASP等程序来提供的话,每次有一个人访问你的网站,服务器就要执行并处理一次count.asp文件,从数据库抽取相应的数据,再输出给网页显示,如果有几万个人同时访问,就要执行几万次。建议在这些程序中将数据动态生成到一个count.js文件中去,然后在首页通过这样的代码来引用.js文件。这样,数据显示的任务就交给客户端的浏览器去做,不会耗费服务器的资源,显示速度自然就快一些。

  五、使用iframe--这个大家都知道,很多GG都是这样发的  呵呵

  使用iframe,这样就不会因为广告页面的延迟而拖了整个首页的显示。

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

  六、计数器代码放置

    直接把统计代码放到页面内容的前面,或者放在一个Table或者div标签里,那么在计数器不能访问的时候,你的页面上那个Table或者div就会产生几十秒钟的延迟,导致页面很长时间才能访问。正确的方法是:把统计代码放到页面的最下面,并且不要和页面内容同在一个Table或者div标签里。可以在页面代码的最下方直接放置统计代码,或者在最下方单独做一个Table或者div来放置计数器。

  七、友情链接

    很多人都喜欢直接引用友情网站上的图片URL,这样图片要先经过加载才能显示的,各个友情网站的访问速度不一样,整个表格都要等图片

都下载完了才能显示出来,这样大大降低了网页的速度,有时候说不定是几个红叉叉(被D?空间挂了。呵呵)。其实,Logo最好是先下载再传到自己的网页空间。

  最好是文字链接:感觉比较整洁,另外,尽量和同行网站交换连接,可以把其中的有些字连接起来,当作自己站的关键字。比如:你是一个学生站,对方站的名字叫 “**大学学生论坛”,可以写成这样: A HREF="...."**大学 /A A HREF="...."学生 /A A HREF="...."论坛 /A,这样不影响link,又突出了关键字。。

  最后再说几个seo的,昨天在网上看到的

  关键字主要有以下几个部位:

  标题标记: TITLE文本 /TITLE

  META标记:

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

META NAME="Description" CONTENT="网页简述" META NAME="Keywords" CONTENT="关键字"

  大标题标记: H1文本 /H1等

  链接标记: A HREF="http://yourcompany.com/page.htm"文本 /A

  网页正文: BODY文本 /BODY

  ALT标记: IMG SRC="1.gif" BORDER=0 ALT="关键字"

  注释标记: !--文本--

  输入标记: INPUT TYPE="HIDDEN" NAME="HIDDEN" VALUE="关键字"

  网址: http://www.关键字.com/关键字.htm

直接给代码啦

未优化的时候

TABLE cellSpacing=0 cellPadding=0 border=0
  TBODY
    TR
      TD align=middle width="100%" colSpan=3TABLE cellSpacing=0 cellPadding=0 width="100%" border=0
          TBODY
            TR height=4
              TD width=7IMG height=4 src="images/fk_top_left.gif" width=7 border=0/TD
              TD width=* background=images/fk_top_bg.gifIMG height=4 src="images/fk_top_bg.gif" border=0/TD
              TD align=right width=7IMG height=4 src="images/fk_top_right.gif" width=7 border=0/TD
            /TR
          /TBODY
      /TABLE/TD
    /TR
    TR
      TD align=middle width="100%" colSpan=3TABLE cellSpacing=0 cellPadding=0 width="100%" border=0
          TBODY
            TR
              TD width=4 height="100%"TABLE height="100%" cellSpacing=0 cellPadding=0 width="100%" border=0
                  TBODY
                    TR
                      TD background=images/fk_left_bg.gif/TD
                    /TR
                  /TBODY
              /TABLE/TD
              TD align=middle width=*A href="#" target=_blankIMG height=63 src="images/sun521.jpg" width=84 border=0/A/TD
              TD width=4 height="100%"TABLE height="100%" cellSpacing=0 cellPadding=0 width="100%" border=0
                  TBODY
                    TR
                      TD background=images/fk_right_bg.gif/TD
                    /TR
                  /TBODY
              /TABLE/TD
            /TR
          /TBODY
      /TABLE/TD
    /TR
    TR
      TD align=middle width="100%" colSpan=3TABLE cellSpacing=0 cellPadding=0 width="100%" border=0
          TBODY
            TR height=4
              TD width=7IMG height=4 src="images/fk_end_left.gif" width=7 border=0/TD
              TD width=* background=images/fk_end_bg.gifIMG height=4 src="images/fk_end_bg.gif" border=0/TD
              TD align=right width=7IMG height=4 src="images/fk_end_right.gif" width=7 border=0/TD
            /TR
          /TBODY
      /TABLE/TD
    /TR
  /TBODY
/TABLE
 
*********************

优化后的

table border="0" id="table1" cellpadding="0" style="border-collapse: collapse" width="1" height="1"
        tr
                td width="4" height="4"img border="0" src="images/fk_top_left.gif" width="4" height="4"/td
                td height="4"img border="0" src="images/fk_top_bg.gif" width="100%" height="4"/td
                td height="4" width="4"img border="0" src="images/fk_top_right.gif" width="4" height="4"/td
        /tr
        tr
                td width="7"img border="0" src="images/fk_left_bg.gif" width="4" height="100%"/td
                td align="center"IMG src="images/sun521.jpg" border=0/td
                td width="7" align="right"img border="0" src="images/fk_right_bg.gif" width="4" height="100%"/td
        /tr
        tr
                td width="4" height="4"img border="0" src="images/fk_end_left.gif" width="4" height="4"/td
                td height="4"img border="0" src="images/fk_end_bg.gif" width="100%" height="4"/td
                td width="4" height="4"img border="0" src="images/fk_end_right.gif" width="4" height="4"/td
        /tr
/table

展开更多 50%)
分享

猜你喜欢

优化网页HTML代码 提高网页访问速度

Web开发
优化网页HTML代码 提高网页访问速度

HTML优化加快网页速度

Web开发
HTML优化加快网页速度

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

利用HTML优化加快网页速度

Web开发
利用HTML优化加快网页速度

无论技术高低 利用HTML优化加快网页速度

Web开发
无论技术高低 利用HTML优化加快网页速度

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

网页头部css代码优化实例

Web开发
网页头部css代码优化实例

合理利用HTML标记优化网页布局

Web开发
合理利用HTML标记优化网页布局

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

其实我们很相爱

其实我们很相爱

Oracle数据库集中复制方法浅议

Oracle数据库集中复制方法浅议
下拉加载更多内容 ↓