<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>haohtml&#039;s blog &#187; js框架</title>
	<atom:link href="http://blog.haohtml.com/index.php/archives/category/js-framework/feed" rel="self" type="application/rss+xml" />
	<link>http://blog.haohtml.com</link>
	<description>haohtml&#039;s life and works blog</description>
	<lastBuildDate>Sat, 31 Jul 2010 10:45:51 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>Centos系统mysql相关命令</title>
		<link>http://blog.haohtml.com/index.php/archives/4701</link>
		<comments>http://blog.haohtml.com/index.php/archives/4701#comments</comments>
		<pubDate>Fri, 16 Jul 2010 07:01:13 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[js框架]]></category>
		<category><![CDATA[centos]]></category>
		<category><![CDATA[mysql]]></category>

		<guid isPermaLink="false">http://blog.haohtml.com/?p=4701</guid>
		<description><![CDATA[Centos系统mysql 忘记root用户的密码： 第一步：(停掉正在运行的mysql) [root@CentOs5 ~]# service mysqld stop Stopping MySQL: [ OK ] 第二步：使用 “&#8211;skip-grant-tables”参数重新启动mysql [root@CentOs5 ~]# mysqld_safe &#8211;skip-grant-tables &#38; [1] 23810 [root@CentOs5 ~]# Starting mysqld daemon with databases from /var/lib/mysql 第三步：用帐号登录mysql [root@CentOs5 ~]# mysql -u root Welcome to the MySQL monitor. Commands end with ; or \g. Your MySQL connection id is 1 Server [...]]]></description>
			<content:encoded><![CDATA[<div id="_mcePaste"><strong>Centos系统mysql 忘记root用户的密码：</strong></div>
<div id="_mcePaste">第一步：(停掉正在运行的mysql)</div>
<div id="_mcePaste">[root@CentOs5 ~]# service mysqld stop</div>
<div id="_mcePaste">Stopping MySQL: [ OK ]</div>
<div id="_mcePaste">第二步：使用 “&#8211;skip-grant-tables”参数重新启动mysql</div>
<div id="_mcePaste">[root@CentOs5 ~]# mysqld_safe &#8211;skip-grant-tables &amp;</div>
<div id="_mcePaste">[1] 23810</div>
<div id="_mcePaste">[root@CentOs5 ~]# Starting mysqld daemon with databases from /var/lib/mysql<br />
<span id="more-4701"></span></div>
<div id="_mcePaste">第三步：用帐号登录mysql</div>
<div id="_mcePaste">[root@CentOs5 ~]# mysql -u root</div>
<div id="_mcePaste">Welcome to the MySQL monitor. Commands end with ; or \g.</div>
<div id="_mcePaste">Your MySQL connection id is 1</div>
<div id="_mcePaste">Server version: 5.0.77 Source distribution</div>
<div id="_mcePaste">Type &#8216;help;&#8217; or &#8216;\h&#8217; for help. Type &#8216;\c&#8217; to clear the buffer.</div>
<div id="_mcePaste">第四步：改变用户数据库</div>
<div id="_mcePaste">mysql&gt; use mysql</div>
<div id="_mcePaste">Reading table information for completion of table and column names</div>
<div id="_mcePaste">You can turn off this feature to get a quicker startup with -A</div>
<div id="_mcePaste">Database changed</div>
<div id="_mcePaste">第五步：修改密码，记得密码要用password()函数进行加密，一定不要忘记！！！</div>
<div id="_mcePaste">mysql&gt; update user set password=password(&#8216;admin123&#8242;) where user=&#8217;root&#8217;;</div>
<div id="_mcePaste">Query OK, 1 row affected (0.04 sec)</div>
<div id="_mcePaste">Rows matched: 1 Changed: 1 Warnings: 0</div>
<div id="_mcePaste">第六步：刷新权限表</div>
<div id="_mcePaste">mysql&gt; flush previleges;</div>
<div id="_mcePaste">ERROR 1064 (42000): You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near &#8216;previleges&#8217; at line 1</div>
<div id="_mcePaste">mysql&gt; flush privileges;</div>
<div id="_mcePaste">Query OK, 0 rows affected (0.00 sec)</div>
<div id="_mcePaste">第七步：退出mysql</div>
<div id="_mcePaste">mysql&gt; quit</div>
<div id="_mcePaste">Bye</div>
<div id="_mcePaste">
第八步：对mysql进行重启</div>
<div id="_mcePaste">[root@CentOs5 ~]# service mysqld restart;</div>
<div id="_mcePaste">STOPPING server from pid file /var/run/mysqld/mysqld.pid</div>
<div id="_mcePaste">100421 13:44:03 mysqld ended</div>
<div id="_mcePaste">Stopping MySQL: [ OK ]</div>
<div id="_mcePaste">Starting MySQL: [ OK ]</div>
<div id="_mcePaste">[1]+ Done mysqld_safe &#8211;skip-grant-tables</div>
<div id="_mcePaste">
第九步：用更改过的密码重新登录即可。</div>
<div id="_mcePaste">[root@CentOs5 ~]# mysql -u root -p</div>
<div id="_mcePaste">Enter password: admin123</div>
<div id="_mcePaste">Welcome to the MySQL monitor. Commands end with ; or \g.</div>
<div id="_mcePaste">Your MySQL connection id is 2</div>
<div id="_mcePaste">Server version: 5.0.77 Source distribution</div>
<div id="_mcePaste">Type &#8216;help;&#8217; or &#8216;\h&#8217; for help. Type &#8216;\c&#8217; to clear the buffer.</div>
<div id="_mcePaste">mysql&gt; quit</div>
<div id="_mcePaste">Bye</div>
<div id="_mcePaste">[root@CentOs5 ~]#</div>
]]></content:encoded>
			<wfw:commentRss>http://blog.haohtml.com/index.php/archives/4701/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Apache ab 介绍及实例说明</title>
		<link>http://blog.haohtml.com/index.php/archives/4631</link>
		<comments>http://blog.haohtml.com/index.php/archives/4631#comments</comments>
		<pubDate>Wed, 14 Jul 2010 01:39:17 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[js框架]]></category>

		<guid isPermaLink="false">http://blog.haohtml.com/?p=4631</guid>
		<description><![CDATA[开源工具通常都是为了某个特定的目的而开发出来的，所以如果想找到一个开源的性能测试工具去与LoadRunner 或者 QALoad 之类去比较，实在有些勉强。但是开源工具也有它自己的优势：小巧、轻便，在自己擅长的领域可以提供优秀的解决方案。所以，我们可以考虑准备一个自己的“开源测试工具箱”，平时利用空闲时间了解各种工具所适用的环境和目的，知识慢慢积累下来以后，就可以在遇到问题时顺手拈来，轻松化解 . 简介 ab的全称是ApacheBench，是 Apache 附带的一个小工具，专门用于 HTTP Server 的benchmark testing，可以同时模拟多个并发请求。前段时间看到公司的开发人员也在用它作一些测试，看起来也不错，很简单，也很容易使用，所以今天花一点时间看了一下。 通过下面的一个简单的例子和注释，相信大家可以更容易理解这个工具的使用。 一个简单的例子 /*在这个例子的一开始，我执行了这样一个命令 ab -n 10 -c 10 http://www.google.com/。这个命令的意思是启动 ab ，向www.google.com 发送10个请求(-n 10) ，并每次发送10个请求(-c 10)——也就是说一次都发过去了。跟着下面的是 ab 输出的测试报告，红色部分是我添加的注释。*/ C:\Program Files\Apache Software Foundation\Apache2.2\bin&#62;ab -n 10 -c 10 http ://www.google.com/ This is ApacheBench, Version 2.0.40-dev &#60;$Revision: 1.146 $&#62; apache-2.0 Copyright 1996 Adam Twiss, Zeus Technology Ltd, http://www.zeustech.net/ Copyright 1997-2005 The Apache Software Foundation, http://www.apache.org/ Benchmarking www.google.com (be patient)&#8230;..done Server [...]]]></description>
			<content:encoded><![CDATA[<p>开源工具通常都是为了某个特定的目的而开发出来的，所以如果想找到一个开源的性能测试工具去与LoadRunner 或者 QALoad 之类去比较，实在有些勉强。但是开源工具也有它自己的优势：小巧、轻便，在自己擅长的领域可以提供优秀的解决方案。所以，我们可以考虑准备一个自己的“开源测试工具箱”，平时利用空闲时间了解各种工具所适用的环境和目的，知识慢慢积累下来以后，就可以在遇到问题时顺手拈来，轻松化解 .</p>
<p><strong>简介</strong></p>
<p><strong> </strong></p>
<p>ab的全称是ApacheBench，是 Apache 附带的一个小工具，专门用于 HTTP Server 的benchmark testing，可以同时模拟多个并发请求。前段时间看到公司的开发人员也在用它作一些测试，看起来也不错，很简单，也很容易使用，所以今天花一点时间看了一下。</p>
<p>通过下面的一个简单的例子和注释，相信大家可以更容易理解这个工具的使用。<span id="more-4631"></span></p>
<p><strong>一个简单的例子</strong><strong> </strong></p>
<blockquote><p>/*在这个例子的一开始，我执行了这样一个命令 <strong>ab -n 10 -c 10 <a href="http://www.google.com/">http://www.google.com/</a></strong><strong>。</strong>这个命令的意思是启动 ab ，向<a href="http://www.google.com/">www.google.com</a> 发送10个请求(-n 10) ，并每次发送10个请求(-c 10)——也就是说一次都发过去了。跟着下面的是 ab 输出的测试报告，红色部分是我添加的注释。*/</p></blockquote>
<p>C:\Program Files\Apache Software Foundation\Apache2.2\bin&gt;<strong>ab -n 10 -c 10 http</strong></p>
<p><strong>://www.google.com/</strong></p>
<p>This is ApacheBench, Version 2.0.40-dev &lt;$Revision: 1.146 $&gt; apache-2.0</p>
<p>Copyright 1996 Adam Twiss, Zeus Technology Ltd, http://www.zeustech.net/</p>
<p>Copyright 1997-2005 The Apache Software Foundation, http://www.apache.org/</p>
<p>Benchmarking www.google.com (be patient)&#8230;..done</p>
<p>Server Software:        GWS/2.1</p>
<p>Server Hostname:        www.google.com</p>
<p>Server Port:            80</p>
<p>Document Path:          /</p>
<p>Document Length:        230 bytes</p>
<p>Concurrency Level:      10</p>
<p><span style="color: #0000ff;">/*整个测试持续的时间*/</span></p>
<p>Time taken for tests:   3.234651 seconds</p>
<p><span style="color: #0000ff;">/*完成的请求数量*/</span></p>
<p>Complete requests:      10</p>
<p><span style="color: #0000ff;">/*失败的请求数量*/</span></p>
<p>Failed requests:        0</p>
<p>Write errors:           0</p>
<p>Non-2xx responses:      10</p>
<p>Keep-Alive requests:    10</p>
<p><span style="color: #0000ff;">/*整个场景中的网络传输量*/</span></p>
<p>Total transferred:      6020 bytes</p>
<p><span style="color: #0000ff;">/*整个场景中的HTML内容传输量*/</span></p>
<p>HTML transferred:       2300 bytes</p>
<p>/*<strong>每秒请求数(平均)</strong>, 大家最关心的指标之一，相当于 <span style="color: #0000ff;">LR</span> 中的 <strong><span style="color: #0000ff;">每秒事务数</span></strong> ，后面括号中的 mean 表示这是一个平均值*<a href="http://jackei.cnblogs.com/archive/2006/07/18/454144.html">/</a></p>
<p>Requests per second:    3.09 [#/sec] (mean)</p>
<p>/*<strong>每次并发请求时间(所有并发)</strong>, 大家最关心的指标之二，相当于 <span style="color: #0000ff;">LR</span> 中的 <strong><span style="color: #0000ff;">平均事务响应时间</span></strong> ，后面括号中的 mean 表示这是一个平均值*/</p>
<p>Time per request:       3234.651 [ms] (mean)</p>
<p><span style="color: #0000ff;">/*每一请求时间(并发平均)   //每个请求实际运行时间的平均值*/</span></p>
<p>Time per request:       323.465 [ms] (mean, across all concurrent requests)</p>
<p><span style="color: #0000ff;">/*平均每秒网络上的流量，可以帮助排除是否存在网络流量过大导致响应时间延长的问题*/</span></p>
<p>Transfer rate:          1.55 [Kbytes/sec] received</p>
<p><span style="color: #0000ff;">/*传输速率//平均每秒网络上的流量，可以帮助排除是否存在网络流量过大导致响应时间延长的问题*/</span></p>
<p>Connection Times (ms)</p>
<p>min  mean[+/-sd] median   max</p>
<p>Connect:       20  318 926.1     30    2954</p>
<p>Processing:    40 2160 1462.0   3034    3154</p>
<p>Waiting:       40 2160 1462.0   3034    3154</p>
<p>Total:         60 2479 1276.4   3064    3184</p>
<p><span style="color: #0000ff;">/*下面的内容为整个场景中所有请求的响应情况。在场景中每个请求都有一个响应时间，其中 50％ 的用户响应时间小于 3064 毫秒，60 ％ 的用户响应时间小于 3094 毫秒，最大的响应时间小于 3184 毫秒*/</span></p>
<p>Percentage of the requests served within a certain time (ms)</p>
<p>50%   3064</p>
<p>66%   3094</p>
<p>75%   3124</p>
<p>80%   3154</p>
<p>90%   3184</p>
<p>95%   3184</p>
<p>98%   3184</p>
<p>99%   3184</p>
<p>100%   3184 (longest request)</p>
<p><strong>更多信息</strong><strong></strong></p>
<p>ab 不像 LR 那么强大，但是它足够轻便，如果只是在开发过程中想检查一下某个模块的响应情况，或者做一些场景比较简单的测试，ab 还是一个不错的选择——至少不用花费很多时间去学习 LR 那些复杂的功能，就更别说那 License 的价格了。</p>
<p>下面是 ab 的详细参数解释，大家有兴趣的可以研究一下，最近没有足够多的时间研究，如果哪位朋友有兴趣希望可以帮忙翻译一下每个参数的含义，有问题讨论也欢迎在这里回帖 ^_^</p>
<p><strong>ab</strong><code> [ -</code><strong>A</strong><code> </code><var>auth-username</var><code>:</code><var>password</var><code> ] [ -</code><strong>c</strong><code> </code><var>concurrency</var><code> ] [ -</code><strong>C</strong><code> </code><var>cookie-name</var><code>=</code><var>value</var><code> ] [ -</code><strong>d</strong><code> ] [ -</code><strong>e</strong><code> </code><var>csv-file</var><code> ] [ -</code><strong>g</strong><code> </code><var>gnuplot-file</var><code> ] [ -</code><strong>h</strong><code> ] [ -</code><strong>H</strong><code> </code><var>custom-header</var><code> ] [ -</code><strong>i</strong><code> ] [ -</code><strong>k</strong><code> ] [ -</code><strong>n</strong><code> </code><var>requests</var><code> ] [ -</code><strong>p</strong><code> </code><var>POST-file</var><code> ] [ -</code><strong>P</strong><code> </code><var>proxy-auth-username</var><code>:</code><var>password</var><code> ] [ -</code><strong>q</strong><code> ] [ -</code><strong>s</strong><code> ] [ -</code><strong>S</strong><code> ] [ -</code><strong>t</strong><code> </code><var>timelimit</var><code> ] [ -</code><strong>T</strong><code> </code><var>content-type</var><code> ] [ -</code><strong>v</strong><code> </code><var>verbosity</var><code>] [ -</code><strong>V</strong><code> ] [ -</code><strong>w</strong><code> ] [ -</code><strong>x</strong><code> </code><var>&lt;table&gt;-attributes</var><code> ] [ -</code><strong>X</strong><code> </code><var>proxy</var><code>[:</code><var>port</var><code>] ] [ -</code><strong>y</strong><code> </code><var>&lt;tr&gt;-attributes</var><code> ] [ -</code><strong>z</strong><code> </code><var>&lt;td&gt;-attributes</var><code> ] [http://]</code><var>hostname</var><code>[:</code><var>port</var><code>]/</code><var>path</var></p>
<p><code><strong>-A </strong></code><var><strong>auth-username</strong></var><code><strong>:</strong></code><var><strong>password</strong></var><strong></strong><strong></strong></p>
<p>Supply BASIC Authentication credentials to the server. The username and password are separated by a single <code>:</code> and sent on the wire base64 encoded. The string is sent regardless of whether the server needs it (<em>i.e.</em>, has sent an 401 authentication needed).</p>
<p><code><strong>-c </strong></code><var><strong>concurrency</strong></var><strong></strong></p>
<p>Number of multiple requests to perform at a time. Default is one request at a time.</p>
<p><code><strong>-C </strong></code><var><strong>cookie-name</strong></var><code><strong>=</strong></code><var><strong>value</strong></var><strong></strong></p>
<p>Add a <code>Cookie:</code> line to the request. The argument is typically in the form of a <var>name</var><code>=</code><var>value</var> pair. This field is repeatable.</p>
<p><code><strong>-d</strong></code><strong></strong></p>
<p>Do not display the &#8220;percentage served within XX [ms] table&#8221;. (legacy support).</p>
<p><code><strong>-e </strong></code><var><strong>csv-file</strong></var><strong></strong></p>
<p>Write a Comma separated value (CSV) file which contains for each percentage (from 1% to 100%) the time (in milliseconds) it took to serve that percentage of the requests. This is usually more useful than the &#8216;gnuplot&#8217; file; as the results are already &#8216;binned&#8217;.</p>
<p><code><strong>-g </strong></code><var><strong>gnuplot-file</strong></var><strong></strong></p>
<p>Write all measured values out as a &#8216;gnuplot&#8217; or TSV (Tab separate values) file. This file can easily be imported into packages like Gnuplot, IDL, Mathematica, Igor or even Excel. The labels are on the first line of the file.</p>
<p><code><strong>-h</strong></code><strong></strong></p>
<p>Display usage information.</p>
<p><code><strong>-H </strong></code><var><strong>custom-header</strong></var><strong></strong></p>
<p>Append extra headers to the request. The argument is typically in the form of a valid header line, containing a colon-separated field-value pair (<em>i.e.</em>, <code>"Accept-Encoding: zip/zop;8bit"</code>).</p>
<p><code><strong>-i</strong></code><strong></strong></p>
<p>Do <code>HEAD</code> requests instead of <code>GET</code>.</p>
<p><code><strong>-k</strong></code><strong></strong></p>
<p>Enable the HTTP KeepAlive feature, <em>i.e.</em>, perform multiple requests within one HTTP session. Default is no KeepAlive.</p>
<p><code><strong>-n </strong></code><var><strong>requests</strong></var><strong></strong></p>
<p>Number of requests to perform for the benchmarking session. The default is to just perform a single request which usually leads to non-representative benchmarking results.</p>
<p><code><strong>-p </strong></code><var><strong>POST-file</strong></var><strong></strong></p>
<p>File containing data to POST.</p>
<p><code><strong>-P </strong></code><var><strong>proxy-auth-username</strong></var><code><strong>:</strong></code><var><strong>password</strong></var><strong></strong></p>
<p>Supply BASIC Authentication credentials to a proxy en-route. The username and password are separated by a single <code>:</code> and sent on the wire base64 encoded. The string is sent regardless of whether the proxy needs it (<em>i.e.</em>, has sent an 407 proxy authentication needed).</p>
<p><code><strong>-q</strong></code><strong></strong></p>
<p>When processing more than 150 requests, <code>ab</code> outputs a progress count on <code>stderr</code> every 10% or 100 requests or so. The<code>-q</code> flag will suppress these messages.</p>
<p><code><strong>-s</strong></code><strong></strong></p>
<p>When compiled in (<code>ab -h</code> will show you) use the SSL protected <code>https</code> rather than the <code>http</code> protocol. This feature is experimental and <em>very</em> rudimentary. You probably do not want to use it.</p>
<p><code><strong>-S</strong></code><strong></strong></p>
<p>Do not display the median and standard deviation values, nor display the warning/error messages when the average and median are more than one or two times the standard deviation apart. And default to the min/avg/max values. (legacy support).</p>
<p><code><strong>-t </strong></code><var><strong>timelimit</strong></var><strong></strong></p>
<p>Maximum number of seconds to spend for benchmarking. This implies a <code>-n 50000</code> internally. Use this to benchmark the server within a fixed total amount of time. Per default there is no timelimit.</p>
<p><code><strong>-T </strong></code><var><strong>content-type</strong></var><strong></strong></p>
<p>Content-type header to use for POST data.</p>
<p><code><strong>-v </strong></code><var><strong>verbosity</strong></var><strong></strong></p>
<p>Set verbosity level - <code>4</code> and above prints information on headers, <code>3</code> and above prints response codes (404, 200, etc.), <code>2</code> and above prints warnings and info.</p>
<p><code><strong>-V</strong></code><strong></strong></p>
<p>Display version number and exit.</p>
<p><code><strong>-w</strong></code><strong></strong></p>
<p>Print out results in HTML tables. Default table is two columns wide, with a white background.</p>
<p><code><strong>-x </strong></code><var><strong>&lt;table&gt;-attributes</strong></var><strong></strong></p>
<p>String to use as attributes for <code>&lt;table&gt;</code>. Attributes are inserted <code>&lt;table </code><var>here</var><code> &gt;</code>.</p>
<p><code><strong>-X </strong></code><var><strong>proxy</strong></var><code><strong>[:</strong></code><var><strong>port</strong></var><code><strong>]</strong></code><strong></strong></p>
<p>Use a proxy server for the requests.</p>
<p><code><strong>-y </strong></code><var><strong>&lt;tr&gt;-attributes</strong></var><strong></strong></p>
<p>String to use as attributes for <code>&lt;tr&gt;</code>.</p>
<p><code><strong>-z </strong></code><var><strong>&lt;td&gt;-attributes</strong></var><strong></strong></p>
<p>String to use as attributes for <code>&lt;td&gt;</code>.</p>
<p><strong>相关链接</strong><strong></strong></p>
<p>ab 是 Apache 的一个安装组件，所以需要下载 Apache 安装后才能使用，可以访问 Apache 的项目主页来下载<a href="http://httpd.apache.org/download.cgi">http://httpd.apache.org/download.cgi</a></p>
<p>ab 的更多信息可以参加 Apache 主页上的描述</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.haohtml.com/index.php/archives/4631/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>提高AJAX客户端响应速度</title>
		<link>http://blog.haohtml.com/index.php/archives/4431</link>
		<comments>http://blog.haohtml.com/index.php/archives/4431#comments</comments>
		<pubDate>Wed, 07 Jul 2010 02:28:20 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[js框架]]></category>
		<category><![CDATA[ajax]]></category>

		<guid isPermaLink="false">http://blog.haohtml.com/?p=4431</guid>
		<description><![CDATA[AJAX的出现极大的改变了Web应用客户端的操作模 式，它使的用户可以在全心工作时不必频繁的忍受那令人厌恶的页面刷新。理论上AJAX技术在很大的程度上可以减少用户操作的等待时间，同时节约网络上的数 据流量。而然，实际情况却并不总是这样。用户时常会抱怨用了AJAX的系统响应速度反而降低了。 笔者从事AJAX方面的研发多年，参与开发了目前 国内较为成熟的AJAX平台-dorado。根据笔者的经验，导致这种结果的根本原因并不在AJAX。很多时候系统响应速度的降低都是由不够合理的界面设 计和不够高效的编程习惯造成的。下面我们就来分析几个AJAX开发过程中需要时刻注意的环节。 合理的使用客户端编程和远程过程调用。 客户端的编程主要都是基于JavaScript的。而JavaScript是一种解释型 的编程语言，它的运行效率相对于Java等都要稍逊一筹。同时JavaScript又是运行在浏览器这样一个严格受限的环境当中。因此开发人员对于哪些逻 辑可以在客户端执行应该有一个清醒的认识。 在实际的应用中究竟应该怎样使用客户端编程，这依赖于开发人员的经验判断。这里很多问题是只可意会的。 由于篇幅有限，在这里我们大致归纳出下面这几个注意事项： 尽可能避免频繁的使用远程过程调用，例如避免在循环体中使用远程过程调用。 如果可能的话尽可能使用AJAX方式的远程过程调用（异步方式的远程过程调用）。 避免将重量级的数据操作放置在客户端。例如：大批量的数据复制操作、需要通过大量的数据遍历完成的计算等。 改进对DOM对象的操作方式。 客户端的编程中，对DOM对象的操作往往是最容易占用CPU时间的。而对于DOM对象的操作，不同的编程方法之间 的性能差异又往往是非常大的。 以下是三段运行结果完全相同的代码，它们的作用是在网页中创建一个10&#215;1000的表格。然而它们的运行速度却有着 天壤之别。 /* 测试代码1 &#8211; 耗时: 41秒*/ var table = document.createElement(&#8220;TABLE&#8221;); document.body.appendChild(table); for(var i = 0; i &#60; 1000; i++){ var row = table.insertRow(-1); for(var j = 0; j &#60; 10; j++){ var cell = objRow.insertCell(-1); cell.innerText [...]]]></description>
			<content:encoded><![CDATA[<p>AJAX的出现极大的改变了Web应用客户端的操作模 式，它使的用户可以在全心工作时不必频繁的忍受那令人厌恶的页面刷新。理论上AJAX技术在很大的程度上可以减少用户操作的等待时间，同时节约网络上的数 据流量。而然，实际情况却并不总是这样。用户时常会抱怨用了AJAX的系统响应速度反而降低了。<br />
笔者从事AJAX方面的研发多年，参与开发了目前 国内较为成熟的AJAX平台-dorado。根据笔者的经验，导致这种结果的根本原因并不在AJAX。很多时候系统响应速度的降低都是由不够合理的界面设 计和不够高效的编程习惯造成的。下面我们就来分析几个AJAX开发过程中需要时刻注意的环节。<span id="more-4431"></span></p>
<p><strong>合理的使用客户端编程和远程过程调用。</strong><br />
客户端的编程主要都是基于JavaScript的。而JavaScript是一种解释型 的编程语言，它的运行效率相对于Java等都要稍逊一筹。同时JavaScript又是运行在浏览器这样一个严格受限的环境当中。因此开发人员对于哪些逻 辑可以在客户端执行应该有一个清醒的认识。<br />
在实际的应用中究竟应该怎样使用客户端编程，这依赖于开发人员的经验判断。这里很多问题是只可意会的。 由于篇幅有限，在这里我们大致归纳出下面这几个注意事项：</p>
<p>尽可能避免频繁的使用远程过程调用，例如避免在循环体中使用远程过程调用。<br />
如果可能的话尽可能使用AJAX方式的远程过程调用（异步方式的远程过程调用）。<br />
避免将重量级的数据操作放置在客户端。例如：大批量的数据复制操作、需要通过大量的数据遍历完成的计算等。<br />
改进对DOM对象的操作方式。<br />
客户端的编程中，对DOM对象的操作往往是最容易占用CPU时间的。而对于DOM对象的操作，不同的编程方法之间 的性能差异又往往是非常大的。<br />
以下是三段运行结果完全相同的代码，它们的作用是在网页中创建一个10&#215;1000的表格。然而它们的运行速度却有着 天壤之别。<br />
/* 测试代码1 &#8211; 耗时: 41秒*/</p>
<p>var table =  document.createElement(&#8220;TABLE&#8221;);<br />
document.body.appendChild(table);<br />
for(var  i = 0; i &lt; 1000; i++){<br />
var row = table.insertRow(-1);<br />
for(var j = 0; j &lt; 10; j++){<br />
var cell = objRow.insertCell(-1);<br />
cell.innerText = &#8220;( &#8221; + i + &#8221; , &#8221; + j + &#8221; )&#8221;;<br />
}<br />
}</p>
<p>/* 测试代码2 &#8211; 耗时: 7.6秒 */</p>
<blockquote><p>var table =  document.getElementById(&#8220;TABLE&#8221;);<br />
document.body.appendChild(table);<br />
var  tbody = document.createElement(&#8220;TBODY&#8221;);<br />
table.appendChild(tbody);<br />
for(var  i = 0; i &lt; 1000; i++){<br />
var row = document.createElement(&#8220;TR&#8221;);<br />
tbody.appendChild(row);<br />
for(var j = 0; j &lt; 10; j++){<br />
var  cell = document.createElement(&#8220;TD&#8221;);<br />
row.appendChild(cell);<br />
cell.innerText = &#8220;( &#8221; + i + &#8221; , &#8221; + j + &#8221; )&#8221;;<br />
}<br />
}</p></blockquote>
<p>/* 测试代码3 &#8211; 耗时: 1.26秒 */</p>
<blockquote><p>var tbody =  document.createElement(&#8220;TBODY&#8221;);</p>
<p>for(var i = 0; i &lt; 1000; i++){<br />
var row = document.createElement(&#8220;TR&#8221;);<br />
for(var j = 0; j &lt;  10; j++){<br />
var cell = document.createElement(&#8220;TD&#8221;);<br />
cell.innerText = &#8220;( &#8221; + i + &#8221; , &#8221; + j + &#8221; )&#8221;;<br />
row.appendChild(cell);<br />
}<br />
tbody.appendChild(row);<br />
}<br />
var  table = document.getElementById(&#8220;TABLE&#8221;);<br />
table.appendChild(tbody);<br />
document.body.appendChild(table);</p></blockquote>
<p>这里的“测试代码1”和“测试代码2”之间的差别在于在创建表格单元时使用了不同的API方法。而“测试代码2”和“测试代码3”  之间的差别在于处理顺序的略微不同。<br />
“测试代码1”和“测试代码2”之间如此大的性能差别我们无从分析，目前所知的是insertRow和 insertCell是DHTML中表格特有的 API，createElement和appendChild是W3C  DOM的原生API。而前者应该是对后者的封装。不过，我们并不能因此而得出结论认为DOM的原生API总是优于对象特有的API。建议大家在需要频繁调 用某一API时，对其性能表现做一些基本的测试。<br />
“测试代码2”和“测试代码3”之间的性能差异主要来自于他们的构建顺序不同。“测试代码2”的 做法是首先创建最外层的&lt;TABLE&gt;对象，然后再在循环中依次创建&lt;TR&gt;和&lt;TD&gt;。而“测试代码3”的做法是 首先在内存中由内到外的构建好整个表格，最后再将它添加到网页中。这样做的目的是尽可能的减少浏览器重新计算页面布局的次数。每当我们将一个对象添加到网 页中时，浏览器都会尝试对页面中的控件的布局进行重新计算。所以，如果我们能够首先在内存中将整个要构造的对象全部创建好，然后再一次性的添加到网页中。 那么，浏览器将只会做一次布局的重计算。总结为一句话那就是越晚执行appendChild越好。有时为了提高运行效率，我们甚至可以考虑先使用 removeChild将已存在的控件从页面中移除，然后构造完成后再重新将其放置回页面当中。</p>
<p><strong>提高字符串累加的速度</strong><br />
在使用 AJAX提交信息时，我可能常常需要拼装一些比较大的字符串通过XmlHttp来完成POST提交。尽管提交这样大的信息的做法看起来并不优雅，但有时我 们可能不得不面对这样的需求。那么JavaScript中对字符串的累加速度如何呢？我们先来做下面的这个实验。累加一个长度为30000的字符串。<br />
/*  测试代码1 &#8211; 耗时: 14.325秒 */</p>
<blockquote><p>
var str = &#8220;&#8221;;<br />
for (var i = 0; i &lt;  50000; i++) {<br />
str += &#8220;xxxxxx&#8221;;<br />
}</p></blockquote>
<p>这段代码耗时14.325秒，结果并不理想。现在我们将 代码改为如下的形式：</p>
<p>/* 测试代码2 &#8211; 耗时: 0.359秒 */</p>
<blockquote><p>var str = &#8220;&#8221;;<br />
for (var i =  0; i &lt; 100; i++) {<br />
var sub = &#8220;&#8221;;<br />
for (var j = 0; j &lt;  500; j++) {<br />
sub += &#8220;xxxxxx&#8221;;<br />
}<br />
str += sub;<br />
}</p></blockquote>
<p>这 段代码耗时0.359秒！同样的结果，我们做的只是首先拼装一些较小的字符串然后再组装成更大的字符串。这种做法可以有效的在字符串拼装的后期减小内存复 制的数据量。知道了这一原理之后我们还可以把上面的代码进一步拆散以后进行测试。下面的代码仅耗时0.140秒。<br />
/* 测试代码3 &#8211; 耗时:  0.140秒 */</p>
<blockquote><p>var str = &#8220;&#8221;;</p>
<p>for (var i1 = 0; i1 &lt; 5; i1++) {<br />
var str1 = &#8220;&#8221;;<br />
for (var i2 = 0; i2 &lt; 10; i2++) {<br />
var str2 = &#8220;&#8221;;<br />
for (var i3 = 0; i3 &lt; 10; i3++) {<br />
var str3 = &#8220;&#8221;;<br />
for (var i4 = 0; i4 &lt; 10; i4++) {<br />
var str4 = &#8220;&#8221;;<br />
for (var i5 = 0; i5 &lt; 10; i5++) {<br />
str4 += &#8220;xxxxxx&#8221;;<br />
}<br />
str3 += str4;<br />
}<br />
str2 += str3;<br />
}<br />
str1 += str2;<br />
}<br />
str += str1;<br />
}</p></blockquote>
<p>不过，上面这种做法也许并不是最好的！如果我们需要提交的信息 是XML格式的（其实绝大多数情况下，我们都可以设法将要提交的信息组装成XML格式），我们还能找到更高效更优雅的方法—利用DOM对象为我们组装字符 串。下面这段代买组装一个长度为950015的字符串仅须耗时0.890秒。</p>
<p>/* 利用DOM对象组装信息 &#8211; 耗时: 0.890秒 */</p>
<blockquote><p>var  xmlDoc;</p>
<ol></ol>
<p>if (browserType == BROWSER_IE) {<br />
xmlDoc = new  ActiveXObject(&#8220;Msxml.DOMDocument&#8221;);<br />
}<br />
else {<br />
xmlDoc =  document.createElement(&#8220;DOM&#8221;);<br />
}<br />
var root =  xmlDoc.createElement(&#8220;root&#8221;);<br />
for (var i = 0; i &lt; 50000; i++) {<br />
var node = xmlDoc.createElement(&#8220;data&#8221;);<br />
if (browserType ==  BROWSER_IE) {<br />
node.text = &#8220;xxxxxx&#8221;;<br />
}<br />
else {<br />
node.innerText = &#8220;xxxxxx&#8221;;<br />
}<br />
root.appendChild(node);<br />
}<br />
xmlDoc.appendChild(root);<br />
var str;<br />
if (browserType == BROWSER_IE) {<br />
str = xmlDoc.xml;<br />
}<br />
else  {<br />
str = xmlDoc.innerHTML;<br />
}</p></blockquote>
<ol></ol>
<p><strong>避免DOM对象的内存泄漏。</strong><br />
关于IE中DOM对象的内存泄露是一个常常被开发人员忽略的问题。然而它带来的后果却是非常严重 的！它会导致IE的内存占用量持续上升，并且浏览器的整体运行速度明显下降。对于一些泄露比较严重的网页，甚至只要刷新几次，运行速度就会降低一倍。<br />
比 较常见的内存泄漏的模型有“循环引用模型”、“闭包函数模型”和“DOM插入顺序模型”,对于前两种泄漏模型，我们都可以通过在网页析构时解除引用的方式 来避免。而对于“DOM插入顺序模型”则需要通过改变一些惯有的编程习惯的方式来避免。<br />
有关内存泄漏的模型的更多介绍可以通过Google很快的 查到，本文不做过多的阐述。不过，这里我向您推荐一个可用于查找和分析网页内存泄露的小工具— Drip，目前的较新版本是0.5.</p>
<p><strong> 复杂页面的分段装载和初始化</strong><br />
对系统当中某些确实比较复杂而又不便使用IFrame的界面，我们可以对其实施分段装载。例如对于多页标签的界 面，我们可以首先下载和初始化多页标签的默认页，然后利用AJAH（asynchronous JavaScript and  HTML）技术来异步的装载其他标签页中的内容。这样就能保证界面可以在第一时间首先展现给用户。把整个复杂界面的装载过程分散到用户的操作过程当中。</p>
<p><strong>用GZIP压缩网络流量。</strong><br />
除了上面提到的这些代码级的改良之外，我们还可以利用GZIP来有效的降低网络流量。目前常见的主流浏览器已经全 部支持GZIP算法，我们往往只需要编写少量的代码就可以支持GZIP了。例如在J2EE中我们可以在Filter中通过下面的代码来判断客户端浏览器是 否支持GZIP算法，然后根据需要利用 java.util.zip.GZIPOutputStream来实现GZIP的输出。</p>
<p>/*  判断浏览器对GZIP支持方式的代码 */<br />
private static String  getGZIPEncoding(HttpServletRequest request) {<br />
String acceptEncoding  = request.getHeader(&#8220;Accept-Encoding&#8221;);<br />
if (acceptEncoding ==  null) return null;<br />
acceptEncoding = acceptEncoding.toLowerCase();<br />
if (acceptEncoding.indexOf(&#8220;x-gzip&#8221;) &gt;= 0) return &#8220;x-gzip&#8221;;<br />
if  (acceptEncoding.indexOf(&#8220;gzip&#8221;) &gt;= 0) return &#8220;gzip&#8221;;<br />
return  null;<br />
}<br />
一般而言，GZIP对于HTML、JSP的压缩比可以达到80%左右，而它造成的服务端和客户端的性能损耗几乎是可以忽略 的。结合其他因素，支持GZIP  的网站有可能为我们节约50%的网络流量。因此GZIP的使用可以为那些网络环境不是特别好的应用带来显著的性能提升。使用Http的监视工具  Fiddler可以方便的检测出网页在使用GZIP前后的通讯数据量。Fiddler的下载地址是 /fiddler/<br />
关于Web应用的性能优化 其实是一个非常大的话题。本文由于篇幅有限，只能涉及其中的几个细节，并且也无法将这些细节的优化方式全面的展现给大家。期望本文能够引起大家对Web应 用尤其是客户端性能优化的充分重视。毕竟服务端编程技巧已为大家熟知多年，在服务端挖掘性能的潜力已经不大了。而在客户端的方法改进往往能够得到令人惊奇 的性能提升。</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.haohtml.com/index.php/archives/4431/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>解决多个window.onload冲突问题的方法</title>
		<link>http://blog.haohtml.com/index.php/archives/4406</link>
		<comments>http://blog.haohtml.com/index.php/archives/4406#comments</comments>
		<pubDate>Tue, 06 Jul 2010 09:09:15 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[js框架]]></category>

		<guid isPermaLink="false">http://blog.haohtml.com/?p=4406</guid>
		<description><![CDATA[我们在网页中可能要插入多个JS，可是如果在两个JS的代码中都使用了window.onload,可能会出现两个JS不兼容的现象。可能就显示其中一个 JS，而另一个就被忽略了，也就是同一个网页中不能出现两个window.onload。这次本人在编写网页的时候就遇到了这个问题，因为如果只用一个 JS就显得有点单调，如果重新编写JS代码又感觉太麻烦。这时我们就要用window.attachEvent和 window.addEventListener来解决问题了。 当某一事件被触发时需要执行某个函数，在IE下可用attachEvent，在 FF下则要用addEventListener。 attachEvent()有两个参数，第一个是事件名称，第二个是需执行的函数； addEventListener() 有三个参数，第一个是事件名称，但与IE事件不同的是，事件不带&#8221;on&#8221;,比如&#8221;onsubmit&#8221;在这里应为&#8221;submit&#8221;，第二个是需执行的函数， 第三个参数为布尔值； 例如：(可以在IE和FF下分别测试)： &#60;input type=&#8221;button&#8221; id=&#8221;ie&#8221; value=&#8221; IE &#8221; /&#62; &#60;input type=&#8221;button&#8221; id=&#8221;ff&#8221; value=&#8221; FF &#8221; /&#62; &#60;script type=&#8221;text/javascript&#8221;&#62; var isIE = (document.all &#38;&#38; window.ActiveXObject &#38;&#38; !window.opera) ? true : false; if(isIE) { document.getElementById(’ie’).attachEvent(&#8220;onclick&#8221;, Fun); } else { document.getElementById(’ff’).addEventListener(&#8220;click&#8221;, Fun, false); } function Fun() { if(isIE) { alert(’I\’m IE’); } else { alert(’I\’m Not IE’); } } &#60;/script&#62; 所以我们可以直接这样编写： if (document.all){ window.attachEvent(’onload’, 调用函数名)//对于IE } else{ window.addEventListener(’load’,调用函数 名,false);//对于FireFox }]]></description>
			<content:encoded><![CDATA[<p>我们在网页中可能要插入多个JS，可是如果在两个JS的代码中都使用了window.onload,可能会出现两个JS不兼容的现象。可能就显示其中一个  JS，而另一个就被忽略了，也就是同一个网页中不能出现两个window.onload。这次本人在编写网页的时候就遇到了这个问题，因为如果只用一个  JS就显得有点单调，如果重新编写JS代码又感觉太麻烦。这时我们就要用window.attachEvent和  window.addEventListener来解决问题了。<br />
当某一事件被触发时需要执行某个函数，在IE下可用<strong>attachEvent</strong>，在 FF下则要用<strong>addEventListener</strong>。<br />
attachEvent()有两个参数，第一个是事件名称，第二个是需执行的函数； <span id="more-4406"></span><br />
addEventListener() 有三个参数，第一个是事件名称，但与IE事件不同的是，事件不带&#8221;on&#8221;,比如&#8221;onsubmit&#8221;在这里应为&#8221;submit&#8221;，第二个是需执行的函数， 第三个参数为布尔值；<br />
例如：(可以在IE和FF下分别测试)：<br />
&lt;input type=&#8221;button&#8221; id=&#8221;ie&#8221; value=&#8221; IE &#8221; /&gt;<br />
&lt;input type=&#8221;button&#8221; id=&#8221;ff&#8221; value=&#8221; FF &#8221; /&gt;<br />
&lt;script type=&#8221;text/javascript&#8221;&gt;<br />
var isIE = (document.all &amp;&amp; window.ActiveXObject &amp;&amp; !window.opera) ? true : false;<br />
if(isIE)<br />
{<br />
document.getElementById(’ie’).attachEvent(&#8220;onclick&#8221;, Fun);<br />
}<br />
else<br />
{<br />
document.getElementById(’ff’).addEventListener(&#8220;click&#8221;, Fun, false);<br />
}<br />
function Fun()<br />
{<br />
if(isIE)<br />
{<br />
alert(’I\’m IE’);<br />
}<br />
else<br />
{<br />
alert(’I\’m Not IE’);<br />
}</p>
<p>}<br />
&lt;/script&gt;<br />
所以我们可以直接这样编写：<br />
if (document.all){<br />
window.attachEvent(’onload’, 调用函数名)//对于IE<br />
}<br />
else{<br />
window.addEventListener(’load’,调用函数 名,false);//对于FireFox<br />
}</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.haohtml.com/index.php/archives/4406/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>广告和统计的js文件异步加载、动态加载css文件代码</title>
		<link>http://blog.haohtml.com/index.php/archives/4402</link>
		<comments>http://blog.haohtml.com/index.php/archives/4402#comments</comments>
		<pubDate>Tue, 06 Jul 2010 06:25:31 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[js框架]]></category>
		<category><![CDATA[js]]></category>
		<category><![CDATA[广告]]></category>

		<guid isPermaLink="false">http://blog.haohtml.com/?p=4402</guid>
		<description><![CDATA[用法：include_js(src,[reload]); src: js文件的路径名 reload:可选参数，0或1，表示是否重复加载同一个url的js文件。 用途： 本 函数可以用于一些广告和统计的js文件异步加载，避免了因加载js文件而造成的网页显示速度慢的问题。 将此函数修改如下后 可以动 态加载css文件 function include_js(path,reload) { var scripts = document.getElementsByTagName(&#8220;script&#8221;); if (!reload) for (var i=0;i&#60;scripts.length;i++) if (scripts[i].src &#38;&#38; scripts[i].src.toLowerCase() == path.toLowerCase() ) return; var sobj = document.createElement(&#8216;script&#8217;); sobj.type = &#8220;text/javascript&#8221;; sobj.src = path; var headobj = document.getElementsByTagName(&#8216;head&#8217;)[0]; headobj.appendChild(sobj); } 但 是这样当加载的js文件含有document.write语句时,在IE下没有反应，但在Mozilla Firefox 下就会让你原来的网页消失，只显示document.write出来的内容.对此问题一网友给出了一种比较好的解决办法,当然是重写 document.write方法.下面网友原做内容: 引用 有一个可以让 document.write信息显示出来的方法： 先在网页中需要显示write出来的内容的地方加入一个div标签： [...]]]></description>
			<content:encoded><![CDATA[<p><strong>用法：</strong>include_js(src,[reload]);<br />
src:  js文件的路径名<br />
reload:可选参数，0或1，表示是否重复加载同一个url的js文件。<a name="entrymore"></a></p>
<p><strong>用途：</strong><br />
<span style="color: #000000;"> </span>本 函数可以用于一些广告和统计的js文件异步加载，避免了因加载js文件而造成的网页显示速度慢的问题。</p>
<p>将此函数修改如下后 可以动 态加载css文件<span id="more-4402"></span></p>
<div>function  include_js(path,reload)<br />
{<br />
var scripts =  document.getElementsByTagName(&#8220;script&#8221;);<br />
if (!reload)<br />
for  (var i=0;i&lt;scripts.length;i++)<br />
if (scripts[i].src  &amp;&amp; scripts[i].src.toLowerCase() == path.toLowerCase() ) return;<br />
var  sobj = document.createElement(&#8216;script&#8217;);<br />
sobj.type =  &#8220;text/javascript&#8221;;<br />
sobj.src = path;<br />
var headobj =  document.getElementsByTagName(&#8216;head&#8217;)[0];<br />
headobj.appendChild(sobj);<br />
}</div>
<p>但 是这样当加载的js文件含有document.write语句时,在IE下没有反应，但在Mozilla Firefox  下就会让你原来的网页消失，只显示document.write出来的内容.对此问题一网友给出了一种比较好的解决办法,当然是重写 document.write方法.下面网友原做内容:</p>
<div>
<div>引用</div>
<div>有一个可以让 document.write信息显示出来的方法：<br />
先在网页中需要显示write出来的内容的地方加入一个div标签：</p>
<p>&lt;div  id=&#8217;jsdiv&#8217;&gt;&lt;/div&gt;<br />
然后在include_js之前加上这句：<br />
document.write =  function (s)<br />
{<br />
document.getElementById(&#8216;jsdiv&#8217;).innerHTML+=s;<br />
return  false;<br />
}</p>
<p>这样不仅可以不让document.write方法破坏网页，也避免了write出来的信息丢失的痛苦。</p>
</div>
</div>
]]></content:encoded>
			<wfw:commentRss>http://blog.haohtml.com/index.php/archives/4402/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>动态加载js文件</title>
		<link>http://blog.haohtml.com/index.php/archives/4395</link>
		<comments>http://blog.haohtml.com/index.php/archives/4395#comments</comments>
		<pubDate>Tue, 06 Jul 2010 01:21:29 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[js框架]]></category>
		<category><![CDATA[广告]]></category>

		<guid isPermaLink="false">http://blog.haohtml.com/?p=4395</guid>
		<description><![CDATA[以下代码是摘自news.qq.com页面里的代码的,本人未进行测试,程序看着应该没有问题的,可以做为参考的,主要用来在网页底部位置,实现动态加载js文件到网页&#60;head&#62;标签的后面,通过DOM来实现的,代码如下: &#60;script&#62; var SCRIPT_TIMEOUT = 20000; var QVPL_PATH = &#8220;http://mat1.gtimg.com/bb/html5/QVPL1.0.0.js&#8221;; function loadHelper (jsurl) { var oScriptEl, oTimeoutHDL, oHead; oScriptEl = document.createElement(&#8220;script&#8221;); oScriptEl.type = &#8220;text/javascript&#8221;; oScriptEl.language = &#8220;javascript&#8221;; oScriptEl.src = jsurl; oScriptEl.onreadystatechange = doCallback; oScriptEl.onload = function() { this.readyState = &#8220;complete&#8221;; doCallback(); if(typeof(lianbo) == &#8220;object&#8221;){ lianbo.init(window.QVPL); } }; oTimeoutHDL = window.setTimeout(doError,SCRIPT_TIMEOUT); document.getElementsByTagName(&#8220;head&#8221;)[0].appendChild(oScriptEl); function doCallback() { if [...]]]></description>
			<content:encoded><![CDATA[<p>以下代码是摘自news.qq.com页面里的代码的,本人未进行测试,程序看着应该没有问题的,可以做为参考的,主要用来在网页底部位置,实现动态加载js文件到网页&lt;head&gt;标签的后面,通过DOM来实现的,代码如下:</p>
<table>
<tbody>
<tr>
<td>&lt;script&gt;</td>
</tr>
<tr>
<td></td>
<td>var SCRIPT_TIMEOUT = 20000;</td>
</tr>
<tr>
<td></td>
<td>var QVPL_PATH = &#8220;http://mat1.gtimg.com/bb/html5/QVPL1.0.0.js&#8221;;</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>function loadHelper (jsurl) {</td>
</tr>
<tr>
<td></td>
<td>var oScriptEl, oTimeoutHDL, oHead;</td>
</tr>
<tr>
<td></td>
<td>oScriptEl = document.createElement(&#8220;script&#8221;);</td>
</tr>
<tr>
<td></td>
<td>oScriptEl.type = &#8220;text/javascript&#8221;;</td>
</tr>
<tr>
<td></td>
<td>oScriptEl.language = &#8220;javascript&#8221;;</td>
</tr>
<tr>
<td></td>
<td>oScriptEl.src = jsurl;</td>
</tr>
<tr>
<td></td>
<td>oScriptEl.onreadystatechange = doCallback;</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>oScriptEl.onload = function()</td>
</tr>
<tr>
<td></td>
<td>{</td>
</tr>
<tr>
<td></td>
<td>this.readyState = &#8220;complete&#8221;;</td>
</tr>
<tr>
<td></td>
<td>doCallback();</td>
</tr>
<tr>
<td></td>
<td>if(typeof(lianbo) == &#8220;object&#8221;){</td>
</tr>
<tr>
<td></td>
<td>lianbo.init(window.QVPL);</td>
</tr>
<tr>
<td></td>
<td>}</td>
</tr>
<tr>
<td></td>
<td>};</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>oTimeoutHDL = window.setTimeout(doError,SCRIPT_TIMEOUT);</td>
</tr>
<tr>
<td></td>
<td>document.getElementsByTagName(&#8220;head&#8221;)[0].appendChild(oScriptEl);</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>function doCallback()</td>
</tr>
<tr>
<td></td>
<td>{</td>
</tr>
<tr>
<td></td>
<td>if (oScriptEl.readyState == &#8220;complete&#8221; || oScriptEl.readyState == &#8220;loaded&#8221;)</td>
</tr>
<tr>
<td></td>
<td>{</td>
</tr>
<tr>
<td></td>
<td>oScriptEl.onload = oScriptEl.onreadystatechange = new Function();</td>
</tr>
<tr>
<td></td>
<td>window.clearTimeout(oTimeoutHDL);</td>
</tr>
<tr>
<td></td>
<td>}</td>
</tr>
<tr>
<td></td>
<td>};</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>function doError()</td>
</tr>
<tr>
<td></td>
<td>{</td>
</tr>
<tr>
<td></td>
<td>oScriptEl.parentNode.removeChild(oScriptEl);</td>
</tr>
<tr>
<td></td>
<td>};</td>
</tr>
<tr>
<td></td>
<td>}</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>loadHelper(QVPL_PATH);</td>
</tr>
<tr>
<td></td>
<td>&lt;/script&gt;</td>
</tr>
</tbody>
</table>
]]></content:encoded>
			<wfw:commentRss>http://blog.haohtml.com/index.php/archives/4395/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>jquery以Jsonp方式跨域获取json配合php示例</title>
		<link>http://blog.haohtml.com/index.php/archives/4232</link>
		<comments>http://blog.haohtml.com/index.php/archives/4232#comments</comments>
		<pubDate>Thu, 01 Jul 2010 07:05:10 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[js框架]]></category>
		<category><![CDATA[设计重构]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://blog.haohtml.com/?p=4232</guid>
		<description><![CDATA[Php代码 需跨域调取的url假设为： http://www.1ong1.com/bbtest/json.php 返回： ({ &#8221;TotalCount&#8221;:1,&#8221;Rows&#8221;:[ { "vusername":"zycbob","CompanyName":"BV Ltd,.","UcofcName":"集团公司","CamEndTime":"2010-02-05 16:40:00","ServerID":"1","ServerName":"开天辟地","ServerType":"169"} ]}) &#60;?php $jsondata = &#8217;{ &#8221;TotalCount&#8221;:1,&#8221;Rows&#8221;:[ { "vusername":"zycbob","CompanyName":"BV Ltd,.","UcofcName":"集团公司","CamEndTime":"2010-02-05 16:40:00","ServerID":"1","ServerName":"开天辟地","ServerType":"169"} ]}&#8217;; echo $_GET['callback'].&#8217;(&#8216;.$jsondata.&#8217;)'; Html代码 &#60;!DOCTYPE html PUBLIC &#8221;-//W3C//DTD XHTML 1.0 Transitional//EN&#8221; &#8221;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&#8221;&#62; &#60;html xmlns=&#8221;http://www.w3.org/1999/xhtml&#8221;&#62; &#60;head&#62; &#60;meta http-equiv=&#8221;Content-Type&#8221; content=&#8221;text/html; charset=utf-8&#8243; /&#62; &#60;title&#62;jquery以Jsonp方式跨域获取json配合php示例&#60;/title&#62; &#60;script type=&#8221;text/javascript&#8221; src=&#8221;http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&#8221;&#62;&#60;/script&#62; &#60;script type=&#8221;text/javascript&#8221;&#62; $.getJSON(&#8220;http://www.1ong1.com/bbtest/json.php?callback=?&#8221;, function(data){ alert(data.Rows[0].ServerName); // 运行结果“开天辟地” }); &#60;/script&#62; &#60;/head&#62; &#60;body&#62; test only &#60;/body&#62; &#60;/html&#62;]]></description>
			<content:encoded><![CDATA[<div>
<div><strong>Php代码</strong></div>
</div>
<ol>
<li>需跨域调取的url假设为：</li>
<li>http://www.1ong1.com/bbtest/json.php</li>
<li>返回：</li>
<li>({ &#8221;TotalCount&#8221;:1,&#8221;Rows&#8221;:[ { "vusername":"zycbob","CompanyName":"BV Ltd,.","UcofcName":"集团公司","CamEndTime":"2010-02-05 16:40:00","ServerID":"1","ServerName":"开天辟地","ServerType":"169"} ]})</li>
<li>&lt;?php</li>
<li> $jsondata = &#8217;{ &#8221;TotalCount&#8221;:1,&#8221;Rows&#8221;:[ { "vusername":"zycbob","CompanyName":"BV Ltd,.","UcofcName":"集团公司","CamEndTime":"2010-02-05 16:40:00","ServerID":"1","ServerName":"开天辟地","ServerType":"169"} ]}&#8217;;</li>
<li> echo $_GET['callback'].&#8217;(&#8216;.$jsondata.&#8217;)';</li>
</ol>
<div>
<div><strong><span id="more-4232"></span>Html代码</strong><a title="复制代码" href="http://zycbob.javaeye.com/blog/588049#"></a></div>
</div>
<ol>
<li>&lt;!DOCTYPE html PUBLIC &#8221;-//W3C//DTD XHTML 1.0 Transitional//EN&#8221; &#8221;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&#8221;&gt;</li>
<li>&lt;html xmlns=&#8221;http://www.w3.org/1999/xhtml&#8221;&gt;</li>
<li>&lt;head&gt;</li>
<li>&lt;meta http-equiv=&#8221;Content-Type&#8221; content=&#8221;text/html; charset=utf-8&#8243; /&gt;</li>
<li>&lt;title&gt;jquery以Jsonp方式跨域获取json配合php示例&lt;/title&gt;</li>
<li>&lt;script type=&#8221;text/javascript&#8221; src=&#8221;http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&#8221;&gt;&lt;/script&gt;</li>
<li>&lt;script type=&#8221;text/javascript&#8221;&gt;</li>
<li> $.getJSON(&#8220;http://www.1ong1.com/bbtest/json.php?callback=?&#8221;,</li>
<li> function(data){</li>
<li> alert(data.Rows[0].ServerName); // 运行结果“开天辟地”</li>
<li> });</li>
<li>&lt;/script&gt;</li>
<li>&lt;/head&gt;</li>
<li>&lt;body&gt;</li>
<li>test only</li>
<li>&lt;/body&gt;</li>
<li>&lt;/html&gt;</li>
</ol>
]]></content:encoded>
			<wfw:commentRss>http://blog.haohtml.com/index.php/archives/4232/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>JS – 解决跨域问题</title>
		<link>http://blog.haohtml.com/index.php/archives/4226</link>
		<comments>http://blog.haohtml.com/index.php/archives/4226#comments</comments>
		<pubDate>Thu, 01 Jul 2010 06:12:22 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[js框架]]></category>

		<guid isPermaLink="false">http://blog.haohtml.com/?p=4226</guid>
		<description><![CDATA[用json（可选）和script标签，解决ajax的跨域问题，ajax的XMLHttpRequest因为js的安全问题是不能跨域的 但是可以用src=”http://otherSite.com/a.js”可以跨域所以动态写入一个就OK了. demo： var A = document.createElement(“script”) , B = document.getElementsByTagName(“head”)[0]; A.src = “http://comment.sports.163.com/data/sports_nba_bbs/df/5C472DDM00051CA1_1.html”; A.language = “javascript”; A.type = “text/javascript”; A.onload = A.onreadystatechange = function(){ alert(this.readyState); //onreadystatechange alert(“A”); } 解决浏览器差异： FF:onload ； IE:onreadystatechange。 如果使用了jQuery的话。 跨域问题就更容易解决了。 $.getJSON( ”a.php?callback=?”, function(data){ alert(“CallBack Data: ” + data ); } ); 在此必须要用 callback=? 进行跨域调用，jQuery会返回一个JSONP的返回值代替‘？’，实际上传递给后台脚本的应该是类似‘&#38;callback=jsonp12126279’。所以需要在后台脚本中截获 callback的参数，然后加在原先的JSON前。（可以理解成是一次验证过程）。 同样可以采用这种方式异步加载图片： var A = document.createElement(“img”) [...]]]></description>
			<content:encoded><![CDATA[<p>用json（可选）和script标签，解决ajax的跨域问题，ajax的XMLHttpRequest因为js的安全问题是不能跨域的<br />
但是可以用src=”http://otherSite.com/a.js”可以跨域所以动态写入一个就OK了.<br />
demo：<br />
var A = document.createElement(“script”) , B = document.getElementsByTagName(“head”)[0];<br />
A.src = “http://comment.sports.163.com/data/sports_nba_bbs/df/5C472DDM00051CA1_1.html”;<br />
A.language = “javascript”;<br />
A.type = “text/javascript”;<br />
A.onload = A.onreadystatechange = function(){<br />
alert(this.readyState); //onreadystatechange<br />
alert(“A”);<br />
}</p>
<p>解决浏览器差异： FF:onload ； IE:onreadystatechange。</p>
<p>如果使用了jQuery的话。 跨域问题就更容易解决了。<span id="more-4226"></span></p>
<p>$.getJSON(<br />
”a.php?callback=?”,<br />
function(data){<br />
alert(“CallBack Data: ” + data );<br />
}<br />
);</p>
<p>在此必须要用 callback=? 进行跨域调用，jQuery会返回一个JSONP的返回值代替‘？’，实际上传递给后台脚本的应该是类似‘&amp;callback=jsonp12126279’。所以需要在后台脚本中截获 callback的参数，然后加在原先的JSON前。（可以理解成是一次验证过程）。</p>
<p>同样可以采用这种方式异步加载图片：<br />
var A = document.createElement(“img”) , B = document.getElementsByTagName(“body”)[0];<br />
A.src = “http://img.openv.tv/t/UserFiles/Image/20090612/20090612_1709056640541058.jpg”;<br />
A.onload = A.onreadystatechange = function(){<br />
alert(this.readyState);<br />
alert(“A”);<br />
}<br />
B.appendChild(A);</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.haohtml.com/index.php/archives/4226/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>IE6图片加载的一个BUG</title>
		<link>http://blog.haohtml.com/index.php/archives/4223</link>
		<comments>http://blog.haohtml.com/index.php/archives/4223#comments</comments>
		<pubDate>Thu, 01 Jul 2010 05:57:52 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[js框架]]></category>

		<guid isPermaLink="false">http://blog.haohtml.com/?p=4223</guid>
		<description><![CDATA[小图整合在一张大图里，然后在不同的CSS里调用同一张图片，以此来减少请求数，这是页面优化最常用的手段，但IE6会对页面里同一个图片，只要在不同的地方有引用到就会重新请求一次，需要加JS代码解决。代码如下： &#60;!--[if IE 6]&#62;&#60;script type="text/javascript"&#62; try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} &#60;/script&#62;&#60;![endif]--&#62; 注：这个BUG以前就已经发现了，这里只是再次提出来。]]></description>
			<content:encoded><![CDATA[<p>小图整合在一张大图里，然后在不同的CSS里调用同一张图片，以此来减少请求数，这是页面优化最常用的手段，但IE6会对页面里同一个图片，只要在不同的地方有引用到就会重新请求一次，需要加JS代码解决。代码如下：</p>
<pre id="line1">&lt;!--[if IE 6]&gt;&lt;script type="text/javascript"&gt;
try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {}
&lt;/script&gt;&lt;![endif]--&gt;

注：这个BUG以前就已经发现了，这里只是再次提出来。</pre>
]]></content:encoded>
			<wfw:commentRss>http://blog.haohtml.com/index.php/archives/4223/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>I/O与性能</title>
		<link>http://blog.haohtml.com/index.php/archives/4004</link>
		<comments>http://blog.haohtml.com/index.php/archives/4004#comments</comments>
		<pubDate>Sat, 26 Jun 2010 15:38:26 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[js框架]]></category>

		<guid isPermaLink="false">http://blog.haohtml.com/?p=4004</guid>
		<description><![CDATA[最近几天看了几家互联网公司的和架构有关的PPT，有支付宝，linkedin，douban等。这些公司所使用的具体的技术有差别，但是为了能做 到支持大规模访问，他们都在与缓慢的IO做斗争！ 比如说豆瓣网的历次架构变迁，不是因为磁盘IO成为瓶颈，就是因为网络IO成为瓶颈。如果能把IO的问题解决掉，那么对于互联网企业来说，性能问题就解决 掉一半了，我想。 与飞速的CPU和内存相比，磁盘和网络的IO慢如蜗牛，这是问题的根源。如果没有大规模廉价而又足够快的存储方案出现的话，这个问题还将继续下去。 我们只能期待这一革命性的技术出现来从根本上解决这一问题吧！ 那对于现在的我们该怎么办呢？大家的想法可能都是一样的，一是加快IO速度，二是避免不必要的IO。豆瓣曾经通过购买更高性能的硬盘来解决这个问 题，如果想要更好的效果，需要投入更多的资金来购买整套的高性能存储方案，但是这成本太高了，很多公司后来都会放弃。于是大部分公司都会极力采用后者，就 是避免不必要的IO，缓存就是用来做这样的事的。 将低速介质上的数据放到高速介质上，访问者先访问高速介质，在找不到需要数据时才访问低速介质，以此来提升访问数据的速度，这样的技术就是缓存了。 设在一段时间内有m次没有命中缓存，n次命中，而访问一次缓存的时间是t1， 访问慢速介质的时间是t2，那么为了是缓存有效就得满足不等式： m * (t1 + t2) + n * t1 &#60; (m + n) * t2， 于是有 m / n &#60; t2 / t1 -1 。由此可见，在介质的速度比一定的情况下，命中比率要高于一定的值，缓存才有效果。提高命中比率，就是要把那些最常用的数据放到缓存里。另一方面，缓存里 数据如果被修改了，就要同步到低速存储介质中，同样的，如果低速存储介质的数据被修改了，也要同步到缓存里。如果加上同步的开销，就需要更高的命中率。提 高命中率和保证数据的同步，是使用缓存的两个艰巨的任务。 豆瓣网使用memcache，还使用专门的nigix服务器来提供图片的服务，其实也是cache。linkedin则使用了数十台大内存的服务器 作为缓存服务器，运行着用c++写的专门的缓存程序。可见这些网站在使用缓存方面都是不遗余力呀。如果能把缓存用好，那么就把一大半的IO问题解决掉了。 IO往往会成为程序的瓶颈，因此，程序员应当时刻的注意，你写的代码是否在进行IO操作，是否可以减少IO操作，等等。 本文来自：http://www.sulong.info/archives/232]]></description>
			<content:encoded><![CDATA[<p>最近几天看了几家互联网公司的和架构有关的PPT，有支付宝，linkedin，douban等。这些公司所使用的具体的技术有差别，但是为了能做 到支持大规模访问，他们都在与缓慢的IO做斗争！  比如说豆瓣网的历次架构变迁，不是因为磁盘IO成为瓶颈，就是因为网络IO成为瓶颈。如果能把IO的问题解决掉，那么对于互联网企业来说，性能问题就解决 掉一半了，我想。</p>
<p>与飞速的CPU和内存相比，磁盘和网络的IO慢如蜗牛，这是问题的根源。如果没有大规模廉价而又足够快的存储方案出现的话，这个问题还将继续下去。 我们只能期待这一革命性的技术出现来从根本上解决这一问题吧！<span id="more-4004"></span></p>
<p>那对于现在的我们该怎么办呢？大家的想法可能都是一样的，一是加快IO速度，二是避免不必要的IO。豆瓣曾经通过购买更高性能的硬盘来解决这个问 题，如果想要更好的效果，需要投入更多的资金来购买整套的高性能存储方案，但是这成本太高了，很多公司后来都会放弃。于是大部分公司都会极力采用后者，就 是避免不必要的IO，缓存就是用来做这样的事的。</p>
<p>将低速介质上的数据放到高速介质上，访问者先访问高速介质，在找不到需要数据时才访问低速介质，以此来提升访问数据的速度，这样的技术就是缓存了。 设在一段时间内有m次没有命中缓存，n次命中，而访问一次缓存的时间是t1， 访问慢速介质的时间是t2，那么为了是缓存有效就得满足不等式： m *  (t1 + t2) + n * t1 &lt; (m + n) * t2， 于是有 m / n &lt; t2 / t1 -1  。由此可见，在介质的速度比一定的情况下，命中比率要高于一定的值，缓存才有效果。提高命中比率，就是要把那些最常用的数据放到缓存里。另一方面，缓存里 数据如果被修改了，就要同步到低速存储介质中，同样的，如果低速存储介质的数据被修改了，也要同步到缓存里。如果加上同步的开销，就需要更高的命中率。提 高命中率和保证数据的同步，是使用缓存的两个艰巨的任务。</p>
<p>豆瓣网使用memcache，还使用专门的nigix服务器来提供图片的服务，其实也是cache。linkedin则使用了数十台大内存的服务器 作为缓存服务器，运行着用c++写的专门的缓存程序。可见这些网站在使用缓存方面都是不遗余力呀。如果能把缓存用好，那么就把一大半的IO问题解决掉了。</p>
<p>IO往往会成为程序的瓶颈，因此，程序员应当时刻的注意，你写的代码是否在进行IO操作，是否可以减少IO操作，等等。</p>
<p>本文来自：<a href="http://www.sulong.info/archives/232">http://www.sulong.info/archives/232</a></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.haohtml.com/index.php/archives/4004/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
