蓝色的华 http://bluehua.org 分享所学,backup一切~ Sat, 06 Mar 2010 15:40:54 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 给图片定宽高减少reflow的一个想法 http://bluehua.org/2010/03/02/992.html http://bluehua.org/2010/03/02/992.html#comments Tue, 02 Mar 2010 15:17:01 +0000 小鹿 http://bluehua.org/?p=992 近期的前端优化主要集中在提高渲染速度,回家在公车上想的一个方案:
————————-
页面渲染慢最重要的一个原因就是reflow, 而造成reflow的主要有两大块: 图片和javascript的dom操作,这里主要说图片.未指明宽高的图片,在页面dom渲染完毕时没有加载媒体时宽高是0×0,当一张图片加载完毕,就不得不重新渲染图片宽高变化所影响的区域.

解决这个问题的最佳效果就是给每张图片定宽定高:

<img width="300" height="200" src="abc.gif" />

问题: 做页面的同学可以给自己切的图定宽高,但是用户上传的图片呢? 新鲜事里充斥了大量用户上传的图片~

参考解决方案:
这个方案的缺点就是需要一个良好的图片存储初期设计…
比如这是一个普通的图片上传后的地址

fmn041/20100302/2155/p_main_y8Hj_3b9e0000134b2d10.jpg

而这个方案需要在图片上传时就将宽度信息写到图片名称里,让使用它的cgi, httpd, javascript都能看名字就能知道它的三围

fmn041/20100302/2155/p_main_y8Hj_3b9e0000134b2d10_300_500.jpg

然后使用时就很灵活了

//对于新鲜事,使用自己的处理函数
<img width="<?php echo get_img_width($url) ?> height="<?php echo get_img_height($url) ?>" src="<?php echo $url?>" />

而对于日志,帖子内容里的图片则需要输出过滤,给图片加宽高,或者是在发表阶段就通过js定宽高

//smarty里的输出过滤器
$smarty->load_filter('output', 'image_url_filter');

cgi层过滤的话就不能及时flush输出,所以可以放到apache做http://httpd.apache.org/docs/2.2/filter.html

已有巨大量数据转换图片命名方案也是一件棘手的事….

]]> http://bluehua.org/2010/03/02/992.html/feed 2 一种字符串代替数组的场合 http://bluehua.org/2010/02/25/982.html http://bluehua.org/2010/02/25/982.html#comments Thu, 25 Feb 2010 09:22:57 +0000 小鹿 http://bluehua.org/?p=982 曾经耍过一些小聪明,而且是相当然的,有人问我你做过验证吗,….木有,然后也觉得自己很不靠普

下面是验证以前做一个选择器的时候用到的方法,主要是为了加速判断是否已选的操作

<html>
<script>
function ctime(func)
{
    var s = new Date().getTime();
    func();
    return new Date().getTime() - s;
}
var time;
time = ctime(function()
{
    var i = 0;
    astr = [];
    while (i < 10000)
    {
        astr.push('fasdfasdf');         
        i ++;
    }
});
document.write(time + '</br>');
 
time = ctime(function()
{
    var i = 0;
    sstr = '';
    while (i < 10000)
    {
        sstr = sstr + 'fasdfasdf';         
        i ++;
    }
});
document.write(time + '</br>');
 
function is_include(arr, v)
{
    for ( var i = 0, j = arr.length; i < j; i ++ )
    {
        if (arr[i] == v) return true;
    }
    return false;
}
time = ctime(function()
{
    var i = 0;
    while (i < 1000)
    {
        if (is_include(astr, '12321423')) break;         
        i ++;
    }
});
document.write(time + '</br>');
 
time = ctime(function()
{
    var i = 0;
    while (i < 1000)
    {
        if (sstr.indexOf('12321423') !== -1) break;         
        i ++;
    }
});
document.write(time + '</br>');
</script>
</html>

运行结果
ie6:

20
1342
5699
280

ie8:

30
30
9163
441

ff3.6:

