DosLin's Blog

什么都略懂一点,生活更美好一些

0%

IE6~8作为老去的一代浏览器在国内还占有较高的市场份额。为了使其支持一些次世代浏览器的特性,譬如CSS3的效果,我们需要通过一些hack来实现。

下面我们借助PIE.htc使得IE系列能展现CSS3的一些常见效果:如阴影、渐变等。

Read more »

###优化的必要性

目前的应用比早期Web应用(05年以前)相比更庞大复杂,JavaScript代码量指数级增长。IE6引擎的“静态垃圾回收机制”难以应付JS代码产生的越来越多的对象。
因为JS作为解释性代码以及解释器很少有优化,往往意味着代码怎么写,就被怎么执行。相较于编译性的代码由编译处理器优化,在JS中通常需要我们开发人员自己完成优化工作。

###JS的特点-阻塞

无论JS代码是内嵌(以<script>标签包含)还是从外部文件引入(以<script>标签的src属性引入),该标签一出现就会让页面的下载和渲染暂时停止,等待该脚本解析和执行完成才能继续解析和渲染页面。

优化方案

###将脚本放在页面底部

推荐将所有的<script>标签尽可能放到<body>标签底部,来减少对整个页面下载的影响。
浏览器为了确保内嵌脚本在执行时能获得最精准的样式信息,所以会出现如果内嵌脚本处于引用外链样式表的<link>标签之后会导致页面阻塞去等待样式表下载完成,所以不要把内嵌脚本跟在<link>标签后。

###减少标签数量

因为HTTP请求的额外开销,下载单个100KB的文件比下载4个25KB的文件更块!请试着合并JS文件。
因为上文提到不管内嵌或外链JS,<script>标签元素都会阻塞浏览器,所以内嵌<script>标签数量同样也要限制。

###使用无阻塞脚本(页面加载结束后才去加载执行JS)

合并JS文件可能使得单个JS变大,虽然只产生一个HTTP请求,但会锁死浏览器一大段时间,为了避免此情形,需要采用无阻塞脚本方案逐步加载JS文件。无阻塞即window对象的onload事件触发后才下载脚本。

###延迟脚本

使用 <script> 的 defer 属性(仅适用于IE和Firefox3.5+),该属性指明本元素所含的脚本不会修改DOM,因此代码能安全地延迟执行;

<script defer="defer" type="text/javascript">
    alert("defer");
</script>
<script type="text/javascript">
    alert("script");
</script>
<script type="text/javascript">
    windows.onload=function(){
    alert("load");
};
</script>
  • 动态脚本元素

使用动态创建的 <script> 元素来下载并执行代码;

function loadScript(url, callback){
    var script = document.createElement("script");
    script.type = "text/javascript";
    if (script.readyState) { // IE
        script.onreadystatechange = function() {
            if (/loaded|complete/.test(script.readyState)) {
                script.onreadystatechange = null; // 避免事件执行两次
                callback();
            }
        };
    } else {// 其它浏览器
        script.onload = function() {
        callback();
    };
}

script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}
  • XMLHttpRequest脚本注入

使用 XMLHttpRequest 对象下载js代码并注入到页面;

var xhr = new XMLHttpRequest();
xhr.open("get","file1.js",true);
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
    //2XX表示有响应,304意味着从缓存读取
        if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
            var script = document.createElement("script");
            script.type = "text/javascript";
            script.text = xhr.responseText;
            document.body.appendChild(script);

        }
    }
};

xhr.send(null);

这种方法的主要优点是可以下载JS代码但不会立即执行。由于代码时在<script>标签之外返回的,我们可以把脚本的执行推迟到准备好的时候而且它可跨浏览器。局限性在于它不能跨域执行。

算法分析是关于计算机程序性能和资源利用的理论研究。

If you want to be a good programmer, you just program every day for two years, you will be an excellent programmer.

If you want to be a world-class programmer, you can program every day for ten years, or you can program every day for two years and take an algorithms class.

-Charles Leiserson

下面以经典的排序问题进入这个话题:

Problem sorting

Input: sequence<a1 ,a2,…,an> of numbers

Output: permutation <a1’,a2’,…,an’>

$(such that): a1’≤a2’≤…≤an’

Insertion sort

以下为伪代码(pseudocode):
Insertion Sort(A1…n) // Sorts A[1,…,n] for j←2 to n do key ← A[j] i ← i-1 while i>0 and A[i] > key do A[i+1] ← A[i] i ← i-1 A[i+1] ← key

Read more »

初学Struts2,整理一下本周遇到的关于Struts2的一些注意点。
1.标签中引号的问题
首先对于HTML语言中的标签使用来说,以链接元素举例,现在要为该元素标签的属性href指定值,我们通常以key=”value”,即href=”someurl”的形式。
如果现在要求该url地址的值是非静态的,它的值保存在于服务器端的某个Aciton类中的对象sample的属性url中,我们就需要用到Struts2自带标签类来对此取值,譬如以下述两种方式:

<a href="<s:property value='sample.url'>"></a>
<a href="<s:property value="sample.url">"></a>

