Javascript 装载和执行

2013年06月05日陈皓评论 104 条评论 109,245 人阅读

一两个月前在淘宝内网里看到一个优化Javascript代码的竞赛，发现有不少的人对Javascript的执行和装载的基础并不懂，所以，从那天起我就想写一篇文章，但一直耽搁了。自上篇《浏览器渲染原理简介》，正好也可以承前启后。

首先，我想说一下Javascript的装载和执行。通常来说，浏览器对于Javascript的运行有两大特性：1）载入后马上执行，2）执行时会阻塞页面后续的内容（包括页面的渲染、其它资源的下载）。于是，如果有多个js文件被引入，那么对于浏览器来说，这些js文件被被串行地载入，并依次执行。

因为javascript可能会来操作HTML文档的DOM树，所以，浏览器一般都不会像并行下载css文件并行下载js文件，因为这是js文件的特殊性造成的。所以，如果你的javascript想操作后面的DOM元素，基本上来说，浏览器都会报错说对象找不到。因为Javascript执行时，后面的HTML被阻塞住了，DOM树时还没有后面的DOM结点。所以程序也就报错了。

传统的方式

所以，当你写在代码中写下如下的代码：

<script type="text/javascript"
        src="https://coolshell.cn/asyncjs/alert.js"></script>

…

阅读全文 Read More

(66 人打了分，平均分： 4.27 )

一次Ajax查错的经历

2012年08月27日陈皓评论 93 条评论 65,440 人阅读

先说故事，再说想法吧。

我有一朋友做网站，用jQuery的Ajax方法从后端载入一段HTML代码然后动态插入到网页的Div元件中。这个东西太普遍了。jQuery强大的load方法可以完成这个事情。朋友的代码是这么写的：

[javascript]var tab = jQuery("#dynamic_tab");
var url = "/list_ajax/";
tab.load(url);[/javascript]

简单到不能再简单了。在Chrome，Firefox，Safari下运行一点问题也没有，只有IE不行，不管是IE7，IE8，还是IE9。问题的症壮是，使用IE访问那个Ajax的链接，没有问题，但是在jQuery的Ajax方法返回了“undefined”的respons对象。没有任何报错！

怎么搞也搞不定，只好Google了一下——“jQuery load IE”，一看，很多人都在问这个问题。于是开始了散弹枪编程方式。

排在第一的就是StackOverflow被浏览了33K次的这个问题：jQuery’s .load() not working in IE – but fine in Firefox, Chrome and Safari，答案没有被打勾（不靠谱），StackOverflow还有很多人问相似的问题，不过都没有答案。不管三七二十一，先试了一下，散弹枪嘛。试了半天都没有用。

然后上Google查，又看到有人说的IE缓存的问题，什么，要把cache设置成false，或是用下面的方法来解决：

[javascript]var tab = jQuery("#dynamic_tab");
var fuckie = Math.random();
var url = "/list_ajax/"+"?fuckie="+fuckie;
tab.load(url);[/javascript]

反正还是一样，统统不Work，几乎所有的都试了，都不Work。搞了一天的朋友恼怒道：“Microsoft应该快点倒闭吧，产品太烂了”。IE的确是太烂了。

…

阅读全文 Read More

(35 人打了分，平均分： 3.86 )

一些非常有意思的杂项资源

2010年09月28日陈皓评论 45 条评论 42,582 人阅读

下面是一些最近在互联网上看到的一些各式各样的资源和文章，当然，都是英文社区的，本来想每一个写一篇文章，但是觉得一篇文章一句话真没劲，所以，把这些东西合并写成一篇文章，这样有利于减轻本站的负载，也有利于节省网络带宽，同样，也就节省了能力和电力，因此也就很环保，很低碳。呵呵。

先是一个《Windows Internal》第五版的第五章的电子版（英文的），你可以在这里下载。关于其它一些电子书，你可以看看本站的这篇文章《免费电子书列表》、《非常不错的编程技术教程》、《超过100本的linux免费书籍》和《20本最好的Linux免费书籍》