1
2
111
97
]]> http://bluehua.org/2010/02/25/982.html/feed 1 ie下暴力debug js http://bluehua.org/2010/02/25/976.html http://bluehua.org/2010/02/25/976.html#comments Thu, 25 Feb 2010 09:03:43 +0000 小鹿 http://bluehua.org/?p=976 ie下的脚本错误总是很神秘的样子,告诉你哪个行,确不告诉你哪个文件,Visual Studio带了一个调试工具倒是可以,long long ago之前用过一次,老崩溃的样子~
如果你又遇到了猜不透的bug,可以尝试下面的shell~

//现去firefox里收集一份js列表
var alljs = [];
XN.array.each(document.getElementsByTagName('script'),function(i,v)
{
    if (v.src)
    {
        alljs.push(v.src);
    }
});
console.log(alljs.join('\n'));

把列表保存到一个文件,下面跑段shell,把所有js的报错位置的代码打印出来

// 10 100是ie里提示的错误位置
sh ~/bin/get_line.sh /tmp/jslist 10 100

附:

#!/bin/sh
LIST="$1"
ROW="$2"
COL="$3"
 
if [ ! -n "$ROW" ];then
    exit
fi
 
echo "行:${ROW}"
echo "列:${COL}"
 
get_row()
{
    cat /tmp/js_debug_tmp | sed -n "${ROW}p"
}
 
cat "$LIST" | while read line
do
    wget -q "$line" -O /tmp/js_debug_tmp 
    echo "文件:${line}"
    row="`get_row`"
 
    if [ -n "${COL}" ]; then
        row="`echo \"${row}\" | cut -c ${COL}- `"
    fi
 
    echo "$row"
done
rm /tmp/js_debug_tmp
]]> http://bluehua.org/2010/02/25/976.html/feed 0 javascript做html字符串的截断 http://bluehua.org/2010/02/01/927.html http://bluehua.org/2010/02/01/927.html#comments Mon, 01 Feb 2010 12:46:46 +0000 小鹿 http://bluehua.org/?p=927 2010.2.6 日修正
————————————
2010.2.3 日修正

