详解Javascript 装载和执行


Posted in Javascript onNovember 17, 2014

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

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

传统的方式

所以,当你写在代码中写下如下的代码:

<script type="text/javascript"

        src="http://coolshell.cn/asyncjs/alert.js"></script>

基本上来说,head里的 <script>标签会阻塞后续资源的载入以及整个页面的生成。我专门做了一个示例你可以看看:示例一。 注意:我的alert.js中只有一句话:alert(“hello world”) ,这更容易让你看到javascript是怎么阻塞后面的东西的。

所以,你知道为什么有很多网站把javascript放在网页的最后面了,要么就是动用了window.onload或是docmuemt ready之类的事件。

另外,因为绝大多数的Javascript代码并不需要等页面,所以,我们异步载入的功能。那么我们怎么异步载入呢?

document.write方式

于是,你可能以为document.write()这种方式能够解决不阻塞的方式。你当然会觉得,document.write了的<script>标签后就可以执行后面的东西去了,这没错。对于在同一个script标签里的Javascript的代码来说,是这样的,但是对于整个页面来说,这个还是会阻塞。 下面是一段测试代码:

<script type="text/javascript" language="javascript">

    function loadjs(script_filename) {

        document.write('<' + 'script language="javascript" type="text/javascript"');

        document.write(' src="' + script_filename + '">');

        document.write('<'+'/script'+'>');

        alert("loadjs() exit...");

    }

    var script = 'http://coolshell.cn/asyncjs/alert.js';

    loadjs(script);

    alert("loadjs() finished!");

</script>

<script type="text/javascript" language="javascript">

   alert("another block");

</script>

你觉得alert的顺序是什么?你可以在不同的浏览器里试一试。这里的想关的测试页面:示例二。

script的defer和async属性

IE自从IE6就支持defer标签,如:

<script defer type="text/javascript" src="./alert.js" >

</script>

对于IE来说,这个标签会让IE并行下载js文件,并且把其执行hold到了整个DOM装载完毕(DOMContentLoaded),多个defer的<script>在执行时也会按照其出现的顺序来运行。最重要的是<script>被加上defer后,其不会阻塞后续DOM的的渲染。但是因为这个defer只是IE专用,所以一般用得比较少。

而我们标准的的HTML5也加入了一个异步载入javascript的属性:async,无论你对它赋什么样的值,只要它出现,它就开始异步加载js文件。但是, async的异步加载会有一个比较严重的问题,那就是它忠实地践行着“载入后马上执行”这条军规,所以,虽然它并不阻塞页面的渲染,但是你也无法控制他执行的次序和时机。你可以看看这个示例去感受一下。

支持 async标签的浏览器是:Firefox3.6+,Chrome 8.0+,Safari 5.0+,IE 10+,Opera还不支持(来自这里)所以这个方法也不是太好。因为并不是所有的浏览器你都能行。

动态创建DOM方式

这种方式可能是用得最多的了。

function loadjs(script_filename) {

    var script = document.createElement('script');

    script.setAttribute('type', 'text/javascript');

    script.setAttribute('src', script_filename);

    script.setAttribute('id', 'coolshell_script_id');

 

    script_id = document.getElementById('coolshell_script_id');

    if(script_id){

        document.getElementsByTagName('head')[0].removeChild(script_id);

    }

    document.getElementsByTagName('head')[0].appendChild(script);

}

 

var script = 'http://coolshell.cn/asyncjs/alert.js';

loadjs(script);

这个方式几乎成了标准的异步载入js文件的方式,这个方式的演示请参看:示例三。这方式还被玩出了JSONP的东东,也就是我可以为script的src指定某个后台的脚本(如PHP),而这个PHP返回一个javascript函数,其参数是一个json的字符串,返回来调用我们的预先定义好的javascript的函数。你可以看一下这个示例:t.js (这个示例是我之前在微博征集的一个异步ajax调用的小例子)

按需异步载入js

上面那个DOM方式的例子解决了异步载入Javascript的问题,但是没有解决我们想让他按我们指定的时机运行的问题。所以,我们只需要把上面那个DOM方式绑到某个事件上来就可以了。

比如:

绑在window.load事件上——示例四

你一定要比较一下示例四和示例三在执行上有什么不同,我在这两个示例中都专门用了个代码高亮的javascript,看看那个代码高亮的的脚本的执行和我的alert.js的执行的情况,你就知道不同了)

window.load = loadjs("http://coolshell.cn/asyncjs/alert.js")

绑在特定的事件上——示例五

<p style="cursor: pointer" onclick="LoadJS()">Click to load alert.js </p>

这个示例很简单了。当你点击某个DOM元素,才会真正载入我们的alert.js。

更多

但是,绑定在某个特定事件上这个事似乎又过了一点,因为只有在点击的时候才会去真正的下载js,这又会太慢了了。好了,到这里,要抛出我们的终极问题——我们想要异步地把js文件下载到用户的本地,但是不执行,仅当在我们想要执行的时候去执行。

要是我们有下面这样的方式就好了:

var script = document.createElement("script");

script.noexecute = true;

script.src = "alert.js";

document.body.appendChild(script);

 

//后面我们可以这么干

script.execute();

可惜的是,这只是一个美丽的梦想,今天我们的Javascript还比较原始,这个“JS梦”还没有实现呢。

所以,我们的程序员只能使用hack的方式来搞。

有的程序员使用了非标准的script的type来cache javascript。如:

<script type=cache/script src="./alert.js"></script>

