蓝色魔法

蓝色的魔法,永恒的世界.

如何获得更快的页面载入速度,写在PageRank加入载入速度之后.

十一月16

就在不久前Google大神决定把页面载入速度加入PageRank指数的一个指标. 本人比较赞同, 有多少人愿意等10-20秒去载入一个不知道是否有自己所需要的内容的页面? 我不会, 如果一个页面10秒内还没出现我要的信息, 我一定会直接关闭找下一个搜索结果去.

但是同时作为网页编写者我也深知页面载入速度70%在于,网络速度, 客户和服务器的距离, 编程者能做的确是不多, 而换一个更快的服务器开销也不是人人都可以受得起.

虽然情况如实但是作为编写者我们还是可以为载入速度做一点努力的. 这里就介绍一个提速的小方法. 对网页源码的精简是必须的, 更好的逻辑, 更少的数据库查询等等都可以帮助网页载入速度的提高做出贡献. 但是毕竟这样的提速方法是有限的. 网页速度最大的问题是什么? 不是代码, 不是计算, 而是图片, flash,媒体等. 随便打开一个大网站什么东西最先看到, 什么最后? 很多人的感觉都是最先出现的一定是文字, 而最后慢慢载入的一定是图片和Flash. 就技术上来说PHP,ASP等后台语言是通过服务器计算, 通常服务器都有强大的CPU所以大量计算不是问题. 而JS是客户端语言在电脑上计算也不会很慢. (当然对于计算Integral之类微积分问题除外.)  慢的永远是图片的载入, 一场图片100K左右, flash在500K左右, 如果用200k每秒速度去载入10张图片5张flash也需要7秒. 而如果你做的不是图片或者是Flash网站,那么很多时候这些图片都是装饰,或者辅助类的, 是否完全载入对于客户来说影响并不大.

说了那么多其实就是一条, 图片和Flash其实不需要和网页一起载入. 对于有些浏览器, 例如opera,chrome等, 开发者已经意识到这点, 如果你观察的仔细你会发现opera刚载入的一张页面的时候, 页面内的图片是模糊的, 然后才慢慢的清晰. 其实开发者这么做就是为了提速, 先载入重要文字, 计算等信息于此同时载入低清晰的图片,把网页的轮廓做出来, 最后再载入完整的图片. 这样做就会让客户先查看他们需要东西同时不破外网页的格局而又不需要等待网页完全载入完那么久.

那么有了这个思路作为网页开发者的我们也可以用相同的方法提速, 而且可以做到一些浏览器无法做到的,同时还可以提速PageRank. 方法是用JS的readystatus来异步载入, 此方法有点类似AJAX. 大概逻辑如下. 首先我们载入所有最重要的内容, 例如文章标题,内容等, 然后等所有重要的东西都载入完了再载入图片. 这样做的好处是不单单用户体验得到了提升, PageRank也可以得到提升. 应为当你载入完所有重要内容后PageRank的系统记录你已经载入完成, 那么计时也停止了, 虽然你的图片还没载入. 但是这些图片并不影响整体页面. 这样的话虽然是同一个页面, 但是载入时间在PageRank那却不一样, 用户体验也大大提升.

那么如何实现呢? 其实很简单, 代码如下

window.onload=function ()
{
//载入图片. 用getElementsById()等方法.
}

这里你可以写一些代码自己看看效果. 例如可以用两张不同图片image1和image2(差不多大小.), 代码中你把image1写在image2前面,在image后门写了一些文字代码, 接着改变image2的载入方法, 然后观察哪些先出现在浏览器上. 如果不用以上方法, 你应该看到的顺序是, 文字->图片1-(同时或者之后)>图片2. 也许图片2先载入完, 但是图片2不会比图片1先开始载入. 而用了上面的方法你应该先看到, 文字和图片2, 等图片2完全载入完后才看到图片1. 这样我们的目的就达到了. 在实际应用中图片2也许是比较重要的图片信息, 而图片2可能是比较不重要的辅助图片或者装饰,背景等.  同时如果你够细心你会发现浏览器的状态栏在图片2载入完的同时显示页面已经载入完了, 但是图片1还在载入中.

代码很简单但是如果用得好效果非凡. 某些图片可以之后载入某些则需要同时载入, 而作为网页编程者我们可以灵活的转变, 这点事浏览器做不到的. 所以合理的安排你网页上的图片和媒体, 给用户最佳的体验这才是一个好的网页编程者所需要做的.

最后: 请不要滥用这个方法, 例如把所有东西都搬进onload,用来欺骗PR提高网速等. 这里的方法对搜索引擎收录的影响尚不知, 但是如果仅仅运用在图片上相信影响几乎没有. 所以请大家善用此方法.

posted under HTML, PHP, 网页技术 | 评论关闭

如何解决Discuz!在Google Chrome中分类选择位置错误的方法.

九月20