<html>
<!-- html字符截断第二版 bug修正 + 2.6日修正-->
<script>
function sub_html_str(str, num)
{
    var reg = new RegExp( '<[^>]+>' , 'g' );
    var rt, rts = [], indexs = [], tstr, endstr, rstr, sstr, endtag, rtstr;
 
    //提取所有的html标签和标签在字符串中的位置 
    while ( ( rt = reg.exec(str) ) != null )
    {
        rts.push(rt[0]);
        indexs.push(rt['index']);
    }
 
    //删除字符串中所有的html标签
    tstr = str.replace(reg, '');
    //对剩余的纯字符串进行substr
 
    sstr = tstr.substr(num, tstr.length);
    tstr = tstr.substr(0, num);
 
 
 
    //判断有没有把实体腰斩，如果有腰斩的就再接上 
    endstr = (/&[^&]*$/.exec(tstr) || '');
    if ( endstr !== '' ) endstr += '' + (/^[^;]*;/.exec(sstr) || '');
    if (/^(&\w{1,10};|&#\d+;)$/.test(endstr))
    {
        rtstr = tstr.replace(/&[^&]*$/, endstr);
    }
    else
    {
        rtstr = tstr;
    }
 
    //把html标签放回到截断完毕的字符串中，当然有的html标签这时候已经无家可归了
 
    var index = 0;
 
    for (var i = 0; i < rts.length; i ++)
    {
        index = indexs[i];
        if (rtstr.length >= index)
        {
            rtstr = rtstr.substr(0, index) + rts[i] + rtstr.substr(index, rtstr.length);
        } 
        else
        {
            break;
        }
    }
    var lastindex = i ;
    //下面的代码用来闭合没有闭合的标签
    tstr = rtstr;
    rstr = '';
 
    //把闭合的标签全部删除，sstr包含了没有闭合的标签
    while ( rstr != tstr )
    {
        rstr = tstr;
        tstr = tstr.replace(/<[^\/][^>]*>[^<]*<\/[^>]+>/g, '').replace(/<[^>]+ \/>/g, '');
    }
    sstr = tstr;
    //在剩余的部分查找没有闭合的标签
    tstr = str.replace(rtstr, '');
    rstr = '';
    while ( rstr != tstr )
    {
        rstr = tstr;
        tstr = tstr.replace(/<[^\/][^>]*>[^<]*<\/[^>]+>/g, '').replace(/<[^>]+ \/>/g, '');
    }
 
    reg.lastIndex = 0;
    var endreg = new RegExp('<\/[^>]+>', 'g');
    //如果存在没有闭合的标签，从无家可归的标签里找下半身
    while ( reg.exec(sstr) != null ) 
    {
        if ( (rt = endreg.exec(tstr)) != null)
        {
             rtstr += rt[0];
        }
        else
        {
             break;
        }
    }
 
    return rtstr;
}
</script>
<script>
document.writeln('<textarea cols="100" rows="10">');
document.writeln(sub_html_str('<xx><oo>嵌套标签截断测试</oo><fk><test>lala</test></fk></xx>', 5));
document.writeln(sub_html_str('正常字符串测试', 5));
document.writeln(sub_html_str('<xx>带标签的字符串截断</xx>', 5));
document.writeln(sub_html_str('<xx><oo>嵌套标签截断测试</oo><fk>lala</fk></xx>', 5));
document.writeln(sub_html_str('<xx><oo>嵌套标签<img src="http://www.google.com/logo.gif" />截断测试</oo></xx>', 5));
document.writeln(sub_html_str('<xx><oo>实体截断&nbsp;测试测试</oo></xx>', 5));
document.writeln('</textarea>');
</script>
 
</html>

——————————————————–
最近各位弟兄都很忙的样子，俺则已经沦为做活动页面的了。。html字符的截断一般都会放到后台技术们做，但是春节的这个东西比较紧，偶就前端代劳一下。
运气不错，这么长的函数没调几次就过了。也是按照自己的思路来。。。
这个函数仅能做到

  • 截取除了html标签之外的前n个字符，一般的需求都是这样的。。
  • 不会截断html实体
  • 查找并闭合被截断的html标签,但是如果给的html就存在没有闭合的就不管了
<html>
<!-- html字符截断第一版 -->
<script>
function sub_html_str(str, num)
{
    var reg = new RegExp( '<[^>]+>' , 'g' );
    var rt, rts = [], indexs = [], tstr, endstr, rstr, endtag;
 
    //提取所有的html标签和标签在字符串中的位置 
    while ( ( rt = reg.exec(str) ) != null )
    {
        rts.push(rt[0]);
        indexs.push(rt['index']);
    }
 
    //删除字符串中所有的html标签
    str = str.replace(reg, '');
    //对剩余的纯字符串进行substr
    tstr = str.substr(0, num);
 
    //判断有没有把实体腰斩，如果有腰斩的就再接上 
    endstr = (/&[^&]*$/.exec(tstr) || '');
    if ( endstr !== '' ) endstr += '' + (/^[^;]*;/.exec(str.substr(num, str.length)) || '');
    if (/^(&\w{1,10};|&#\d+;)$/.test(endstr))
    {
        str = tstr.replace(/&[^&]*$/, endstr);
    }
    else
    {
        str = tstr;
    }
 
    //把html标签放回到截断完毕的字符串中，当然有的html标签这时候已经无家可归了
 
    var index = 0;
 
    for (var i = 0; i < rts.length; i ++)
    {
        index = indexs[i];
        if (str.length >= index)
        {
            str = str.substr(0, index) + rts[i] + str.substr(index, str.length);
        } 
        else
        {
            break;
        }
    }
    var lastindex = i ;
    //下面的代码用来闭合没有闭合的标签
    tstr = str;
    rstr = '';
 
    //把闭合的标签全部删除，tstr包含了没有闭合的标签
    while ( rstr != tstr )
    {
        rstr = tstr;
        tstr = tstr.replace(/<[^>]+>[^<]*<\/[^>]+>/g, '').replace(/<[^>]+ \/>/g, '');
    }
 
    reg.lastIndex = 0;
    //如果存在没有闭合的标签，从无家可归的标签里找下半身
    while ( reg.exec(rstr) != null ) 
    {
        while ( lastindex < rts.length )
        {
            endtag = rts[lastindex];
            //如果它是一个用来闭合的标签,就把它追加到字符串
            if ( /^<[ ]*\//.test(endtag) ) 
            {
                str = str + endtag;
                lastindex ++;
                break;
            }
            //如果它是自闭合的标签
            else if ( /<[^>]+ \/>/.test(endtag) )
            {
                lastindex ++;
            }
            //如果它是一个起始标签
            else
            {
                lastindex += 2;
            }
 
        }
    }
 
    return str;
}
</script>
<script>
document.writeln('<textarea cols="100" rows="10">');
document.writeln(sub_html_str('正常字符串测试', 5));
document.writeln(sub_html_str('<xx>带标签的字符串截断</xx>', 5));
document.writeln(sub_html_str('<xx><oo>嵌套标签截断测试</oo><fk>lala</fk></xx>', 5));
document.writeln(sub_html_str('<xx><oo>嵌套标签<img src="http://www.google.com/logo.gif" />截断测试</oo></xx>', 5));
document.writeln(sub_html_str('<xx><oo>实体截断&nbsp;测试测试</oo></xx>', 5));
document.writeln('</textarea>');
</script>
 
</html>
]]> http://bluehua.org/2010/02/01/927.html/feed 1 还原用户环境失败… http://bluehua.org/2010/01/29/914.html http://bluehua.org/2010/01/29/914.html#comments Fri, 29 Jan 2010 12:38:53 +0000 小鹿 http://bluehua.org/?p=914 话说昨天采集了用户的系统和软件信息,今天用虚拟机还原了一个,但是失败了,bug没有重现~

过程还是挺费功夫的:
首先用户用的番茄花园xp sp2, 虚拟机里用迅雷秒杀了,超赞公司网速~
Virtualbox里系统装好,下面就是比较头疼的,按照补丁列表打补丁…

hualu@lu-hua:patch$ cat /tmp/allsofts.txt | grep -E "\(KB[0-9]{6}" | sed -e 's/.*(\(KB[^)]*\).*/\1/' | wc -l
138

软件列表里一共有138个补丁, 对着列表在360卫士里挨个找着选的话估计我这老眼就废了…

还是自己写脚本去微软下载

#!/bin/sh
 
ID="$1"
if [ ! -n "$ID" ];then
    exit
fi
echo '-----------------------------------'
BASEURL='http://www.microsoft.com'
 
get_first_link()
{
   cat "$1" | grep "Windows XP" | grep "<a" | sed -e 's/.*href="\([^"]*\)".*/\1/' \
       -e 's/.*;u=//' \
       -e 's/%2f/\//g' \
       -e 's/%3f/\?/g' \
       -e 's/%3d/\=/g'
}
 
get_second_link()
{
    cat "$1" | grep 'id="quickCheck"' | sed -e "s/.*window\.open('\([^']*\)',.*/\1/"
}
 
url="${BASEURL}/downloads/results.aspx?pocId=7&freetext=${ID}&DisplayLang=zh-cn"
echo "${url}"
 
wget "${url}" -q -O /tmp/get_ms_link
 
surl="`get_first_link /tmp/get_ms_link`"
 
if [ ! -n "${surl}" ];then
    echo "${ID}补丁不存在"
    echo "${ID}" >> ./patch_not_found.txt
    exit
fi
 
surl="${BASEURL}${surl}"
echo "${surl}"
 
wget "${surl}" -q -O /tmp/get_ms_link
turl="`get_second_link /tmp/get_ms_link`"
echo "${turl}"
if [ ! -n "${turl}" ];then
    echo "${ID}补丁不存在"
    echo "${ID}" >> ./patch_not_found.txt
    exit
fi
 
wget "${turl}"
 
echo '-----------------------------------'

不知道微软有没有专门的补丁下载入口,不过我还是模仿我知道的方法下载了,先搜索,然后结果里找,使用:sh get_ms_patch.sh KB975467

然后几个老套的命令

#取出所有补丁编号
cat allsofts.txt | grep -E "\(KB[0-9]{6}" | sed -e 's/.*(\(KB[^)]*\).*/\1/' > /tmp/allpatch.txt
#下载所有补丁
cat /tmp/allpatch.txt | xargs -i sh /home/hualu/bin/get_ms_update.sh "{}"
#生成批量安装补丁的批处理文件
find ./ -name "*.exe" | sort | xargs -i basename {} | xargs -i echo ".\{} /passive /norestart" >> install.bat

回到虚拟xp里,挂在网络驱动,双击install.bat,开始安装… 等我吃完午饭,补丁都装完了,灰常激动,立刻重启,打开ie,登录淫淫,进入个人主页, fuck, 没有脚本错误!!!!

估计今天我嘴上的泡就是因为这个起的,真上火… , 后面,我接着按照软件列表装了瑞星,offcie 2007,均没有看到我期待的脚本错误

看来我得研究星座了…

]]> http://bluehua.org/2010/01/29/914.html/feed 4 收集windows xp的系统信息 http://bluehua.org/2010/01/28/904.html http://bluehua.org/2010/01/28/904.html#comments Thu, 28 Jan 2010 14:19:54 +0000 小鹿 http://bluehua.org/?p=904 最近又遇到了一个不是所有的IE6浏览器都会有的bug,于是今天去一个用户家里上门debug,这已经是第二次了,学乖了一点,提前查了以下收集系统信息的方法

1 . 主要信息

一个cmd命令就可以了

systeminfo > system.txt

2 . 安装的所有软件和补丁列表

搜到一个老外写的vbscript脚本 : InstalledPrograms

恩,有了这两个列表,就可以用来重现一个用户类似的环境~

]]> http://bluehua.org/2010/01/28/904.html/feed 1 ubuntu下mpd+mpc的安装配置 http://bluehua.org/2010/01/27/896.html http://bluehua.org/2010/01/27/896.html#comments Wed, 27 Jan 2010 14:18:24 +0000 小鹿 http://bluehua.org/?p=896 今天大学的一个哥们说在ubuntu下面mpd一直配不好,俺就把俺的配置过程简单写一下
首先