→

http://www.3dtin.com/是一个用纯Javascript搞的一个3D作图的网站，Javascript是越来越强大了。这个演示可以让你看到以后Web应用的潜力。关于Javascript的一些东西，你可以参看本站的这些文章《JS1K 演示》、《又一个Javascript试验田》、《一个Windows 3.1的Web网站》、《哥是玩程序的》。

→

说到这些很酷很炫的东西，大家一定会想到使用Flash，不过，目前的Flash正在受到HTML5的强力挑战，目前，对于HTML5的展示网站很多，让我们看到了HTML5完全可以做出Flash的样子，比如前些天本站说到的这个演示，还有给大家展示的纯HTML5的小游戏，不过，那些都是一些演示和展示罢了。今天在网上看到一个更强大的HTML5游戏，相当有可玩性，大家不妨一去试玩：http://www.phoboslab.org/biolab/

→

HTML5 可以应用的还不只是游戏，这不，有文章指出，用VexFlow还可以很轻松地在网页上发布乐谱。而这个网页还可以让你制作Hi-PoP音乐。

→

说到Web开发，就得要提CSS了，这里有一个在线编辑CSS的网站，很不错，http://css3.mikeplate.com/。关于CSS和Web开发的一些文章，你可以查看本站的CSS的Tag。现在，这种在线的东西是越来越多了，比如：《Emacs配色在线生成器》、《Coderun.com 在线开发IDE》、《正则表达式生成器》、《Ajax开发利器UIzard》、《一个在线的画UML图的网站》。

…

阅读全文 Read More

(18 人打了分，平均分： 2.67 )

Web版的VNC

2010年07月11日陈皓评论 12 条评论 20,394 人阅读

想在Web上远程控制远端的电脑吗？Guacamole开源项目提供了这样的解决方案，其主要使用了HTML5和Ajax。下面是一个载图。如果你能够访问Youtube的话，你可以看看这个视频。

是啊，HTML5强大了，什么都能干了，连Flash也要取代了。现如今，什么事都在往Web上移植了，Chrome也OS了。可以预见在HTML5出来后，未来这样的事情会越来越多，以后的一些移动和掌上设备真的只需要一个Web Browsers.

(9 人打了分，平均分： 2.33 )

Ajax开发利器UIzard

2009年10月22日陈皓评论 4 条评论 11,379 人阅读

正如UIzard这个名字所暗示的，这是一个User Interface 的Wizard，从字面上理解，这是一个做界面的向导。这有什么奇怪的，Dreamwave之流已经是相当的成熟了，还能好得过它？是的，这个开源的项目，也许并没有那些商业软件那么成熟，不过，我想告诉你的是，这个开源软件绝对是值得我们重点关注的一个软件。

你可以理解为这是一个Web开发的IDE，不过其集成了Ajax方面的东西。这并不仅仅简单的是那种“所见即所得”的编辑器。而且，它也不信仅可以让那些非程序员非常简单地创建一个从前端到后端的Web应用，而且，他还可以让你连接数据库，创建非常复杂的布局和时间线，甚至于一些套件（白板，在线的类Word，Excel，PPT等功能），所有这些，你只需要简单的点几下按钮就可以了。真是相当的强大。（下面是个抓图）

UIzard

…

阅读全文 Read More

(9 人打了分，平均分： 1.89 )

7个免费强大的Ajax文件管理器

2009年05月24日陈皓评论 6 条评论 17,887 人阅读

如果你正在开发一个WEB应用，需要一个不错的强大的文件管理器，并且可以简单的定制，那么，下面的这七个免费开源的文件管理器你一会喜欢的。这些文件管理器都很强大，他们全部都支持PHP，Javascript和Ajax，有几个还支持别的WEB开发语言。这些管理理可以让你完成目录文件浏览，搜索，上传/下载，编辑，拷贝，移动，删除等等文件操作功能。