2个方法修改, 第一找到你的风格目录下的 “templates/风格名字/css_append.htm” 在里面查找.float_typeid ul替换成下面的代码,如果找不到直接在插入以下代码就可以了. (此方法只修改你指定的风格,其他风格如果需要也要做同样修改.)

.float_typeid ul{ margin: -22px 0 0; border: 1px solid {HIGHLIGHTLINK}; background:{INPUTBG} url({IMGDIR}/newarow.gif) no-repeat 100% -20px;left:320px; }

方法2: 在 “templates/default/css_common.htm” 里找到.float_typeid ul然后添加红字部分. (此方法修改所有风格,包括默认. 如果对某个风格无效请用方法1对此风格进行单独修改.)

.float_typeid ul{ margin: -22px 0 0; border: 1px solid {HIGHLIGHTLINK}; background:{INPUTBG} url({IMGDIR}/newarow.gif) no-repeat 100% -20px;left:320px; }

不要忘了去后台界面-风格管理里更新CSS缓存哦.

编者注: 其实Chrome对Discuz的支持还是不够, 虽然之前Google宣称解决了很多对Discuz兼容性的问题. 也不知道是Discuz写的不够标准还是Chrome的引擎为了速度放弃了兼容. 就编者所知道的Discuz7在Chrome里的Bug有管理帖子时AJAX置顶,分类等都无法正常显示只显示选中x贴然后内容就消失了,还有几个其他bug但是一时想不起来了. 希望Discuz能联合Chrome一起做出努力, 不过再那之前我们还是回到IE和Firefox的怀抱吧.

posted under CSS, HTML, PHP, 网页技术 | No Comments »

用CSS控制各个组件在页面上的层次.

二月23

现在大家网页越来越丰富, ajax调用,iframe,div提示,div确认等等. 那么多东西在一个页面上难免有”争宠”的时候, 经常有弹出的div确认框被一个下拉菜单挡住的事情发生.  为了让他们分清层次CSS中有个z-index的属性. 用法很简单,给必要的div层加入z-index的css属性例如z-index:10,而z-index后的数字越大说明他的层次越高,那么重要的信息就不会被挡住拉.

posted under CSS, HTML | No Comments »

发2个手册,一个php一个javascript

二月15

这2个手册是个人用下来不错的.

php手册里面包括了很多网友留言,但是可惜这本手册不是完全翻译,有些函数没有翻译过来,不过是完全本地化的手册.

JS手册是完全中文版的,不错的,挺简洁.

javascript

PHP手册

posted under HTML, PHP | No Comments »

自己做的一个漂亮的搜索框.

二月13

现在网页美观可以说是每个站长都要注重的东西, 普通文本+按钮式的搜索框已经无法满足网页整体的美观. 所以制作一些更漂亮的搜索框则显得尤为重要. 本人也做了一个搜索框给大家分享,走的是比较简洁的路线希望大家喜欢.

这里是最终样式:  search_bar

这个搜索框主要用了div+css没什么难度

也稍微提示一下制作此类关键点:

  • 要把文本框变透明, 要在css里设置4条边框为无,不然默认情况下文本框边框为实线,然后把背景设为transparent (透明,如果有必要的话.)
  • 提交按钮比较关键,为了不破坏整个搜索框的美观, 用原来的按钮式提交是不行D, 这里方法就是把Search做成图片形式的提交方法如下:  <input type=”image” src=”图片地址”>. 我也百度过发现网上很多人用的是JS+图片的方法来提交(图片img标签里加入onclick属性), 这样比较复杂但是如果图片要和表单离开很远这个方法就比较好,不用把真个网页都放到一个表单里, 这里就不提供怎么做了, “百度一下tm”吧.

图片素材:  1.search_bar 2.search_bar_send

完整的HTML代码:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

<title>ljzlxj</title>

<style>

.search_bar {

background-color: transparent;

border-top-style: none;

border-right-style: none;

border-bottom-style: none;

border-left-style: none;

height: 25px;

width: 180px;

background-image: url(images/search_bar.jpg);

background-repeat: no-repeat;

background-position: left center;

position: relative;

}

.search_textfield {

border-top-style: none;

border-right-style: none;

border-bottom-style: none;

border-left-style: none;

background-color: transparent;

width: 110px;

}

.search_bar_Send {

background-color: transparent;

border-top-style: none;

border-right-style: none;

border-bottom-style: none;

border-left-style: none;

}

</style>

<body>

<form action=”#” method=”get”>

<div class=”search_bar”>

<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″>

<tr>

<td align=”right”>

<input class=”search_textfield” name=”search_textfield” type=”text” id=”textfield” value=”Search” maxlength=”50″ />

</td>

<td width=”47″ align=”left” valign=”middle” ><input type=”image” src=”images/search_bar_send.jpg” style=”height:25;width:45;” name=”search_send”/></td>

</tr>

</table>

</div>

</form>

</body>

</html>

还有一些需要完善的地方,比如鼠标经过自动选择等等.

欢迎转帖不过请保留原帖链接谢谢.

posted under HTML | No Comments »