sudo apt-get install mpd mpc

然后复制一份配置文件到自己的用户目录

cd ~
cp /etc/mpd.conf .mpdconf
#创建几个文件夹,后面用到
mkdir .mpd
mkdir .mpd/playlists

之后编辑.mpdconf,修改如下

#mp3所在的文件夹
music_directory		"/media/data/music"
#下面几个的user要替换成自己的用户名
playlist_directory		"/home/user/.mpd/playlists"
db_file			"/home/user/.mpd/tag_cache"
log_file			"/home/hualu/.mpd/mpd.log"
pid_file			"/home/hualu/.mpd/pid"
state_file			"/home/hualu/.mpd/state"
#替换成自己的用户名
user				"user"

除了上面几项,我还修改了下面几个配置,如果改完已上配置就可以运行就没有必要修改下面的了
我注释了下面这行,为了解决mpc报”unable to bind port 6600″错误的问题

#bind_to_address		"localhost"

声卡的配置我改成了下面,否则我用mpc调不了音量,而且有flash的时候会报”Failed to open ALSA device “plug:dmix”: Device or resource busy”

audio_output {
	type		"alsa"
	name		"My ALSA Device"
        options "dev=dmixer"
	mixer_control	"Master"		# optional
	mixer_index	"0"		# optional
}

