详解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 相关文章推荐
JavaScript高级程序设计 阅读笔记(十七) js事件
Aug 14 Javascript
Javascript 按位取反运算符 (~)
Feb 04 Javascript
js中string转int把String类型转化成int类型
Aug 13 Javascript
触屏中的JavaScript事件分析
Feb 06 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
Nov 25 Javascript
ES6中的数组扩展方法
Aug 26 Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
Sep 18 Javascript
vue 使用Jade模板写html,stylus写css的方法
Feb 23 Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
Mar 17 Javascript
Vue实现的父组件向子组件传值功能示例
Jan 19 Javascript
scrapyd schedule.json setting 传入多个值问题
Aug 07 Javascript
vue 弹出遮罩层样式实例
Jul 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 curl模拟post提交数据示例
2013/12/31 PHP
ci检测是ajax还是页面post提交数据的方法
2014/11/10 PHP
php+ajax无刷新分页实例详解
2015/12/07 PHP
PHP使用php-resque库配合Redis实现MQ消息队列的教程
2016/06/29 PHP
利用php实现一周之内自动登录存储机制(cookie、session、localStorage)
2016/10/31 PHP
phpmyadmin下载、安装、配置教程
2017/05/16 PHP
PHP Trait代码复用类与多继承实现方法详解
2019/06/17 PHP
Jquery下EasyUI组件中的DataGrid结果集清空方法
2014/01/06 Javascript
JavaScript省市联动实现代码
2014/02/15 Javascript
轻松创建nodejs服务器(7):阻塞操作的实现
2014/12/18 NodeJs
jQuery插件animateSlide制作多点滑动幻灯片
2015/06/11 Javascript
javascript中的Function.prototye.bind
2015/06/25 Javascript
深入分析下javascript中的[]()+!
2015/07/07 Javascript
基于jquery css3实现点击动画弹出表单源码特效
2015/08/31 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
2015/10/16 Javascript
jQuery实现只允许输入数字和小数点的方法
2016/03/02 Javascript
JavaScript数组_动力节点Java学院整理
2017/06/26 Javascript
React Native 集成jpush-react-native的示例代码
2017/08/16 Javascript
让axios发送表单请求形式的键值对post数据的实例
2018/08/11 Javascript
Puppeteer环境搭建的详细步骤
2018/09/21 Javascript
react实现复选框全选和反选组件效果
2020/08/25 Javascript
Python Sleep休眠函数使用简单实例
2015/02/02 Python
python查找指定文件夹下所有文件并按修改时间倒序排列的方法
2018/10/21 Python
python使用magic模块进行文件类型识别方法
2018/12/08 Python
python map比for循环快在哪
2020/09/21 Python
多视角3D可旋转的HTML5 Logo动画
2016/03/02 HTML / CSS
Bibloo匈牙利:女装、男装、童装及鞋子和配饰
2019/04/14 全球购物
益模软件Java笔试题
2012/03/27 面试题
main 主函数执行完毕后,是否可能会再执行一段代码,给出说明
2012/12/05 面试题
班组长安全职责
2014/01/05 职场文书
最新会计专业求职信范文
2014/01/28 职场文书
《邮票齿孔的故事》教学反思
2014/02/22 职场文书
辩论赛主持词
2014/03/18 职场文书
《特殊的葬礼》教学反思
2014/04/27 职场文书
公司董事任命书
2015/09/21 职场文书
React forwardRef的使用方法及注意点
2021/06/13 Javascript