因为出现了两种标签——Struts标签与HTML标签,导致了属性区分的包含问题。这就需要借助于单引号与双引号的分隔:如果外围先出现了单引号,那么包含在其中的另一个标签就需要使用双引号,反之亦然。于是乎就有了上述两种形式。当然,这两种形式都无错误之处。不过,如果出现了下面这个情形,上述的表示方式就会有一定问题: 假设我们这边服务端要从数据库中取某个字符,然后在浏览器这边显示,比如数据库中存放”M”与“F”来表示性别。那么为了友好性,显示给用户的需要把相应字符串替换为“男”与“女”。 JSP页面代码部分截取如下:

Read more »

本月中旬开的题,现在终于把坑添好了,Orz。
Java与JavaScript(下文简称JS)除了名称上的相似之外,其它方面也并非风马牛不相及,因为同属OO家族,有些特性还是可以进行相互类比来帮助理解的:例如下面我们所要讨论的回调(Callback):

所谓回调,全称回调函数(callback function)。回,转也。是指函数A的功能片段传递给函数B(注册的过程),当B触发了某条件后,去调用该功能片段的指向(实现),这时A即称为回调函数。如果用Java的方式来叙述的话,就是类A中封装了一个接口InterfaceC的方法,类B按InterfaceC的约定实现该方法后再把自己传回给A,由A进行调用。因为Java没有函数的概念,这时就不是“函数回调”,而是“类回调”了,但是思想还是一样的。网上看到句挺好的解释,回调就是:

If you call me, I will call back.

这样做的好处是什么呢?最显著的一点即是分离方法与具体实现,让调用者与被调者解耦合。

Read more »

前段时间公布了CET的成绩,查了一下,从去年的强迫观看30秒广告缩短到了15秒,谎称正在查询的过程实在令人不齿。

抽空用Java写了一个查询CET成绩的小工具,因为向服务器发送的请求都是一样的,也可以查询日语等其它科目成绩。而今年的验证措施是准考证加姓名,所以批量查询整个考场的成绩暂时无法实现,但查单人成绩可以略去那15秒。可能以后能完成批量查询的功能,所以程序界面底部预留了一点空间——看起来有多行的表格。

伪造查询请求的核心代码主要用到HttpURLConnection类,实现Post很方便,以下是程序运行截图:

下载地址:http://u.115.com/file/dnhrxjbn
因为加了仿mac风格的界面,所以程序比较大,请见谅。

原本想连同jre一起打包封装,但是手动精简后体积多大40M,不甚理想,故放弃。

程序启动时会检测运行环境,没有安装jre的童鞋程序会引导你去下载页下载安装,安装成功后即可正常运行。

现在是2:16A.M.失眠了@_@,更更博文。此刻大脑混沌,作为入门菜鸟,各位多多包涵。

众所周知,我们遍历某个数组中的元素可以用到while{..}、或者for循环结构,当然也可以用到foreach语法_(1)_。

而当我们需要遍历集合(容器)中的元素(例如Collection或者Mao子类实例中的成员)时,就需要请到迭代器接口Iteractor_(2)_出场啦!

接口作为一种契约关系,只要某类实现(implements)了该接口,就意味着此类遵循和获得了该接口制定的标准和功能,而Interator作为一个轻量级对象,实现了它就可以对不同类型的集合进行遍历和操作集合序列中的对象,而如何去取元素就交由hasNext()与next()方法去操心了。

Read more »

7月22日报道:近日,谷歌宣布停止支持Firefox新版本上的Google工具栏,也就是说,用于Firefox 4及更早版本的Google工具栏,将不再为新版本Firefox 5提供支持。谷歌解释,此举是因为Google工具栏曾为Firefox浏览器提供的多种功能,现在已经内置到浏览器,所以谷歌决定放弃为Firefox提供这个已经没有多少附加价值的工具栏。

Firefox5.0正式版几天前发布了,但是一直让人诟病的不向下兼容旧版插件的机制还是没有改善,升级后发现Google工具栏尚不支持新版的火狐浏览器,谷歌官方还未更新,Google不再更新,如有童鞋还想继续在新版火狐中使用Google工具栏,下文提供一个临时解决办法:

Read more »

如果有好友向你求助帮忙解决电脑问题,有时候文字已经无法向对方描述如何解决了,一方面自己表达能力和对方的理解能力有限,另一方面太懒了,所以不得不借助一些远程协助工具来帮好友解决问题。大家最常用的应该是QQ的远程协助了。可是此工具在不同网络环境下效果也有很大差异,常常卡半天,你都看不到对方桌面,两个人干着急。于是就需要借助第三方的远程工具了。

但是很多相关软件不是需要繁琐的被控端设置就是需要注册账号来实现点对点控制,十分不方便。
现在这里向大家推荐一款本人一直用的小工具,使用方便,连接顺畅——协通XT800。
控制端可以选择“协通XT800个人版”进行安装,而被控端只需要下载小巧的”协通XT800远程助手”即可。
程序界面如下:
主控端

被控端

只要对方把账号和授权码发送给你即可等待你的连接啦~

软件下载传送门:http://www.xt800.cn/download

关于无觅的Wordpress插件,可以参考本站文章下方的文章关联显示,开通后可关联到其它站点的相关文章,能为你的小站带来一点流量。另外具体功能可自行Google啦。
请几天偶尔收到无觅官方的邮件,通知本站的审核通过了,并且获得几个邀请名额,需要的童鞋可以留言。
因为邀请码不能直接提取,如果需要开通无觅的各位可以留下邮箱,我看到后会尽快发送的。