配置完毕,可以使用了

#首次运行需要初始化一下
mpd --create-db
#把所有曲目添加到播放列表
mpc listall | mpc add
#播放
mpc play
]]> http://bluehua.org/2010/01/27/896.html/feed 0 准备做一个wordpress的离线编辑器 http://bluehua.org/2010/01/24/886.html http://bluehua.org/2010/01/24/886.html#comments Sun, 24 Jan 2010 07:47:26 +0000 小鹿 http://bluehua.org/?p=886 2010.3.6 更新
由于最近的学习充电计划,这个东西暂时搁置了,现在已经可以自动保存了~
———————————
linux平台上一直没有这样一个所见即所得的blog离线编辑器,昨天试着用pyqt4写了一个小脚本,发现原来python做客户端软件是如此容易.然后下定决心要利用n个周末的时间自己写一个.

开始打算用纯qt的ui控件实现,但是感觉没有wordpress的编辑器这么亲切,于是想到一个界面亲切,实现也方便的方案: ui部分直接用web,框在一个pyqt的webkit组件里,逻辑部分用python的cgihttpserver在本地开一个cgi.

这个东西搞到今天雏形已经有了,可以实现跟wordress完全相同的书写体验.

顺带发那个pyqt的练手之作 :　emlreader.py 一个可以查看eml附件的脚本

]]> http://bluehua.org/2010/01/24/886.html/feed 4 偶的mpd全局快捷键配置 http://bluehua.org/2010/01/18/859.html http://bluehua.org/2010/01/18/859.html#comments Mon, 18 Jan 2010 13:08:12 +0000 小鹿 http://bluehua.org/?p=859 2010.1.27 更新
发现直接调用mpc next 切歌有时候会把mpd搞死, mpc pause;mpc next;mpc play;这么搞就没问题了…
mpc.sh.4
——————————————–
更新一个高级点的,使用zenity提示搜索