因为”cache/script”,这个东西根本就不能被浏览器解析,所以浏览器也就不能把alert.js当javascript去执行,但是他又要去下载js文件,所以就可以搞定了。可惜的是,webkit严格符从了HTML的标准——对于这种不认识的东西,直接删除,什么也不干。于是,我们的梦又破了。

所以,我们需要再hack一下,就像N多年前玩preload图片那样,我们可以动用object标签(也可以动用iframe标签),于是我们有下面这样的代码:

function cachejs(script_filename){

    var cache = document.createElement('object');

    cache.data = script_filename;

    cache.id = "coolshell_script_cache_id";

    cache.width = 0;

    cache.height = 0;

    document.body.appendChild(cache);

}

然后,我们在的最后调用一下这个函数。请参看一下相关的示例:示例六

在Chrome下按 Ctrl+Shit+I,切换到network页,你就可以看到下载了alert.js但是没有执行,然后我们再用示例五的方式,因为浏览器端有缓存了,不会再从服务器上下载alert.js了。所以,就能保证执行速度了。

关于这种preload这种东西你应该不会陌生了。你还可以使用Ajax的方式,如:

var xhr = new XMLHttpRequest();

xhr.open('GET', 'new.js');

xhr.send('');

到这里我就不再多说了,也不给示例了,大家可以自己试试去。

最后再提两个js,一个是ControlJS,一个叫HeadJS,专门用来做异步load javascript文件的。

好了,这是所有的内容了,希望大家看过后能对Javascript的载入和执行,以及相关的技术有个了解。同时,也希望各前端高手不吝赐教!

Javascript 相关文章推荐
如何使用jQuery Draggable和Droppable实现拖拽功能
Jul 05 Javascript
jquery如何扑捉回车键触发的事件
Apr 24 Javascript
JQuery自动触发事件的方法
Jun 13 Javascript
手机图片预览插件photoswipe.js使用总结
Aug 25 Javascript
JQuery 动态生成Table表格实例代码
Dec 02 Javascript
基于bootstrap写的一点localStorage本地储存
Nov 21 Javascript
微信小程序实现选项卡效果
Nov 06 Javascript
vue拖拽排序插件vuedraggable使用方法详解
Aug 21 Javascript
JavaScript数组、json对象、eval()函数用法实例分析
Feb 21 Javascript
详解Bootstrap 学习(一)入门
Apr 12 Javascript
vue与django集成打包的实现方法
Nov 11 Javascript
uni-app使用微信小程序云函数的步骤示例
May 22 Javascript
jQuery带箭头提示框tooltips插件集锦
Nov 17 #Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
Nov 17 #Javascript
浅谈jQuery异步对象(XMLHttpRequest)
Nov 17 #Javascript
node.js中watch机制详解
Nov 17 #Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
Nov 16 #Javascript
js构造函数、索引数组和属性的实现方式和使用
Nov 16 #Javascript
JQuery表单验证插件EasyValidator用法分析
Nov 15 #Javascript
You might like
PHP flock 文件锁详细介绍
2012/12/29 PHP
使用PHP遍历文件目录与清除目录中文件的实现详解
2013/06/24 PHP
PHP中使用正则表达式提取中文实现笔记
2015/01/20 PHP
thinkphp框架实现数据添加和显示功能
2016/06/29 PHP
PHP目录与文件操作技巧总结(创建,删除,遍历,读写,修改等)
2016/09/11 PHP
HTTP头隐藏PHP版本号实现过程解析
2020/12/09 PHP
精通Javascript系列之数据类型 字符串
2011/06/08 Javascript
jQuery 选择器详解
2015/01/19 Javascript
JavaScript合并两个数组并去除重复项的方法
2015/06/13 Javascript
js实现点击切换TAB标签实例
2015/08/21 Javascript
JavaScript编码风格指南(中文版)
2016/08/26 Javascript
原生js实现无缝轮播图效果
2017/01/11 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
2017/03/08 Javascript
Vue.extend构造器的详解
2017/07/17 Javascript
ES6模块化的import和export用法方法总结
2017/08/08 Javascript
OkHttp踩坑随笔为何 response.body().string() 只能调用一次
2018/01/08 Javascript
JS运动特效之任意值添加运动的方法分析
2018/01/24 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
2019/06/27 Javascript
微信小程序 腾讯地图SDK 获取当前地址实现解析
2019/08/12 Javascript
vue实现路由监听和参数监听
2019/10/29 Javascript
JS简单表单验证功能完整示例
2020/01/26 Javascript
JavaScript实现轮播图效果
2020/10/30 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
2020/11/16 Javascript
[01:18:21]EG vs TNC Supermajor小组赛B组败者组第一轮 BO3 第一场 6.2
2018/06/03 DOTA
python xml解析实例详解
2016/11/14 Python
python面向对象_详谈类的继承与方法的重载
2017/06/07 Python
Pycharm简单使用教程(入门小结)
2019/07/04 Python
Python PIL读取的图像发生自动旋转的实现方法
2019/07/05 Python
使用pyecharts生成Echarts网页的实例
2019/08/12 Python
戴尔美国官网:Dell
2016/08/31 全球购物
京东港澳售:京东直邮港澳台
2018/01/31 全球购物
String、StringBuffer、StringBuilder有区别
2015/09/18 面试题
毕业生自我鉴定
2013/11/05 职场文书
《望庐山瀑布》教学反思
2014/04/22 职场文书
2015年中学元旦晚会活动方案
2014/12/09 职场文书
人生哲理妙语30条:淡写流年,笑过人生
2019/09/04 职场文书