下载:mpc.sh.3
——————————-
2010.1.19 更新
ubuntu.org.cn上开的帖子 http://forum.ubuntu.org.cn/viewtopic.php?f=21&t=253241
更新下脚本:mpc.sh.2
——————————
换了好多播放器，最终还是回归mpd了… 配上快捷键和模糊搜索，好用多了。效果如下:

上一首,下一首可以使用notify-send提示

快捷键调出搜索框,跳转到某一首歌

配置过程如下，假设已经装好了mpd和mpc：
1 . 安装notify-send

sudo apt-get install libnotify-bin

2 . 下载一个shell脚本 : mpc.sh,将脚本解压到 ~/bin/ 目录
3 . 配置全局快捷键
可用命令如下

#停止
sh /home/yourname/bin/mpc.sh stop
#播放/暂停
sh /home/yourname/bin/mpc.sh toggle
#下一首
sh /home/yourname/bin/mpc.sh next
#上一首
sh /home/yourname/bin/mpc.sh prev
#弹出一个搜索窗口
sh /home/yourname/bin/mpc.sh popfav

偶的快捷键的配置

]]> http://bluehua.org/2010/01/18/859.html/feed 0 google工具栏牛x的分享按钮 http://bluehua.org/2010/01/16/842.html http://bluehua.org/2010/01/16/842.html#comments Sat, 16 Jan 2010 13:21:23 +0000 小鹿 http://bluehua.org/?p=842 偶火星了，更新了google的工具栏到7.0.20091216Lb1,发现多了一个牛x的分享功能。许多网站（包括renren）都提供了一个可以分享站外内容的书签，但是已经安装了google的工具栏，再开一个书签栏就太占地方了。这个按钮终于解决了这个问题，而且可以分享到n个站点。

google toolbar的牛逼分享按钮

google toolbar的分享按钮
列表里的人人网是我后来添进去的，默认列表里是没有的，一水的e文网站。工具栏还没有提供一个直接添加的方法，但是可以直接修改列表文件。列表文件位于：

~/.mozilla/firefox/这个目录名因人而异/GoogleToolbarData/components/share_providers.json

—————————-
补充：或直接找

cd ~/.mozilla
find ./ -name "share_providers.json"
#你会找到两个，覆盖我给的那个路径就可以

—————————-
可以直接下载偶修改好的文件：share_providers.json

曾经的分享按钮一直被冷落在菜单里：

]]> http://bluehua.org/2010/01/16/842.html/feed 5